Design foundations
The details behind the system: color, typography, spacing, motion, surface hierarchy and accessibility defaults.
Color
Navy provides structure; a clear blue creates emphasis without overpowering the product. Status colors remain distinct and retain meaningful text labels.
Typography
A system-font stack keeps the library independent of remote resources and provides high legibility across platforms. Strong typography is paired with concise copy rather than ornamental decoration.
Readable body text, deliberate hierarchy, understated utility labels.
SEMANTIC TYPOGRAPHYSpacing & shape
Components use a purposeful density: 7px action radius, 11px medium surfaces and 16–22px larger containers. Spacing is component-owned, not dependent on a global CSS reset.
Themes & motion
Light mode is the default. Dark mode is explicitly opt-in with data-xsh-theme="dark". Motion respects users who prefer reduced animations.