Garmin Connect DESIGN.md

1. Visual Theme & Atmosphere

Garmin Connect's iOS app is a data cockpit. Where consumer fitness apps soften their numbers behind illustration and encouragement, Garmin treats the user as an athlete who came for the metrics — pace, VO₂ Max, Training Load, Body Battery, heart-rate zones — and arranges the entire interface as an instrument cluster around them. The app is dark-first: a true-black canvas (#000000) on which a single brand color, Garmin Blue (#007CC3), carries every interactive accent, route line, and progress arc. There is no second brand hue; color in Garmin Connect is overwhelmingly functional — the green→gold→orange→red heart-rate-zone ramp, the blue Body Battery gauge, the teal Intensity-Minutes bar — each color means a specific thing, and that meaning never changes across screens.

The signature surface is the activity detail screen: you tap a run, ride, or swim from the Activities list and land on a screen that opens with a glowing GPS route drawn on a dark slate map, followed by a tight grid of stat cells (Distance, Time, Avg Pace, Avg HR, Calories, Elevation Gain), then expandable cards for Splits, Heart Rate Zones, Training Effect, and weather. This is the moment the whole design system exists to serve: maximum data density without clutter, achieved through hairline dividers, condensed numerals, and ruthless label economy. The second pillar screen is My Day — a vertically scrolling dashboard of glanceable tiles (Steps, Body Battery, Sleep, Stress, Training Status, Intensity Minutes) that mirrors the watch's widget glances.

Typography does the heavy lifting that color refuses to. Garmin pairs Roboto (UI text, labels, body) with Roboto Condensed for every number that matters — the condensed face lets a value like 5:02 /km or 1,248 m sit on a single line inside a narrow stat cell without truncating or shrinking. Numerals are tabular so columns of splits align perfectly. Headings are heavy (700–900), labels are small uppercase eyebrows in muted gray, and the data values dominate the visual hierarchy: in a Garmin card the number is the hero and the label is a whisper above it.

