75 lines
2.0 KiB
Markdown
75 lines
2.0 KiB
Markdown
# Design System Specification
|
|
|
|
## Core Principles
|
|
|
|
1. **Function over flash** — No decorative elements
|
|
2. **Typography-first hierarchy** — Size, weight, spacing do the work
|
|
3. **Semantic colors only** — Colors indicate meaning, not decoration
|
|
4. **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`
|