Colors & Design Tokens
The Outer Edge system uses the shadcn/ui neutral scale with a single destructive (red) accent for error states. All tokens map to CSS variables in the :root and automatically invert in dark mode.
Neutral scale
#0a0a0a
Neutral 950
Background Dark
#171717
Neutral 900
Surface Dark
#262626
Neutral 800
Border Dark
#404040
Neutral 700
Muted Dark
#737373
Neutral 500
Placeholder
#a3a3a3
Neutral 400
Muted Light
#e5e5e5
Neutral 200
Border Light
#f5f5f5
Neutral 100
Surface Light
#fafafa
Neutral 50
Background Light
#ffffff
White
Pure White
Destructive scale — errors, danger, and delete actions only
#b91c1c
Red 700
Text on light bg
#ef4444
Red 500
Destructive action
#fca5a5
Red 300
Border tint
#fef2f2
Red 50
Background tint
CSS Variables (Root)
| Token | Value (HSL) | Usage |
|---|---|---|
| --background | 0 0% 100% | Page background |
| --foreground | 0 0% 3.9% | Primary text |
| --card | 0 0% 100% | Card background |
| --card-foreground | 0 0% 3.9% | Card text |
| --border | 0 0% 89.8% | Default border |
| --input | 0 0% 89.8% | Input border |
| --primary | 0 0% 9% | Primary action |
| --primary-foreground | 0 0% 98% | On primary |
| --secondary | 0 0% 96.1% | Secondary surface |
| --muted | 0 0% 96.1% | Muted surface |
| --muted-foreground | 0 0% 45.1% | Muted text |
| --accent | 0 0% 96.1% | Accent surface |
| --destructive | 0 84.2% 60.2% | Error / danger action |
| --destructive-foreground | 0 0% 98% | On destructive |
| --radius | 0.25rem | Border radius (small) |