StyleguideSTAND: 2026-06
Unser System, offen dokumentiert.
Eine Marke, die Präzision verspricht, sollte zeigen können, wie sie gebaut ist. Hier steht unser Designsystem – Farben, Typografie, Bausteine, Bewegung. Nicht als PDF im Schrank, sondern live auf der Seite, die es benutzt.
01 / 05Farben
Viel Wärme, wenig Rot.
Das Rot ist auf rund fünf Prozent der Fläche rationiert – eine Seite voller Rot schreit, eine Seite mit wenig Rot zielt.
Cream
--color-bg · #f4efe6 · ~70 %
Hauptfläche. Warm, ruhig – die Werkstatt, in der alles steht.
Ink
--color-fg · #050517 · ~25 %
Text und dunkle Sektionen. Fast schwarz, nie hart.
Haffner-Rot
--color-accent · #e7344b · ~5 %
Strikt rationiert: CTAs, Messpunkte, der Scan-Strahl. Knappheit macht es wertvoll.
Tiefrot
--color-accent-deep · #7a1a28 · Hover
Dunkler Hover-Zustand des Rots – nie eigenständig.
Kupfer
--color-copper · #c97b5c · Datenfarbe
Charts, Diagramme, Illustrationen – warm.
Moos
--color-moss · #3a4f3a · Datenfarbe
Charts, Diagramme, Illustrationen – kühl.
02 / 05Typografie
Drei Stimmen, klare Rollen.
Display – die laute Stimme · Sans 900 · Tracking −0.04em
Gefunden werden.
Text – die erzählende Stimme · line-height 1.7
Fließtext bleibt offen und lesbar. Er erzählt in Ruhe, was die Headline behauptet – und der Mono-Satz daneben belegt es.
Mono – die Labor-Stimme · alles Messbare
Budget: LCP < 1,8 s · CLS 0 · Lighthouse 90+
Skala – fluid via clamp(), von Hero bis Karte
text-display-xl · clamp(3rem, 7.5vw, 7rem)
Sichtbar
text-display-lg · clamp(2.25rem, 5vw, 4.5rem)
Sichtbar
text-display-md · clamp(1.5rem, 3.5vw, 2.75rem)
Sichtbar
text-display-sm · clamp(1.125rem, 1.8vw, 1.5rem)
Sichtbar
Statement – Hanken Black · bewusste Momente, max. 2x pro Seite
Anders.
Body-Größen & Eyebrow
[ Eyebrow · Mono · Uppercase ]
text-lg – Lead-Absätze unter Headlines, der erste Gedanke einer Sektion.
text-base – der normale Fließtext, in dem die Geschichte weitergeht.
text-sm – Sekundärtext: Bildunterschriften, Karten-Beschreibungen, Fußnoten.
03 / 05Bausteine
Aus dem Logo gebaut.
Unsere Wortmarke sitzt in einem Rahmen mit Kerbe. Genau diese Geometrie trägt das Interface: Rahmen halten Inhalte, Labels sitzen in der Kerbe, Marginalien vermessen die Seite, der Scan-Strahl markiert Übergänge.
Karten, Sektionen und Bilder leben in diesem Rahmen. Das Label hängt in der Kerbe – wie die Wortmarke im Logo.
Kerbe links, wenn der Status vor dem Inhalt kommt – Prüfprotokoll-Optik.
03 / 12Sektions-MarginalieSTAND: 2026-06
Messpunkt · 1600 × 900
Inverse StimmungAUF INK
Dieselbe Geometrie auf Ink – Hairlines und Label wechseln auf die helle Tonspur.
Accent-Rahmen für Status-Momente – Vorgriff auf das Prüfprotokoll-Pattern.
Bilder tragen das Atkinson-Dither: Ink-Punkte auf Cream statt Foto-Realismus – vorgebacken im Build, keine Laufzeitkosten. Analoge Wärme, Pixel-Präzision.
05 / SPECIMEN
So beginnt eine Unterseite.
Messzeile, Titelzeilen, ein Lead – und eine Haarlinie, an der der Inhalt andockt.
Der Unterseiten-Kopf ab Phase 5a – im Einsatz gestaucht auf die Seitenbreite, hier mit vollem Abstand gezeigt.
04 / 05Bewegung
Kalibriertes Instrument.
Nichts wackelt, nichts bounct. Bewegung zeigt hier an, wie ein Messgerät anzeigt: Der Scan-Strahl über dieser Sektion lief genau einmal – beim ersten Sichtbarwerden. Wer Bewegung reduziert hat, bekommt sie gar nicht.
- ease-out-expo · cubic-bezier(0.16, 1, 0.3, 1) · Reveals
- power4.out · Scan-Strahl, Zähler
- max. scale 1.05 · magnetische Buttons
- prefers-reduced-motion · alles aus
TextReveal · SplitText lines · power4.out · stagger 0.08
Zeile für Zeile, wie ein Messschrieb: Dieser Absatz fährt beim ersten Sichtbarwerden von unten ein – und Bots lesen ihn trotzdem vollständig.
05 / 05Haltung
Nichts faken.
Jede Zahl auf dieser Seite ist messbar, jede Quelle steht dabei. Keine erfundenen Testimonials, keine aufgeblasenen Statistiken – eine Beweis-Maschine kollabiert, wenn ein einziger Beweis wackelt.