Aura Design System
A compact, composable UI system with semantic tokens, a considered type and spacing scale, and a set of accessible, themeable components. Built to be explored: switch themes, drag things around, and open a dialog.
Colors
A neutral ramp for surfaces and text, an accent ramp for interaction, and semantic status hues. Components consume semantic tokens, never raw hex.
Typography
A modular type scale pairing a display face for headings with a clean sans for body. Sizes are exposed as tokens for consistent rhythm.
Spacing
A 4px-based scale keeps layouts on a predictable grid. Use tokens for padding, gaps and margins instead of magic numbers.
Radius
Corner radii scale with component size — subtle on inputs, softer on cards and dialogs, full for pills and avatars.
Elevation
Five shadow steps convey depth and focus. Higher elevation means more transient — cards sit low, dialogs and toasts sit high.
Motion
Easing curves and durations give the system a consistent sense of movement. Standard for most transitions, emphasized for entrances.
Badges
Compact status and metadata labels. Soft tones for subtle emphasis, solid for stronger signals, with an optional status dot.
Tooltip
Contextual hints on hover or keyboard focus. Positioned above the trigger with a subtle motion and pointer.
Switch
An accessible toggle for binary settings — role=switch, keyboard operable, with a spring-eased thumb.
Inputs
Form fields with labels, hints, validation and a consistent focus ring. Text, select and textarea share the same visual language.
Modal
A focus-trapped confirmation dialog for yes/no decisions. Backdrop click and the Escape key cancel; Enter confirms.
Toasts
Transient feedback that stacks in the corner and auto-dismisses. Colour-coded by intent with a manual close.
Skeleton
Placeholder loaders with a soft shimmer, shown while content streams in. Every section on this page reveals its body through one as it scrolls into view.
Drag & Drop
A reorderable list built on native drag events. Grab a row and drop it anywhere — the index updates live.
Photo Gallery
A responsive image grid with a full-screen lightbox. Navigate with the arrows or your keyboard; Escape closes.