Design „Raster“ (ab 10.10.2026)

Grundlage: Claude-Design-Variante D „Raster“, für den Livebetrieb verfeinert. Tokens: src/styles/tokens.css.

Idee

Ein weißes Blatt auf kühlem Grund. Zwei feine senkrechte Linien bei 15 % und 40 % teilen das Blatt in drei Spalten (A · B · C). Inhalte richten sich an diesen Linien aus (.r3 mit .a, .b, .c, .ab, .bc). Mobil fallen die Linien weg, alles läuft einspaltig.

Schrift

Überschriften: Libre Caslon Condensed (variabel, selbst gehostet). Groß, eng, letter-spacing: -0.018em.
Initiale: Pinyon Script, nur der erste Buchstabe einer Hauptüberschrift (H.astro), in Blau. Höchstens eine pro Bildschirm. Klammern im Hero ebenfalls Pinyon.
Text: Albert Sans, 17 px, Zeilenhöhe 1,62, Zeilenlänge max. 36 rem. Nummern und Labels 12,5 px in --ink-3.
Gegenüber dem Entwurf: Fließtext von 13,5–14,5 px auf 17 px angehoben, Überschriften fließend skaliert (h1 52–132 px, h2 44–88 px), Labels lesbarer, Abstände auf 8er-Rhythmus.

Farbe

Tinte --ink, Blau aus den Wandpaneelen --blue (Akzent, Preise, Initialen), Linien --line, zarte Fläche --blue-wash. Keine Verläufe, keine Schatten außer der Kundenkarte.

Bausteine

Ovaler Knopf (.oval, Caslon 19 px, Hover blau), Pfeil-Link (.go), Leistungszeilen (.srow), Zahlenkacheln (.tile), Vorher/Nachher (.case), Bewertungen (.revs), Schritte (.steps), Preisgruppen (PriceGroup.astro), FAQ (details).

Regeln

Keine Inline-Styles und keine Inline-Skripte (CSP style-src 'self', script-src 'self'). Abstände über Hilfsklassen (.mt-*, .gap-*).
Einblenden nur für Elemente unterhalb des ersten Bildschirms (data-rv, data-clip), bei prefers-reduced-motion aus.
Echte Fotos aus dem Salon. Vorher/Nachher immer paarweise mit Beschriftung.

1.8 KiB Raw Blame History Unescape Escape