DesignRift
Generating a color system by hand is a solved problem that every project solves again from scratch. I built DesignRift so you don't have to. Feed it a custom color palette and it returns CSS custom properties and Tailwind CSS variables you can paste straight into a codebase.
It's a web tool for developers and designers: the people still writing --color-primary-500 by hand who want that hour back.
What it generates
- CSS custom properties. Full token set from your palette, scoped the way you'd write it yourself.
- Tailwind CSS variables. Config-ready output that drops into
tailwind.config.jsor a CSS variable setup. - A matching dark mode. Counterpart tokens derived from the base palette, not hand-tuned after the fact.
- Contrast checks. So accessibility isn't something you audit later.
- Exportable tokens. Designers hand off variables engineers can paste straight in, not Figma swatches that need translating.
Who I built it for
Developers starting a new project who don't want to spend a week on color tokens. Designers handing off to engineering who need CSS-ready variables, not swatches that require translating. Anyone who's written the same theme file one too many times.
Try it
Visit designrift.dev and build a theme.