Customize

The fastest way to brand an app is the system accent — one CSS variable that drives the navbar stripe, footer stripe, and <BrandTile> at once. Everything else (palette tones, semantic roles, fonts) is still overridable; see Advanced.

System accent

Set --color-system-accent at :root and your app picks up matching 2px stripes on the navbar and footer plus a branded brand-tile:

:root {
  --color-system-accent: var(--color-purple-600);
}

That’s the contract. Defaults to a neutral gray; three siblings track the base via color-mix, so a single override propagates:

Token	What it controls	Derivation
--color-system-accent	Navbar + footer stripe, .brand-tile bg	The value you set
--color-system-accent-hover	Reserved for hover states	12% mix toward --color-text
--color-system-accent-muted	Reserved for subtle backgrounds	12% accent over --color-surface
--color-system-accent-content	Tile / icon foreground	light-dark(paper, black) — heuristic

Bright accents like --color-yellow-400 need a manual -content override so the tile stays legible:

:root {
  --color-system-accent: var(--color-yellow-400);
  --color-system-accent-content: var(--color-black);
}

See Brand tile and App shell › Branding for full usage.

Advanced

For everything beyond the system accent, the token layers are documented on the Colors page. Three escape hatches:

Override a semantic token

Remap a role to a different palette tone — or to any color. Components follow automatically.

:root {
  --color-primary: var(--color-green-600);
}

Override a palette tone

Replace a Flexoki tone everywhere it’s used:

:root {
  --color-blue-600: oklch(0.55 0.18 250);
}

Swap the whole palette

Both blocks are stacked on :root — redefine the palette in your own stylesheet to ship a different brand while keeping every semantic role intact.