Design System

Built like Apple.
Documented like IBM.

A complete design language — tokens, typography, color, and components — for building AI-native business interfaces.

Design Tokens

CSS variables that encode every design decision. Use these everywhere — never hardcode values.

Spacing

TokenValueUsage
--spacing-xs4pxIcon gaps, tight padding
--spacing-sm8pxButton internal padding
--spacing-md16pxComponent padding
--spacing-lg24pxCard padding
--spacing-xl40pxSection sub-spacing
--spacing-2xl64pxSection padding
--spacing-3xl96pxPage section padding

Border Radius

TokenValueUsage
--radius-sm8pxSmall elements, badges, tags
--radius-md12pxInputs, small cards
--radius-lg18pxCards, panels
--radius-xl24pxLarge cards, modals
--radius-pill980pxButtons, badges

Motion

TokenValueUsage
--ease-iocubic-bezier(0.25,0.46,0.45,0.94)Default easing
--ease-springcubic-bezier(0.34,1.56,0.64,1)Springy interactions
--duration-fast120msHover states
--duration-base200msTransitions
--duration-slow400msPage animations