The primitives.

Foundations are the design primitives that are not components — the tokens every component reads from. Eleven token sets, data-driven from source so a token change propagates everywhere.

·01

Overview

Token-system orientation — modes, schemes, the two layers.

·02

Colors

Primary, secondary, status, and the full ramp set — with HEX / RGB / CMYK.

·03

Typography

The two typefaces, the scale, weights, and hierarchy in use.

·04

Spacing

The 4px base scale — eleven steps for every gap and pad.

·05

Radius

Five corner radii — soft, restrained, never sharp.

·06

Elevation

Shadow / surface elevation.

·07

Motion

Duration, easing, and distance constants.

·08

Density

The data-density scale.

·09

FocusRing

Focus-visible ring tokens.

·10

Grid

Layout grid tokens.

·11

Validation

Input state tokens — error / warning / success.

data-driven · Lumos design tokens

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait