Fitbit DESIGN.md

1. Visual Theme & Atmosphere

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 #21D9CE for 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

2. Color Palette & Roles

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)

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

3. Typography Rules

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

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.

4. Component Stylings

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 #00B0B9 at 35% opacity, text #001017 at 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 / #E3EEF0 on 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, #002A3A bg, 16pt padding
• Top row: metric-color icon chip (24pt, 7pt-radius rounded square, #001017 glyph) + label DM Sans 12pt w600 #8AAEB8
• Big value DM Sans 26pt w700 #EAF6F9 with 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: #001017 at 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 #EAF6F9 22pt, center title DM Sans 18pt w700, trailing share/⋯

Segmented Range Control (Day / Week / Month)

• Pill track #0A475E; selected thumb #00B0B9 with #001017 text; used on metric detail charts

Input Fields

Search Bar (Discover / Community)

• Height: 40pt; Background: #0A475E; Border: none; Corner radius: 999pt (full pill)
• Leading magnifyingglass 16pt #8AAEB8
• Placeholder: "Search" DM Sans 14pt #8AAEB8
• Focus: 1.5pt #21D9CE border

Goal / Value Input (set step goal, bedtime)

• Large centered DM Sans value (32–40pt) #EAF6F9; stepper −/+ 36pt circular #0A475E buttons 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 #FF6B81 border + helper #FF6B81 12pt

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 #FF8A3D with current/goal minutes centered; a small flame/lightning glyph

Stat Chart (detail screens)

• Bar or line chart in the metric color on a #001017 plot; gridlines #143E50; rounded bar caps; selected bar shows a floating value bubble in the metric color; Day/Week/Month segmented control above

Streak / Badge

• Circular badge with a metallic-ish fill and a number of days; celebratory confetti micro-animation on new milestone

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40
• Screen horizontal inset: 20pt
• Card internal padding: 16–22pt; inter-card vertical gap: 16pt
• Tile grid gap: 12pt
• Greeting block to first card: 14pt

Grid & Container

• iPhone: 20pt horizontal insets; cards are inset (not full-bleed) so rounded corners read
• Metric tiles: 2-column responsive grid
• iPad: multi-column tile grid (3–4 across); Today becomes a dashboard mosaic
• Charts: full-width within their card, 16pt internal padding

Whitespace Philosophy

• Cards as breathing stat objects: every metric lives in its own generously-padded rounded card with air around it — nothing is edge-to-edge or cramped
• The number gets space: hero/tile numbers have generous internal padding so the big figure dominates
• Rounded everything: 16–24pt card radii and pill buttons create a soft, encouraging, non-clinical feel
• Color does the grouping: metric color (not borders or heavy dividers) ties a metric's tile, ring, and chart together

Border Radius Scale

• Square (0pt): chart plot baselines, full-bleed dividers
• Subtle (8pt): small chips, metric icon chip (~7pt)
• Standard (12pt): inputs, small inner elements
• Tile (16–20pt): metric tiles, content cards
• Hero Card (24pt): steps-ring hero, large feature cards
• Pill (500pt): all buttons, search bar, segmented controls, trend chips
• Ring (50%): progress rings, score badges, avatars

6. Depth & Elevation

Fitbit is soft and mostly flat — depth comes from rounded surface tiles on the teal-black canvas plus very gentle shadows. The vibe is "calm and tactile," never harsh.

Shadow Philosophy: Shadows are minimal and soft — they exist to lift sheets and the occasional feature card, never to outline every tile. On the teal-black canvas, color-coded tiles separate themselves by hue and the slightly lighter #002A3A surface, so shadows stay subtle. Floating sheets also get a 1pt #143E50 border as a secondary cue.

Motion

• Ring fill: on screen appear, the progress ring sweeps from 0 to its value over 900ms ease-out (a satisfying "draw"); on goal-hit it pulses once and triggers a success haptic + brief confetti
• Number count-up: hero/tile numbers count up from 0 to the value over ~700ms ease-out on first appearance
• Card stagger-in: Today cards fade + 8pt slide-up, staggered 40ms apart top-to-bottom
• Tile tap: tile scales 1.0 → 0.97 → 1.0 (120ms) then pushes to detail (300ms iOS push)
• Trend chip: appears with a tiny pop (scale 0.8 → 1.0, 180ms)
• Sleep stage bar: segments grow left-to-right in sequence on appear (600ms total)
• Pull-to-refresh: teal ring spinner; haptic on trigger; cards re-stagger
• Goal celebration: full-screen confetti + a centered ring "complete" animation + success haptic when a daily goal is reached
• Range switch (Day/Week/Month): chart cross-fades + bars re-grow over 400ms
• Haptics: soft success on goal hit, selection tick on range/segment change, light impact on tile tap, celebratory notification haptic on milestone

7. Do's and Don'ts

Do

• 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
• 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)

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (dark): #001017; Surface 1: #002A3A; Surface 3 / ring track: #0A475E; Divider: #143E50
• Brand / CTA: #00B0B9 (pressed #008A91); on-dark text/link: #21D9CE
• Steps/Activity: #00B0B9 · Heart Rate: #FF6B81 · Sleep: #7C5CFF · Readiness: #B8E986 · Active Zone: #FF8A3D · Calories: #FFC233
• Text primary: #EAF6F9 / secondary #8AAEB8 / tertiary #5C808B
• Canvas (light): #FFFFFF; text primary light #0B2A33; on-light teal #008A91

