Design Tokens
The foundational visual primitives — colors, typography, spacing, shadows, and radii. All defined as CSS custom properties.
Primary Palette
Accent Dark
--accent-dark
#5C3D1E
Accent Container
--accent-container
#F0E6DA
On Accent Container
--on-accent-container
#2C1A06
Neutral Palette
Gray 100
--gray-100
#F0EDEA
Gray 200
--gray-200
#DDD9D5
Gray 300
--gray-300
#C0BBB5
Gray 400
--gray-400
#9A948E
Gray 500
--gray-500
#7E8389
Gray 700
--gray-700
#3C3835
Gray 900 / Navy
--gray-900
#101820
Typography Scale
Page Title
1.25rem / 700
Dashboard Overview
Card Title
0.9rem / 700
Server Status
Section
0.82rem / 600
Network Configuration
Body
0.78rem / 500
System uptime: 99.97% over the last 30 days.
Label
0.72rem / 600
SIDEBAR LABEL
Tiny
0.65rem / 600
RACK UNIT LABEL
Mono
JetBrains Mono
srv-prod-01 · v2.4.1
Elevation & Shadows
--shadow-md
Level 2 — Hover
--shadow-lg
Level 3 — Modals
All Tokens Reference
| Token | Light Value | Dark Value | Usage |
|---|
--bg | #f3f4f6 | #020617 | Page background |
--white | #ffffff | #1e293b | Card / Surface |
--border | --gray-200 | #3b4f6a | All borders |
--muted | --gray-500 | #94a3b8 | Secondary text |
--text | --gray-900 | #ffffff | Primary text |
--accent | #744F28 | #C4956A | Primary action |
--green | #2D6A4F | #7AB08A | Success / Online |
--red | #ba1a1a | #fca5a5 | Error / Critical |
--orange | #8b5000 | #fcd34d | Warning |
--sidebar-w | 240px | Sidebar width |
--topbar-h | 56px | Topbar height |
--radius | 12px | Default radius |
--radius-lg | 16px | Card radius |
--mono | JetBrains Mono | Code, IPs, versions |