Tokens.

Every design decision lives here. Color, spacing, type, motion and elevation as CSS Custom Properties — overridable, inheritable, framework-agnostic.

Atlas

8 families · live

Live overview of all tokens, read directly from :root. Theme override immediately visible.

override one, override all

Consumers override individual tokens — components follow along, no further changes required.

Import tokens

/* CSS import */
@import 'baustein-ui/tokens.css';

Global override

:root {
  --bau-color-accent: #2a5bff;
  --bau-color-accent-hover: #1a47e0;
  --bau-radius-md: 0.5rem;
  --bau-control-height-md: 2.5rem;
}

Scoped theme

/* Apply theme to a single subtree only */
.app--brand-x {
  --bau-color-accent: #16a34a;
  --bau-font-serif: 'GT Sectra', serif;
}

Component-local override

/* Only this one button instance */
.cta-special {
  --bau-button-bg: var(--bau-color-danger);
  --bau-button-fg: white;
}