Components
Today Cards
The four cards of the read-only dashboard, in fixed order: Daily Focus, Fuelling, Recent Trends, What Usually Happens Next. Together they answer: what's affecting me, what do I need, what changed, what's coming.
DailyFocusCard — the flagship
Purpose.Answers the product's central question: what is most likely affecting my capability today? The face shows one of four recommendation titles — Train normally · Train lighter · Recover first · Rest guilt-free — with the capacity bar. The drawer carries the reasoning.
Today's Focus
Mid Luteal · CD 21
Train lighter
Recovery strain is elevated after two hard sessions on short sleep.
| Layer | Contents |
|---|---|
| Face | eyebrow · cycle subtitle (phase / “Cycle irregular” / “Xd since last bleed” by cycleMode) · recommendation title · capacity bar · optional notices |
| Drawer | “Daily Focus” title · capacity bar · recommendation block · recommended workout chips · “Recommendations based on…” · red assumptions section with action buttons |
| Capacity bands | ≥90 High · 75–89 Good · 50–74 Moderate · 25–49 Limited · <25 Very Limited |
| States | full-data · learning (<5 entries or <2 period starts → “Learning your patterns”) · sleep-missing notice · cycle-uncertain notice · privacy |
| Interaction | assumption button (sleep | symptoms | workout | wearable) → sheet closes → matching log screen opens after 320ms |
| CSS | .dfc-* |
Cycle-mode behaviour on the face
- regular — phase labels shown normally
- irregular (35–59d since last bleed) — subtitle “Cycle irregular”, orange-bordered uncertainty notice, operating mode derives from capacity
- late_peri (≥60d) — subtitle “Xd since last bleed”, no phase labels, “Follow how you feel today”
- no_data — the learning path
FuelingCard
Fuelling
Hard training plus short sleep raises protein and electrolyte needs today.
| Property | Spec |
|---|---|
| Dots | 1–3 per group · filled #C2581D · empty --accent-light |
| Baselines | Carbs 2 · Protein 2 · Electrolytes 1 — adjustments only floor upward (Math.max), mirroring the engine |
| Always | one explanation sentence below the dots |
| CSS | .fuel-* |
RecentTrendsCard & WhatNextCard
Recent Trends
Energy is recovering while sleep slips — watch tonight.
What Usually Happens Next?
On similar days, your energy usually dips for a day then recovers.
| Card | Spec |
|---|---|
| RecentTrends | 3 square tiles (↑/↓/→ + label) + sentence · empty below 3 recent entries · .trd-* |
| WhatNext | 1–2 outcome chips + one-sentence outlook · similarity-matched on personal history, population fallback at low confidence (hedged copy) · empty below 5 entries · .whn-* |
Do
- ·Keep the fixed order: Focus → Fuelling → Trends → WhatNext
- ·Lead with the interpretation title; keep scores as evidence
- ·Show learning states with a next action
- ·Route every assumption to its fixing log screen
Don't
- ·Show “Crash risk unavailable” or any unavailable-style copy
- ·Add raw numbers without an interpretation sentence
- ·Let cycle phase become the headline driver
- ·Reorder or interleave other cards into the Today stack
Accessibility
- —Trend arrows pair with
sr-onlydirection words; dot groups carry “X of 3” labels. - —The capacity bar exposes value and state via
aria-label; the state word is always visible text. - —Notices are bordered callouts, never bare color.