UI Systems Playground

A hands-on lab for design tokens, component states, and layout systems. Tune the palette, density, and behaviors in real time.

Studio Snapshot

Systems thinking with visual feedback

Map tokens to real interface components. This playground surfaces spacing, color, and state rules so teams can align on a shared UI language.

TokensStatesDensityLayouts

Live Signals

Theme

Citrus Mesh

Density

Cozy

State

Rest

Grid

Visible

System Controls

Theme presets

Lime focus with warm neutrals.

Density

Roomy layouts

Component state

Grid overlay

Visible

Show baseline spacing for layout reviews.

Token Board

Core colors

Surface

Accent

Accent 2

Accent 3

Type scale

Display

Headline

Title

Body

Caption

Spacing ladder

8px

14px

20px

28px

Radii

10 / 16 / 24

Motion cues

Micro

120ms

Standard

220ms

Focus

360ms

Component Lab

Buttons

Inputs

Toggles

Tabs

Badges

Component note

Primary actions emphasize contrast and motion.

Buttons inherit the current state controls to help visualize UI feedback.

Layout Canvas

System kit

Atlas Commerce

LibraryComponentsDocs

Components

Variants

136

Coverage

92%

Recent activity

Navigation Kit12 variants

Commerce Blocks8 templates

Data Widgets18 charts

Onboarding Flows6 scenes

State coverage

Buttons92%

Inputs84%

Cards77%

Grid units align to 8px increments for consistent rhythm.

System ready