Foundations

Tokens

Every Aurora surface reads from these CSS custom properties — declared once in registry/aurora/styles/aurora.css for dark and light. Click any token name to copy it. Never hard-code hex in product code.

Color

Surfaces & Borders

page-bg
Page background (flat Tier 0)
nav-bg
Sidebars, nav rails
panel-medium
Tier 1 — toolbars, headers, cards
panel-strong
Tier 2 — inspectors, primary panels
control-surface
Input / control backgrounds
hover-bg
Hovered rows, menu items
border-default
Resting separators, table rules
border-strong
Cards, inputs, selected surfaces
Color

Text

Aa
text-primary
Headings, body, control labels
Aa
text-muted
Captions, meta, descriptions
Color

Accents

Cyan — Primary

Primary CTAs, selection, focus, active state.

Rose — Secondary

Agent / send affordances, key labels, active filter tags. One or two touch points per screen.

Axon Orange — AI / Automation

AI / automation identity — model selectors, reasoning, autonomous actions.

Color

Status — Muted, Never Neon

info
Informational, in-progress
success
Healthy, online, passed
warn
Degraded, attention
error
Failed, destructive
neutral
Idle, disabled, offline
Typography

Type Ramp

Display Hero
Manrope 800 · marketing heroes
One palette
Display 1
Manrope 800 · page heroes, big numbers
Active gateways
Display 2
Manrope 700 · section heroes
Authorization
Section
Manrope 760 · section headers, card titles
Production edge gateway
Lead
Inter 480 · intro paragraphs
Operator-grade design system for agent products.
Body
Inter 480 · 14px · default body
Gateway connection lost. Retrying in 30 seconds.
Body Small
Inter 480 · 13px · compact body
Read-only mode — changes require admin approval.
UI
Inter 560 · 13px · working UI text
Deploy plugin
Control
Inter 560 · control labels, buttons
Run query
Label
Inter 650 · 12px · form labels
Gateway name
Caption
Inter 560 · 11px · captions
Updated 2 minutes ago
Meta
Inter 560 · 11px muted · metadata
production-edge.lab.local
Eyebrow
Inter 650 · 11px uppercase · eyebrows
Gateway cluster
Code
JetBrains Mono · code, IDs, paths
npx shadcn@latest add

Manrope for display, Inter for working UI, JetBrains Mono only for code, paths, IDs, and hashes.

Shape

Radii

radius-1 14px
Chips, buttons
radius-2 18px
Small cards, popovers
radius-3 22px
Panels (Tier 1, Tier 2)
Elevation

Shadows & Highlights

Tier 1 surfaces
Tier 2 surfaces

Pair an inset highlight with every shadow — flat-shadowed panels read as plastic without it.

Install

Use the Tokens

Install the token layer first; every component reads from it.

$npx shadcn@latest add https://aurora.tootie.tv/r/aurora-tokens.json