What does dense-tool-ui do?
A measured reference for the "calm, dense, keyboard-first" tool UI: nested content panel, 44px rows with no dividers, ⌘K command palette, inline editing, LCH gray steps instead of shadows. Plus the matching monochrome landing page.
Copy the structure and behavior, never the brand. Dark + Inter + purple accent is exactly what AI generators produce by default: always change --accent-h and --font for the project.
Files
| Path | Read when |
|---|---|
assets/app-template.html | Building an app/dashboard/backoffice. Runnable shell: list/board, detail, ⌘K, create modal, toasts, dark/light, ?selftest. |
assets/landing-template.html | Building a landing page. Blur header, hero + product shot, manifesto, feature section + spec drawer, changelog, testimonials, pricing + compare table, footer. ?selftest. |
references/app.md | Exact sizes for shell, sidebar, list, board, issue/project detail, modals, ⌘K, filter menu, shortcuts. |
references/tokens.md | Color steps (dark + light), type scale, radii, shadows, easing. |
references/landing.md | Landing, pricing and customers page anatomy, responsive breakpoints, marketing tokens. |
Workflow
- Copy the matching template into the project. Never edit the originals.
- Rebrand: set
--accent-h(e.g. teal 190, orange 50, green 150) and--font, then product name, data and copy. Rename theapp-themelocalStorage key. - Replace the sample data. Keep the DOM shapes:
.grp > .row,.col > .card,.detail > .doc + .props. - Add commands to
CMDSas[label, [keys], fn]. Single-key shortcuts go in thekeydownlistener, which already ignores typing in inputs. - Read the relevant
references/file before adding a screen the template does not have. - Verify: open
file.html?selftestand expect the tab titleSELFTEST OK <n>. Then look at 1280px and 390px, dark and light.
Rules
- Density first: 13px body, 44px rows, no row dividers, no decorative icons. Color only for status, labels and one primary button per screen.
- Depth from background steps, not gradients, glows or blur (not even behind ⌘K). Borders are 1px low-alpha ring shadows.
- Every action has a shortcut, and the shortcut is visible in buttons, menus and tooltips. Context-aware ⌘K.
Ctrl/⌘+Entersubmits. - Edit in place, save instantly: no Save buttons. Properties are buttons that open pickers. Creation ends in a toast with a link.
- Empty states act: thin line illustration, one sentence, a primary button showing its shortcut.
- Delete is soft: confirm, keep it restorable, state the retention period.
- List and board are the same data. "Display options" lets users pick grouping, ordering and visible columns.
- Landing: almost monochrome, two text tones for emphasis, one light CTA repeated in header and prefooter, the real product as the hero image.
Do not copy
Logos, product names, illustrations, icon sets, marketing images or copy from the source product. Take measurements, structure and behavior only.