Foundations

Colors

Every color in BR-UI is a CSS variable. The four accent swatches are the only place you choose a hex; everything else cascades from variant tokens.

Accent swatches

Four curated accents. Switch with the Tweaks panel or by setting --accent inline.

Fire
#E74011 · Signature
Terracotta
#C8462A · Stonowane
Cognac
#8C5A2C · Warm bronze
Slate
#3A3833 · Mono elegance

Token reference

Per-variant tokens. Each [data-variant][data-theme] block re-binds these.

TokenSampleRole
--accent
Brand accent. The CTA, the active state, the live indicator.
--accent-foreground
Text on top of --accent (usually #fff).
--accent-soft
14% accent fill — for soft chip backgrounds.
--ink
Solid neutral. The 'ink' button. Brand-mark.
--ink-foreground
Text on --ink.
--bg
Page background.
--surface-1
Default card surface (glass, semi-transparent in A/B).
--surface-2
Nested surface inside cards (filled inputs, hover).
--surface-3
Top-level overlays (dialog, popover).
--surface-flat
Opaque variant of surface — used when blur won't show.
--border
Hairline. 8–14% opacity.
--border-strong
Hover/focus border. ~18% opacity.
--text
Primary ink color.
--text-muted
Secondary copy (~62%).
--text-subtle
Meta / labels (~52%).

Rules

  • Never hardcode hex. Always var(--token).
  • One accent per visible block. The system has ONE accent color at a time.
  • Destructive ink IS accent. No second red.
  • Status colors are subtle desaturated green (only inside .badge-success) — that's the one exception.