1. Tokens
Color, typography, spacing, radius, shadow, motion
Spoke Colors
Status Colors
Pill Category Colors
Typography
Heading XL — 40px
Heading L — 28px
Heading M — 20px
Body — 16px
Body Small — 14px
Caption — 12px
Mono Label — 11px
Radius Scale
Spacing (4px increments)
2. Pills
Compact pill × 5 states × 6 categories (30 cells)
| State \ Category | source | transform | control | human | ai | publish |
|---|---|---|---|---|---|---|
| idle | source_op | transform_op | control_op | human_op | ai_op | publish_op |
| running | source_op | transform_op | control_op | human_op | ai_op | publish_op |
| active | source_op | transform_op | control_op | human_op | ai_op | publish_op |
| complete | source_op | transform_op | control_op | human_op | ai_op | publish_op |
| error | source_op | transform_op | control_op | human_op | ai_op | publish_op |
Regular Pill (idle + expanded)
Pill Expression (adjacency without wires)
Pill Anatomy
3. Status Badges
4 states × 3 variants (12 cells)
| Variant \ State | ok | degraded | down | coming-soon |
|---|---|---|---|---|
| inline | Operational | Degraded | Down | Coming Soon |
| standalone | Operational | Degraded | Down | Coming Soon |
| aggregate | Operational | Degraded | Down | Coming Soon |
Sample Status Page (7 spokes)
4. Metric Cards
hero | standard | dense | empty | loading | error
hero
voluntary_attrition_quarterly
★ hightenure_band:0-12mo
standard
engagement_score
department:engineering
time_to_fill_days
role:senior_engineer
internal_mobility_rate
location:remote
promotion_velocity
level:L3-L4
empty
No data yet
dense
loading
error
Failed to load metric
Connection timeout to metrics service
Card Anatomy
voluntary_attrition_quarterly
★ hightenure_band:0-12mo
name — Metric identifier (font-mono)
segment — Target segment filter
value + unit — Primary measurement
delta — Period-over-period change
CI — Confidence interval (never hidden)
n= — Sample size (never hidden)
sparkline — Trend visualization
metadata — Tags, significance, recency
5. Segment Chips
selectable | display | cohort
selectable (toggleable filter)
display (already-applied, with × to remove)
cohort (named segment composition)
New Engineers(department:engineering ∩ tenure_band:0-12mo)n=898-chip Filter Bar
6. Empty / Loading / Error States
Card variants + Workbench grid variants
empty (card)
No metrics configured
Add your first metric to start tracking.
loading (card)
error (card)
Failed to load
Connection refused
workbench grid — empty
No metrics configured
Add metrics from your connected data sources to start building your workbench.
workbench grid — loading
workbench grid — error
Failed to load metrics
Failed to connect to metrics service. Check your API configuration.
7. Spokes Catalog
Seven spoke visual signatures (Finder-tag dots)