Was macht dense-tool-ui?
Eine messgenaue Referenz für das „ruhige, dichte, tastaturorientierte“ Tool-UI: verschachteltes Bedienfeld, 44px Zeilen ohne Trennlinien, ⌘K-Befehlspalette, Inline-Bearbeitung, LCH-Graustufen statt Schlagschatten. Dazu die passende monochrome Landingpage.
Kopieren Sie die Struktur und das Verhalten, niemals die Marke. Dunkel + Inter + lila Akzent ist genau das, was KI-Generatoren standardmäßig produzieren: Ändern Sie immer --accent-h und --font für das Projekt.
Dateien
| Pfad | Lesen, wenn |
|---|---|
assets/app-template.html | Sie eine App/ein Dashboard/Backoffice bauen. Ausführbare Shell: Liste/Board, Detail, ⌘K, Erstellungsmodal, Toasts, dunkel/hell, ?selftest. |
assets/landing-template.html | Sie eine Landingpage bauen. Blur-Header, Hero + Produktshot, Manifest, Feature-Sektion + Spezifikations-Drawer, Changelog, Testimonials, Pricing + Vergleichstabelle, Footer. ?selftest. |
references/app.md | Genaue Maße für Shell, Sidebar, Liste, Board, Issue/Projekt-Detail, Modals, ⌘K, Filtermenü, Shortcuts. |
references/tokens.md | Farbstufen (dunkel + hell), Typografie-Skala, Radien, Schatten, Easing. |
references/landing.md | Landingpage-, Pricing- und Kunden-Seiten Anatomie, responsive Breakpoints, Marketing-Tokens. |
Arbeitsablauf
- Kopieren Sie das passende Template in das Projekt. Bearbeiten Sie niemals die Originale.
- Rebranding: Setzen Sie
--accent-h(z.B. teal 190, orange 50, grün 150) und--font, dann Produktname, Daten und Text. Benennen Sie denapp-themelocalStorage-Key um. - Ersetzen Sie die Beispieldaten. Behalten Sie die DOM-Formen bei:
.grp > .row,.col > .card,.detail > .doc + .props. - Fügen Sie Befehle zu
CMDSals[label, [keys], fn]hinzu. Einzeltasten-Shortcuts kommen in denkeydown-Listener, der bereits Eingaben in Inputs ignoriert. - Lesen Sie die entsprechende
references/-Datei, bevor Sie einen Bildschirm hinzufügen, den das Template nicht hat. - Überprüfen: Öffnen Sie
file.html?selftestund erwarten Sie den Tab-TitelSELFTEST OK <n>. Betrachten Sie dann 1280px und 390px, dunkel und hell.
Regeln
- Dichte zuerst: 13px Schrift, 44px Zeilen, keine Zeilentrenner, keine dekorativen Symbole. Farbe nur für Status, Labels und einen primären Button pro Bildschirm.
- Tiefe durch Hintergrundstufen, nicht durch Verläufe, Glühen oder Unschärfe (nicht einmal hinter ⌘K). Ränder sind 1px Ring-Schatten mit niedriger Deckkraft.
- Jede Aktion hat ein Kürzel, und das Kürzel ist sichtbar in Schaltflächen, Menüs und Tooltips. Kontextbewusstes ⌘K.
Strg/⌘+Entersendet ab. - Bearbeiten Sie direkt, speichern Sie sofort: keine Speichern-Buttons. Eigenschaften sind Buttons, die Picker öffnen. Erstellung endet in einem Toast mit einem Link.
- Leere Zustände handeln: dünne Strichzeichnung, ein Satz, ein primärer Button mit seinem Shortcut.
- Löschen ist sanft: Bestätigen, wiederherstellbar halten, Aufbewahrungsfrist angeben.
- Liste und Board sind dieselben Daten. „Anzeigeoptionen“ lässt Benutzer Gruppierung, Sortierung und sichtbare Spalten wählen.
- Landingpage: fast monochrom, zwei Texttöne für Hervorhebungen, ein heller CTA wiederholt in Header und Pre-Footer, das echte Produkt als Hero-Bild.
Nicht kopieren
Logos, Produktnamen, Illustrationen, Symbolsets, Marketingbilder oder Texte des Quellprodukts. Übernehmen Sie nur Maße, Struktur und Verhalten.