StyleguideSTAND: 2026-08
Das System hinter der Oberfläche.
Präzision wird glaubwürdig, wenn sich die Regeln dahinter prüfen lassen. Deshalb dokumentiert diese Seite Farben, Typografie, Bausteine und Bewegung direkt im Einsatz – nicht nur in einer abgelegten Präsentation.
01 / 05Farben
Viel Wärme, wenig Rot.
Rot bleibt auf ungefähr fünf Prozent der Fläche begrenzt. Dadurch markiert es Handlungen und Messpunkte, ohne mit dem Inhalt zu konkurrieren.
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 – Neue Montreal Semibold · 600 · liga + tnum · kein ss-Ligaturzeichen
Gefragt. Gefunden. Original.
Text – Neue Montreal Text Book · 400 · line-height 1.7
Fließtext bleibt offen und gut lesbar. Er führt einen Gedanken aus, während die Mono-Ebene Messwerte und technische Angaben trägt.
Mono – Fraktion Mono Regular · 400 · Tabellenziffern
Budget 01: 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 – Neue Montreal Semibold · 600 · 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.
Die Wortmarke sitzt in einem Rahmen mit Kerbe. Diese Geometrie kehrt im Interface wieder: Rahmen halten Inhalte, Labels besetzen die Kerbe, Marginalien ordnen Messdaten und der Scan-Strahl markiert Übergänge.
Karten, Sektionen und Bilder nutzen denselben offenen Rahmen. Das Label sitzt in der Kerbe und verbindet Inhalt und Wortmarke.
Steht ein Status vor dem Inhalt, rückt die Kerbe nach links und macht die Karte als Prüfprotokoll lesbar.
03 / 12Sektions-MarginalieSTAND: 2026-08
Messpunkt · 1600 × 900
Inverse StimmungAUF INK
Auf dunkler Fläche bleibt die Geometrie erhalten; Hairlines und Label wechseln lediglich in die helle Tonspur.
Der Akzent-Rahmen ist positiven Status-Momenten vorbehalten und führt das Muster des Prüfprotokolls ein.
Das Atkinson-Dither übersetzt Bilder in Ink-Punkte auf Cream. Die Dateien werden vor dem Build erzeugt, verursachen keine Laufzeitberechnung und verbinden analoge Wärme mit klaren Pixeln.
05 / SPECIMEN
So beginnt eine Unterseite.
Messzeile, Titel und Lead bilden einen ruhigen Einstieg; die Haarlinie führt anschließend in den Inhalt.
Der Unterseiten-Kopf erscheint im echten Einsatz kompakter. Hier ist er mit vollständigen Abständen als Muster zu sehen.
04 / 05Bewegung
Kalibriertes Instrument.
Bewegung kennzeichnet Zustände und Übergänge, ohne den Inhalt zu überlagern. Der Scan-Strahl läuft beim ersten Sichtbarwerden genau einmal; bei reduzierter Bewegung entfällt die Animation vollständig.
- 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
Dieser Absatz wird beim ersten Sichtbarwerden zeilenweise eingeblendet. Im HTML bleibt der Text von Beginn an vollständig vorhanden und damit auch ohne Animation lesbar.
05 / 05Haltung
Nichts faken.
Jede Zahl braucht einen nachvollziehbaren Messweg oder eine benannte Quelle. Erfundenes Kundenlob und aufgeblasene Statistiken haben hier keinen Platz, weil schon ein unbelegter Beweis das gesamte System schwächt.