A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
22tokens
11type steps
1radius steps
11pxspacing base
Fitbit, in one page
Fitbit's iOS app is a warm, encouraging health dashboard organized around a single screen: Today. The atmosphere is "supportive coach," not "clinical chart" — the app celebrates progress, nudges gently, and turns biometric data into friendly, glanceable cards. The dark theme is a deep teal-black (#001017 → #002A3A) that carries the brand's cyan undertone rather than a neutral gray, so the whole product feels distinctly Fitbit even before any color appears. Content is laid out as a vertical scroll of generously rounded cards and tiles (16–24pt radii), each one a self-contained "stat object" with a big number, a metric icon, a short label, and a progress ring or trend chip.
The brand color is Fitbit Teal (#00B0B9) — it is the logo, the steps/activity color, the primary CTA, and the active tab. On dark backgrounds it brightens to a more luminous teal (#21D9CE) for text and links so it never muddies. The defining system characteristic is per-metric color coding: every health metric owns one fixed hue and keeps it everywhere it appears (tile icon, ring, chart line, detail screen). Steps/Activity = teal #00B0B9, Heart Rate = coral #FF6B81, Sleep = purple #7C5CFF, Daily Readiness = lime #B8E986, Active Zone Minutes = orange #FF8A3D, Calories = gold #FFC233. This means a user can recognize "that's my sleep data" purely by the purple, anywhere in the app — color is a navigational and mnemonic system, not decoration.
The signature visual moments are: the steps ring hero at the top of Today (a large circular progress ring with the step count centered and an encouraging side message), the grid of metric tiles (rounded squares, each in its metric color), the Sleep score card (a 0–100 score with a stage breakdown), and the Daily Readiness card (a 0–100 lime score with a plain-language recommendation). Progress rings are the recurring shape language — Fitbit thinks in rings: steps, sleep stages, zone minutes, hydration.
Typography is a rounded-friendly geometric sans. Fitbit uses a humanist face close to DM Sans for everything: huge numbers for hero metrics (40–44pt bold, tight tracking), warm 22pt greetings ("Good morning, Maya"), 18pt bold card titles, and approachable 16pt body. Numbers are the loudest element on every screen — the design philosophy is "make the number the hero, make the message kind."
Key Characteristics:
- Deep teal-black dark canvas (
#001017→#002A3A) — cyan undertone, not neutral gray - Fitbit Teal (
#00B0B9) brand / steps / CTA; brightens to#21D9CEfor text on dark - Per-metric color system: each metric owns a fixed hue everywhere (steps teal, HR coral, sleep purple, readiness lime, zone orange, calories gold)
- Today dashboard: vertical scroll of generously rounded cards & tiles (16–24pt)
- Steps ring hero — big circular progress ring + centered count + encouraging side copy
- Metric tile grid — rounded squares, big number, metric icon chip, sub-line
- Sleep score (0–100) + stage breakdown; Daily Readiness score (0–100, lime)
- Progress rings everywhere — the recurring shape language
- Trend chips — "▲ 12% vs last week" pill in metric color
- Encouraging, plain-language coaching copy ("You're close!", "Good to go")
- Bottom tab bar (4): Today, Coach, Community, You
- Pill-shaped CTAs; big bold numbers as the visual hero of every card
Do's and don'ts
Do
- Use the deep teal-black canvas
#001017/#002A3A— cyan undertone, not neutral gray - Make Fitbit Teal
#00B0B9the brand/steps/CTA; brighten to#21D9CEfor text/links on dark - Give every metric its fixed hue and keep it everywhere (tile, ring, chart, detail) — color is a mnemonic
- Make the big number the visual hero of every card (40–44pt bold, tight tracking)
- Use progress rings as the recurring shape language for goals
- Use generously rounded cards (16–24pt) and pill buttons — soft, encouraging
- Write warm, plain-language coaching copy ("You're close!", "Good to go")
- Animate the ring sweep + number count-up on appear; celebrate goal hits with confetti + haptic
- Put deep ink (
#001017) on teal buttons and metric-color chips — never white - Use a trend chip in the metric color to show week-over-week change
Don't
- Don't use a neutral-gray dark theme — the canvas must carry the teal cast
- Don't let metrics share or swap colors — sleep is always purple, HR always coral
- Don't make labels/units compete with the hero number — keep them quieter and smaller
- Don't use clinical phrasing ("78% goal completion") — Fitbit speaks like a kind coach
- Don't use sharp or small radii — cards are 16–24pt, buttons are full pills
- Don't put white text on the teal button or on metric-color chips (use deep ink)
- Don't draw heavy borders/shadows around every tile — hue + surface step does the separation
- Don't skip the ring-sweep / count-up animation — the "draw" is core to the feel
- Don't invert or recolor metric hues in light mode — they're identical across themes
- Don't bury the encouraging message — the kind line is as important as the number
- Don't use rectangular progress bars where Fitbit uses rings (steps, sleep, zone, readiness)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Fitbit design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Fitbit Teal: #00b0b9
- Teal Bright: #21d9ce
- Teal Pressed: #008a91
- Teal Tint: #00b0b9
- Canvas: #001017
- Surface 1: #002a3a
- Surface 2: #00384d
- Surface 3: #0a475e
- Divider: #143e50
- Canvas Light: #ffffff
Type:
- families: DM Sans, Numerals, Fallback Stack, Dynamic Type
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 600, 700
Shape:
- radius: 16
Spacing: 11, 12, 13, 16
Rules:
- Use the deep teal-black canvas `#001017`/`#002A3A` — cyan undertone, not neutral gray
- Make Fitbit Teal `#00B0B9` the brand/steps/CTA; brighten to `#21D9CE` for text/links on dark
- Give every metric its fixed hue and keep it everywhere (tile, ring, chart, detail) — color is a mnemonic
- Make the big number the visual hero of every card (40–44pt bold, tight tracking)
- Use progress rings as the recurring shape language for goals
- Use generously rounded cards (16–24pt) and pill buttons — soft, encouraging
Avoid:
- Don't use a neutral-gray dark theme — the canvas must carry the teal cast
- Don't let metrics share or swap colors — sleep is always purple, HR always coral
- Don't make labels/units compete with the hero number — keep them quieter and smaller
- Don't use clinical phrasing ("78% goal completion") — Fitbit speaks like a kind coach
- Don't use sharp or small radii — cards are 16–24pt, buttons are full pills
- Don't put white text on the teal button or on metric-color chips (use deep ink)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand / Primary (Interactive)
- Fitbit Teal (
#00B0B9): Brand color, steps/activity metric, primary CTA background, active tab (light surfaces). - Teal Bright (
#21D9CE): On-dark variant for text, links, active tab label, and ring on the dark canvas (keeps legibility). - Teal Pressed (
#008A91): Pressed state of teal buttons. - Teal Tint (
#00B0B926): 15% teal wash behind selected rows / teal chips.
Per-Metric Hues (fixed across all themes & surfaces)
| Metric | Color | Use |
|---|---|---|
| Steps / Activity | #00B0B9 | Steps ring, distance, floors |
| Heart Rate | #FF6B81 | HR tile, BPM chart, cardio zones |
| Sleep | #7C5CFF | Sleep score, stages, sleep ring |
| Daily Readiness | #B8E986 | Readiness score ring & card |
| Active Zone Minutes | #FF8A3D | Zone minutes ring, weekly target |
| Calories | #FFC233 | Calories burned tile & chart |
| SpO2 / Stress | #4FC3F7 | Health Metrics secondary tiles |
Canvas & Surfaces (Dark — default)
- Canvas (
#001017): Primary background — deep teal-black. - Surface 1 (
#002A3A): Cards, metric tiles, sheets. - Surface 2 (
#00384D): Elevated/nested surfaces, selected tile. - Surface 3 (
#0A475E): Progress-ring track, pressed rows, chip backgrounds. - Divider (
#143E50): 1pt hairlines.
Canvas & Surfaces (Light — secondary theme)
- Canvas Light (
#FFFFFF): Light background. - Surface 1 Light (
#F2F7F8): Cards, tiles. - Surface 3 Light (
#E3EEF0): Ring tracks, chips. - Divider Light (
#DCE7E9): Hairline dividers.
Text
- Text Primary Dark (
#EAF6F9): Primary text, hero numbers (near-white with a faint cyan cast). - Text Secondary Dark (
#8AAEB8): Labels, metadata, sub-lines. - Text Tertiary Dark (
#5C808B): Disabled, very low-emphasis. - Text Primary Light (
#0B2A33): Primary text on light. - Text Secondary Light (
#577079): Secondary text on light.
Semantic (status)
- Success / On-track (
#3FC7A6): Goal hit, positive trend (teal-leaning green). - Warning / Behind (
#FF8A3D): Behind target (reuses Zone orange). - Alert / High (
#FF6B81): Elevated HR alert, irregular reading (reuses HR coral). - Info (
#21D9CE): Informational tips (reuses Teal Bright).
Color → Role Table
| Role | Dark | Light |
|---|---|---|
| Canvas | #001017 | #FFFFFF |
| Surface 1 | #002A3A | #F2F7F8 |
| Surface 3 / ring track | #0A475E | #E3EEF0 |
| Divider | #143E50 | #DCE7E9 |
| Brand / CTA | #00B0B9 | #00B0B9 |
| On-dark teal (text/link) | #21D9CE | #008A91 |
| Text primary | #EAF6F9 | #0B2A33 |
| Text secondary | #8AAEB8 | #577079 |
| Heart Rate | #FF6B81 | #FF6B81 |
| Sleep | #7C5CFF | #7C5CFF |
| Readiness | #B8E986 | #B8E986 |
Type scaleRead the full spec
Font Family
- Primary: Fitbit's brand sans — use DM Sans (by Colophon Foundry / Indian Type Foundry, SIL OFL) as the open stand-in. A geometric, slightly rounded humanist optimized for friendly numeric display.
- Numerals: DM Sans with tabular figures for any tabular data (charts, lists); proportional for big hero numbers.
- Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Metric Hero | DM Sans | 44pt | 700 | 1.0 | -1.0pt | Big number inside steps ring / detail header |
| Screen Title | DM Sans | 32pt | 700 | 1.15 | -0.5pt | "Today", "Sleep" large nav title |
| Tile Value | DM Sans | 26pt | 700 | 1.0 | -0.5pt | The big number on each metric tile |
| Greeting | DM Sans | 22pt | 700 | 1.2 | -0.3pt | "Good morning, Maya" |
| Card Title | DM Sans | 18pt | 700 | 1.25 | -0.1pt | "Daily Readiness", "Sleep Score" |
| Body | DM Sans | 16pt | 400 | 1.5 | 0pt | Coaching copy, descriptions |
| Tile Value Inline | DM Sans | 15pt | 600 | 1.3 | 0pt | "68 bpm · Resting" |
| Label | DM Sans | 14pt | 400 | 1.4 | 0pt | "of 10,000 steps", metadata |
| Unit Suffix | DM Sans | 13pt | 600 | 1.0 | 0pt | "bpm", "min", "h" after a value |
| Caption / Chip | DM Sans | 12pt | 600 | 1.35 | 0.1pt | "Score 84 · Good", trend chips |
| Tab Label | DM Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Button | DM Sans | 15pt | 700 | 1.0 | 0pt | Primary / secondary |
Principles
- The number is the hero: hero metrics are 40–44pt bold with tight negative tracking — the loudest element on the card. Labels and units are deliberately quieter.
- Warm, plain language: greetings and coaching copy are sentence case, friendly, never clinical ("You're close!" not "Step goal: 78% complete").
- Weight concentrated at 400 / 600 / 700: body 400, sub-values/units 600, all titles & numbers 700. No thin, no black.
- Tight tracking on display, normal on body: big numbers and titles get negative letter-spacing for a modern feel; body stays at 0.
- Units are subordinate: a unit ("bpm", "min") is rendered ~half the size and a step lighter than its value, often baseline-aligned.
- Dynamic Type: greeting, card titles, body, labels scale; hero/tile numbers scale one step then truncate; tab labels and unit suffixes stay FIXED.
Components and layoutRead the full spec
Buttons
Primary Button (Log Activity / Start / Continue)
- Shape: Fully rounded pill (radius 500pt)
- Background:
#00B0B9(Fitbit Teal) - Text:
#001017(deep ink on teal — high contrast, never white) - Padding: 13pt vertical, 28pt horizontal; full-width on forms (height 52pt)
- Font: DM Sans 15pt weight 700
- Pressed: background
#008A91+ scale 0.98 - Disabled: background
#00B0B9at 35% opacity, text#001017at 50%
Secondary / Outline Button (View Trends)
- Background: transparent; Text
#21D9CE(on dark) /#008A91(on light) - Border: 1.5pt
#21D9CE - Corner radius: pill; Padding: 11pt / 22pt
- Font: DM Sans 14pt weight 700
- Pressed: background
#00B0B926
Ghost Button (Skip / Dismiss)
- Background:
#0A475E(Surface 3); Text#EAF6F9 - Corner radius: pill; Padding: 12pt / 20pt
- Font: DM Sans 14pt weight 600
- Pressed: lightens ~10%
Text Button (See all insights)
- Background: transparent; Text
#21D9CE; Font DM Sans 14pt weight 700; no underline - Pressed: text dims to 70%
Core Atoms
Progress Ring (the signature shape)
- Circular stroke, rounded line caps, stroke width ~9–11pt
- Track:
#0A475E(Surface 3) on dark /#E3EEF0on light - Progress: the metric's fixed color
- Centered content: big number + small label, or a score
- Fills clockwise from 12 o'clock; overshoot (>100%) wraps with a small overlap tick
Metric Tile
- Rounded square card, 20pt radius,
#002A3Abg, 16pt padding - Top row: metric-color icon chip (24pt, 7pt-radius rounded square,
#001017glyph) + label DM Sans 12pt w600#8AAEB8 - Big value DM Sans 26pt w700
#EAF6F9with subordinate unit - Sub-line DM Sans 12pt
#5C808B
Metric Icon Chip
- 24pt rounded square (radius 7pt) filled with the metric color; glyph in
#001017(deep ink) for contrast
Trend Chip
- Pill, metric-color @15% bg, metric-bright text 11–12pt w700, leading ▲/▼ glyph — "▲ 12% vs last week"
Score Badge
- Circular outline (4pt stroke in the metric color) with the 0–100 number centered in the metric color, used for Sleep & Readiness
Tag / Status Pill
- "Good", "On track", "Behind" — pill, semantic color @15% bg, semantic text 12pt w700
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#001017at 96% with 1pt top border#143E50 - Tabs (4): Today, Coach, Community, You
- Icon size: 22pt
- Active:
#21D9CE(filled icon + bright-teal label) - Inactive:
#5C808B(outline icon + tertiary label) - Labels: DM Sans 10pt w600, always shown
- No tint pill — just an icon fill + color change
Top of Today (no nav bar)
- Today opens directly into content with a greeting + avatar row (no chrome bar)
- On detail screens: 44pt + safe area nav, leading back chevron
#EAF6F922pt, center title DM Sans 18pt w700, trailing share/⋯
Segmented Range Control (Day / Week / Month)
- Pill track
#0A475E; selected thumb#00B0B9with#001017text; used on metric detail charts
Input Fields
Search Bar (Discover / Community)
- Height: 40pt; Background:
#0A475E; Border: none; Corner radius: 999pt (full pill) - Leading
magnifyingglass16pt#8AAEB8 - Placeholder: "Search" DM Sans 14pt
#8AAEB8 - Focus: 1.5pt
#21D9CEborder
Goal / Value Input (set step goal, bedtime)
- Large centered DM Sans value (32–40pt)
#EAF6F9; stepper−/+36pt circular#0A475Ebuttons flanking - Or a wheel/picker themed in teal for time goals
Log Entry Field (weight, water)
- Height: 52pt; Background:
#002A3A; Corner radius: 16pt; value DM Sans 18pt w600; trailing unit#8AAEB8 - Error: 1.5pt
#FF6B81border + helper#FF6B8112pt
Distinctive Components
Steps Ring Hero
- Large card (24pt radius,
#002A3A) with a ~116pt progress ring on the left - Ring track
#0A475E, progress#00B0B9, rounded caps - Centered: step count DM Sans 26pt w700 + "of 10,000 steps" 11pt
#8AAEB8 - Right side: encouraging headline DM Sans 15pt w700 + supporting line 13pt
#8AAEB8+ a trend chip - Tapping opens the steps detail with a Day/Week/Month chart
Metric Tile Grid
- 2-column grid of metric tiles (Heart Rate, Sleep, Active Zone, Calories), each in its own color
- Each tile is tappable → metric detail screen
Sleep Score Card
- 18pt-radius card; left: score badge (0–100) in sleep purple
#7C5CFF; right: "7h 24m · Good" + a horizontal stacked stage bar (Deep / Light / REM / Awake) using purple shades - Tap → sleep stages timeline
Daily Readiness Card
- Distinct gradient card (deep green
#0E3A2E → #14564A) with a lime score ring (#B8E986, 0–100) and a plain-language recommendation ("Good to go. Your body is ready for a moderate workout today.")
Coaching Banner
- Full-width rounded (20pt) card with a friendly headline + teal CTA pill — celebrates streaks, suggests workouts
Active Zone Minutes Ring
- Weekly ring in zone orange
#FF8A3Dwith current/goal minutes centered; a small flame/lightning glyph
Stat Chart (detail screens)
- Bar or line chart in the metric color on a
#001017plot; gridlines#143E50; rounded bar caps; selected bar shows a floating value bubble in the metric color; Day/Week/Month segmented control above
Streak / Badge
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Steps ring ~100pt; tiles stay 2-up but tighter padding |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; greeting starts below it |
| iPhone 15/16 Pro Max | 430pt | Steps ring ~130pt; larger hero numbers |
| iPad (portrait) | 768pt | 3-column tile mosaic; steps ring + readiness side-by-side |
| iPad (landscape) | 1024pt+ | 4-column dashboard; charts expand to full width |
Dynamic Type
- Greeting, card titles, body, labels: scale with Dynamic Type
- Hero number & tile value: scale one step, then shrink-to-fit / truncate (layout-bounded)
- Unit suffixes, tab labels, trend-chip text: FIXED
- Ring center text: scales within the ring; ring geometry fixed
Orientation
- Portrait default
- Metric detail / chart screens support landscape (wider chart)
- Today and tab screens lock portrait
Touch Targets
- Metric tile: full-tile tap (≥120pt tall)
- Tab icons: 22pt glyph, 44pt+ hit
- Pill buttons: ≥48pt tall
- Stepper
−/+: 36pt circle, 44pt hit - Segmented control segments: ≥44pt tall
Safe Area Handling
- Top: greeting/avatar row starts below safe area + Dynamic Island
- Bottom: tab bar + home indicator respected
- Keyboard: log/goal inputs scroll above keyboard; the save pill stays visible
- Sides: 20pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-fitbit {--page-bg: #001017;
--page-bg-gradient: none;
--text-color: #8ca3ac;
--heading-color: #8ca3ac;
--link-color: #00b0b9;
--link-hover-color: #007f86;
--border-color: #192a32;
--card-bg: #001017;
--card-shadow: 0 1px 2px rgba(140,163,172,0.06);
--card-hover-shadow: 0 6px 18px rgba(140,163,172,0.12);
--header-bg: #14232a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #001017;
--footer-text-color: #6d8690;
--button-bg: #00b0b9;
--button-text-color: #000000;
--button-hover-bg: #007f86;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #081920;
--button-secondary-text-color: #8ca3ac;
--button-secondary-hover-bg: #112229;
--button-secondary-border: 1px solid #192a32;
--prompt-bg: #07171e;
--prompt-text-color: #8ca3ac;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- recruit 83.0%
- kansai airport 81.3%
- plenty of fish 81.1%
- daikin 77.5%
- revolut 76.1%
Where this came from
- Source document
ios/design-md/fitness/fitbit/DESIGN.md· 24.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.