Lernen
Jede Anleitung endet im Werkzeug mit dem Beispiel schon geladen — lies die Theorie und zieh dann selbst an den Reglern.
Schriftgrößenskala: Der praktische Leitfaden
Was eine Schriftgrößenskala ist, wie du ein Verhältnis wählst und wie eine einzige Skala dein ganzes Design-System steuern kann. Leitfäden, durchgerechnete Beispiele und ein Live-Tool.
16 AnleitungenAbstandssysteme & das 8pt-Raster: Der Praxisleitfaden
Wie Abstandssysteme funktionieren — das 8pt-Raster, 4pt-Halbschritte, Grundlinienraster und Abstandsskalen, die aus einer Formel wachsen. Leitfäden und ein Live-Tool.
14 AnleitungenOKLCH & moderne CSS-Farben: Der praktische Leitfaden
OKLCH erklärt für Designer und Entwickler — Helligkeit, Chroma, Farbton, Farbräume (Gamut) und warum moderne Farb-Tools ihre Paletten damit erzeugen. Anleitungen und ein Live-Tool.
15 AnleitungenFarbskalen & UI-Paletten: Der Praxisleitfaden
Wie Farbskalen funktionieren — die Schritte von 50–900, Farbrampen aus einer Markenfarbe, semantische Rollen und Paletten, die per Konstruktion den Kontrast bestehen. Anleitungen und ein Live-Tool.
17 AnleitungenKontrast & barrierefreie Farbe: Der praktische Leitfaden
WCAG-Kontrastverhältnisse, APCA, Farbenblindheit und barrierefreie Paletten — was die Regeln verlangen, warum es sie gibt und wie du sie schon beim Bauen erfüllst.
13 AnleitungenDesign Tokens: Der Praxisleitfaden
Was Design Tokens sind, das DTCG-Format, Benennungsschichten, Theming und der Export-Weg von einer Quelle zu CSS, Tailwind und Figma. Leitfäden und ein Live-Werkzeug.
12 AnleitungenLayout-Raster & Breakpoints: Der praktische Leitfaden
Wie Layout-Raster funktionieren — 4/8/12 Spalten, Stege, Ränder, Breakpoints und Containerbreiten, gebaut mit modernem CSS statt mit Framework-Klassen.
9 AnleitungenFluide Typografie & Abstände: Der Praxisleitfaden
Fluide Typografie mit clamp() — Größen, die sanft mit dem Viewport skalieren, statt an Breakpoints zu springen. Die Mathematik, die Barrierefreiheits-Regeln, die Anleitungen.
11 AnleitungenDark Mode Design: Der praktische Leitfaden
Wie Dark Mode wirklich funktioniert — abgeleitete Paletten statt Invertierung, Chroma-Verlust, Elevation, Kontrast-Fallen und Theme-Tokens. Leitfäden und ein Live-Tool.
11 AnleitungenMarkenfarben: Von einer Farbe zu einem funktionierenden System
Wie Markenfarben zu funktionierenden Systemen werden — eine Farbe wählen, Barrierefreiheit überstehen, Übersetzung von Druck zu Bildschirm, Rebrands und Audits. Anleitungen und ein Live-Tool.
12 AnleitungenWeb-Typografie: Schriften, Kombination & Lesbarkeit
Die handwerkliche Seite der Web-Typografie — Schriften kombinieren, Serif vs. serifenlos, Zeilenlänge, Lesbarkeit und was eine Schriftart signalisiert. Leitfäden und ein Live-Tool.
13 AnleitungenKI und Design-Systeme: Der praktische Leitfaden
KI-Tools bauen Interfaces und Bilder schnell, halten aber kein System. Wie design tokens und eine benannte Palette KI-Output markenkonform halten — Leitfäden und ein Live-Tool.
9 Anleitungen