Theme Specification
Dark Mode
Primary interface theme with slate backgrounds and cyan accents
01
Color Palette
Slate Scale
Slate 950
#020617
Slate 900
#0f172a
Slate 800
#1e293b
Slate 700
#334155
Slate 600
#475569
Slate 500
#64748b
Slate 400
#94a3b8
Slate 300
#cbd5e1
Slate 200
#e2e8f0
Slate 100
#f1f5f9
Cyan Accent
Cyan 500
#0ea5e9
Cyan 400
#22d3ee
Cyan 300
#67e8f9
02
CSS Variables
| Variable | Value | Usage |
|---|---|---|
| --slate-950 | #020617 | Page background |
| --slate-900 | #0f172a | Card backgrounds, elevated surfaces |
| --slate-800 | #1e293b | Borders, grid lines, dividers |
| --slate-700 | #334155 | Secondary borders, hover states |
| --slate-500 | #64748b | Muted text, placeholders |
| --slate-400 | #94a3b8 | Secondary text |
| --slate-300 | #cbd5e1 | Body text (default) |
| --slate-100 | #f1f5f9 | Headlines, primary text |
| --cyan-500 | #0ea5e9 | Primary accent, interactive elements |
| --cyan-400 | #22d3ee | Hover states, highlights |
| --cyan-glow | rgba(14, 165, 233, 0.4) | Strong glow effects |
| --cyan-glow-soft | rgba(14, 165, 233, 0.15) | Subtle glow, hover backgrounds |
03
Typography
EXOPLANS
Section Headings
Body text and data displays use JetBrains Mono for its technical, precise character that matches the construction industry aesthetic.
| Variable | Value | Fallback |
|---|---|---|
| --font-display | 'Audiowide' | sans-serif |
| --font-heading | 'Teko' | sans-serif |
| --font-mono | 'JetBrains Mono' | monospace |
| --font-alt | 'Aldrich' | sans-serif |
04
Semantic Mapping
Background
--slate-950
Surface / Card
--slate-900
Border
--slate-800
Border Hover
--slate-700
Muted Text
--slate-500
Body Text
--slate-300
Headings
--slate-100
Primary Accent
--cyan-500
Accent Hover
--cyan-400
05
Effects
Cyan Glow
box-shadow: 0 0 20px var(--cyan-glow),
0 0 40px var(--cyan-glow-soft);
0 0 40px var(--cyan-glow-soft);
Soft Glow
box-shadow: 0 0 15px var(--cyan-glow-soft);
Surface Gradient
background: linear-gradient(135deg,
var(--slate-950), var(--slate-800));
var(--slate-950), var(--slate-800));
/* Glow Variables */
--cyan-glow: rgba(14, 165, 233, 0.4);
--cyan-glow-soft: rgba(14, 165, 233, 0.15);
/* Common Patterns */
box-shadow: 0 0 20px var(--cyan-glow); /* Strong glow */
box-shadow: 0 0 30px var(--cyan-glow-soft); /* Hover state */
background: rgba(14, 165, 233, 0.05); /* Active state bg */