Styling & Design Tokens

Learn how BeigeUI uses semantic CSS tokens to power a cohesive, warm aesthetic that is easily customized and themable.

Design Tokens Architecture

Every component in BeigeUI consumes design tokens exposed as CSS custom properties. This ensures seamless theming without Sass compilation dependencies:

tokens.csscss

:root {
  /* Warm Earthy Primary Palette */
  --beige-color-primary: #d4a373;
  --beige-color-primary-hover: #c59362;
  --beige-color-primary-active: #b58352;
  --beige-color-primary-subtle: #fefae0;

  /* Surfaces */
  --beige-surface-page: #ffffff;
  --beige-surface-card: #fdfbf9;
  --beige-surface-subtle: #f7f2ec;

  /* Borders & Dividers */
  --beige-border-subtle: #ebdcd0;
  --beige-border-strong: #d9c5b2;

  /* Typography Colors */
  --beige-text-primary: #2d231b;
  --beige-text-secondary: #6e5c4e;
  --beige-text-muted: #9c8979;
}

Core Tokens Reference

Variable	Purpose	Example Default
`--beige-color-primary`	Brand interactive color for buttons & active states	`#d4a373`
`--beige-surface-page`	Main document background surface	`#ffffff`
`--beige-surface-card`	Card & container background surface	`#fdfbf9`
`--beige-border-subtle`	Subtle divider & input border color	`#ebdcd0`
`--beige-overlay-scrim`	Backdrop behind modals, drawers and sidebars (theme-aware)	`rgba(45, 35, 27, 0.45)`
`--beige-radius-md`	Default corner rounding for cards and inputs	`8px`

Overriding Tokens

You can customize the whole look and feel of your app by simply re-declaring any variable in your CSS:

src/styles.scsscss

/* Custom branding override */
:root {
  --beige-color-primary: #c97a53; /* Terracotta Accent */
  --beige-radius-md: 10px;
}