Components
Badges & Status
Small, quiet truth-tellers: the confidence badge says how sure the system is, the sync dot says where your data is, and the demo banner says whose data you're looking at.
Pattern confidence badge
LowMediumHigh
| Level | Visual | Engine meaning |
|---|---|---|
| Low | warm grey on --bg2 | hedged language, cycle framing withheld |
| Medium | accent-dark on tint | counts as an Insight |
| High | chart green on chart tint | direct causal framing allowed |
Sync status dot
Not syncedSyncedSyncing…Sync error
Demo banner
Demo — Sara Jackson · browsing sample data
| Property | Spec |
|---|---|
| Trigger | “I just want to browse” on the splash screen |
| Persistence | visible for the entire session — it is the disclosure that the FAB is inert |
| Dismissal | sign-out returns to splash and clears demo mode |
Do
- ·Keep badges as words (Low / Medium / High), tinted second
- ·Pair the sync dot with its caption label
- ·Let the demo banner persist — it is consent context
Don't
- ·Invent new badge colors — the three confidence tints are the set
- ·Use badges for actions — badges only report state
- ·Blink or animate badges other than the syncing pulse
Accessibility
- —Confidence is always a word; tint is reinforcement.
- —The sync dot's color states are duplicated by the caption text (“Syncing…”, “Sync error”).
- —The demo banner is rendered as text, not an image, and stays in the accessibility tree.