design-language-system
Installation
SKILL.md
Design Language System
Use this guide when creating or modifying UI components to ensure visual consistency across the portfolio.
Colour Tokens
Base Palette
| Token | OKLCH | Hex | Usage |
|---|---|---|---|
--background |
oklch(0.985 0.005 90) |
#FAF9F7 |
Page background (warm paper white) |
--foreground |
oklch(0.15 0.01 270) |
#1F1F23 |
Primary text (deep charcoal) |
--card |
oklch(1 0 0) |
#FFFFFF |
Card backgrounds |
--card-foreground |
oklch(0.15 0.01 270) |
#1F1F23 |
Card text |
--muted |
oklch(0.96 0.005 90) |
#F3F2F0 |
Muted backgrounds |
--muted-foreground |
oklch(0.45 0.01 270) |
#6B6B73 |
Secondary text |
--border |
oklch(0.90 0.005 90) |
#E5E4E2 |
Borders |