Design tokens

bambiui styling is based on CSS custom properties and serializable data-* state attributes.

Token model

Foundation

`--bambi-background`, `--bambi-foreground`, `--bambi-border`, `--bambi-ring`

Color scales

`--bambi-primary-50` through `--bambi-primary-950`, plus danger, success, and warning scales.

Semantic aliases

`--bambi-danger`, `--bambi-success`, `--bambi-warning`, `--bambi-muted`

Intent aliases

`--bambi-intent-primary-bg`, `--bambi-intent-primary-fg`, `--bambi-intent-primary-hover-bg`

Global CSS

:root {
  --bambi-background: #ffffff;
  --bambi-foreground: #111827;
  --bambi-border: #d9e0ea;
  --bambi-ring: #4f46e5;

  --bambi-primary-500: oklch(0.62 0.18 265);
  --bambi-intent-primary-bg: var(--bambi-primary-500);
  --bambi-intent-primary-fg: #ffffff;
  --bambi-intent-primary-hover-bg: oklch(0.56 0.2 265);
}

Why aliases matter

Components do not always read raw scale tokens directly. A primary button, for example, resolves through intent aliases such as --bambi-intent-primary-bg. When changing themes, update both raw scale tokens and semantic aliases.

Component-level tokens

Every component page ends with a token section. Use that section as the local checklist for what to override after installing and previewing the component.

Studio workflow

Use Studio to generate color scales, typography, and radius values. Copy the generated CSS variables into your application and verify component previews after token changes.