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.js or 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.