Components
Alerts, Notices & Banners
Peri's alert language is calm and bordered, never flashing. Orange-left-border notices explain uncertainty; the red assumptions block is the system's honesty surface; toasts confirm and leave.
Notices, live
Your cycle has been irregular lately — recommendations lean on recovery signals instead of cycle phase.
No sleep logged for last night — assuming 6h. Capacity is not penalised for missing data.
Assumed today
No workout logged this week. Wearable not connected.
| Surface | Spec | Trigger |
|---|---|---|
.dfc-cycle-notice | orange left border callout | cycleUncertainMessage non-null (irregular / late_peri) |
.dfc-sleep-notice | same family | sleepDataMissing |
| Assumptions section | red-tinted block in detail drawers · lists what the engine assumed + action buttons | any assumption actions present |
Banners & toasts
☁️
Sync your data
Sign in with Google to keep entries backed up to Drive.
Saved & syncing to Drive ✓
| Surface | Spec |
|---|---|
| Auth banner | --accent-tint 35% bg · orange hairline · icon + accent-dark title + body + Google button — signed-out nudge on the dashboard |
| Insight banner (Figma 3:64) | slim full-width tinted strip for inline insight callouts |
| Toast | dark warm-brown pill · bottom · auto-dismiss 2.4s · confirmations only |
| Form error | red border + helper text at the field — see Forms |
Do
- ·Use the orange-border family for uncertainty, red only for assumptions and errors
- ·Give every assumption an action that opens its fixing log screen
- ·Keep toasts to confirmations — one line, then gone
Don't
- ·Block reading with alerts — errors never gate the dashboard
- ·Use bare color fields without border + text structure
- ·Stack multiple toasts — the latest replaces
Accessibility
- —Notices are bordered callouts with text — color is reinforcement.
- —Toasts announce via
aria-live="polite"; they never receive focus. - —Assumption actions are real buttons with descriptive labels (“Log Sleep”), not “Fix”.