Degree Daddy
Design System Reference
Cold plunge and sauna tracking app for iOS that connects to Strava and Apple Health.
Overview
Degree Daddy is a cold plunge and sauna tracking app for iOS and watchOS. The marketing website uses a dark-first design language built on a deep navy foundation, with glacier blue as the primary accent and a warm orange for secondary emphasis. The system prioritizes contrast, clarity, and a premium feel that reflects the precision of the tracking experience.
Colors
Backgrounds
Brand
Text
Semantic
Gradients
Typography
The type system uses Inter across all weights (400–800). Headings use extrabold (800) with tight tracking for impact. Body text uses regular weight at 14px with generous 1.7 line height for readability on dark backgrounds.
Spacing & Layout
Spacing Scale (base unit: 4px)
Border Radius
Container
Buttons
Primary
Secondary
Ghost
App Store & Danger
Navigation
Fixed top navigation with frosted-glass background (backdrop-filter: blur(16px) saturate(180%)), 64px height, and a subtle bottom border. CTA button uses glacier blue pill style.
Hero Section
Track Every Degree.
Own Your Recovery.
Precision cold plunge and sauna tracking for iPhone and Apple Watch. Monitor temperature, duration, and trends.
Hero uses a top-center radial gradient glow in glacier blue, centered text layout, section badge, and a two-button CTA row. The glow creates depth without overwhelming the typography.
Feature Cards
Temperature Tracking
Real-time water and air temperature monitoring during your cold plunge and sauna sessions.
Session Timer
Precision timer with haptic feedback on Apple Watch. Set targets and track your progress over time.
Health Integration
Syncs with Apple Health to log sessions alongside heart rate, HRV, and recovery metrics.
Cards use the surface background with frost border, 32px padding, and 16px border-radius. On hover: border shifts to a glacier blue tint, card lifts 4px, and a deep shadow appears. Icon containers are 48px squares with tinted backgrounds.
Works With Badges
Integration badges use the same surface/frost treatment as cards. Each contains a 32px colored icon, a bold label, and a muted sublabel. Hover shifts the border to glacier blue.
FAQ Accordion
Accordion uses the surface container with individual items separated by frost borders. Questions are semibold at 15px; answers appear below in secondary text. The chevron rotates 180° on open with a 0.2s ease transition.
Device Mockups
Phone frames use 32px border-radius with a 4px frost border and deep device shadow. Watch frames use 36px radius for the rounded rectangular shape. Both float with a 6s alternating ease-in-out animation. Screen content uses the navy background with temperature displays in the brand accent colors.
Footer
CSS Variables
--navy: #0f172a;
--surface: #1e293b;
--surface-hover: #263347;
--frost: #334155;
--frost-light: #475569;
/* Brand */
--glacier: #3b82f6;
--glacier-hover: #2563eb;
--orange: #ff5f1f;
--orange-hover: #e5520f;
--green: #22c55e;
/* Text */
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
/* Semantic */
--warning: #f59e0b;
--error: #ef4444;
/* Radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 32px;
/* Shadows */
--shadow-card: 0 4px 16px rgba(0,0,0,0.15);
--shadow-card-hover: 0 24px 48px rgba(0,0,0,0.2);
--shadow-device: 0 20px 50px rgba(0,0,0,0.4);
--shadow-button: 0 8px 24px rgba(255,255,255,0.12);
Tailwind Mapping
The JSON deliverable includes a tailwind section with theme.extend mappings and componentRecipes. Import the JSON into your tailwind.config.js to get design-system-aligned utilities and component classes.
Color Utilities
| Token | Tailwind Class | Value |
|---|---|---|
| Navy BG | bg-navy | #0f172a |
| Surface | bg-navy-800 | #1e293b |
| Frost Border | border-frost | #334155 |
| Glacier Blue | bg-glacier / text-glacier | #3b82f6 |
| Orange | bg-ember / text-ember | #ff5f1f |
| Text Primary | text-navy-50 | #f8fafc |
| Text Secondary | text-navy-400 | #94a3b8 |
| Text Muted | text-navy-500 | #64748b |
Typography Utilities
| Level | Tailwind Class | Spec |
|---|---|---|
| H1 | text-hero | clamp(2rem, 4vw, 3rem) / 800 / 1.1 |
| H2 | text-h2 | clamp(1.75rem, 3vw, 2.5rem) / 800 / 1.15 |
| H3 | text-h3 | clamp(0.9rem, 1.4vw, 1.05rem) / 600 / 1.3 |
| Body | text-body | 0.875rem / 400 / 1.7 |
| Caption | text-caption | 0.75rem / 500 / uppercase |
Spacing & Layout Utilities
| Token | Tailwind Class | Value |
|---|---|---|
| Section padding | py-section | clamp(48px, 8vw, 80px) |
| Container | max-w-site | 1280px |
| Content | max-w-content | 640px |
| Card radius | rounded-card | 16px |
| Button radius | rounded-button | 12px |
| Device radius | rounded-device | 32px |
Shadow Utilities
| Token | Tailwind Class | Value |
|---|---|---|
| Card | shadow-card | 0 4px 16px rgba(0,0,0,0.15) |
| Card Hover | shadow-card-hover | 0 24px 48px rgba(0,0,0,0.2) |
| Device | shadow-device | 0 20px 50px rgba(0,0,0,0.4) |
| Button | shadow-button | 0 8px 24px rgba(255,255,255,0.12) |
| Glow Blue | shadow-glow-blue | 0 0 40px rgba(59,130,246,0.25) |
| Glow Orange | shadow-glow-orange | 0 0 40px rgba(255,95,31,0.2) |
Component Recipes
The JSON includes pre-composed Tailwind class strings under tailwind.componentRecipes. These map directly to the components documented above:
| Component | Recipe Key |
|---|---|
| Primary Button | buttonPrimary |
| Secondary Button | buttonSecondary |
| Ghost Button | buttonGhost |
| App Store Button | buttonAppStore |
| Feature Card | featureCard |
| Section Badge | sectionBadge |
| Navigation Bar | nav |
| Nav Link | navLink |
| Works With Badge | worksWithBadge |
| FAQ Item | faqItem |
| Footer | footer |
| Hero Section | heroSection |