Aurora Core Design System v5.4.5

Color Tokens

GOLD

600

500

400

300

200

SILVER

600

500

400

300

200

PURPLE

600

500

400

300

200

BLUE

600

500

400

300

200

GREY

800

700

600

500

400

GREEN

600

500

400

300

200

RED

600

500

400

300

200

AMBER

600

500

400

300

200

Stat Cards

Revenue

$42.8K

↑ 12.5% vs last month

Active Users

18.2K

↑ 8.3% vs last month

Uptime

99.97%

↑ 0.02% last 30 days

Avg. Session

4:32

↓ 2.1% vs last month

Warnings

Requires attention

Open Incidents

↓ 2 from yesterday

Deployments

↑ 5 this week

Loading State

------

Fetching data...

Glass Depth Levels

DEPTH 1

Recessed

8px blur · 5% border · inner panels, inputs

DEPTH 2

Standard

20px blur · 10% border · cards, panels

DEPTH 3

Elevated

32px blur · 16% border · hover, focus, nav

Panels

Analytics

Mar 1 Mar 8 Mar 16

Revenue

Forecast

Messages

3 new

Alex Kim

The design tokens are ready for review — let me know if...

Luna Rodriguez

Meeting moved to 3 PM. Updated the calendar invite.

18m

Jordan Torres

Pushed the hotfix to staging — build looks clean.

Buttons

Standard

Status

Disabled

Icon Actions

Controls & Inputs

Form Fields

We'll never share your email.

API Key (error state)

Invalid API key format.

Disabled

Region

Settings

Dark Mode

Push Notifications

Disabled Toggle

Volume 72%

Opacity 85%

Signature Components

Liquid Toggle

Thumb deforms during transition. Internal light shifts with state. Refraction ring tracks the thumb.

Adaptive Rendering

Neural Upscaling

Predictive Caching

Liquid Slider

Meniscus fill with fluid leading edge. Surface-matched thumb with luminant border glow. Compress on grab, spring on release.

Render Quality 80%

Processing Depth 55%

Badges, Tabs & Progress

Badges

Active In Progress Deployed Healthy Warning Critical Archived

Tab Bar

Progress Bars

Build Pipeline78%

Test Coverage92%

Error Rate18%

API Latency62%

Storage Used45%

Gauges & Notifications

System Gauges

80%

CPU

45%

Memory

92%

Health

Notifications

Deployment completed successfully

API rate limit approaching threshold

Build failed — check pipeline logs

Avatar Stack

8 online

Shared Patterns

GlassCard

Depth 1 — 8px blur

Recessed

Subtle background surface for nested content, input fields, and tab bar backgrounds.

Depth 2 — 20px blur

Standard

The default card surface. Used for panels, modals, and most UI containers.

Depth 3 — 32px blur

Elevated

Highest optical depth. Popovers, active panels, and hover states.

Modal

ConfirmDialog

Sidebar

SearchBar

StatusBadge

Operational Degraded Outage Maintenance

ContextMenu

TabStrip

TitleBar

Aurora Core — Component Sampler

Banner

TagChip

Design System Tokens Analytics Dashboard Infrastructure Monitoring

DropdownButton

IconStrip

ErrorToasts

Deployment completed successfully 3s

Build failed: exit code 1 8s

New version available: v5.4.5 12s

SplitContainer

Source Editor

Left pane content area. Drag the handle to resize. Uses depth-2 glass surface with optical blur.

Preview

Right pane content area. The divider handle highlights gold on hover following the hero accent pattern.

Usage Documentation

Design Token Reference

Spacing

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

Typography Scale

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

Color Decision Tree

Always use semantic aliases (--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

Gold emits light. Amber does not. Warning is intentionally darker and less luminous than gold to prevent confusion with primary actions. In grayscale, gold should read as the brightest warm tone; amber should read as a mid-dark warm tone.

Component States

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

Accessibility Requirements

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.

Aurora Core Depth System

Aurora Core replaces traditional elevation with optical depth. Surfaces are differentiated by blur intensity, border luminance, and internal light — not drop shadows. This is what makes the glass feel like a physical material.

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.

Aurora Core Signature Components

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.

These two components are the "that's Aurora Core" moment. If you're implementing a subset of the system, prioritize getting these right — they carry the identity.

Progress Bar Tracks

Progress tracks use a faint tinted version of the same semantic color as the fill, rather than a neutral grey base. This preserves semantic continuity and makes partial completion states feel intentionally integrated into the system. Apply track classes: .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.