BP
Home
// PRODUCT DETAIL

DesignRift

INPUT PALETTEbrand-500#2563EBbrand-600#1D4ED8brand-700#1E40AFbrand-400#60A5FAbrand-300#93C5FDbrand-200#BFDBFEDesignRiftRadix Colors systemWCAG AAAcontrast checkdark / light:root {--brand-500: #2563EB;--brand-600: #1D4ED8;--brand-700: #1E40AF;--brand-400: #60A5FA;--brand-bg: #EFF6FF;--brand-fg: #1E3A8A;}CSS VARIABLEScustom propertiesTAILWIND CONFIGv3 + v4 compatDARK MODEauto-generatedDESIGN TOKENSfigma / storybookDESIGNRIFT / THEME BUILDER

DesignRift

DesignRift is a theme builder for developers and designers who need to generate consistent, accessible design systems without doing it by hand. Built on the Radix Colors system, with real-time preview, Tailwind CSS v3/v4 export, and WCAG AAA compliance baked in by default.

Built because generating CSS custom properties and design tokens from a color palette is a solved problem that most teams still solve manually.

What DesignRift generates

  • CSS custom properties: Full color token set from your palette, ready to drop into any project
  • Tailwind CSS variables: v3 and v4 compatible exports, tailwind.config.js or CSS variable format
  • Dark mode: Automatic dark mode counterparts generated from your base palette
  • WCAG AAA compliance: Contrast ratios checked and corrected so you ship accessible by default
  • Design tokens: Exportable for use in Figma, Storybook, or any token-based system
  • Real-time preview: See the full theme as you build it, no export/import loop

Who it's for

Developers starting a new project who need a design system without spending a week on color tokens. Designers handing off to engineering teams who need CSS-ready variables, not just Figma styles. Anyone building on top of Radix UI who needs a color system that integrates correctly.

Visit designrift.dev to build your theme.