Garmin Connect Design System — Colours, Type and a Ready Prompt

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

23tokens

12type steps

1radius steps

12pxspacing base

Garmin Connect, in one page

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

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

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 Garmin Connect design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- true-black canvas: #000000
- Garmin Blue: #007cc3
- Garmin Blue (on dark): #2a9fd6
- Garmin Blue Pressed: #00689f
- True Black Canvas: #000000
- Surface 1: #121417
- Surface 2: #1b1e22
- Surface 3: #23272c
- Divider: #2a2e33
- Light Canvas: #ffffff

Type:
- families: Roboto, Roboto Condensed, Fallback Stack
- scale: 10, 11, 12, 14, 15, 16, 20, 22, 26
- weights: 400, 500, 700, 900

Shape:
- radius: 6
- elevation: Don't drop-shadow content cards — depth is surface lightness on black

Spacing: 12, 14, 16, 18

Rules:
- 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

Avoid:
- 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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.

Role	Color	Meaning
Body Battery	`#2EA8E0`	Energy reserve gauge & sparkline
Intensity Minutes	`#00A8A8`	Weekly moderate/vigorous minutes
Steps / Move	`#C8B560`	Steps ring, step bars
HR Zone 1 (Warm Up)	`#9AA0A6`	Very light effort
HR Zone 2 (Easy)	`#4CAF50`	Aerobic base
HR Zone 3 (Aerobic)	`#C8B560`	Tempo
HR Zone 4 (Threshold)	`#F0A030`	Hard
HR Zone 5 (Maximum)	`#E5402A`	Max effort
Stress (low)	`#4CAF50`	Calm
Stress (high)	`#F0A030`	Elevated
Route Line	`#007CC3`	GPS track on map (with glow)

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.

Type scaleRead the full spec

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

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Screen Title	Roboto	32pt	900	1.15	-0.6pt	"My Day", large nav title
Hero Metric	Roboto Condensed	40pt	700	1.0	-0.5pt	Lead value (distance, total)
Activity Name	Roboto Condensed	26pt	700	1.1	-0.2pt	"Morning Run" on detail screen
Section Heading	Roboto	20pt	700	1.2	-0.1pt	"Heart Rate Zones", "Splits"
Stat Value	Roboto Condensed	22pt	700	1.1	0pt	Value inside a stat cell
Stat Value (large)	Roboto Condensed	28pt	700	1.0	-0.2pt	Tile value on My Day
Body	Roboto	16pt	500	1.5	0pt	Descriptive copy, list titles
Body (regular)	Roboto	16pt	400	1.5	0pt	Secondary descriptive copy
Meta	Roboto	14pt	400	1.4	0pt	Timestamp, location, subtitles
Eyebrow / Label	Roboto	12pt	700	1.2	0.5pt (UPPERCASE)	Micro-label above a value
Stat Unit	Roboto	11pt	500	1.2	0pt	"km", "bpm", "/km" suffix
Caption	Roboto	11pt	500	1.3	0pt	"Last synced 4 min ago"
Button	Roboto	15pt	700	1.0	0.5pt (UPPERCASE)	Primary / outline buttons
Tab Label	Roboto	10pt	500	1.0	0.1pt	Bottom tab labels
Axis / Scale	Roboto	10pt	500	1.0	0pt	Chart axis, gauge endpoints

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.

Components and layoutRead the full spec

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

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Stat grid stays 3-up but value drops to 20pt; map 150pt tall
iPhone 13/14/15	390pt	Standard layout
iPhone 15/16 Pro	393pt	Dynamic Island respected in top nav
iPhone 15/16 Pro Max	430pt	Map 190pt tall; tiles can show inline sparkline
iPad (portrait)	768pt	My Day → 3-column tile masonry; activity detail centered max 760pt
iPad (landscape)	1024pt+	Map + stats side-by-side (map left 60%, stat grid right 40%)

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-garmin-connect {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #555555;
  --heading-color: #555555;
  --link-color: #006faf;
  --link-hover-color: #004f7c;
  --border-color: #e0e0e0;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(85,85,85,0.06);
  --card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
  --header-bg: #555555;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #737373;
  --button-bg: #007cc3;
  --button-text-color: #000000;
  --button-hover-bg: #005c90;
  --button-border: none;
  --button-border-radius: 6px;
  --button-secondary-bg: #f5f5f5;
  --button-secondary-text-color: #555555;
  --button-secondary-hover-bg: #ebebeb;
  --button-secondary-border: 1px solid #e0e0e0;
  --prompt-bg: #f7f7f7;
  --prompt-text-color: #555555;
  --base-font: var(--font-roboto);
  --heading-font: var(--font-roboto);
  --card-border-radius: 6px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

plenty of fish 83.5%
bandcamp 82.5%
webull 80.3%
smarthr 79.6%
wired 79.2%

Where this came from

Source document: ios/design-md/fitness/garmin-connect/DESIGN.md · 26.1 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.