Example Component Prompts

• "Build the Fitbit steps-ring hero in SwiftUI: a 24pt-radius card #002A3A, 22pt padding, HStack. Left: a 116pt ZStack ring — a Circle().stroke(Color(hex:0x0A475E), lineWidth: 11) track and a Circle().trim(from: 0, to: progress).stroke(Color(hex:0x00B0B9), style: StrokeStyle(lineWidth: 11, lineCap: .round)).rotationEffect(.degrees(-90)); centered VStack with step count in DM Sans 26pt w700 #EAF6F9 and 'of 10,000 steps' in 11pt #8AAEB8. Right: VStack — 'You're close!' DM Sans 15pt w700, '2,158 steps to hit your daily goal.' 13pt #8AAEB8, and a trend chip pill (#00B0B9 @15% bg, #21D9CE text, '▲ 12% vs last week'). Sweep the ring 0→progress over 900ms ease-out on appear."

• "Create a Fitbit metric tile: 20pt-radius card #002A3A, 16pt padding. Top row: a 24pt rounded-7 chip filled #FF6B81 (Heart Rate color) with a heart glyph in #001017, then 'Heart Rate' in DM Sans 12pt w600 #8AAEB8. Big value 68 in DM Sans 26pt w700 #EAF6F9 with a subordinate bpm (13pt w600 #8AAEB8). Sub-line 'Resting · 52–148 today' in DM Sans 12pt #5C808B. Number counts up from 0 over 700ms on appear. Whole tile is tappable to a detail screen."

• "Build the Fitbit Daily Readiness card: a 20pt-radius card with a LinearGradient([#0E3A2E, #14564A], topLeading→bottomTrailing). Left: a 60pt circle with a 4pt #B8E986 stroke and the score '78' centered in #B8E986 DM Sans 22pt w700. Right: 'Daily Readiness' DM Sans 15pt w700 #EAF6F9 and 'Good to go. Your body is ready for a moderate workout today.' DM Sans 12pt #A9D9C8."

• "Render the Fitbit Sleep Score card: 18pt-radius #002A3A. Left: a circular 0–100 score badge in sleep purple #7C5CFF (4pt stroke, number centered in purple). Right: '7h 24m' DM Sans 18pt w700 #EAF6F9, 'Score 84 · Good' 12pt w600 #8AAEB8, and a horizontal stacked stage bar (Deep/Light/REM/Awake) in shades of #7C5CFF. Segments grow left-to-right on appear."

• "Create the Fitbit bottom tab bar: 4 tabs (Today, Coach, Community, You) on a #001017@96% bar with a 1pt #143E50 top border, 56pt + safe area. Active icon + label #21D9CE (filled icon), inactive #5C808B (outline icon). Labels DM Sans 10pt w600. No tint pill."

• "Build the Fitbit primary CTA: a Capsule(), #00B0B9 background, deep-ink #001017 DM Sans 15pt w700 text, 13pt vertical / 28pt horizontal padding, full-width 52pt on forms. Pressed: #008A91 + scale 0.98."

Iteration Guide

1. Canvas is deep teal-black #001017/#002A3A — cyan undertone, never neutral gray
2. Fitbit Teal #00B0B9 is brand/steps/CTA; on dark, text & links use the brighter #21D9CE
3. Every metric owns a fixed hue everywhere: steps teal, HR coral #FF6B81, sleep purple #7C5CFF, readiness lime #B8E986, zone orange #FF8A3D, calories gold #FFC233
4. The big number is the hero of every card — 40–44pt bold, tight negative tracking
5. Progress rings are the recurring shape language (steps, sleep, zone, readiness)
6. Cards are generously rounded (16–24pt), buttons are full pills — soft & encouraging
7. Coaching copy is warm and plain ("You're close!"), never clinical percentages
8. Sweep the ring + count up the number on appear; celebrate goal hits with confetti + a success haptic
9. Deep ink #001017 goes on teal buttons and metric chips — never white
10. Metric hues are identical in light mode; the light theme only swaps canvas (#FFFFFF) and text (#0B2A33)