Component gallery

Preview cards for tokens, components, and tool UI patterns.

Each link opens a focused static preview. The previews are intentionally narrow and isolated so individual tokens and components can be inspected without the full app shell.

Colors

3 previews
Tokens
Base Surfaces

Dark surface hierarchy, foreground text levels, and core neutrals.
Tokens
Accent Colors

Brand, discipline, and highlight colors used across tool cards and KPIs.
Tokens
Semantic Colors

Border, state, success, warning, info, and error treatments.

Type And Layout

4 previews
Typography
Type Scale

Display, heading, body, label, caption, and mono numeric sizes.
Typography
Font Families

DM Sans, IBM Plex Sans, and IBM Plex Mono usage examples.
Layout
Spacing Tokens

4px-based spacing scale for dense engineering interfaces.
Layout
Radius And Shadow

Corner radius and elevation levels for surfaces, panels, and overlays.

Components

8 previews
Action
Buttons

Primary, secondary, ghost, outline, danger, disabled, and size variants.
Metadata
Badges And Tags

Status badges, discipline tags, pills, and small inline labels.
Forms
Form Inputs

Text fields, selects, unit suffixes, and validation-oriented states.
Surface
Cards

Default, flat, elevated, and accent treatments for repeated content.
Library
Tool Card

Visual cards for browsing and launching discipline-specific tools.
Navigation
Navigation

Top navigation and sidebar navigation treatments.
Results
KPI Cards

Numeric result cards with units, deltas, utilization bars, and state color.
Learning
Expandable Panels

Progressive disclosure for learning notes, assumptions, and equations.