Nicht verhandelbar.
Diese Regeln stehen über allem anderen. Jede Designentscheidung muss sich an ihnen messen lassen.
Inhalt zuerst
Das Design existiert, um Inhalte zu tragen, nicht umgekehrt. Jedes visuelle Element muss einen klaren Kommunikationszweck erfüllen. Dekoration um ihrer selbst willen ist Designschuld.
Redaktionelle Zurückhaltung
Große Fraunces-Momente setzen Ton. Die meiste UI bleibt ruhig, präzise und hochlesbar. Der Inhalt trägt die Persönlichkeit, nicht die Ornamente.
Dark-native
Dark Mode definiert die Atmosphäre. Light Mode ist warm, ruhig und ebenso bewusst gestaltet, nicht die schnelle Invertierung.
System schlägt Sonderfall
Neue visuelle Ideen müssen sich verdienen. Geteilte Regeln schlagen Einzel-Styling. Optischer Wildwuchs wird als Designschuld behandelt.
Barrierefreiheit als Standard
Keyboard-Navigation, sichtbarer Fokus, lesbarer Kontrast, klare Labels und Reduced-Motion-Support sind Kernanforderungen, keine Nachbearbeitung.
Amber als Signal
Der Amber-Akzent ist für genau drei Jobs: Hervorhebung, aktive Zustände und primäre Aktionen. Er soll signalisieren, nicht dekorieren. Kein drittes Gelb einführen.
Amber trifft Anthrazit.
Zwei Themes, eine Akzentfarbe, eine kleine semantische Statusebene. Alle Werte als CSS-Variablen, kein hartkodiertes Hex im Markup.
Hintergründe & Ebenen
Amber — Akzentfarbe
Amber — Signalfarbe
Der hellere Amber dient als Emphasis-Signal: aktive Zustände, Divider, Highlights, Textakzente. Nicht für weiße Texte auf gefülltem Hintergrund verwenden.
Amber Solid — Aktion
Der dunklere Amber ist die funktionale Aktionsfarbe. Gefüllte Buttons, Submit-Actions, jede Amber-Fläche, die weißen Text trägt.
Semantische Status-Farben
Dark Mode
Kartenüberschrift
Fließtext auf Surface-Hintergrund. So zeigt die Token-Hierarchie lesbare, geschichtete Oberflächen.
Light Mode
Kartenüberschrift
Fließtext auf Surface-Hintergrund. So zeigt die Token-Hierarchie lesbare, geschichtete Oberflächen.
Fraunces trifft Inter Tight.
Fraunces für Ton, Inter Tight für fast alles andere, DM Mono für Struktur. Das System funktioniert, weil Fraunces sparsam eingesetzt wird.
Werkzeug.
Hero-Titel, Section-Headers, editoriale Momente. Das einzige Display-Font im System — sparsam einsetzen für maximalen Impact.
Überschriften, Fließtext, Navigation, UI-Labels. Das Arbeitstier — kondensiert, geometrisch, auf jeder Größe lesbar.
// DSGVO-konform · lokal · kontrolliert
Code, technische Labels, Badges, Metadaten. DM Mono ist das einzige Mono im System — mit SF Mono und Menlo als Fallback.
Typ-Skala (Basis 18px)
| Klasse | Größe | Verwendung |
|---|---|---|
| text-xs | 13.5px | Meta, Timestamps, Badges |
| text-sm | 15.75px | Cards, Steuerelemente, UI |
| text-base | 18px | Fließtext, primäre Absätze |
| text-lg | 20.25px | Hero-Sublines, Zusammenfassungen |
| text-xl | 22.5px | Card-Titel, Callout-Überschriften |
| text-2xl | 27px | Abschnitts-Überschriften (Fraunces) |
| text-4xl+ | 54px+ | Hero-Titel, Route-Level (Fraunces) |
Wenige Rezepte. Konsequent.
Das System lebt von Wiederholbarkeit. Wer die Standard-Abstände kennt, muss nie raten.
Abstands-Skala
Border Radius
Container
Gemeinsame Bausteine.
Alle Live-Demos folgen demselben Token-System. Was hier bricht, ist nicht system-konform.
Buttons & Links
Varianten
Badges
Status-Varianten
In der Praxis
Toggles
Zustand
Tabs
Aktives Panel: Überblick. Hier steht der primäre Inhalt des ersten Reiters.
Aktives Panel: Details. Technische Tiefe und weiterführende Informationen.
Aktives Panel: Verwandt. Links und Kontextinformationen zu diesem Thema.
Formularfelder
Nur für die Anmeldung verwendet.
Status-Hinweise
Erfolgreich gespeichert. Alle Änderungen wurden übernommen.
Kapazität fast erreicht. Noch 2 von 10 Projekten verfügbar.
Hinweis: Neues Claude-Modell verfügbar. Token-Limits wurden angepasst.
Fehler: Verbindung zum n8n-Workflow unterbrochen. Bitte prüfen.
Trennlinien
Strukturell
Amber-Akzent
Breadcrumb-Navigation
Card-System
Von Null auf KI in 90 Tagen
Der pragmatische Einstieg für EPU und KMU ohne IT-Abteilung, ohne Berater-Kauderwelsch.
Lokale KI mit Ollama
Datenschutz und KI müssen kein Widerspruch sein, wenn man weiß, wo die Daten wirklich liegen.
Automatisierung ohne Code
n8n verbindet Tools, die sonst nie miteinander reden würden, ohne eine einzige Zeile Python.
Zweck vor Effekt.
Wenn eine Animation ihren Zweck nicht erklären kann, gehört sie nicht ins System.
Fade In
Standard-Einblendung für einfache Module.
fade-in · 0.45s ease
Slide Up
Vertikaler Einzug für Listenelemente und Cards.
slide-up · 0.5s cubic-bezier(0.22,1,0.36,1)
Scale In
Für kleinere Emphasis-Momente: Modals, Tooltips.
scale-in · 0.45s cubic-bezier(0.22,1,0.36,1)
Verboten: Glitch, Wave, Shimmer oder Neon-Behandlungen auf regulären Seiten. Endlose dekorative Bewegungen. Große Hover-Transforms, die Cards instabil wirken lassen.
Alles benannt. Nichts hartkodiert.
Semantische Tokens vor rohen Hex-Werten. Eine Komponente gilt erst als fertig, wenn sie in beiden Themes funktioniert.
| Token | Dark | Light |
|---|---|---|
| --color-bg | #0C0D10 | #F2EBE0 |
| --color-surface | #131519 | #FAF5ED |
| --color-surface2 | #1B1E25 | #EDE5D8 |
| --color-text | #F0EDE8 | #19181A |
| --color-amber | #F59E0B | #D97706 |
| --color-amber-solid | #D97706 | #B45309 |
| --color-border | rgba(255,255,255,.09) | rgba(0,0,0,.09) |
| --color-focus | rgba(245,158,11,.65) | rgba(217,119,6,.60) |
| --color-success | #4ADE80 | #15803D |
| --color-error | #F87171 | #B91C1C |
CSS-Root-Ausgabe
/* Dark Mode (Standard) */
:root {
--color-bg: #0C0D10;
--color-surface: #131519;
--color-amber: #F59E0B;
--color-amber-solid: #D97706;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
html.light {
--color-bg: #F2EBE0;
--color-surface: #FAF5ED;
--color-amber: #D97706;
--color-amber-solid: #B45309;
}