Brand tokens
A brand token layer loaded via [data-brand] attribute — overrides primary color, font family, border radius, and shadow. Same component code, different brand identity.
Product title
Supporting description text for the product.
Get startedProduct title
Supporting description text for the product.
Get startedQuick implementation
/* Base brand tokens — default brand */
:root {
--brand-primary: oklch(0.52 0.22 265);
--brand-primary-light: oklch(0.72 0.19 265);
--brand-primary-dark: oklch(0.35 0.15 265);
--brand-on-primary: oklch(0.98 0 0);
--brand-font-display: 'Syne', sans-serif;
--brand-font-body: 'DM Sans', sans-serif;
--brand-radius: 0.5rem;
--brand-radius-lg: 1rem;
--brand-radius-pill: 2rem;
--brand-shadow: 0 1px 3px oklch(0 0 0 / 0.15),
0 4px 12px oklch(0 0 0 / 0.1);
}
/* Brand override — loaded by data attribute or separate stylesheet */
[data-brand="acme"] {
--brand-primary: oklch(0.52 0.18 145); /* green */
--brand-primary-light: oklch(0.72 0.19 145);
--brand-primary-dark: oklch(0.35 0.12 145);
--brand-font-display: Georgia, serif;
--brand-font-body: system-ui, sans-serif;
--brand-radius: 0.25rem; /* sharper corners */
--brand-radius-lg: 0.5rem;
--brand-radius-pill: 2rem;
}
/* Components reference brand tokens, not primitives */
.btn--primary {
background: var(--brand-primary);
color: var(--brand-on-primary);
border-radius: var(--brand-radius);
font-family: var(--brand-font-body);
}
h1, h2, h3 {
font-family: var(--brand-font-display);
}Prompt this to your LLM
Includes role, constraints, framework variants, and edge cases.
You are a senior frontend engineer building a white-label SaaS
platform where multiple brands use the same component library
but need different visual identities.
Goal: Create a brand token system using CSS custom properties
that allows brand-specific overrides without touching component CSS.
Token categories to cover:
- Color: primary (with light/dark/on variants), surface, accent
- Typography: font-display, font-body, font-mono stacks
- Shape: border-radius (sm, md, lg, pill)
- Elevation: shadow values for cards and modals
- Motion: transition duration and easing (see also: duration tokens)
Loading strategy:
- Default brand in :root
- Override via [data-brand="acme"] attribute on html element
- Show how to load brand-specific CSS file lazily with JS
Show a .card and .btn component that uses only var(--brand-*) tokens
— changing [data-brand] changes the entire visual identity.
Return only the CSS with inline comments.Three-layer token hierarchy
Brand tokens work best as a third layer above primitives and semantics: (1) primitives define raw values (--purple-500), (2) semantic tokens map purpose to primitives (--color-primary: var(--purple-500)), (3) brand tokens optionally override the semantic layer ([data-brand="acme"] { --color-primary: var(--green-500) }). Components reference semantic tokens — they're insulated from both the raw values and the brand configuration. Changing the brand attribute swaps the mapping, not the component code.
Beyond color — shape and typography
Brand identity isn't just color. A medical company wants sharp, rectilinear corners (trust, precision). A children's education app wants large pill-shaped buttons (approachable, safe). A financial dashboard wants neutral sans-serif typography. A lifestyle brand wants editorial serif headings. Including --brand-radius, --brand-font-display, and --brand-shadow in the brand token set means a single data-brand attribute swap changes all four dimensions of visual identity simultaneously.