designrift
The color token tool we built because we needed it.
Industry: Developer Tools, Design | Stack: React, TypeScript, CSS, Tailwind, Radix | Status: Live | Visit designrift
what designrift does#
Pick a color. Get production-ready CSS custom properties and a Tailwind CSS configuration block. Both outputs generate in real time as you adjust the palette. Light mode and dark mode tokens ship together, contrast ratios meet WCAG standards at every step, and the whole thing takes under 30 seconds from "I need a blue-gray primary" to a file you can paste into your project.
designrift is free, open source, and requires no account.
the problem every front-end developer knows#
Pick a color, figure out the shade scale, write the CSS custom properties, wire them into tailwind.config.js, then do the whole thing again for dark mode. Then discover the contrast ratio on shade 300 fails WCAG AA. Start over.
That cycle repeats on every project: every client brand, every product redesign, every time someone changes their mind about the primary color two weeks before launch. The tedious part is that it is identical every time. You are not solving a new problem each time, you are just doing the same work again, and it is error-prone enough that QA usually finds the inconsistencies.
We tried copying existing palettes and adjusting hex values by feel. That produces an arbitrary scale with no accessibility guarantees. We tried generic color generators, which have the same problem. We were never disciplined enough to manually calculate contrast ratios from scratch on every project. So we wrote a script. The script turned into designrift.
what we built#
visual theme builder with real-time preview#
Enter a base color (hex, RGB, HSL, or OKLCH), choose a scale type, and see the full 12-step palette rendered instantly. The preview shows each shade applied to real UI elements: buttons, backgrounds, text, borders. You see whether the palette works before you have already pasted 200 lines of CSS into your project.
The builder supports fine-tuning at every level: background hues, text colors, border treatments, corner radii, gaps, shade distribution. The output updates as you move the sliders.
Radix color system foundation#
The color scales are built on the Radix color system, a 12-step perceptually uniform scale where each step has a defined semantic role. Step 1 is the app background. Steps 3 through 5 handle interactive component states. Steps 6 and 7 are borders. Steps 11 and 12 are high-contrast text.
What this buys you: dark mode is not a separate problem. The Radix team has already worked out which values hold WCAG-compliant contrast at each step in both light and dark contexts. You do not re-derive that yourself. You just use the scale.
designrift ships with 30+ Radix color palettes (gray, slate, sage, olive, sand, gold, bronze, tomato, red, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky, and more) plus their dark mode counterparts.
CSS variable and Tailwind export#
Every palette exports in two formats:
CSS custom properties: clean, well-commented variable files using the --color-[name]-[step] naming convention. Drop them into a global stylesheet or CSS module.
Tailwind CSS configuration: either the v3-style JavaScript object for tailwind.config.js or the v4-style @theme block for Tailwind's CSS-first configuration. Tailwind v4, released in 2025, moved to CSS-first configuration with @theme directives, making CSS custom properties the native way to extend the design system. designrift supports both formats.
Additional export formats include JSON for design token pipelines and raw values for use in any other context.
24+ theme presets#
For developers who want a starting point, designrift has 24+ curated theme presets: Modern Minimal, Amethyst Haze, Catppuccin, Kodama Grove, Quantum Rose, Elegant Luxury, and others. Each preset is a complete theme: all 12 shade steps, dark mode tokens, semantic assignments. Customize from there or export as-is.
WCAG accessibility built in#
Every shade combination shows its contrast ratio and WCAG compliance level (AA, AAA, or failing). You see which shades work for which UI roles before the tokens leave the tool. The Radix foundation means most combinations already pass, but the contrast checker makes the ones that do not obvious.
output formats#
The exported themes work with React, Vue, Angular, Svelte, or plain HTML/CSS. CSS custom properties are universal; the Tailwind config targets Tailwind specifically; the JSON export works with any design token pipeline, including Figma plugins for designer handoff.
results#
designrift is live at designrift.dev, free, open source, no account required. It ships with 30+ Radix color palettes, 24+ theme presets, Tailwind v3 and v4 export, and automatic WCAG contrast compliance.
It started as an internal script. It became a public tool when we realized we were solving it fresh every time, and so was everyone else. It does not cover every edge case in a complex design system, but for the part of the job that is just mechanical, it handles it.
Need design system tooling or UI engineering? See our UX/UI Design services or book a free Automation Audit.
