Design system primitives
Every primitive in @signal-studio/ui, across its variants. Toggle the theme to verify light + dark; all color flows from semantic tokens.
Button
Aurora gradient primary; glass secondary; ghost + danger are low-emphasis.
Card
Glass `default`, emerald `glow` (hero only), hairline `subtle` for dense views.
default
Translucent glass surface with backdrop blur — the workhorse card.
glow
Emerald-tinted CTA card. Use one per surface, hero placements only.
subtle
Hairline border, no blur — the default for dense list / table rows.
interactive
Hover to see the scale + pointer affordance for clickable cards.
padding="sm"
Compact padding scale.
padding="lg"
Roomy padding scale.
Badge
Three shapes × six tones. `status` is uppercase/bold; `renewal` adds a tone ring.
ScoreBadge
0–100 chip with tiered color: 80+ emerald · 60–79 amber · <60 faint · null → —.
StatCard
Headline metric with variety glow, trend chip, sub-text, optional sparkline + icon.
Exact match
94.2%
Cohen's κ
0.87
Curricula
3
MAE
0.07
Avatar
Initial + deterministic emerald-anchored gradient (same name → same colors).
Skeleton
Shape-mirroring loading placeholders — Bar, Stat, Row, Card, List, Profile.
Bar · Stat · Row
Card · List
Profile
EmptyState
One pattern for every “no data” view. Action-oriented title, never just “No data.”
No evaluation runs yet
Run the judge over a curriculum to see its scorecard against published gold.
No divergences
Judge and gold agreed on every indicator.
Switch
Accessible toggle (role=switch). Two sizes, optional label, disabled state.
Toast
Glass toasts via sonner. Say what happened; never apologize.
ConfirmDialog
Promise-based confirm, replacing native confirm(). Title is the consequence as a question.