Design System Specification
Core Principles
- Function over flash — No decorative elements
- Typography-first hierarchy — Size, weight, spacing do the work
- Semantic colors only — Colors indicate meaning, not decoration
- Selective interactivity — Hover effects only on interactive elements
Color System
Duo-Tone Base
| Token |
Light Mode |
Dark Mode |
Usage |
--bg-primary |
#ffffff |
#0f0f10 |
Page background |
--bg-secondary |
#f4f4f5 |
#18181b |
Cards, panels |
--text-primary |
#09090b |
#fafafa |
Headings, body |
--text-secondary |
#71717a |
#a1a1aa |
Labels, hints |
--border |
#e4e4e7 |
#27272a |
Dividers, inputs |
--accent |
#0d9488 |
#14b8a6 |
Primary actions |
Semantic Indicators
| Token |
Value |
Usage |
--indicator-normal |
#22c55e |
In range, healthy |
--indicator-warning |
#eab308 |
Borderline, attention |
--indicator-critical |
#ef4444 |
Out of range, urgent |
--indicator-info |
#3b82f6 |
Neutral info |
Typography
- Font: System stack (
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
- Scale: 12 / 14 / 16 / 18 / 24 / 32px
- Weights: 400 (regular), 500 (medium), 600 (semibold)
Restrictions
- ❌ No gradients
- ❌ No shadows deeper than
0 1px 2px
- ❌ No decorative animations
- ❌ No hover effects on non-interactive elements (table rows, cards)
- ✅ Transitions only for state changes (expand/collapse, loading)
Component Guidelines
Buttons
- Primary: filled with
--accent
- Secondary: outlined
- Hover: darken 10%, no scale/glow
Tables
- No row hover
- Alternating bg optional (use
--bg-secondary)
- Color indicators in dedicated status column
Cards
- Flat, bordered
- No shadow
- Consistent padding (16px)
Forms
- Label above input
- Border on focus only
- Error states use
--indicator-critical
