TriSBie/dense-tool-ui

Que fait dense-tool-ui ?

Référence mesurée pour l'UI d'outils « calme, dense, orientée clavier » : panneau de contenu imbriqué, lignes de 44 px sans séparateurs, palette de commandes ⌘K, édition en ligne, dégradés de gris LCH à la place des ombres. Plus la page d'atterrissage monochrome correspondante.

Copiez la structure et le comportement, jamais la marque. Le thème sombre + Inter + accent violet est exactement ce que les générateurs d'IA produisent par défaut : changez toujours --accent-h et --font pour le projet.

Fichiers

Chemin	À lire quand
assets/app-template.html	Vous construisez une app / dashboard / backoffice. Shell exécutable : liste / tableau, détail, ⌘K, modale de création, toasts, clair / sombre, ?selftest.
assets/landing-template.html	Vous construisez une page d'atterrissage. En-tête flou, héros + capture du produit, manifeste, section fonctionnalités + tiroir de specs, changelog, témoignages, tarifs + tableau comparatif, pied de page. ?selftest.
references/app.md	Dimensions exactes du shell, de la barre latérale, de la liste, du tableau, du détail d'issue / projet, des modales, de ⌘K, du menu de filtre, des raccourcis.
references/tokens.md	Dégradés de couleurs (sombre + clair), échelle typographique, rayons, ombres, easing.
references/landing.md	Anatomie de la page d'atterrissage, des tarifs et de la page clients, points de rupture responsives, tokens marketing.

Workflow

1. Copiez le modèle adapté dans le projet. Ne modifiez jamais les originaux.
2. Rebranchez : définissez --accent-h (p. ex. teal 190, orange 50, vert 150) et --font, puis le nom du produit, les données et le texte. Renommez la clé localStorage app-theme.
3. Remplacez les données d'exemple. Conservez les formes du DOM : .grp > .row, .col > .card, .detail > .doc + .props.
4. Ajoutez des commandes à CMDS sous la forme [label, [keys], fn]. Les raccourcis à une seule touche vont dans l'écouteur keydown, qui ignore déjà la saisie dans les champs.
5. Lisez le fichier references/ approprié avant d'ajouter un écran que le modèle ne possède pas.
6. Vérifiez : ouvrez file.html?selftest et attendez le titre d'onglet SELFTEST OK <n>. Examinez ensuite à 1280 px et 390 px, en mode sombre et clair.

Règles

1. La densité d'abord : texte à 13 px, lignes de 44 px, pas de séparateurs de ligne, pas d'icônes décoratives. La couleur uniquement pour le statut, les étiquettes et un bouton principal par écran.
2. Profondeur par dégradés d'arrière-plan, pas de dégradés, de lueurs ou de flou (même pas derrière ⌘K). Les bordures sont des ombres annulaires avec un anneau à 1 px et faible opacité.
3. Chaque action a un raccourci, et le raccourci est visible dans les boutons, menus et infobulles. ⌘K contextuel. Ctrl/⌘+Entrée valide.
4. Éditer sur place, sauvegarder instantanément : pas de boutons Enregistrer. Les propriétés sont des boutons qui ouvrent des sélecteurs. La création se termine par un toast contenant un lien.
5. Les états vides agissent : illustration en traits fins, une phrase, un bouton principal affichant son raccourci.
6. Suppression douce : confirmez, gardez-la restaurable, indiquez la durée de conservation.
7. La liste et le tableau sont les mêmes données. Les « Options d'affichage » permettent à l'utilisateur de choisir le regroupement, l'ordre et les colonnes visibles.
8. Page d'atterrissage : presque monochrome, deux tons de texte pour l'emphase, un seul CTA clair répété dans l'en-tête et avant le pied de page, le véritable produit comme image héros.

À ne pas copier

Logos, noms de produits, illustrations, jeux d'icônes, images marketing ou textes provenant du produit source. Ne retenez que les mesures, la structure et le comportement.