Chrome is minimal and utilitarian. Navigation is a 4-tab bottom bar (My Day, Challenges, Calendar, More) with no tint pill — the active tab simply turns Garmin Blue. Cards are flat dark rectangles with 1px dividers, not floating shadowed objects; depth is communicated by surface lightness steps (#000000 → #121417 → #1B1E22), not by drop shadows. The aesthetic is closer to a Garmin watch face or a cockpit MFD than to a lifestyle app — precise, legible at a glance, and unapologetically dense.

Key Characteristics:

• True-black canvas (#000000) — dark-first, OLED-friendly, makes route lines and zone colors pop
• Single brand accent: Garmin Blue #007CC3 (brightened to #2A9FD6 on black for AA contrast)
• Functional color system — HR zones, Body Battery, Intensity Minutes each own a fixed hue with fixed meaning
• Roboto + Roboto Condensed pairing — condensed numerals keep dense metrics on one line
• Activity detail screen = glowing GPS route on dark map + tight stat grid + expandable analysis cards
• My Day dashboard = scrolling grid of glanceable watch-style tiles
• Hairline dividers (#2A2E33) and surface-lightness steps instead of drop shadows
• Tabular numerals so split tables and stat columns align
• Training Status / Body Battery / VO₂ Max as named, ring- or gauge-backed hero metrics
• 4-tab bottom bar, no tint pill — active tab is Garmin Blue glyph
• Uppercase micro-labels above big numbers — label whispers, value shouts

2. Color Palette & Roles

Primary (Interactive)

• Garmin Blue (#007CC3): The single brand color — primary buttons, route lines, progress arcs, links, selected states. On true black, the literal #007CC3 is used for fills (buttons, route stroke).
• Garmin Blue (on dark) (#2A9FD6): Brightened tint used for text and active tab glyphs on #000000 — clears WCAG AA where #007CC3 text would not.
• Garmin Blue Pressed (#00689F): Pressed state for the primary button.

Canvas & Surfaces (Dark — primary mode)

• True Black Canvas (#000000): App background. Garmin uses literal black, not charcoal.
• Surface 1 (#121417): Cards, stat grids, list rows — the first lift off black.
• Surface 2 (#1B1E22): Tiles, nested cards, pressed list rows.
• Surface 3 (#23272C): Track backgrounds (progress bars, gauges), input fields.
• Divider (#2A2E33): 1px hairlines between stat cells, list rows, sections.

Canvas & Surfaces (Light — optional)

• Light Canvas (#FFFFFF): Optional light theme background.
• Light Surface (#F4F5F7): Cards, grids.
• Light Divider (#E2E5E9): Hairlines.
• Light Text Primary (#1A1D21): Body text on white.

Text

• Text Primary (#FFFFFF): Metric values, titles on dark.
• Text Secondary (#A6ACB3): Labels, metadata, secondary copy on dark.
• Text Tertiary (#6B7178): Units, captions, disabled, axis scale numbers.
• Text Primary (light) (#1A1D21): Primary text on white.
• Text Secondary (light) (#5A6068): Labels on white.

Functional / Data-Viz Colors (fixed meaning, theme-invariant)

These colors are semantic — they encode a metric and do not restyle for dark/light.

Semantic

• Success / Goal Met (#4CAF50): Goal-complete checkmarks, positive deltas.
• Warning (#F0A030): Elevated stress, low Body Battery alert.
• Error / Max (#E5402A): Errors, destructive actions, max HR zone.
• Track / Empty (#23272C): Unfilled portion of any bar, gauge, or ring on dark.

3. Typography Rules

Font Family

• UI / Body / Labels: Roboto (by Christian Robertson, Apache 2.0) — neutral, screen-optimized grotesque; Garmin's app text face. On iOS, falls back to SF Pro Text when Roboto isn't bundled.
• Numerals / Metrics: Roboto Condensed (Apache 2.0) — the condensed face is used for every meaningful number (pace, distance, HR, elevation, durations) so long values fit a narrow stat cell on one line. Tabular figures enabled.
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
• Numeral fallback: 'Roboto Condensed', 'SF Pro Display', 'Helvetica Neue Condensed', sans-serif with font-variant-numeric: tabular-nums

Hierarchy

Principles

• The number is the hero: In any data card, the value uses the largest, heaviest type (Roboto Condensed 700); the label is a small uppercase gray eyebrow above it.
• Condense the digits, not the words: Numerals are Roboto Condensed so pace/distance/duration never wrap or auto-shrink; prose stays in regular Roboto.
• Tabular figures everywhere numeric: Split tables, stat columns, and HR-zone durations must align — always enable tabular numerals.
• Uppercase micro-labels: Field labels and eyebrows are 12pt 700 uppercase with +0.5pt tracking — they read as instrument labels.
• Weight, not color, for hierarchy: Garmin separates levels with 400 / 500 / 700 / 900 weight steps; color stays functional.
• Dynamic Type on prose, fixed on the cluster: Titles, body, and meta scale; stat values, units, tab labels, and axis text are layout-pinned.

4. Component Stylings

Buttons

Primary Button (Start / Save / Sync)

• Shape: Rounded rectangle, 6pt corner radius
• Background: #007CC3 (Garmin Blue)
• Text: #FFFFFF, Roboto 15pt weight 700, UPPERCASE, +0.5pt tracking
• Padding: 14pt vertical, 28pt horizontal
• Pressed: background #00689F + scale 0.98
• Disabled: background #23272C, text #6B7178
• Full-width variant on forms: 100% width, 50pt tall

Secondary / Outline Button

• Background: transparent
• Border: 1.5pt #2A9FD6
• Text: #2A9FD6, Roboto 14pt weight 700, UPPERCASE, +0.5pt tracking
• Padding: 12pt vertical, 22pt horizontal
• Corner radius: 6pt
• Pressed: background rgba(42,159,214,0.12)

Ghost / Tertiary Button

• Background: #1B1E22 (Surface 2)
• Border: 1pt #2A2E33
• Text: #FFFFFF, Roboto 14pt weight 500
• Corner radius: 6pt
• Pressed: background #23272C

Text Button (inline action)

• Background: none
• Text: #2A9FD6, Roboto 14pt weight 700, UPPERCASE, +0.5pt tracking
• Used for "View Splits", "See All", "Edit"

Icon Button (nav action)

• 24pt glyph in 44pt hit area
• Default #FFFFFF; pressed 60% opacity
• Stroke-style line icons, 2pt stroke

Core Atoms

Stat Cell (the fundamental data unit)

• Background: #121417, separated from neighbors by 1px #2A2E33 dividers (grid mortar)
• Label: Roboto 10pt 700 uppercase #A6ACB3, +0.5pt tracking
• Value: Roboto Condensed 22pt 700 #FFFFFF, tabular
• Unit: Roboto 11pt 500 #6B7178, inline after value
• Padding: 14pt vertical, 12pt horizontal
• Typically arranged 3-up in a grid; rows separated by the same hairline

Glanceable Tile (My Day)

• Background: #121417, 12pt corner radius, 1px #2A2E33 border
• Leading: 18pt functional-color icon or mini ring
• Label: 10pt 700 uppercase #A6ACB3
• Value: Roboto Condensed 28pt 700 #FFFFFF
• Sub: 11pt 500 #6B7178 ("goal 10,000")
• Tap → drill into the metric's detail screen

Progress Bar / Gauge

• Track: #23272C, 8pt tall, 4pt radius
• Fill: functional color (Body Battery gradient #1E6FA8 → #2EA8E0; goal bars solid)
• Endpoint labels: Roboto 10pt 500 #6B7178

Ring (Training Status / goal)

• Track circle: #23272C, 6pt stroke
• Progress arc: Garmin Blue #007CC3 (or functional color), 6pt stroke, round cap, starts at -90°
• Center: value in Roboto Condensed 700, or a status word

Chip / Pill

• Background: #1B1E22, 1px #2A2E33
• Text: Roboto 12pt 600 #FFFFFF
• Corner radius: 500pt (full pill)
• Selected: background #007CC3, text #FFFFFF

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: rgba(18,20,23,0.96) with blur, 0.5pt top border #2A2E33
• Tabs (4): My Day, Challenges, Calendar, More
• Icon: 22pt; no tint pill
• Active: glyph filled #2A9FD6, label #2A9FD6
• Inactive: glyph stroked #6B7178, label #6B7178
• Labels: Roboto 10pt 500, always shown

Top Nav (Activity Detail)

• Height: 44pt + safe area
• Leading: back chevron + parent label ("Activities"), Roboto 15pt 500 #FFFFFF
• Trailing: settings gear + share node icon, 19pt stroke glyphs
• No large-title collapse; the activity name lives in the body, not the bar

Section Header (in-page)

• Roboto 20pt 700 #FFFFFF, 20pt top margin, 12pt bottom
• Optional trailing text button "See All" in #2A9FD6

Input Fields

Text Field

• Height: 48pt
• Background: #1B1E22
• Border: 1px #2A2E33; focus border 1.5px #2A9FD6
• Corner radius: 6pt
• Text: Roboto 16pt 500 #FFFFFF; placeholder #6B7178
• Leading icon (optional): 18pt #A6ACB3

Segmented Control (e.g., Day / Week / 4 Weeks)

• Track: #1B1E22, 6pt radius, 1px #2A2E33
• Selected segment: #007CC3 fill, white text
• Unselected: #A6ACB3 text
• Font: Roboto 13pt 700 uppercase

Stepper / Goal Picker

• Inline − / + round buttons (#1B1E22, 1px border), value in Roboto Condensed 20pt 700 between them

Distinctive Components

GPS Route Map

• Dark slate basemap (#1A2329 → #0C1216 gradient with faint 28pt grid)
• Route polyline: #007CC3, 4pt stroke, round caps/joins, soft glow drop-shadow(0 0 4px rgba(0,124,195,0.6))
• Start pin: #4CAF50 dot, 3pt white ring
• End pin: #E5402A dot, 3pt white ring
• Optional km-split markers as small white ticks along the line
• 12pt corner radius, full-bleed minus 16pt side insets

Stat Grid (Activity Detail)

• 3-column grid, cells #121417, 1px #2A2E33 mortar, outer radius 12pt
• Each cell = one Stat Cell atom
• Order convention: Distance, Time, Avg Pace, Avg HR, Calories, Elev Gain

Training Status Card

• #121417, 12pt radius, 1px border
• Leading: 52pt progress ring (blue arc on #23272C track)
• Status word in #2A9FD6 (Productive / Maintaining / Peaking / Detraining / Overreaching), Roboto 16pt 700
• Sub: "VO₂ Max 52 · Load 388" in #A6ACB3 12pt

Body Battery Gauge

• Card with name + big value (Roboto Condensed 22pt 700 #2EA8E0)
• Horizontal bar: track #23272C, fill gradient #1E6FA8 → #2EA8E0
• Scale row 0 — Charged — 100 in #6B7178 10pt
• Detail view shows a 24h area chart in the same blue

Heart Rate Zones

• Per-zone row: zone label (Z2…Z5) #A6ACB3 11pt, horizontal track #23272C, fill in the zone color (Z2 green → Z3 gold → Z4 orange → Z5 red), trailing duration in tabular #A6ACB3 11pt
• Zone color is fixed and semantic — never recolor for theme

Splits Table

• Header row: Roboto 10pt 700 uppercase #A6ACB3
• Each split row: index, distance, pace bar (relative-length blue bar), elevation delta, HR — all tabular Roboto Condensed
• Fastest split's pace bar highlighted Garmin Blue; rows divided by 1px #2A2E33

Goal Ring Cluster (My Day)

• Stacked or side-by-side mini rings (Steps gold, Intensity Minutes teal, Floors), each on #23272C track, with the value Roboto Condensed centered

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48
• Card internal padding: 16pt
• Stat-cell padding: 14pt vertical / 12pt horizontal
• Card-to-card gap: 18pt (on My Day) / hairline divider (within a grid)
• Screen side inset: 16pt

Grid & Container

• iPhone: 16pt side insets; stat grids are 3-up edge-to-edge within the card
• Map: full content width, 168pt tall on detail screen, 12pt radius
• iPad: content max-width 760pt centered; My Day becomes a 2-column tile masonry
• Tiles: minimum 110pt wide; reflow 2-up (phone) / 3-4-up (iPad)

Whitespace Philosophy

• Dense but ruled: Garmin packs many numbers per screen, but every group is bounded by a hairline or a card edge — density never becomes noise
• Labels are quiet, values are loud: vertical rhythm puts a tight 4pt gap between the uppercase label and its big value, then larger gaps between groups
• Map breathes, data compresses: the route map gets generous height; the stat grid below it is deliberately compact
• No decorative whitespace: spacing is structural, not stylistic — there are no large empty hero zones

Border Radius Scale

• Square (0pt): full-bleed map edges (when edge-to-edge), dividers
• Subtle (4pt): progress-bar fills, track ends
• Standard (6pt): buttons, input fields, segmented control, chips-as-tags
• Card (12pt): cards, tiles, map container, stat-grid outer
• Comfortable (16pt): bottom sheets, modals
• Pill (500pt): filter chips, status pills
• Circle (50%): rings, gauges, profile avatar, map pins

6. Depth & Elevation

Garmin Connect is flat and structural. Depth comes from surface-lightness steps, not drop shadows.

Shadow Philosophy: On true black, drop shadows are nearly invisible, so Garmin barely uses them — elevation is read as "this surface is lighter than the one behind it." Only genuinely floating layers (bottom sheets, popovers) get a soft 0 8px 24px shadow plus the lighter surface tone. The GPS route line is the one element that uses a glow (drop-shadow(0 0 4px rgba(0,124,195,0.6))) — a deliberate signal that the track is "live" data.

Motion

• Activity open: push transition 300ms iOS-native; the route line draws on over 700ms ease-out (stroke-dashoffset animation) once the map is visible
• Stat reveal: stat cells fade + 6pt rise, staggered 30ms each, 200ms ease-out, on first appearance
• Ring / gauge fill: arcs and bars animate from 0 to value over 600ms ease-out with a slight overshoot (spring, damping 0.85)
• Card expand (Splits / HR Zones): chevron rotates 90° in 150ms; content height 0 → auto over 220ms ease-out
• Tab switch: cross-fade 150ms; active glyph swaps stroke→fill instantly, color tween 120ms
• Pull to sync: spinner; on success a brief #4CAF50 "Synced" toast slides up 250ms then auto-dismisses
• Number tick (live activity): live values count up with a 1-frame digit roll; tabular spacing prevents layout shift
• Haptic: light impact on tab change & goal-met; success notification haptic on sync complete; selection tick on segmented-control change
• Reduce Motion: route line appears instantly; rings/bars set final value with a 120ms crossfade; no rise/stagger

7. Do's and Don'ts

Do

• Use true black #000000 as the canvas — it is Garmin's signature and powers OLED + data pop
• Keep Garmin Blue #007CC3 as the only brand accent; brighten to #2A9FD6 for text/active on black
• Treat HR-zone / Body Battery / Intensity colors as fixed semantics — same hue everywhere, theme-invariant
• Set every meaningful number in Roboto Condensed with tabular figures
• Make the value the visual hero and the label a small uppercase gray eyebrow above it
• Draw the GPS route in Garmin Blue with a soft glow and green start / red end pins
• Separate dense data with 1px #2A2E33 hairlines and surface-lightness steps, not shadows
• Animate rings/bars filling from 0 and the route drawing on, on first appearance
• Keep the bottom tab bar pill-free — active is simply the blue glyph
• Right-align numeric columns and use tabular figures so splits stack perfectly

Don't

• Don't use charcoal (#1A1A1A) as the base — Garmin is true black #000000
• Don't introduce a second brand color — there is only Garmin Blue
• Don't recolor HR zones or Body Battery per theme — their color is the data
• Don't set metric numerals in a proportional font — values will wrap or shrink
• Don't add a Material/iOS tint pill behind the active tab — Garmin has none
• Don't drop-shadow content cards — depth is surface lightness on black
• Don't let the label outweigh the value — labels are 10–12pt uppercase whispers
• Don't use bright saturated decorative gradients on cards — gradients are reserved for data gauges
• Don't center-align long split tables — numeric data is right-aligned and tabular
• Don't animate aggressively — motion is purposeful (route draw, ring fill), 150–700ms ease-out

8. Responsive Behavior

Device Sizes

Dynamic Type

• Scales: screen titles, section headings, body, meta
• Fixed (layout-pinned): stat values, stat units, tab labels, chart axis/scale text, eyebrow labels — these live in tight cells and must not reflow
• Condensed numerals already shrink visually; do not additionally scale them

Orientation

• All screens support rotation
• iPad landscape: activity detail splits into map pane + scrollable analysis pane
• Charts (HR, Body Battery 24h) expand to fill width on rotation

Touch Targets

• Tab bar icon: 22pt glyph, 44pt hit
• Stat cell / tile: full-cell tap, ≥ 64pt tall
• Card expand chevron: 20pt glyph, 44pt hit
• Buttons: ≥ 44pt tall (primary 50pt full-width)
• Map: pannable/zoomable with two-finger gestures; tap a split marker for that split

Safe Area Handling

• Top: nav respects safe area and Dynamic Island
• Bottom: tab bar + home indicator respected; full-width primary button sits above the indicator
• Map: extends under nothing — clipped within its rounded container with side insets
• Sides: 16pt content inset throughout

9. Agent Prompt Guide

Quick Color Reference

• Canvas (dark): #000000
• Surface 1 / 2 / 3: #121417 / #1B1E22 / #23272C
• Divider: #2A2E33
• Garmin Blue (fill): #007CC3
• Garmin Blue (text/active on black): #2A9FD6
• Garmin Blue pressed: #00689F
• Text primary / secondary / tertiary: #FFFFFF / #A6ACB3 / #6B7178
• Body Battery: #2EA8E0
• Intensity Minutes: #00A8A8
• Steps: #C8B560
• HR Zone 2 / 3 / 4 / 5: #4CAF50 / #C8B560 / #F0A030 / #E5402A
• Success / Warning / Error: #4CAF50 / #F0A030 / #E5402A

Example Component Prompts

• "Build the Garmin Connect activity detail header in SwiftUI: top nav 44pt with a back chevron + 'Activities' label (Roboto 15pt 500 white) leading, and a settings gear + share-node icon trailing (19pt stroke glyphs). Below, an eyebrow 'RUNNING' (Roboto 12pt 700 uppercase #2A9FD6 +0.5 tracking), then 'Morning Run' in Roboto Condensed 26pt 700 white, then 'Today at 6:42 AM · Cedar Loop Trail' in Roboto 14pt 400 #A6ACB3. Canvas is true black #000000."

• "Create the Garmin GPS route map: a 168pt-tall rounded (12pt) container, basemap a dark gradient #1A2329 → #0C1216 with a faint 28pt grid overlay at 4% white. Draw the route as a #007CC3 polyline, 4pt stroke, round caps, with a soft glow drop-shadow(0 0 4px rgba(0,124,195,0.6)). Place a green #4CAF50 start pin and a red #E5402A end pin, each a dot with a 3pt white ring. Animate the route drawing on over 700ms ease-out via stroke-dashoffset."

• "Build the Garmin stat grid: a 3-column grid, each cell #121417 separated by 1px #2A2E33 mortar, outer radius 12pt. Cell = uppercase label (Roboto 10pt 700 #A6ACB3 +0.5 tracking) above a value in Roboto Condensed 22pt 700 white with tabular figures, and an inline unit in Roboto 11pt 500 #6B7178. Populate: Distance 8.42 km, Time 42:18, Avg Pace 5:02 /km, Avg HR 156 bpm, Calories 612 C, Elev Gain 124 m. Stagger-fade the cells in with a 6pt rise on first appearance."

• "Build the Garmin Training Status card: #121417, 12pt radius, 1px #2A2E33 border. Leading a 52pt ring — #23272C track at 6pt stroke, a #007CC3 progress arc at 6pt stroke, round cap, starting -90°, ~75% filled, animating from 0 over 600ms ease-out. Right of it: 'TRAINING STATUS' eyebrow #A6ACB3 10pt 700 uppercase, 'Productive' in #2A9FD6 Roboto 16pt 700, and 'VO₂ Max 52 · Load 388' in #A6ACB3 12pt."

• "Build the Garmin Body Battery card: name 'Body Battery' (Roboto 13pt 600 white) on the left, value '72' (Roboto Condensed 22pt 700 #2EA8E0) on the right baseline-aligned. Below, an 8pt-tall track #23272C (4pt radius) with a 72%-width fill using gradient #1E6FA8 → #2EA8E0. Under it a 3-point scale row '0 — Charged — 100' in Roboto 10pt 500 #6B7178. Bar fills from 0 over 600ms ease-out."

• "Render the Garmin heart-rate-zones card: for each zone a row with a fixed-width zone label (Z2…Z5, Roboto 11pt #A6ACB3), a flexible 10pt track #23272C (3pt radius) with a fill in the zone's fixed color (Z2 #4CAF50, Z3 #C8B560, Z4 #F0A030, Z5 #E5402A) sized by time-in-zone, and a trailing duration in tabular Roboto 11pt #A6ACB3. Zone colors are semantic — never recolor them for theme."

Iteration Guide

1. Canvas is true black #000000 — not charcoal; this is the Garmin signature and powers OLED + data legibility
2. Garmin Blue #007CC3 is the only brand accent — fills use #007CC3, text/active on black uses brightened #2A9FD6
3. Every meaningful number is Roboto Condensed, tabular — values never wrap or shrink; prose stays in Roboto
4. The value is the hero; the label is a 10–12pt uppercase gray eyebrow above it
5. Data-viz colors (HR zones, Body Battery #2EA8E0, Intensity #00A8A8, Steps #C8B560) are fixed semantics — identical across themes
6. The GPS route is Garmin Blue with a soft glow; green #4CAF50 start pin, red #E5402A end pin
7. Depth is surface-lightness steps (#000000 → #121417 → #1B1E22) + 1px #2A2E33 hairlines — almost no shadows
8. The bottom tab bar has no tint pill — active is just the blue glyph + blue label
9. Density is ruled: every data group bounded by a card edge or hairline; right-align + tabular for split tables
10. Motion is purposeful — route draws on (700ms), rings/bars fill from 0 (600ms), stat cells stagger-rise; quiet otherwise