Design Raster: neue Startseite und alle Unterseiten, echte Fotos, neue Seiten Barber, Neu bei uns, Karriere, Gutscheine; Anfrage mit Braut- und Great-Lengths-Feldern; 301 für Ortsseiten
This commit is contained in:
till committed
1 parent
f65e9d0463
commit
52bfcc95f5
106 files changed
+2164
-2542
No files matched your search
@@ -1,68 +1,23 @@
|
||||
# DESIGN.md · Friseur-Team VK
|
||||
# Design „Raster“ (ab 10.10.2026)
|
||||
|
||||
Gestaltungsregeln für die Website. Die Tokens stehen in `src/styles/tokens.css`; diese Datei erklärt, warum sie so sind.
|
||||
Grundlage: Claude-Design-Variante D „Raster“, für den Livebetrieb verfeinert. Tokens: `src/styles/tokens.css`.
|
||||
|
||||
## Haltung
|
||||
|
||||
Ruhiges Premium, wie ein gutes Magazin über einen echten Salon. Hell, handwerklich, selbstbewusst. Die Seite soll Menschen ansprechen, die gezielt für Brautstyling, Balayage und Great Lengths kommen, und Stammkundschaft den kurzen Weg zum Telefon lassen.
|
||||
|
||||
Szene: Eine Frau Anfang dreißig sitzt abends auf dem Sofa, das Handy in der Hand, und vergleicht Salons für ihre Hochzeit im nächsten Sommer. Daraus folgt: helles Thema, große Bilder, kurze Wege zu Preis und Anfrage, nichts, was nach Rabatt aussieht.
|
||||
|
||||
Drei Wörter für die Marke: **hell, präzise, nahbar**.
|
||||
|
||||
## Farbe
|
||||
|
||||
Alle Farben stammen aus dem Logo und aus dem Salon selbst (weiße Räume, blaue Wandpaneele). Strategie: **Restrained mit einer Committed-Fläche pro Seite**. Grund ist Papier-Weiß, Petrol trägt Akzente und genau eine vollflächige Zone (Anfrage-Band am Seitenende).
|
||||
|
||||
| Rolle | Token | OKLCH | Hex (Quelle) | Einsatz |
|
||||
|---|---|---|---|---|
|
||||
| Anthrazit | `--c-anthrazit` | `oklch(33.8% 0.012 140.5)` | #343933 | Text, Footer |
|
||||
| Petrol | `--c-petrol` | `oklch(50.7% 0.105 234)` | #036E98 | Links, Knöpfe, Akzentwörter, Anfrage-Band |
|
||||
| Hellblau | `--c-hellblau` | `oklch(64.9% 0.076 224.9)` | #5899B2 | nur Deko, nie für Text auf Weiß (3,2:1) |
|
||||
| Silbergrau | `--c-silber` | `oklch(71.1% 0.009 225.1)` | #9CA3A6 | Rahmen, Formularränder |
|
||||
| Nebelgrau | `--c-nebel` | `oklch(88.4% 0.008 216.6)` | #D3DADC | Bildgrund, Flächen |
|
||||
| Papier | `--c-papier` | `oklch(98.7% 0.003 220)` | abgeleitet | Seitengrund, kein reines Weiß |
|
||||
| Petrol tief | `--c-petrol-tief` | `oklch(36% 0.075 236)` | abgeleitet | Hover, Wandpaneel im Anfrage-Band |
|
||||
| Text leise | `--c-text-leise` | `oklch(46% 0.012 200)` | abgeleitet | Nebentext, ≥ 4,5:1 auf Papier |
|
||||
|
||||
Kontraste (WCAG 2.1 AA): Anthrazit auf Papier 11,8:1, Petrol auf Papier 5,7:1, Papier auf Petrol 5,7:1. Hellblau und Silbergrau tragen nie Fließtext.
|
||||
## 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.
|
||||
|
||||
Selbst gehostet unter `public/fonts/` (OFL), auf Latin-1 beschnitten, Achsen begrenzt. Keine Anfragen an Google Fonts oder CDNs.
|
||||
## 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.
|
||||
|
||||
- **Bodoni Moda** (variabel, Optical Size 11 bis 96): Überschriften, Zahlen, Zitate. Hoher Kontrast wie im Mode- und Beauty-Magazin; bei großen Größen schaltet die optische Größe automatisch auf feine Haarstriche. Kursiv nur für das Akzentwort einer Überschrift (in Petrol).
|
||||
- **Archivo** (variabel, Breite 68 bis 100 %, Gewicht 350 bis 700): Fließtext, Formulare. Labels in Großbuchstaben laufen schmal (72 % Breite) und greifen damit die schmale Groteskschrift des Logos („FRISEUR TEAM“) auf.
|
||||
## 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`).
|
||||
|
||||
Skala (fließend, Verhältnis ca. 1,25 bis 1,33): Label 13 px · Klein 15 px · Text 17 px · Lead 19 bis 23 px · H4 20 bis 24 px · H3 24 bis 34 px · H2 34 bis 60 px · H1 44 bis 96 px. Untergrenze überall 12 px. Zeilenlänge Fließtext höchstens 38 rem (rund 70 Zeichen).
|
||||
|
||||
## Form und Motive
|
||||
|
||||
- **Bogen**: Bilder und Fotoflächen der Premium-Leistungen haben oben einen Halbkreis (`--arch`). Vorbild ist der Rundbogen-Durchgang im Salon (sichtbar auf salon-innen-2 und -3).
|
||||
- **Wandpaneel**: Ein senkrechter Petrol-Block hinter Hero-Bildern und im Anfrage-Band, wie die blauen Wandflächen zwischen den Spiegeln.
|
||||
- **Haarlinien**: Listen und Preise stehen auf 1 px Linien, Abschnittsanfänge auf 1,5 px Anthrazit. Keine Karten-Raster.
|
||||
- **Knöpfe**: Pille, ein Hauptknopf pro Abschnitt (Petrol), Nebenknopf als Kontur.
|
||||
- **Fotoflächen (Shotliste)**: Solange Arbeitsfotos fehlen, zeigt `Shot.astro` eine beschriftete Fläche mit Motiv und Bildidee. Das ist die Liste für das Shooting.
|
||||
|
||||
## Abstände
|
||||
|
||||
4-px-Raster (`--s-1` bis `--s-9`). Abschnitte atmen mit `--section` (72 bis 152 px). Seitenrand `--gutter` (20 bis 56 px). Rhythmus bewusst wechselnd: enge Gruppen, große Abstände zwischen Abschnitten.
|
||||
|
||||
## Bewegung
|
||||
|
||||
Ein Auftritt beim Laden (Hero-Text steigt, Wandpaneel wächst), dazu dezentes Einblenden beim Scrollen über CSS `animation-timeline: view()`. Kurve ease-out-quint, keine Federn. Bei `prefers-reduced-motion: reduce` ist alles aus. Die H1 wird nur verschoben, nie ausgeblendet (LCP).
|
||||
|
||||
## Barrierefreiheit
|
||||
|
||||
WCAG 2.1 AA. Fokus sichtbar (2 px Petrol), Touch-Ziele mindestens 44 px, Formularfelder 52 px hoch und 17 px Schrift (kein Zoom auf iOS), Fehlermeldungen als Text mit Fehlerübersicht, Menü und FAQ funktionieren ohne JavaScript (`<details>`).
|
||||
|
||||
## Nicht machen
|
||||
|
||||
- Beige, Taupe, Rosé, Lila-Verläufe, Glas-Effekte, Neon
|
||||
- Inter, Roboto, Montserrat, Space Grotesk und andere Standardschriften
|
||||
- Stockfotos oder KI-Bilder von Frisuren; erfundene Bewertungen oder Zitate
|
||||
- Gleich große Karten im 3er- oder 6er-Raster für Leistungen
|
||||
- Pulsierende Knöpfe, Pop-ups, Cookie-Banner (es gibt keine Cookies)
|
||||
- Farbige Seitenstreifen an Karten, Verlaufstext, große Zahl mit kleinem Label als Statistikreihe
|
||||
- Gedankenstriche als Satzzeichen in Texten, Superlative, „exklusiv“, „einzigartig“
|
||||
- Inline-`style`-Attribute (die CSP erlaubt nur `style-src 'self'`)
|
||||
## 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.
|
||||
Reference in new issue
Block a user