CSS Variables & Design Tokens

Complete reference for Aevum Encyclopedia's design system. All component styling relies on these custom properties to ensure consistency, accessibility, and dynamic theming.

Live Preview

Interactive

Components automatically adapt to theme variables. Toggle the header button to see real-time updates.

Verified Active Review

Typography Scale

Small text (0.75rem)

Small base (0.875rem)

Standard body text

Large text (1.125rem)

Theme Architecture

CSS Custom Properties

Variables are scoped to :root and overridden via [data-theme="dark"]. All colors, spacing, typography, and shadows are tokenized.

:root {
  --color-primary: #2563eb;
  --color-surface: #ffffff;
  --space-4: 1rem;
  --radius-md: 0.5rem;
}

[data-theme="dark"] {
  --color-surface: #1e293b;
  --color-text: #f8fafc;
}

Change any variable in the console or via CSS and the entire UI updates instantly.

Token Reference

Category	Variable	Default Value	Usage
Colors	--color-primary	#2563eb	Buttons, links, focus states
Colors	--color-surface	#ffffff	Cards, modals, dropdowns
Colors	--color-bg	#f8fafc	Page background, app shell
Colors	--color-text-muted	#64748b	Secondary text, placeholders
Typography	--font-sans	Inter, system-ui	Body text, headings, UI
Typography	--font-mono	JetBrains Mono	Code blocks, tags, monospace data
Spacing	--space-4	1rem	Padding, margins, gaps
Spacing	--space-8	2rem	Section padding, layout gaps
Radius	--radius-md	0.5rem	Buttons, inputs, badges
Radius	--radius-lg	0.75rem	Cards, modals, panels
Shadows	--shadow-md	0 4px 6px...	Elevated surfaces, dropdowns
Shadows	--shadow-lg	0 10px 15px...	Modals, popovers, fixed elements

Developer Usage

1. Access Variables

Use var(--token-name) in any CSS property. Fallbacks are recommended:

.element {
  background: var(--color-surface, #fff);
  padding: var(--space-4, 1rem);
}

2. Theme Switching

Toggle data-theme on <html>. JS handles persistence:

document.documentElement
  .setAttribute('data-theme', 'dark');

3. Override Scope

Override tokens locally for component-specific theming:

.special-card {
  --color-primary: #8b5cf6;
  --radius-lg: 1.5rem;
}