designrift
Das Farbtoken-Tool, das wir gebaut haben, weil wir es brauchten.
Branche: Developer Tools, Design | Stack: React, TypeScript, CSS, Tailwind, Radix | Status: Live | designrift besuchen
Was designrift macht#
Wählen Sie eine Farbe. Erhalten Sie produktionsreife CSS Custom Properties und einen Tailwind-CSS-Konfigurationsblock. Beide Outputs werden in Echtzeit generiert, während Sie die Palette anpassen. Light-Mode- und Dark-Mode-Tokens werden zusammen geliefert, Kontrastverhältnisse erfüllen bei jedem Schritt die WCAG-Standards, und der gesamte Vorgang dauert weniger als 30 Sekunden — von „Ich brauche ein Blaugrau als Primärfarbe" bis zu einer Datei, die Sie direkt in Ihr Projekt einfügen können.
designrift ist kostenlos, Open Source und erfordert kein Konto.
Das Problem, das jeder Frontend-Entwickler kennt#
Eine Farbe auswählen, die Abstufungsskala festlegen, die CSS Custom Properties schreiben, sie in die tailwind.config.js einbinden — und dann das Ganze noch mal für den Dark Mode. Dann feststellen, dass das Kontrastverhältnis bei Shade 300 die WCAG-AA-Anforderungen nicht erfüllt. Von vorne beginnen.
Dieser Kreislauf wiederholt sich bei jedem Projekt: bei jeder Kunden-Marke, jedem Produkt-Redesign, jedes Mal, wenn jemand zwei Wochen vor dem Launch seine Meinung zur Primärfarbe ändert. Das Mühsame daran ist, dass es jedes Mal identisch ist. Man löst kein neues Problem — man erledigt nur dieselbe Arbeit erneut, und sie ist fehleranfällig genug, dass die QA in der Regel die Inkonsistenzen findet.
Wir haben versucht, bestehende Paletten zu kopieren und Hex-Werte nach Gefühl anzupassen. Das ergibt eine willkürliche Skala ohne Barrierefreiheitsgarantien. Wir haben generische Farbgeneratoren ausprobiert, die dasselbe Problem haben. Wir waren nie diszipliniert genug, bei jedem Projekt die Kontrastverhältnisse manuell von Grund auf zu berechnen. Also haben wir ein Skript geschrieben. Aus dem Skript wurde designrift.
Was wir gebaut haben#
Visueller Theme-Builder mit Echtzeit-Vorschau#
Geben Sie eine Basisfarbe ein (Hex, RGB, HSL oder OKLCH), wählen Sie einen Skalentyp und sehen Sie die vollständige 12-Stufen-Palette sofort gerendert. Die Vorschau zeigt jede Abstufung angewendet auf echte UI-Elemente: Buttons, Hintergründe, Text, Rahmen. Sie sehen, ob die Palette funktioniert, bevor Sie 200 Zeilen CSS in Ihr Projekt eingefügt haben.
Der Builder unterstützt Feinabstimmung auf jeder Ebene: Hintergrundfarbtöne, Textfarben, Rahmenbehandlungen, Eckenradien, Abstände, Abstufungsverteilung. Der Output aktualisiert sich, während Sie die Regler bewegen.
Radix-Farbsystem als Grundlage#
Die Farbskalen basieren auf dem Radix-Farbsystem, einer 12-Stufen-Skala mit perzeptueller Gleichmäßigkeit, bei der jede Stufe eine definierte semantische Rolle hat. Stufe 1 ist der App-Hintergrund. Die Stufen 3 bis 5 behandeln interaktive Komponentenzustände. Die Stufen 6 und 7 sind Rahmen. Die Stufen 11 und 12 sind kontrastreicher Text.
Was das bringt: Dark Mode ist kein separates Problem. Das Radix-Team hat bereits ermittelt, welche Werte auf jeder Stufe in hellen und dunklen Kontexten WCAG-konforme Kontraste liefern. Man leitet das nicht selbst her. Man nutzt einfach die Skala.
designrift wird mit über 30 Radix-Farbpaletten ausgeliefert (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 und weitere) plus deren Dark-Mode-Gegenstücke.
CSS-Variable und Tailwind-Export#
Jede Palette wird in zwei Formaten exportiert:
CSS Custom Properties: saubere, gut kommentierte Variablendateien mit der Namenskonvention --color-[name]-[step]. Einfach in ein globales Stylesheet oder CSS-Modul einfügen.
Tailwind-CSS-Konfiguration: entweder das v3-JavaScript-Objekt für die tailwind.config.js oder der v4-@theme-Block für Tailwinds CSS-first-Konfiguration. Tailwind v4, veröffentlicht 2025, stellte auf CSS-first-Konfiguration mit @theme-Direktiven um und macht CSS Custom Properties zum nativen Weg, das Designsystem zu erweitern. designrift unterstützt beide Formate.
Zusätzliche Exportformate umfassen JSON für Design-Token-Pipelines und Rohwerte zur Verwendung in jedem anderen Kontext.
24+ Theme-Presets#
Für Entwickler, die einen Ausgangspunkt suchen, bietet designrift über 24 kuratierte Theme-Presets: Modern Minimal, Amethyst Haze, Catppuccin, Kodama Grove, Quantum Rose, Elegant Luxury und weitere. Jedes Preset ist ein vollständiges Theme: alle 12 Abstufungsstufen, Dark-Mode-Tokens, semantische Zuordnungen. Von dort aus anpassen oder direkt exportieren.
WCAG-Barrierefreiheit integriert#
Jede Farbkombination zeigt ihr Kontrastverhältnis und die WCAG-Konformitätsstufe (AA, AAA oder fehlgeschlagen). Sie sehen, welche Abstufungen für welche UI-Rollen geeignet sind, bevor die Tokens das Tool verlassen. Die Radix-Grundlage sorgt dafür, dass die meisten Kombinationen bereits bestehen, aber der Kontrast-Checker macht die problematischen offensichtlich.
Ausgabeformate#
Die exportierten Themes funktionieren mit React, Vue, Angular, Svelte oder reinem HTML/CSS. CSS Custom Properties sind universell; die Tailwind-Konfiguration zielt speziell auf Tailwind; der JSON-Export funktioniert mit jeder Design-Token-Pipeline, einschließlich Figma-Plugins für die Designer-Übergabe.
Ergebnisse#
designrift ist live unter designrift.dev, kostenlos, Open Source, kein Konto erforderlich. Es wird mit über 30 Radix-Farbpaletten, über 24 Theme-Presets, Tailwind-v3- und v4-Export sowie automatischer WCAG-Kontrastkonformität ausgeliefert.
Es begann als internes Skript. Es wurde ein öffentliches Tool, als wir erkannten, dass wir das Problem jedes Mal neu lösten — und alle anderen auch. Es deckt nicht jeden Sonderfall eines komplexen Designsystems ab, aber für den Teil der Arbeit, der rein mechanisch ist, erledigt es die Aufgabe.
Benötigen Sie Designsystem-Tooling oder UI-Engineering? Unsere UX/UI-Design-Services ansehen oder ein kostenloses Automation Audit buchen.
