Florian Wilde
2e8e4df6cf
README mit Installation, Update-Weg und Backup-Anleitung; docs/DESIGN.md hält Marke, Farbwerte samt gemessener Kontraste und die Bausteine fest. Changelog nach Keep a Changelog, Release-Notes zusätzlich unter releases/.
123 lines
4.9 KiB
Markdown
123 lines
4.9 KiB
Markdown
# Flimmer — Design-Sprache
|
||
|
||
Diese Datei hält fest, warum die Oberfläche aussieht, wie sie aussieht, und
|
||
welche Werte dabei gelten. Sie ist die Referenz für alles, was später dazukommt.
|
||
|
||
## Idee
|
||
|
||
Der Name kommt von der **Flimmerkiste** und vom warmen Flimmern eines
|
||
Bildschirms im abgedunkelten Zimmer. Genau das trägt die Gestaltung: ein sehr
|
||
dunkler, blauvioletter Raum, in den ein warmes Licht fällt. Alles Farbige in
|
||
der Oberfläche ist dieses Licht — es gibt keine zweite, konkurrierende
|
||
Signalfarbe.
|
||
|
||
## Marke
|
||
|
||
| Variante | Datei | Einsatz |
|
||
|---|---|---|
|
||
| Bildmarke | `public/brand/flimmer-icon.svg` | App-Icon, Favicon, Avatare |
|
||
| Bildmarke + Wortmarke | `public/brand/flimmer-logo.svg` | Header, Login, README |
|
||
| Monochrom | `public/brand/flimmer-mono.svg` | Druck, E-Mail-Footer, Prägung |
|
||
| Maskable | `public/brand/flimmer-icon-maskable.svg` | Android-Startbildschirm |
|
||
| Wortmarke allein | `public/brand/flimmer-wordmark.svg` | Sonderfälle |
|
||
|
||
Die Bildmarke ist ein abgerundetes Bildschirm-Rechteck mit weichem, warmem
|
||
Glühen und einem Play-Dreieck; der angedeutete Standfuß macht daraus die
|
||
Flimmerkiste. Die **Wortmarke ist aus Pfaden konstruiert** (geometrische, leicht
|
||
gerundete Sans, Versalhöhe 90, x-Höhe 54, Strichstärke 15, runde Abschlüsse) —
|
||
sie braucht damit keine installierte Schrift und sieht überall identisch aus.
|
||
|
||
Im UI liegt die Marke als React-Komponente vor
|
||
(`src/components/brand/FlimmerLogo.tsx`). Die Verläufe stehen einmalig in
|
||
`<BrandDefs />` im Root-Layout; alle Instanzen referenzieren sie. Rasterdateien
|
||
(Favicon, PWA-Icons, OG-Bild) sind reine Ableitungen und entstehen mit
|
||
`npm run icons`.
|
||
|
||
## Farbwelt
|
||
|
||
Die Signaturfarbe ist kein einzelner Ton, sondern ein **Verlauf von Bernstein
|
||
nach Magenta**. Er trägt Buttons, Fortschrittsbalken, aktive Navigation und das
|
||
Glühen des Logos.
|
||
|
||
### Dunkel (Standard)
|
||
|
||
| Rolle | Wert | Kontrast auf Grund |
|
||
|---|---|---|
|
||
| Grund | `#0c0a14` | — |
|
||
| Karte | `#171424` | — |
|
||
| Rahmen | `#2e2745` | 1,4:1 (dekorativ) |
|
||
| Text | `#f4f1fa` | **17,0:1** |
|
||
| Text gedämpft | `#aca5c2` | **7,7:1** |
|
||
| Text zurückhaltend | `#7c7594` | **4,6:1** |
|
||
| Bernstein | `#ffb454` | **11,3:1** |
|
||
| Magenta | `#ff4d9d` | **6,0:1** |
|
||
| Text auf dem Verlauf | `#1a1024` | min. **5,5:1** (am Magenta-Ende) |
|
||
|
||
### Hell
|
||
|
||
| Rolle | Wert | Kontrast auf Grund |
|
||
|---|---|---|
|
||
| Grund | `#faf7f5` (warmgrau) | — |
|
||
| Karte | `#ffffff` | — |
|
||
| Text | `#1b1524` | **16,2:1** |
|
||
| Text gedämpft | `#5b5268` | **6,7:1** |
|
||
| Text zurückhaltend | `#766c84` | **4,6:1** |
|
||
| Akzent als Text | `#8a4b00` | **6,4:1** |
|
||
| Akzent-Alternative | `#b01262` | **6,4:1** |
|
||
| Text auf dem Verlauf | `#23122c` | min. **6,1:1** |
|
||
|
||
Damit erfüllt jede Text-/Hintergrund-Kombination **WCAG AA**.
|
||
|
||
### Zwei Verläufe, nicht einer
|
||
|
||
Der vollfarbige Verlauf funktioniert im Dunkeln überall — auf hellem Grund
|
||
verschwindet sein Bernstein-Ende jedoch. Deshalb gibt es zwei Tokens:
|
||
|
||
- `--fl-gradient` — Flächen (Buttons, Fortschritt, Glühen). In beiden Themes
|
||
vollfarbig, weil darauf immer dunkler Text (`--fl-on-accent`) sitzt.
|
||
- `--fl-gradient-ink` — **Text** und feine Linien. Im Dunkeln identisch, im
|
||
Hellen abgedunkelt auf `#8a4b00 → #b01262`, damit AA gilt.
|
||
|
||
Analog dazu die Logo-Stops `--fl-brand-1/2/3`: im Hellen tiefer angesetzt
|
||
(`#c26a00 → #c9186f`), damit die Wortmarke auf warmem Weiß lesbar bleibt, ohne
|
||
die Bewegung von Bernstein nach Magenta aufzugeben.
|
||
|
||
## Tokens
|
||
|
||
Alle Werte liegen als CSS-Variablen `--fl-*` in `src/app/globals.css` und werden
|
||
über `@theme inline` an Tailwind durchgereicht. Ein Theme-Wechsel setzt nur das
|
||
Attribut `data-theme` am `<html>`-Element; ein Inline-Skript im Layout tut das,
|
||
bevor der erste Pixel gemalt wird, damit nichts aufblitzt.
|
||
|
||
Ein zusätzliches Theme braucht daher genau einen neuen Selektor-Block mit
|
||
denselben Variablennamen — keine Änderung an Komponenten.
|
||
|
||
## Bausteine
|
||
|
||
| Klasse | Zweck |
|
||
|---|---|
|
||
| `.fl-card` | Karte: halbtransparent, weicher Rahmen, Rückenunschärfe |
|
||
| `.fl-poster-card` | Posterkachel mit sanftem Aufglimmen beim Hover |
|
||
| `.fl-btn` + `.fl-btn-primary` / `.fl-btn-ghost` | Schaltflächen |
|
||
| `.fl-input` | Eingabefelder samt Fokusring im Magenta |
|
||
| `.fl-progress` | Fortschrittsbalken im Signaturverlauf |
|
||
| `.fl-glimmer` | Mikro-Animation beim Abhaken einer Episode |
|
||
|
||
## Bewegung
|
||
|
||
Ruhig und kurz: 200–420 ms, `cubic-bezier(0.22, 1, 0.36, 1)`. Keine harten
|
||
Blitze — beim Abhaken einer Episode glimmt die Zeile einmal warm auf und
|
||
verklingt. `prefers-reduced-motion: reduce` schaltet sämtliche Übergänge ab.
|
||
|
||
## Typografie
|
||
|
||
**Outfit** — geometrisch, leicht gerundet, passt zur Wortmarke. Wird beim Bauen
|
||
heruntergeladen und mit ausgeliefert; die laufende Instanz fragt nie bei Google
|
||
an. Rückfallkette: Inter, dann System-Sans.
|
||
|
||
## Grundhaltung
|
||
|
||
Posterlastig und filmisch: großzügige Poster, abgerundete Ecken, weiche
|
||
Verläufe statt harter Linien. Farbe ist knapp und bedeutet etwas — der Verlauf
|
||
markiert, was gerade dran ist. Der Rest bleibt im Dunkeln.
|