Design system · v1 · pour le mockup index.html

Le vided'abord.

Kagu cherche des meubles par leurs dimensions. Son identité part de ce que l'utilisateur possède vraiment : un creux à combler. Pas de mètre ni de plan technique — un creux, un plein, et une seule couleur pour dire « il reste de la place ».

OKLCH3 familles de polices embarquées0 dépendance, 0 buildprefers-reduced-motion respecté

Cinq principes

Chaque décision du mockup se justifie par l'un d'eux. S'ils se contredisent, l'ordre ci-dessous tranche.

Identité : le carré évidé

Le logo est un carré dont un coin a été retiré. La pièce citron s'y loge sans le toucher : le vide, puis ce qui le remplit. Le même geste — l'encoche — réapparaît sur chaque carte produit.

kagu

Construction

Carré 32, rayon 9. Encoche 14 × 14 (rayon 3). Pièce 8 × 8 à 3 de chaque paroi : le jeu est toujours visible.

Tailles & zone libre

Taille minimale du symbole : 16 px. Zone libre autour : la hauteur de la pièce citron (8/32 de la marque).

À ne pas faire

Recolorer la pièce : le citron veut dire « vide », jamais « marque ».
Fermer l'encoche ou y mettre un autre élément.
Écrire le mot en capitales ou étirer la graisse.
Fond clair : carré encre. Fond encre : carré craie.

La signature : l'encoche

Un coin évidé qui accueille l'action (le cœur des favoris). Elle remplace la bordure, l'ombre et la pastille de badge : une seule idée pour toutes les cartes. Elle se règle par --notch (56 px) et --notch-r (14 px).

Couleurs

Tout est défini en OKLCH : on fait varier la clarté sans dériver de teinte. Les valeurs ci-dessous sont lues en direct dans tokens.css. Le chiffre sur chaque pastille est son contraste avec le texte qui s'y pose.

Répartition visée

Craie 62 %Plein 22 %Encre 12 %

Le citron ne dépasse jamais ~4 % d'un écran, et n'apparaît que deux fois au plus : sur l'espace libre de la niche, et en surligneur dans le titre.

Contrastes vérifiés

Seuils : 4,5:1 pour le texte courant, 3:1 pour le grand texte et les icônes.

Paire	Aperçu	Ratio	Niveau

Typographie

Un caractère condensé et dense pour dire les chiffres, un texte rond et lisible pour expliquer, une mono pour les unités. Polices embarquées en WOFF2 (dossier fonts/), avec repli système.

Titres & chiffres

140

Bricolage Grotesque

ABCDEFGHIJKLM abcdefghijklm 0123456789 àéèêçœ

Variable : graisse 200–800, largeur 75–100 %, corps optique. Titres à 75–85 % de largeur, 650–800.

Texte

Figtree

ABCDEFGHIJKLM abcdefghijklm 0123456789 àéèêçœ

Variable 300–900. Corps 16 px, interlignage 1,5, text-wrap: pretty.

Unités & étiquettes

DM Mono

ABCDEFGHIJKLM 0123456789 140 × 85 cm

400 et 500. Étiquettes en capitales espacées de 0,06 em, cotes en chasse fixe.

Les deux axes de Bricolage

Le chiffre est le héros de Kagu : on le serre (largeur) et on l'appuie (graisse) pour qu'il tienne dans une carte de téléphone.

120 × 85

Graisse800Largeur78

Échelle

Tailles fluides (clamp()) : la valeur affichée est celle de votre écran, maintenant.

Règles de français

Cotes

140 × 85 × 40 cm

Le signe × (U+00D7) entre les cotes, jamais la lettre x. Espace fine avant l'unité.

Prix & ponctuation

569 €

Espace insécable avant € % : ; ? ! et dans les guillemets « comme ceci ». Virgule décimale.

Ton

« Il reste 2 cm de libre. »

Concret, chiffré, jamais commercial. On dit ce qui rentre, pas ce qu'on adore.

Espaces, formes & relief

Une base de 4 px, quatre rayons, et deux états de matière : le plein est à plat, le creux est en retrait. Seul ce qui flotte (feuille, toast) a une ombre.

Échelle d'espacement

Rayons

Cible tactile

4452

44 px minimum partout, 52 px pour les boutons principaux. Les poignées de la niche ont 44 px de zone active pour 8 px visibles.

Creux & plein

PleinCarte, bouton clair. À plat, sans ombre.

CreuxChamp de cote, piste de curseur, plaque produit.

