Files
clip2md/DESIGN.md
T
till fe9401c38f Klarbild-Design, neues Logo, Ein-Klick-Einfügen, mobil überarbeitet, Spenden-Knopf
- Design auf Klarbild-Tokens umgestellt: Space Grotesk/Mono, Papier/Karte, Blau, Pills
- Neues Logo und App-Icon: Klemmbrett mit Pfeil (Zwischenablage -> Datei)
- Einfügen-Knopf liest die Zwischenablage direkt (HTML bevorzugt), Fallback-Hinweis
- Mobil: 44px-Ziele, 16px-Eingaben, Safe-Area, Bottom-Sheet, Datei öffnen, Speichern per Teilen-Menü
- Spenden-Knopf (PayPal) in Kopfzeile, Fußzeile und Rechtstexten; Datenschutz um PayPal und Zwischenablage ergänzt
- Service Worker: Seiten network-first (Impressum/Datenschutz froren im Cache ein), Cache v4
- nginx: no-cache für Seiten
- Listen mit einem Leerzeichen nach dem Aufzählungszeichen
2026-09-16 12:21:06 +02:00

1.2 KiB
Raw Blame History

clip2md — Design System

Seit September 2026 Teil der Klarbild-Familie (Tokens aus klarbild-oss/src/styles/tokens.css).

  • Farbe: warmes Papier #EAEAE3, Karte #FBFBF7, Linie #D7D6CC, Tinte #16150F, ein kräftiges Blau #1B3BE0 (OKLCH 45% 0.23 267) für Primäraktion, Fokus, Logo. Dunkelmodus: blau getönte Neutrals, Blau aufgehellt.
  • Schrift: Space Grotesk (UI, Überschriften), Space Mono (Editor, Dateiname, Mono-Labels in Versalien mit 0.18em Sperrung). Self-hosted, keine Google-Fonts.
  • Form: Karten mit 4px Radius, Bedienelemente als Pills (999px). Kein Schatten außer 1px-Hauch und Toast/Sheet.
  • Logo: Klemmbrett mit Pfeil nach unten (Zwischenablage → Datei) in Blau, Wortmarke „clip2md" mit blauer 2. App-Icon: cremefarbenes Klemmbrett auf blauem Quadrat.
  • Mobil: Touch-Ziele ≥44px, Eingaben 16px (kein iOS-Zoom), env(safe-area-inset-*), Einstellungen als Bottom-Sheet, Aktionsleiste als 5er-Raster mit Icon über Label, Speichern über Teilen-Menü.
  • Motion: ease-out-quint, 120–240ms, nur Opacity/Transform; prefers-reduced-motion respektiert.

Historie

Vorher: dunkles Theme mit Grün (v1), dann helles Editorial mit Geist und Zinnober/Blau (v2). Beides abgelöst.