#002 Design-System und Layout #2

New Issue

2026-10-12T15:12:32Z

florian.wilde commented

2026-10-12 15:12:32 +00:00

Ziel

Design laut Vorgabe (Tresor, Graphit + Messing): Tokens, Schriften, Logo, Favicon/PWA-Icons, Grundlayout mit Seitenleiste.

Aufgaben

Design-Tokens als CSS-Variablen + Tailwind-Theme
Space Grotesk, IBM Plex Sans, JetBrains Mono selbst gehostet (@fontsource)
public/brand/ mit logo.svg, logo-light.svg, logo-mono.svg, favicon.svg; PNG-Icons + Manifest per Skript
Seitenleiste (Logo, Navigation, Benutzer unten), einklappbar auf schmalen Bildschirmen
Grundkomponenten: Karte, Button (primär/sekundär/Gefahr), Badge, Statuspunkt, Tabelle, Diff-Box, Kennzahl-Kachel

Akzeptanzkriterien

Kontrast ≥ 4,5:1, Fokusrahmen in Messing
Kein horizontales Scrollen bei 390 px
Klickflächen ≥ 44 px

Abhängigkeiten

#001

Notizen / Entscheidungen

Tokens: CSS-Variablen in :root, an Tailwind per @theme inline gereicht (bg-surface,
text-muted, border-border-strong, rounded-karte …). So nutzen Inline-SVGs und Utilities
dieselbe Quelle. Nur dunkler Modus.
Schriften: nur Latin-Ausschnitt und benutzte Gewichte, importiert in src/app/layout.tsx.
Zeichen außerhalb (z. B. „→“) fallen auf die Systemschrift zurück – unauffällig.
Kontrast (gemessen): --text-muted auf --surface 5,8:1, auf --raised 5,3:1;
Messing auf --accent-soft 7,2:1; Koralle auf --danger-soft 5,8:1; Text auf Messing-Button 10,3:1.
Icons: pnpm icons (scripts/icons.mjs) erzeugt public/icons/*, src/app/favicon.ico
(16/32/48, PNG-in-ICO), src/app/icon.svg und src/app/apple-icon.png; Ergebnisse sind
eingecheckt, damit Build und Laufzeitabbild kein sharp brauchen. App-Icons auf #0D1013 mit
Rand (Logo 72 %), deshalb ohne maskable.
Aktiver Pfad: Ein Layout kennt den Pfad nicht. Huelle nimmt aktiverPfad optional;
ohne Angabe ermittelt die Client-Navigation ihn per usePathname().
Benutzer: src/app/(app)/huellen-benutzer.ts → huellenBenutzerErmitteln() liefert bis
#004 einen festen Beispielbenutzer (TODO-Kommentar).
Mobil: Unter 1024 px Kopfleiste mit Menü-Button, Leiste als Overlay (280 px) mit eigenem
Schließen-Knopf; Escape, Klick auf Abdunkler oder auf einen Link schließt. Geschlossen ist die
Leiste invisible und damit nicht per Tab erreichbar.
Desktop: Seitenleiste als eigene Flex-Spalte, Inhalt darin sticky – Hintergrund und Rahmen
laufen auch bei langen Seiten (und in Full-Page-Screenshots) durch.
Tabellen scrollen im eigenen Container; der Container ist relative, sonst entkommen
sr-only-Texte dem Scrollbereich und verbreitern die Seite (bei 390 px gefunden).
Prototyp: Beispieldaten in src/beispiel/ (Bezugszeit BEISPIEL_JETZT), Seiten sichtbar
als „Beispieldaten“ markiert. Platzhalterseiten nennen Phase und Issue.
Screenshots: pnpm exec tsx scripts/screenshots.ts (ENV SSHKV_URL, SSHKV_BILDER,
SSHKV_SEITEN) → docs/anleitung/bilder/; meldet horizontalen Überlauf mit Exit-Code 1.

Quelle: docs/issues/002-design-layout.md – dort wird dieses Issue gepflegt.

## Ziel Design laut Vorgabe (Tresor, Graphit + Messing): Tokens, Schriften, Logo, Favicon/PWA-Icons, Grundlayout mit Seitenleiste. ## Aufgaben - [x] Design-Tokens als CSS-Variablen + Tailwind-Theme - [x] Space Grotesk, IBM Plex Sans, JetBrains Mono selbst gehostet (`@fontsource`) - [x] `public/brand/` mit `logo.svg`, `logo-light.svg`, `logo-mono.svg`, `favicon.svg`; PNG-Icons + Manifest per Skript - [x] Seitenleiste (Logo, Navigation, Benutzer unten), einklappbar auf schmalen Bildschirmen - [x] Grundkomponenten: Karte, Button (primär/sekundär/Gefahr), Badge, Statuspunkt, Tabelle, Diff-Box, Kennzahl-Kachel ## Akzeptanzkriterien - [x] Kontrast ≥ 4,5:1, Fokusrahmen in Messing - [x] Kein horizontales Scrollen bei 390 px - [x] Klickflächen ≥ 44 px ## Abhängigkeiten #001 ## Notizen / Entscheidungen - **Tokens:** CSS-Variablen in `:root`, an Tailwind per `@theme inline` gereicht (`bg-surface`, `text-muted`, `border-border-strong`, `rounded-karte` …). So nutzen Inline-SVGs und Utilities dieselbe Quelle. Nur dunkler Modus. - **Schriften:** nur Latin-Ausschnitt und benutzte Gewichte, importiert in `src/app/layout.tsx`. Zeichen außerhalb (z. B. „→“) fallen auf die Systemschrift zurück – unauffällig. - **Kontrast** (gemessen): `--text-muted` auf `--surface` 5,8:1, auf `--raised` 5,3:1; Messing auf `--accent-soft` 7,2:1; Koralle auf `--danger-soft` 5,8:1; Text auf Messing-Button 10,3:1. - **Icons:** `pnpm icons` (`scripts/icons.mjs`) erzeugt `public/icons/*`, `src/app/favicon.ico` (16/32/48, PNG-in-ICO), `src/app/icon.svg` und `src/app/apple-icon.png`; Ergebnisse sind eingecheckt, damit Build und Laufzeitabbild kein sharp brauchen. App-Icons auf `#0D1013` mit Rand (Logo 72 %), deshalb ohne `maskable`. - **Aktiver Pfad:** Ein Layout kennt den Pfad nicht. `Huelle` nimmt `aktiverPfad` optional; ohne Angabe ermittelt die Client-`Navigation` ihn per `usePathname()`. - **Benutzer:** `src/app/(app)/huellen-benutzer.ts` → `huellenBenutzerErmitteln()` liefert bis #004 einen festen Beispielbenutzer (TODO-Kommentar). - **Mobil:** Unter 1024 px Kopfleiste mit Menü-Button, Leiste als Overlay (280 px) mit eigenem Schließen-Knopf; Escape, Klick auf Abdunkler oder auf einen Link schließt. Geschlossen ist die Leiste `invisible` und damit nicht per Tab erreichbar. - **Desktop:** Seitenleiste als eigene Flex-Spalte, Inhalt darin `sticky` – Hintergrund und Rahmen laufen auch bei langen Seiten (und in Full-Page-Screenshots) durch. - **Tabellen** scrollen im eigenen Container; der Container ist `relative`, sonst entkommen `sr-only`-Texte dem Scrollbereich und verbreitern die Seite (bei 390 px gefunden). - **Prototyp:** Beispieldaten in `src/beispiel/` (Bezugszeit `BEISPIEL_JETZT`), Seiten sichtbar als „Beispieldaten“ markiert. Platzhalterseiten nennen Phase und Issue. - **Screenshots:** `pnpm exec tsx scripts/screenshots.ts` (ENV `SSHKV_URL`, `SSHKV_BILDER`, `SSHKV_SEITEN`) → `docs/anleitung/bilder/`; meldet horizontalen Überlauf mit Exit-Code 1. --- Quelle: `docs/issues/002-design-layout.md` – dort wird dieses Issue gepflegt.

florian.wilde added this to the v0.1.0 milestone 2026-10-12 15:12:32 +00:00

florian.wilde added the ui label 2026-10-12 15:12:32 +00:00

florian.wilde closed this issue

2026-10-12 15:12:33 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: florian.wilde/sshkeyvault#2