24 lines
1.8 KiB
Markdown
24 lines
1.8 KiB
Markdown
# 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.
|