O que dense-tool-ui faz?
Uma referência medida para a interface de ferramentas "calma, densa, focada no teclado": painel de conteúdo aninhado, linhas de 44px sem divisórias, paleta de comandos ⌘K, edição inline, tons de cinza LCH em vez de sombras. Além da landing page monocromática correspondente.
Copie a estrutura e o comportamento, nunca a marca. Dark + Inter + destaque roxo é exatamente o que os geradores de IA produzem por padrão: sempre altere --accent-h e --font para o projeto.
Arquivos
| Caminho | Leia quando |
|---|---|
assets/app-template.html | Construindo um aplicativo/dashboard/backoffice. Shell executável: lista/quadro, detalhes, ⌘K, modal de criação, toasts, escuro/claro, ?selftest. |
assets/landing-template.html | Construindo uma landing page. Cabeçalho com desfoque, herói + captura de tela do produto, manifesto, seção de recursos + gaveta de especificações, changelog, depoimentos, preços + tabela de comparação, rodapé. ?selftest. |
references/app.md | Tamanhos exatos para shell, barra lateral, lista, quadro, detalhes de issue/projeto, modais, ⌘K, menu de filtros, atalhos. |
references/tokens.md | Etapas de cor (escuro + claro), escala tipográfica, raios, sombras, easing. |
references/landing.md | Anatomia da landing page, página de preços e clientes, pontos de interrupção responsivos, tokens de marketing. |
Fluxo de trabalho
- Copie o template correspondente para o projeto. Nunca edite os originais.
- Rebrand: defina
--accent-h(ex. teal 190, laranja 50, verde 150) e--font, depois nome do produto, dados e cópia. Renomeie a chaveapp-themedo localStorage. - Substitua os dados de exemplo. Mantenha as formas do DOM:
.grp > .row,.col > .card,.detail > .doc + .props. - Adicione comandos a
CMDScomo[label, [keys], fn]. Atalhos de tecla única vão no ouvintekeydown, que já ignora digitação em inputs. - Leia o arquivo
references/relevante antes de adicionar uma tela que o template não possui. - Verifique: abra
file.html?selfteste espere o título da abaSELFTEST OK <n>. Depois veja em 1280px e 390px, escuro e claro.
Regras
- Densidade primeiro: corpo 13px, linhas de 44px, sem divisórias, sem ícones decorativos. Cor apenas para status, rótulos e um botão primário por tela.
- Profundidade a partir de etapas de fundo, não gradientes, brilhos ou desfoque (nem atrás do ⌘K). Bordas são anéis de sombra de 1px com baixo alfa.
- Toda ação tem um atalho, e o atalho é visível em botões, menus e tooltips. ⌘K sensível ao contexto.
Ctrl/⌘+Entersubmete. - Edite no lugar, salve instantaneamente: sem botões Salvar. Propriedades são botões que abrem seletores. Criação termina em um toast com um link.
- Estados vazios agem: ilustração de linha fina, uma frase, um botão primário mostrando seu atalho.
- Exclusão é suave: confirme, mantenha restaurável, informe o período de retenção.
- Lista e quadro são os mesmos dados. "Opções de exibição" permite ao usuário escolher agrupamento, ordenação e colunas visíveis.
- Landing: quase monocromática, dois tons de texto para ênfase, um CTA claro repetido no cabeçalho e no pré-rodapé, o produto real como imagem herói.
Não copie
Logotipos, nomes de produto, ilustrações, conjuntos de ícones, imagens de marketing ou cópia do produto de origem. Leve apenas medidas, estrutura e comportamento.