Designsystem
Farbe, Typografie, Raum und Komponenten dieser Website. Alle Werte stammen direkt aus assets/css/tokens.css und werden beim Bauen ausgelesen — diese Seite kann nicht veralten.
01 / Farbe
Palette
Kontrastwerte gegen den hellen und den dunklen Grund. Alles, was Text trägt, liegt in beiden Themen über 4,5:1.
Signal Violet
Neutrals
02 / Typografie
Schrift und Skala
Systemschriften ohne externe Ladevorgänge: kein Layout-Shift, keine Anfrage an ein CDN.
Klar im Design.
Stark im Code.
Überschrift zweiter Ordnung
Überschrift dritter Ordnung
Vorspann: etwas größer, ruhiger gesetzt, maximal 66 Zeichen breit.
Fließtext in 17 Pixeln mit einer Zeilenhöhe von 1,62. Die Zeilenlänge ist auf 66 Zeichen begrenzt, weil längere Zeilen den Rücksprung ans Zeilenende erschweren.
07 / Kicker in Monospace
--step-display | clamp(2.75rem, 1.30rem + 6.4vw, 5.25rem) |
|---|---|
--step-display-l | clamp(2.25rem, 1.45rem + 3.6vw, 3.75rem) |
--step-h2 | clamp(1.875rem, 1.36rem + 2.3vw, 3rem) |
--step-h3 | clamp(1.375rem, 1.19rem + .82vw, 1.875rem) |
--step-h4 | clamp(1.125rem, 1.07rem + .25vw, 1.3125rem) |
--step-lede | clamp(1.0625rem, 1.00rem + .30vw, 1.25rem) |
--step-body | 1.0625rem |
--step-sm | 0.9375rem |
--step-xs | 0.8125rem |
--step-2xs | 0.75rem |
03 / Raum
Abstände
--space-1 | .25rem |
|---|---|
--space-2 | .5rem |
--space-3 | .75rem |
--space-4 | 1rem |
--space-5 | 1.5rem |
--space-6 | 2rem |
--space-7 | 2.5rem |
--space-8 | 3rem |
--space-9 | 4rem |
--space-10 | 5rem |
--space-11 | 6.5rem |
--space-12 | 8rem |
--section-y | clamp(4.5rem, 2.9rem + 6.4vw, 9rem) |
--section-y-sm | clamp(3.25rem, 2.3rem + 3.8vw, 6rem) |
--gutter | clamp(1.25rem, .55rem + 3.1vw, 3.5rem) |
--radius-xs | 6px |
|---|---|
--radius-sm | 10px |
--radius-md | 16px |
--radius-lg | 24px |
--radius-pill | 999px |
--ease | cubic-bezier(.2, .8, .25, 1) |
--dur-fast | 130ms |
--dur-ui | 200ms |
--dur-slow | 420ms |
--dur-reveal | 560ms |
--tap | 44px |
04 / Komponenten
Bausteine
Buttons
Links und Marken
Hinweis
Hinweisblock. Für Angaben, die zwar wichtig, aber nicht Teil des Fließtextes sind — etwa offene Punkte auf den Rechtsseiten.
Faktenzeile
- Erstgespräch
- 30 Minuten, kostenlos
- Angebot
- Festpreis vor Projektstart
- Antwortzeit
- Ein Werktag
Formularfelder
Fragen und Antworten
Geöffneter Eintrag
Die Antwort liegt in einem Raster, damit sich die Höhe animieren lässt, ohne feste Werte zu setzen.
Geschlossener Eintrag
Über das Attribut name schließt der Browser die übrigen Einträge selbst — ohne JavaScript.
05 / Regeln
Verbindliche Festlegungen
- Keine Komponente definiert eine eigene Farbe. Jede Farbe kommt aus einem semantischen Token.
- Jede Trefferfläche misst mindestens 44 × 44 Pixel.
- Text unter 12 Pixeln gibt es nicht.
- Der Fokusring wird nie entfernt, nur gestaltet.
- Bei
prefers-reduced-motionwird jede Bewegung zu einer Blende von 120 ms. - Ohne JavaScript bleibt jede Seite vollständig lesbar und bedienbar.
- Keine externen Schriften, keine externen Skripte, keine Cookies.