Components
Cards
The atomic container of the entire information architecture. Every dashboard surface is a card in one column; everything else in the system is either inside a card or above one.
Anatomy
Section Label
Card title stays calm
Body copy at 14/20. The eyebrow does the shouting so the title doesn't have to.
| Part | Spec |
|---|---|
| Container | .card · white · radius --r-card (16) · filter: var(--shadow) · no border |
| Padding | 16–20px |
| Rhythm | width 100%, no side margins · margin-bottom: 16px · shell owns the inset |
| Opening | 11px eyebrow Label, then content |
States
| State | Behaviour |
|---|---|
| Default | Resting elevation, full content |
| Expanded | Inline accordion (enumerable content) or bottom-sheet drawer (narrative content) |
| Empty | Eyebrow stays · instructional line (“Learning your patterns”) · optional log action. Cards never disappear and never show dashes or zeros |
| Privacy | Text blurred, pointer-events off |
Do
- ·Open every card with an eyebrow label
- ·Follow any chart or score with an interpretation sentence
- ·Keep cards full-width — the column is the priority order
- ·Use drawers for narrative detail, accordions for lists
Don't
- ·Add borders — elevation is the only card boundary
- ·Nest cards inside cards
- ·Hide an empty card — show the learning state instead
- ·Introduce side margins or custom gaps between cards
Accessibility
- —Expandable card faces are buttons with
aria-expanded. - —Privacy blur also disables pointer events so screen-reader focus order matches what sighted users can act on.