Foundations
Aura’s visual foundations — color, type, layout, icons, motion, accessibility, and theming.
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.
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
| Foundation | Status |
|---|---|
| Accessibility | Specified. Perceivable, operable UI, APCA targets, focus, 17px fields, reduced motion. |
| Color | Specified. 12-step accent and gray scales, status pairs, semantic aliases. |
| Components | Specified. Registry ownership, variants, and the rule against restyling primitives at the call site. |
| Data visualization | Chart families in the Charts section. Series tokens --chart-1–--chart-5, gray grid and ticks, 250ms motion. |
| Icons | Specified. Radix icons as type, icon class, gap on the container. |
| Layout | Specified. 13px grid, containers, .aureole. |
| Depth and elevation | Specified. Radius tied to spacing, tonal sheets, borders at steps 6–8. DESIGN.md §6 keeps this as its own system. |
| Motion | Specified. CSS tokens, compositor-friendly properties, reduced motion. |
| Patterns | Specified. asChild composition, form wiring, section rhythm. |
| Theming | Specified. prefers-color-scheme, .dark status colors, theme color switcher. |
| Typography | Specified. Fluid clamp() scale, Gabarito, 17px root and form floor. |