Aura Design System

Foundations

Aura’s visual foundations — color, type, layout, icons, motion, accessibility, theming, and the categories we have not specified yet.

Foundations are the rules Aura already encodes: tokens in CSS, Stylus variables in the styled system, component behavior, the visual lint, and the written philosophy in DESIGN.md and the rules.

Each page records a rule that already lives in tokens, Stylus, components, lint, or DESIGN.md. Where Aura has no rule yet, the page says so and stops.

The Handbook shows how styles and composition are wired in this site. The Rules are the same constraints, packaged for agents. Foundations are the reading copy of both.

Pages

FoundationStatus
AccessibilitySpecified. Perceivable, operable UI, APCA targets, focus, 17px fields, reduced motion.
ColorSpecified. 12-step accent and gray scales, status pairs, semantic aliases.
ComponentsSpecified. Registry ownership, variants, and the rule against restyling primitives at the call site.
Data visualizationSpecified for area charts. Series tokens --chart-1–--chart-5, gray grid and ticks, 250ms motion. Other chart families are not in the registry yet.
FigmaNot defined yet. Aura ships source, not a Figma library.
IconsSpecified. Radix icons as type, icon class, gap on the container.
International designNot defined yet. A few components accept dir; there is no layout spec.
LayoutSpecified. 13px grid, containers, .aureole.
Depth and elevationSpecified. Radius tied to spacing, tonal sheets, borders at steps 6–8. DESIGN.md §6 keeps this as its own system.
MotionSpecified. CSS tokens, compositor-friendly properties, reduced motion.
PatternsSpecified. asChild composition, form wiring, section rhythm.
ThemingSpecified. prefers-color-scheme, .dark status colors, theme color switcher.
TypographySpecified. Fluid clamp() scale, Inter, 17px root and form floor.
Voice and toneNot defined yet. Consistency asks for one voice; a writing guide does not exist.

On this page