BrandOS — The brand contract generator
Live tweaks
Cycle presets and token axes on top of the active brand. Refresh resets to brand defaults.
Preset
Radius
Density
Depth
Motion
BrandOS · Foundations
Design tokens
Seven canonical surfaces every screen, component and variant of BrandOS is built from.
01 — Color
Semantic, theme-aware roles.
Canvas
--backgroundBody text
--foregroundPrimary
--primarySecondary
--secondaryMuted
--mutedAccent
--accentDestructive
--destructiveBorder
--border02 — Typography
Display and body pairing.
Display
--font-displayBody
--font-sansTechnical
--font-mono03 — Spacing
Density rhythm.
Step 1
0.25remStep 2
0.5remStep 4
1remStep 6
1.5remStep 8
2remStep 12
3rem04 — Radius
Shape language.
sm
--radius-smmd
--radius-mdlg
--radius-lgxl
--radius-xl05 — Shadow
Depth ladder.
sm
--shadow-smmd
--shadow-mdlg
--shadow-lg06 — Motion
Transition timing.
Fast
--motion-fastNormal
--motion-normalSlow
--motion-slow07 — Surfaces
Base, elevated and overlay.
Base
--backgroundElevated
--cardOverlay
--popover