Theme Tokens
Complete reference for the emblem theme system.
Three modes: light, dark, and vibrant.
Brand Colors
Core brand palette defined in :root. These don't change between modes.
--color-crimson #B91C1C Primary red - brand signature --color-crimson-bright #DC2626 Brighter red for dark modes --color-red-brownish #a92e2c Muted red variant --color-navy #1D4ED8 Secondary blue --color-navy-bright #2563EB Brighter blue for dark modes --color-electric #60A5FA Electric blue accent --color-amber #B45309 Accent warm --color-amber-bright #F59E0B Brighter amber Background & Foreground
Named colors for backgrounds and text.
--color-ivory #F9FAFB Light mode background --color-midnight #172554 Dark mode background (blue-950) --color-haiti-blue #141531 Deep dark background --color-charcoal #171717 Light mode text --color-snow #FFFFFF Dark mode text Graphite Scale
Neutral grey scale for surfaces and borders.
950
900
800
700
600
500
400
300
200
100
50
Semantic Tokens by Mode
These tokens change based on data-mode. Use these in components for automatic theming.
| Token | Light | Dark | Vibrant |
|---|---|---|---|
--color-background | var(--color-ivory) | var(--color-haiti-blue) | var(--color-haiti-blue) |
--color-foreground | var(--color-charcoal) | var(--color-snow) | var(--color-snow) |
--color-surface | #FFFFFF | color-mix(bg 85%, white) | color-mix(bg 90%, white) |
--color-surface-muted | #F5F5F5 | color-mix(bg 70%, black) | color-mix(bg 70%, black) |
--color-primary | var(--color-crimson) | var(--color-red-brownish) | #EF4444 (red-500) |
--color-primary-foreground | var(--color-snow) | var(--color-snow) | var(--color-snow) |
--color-secondary | var(--color-navy) | var(--color-navy-bright) | #3B82F6 (blue-500) |
--color-accent | var(--color-amber) | var(--color-electric) | #FBBF24 (amber-400) |
--color-muted | #E5E5E5 | color-mix(bg 80%, white) | color-mix(bg 90%, transparent) |
--color-muted-foreground | #525252 | #94A3B8 | #E5E5E5 |
--color-border | #D4D4D4 | color-mix(bg 70%, white) | rgba(220, 38, 38, 0.5) |
--color-ring | var(--color-crimson) | var(--color-crimson-bright) | #EF4444 |
Effect Tokens
Visual effect intensities that scale with mode. Light is minimal, vibrant is maximum impact.
| Token | Light | Dark | Vibrant |
|---|---|---|---|
--fx-glow-opacity | 0.08 | 0.25 | 0.5 |
--fx-glow-spread | 10px | 25px | 50px |
--fx-glow-color | rgba(185,28,28,0.1) | rgba(220,38,38,0.3) | rgba(239,68,68,0.5) |
--fx-text-shadow | none | 0 0 40px rgba(...)0.3 | 0 0 80px rgba(...)0.5 |
Additional effect tokens:
--fx-hero-gradient— Radial gradients for hero sections--fx-card-bg,--fx-card-border,--fx-card-shadow— Card styling--fx-headline-gradient— Text gradient for headlines--fx-orb-color— Decorative orb accent color
Mode Characteristics
Light Mode
Clean, professional
- Ivory background, charcoal text
- Crimson primary, navy secondary
- Minimal effects, subtle shadows
- Clean surfaces with subtle glass-morphism
Dark Mode
Bold, confident
- Haiti-blue background, snow text
- Muted red primary, electric blue accents
- Moderate glow effects
- Deep surfaces with subtle gradients
Vibrant Mode
High-impact expressive
- Same haiti-blue background
- Loud red, bright blue, amber accents
- Maximum glow, dramatic shadows
- Bold borders, cosmic gradient backgrounds
Usage
In CSS
.my-component {
background: var(--color-surface);
color: var(--color-foreground);
border: 1px solid var(--color-border);
}
.my-component:hover {
border-color: var(--color-primary);
box-shadow: var(--fx-card-shadow-hover);
}In Tailwind
<div class="bg-surface text-foreground border-border">
<button class="bg-primary text-primary-foreground">
Action
</button>
</div>With Helper Classes
<!-- Cards -->
<div class="card p-6">Card content</div>
<!-- Buttons -->
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<!-- Gradient text -->
<h1 class="gradient-text">Headline</h1>
<!-- Hero shell (adds gradient background in dark/vibrant) -->
<section class="hero-shell">...</section>File Location
Theme definitions are in:
src/styles/themes/emblem-theme.css Base Tailwind setup and global utilities:
src/styles/global.css