41 lines
1.9 KiB
Markdown
41 lines
1.9 KiB
Markdown
# SMK Family — Color Palette
|
|
|
|
Dark-first, warm, family-friendly. Deep charcoal/navy grounds with warm amber & coral accents.
|
|
No harsh neon, no cold corporate blues.
|
|
|
|
## Semantic tokens
|
|
|
|
| Token | Hex | Usage |
|
|
|-------|-----|-------|
|
|
| `smk-bg` | `#14161B` | App background (deep warm charcoal) |
|
|
| `smk-bg-alt` | `#1A1E28` | Raised background / panels |
|
|
| `smk-surface` | `#232838` | Cards, nav, dialogs |
|
|
| `smk-surface-2` | `#2A3040` | Hover, input fills |
|
|
| `smk-border` | `#333A4A` | Hairlines, dividers |
|
|
| `smk-text` | `#F5F0E6` | Primary text (warm off-white) |
|
|
| `smk-text-dim` | `#B9B2A6` | Secondary text (warm taupe) |
|
|
| `smk-text-faint` | `#8A8579` | Muted / disabled text |
|
|
| `smk-amber` | `#F2A65A` | **Primary accent** — friendly warmth |
|
|
| `smk-coral` | `#E8755D` | Secondary accent — sunset energy |
|
|
| `smk-sage` | `#A3C585` | Success / positive (soft green) |
|
|
| `smk-rose` | `#D98A8A` | Warning / destructive (warm, not red-alarm) |
|
|
|
|
## Gradients
|
|
|
|
- **Primary logo gradient**: `#F2A65A` (amber) → `#E8755D` (coral), top-left → bottom-right.
|
|
- **Background wash**: `#14161B` → `#1A1E28` → `#232838`, with a low-opacity amber radial glow top-right and coral blobs at low opacity for depth.
|
|
|
|
## Dark-first rules
|
|
|
|
1. Default surface is always dark. Light mode is an explicit opt-in, never default.
|
|
2. Never use pure black (`#000000`) — `#14161B` reads softer and keeps warm undertone.
|
|
3. Never use pure white — `#F5F0E6` keeps text warm and reduces glare.
|
|
4. Accent usage: amber for interactive/primary, coral for highlights/brand moments, sage for success states only.
|
|
5. Contrast: `smk-text` on `smk-bg` = ~12.4:1. `smk-text-dim` on `smk-bg` = ~6.3:1 (AA OK for body).
|
|
6. 3:1 minimum contrast for large text / UI components with accents.
|
|
|
|
## Accessibility
|
|
|
|
- Don't rely on color alone — pair amber with icons/shapes.
|
|
- Focus rings: 2px `smk-amber` outline with 2px `smk-bg` gap.
|