Implementation lives in WorkoutApp/Design/. This file is the rationale + visual cheat sheet.
Apple Health + Notes app. Off-white canvas, white rounded cards, subtle shadows, near-black text, gray secondary. Black, white, and grayscale is the rule — the water drop is the only colored element in the entire app.
| Token | Value | Used for |
|---|---|---|
Colors.canvas |
~#F5F5F7 | Page background |
Colors.surface |
white | Cards, pills, summary card |
Colors.pillBackground |
~#F2F2F4 | Selected segments, inline pills |
Colors.textPrimary |
~#121217 | Primary text |
Colors.textSecondary |
~#8E8E94 | Labels, units, placeholders |
Colors.textTertiary |
~#AEAEB6 | Hints |
Colors.divider |
~#E5E5EA | Hairline rules |
Colors.accent |
= textPrimary |
Legacy token, resolved to near-black |
Colors.water |
~#7EC6EA | The water drop fill (only colored token) |
Colors.waterSoft |
water @ 18% | Soft echo behind a partially-filled drop |
| Style | Size / weight | Where |
|---|---|---|
largeTitle |
34 / bold | Screen titles (“Today”, “Insights”) |
statValue |
44 / bold | Hero numbers in cards |
statUnit |
28 / regular | Unit suffix next to a hero number |
body |
17 / regular | Journal rows, settings rows |
sectionPill |
15 / semibold | Card section headings (rendered with .pillBackground()) |
caption |
14 / regular | Secondary descriptions |
meta |
13 / regular | “Today”, “Average”, “Tap to view options” |
.cardBackground() — white rounded surface with subtle shadow..pillBackground() — light-gray rounded pill (Capsule)..screenGutter() — standard horizontal screen padding (20pt)..themeShadow(_:) — applies a ShadowStyle token.HeaderIconButton(systemImage:action:) — borderless top-bar glyph, 44pt tap target.WaterDrop(progress:size:) — the only colored vector. Outline stays neutral when empty; bottom-up fill in baby blue otherwise.EmptyStateBlock(symbol:title:subtitle:) — centered “nothing here yet”.Theme alwaysIf you find yourself typing a hex color, raw spacing number, or hardcoded font size in a feature, stop. Add the value to Theme.swift first.
Only Theme.Colors.water (and waterSoft), and only inside WaterDrop. Do not introduce any other color token without explicit user approval. When you need to differentiate (e.g. predicted vs typed values), use weight, italic, opacity, or position.