Creux profondLa niche : l'emplacement lui-même.

FlottantFeuilles et notifications seulement.

Grille & points de rupture

< 600Téléphone : une colonne de contrôles, résultats en 2 colonnes, feuilles plein écran ou ancrées en bas, présélections défilantes.

600–899Grand téléphone / tablette : grille auto 236 px minimum, boutons côte à côte.

900Feuilles centrées en deux colonnes (visuel + informations).

≥ 1024Bureau : le panneau « emplacement » devient une colonne fixe de 392 px (432 px dès 1440) qui reste visible pendant qu'on fait défiler les résultats.

Composants

Tous sont interactifs ici et vivent dans components.css. Le mockup n'en utilise aucun autre.

Boutons

Une seule action principale par vue (encre pleine). Les autres chemins sont secondaires ou fantômes.

Repos

Survol

Focus

Inactif

Au survol, fond et texte changent ensemble : le contraste ne baisse jamais. Pression : échelle 0,97.

Champ de cote + « Libre »

Saisie au clavier numérique, boutons ± (maintenir = répétition accélérée), ou glisser les poignées de la niche.

« Libre » désactive la cote : elle n'est plus filtrée et la niche s'ouvre de ce côté.

Marge & mode

Marge sous la cote10cm

La butée haute est toujours stricte (jamais plus grand). La marge ne règle que la butée basse.

Chips, étiquettes, interrupteur

JapandiBuffet2 taillesSerré

Matières (pastilles)

Chaque finition recolore le dessin du meuble en direct.

Jauges de jeu

Remplissage = part de l'emplacement occupée. Libellé = ce qu'il reste, en cm.

L 0 cmH 7 cmP 12 cm

Carte produit à encoche

Plaque en creux (dessin à l'échelle réelle), encoche pour le cœur, jauges de jeu, prix. Survol : le meuble se soulève, le fond s'assombrit d'un cran.

La niche

Le composant central. Glissez les poignées (ou utilisez les flèches du clavier sur elles) : le citron montre l'espace libre, et seulement lui.

Votre emplacement

Le meuble est dessiné à l'échelle des cotes hors-tout.
Ancré en bas à gauche : l'espace libre se lit à droite et au-dessus.
Cote « libre » : le bord s'estompe, la poignée disparaît.
Le redimensionnement est interpolé (320 ms) sauf pendant un glisser.

Étapes & analyse

La ligne balaie la photo ; chaque pastille posée correspond à une couleur réellement repérée.

1Photo2Analyse3Suggestions

Feuille, toast, état vide

Rien ne rentre aussi juste.

Toujours proposer deux issues chiffrées.

Marge à 14 cm (3)Tout ce qui rentre (21)

Le mouvement explique

Une animation n'existe que si elle rend visible un changement d'état. Quatre gestes nommés, une seule famille de courbes, rien de décoratif.

Durées & courbes

Durées

Courbes

Mouvement réduit

Quand l'appareil demande moins de mouvement, les durées de tokens.css tombent à 1 ms et le JavaScript saute ses interpolations.

RespirerLa niche change de taille instantanément.

EmboîterLe meuble apparaît en place, sans descente.

ReclasserLes cartes sont remises dans l'ordre sans glissement.

ScannerLa ligne de balayage disparaît ; les étapes se cochent vite.

Engagements

Contrastes ≥ 4,5:1 (texte) et 3:1 (icônes) dans tous les états ; vérifiés ci-dessus.
Anneau de focus de 3 px sur tout élément interactif : encre sur clair, citron sur encre.
Feuilles en <dialog> natif : piège de focus, Échap, retour du focus.
Poignées de la niche : role="slider", flèches (Maj = ±10).
Le nombre de résultats est annoncé (aria-live) ; la couleur n'est jamais seule porteuse d'information.

Focus

Brancher le design system

Aucun build. Quatre feuilles de style, des chemins relatifs, des classiques <script>. Le dossier se dépose tel quel sur un hébergement statique.

<!-- dans <head> -->
<link rel="stylesheet" href="css/tokens.css">     /* couleurs, typo, espaces, mouvement */
<link rel="stylesheet" href="css/components.css"> /* composants */
<link rel="stylesheet" href="css/art.css">        /* habillage des meubles */

/* usage : jamais de valeur brute */
.ma-carte { background: var(--surface); border-radius: var(--r-l); padding: var(--s-4);
            transition: transform var(--d-base) var(--ease-out); }