guyg1474andClaude Opus 5.5
419d200bf9
- styles.css (1757 Zeilen) und themes.css → frontend/src/styles/: base, layout, components, start, projekte (inkl. Artikel), monitoring, haushalt, reisen, kanban, konto, grundschicht, responsive und designs/ (gemeinsam, blackwall, fabrik); index.css legt die Reihenfolge fest - Die spätere "Moderne Grundschicht" ist in die Regeln der Bereiche eingearbeitet (z. B. .segmented, .household-item, .tile, .board-column stehen jeweils nur noch an einer Stelle); übrig bleiben nur bereichsübergreifende Regeln (einheitliche Eingabefelder, Hover, Bewegung) - .link-picker (Auswahllisten in Dialogen) zu den allgemeinen Bausteinen - Optisch unverändert: 54 Seiten-Screenshots (9 Seiten × 3 Designs × Desktop/Handy) und 18 Dialog-/Zustandsbilder pixelgleich zum Stand davor Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
36 lines
2.0 KiB
Markdown
36 lines
2.0 KiB
Markdown
# Design-Brief: umschaltbare Designs
|
||
|
||
Selbst ausgearbeitet im Rahmen der Vorgabe ("Star Trek, Star Wars, Iron Man 2, das aktuelle bleibt").
|
||
|
||
## Was und für wen
|
||
|
||
Ein privates Heim-Dashboard für eine kleine Gruppe von Konten. Die Designs ändern nur die
|
||
Darstellung: gleiche Seiten, gleiche Bedienung, gleiche Reihenfolge der Inhalte.
|
||
|
||
## Die Designs
|
||
|
||
(LCARS, Zielcomputer und J.A.R.V.I.S. gab es zeitweise; sie wurden auf Wunsch wieder entfernt.)
|
||
|
||
| Design | Stimmung (3–5 Wörter) | Erkennungsmerkmal |
|
||
|---|---|---|
|
||
| Matrix (Standard) | roh, nächtlich, Terminal | roter Zeichenregen, Scanlines, blinkender Cursor |
|
||
| Blackwall (Cyberpunk) | bedrohlich, digital, scharfkantig | leuchtende Datenwand nach dem Vorbild aus dem Spiel (Wand-Korridor, Lichtband, Punkteboden, seltener Glitch), abgeschrägte Panels, Pink-Rot/Cyan, chromatisch versetzte Titel |
|
||
|
||
## Modernisierung (zweite Runde)
|
||
|
||
Ziel: wie eine durchdachte Alltags-Oberfläche wirken statt wie eine Film-Requisite, das Vorbild
|
||
bleibt erkennbar. Umsetzung über ein gemeinsames Token-System in `frontend/src/styles/base.css` (Farbrollen, Radien,
|
||
Schatten, Fokusring, Schriftrollen für Text/Titel/Beschriftung, Bewegung); jedes Design setzt vor
|
||
allem diese Werte. Ruhige Fließtext-Schriften, Display-Schrift nur für Seitentitel, weiche
|
||
Fokusringe, Status als Pillen, Kacheln mit Icon-Feld, Hintergründe zur Mitte hin ausgeblendet,
|
||
Überblenden beim Design-Wechsel.
|
||
|
||
## Regeln, die für alle gelten
|
||
|
||
- Farben über Rollen (Hintergrund, Fläche, Text, gedämpft, Akzent, Status), ein Akzent je Design.
|
||
- Höchstens zwei Schriftfamilien je Design, alle lokal und frei lizenziert.
|
||
- Kontrast mindestens 4,5:1 (große Schrift 3:1), gemessen auf allen Seiten in allen Designs.
|
||
- Bewegung nur über `transform`/`opacity` bzw. Canvas; "Animation aus" im Menü und
|
||
"Bewegung reduzieren" im System stoppen alles. Hintergründe sind `aria-hidden`.
|
||
- Keine Original-Logos, Abzeichen oder geschützten Schriften; keine erfundenen Kennzahlen.
|