Gold-hero · liquid glass · material bones · cyberpunk pulse — 8-color palette · gold glows · amber doesn't · WCAG AA, responsive, motion-safe
Thumb deforms during transition. Internal light shifts with state. Refraction ring tracks the thumb.
Meniscus fill with fluid leading edge. Surface-matched thumb with luminant border glow. Compress on grab, spring on release.
All spacing uses a 4px base unit. Use --space-N tokens exclusively — no magic numbers.
| 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 |
--accent-*, --value-*, --text-*) rather than raw palette tokens. Semantic tokens automatically adapt between light and dark themes.| Intent | Token | Example |
|---|---|---|
| Hero, primary CTA, focus, active | --accent-gold | Confirm button, focus ring, active nav, key metrics, chart primary |
| Secondary, analytical, process | --accent-purple | Analyze button, deploy status, forecast lines, processing badge |
| Informational, system, links | --accent-blue | Info badges, storage metrics, system status, in-progress |
| Success, healthy, passed | --accent-green | Approve button, test coverage, uptime, builds passed |
| Warning, attention (matte, no glow) | --accent-amber | Review button, warning toast, latency alert, caution badge |
| Error, critical, destructive | --accent-red | Delete button, incident count, build failed |
Every interactive component must implement: default, hover, focus-visible, active, and disabled. Error and loading states apply to form fields and data cards respectively.
| State | Visual Treatment |
|---|---|
| Default | Base styling as documented |
| Hover | Elevated glass surface, subtle glow on accent components |
| Focus-visible | var(--focus-ring) — 2px gap + 2px ring in accent color |
| Active/Pressed | Scale down slightly, increased optical depth |
| Disabled | 40% opacity, cursor: not-allowed, no pointer events |
| Error | Red border, red hint text, red focus ring |
| Loading | Shimmer gradient on content area, preserved label |
| Requirement | Implementation |
|---|---|
| Color contrast | All text meets WCAG AA (4.5:1 normal, 3:1 large). Semantic text tokens are pre-verified. |
| Focus indicators | :focus-visible on all interactive elements. Mouse users don't see focus rings. |
| Reduced motion | prefers-reduced-motion: reduce kills all animations and transitions. |
| ARIA labels | Icon buttons need aria-label. Gauges use role="meter". Progress bars use role="progressbar". |
| Form labels | Every input has an explicit <label> with matching for/id. |
| Backdrop fallback | @supports not block provides solid background when backdrop-filter unavailable. |
| Token | Blur | Border | Use |
|---|---|---|---|
--glass-depth-1 | 8px, sat 1.1 | 5% white | Recessed elements: tab bar backgrounds, input fields, inner panels |
--glass-depth-2 | 20px, sat 1.3 | 10% white | Standard cards, panels, modals — the default surface |
--glass-depth-3 | 32px, sat 1.5 | 16% white | Elevated/focused: hover states, nav bars, active panels, popovers |
Apply depth explicitly with .glass-depth-1 or .glass-depth-3 modifiers. Default .glass is depth-2, and transitions to depth-3 on hover automatically.
Two components have unique "liquid" physics that establish Aurora Core's visual identity:
| Component | Signature Behavior |
|---|---|
| Liquid Toggle | Thumb deforms (squash/stretch) during state transition. Toggles use the secondary/system spectrum (purple → blue) rather than the hero gold spectrum because they represent ongoing system/process state, not primary call-to-action intent. Track has an internal light gradient that shifts with state. Refraction ring around thumb. |
| Liquid Slider | Fill has a meniscus (blurred leading edge) that gives the fill a fluid appearance. Thumb uses the system's surface color with a luminant border that glows on hover — matching the glass depth language. Grab compresses, release springs back. Value label flashes on change. |
.gold-track, .green-track, .red-track, .amber-track, .blue-track, .purple-track.| Breakpoint | Behavior |
|---|---|
| > 1024px | Full grid layouts. Bottom nav hidden (use sidebar). 4-col stat grids. |
| 768–1024px | 4-col grids collapse to 2-col. Token grid scrolls horizontally. |
| < 768px | All grids single column. Bottom nav visible. Reduced page padding. |