Design System

Declaration, rules, tokens, tiers, and meta-rules

Type scale, font stacks, line heights, and spatial system

Neutral scale, accent generation, functional colors, semantic tokens

Surface hierarchy, borders, shadows, z-index

Hover, focus, active, selected, disabled, loading

Duration scale, easing, reduced motion

Communicate a message with contextual severity.

Display a status indicator or count. Always non-interactive.

Trigger an action or navigation.

Group related toggle buttons into a segmented control or filter bar for mode switching, view selection, or filtering. Supports both single-select (one active) and multi-select (multiple active) modes.

Group related content into a visually distinct container.

Floating action menu for context menus and overflow actions.

Communicate that a view or section has no content, with optional call to action.

Focus attention on a task or message by overlaying the page.

Indicate loading state with a placeholder that approximates content shape.

Indicate loading state with a rotating animation.

Display a categorical label. Optionally interactive (filterable, removable).

Display a vertical sequence of events with icon nodes and a connecting line.

Display structured project metadata in a grid layout inspired by architectural drawing title blocks. Shows a project name and drawing title alongside a metadata grid of labeled fields and prominent sheet/revision badges.