Files

T

till f2793a34c3 ux: Redesign-Pass (impeccable)

- 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>

2026-08-11 11:13:42 +00:00

2.4 KiB

Raw Permalink Blame History

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.

2.4 KiB Raw Permalink Blame History Unescape Escape