Brand tokens

Four CSS variables drive the entire color system. Switching brands updates every component instantly.

Live demo

Brand badge

Subtle surface

CSS variables

css

/* globals.css — your brand */
:root {
  --brand:        #CF1838;   /* primary */
  --brand-hover:  #b01530;   /* hover / pressed */
  --brand-subtle: #fff0f2;   /* tinted surface */
  --brand-text:   #b01530;   /* text on light bg */
}

/* Switch at runtime — one line per variable */
document.documentElement.style.setProperty(style="color:#86efac">"--brand",        style="color:#86efac">"#EA580C");
document.documentElement.style.setProperty(style="color:#86efac">"--brand-hover",  style="color:#86efac">"#c2410c");
document.documentElement.style.setProperty(style="color:#86efac">"--brand-subtle", style="color:#86efac">"#fff3ef");
document.documentElement.style.setProperty(style="color:#86efac">"--brand-text",   style="color:#86efac">"#c2410c");