till
f2793a34c3
- Editor als Hero mit Empty-State-Affordance (Paste-Glyph + Key-Hints) - Dateiname mit auto/eigen-Indikator und Flash bei Auto-Update - Live-Statusbadge 'HTML->Markdown konvertiert' mit Puls - Verfeinerte OKLCH-Palette (getoente Neutrals, ein Accent), Type-Hierarchie - Header-Wordmark + Keyboard-Legende - Motion (ease-out-quint) mit prefers-reduced-motion, :focus-visible, aria-live Toast - Responsive (Mobile-Layout), Danger-Flash bei leerem Speichern - PRODUCT.md + DESIGN.md (HD Design-System dokumentiert) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
52 lines
2.4 KiB
Markdown
52 lines
2.4 KiB
Markdown
# clip2md — Design System
|
||
|
||
Register: **product**. Color strategy: **Restrained** (tinted neutrals + one accent ≤10%).
|
||
Theme: **dark**. Scene: Nutzer legt spätabends oder tagsüber am Monitor schnell einen langen
|
||
Thread ab; eine ruhige, dunkle, blendfreie Fläche hält den Fokus auf dem Text, nicht auf dem UI.
|
||
|
||
## Color (OKLCH)
|
||
|
||
Neutrals sind zur Marken-Hue (kühles Blau-Grau, ~265) getönt — nie reines `#000`/`#fff`.
|
||
|
||
| Token | OKLCH | Rolle |
|
||
| --- | --- | --- |
|
||
| `--bg` | `0.17 0.014 265` | App-Hintergrund (tief) |
|
||
| `--surface` | `0.215 0.016 265` | Editor-Fläche |
|
||
| `--raised` | `0.255 0.018 265` | Bars, Buttons |
|
||
| `--line` | `0.32 0.02 265` | Ruhige Rahmen |
|
||
| `--line-strong`| `0.42 0.024 265` | Aktive Rahmen |
|
||
| `--text` | `0.95 0.006 265` | Primärtext |
|
||
| `--muted` | `0.68 0.012 265` | Sekundärtext, Labels |
|
||
| `--faint` | `0.5 0.012 265` | Tertiär, Legende |
|
||
| `--accent` | `0.74 0.15 152` | Grün — Primäraktion, Fokus, „konvertiert" |
|
||
| `--accent-ink` | `0.22 0.05 152` | Text auf Accent |
|
||
| `--danger` | `0.66 0.16 25` | Fehler-Toast, destruktiv |
|
||
|
||
Accent trägt <10% der Fläche: Save-Button, Fokus-Ring, „konvertiert"-Badge. Sonst Neutrals.
|
||
|
||
## Typography
|
||
|
||
- **Sans (UI-Chrome):** Inter / system-ui. Labels, Buttons, Legende.
|
||
- **Mono (Daten):** ui-monospace / JetBrains Mono. Editor, Dateiname, Zähler — alles, was „Inhalt" ist.
|
||
- Scale mit ≥1.25-Kontrast: 11 (legende) · 12.5 (meta) · 14 (body/editor) · 15 (buttons) · 18 (wordmark).
|
||
- Editor-Zeilenhöhe 1.65, `tab-size: 2`, Body-Zeilen bleiben durch die Mono-Fläche natürlich lesbar.
|
||
|
||
## Elevation & Layout
|
||
|
||
- Drei Ebenen: `bg` (App) → `surface` (Editor, das Herzstück, bekommt den Raum) → `raised` (Bars/Buttons).
|
||
- Keine Cards, keine Schatten außer einem weichen Toast-Drop. Trennung über 1px-Linien und Ton, nicht Boxen.
|
||
- Spacing-Rhythmus variiert bewusst: großzügig um den Editor, kompakt in der Toolbar.
|
||
- Radius 10–12px, konsistent.
|
||
|
||
## Motion
|
||
|
||
- Ease-out-quint (`cubic-bezier(0.22, 1, 0.36, 1)`), 120–240ms. Kein Bounce.
|
||
- Nur Opacity/Transform animieren. Toast slidet ein, Button-Press senkt 1px, „konvertiert"-Badge pulst einmal kurz, auto-aktualisierter Dateiname flasht dezent.
|
||
- `prefers-reduced-motion`: alle nicht-essenziellen Transitions aus.
|
||
|
||
## Accessibility
|
||
|
||
- `:focus-visible` Ring in Accent, überall. Touch-Ziele ≥40px.
|
||
- Toasts über `aria-live="polite"`. Editor & Felder korrekt gelabelt.
|
||
- Kontrast: Text/`bg` und Accent-Ink/Accent über WCAG AA.
|