Color Tokens
8-color palette. Gold emits light (glows on hover). Amber stays matte — warning never outranks hero intent.
box-shadow glow on every interactive state. Amber never does — it only brightens its border.Glass Depth System
Three optical tiers. Blur, border opacity, and inner luminance increase together. Hover any panel to see the depth shift.
Inner panels, inputs
Cards, panels
Hover, focus, nav
Typography Scale
Major third ratio (1.25). Outfit for body, Space Mono for labels and data.
Editor Tokens
Semantic color tokens for code editor surfaces. Each zone gets its own variable so themes stay consistent across any embedded editor.
--aurora-editor-bg
--aurora-editor-gutter-bg
--aurora-editor-active-line
--aurora-editor-selection
--aurora-editor-search
--aurora-editor-search-selected
App Shell
Layout tokens for the standard application shell. Sidebar width, titlebar height, padding, gap, and corner radius are all tokenized.
--aurora-app-shell-sidebar-width
220px
--aurora-app-shell-titlebar-height
44px
--aurora-app-shell-padding
var(--space-6)
--aurora-app-shell-gap
var(--space-6)
--aurora-app-shell-radius
var(--radius-lg)
Input & Fields
Surface tokens for interactive inputs, selects, and scrollable regions. Focus ring is always gold.
var(--aurora-input-surface-field)var(--aurora-input-surface-field-hover)var(--aurora-input-surface-field-active)Custom scrollbar styling with --aurora-scrollbar-thumb tokens.
--aurora-scrollbar-thumb
--aurora-scrollbar-thumb-hover
Stat Cards
Seven color variants. Each has a top accent bar and corner aura. Gold glows, amber stays matte — even at the card level.
Buttons
Seven semantic variants plus icon buttons. Primary (gold) is the only button that emits light.
Badges
Semantic status indicators. Each has a pulsing dot — except amber (matte) and silver (no dot).
Form Controls
Text inputs, selects, and error states. Focus ring is always gold.
Progress & Gauges
Linear progress bars with gradient fills. Circular gauges with SVG strokes and color-coded glow.
Tab Bar
Glass-backed tab pills. Active state uses depth-1 inner glass.
Toast Notifications
Three levels: success (green glow), warning (amber, matte — no glow), error (red glow).
Inline Alerts
Five semantic tones for inline status banners. Gold glows (hero emphasis), amber stays matte (warning never outranks hero).
Avatar Stack
Overlapping initials with color-coded backgrounds. Seam borders match the surface base.
Glass Cards
Cards at three optical depth tiers. Blur, border opacity, and inner luminance increase together. Hover to see the depth shift.
Best for inner panels, nested containers, and input backgrounds. Lowest blur and border opacity creates a subtle inset feel.
The default for cards, panels, and content containers. Medium blur with visible edge luminance creates balanced elevation.
Reserved for hover states, floating elements, and navigation. Maximum blur with strong edge light and pronounced luminance.
Modals & Dialogs
Glass-backed modal overlays with optical depth. Click the buttons to open interactive demos.
Modals use depth-3 glass (32px blur) to float above the content layer. The backdrop dims with a 45% opacity overlay. Focus is trapped within the modal for accessibility.
Sidebar
A compact navigation sidebar with active state (gold), hover effects, section labels, and a collapse toggle.
Search & Filters
Glass-styled search input with icon prefix and filter pills for quick categorical filtering.
Status Badges
Extended status indicators with colored dots, labels, and semantic meaning. Gold glows, amber stays matte.
Tab Strip
Editor-style tab strip with close buttons, dirty indicators, and gold active tab. Click tabs to switch, close buttons to remove.
2 <html lang="en">
3 <head>
Banners
Full-width info, warning, and error banners with icons and dismiss buttons. Amber banners stay matte, never glow.
Split Panes
Resizable split container with a drag handle. Drag the center divider to resize the left and right panels.
return "hello";
}
System Rules
Three non-negotiable rules that govern every component, every state, every platform.
Hero actions, focus rings, premium metrics, and primary buttons all get box-shadow glow. Gold is the only color that radiates.
Warning states use amber but never glow. Border may brighten on hover, but box-shadow glow is forbidden. Warning never outranks hero intent.
Three tiers: blur, edge light, and internal luminance increase together. 8px / 20px / 32px. Never mix depth signals.
Design Token Reference
Use named tokens exclusively — no magic numbers. All spacing uses a 4px base unit.
| Token | Value | Usage |
|---|---|---|
--space-1 | 4px | Tight gaps, inline padding |
--space-2 | 8px | Icon gaps, badge padding |
--space-3 | 12px | Button padding, input padding |
--space-4 | 16px | Form group margins, small section gaps |
--space-6 | 24px | Card padding, grid gap |
--space-9 | 48px | Section margins |
--space-10 | 64px | Major section separation |
Major Third (1.25) ratio. Use named tokens — never raw pixel values.
| Token | Size | Usage |
|---|---|---|
--text-xs | ~11px | Overlines, mono labels, badge text |
--text-sm | ~13px | Captions, metadata, button labels |
--text-base | 16px | Body text, input text |
--text-lg | 20px | Card titles, panel headers |
--text-xl | 25px | Section headings, gauge values |
--text-2xl | 31px | Stat values, key metrics |
--text-3xl | 39px | Page title only |
How to choose the right color for any element.
| Role | Color | Glow? | Usage |
|---|---|---|---|
| Hero / Primary | Gold | Yes | CTA buttons, focus, premium metrics, active nav |
| Secondary | Purple | Yes | Analytics, process states, secondary actions |
| Informational | Blue | Yes | System info, links, data visualization |
| Success | Green | Yes | Healthy, approved, positive change |
| Warning | Amber | No | Caution — border only, never glows |
| Error | Red | Yes | Critical, failed, negative change |
| Neutral | Silver/Grey | No | Archived, disabled, tertiary actions |
Documentation
Source files, platform references, and governance docs. Open any file to dive deeper.