Skip to main content
Urbicon UI

CSS Token Themes

Swap palettes with a single CSS import. Each theme re-colors the primary and secondary accents and re-tints the neutral chassis — so surfaces, text and borders share the accent's temperature instead of staying cool grey.

50
100
200
300
400
500
600
700
800
900
950

Cool blue-teal palette with deeper saturation. Chassis tuned cool to match.

Live Preview

Buttons

Badges

Primary Secondary Soft Soft

Form Elements

Usage

Theme import

/* app.css */
@import '@urbicon-ui/blocks/style/index.css';
@import '@urbicon-ui/blocks/style/themes/ocean.css';

Create Your Own Theme

Create a CSS file with a @theme block that overrides three ramps: primary and secondary (the accents) plus --color-neutral-* (the chassis). Surfaces, text and borders all derive from the neutral ramp, so re-tinting it to your accent's temperature keeps the whole UI coherent — without it, a warm brand color ends up on cold grey surfaces. All components pick up the new palette through the semantic token layer.

Custom theme file

/* my-theme.css – use the Theme Builder to generate values */
@theme {
  /* Primary – your main brand color */
  --color-primary-50: oklch(0.95 0.03 YOUR_HUE);
  --color-primary-100: oklch(0.9 0.05 YOUR_HUE);
  /* ... shades 200–800 ... */
  --color-primary-900: oklch(0.26 0.06 YOUR_HUE);
  --color-primary-950: oklch(0.17 0.04 YOUR_HUE);

  /* Secondary – supporting accent color */
  --color-secondary-50: oklch(0.95 0.02 SEC_HUE);
  --color-secondary-100: oklch(0.9 0.04 SEC_HUE);
  /* ... shades 200–800 ... */
  --color-secondary-900: oklch(0.25 0.04 SEC_HUE);
  --color-secondary-950: oklch(0.18 0.03 SEC_HUE);

  /* Chassis – the neutral ramp surfaces/text/borders derive from.
     Re-tint it to your accent's temperature (CHASSIS_HUE ≈ YOUR_HUE) so the
     whole UI is coherent. Same lightness + chroma as the default ramp — only
     the hue shifts (set chroma to 0 for a temperature-free grayscale). */
  --color-neutral-25: oklch(0.99 0.002 CHASSIS_HUE);
  --color-neutral-50: oklch(0.98 0.005 CHASSIS_HUE);
  /* ... shades 100–850 ... */
  --color-neutral-900: oklch(0.15 0.012 CHASSIS_HUE);
  --color-neutral-950: oklch(0.08 0.008 CHASSIS_HUE);
}

Use the Theme Builder to interactively generate OKLCH values for your brand color.