Engineering · 7 min read · Updated Jan 2026
How to use Brand Vitals hex colors in CSS
Create token-driven CSS variables from approved hex values for faster handoff between design and engineering.
Key takeaways
- Define semantic CSS variables from approved brand hex values.
- Apply tokens at component level so hover/focus states stay consistent.
- Treat token updates like shared infrastructure with staged rollouts.
Hex values become more useful when they map to reusable interface roles. In this guide, you will convert raw brand colors into maintainable CSS tokens and apply them to real components.
1) Start with semantic naming
Avoid direct names like --blue-500 as your source-of-truth tokens. Prefer role-driven names like --brand-primary, --surface-muted, and --text-strong.
2) Define variables in a shared stylesheet
:root {
--brand-primary: #1f3af5;
--brand-primary-hover: #1429bf;
--surface-muted: #f4f6ff;
--text-strong: #141826;
}3) Apply tokens to UI components
.button-primary {
background: var(--brand-primary);
color: #fff;
}
.button-primary:hover {
background: var(--brand-primary-hover);
}Production handoff checklist
- Map every color token to a named brand role (primary, accent, text, surface).
- Document accessibility contrast targets for text and interactive states.
- Update shared component libraries first, then downstream apps.