Design Tokens the Right Way: CSS Variables + Tailwind

Most component kits hardcode their colors. Change one, and you're grepping through 200 files. Bounce Kit takes a different approach.

The Problem with Hardcoded Colors

// ❌ This is everywhere in most kits
<div className="bg-blue-500 text-white hover:bg-blue-600">

Want to rebrand? Good luck finding and replacing every instance.

CSS Variables as the Single Source of Truth

Every color in Bounce Kit flows through CSS custom properties defined in tokens.css:

:root {
  --brand: 43 96% 56%;
  --brand-foreground: 0 0% 9%;
  --background: 0 0% 100%;
  --foreground: 222 14% 7%;
}

.dark {
  --brand: 43 96% 56%;
  --brand-foreground: 0 0% 9%;
  --background: 222 14% 7%;
  --foreground: 0 0% 95%;
}

Then Tailwind maps these to utility classes:

// ✅ Semantic, theme-aware, rebrandable
<div className="bg-brand text-brand-foreground hover:bg-brand/90">

Five Token Groups

Rebranding in 60 Seconds

1. Open src/styles/tokens.css
2. Change the --brand HSL value
3. Every button, badge, link, and accent updates instantly

No grep. No find-and-replace. No broken dark mode.

Dark Mode for Free

Because every token has both :root and .dark variants, your entire app supports dark mode without a single conditional class.

This is the power of a well-designed token system.