designmd-forge 1.2.0

package/dist/data/designs/ios-oura.md

@@ -0,0 +1,356 @@
+# Design System Inspiration of Oura (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Oura's iOS app is a dark instrument panel for the body. The canvas is a deep, slightly cool charcoal (`#0B0B0F`) — near-black, but with the faintest blue cast so it reads as "night" rather than "off". Against it, the interface is organized around one recurring visual object: the **score ring**, a large circular gauge from 0 to 100 that fills clockwise. Three of these rings — Readiness (teal), Sleep (indigo), Activity (amber) — are the heartbeat of the product. Everything else (contributor lists, trend graphs, insight cards) exists to explain the rings. The app feels less like a feed and more like a cockpit: data-dense, calm, and precise.
+
+The accent system is a tri-color domain language, not a single brand color. Each of the three health domains owns a hue and uses it consistently everywhere it appears: **Readiness teal** (`#4FD1C5`), **Sleep indigo** (`#7C6FF0`), **Activity amber** (`#F5A623`). A ring is teal; the contributors that feed it are teal; its trend line is teal. This color-as-meaning system lets the user parse a dense screen at a glance — color is information, never decoration. Outside the three domains everything is monochrome: white text, cool grey for secondary, and surface steps in charcoal. There is no fourth accent.
+
+Typography is Inter (Oura's product face is a clean geometric sans in the same family), used with restraint at 400 / 600 / 700. The hero of every screen is a number — the score — set very large (the ring center shows a 48pt+ figure). Around it, labels are small and quiet: 13pt uppercase domain labels, 15pt contributor names, 13pt deltas. The type never competes with the rings; it annotates them. The single most expressive typographic moment is the score reveal: when a screen loads, the ring sweeps from 0 to its value while the central number counts up in sync, so the figure and the arc arrive together.
+
+**Key Characteristics:**
+- Deep cool-charcoal canvas (`#0B0B0F`) — night, with a faint blue cast, not pure black
+- The score ring (0–100) as the central recurring object — fills clockwise
+- Tri-domain color language — Readiness teal, Sleep indigo, Activity amber
+- Color is information — a domain's hue follows it across ring, contributors, and trends
+- Contributor bar list — horizontal mini-bars breaking a score into its inputs
+- Ring-battery indicator — the physical ring's charge level, shown as a small arc
+- Trend graphs — sparkline/area charts in the domain hue over 7/30/90 days
+- Insight cards — a sentence of interpretation ("Your HRV is trending up")
+- Bottom tabs (Today / Vitals / My Health / Explore) — quiet, glass-backed
+- Inter typeface, 400/600/700; the score figure is the largest type on screen
+
+## 2. Color Palette & Roles
+
+### Domain Accents (Color = Meaning)
+- **Readiness Teal** (`#4FD1C5`): The Readiness ring, its contributors, its trend line, the "Readiness" tab/section.
+- **Readiness Teal Deep** (`#37B3A8`): Pressed/active state for teal controls; the unfilled-track tint never uses this.
+- **Sleep Indigo** (`#7C6FF0`): The Sleep ring, sleep-stage bars, sleep contributors, the sleep trend line.
+- **Sleep Indigo Deep** (`#6354D6`): Pressed state for indigo controls.
+- **Activity Amber** (`#F5A623`): The Activity ring, move goal, step bars, activity contributors and trends.
+- **Activity Amber Deep** (`#D98A12`): Pressed state for amber controls.
+
+### Canvas & Surfaces
+- **Canvas** (`#0B0B0F`): The primary dark canvas — cool near-black.
+- **Surface 1** (`#16161C`): Card backgrounds, contributor list containers.
+- **Surface 2** (`#1E1E26`): Raised cards, sheets, the expanded detail panels.
+- **Surface 3** (`#27272F`): Pressed/hover state on dark surfaces, ring unfilled track.
+- **Divider** (`#2A2A33`): Hairline separators between rows and sections.
+
+### Text
+- **Text Primary** (`#FFFFFF`): The score figure, card titles, primary metrics.
+- **Text Secondary** (`#9A9AA5`): Contributor names, units, descriptions, axis labels.
+- **Text Tertiary** (`#6A6A73`): Very low-emphasis metadata, disabled labels, gridline values.
+
+### Semantic
+- **Positive Delta** (`#4FD1C5`): An improving trend arrow / "+4 vs last week" (uses Readiness teal as the generic "good").
+- **Negative Delta** (`#E0746B`): A declining trend — soft desaturated coral, never harsh red.
+- **Neutral Delta** (`#9A9AA5`): Flat / no meaningful change.
+- **Optimal Band** (`#4FD1C5` @ 16%): The shaded "optimal range" zone behind a trend graph.
+- **Ring Battery** (`#9A9AA5`): The ring-charge arc (monochrome — it is hardware status, not a health domain).
+- **Warning Amber** (`#F5A623`): "Battery low", "Sync needed" (reuses Activity amber, contextually).
+
+### Light Mode
+Oura's iOS app is dark-first by design — the dark instrument panel is the brand and is used at night and on waking. There is no fully shipped light variant. (A daytime reference would invert to Canvas `#F4F4F6`, Text `#0B0B0F`, with the same three domain accents, but it is not part of the product.)
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` — Oura's product face is a clean geometric sans in this family
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Tabular figures enabled**: `font-variant-numeric: tabular-nums` — scores and deltas must align in columns
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Ring Score (Hero) | Inter | 52pt | 700 | 1.0 | -1.0pt | The big number at the center of a score ring |
+| Screen Title | Inter | 26pt | 700 | 1.2 | -0.4pt | "Today", "Sleep", large nav title |
+| Section Header | Inter | 20pt | 700 | 1.25 | -0.2pt | "Contributors", "Trends" |
+| Secondary Score | Inter | 34pt | 700 | 1.0 | -0.6pt | Smaller domain ring on the Today summary |
+| Card Title | Inter | 17pt | 600 | 1.3 | -0.1pt | Insight card heading, metric card title |
+| Metric Value | Inter | 22pt | 600 | 1.1 | -0.2pt | "62 ms" HRV, "7h 24m" sleep duration |
+| Contributor Name | Inter | 15pt | 600 | 1.3 | 0pt | "Resting Heart Rate", "Sleep Balance" |
+| Body | Inter | 15pt | 400 | 1.5 | 0pt | Insight sentences, explanatory copy |
+| Subtitle / Unit | Inter | 13pt | 400 | 1.3 | 0pt | "ms", "vs last week", axis captions |
+| Delta | Inter | 13pt | 600 | 1.2 | 0pt | "+4", "−2 bpm" trend deltas |
+| Domain Label (UPPER) | Inter | 13pt | 700 | 1.2 | 0.8pt | "READINESS", "SLEEP", "ACTIVITY" |
+| Button | Inter | 16pt | 600 | 1.0 | 0pt | "View details", "Add tag" |
+| Tab Label | Inter | 11pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
+| Caption / Gridline | Inter | 11pt | 400 | 1.2 | 0pt | Chart axis values, timestamps |
+
+### Principles
+- **The number is the headline**: every screen leads with a large score or metric figure; titles are secondary to it.
+- **Tabular figures always**: scores, deltas, and metric values use `tabular-nums` so columns and the counting-up animation never reflow.
+- **Weight band 400 / 600 / 700**: regular for body, semibold for metrics/contributors, bold for scores/labels. No light, no black.
+- **Domain labels are uppercase and tracked**: "READINESS" / "SLEEP" / "ACTIVITY" at 0.8pt tracking — they are categorical, not prose.
+- **Color encodes domain, not emphasis**: never color body text for stress; the teal/indigo/amber are reserved for domain identity and rings.
+
+## 4. Component Stylings
+
+### Score Ring *(signature)*
+- A circular gauge, diameter 200-240pt (hero) or 64-88pt (summary tile)
+- Track: `#27272F`, stroke width 12pt (hero) / 6pt (tile), full circle
+- Progress arc: the domain hue (teal/indigo/amber), same stroke, **rounded cap**, sweeps clockwise from the 12-o'clock position
+- Center: the score figure (52pt w700 white, hero) above a domain label (13pt w700 uppercase, the domain hue)
+- A small tick or gap at the top marks 0/100
+- Reveal: arc animates 0 → value over ~900ms ease-out while the central number counts up in sync
+- Optionally a thin secondary "yesterday" ghost arc at 30% opacity behind the live arc
+
+### Contributor Bar List *(signature)*
+- A vertical list inside a Surface 1 card; each row breaks the score into one input
+- Row layout: contributor name (15pt w600 white, left) → a horizontal mini-bar → value/state (13pt w600 right)
+- Mini-bar: track `#27272F` height 6pt radius 3pt; fill the domain hue, width = contributor's normalized score
+- Row height: 44pt, 1pt `#2A2A33` divider between rows
+- Tapping a row expands an inline explanation (Surface 2, body 15pt `#9A9AA5`)
+
+### Buttons
+
+**Primary Button**
+- Shape: Pill, height 48pt
+- Background: the contextual domain hue (or white on neutral screens)
+- Text: `#0B0B0F` on a hued/white fill (dark text for contrast), Inter 16pt w600
+- Padding: 14pt vertical, 28pt horizontal, corner radius 24pt
+- Pressed: hue → its Deep variant, scale 0.97, soft haptic
+
+**Glass Secondary Button**
+- Background: `#1E1E26`, 1pt border `#2A2A33`
+- Text: `#FFFFFF`, Inter 16pt w600
+- Padding: 14pt vertical, 24pt horizontal, corner radius 24pt
+- Pressed: background `#27272F`
+
+**Icon Actions (Add tag, Share, Info)**
+- Size: 20pt glyph, 44pt hit area
+- Default: `#9A9AA5`; Pressed: `#FFFFFF`
+- Domain-info icon picks up the domain hue when inside that domain's screen
+
+**Segmented Range Control (7D / 30D / 90D)**
+- Container: `#16161C`, 1pt `#2A2A33`, corner radius 20pt, height 36pt
+- Active segment: background `#27272F`, text `#FFFFFF` w600
+- Inactive: text `#9A9AA5`
+- Selection slides 200ms ease
+
+### Cards & Containers
+
+**Insight Card**
+- Background: `#16161C`, corner radius 16pt, padding 18pt
+- Leading: a 24pt domain-hued glyph (e.g., HRV waveform)
+- Title: Inter 17pt w600 white; Body: Inter 15pt w400 `#9A9AA5`
+- Optional trailing chevron if it deep-links to a detail screen
+- Pressed: background `#1E1E26`
+
+**Metric Card (grid tile)**
+- Background: `#16161C`, corner radius 16pt, padding 16pt
+- Top: 13pt w700 uppercase label (`#9A9AA5`)
+- Center: metric value 22pt w600 white + unit 13pt w400 `#9A9AA5`
+- Bottom: a small sparkline in the domain hue + delta (13pt w600)
+- 2-column grid, 12pt gap
+
+**Trend Graph Card**
+- Background: `#16161C`, corner radius 16pt, padding 18pt
+- Area/line chart in the domain hue; fill is the hue at 16% opacity
+- "Optimal band" shaded zone behind the line (`#4FD1C5` @ 16% for readiness-style)
+- Axis labels 11pt `#6A6A73`; gridlines `#2A2A33` 0.5pt
+- Range control (7D/30D/90D) docked at the bottom
+
+**Today Summary (top of Today tab)**
+- The three domain rings shown together: one large hero ring (today's primary focus) or a row of three medium rings
+- Each ring tappable → pushes that domain's detail screen
+- Below: a one-line insight in 15pt `#9A9AA5`
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `rgba(11,11,15,0.82)` with `.regularMaterial` blur
+- Tabs: Today, Vitals, My Health, Explore
+- Icon size: 24pt
+- Active color: `#FFFFFF` (the tab indicator is neutral white — domain color lives in content, not chrome)
+- Inactive: `#6A6A73`
+- Labels: Inter 11pt w600, always shown
+- A hairline `#2A2A33` top border
+
+**Top Bar**
+- Height: 44pt + safe area, background `#0B0B0F`
+- Left: date selector ("Today" / "Wed, May 14") with a small chevron
+- Right: ring-battery indicator (a tiny arc + %) then a profile/settings glyph 22pt
+- A 0.5pt `#2A2A33` divider appears on scroll
+
+**Domain Detail Screen**
+- Hero score ring at top, domain label in the domain hue
+- Scrolls into: contributor bar list → trend graph → insight cards
+- The accent throughout the screen is that domain's single hue
+
+### Input Fields
+
+**Search / Filter (Explore)**
+- Background: `#16161C`, height 44pt, corner radius 22pt
+- Leading `magnifyingglass` 16pt `#9A9AA5`
+- Placeholder: "Search programs & sessions", 15pt `#6A6A73`
+- Focus: border `#2A2A33` → `#3A3A45`, no color shift
+
+**Tag Chip (Day tagging)**
+- Background: `#1E1E26` / domain hue when selected
+- Text: `#FFFFFF`
+- Padding: 8pt vertical, 16pt horizontal, corner radius 18pt
+- Examples: "Caffeine", "Alcohol", "Late meal", "Sick"
+
+### Distinctive Components
+
+**Ring-Battery Indicator**
+- A small (20pt) circular arc showing the physical Oura ring's charge
+- Track `#27272F`, fill `#9A9AA5` (monochrome — hardware status, not a health domain)
+- Turns Activity amber (`#F5A623`) below 20%
+- Sits in the top bar with a "%"
+
+**Sleep Stage Hypnogram**
+- A horizontal banded chart of the night: Awake / REM / Light / Deep
+- Each band a tint of Sleep indigo (`#7C6FF0`) at varying lightness
+- Time axis 11pt `#6A6A73` below
+
+**Tri-Ring Summary**
+- The three rings (teal/indigo/amber) drawn concentrically or side-by-side on the Today tab
+- A single glanceable object that encodes all three domains at once
+
+**Score Reveal Animation**
+- On screen load each ring sweeps 0 → value (~900ms ease-out) while its center figure counts up in lockstep — the arc and the number land together
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
+- Standard horizontal margin: 16pt
+- Section spacing: 24pt between major blocks (ring → contributors → trends)
+
+### Grid & Container
+- Single column, full device width with 16pt horizontal margins
+- Metric tiles: 2-column grid, 12pt gap
+- The hero ring is centered with generous vertical air above and below
+- Contributor list and trend cards are full content width
+
+### Whitespace Philosophy
+- **The ring needs room**: the hero score ring is given large vertical breathing space — it is the focal point and must not feel crowded.
+- **Dense where it explains**: contributor lists and metric grids are tighter (44pt rows) because they are reference data the user scans.
+- **One domain per screen**: a detail screen commits to a single hue, which keeps a data-dense layout calm.
+
+### Border Radius Scale
+- Soft (6pt): mini-bar fills, small chart elements
+- Standard (16pt): insight cards, metric tiles, trend cards
+- Comfortable (20pt): sheets, segmented controls
+- Pill (24pt): primary/secondary buttons, search field
+- Chip (18pt): tag chips
+- Circle (50%): score rings, avatars, ring-battery arc
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, the hero ring sits directly on canvas |
+| Card (Level 1) | No shadow; `#16161C` fill | Insight cards, metric tiles, contributor lists |
+| Raised (Level 2) | `#1E1E26` fill + `rgba(0,0,0,0.3) 0 8px 24px` | Expanded detail panels, the focused metric card |
+| Sheet (Level 3) | `#1E1E26` + `rgba(0,0,0,0.5) 0 -16px 48px` | Tagging sheet, range pickers |
+| Tab Bar Material | `rgba(11,11,15,0.82)` + `.regularMaterial` | Floats above scrolling content |
+| Scrim | `rgba(0,0,0,0.6)` | Behind sheets |
+
+**Shadow Philosophy**: On the cool near-black canvas, Oura communicates elevation mostly through surface value (`#0B0B0F` → `#16161C` → `#1E1E26`) rather than shadow. Cards are flat fills; only sheets and the actively-expanded panel get a soft, diffuse shadow (24-48pt blur, low opacity) to lift them. The score ring itself never casts a shadow — it is a flat, precise instrument, not a 3D object.
+
+### Motion
+- **Score reveal**: ring arc 0 → value over ~900ms ease-out; central number counts up in sync (same duration/easing)
+- **Contributor bars**: each mini-bar grows from 0 to its width, staggered ~40ms per row, 500ms ease-out
+- **Range switch (7D/30D/90D)**: the trend graph morphs between datasets over 350ms ease-in-out; segmented indicator slides 200ms
+- **Card tap**: scale 0.98 → 1.0 over 200ms ease-out, soft haptic
+- **Tab change**: cross-fade 250ms (no slide)
+- **Pull-to-refresh (sync)**: a circular progress mimicking a ring filling, then a soft success haptic
+- **Insight appear**: fade + 8pt rise over 300ms when scrolled into view
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the cool near-black canvas (`#0B0B0F`) — night with a faint blue cast
+- Make the score ring the focal point of every domain screen — large, centered, with air
+- Use the tri-domain color language consistently — teal=Readiness, indigo=Sleep, amber=Activity
+- Treat color as information — a domain's hue follows it across ring, contributors, trends
+- Lead each screen with the number — the score figure is the largest type on screen
+- Use tabular figures for all scores, metrics, and deltas so columns never reflow
+- Animate the score reveal — arc sweep and number count-up land together (~900ms)
+- Keep the tab bar indicator neutral white — domain color lives in content, not chrome
+- Use the soft desaturated coral (`#E0746B`) for negative deltas — never harsh red
+
+### Don't
+- Don't use pure black `#000000` — Oura's charcoal has a faint cool cast
+- Don't introduce a fourth accent — only teal, indigo, amber carry domain meaning
+- Don't color body text for emphasis — the three hues are reserved for domains/rings
+- Don't square the ring's progress cap — it is rounded; the ring is a refined instrument
+- Don't drop-shadow the score ring — it is a flat, precise gauge, not a 3D dial
+- Don't reflow scores with proportional figures — always tabular-nums
+- Don't put domain color on the tab bar — chrome stays neutral
+- Don't animate the ring linearly — the reveal eases out so it decelerates into the value
+- Don't crowd the hero ring — it needs vertical breathing room to read
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Hero ring 200pt; metric grid stays 2-col |
+| iPhone 13/14/15 | 390pt | Hero ring 220pt; standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the 44pt top bar |
+| iPhone 15/16 Pro Max | 430pt | Hero ring 240pt; trend graphs taller |
+| iPad | 768pt+ | Tri-ring summary side-by-side; 3-column metric grid; detail in a split layout |
+
+### Dynamic Type
+- Screen titles, contributor names, body, insights: full scale
+- The ring score figure: scales modestly but capped (it must fit inside the ring) — typically max 60pt
+- Domain labels, deltas, axis captions: fixed (layout-sensitive at 11-13pt)
+- Tab labels: fixed 11pt
+
+### Orientation
+- Today / Vitals / My Health / Explore: **portrait-locked** (the ring + scroll layout is vertical)
+- Detail screens: **portrait-locked**
+- iPad: **rotates** — landscape uses a two-pane layout (ring + contributors beside trends)
+
+### Touch Targets
+- Score ring: the whole ring is a 44pt+ tap target → pushes detail
+- Contributor rows: full 44pt height tappable to expand
+- Tab icons: 24pt glyph, 44pt effective hit
+- Range segments: full segment height (36pt)
+
+### Safe Area Handling
+- Top: 44pt bar respects the notch / Dynamic Island
+- Bottom: tab bar floats above the home indicator
+- Sides: 16pt content insets
+- The hero ring centers within the safe content area, never under the bars
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#0B0B0F`
+- Surface 1 (cards): `#16161C`
+- Surface 2 (raised/sheets): `#1E1E26`
+- Ring track / pressed: `#27272F`
+- Divider: `#2A2A33`
+- Text primary: `#FFFFFF`
+- Text secondary: `#9A9AA5`
+- Readiness teal: `#4FD1C5`
+- Sleep indigo: `#7C6FF0`
+- Activity amber: `#F5A623`
+- Negative delta (soft coral): `#E0746B`
+
+### Example Component Prompts
+- "Create a SwiftUI Oura score ring: 220pt diameter, track stroke #27272F 12pt full circle, progress arc in Readiness teal #4FD1C5 12pt with a rounded cap sweeping clockwise from 12 o'clock. Center: a 52pt weight 700 #FFFFFF tabular figure above a 13pt weight 700 uppercase 'READINESS' label in #4FD1C5. On appear, animate the arc 0 → 82 over 900ms ease-out while the number counts up in sync."
+- "Build the contributor bar list: a #16161C card, corner radius 16pt. Each row 44pt tall: contributor name in Inter 15pt weight 600 #FFFFFF on the left, a horizontal mini-bar (track #27272F, 6pt tall, 3pt radius; fill Sleep indigo #7C6FF0 at the contributor's normalized width) in the center, and a state value in Inter 13pt weight 600 #FFFFFF on the right. 1pt #2A2A33 divider between rows; tapping a row expands a #1E1E26 explanation in 15pt #9A9AA5."
+- "Design a metric tile: #16161C, 16pt radius, 16pt padding. Top: 'HRV' in Inter 13pt weight 700 uppercase #9A9AA5. Center: '62' 22pt weight 600 #FFFFFF with ' ms' 13pt #9A9AA5. Bottom: a small Readiness-teal sparkline plus '+4' delta in 13pt weight 600 #4FD1C5. 2-column grid, 12pt gap."
+- "Build the trend graph card: #16161C, 16pt radius. An area chart in Sleep indigo #7C6FF0 with the fill at 16% opacity, an 'optimal band' shaded zone behind the line, axis labels 11pt #6A6A73, gridlines #2A2A33 0.5pt. A 7D/30D/90D segmented control docked at the bottom: container #16161C 1pt #2A2A33 20pt radius, active segment #27272F with #FFFFFF weight 600 text, selection slides 200ms."
+- "Create the Oura bottom tab bar: 56pt + safe area, background rgba(11,11,15,0.82) with .regularMaterial blur, 1pt #2A2A33 top border. Tabs Today / Vitals / My Health / Explore, 24pt icons, active tint #FFFFFF (neutral — domain color is never on chrome), inactive #6A6A73, labels Inter 11pt weight 600."
+
+### Iteration Guide
+1. Canvas is cool near-black `#0B0B0F` — not pure black; it has a faint blue cast
+2. The score ring is the recurring hero — large, centered, rounded cap, sweeps clockwise
+3. Tri-domain color is a language: teal=Readiness, indigo=Sleep, amber=Activity — used everywhere that domain appears
+4. Color encodes domain, never emphasis — body text stays white/grey
+5. Lead with the number — the score figure is the largest type; use tabular figures everywhere
+6. Animate the reveal — the arc sweep and the counting number land together (~900ms ease-out)
+7. Elevation is surface value (`#0B0B0F` → `#16161C` → `#1E1E26`), not shadow; the ring is flat
+8. The tab bar stays neutral white — domain color lives only in content
+9. Oura is dark-first — do not surface a light theme