Le système
8 couleurs · 9 rôles de texte · 1 rouge
Tout le site est bâti là-dessus. Rien n’est recopié sur cette page : chaque aplat lit son jeton et chaque composant est le vrai. Bascule le thème dans l’en-tête — la moitié d’en bas suit, l’autre non, et c’est exactement la frontière.
Huit couleurs, invariantes. Elles ne connaissent pas le thème : ce sont les pigments, pas la peinture.
--hyko-minuit--hyko-charbon--hyko-ardoise--hyko-beton--hyko-acier--hyko-cendre--hyko-ivoire--hyko-braiseLa seule couche qu’un composant a le droit d’employer, et la seule qui bascule. Un composant qui écrit « --hyko-ivoire » se trompe : il veut dire « --text-primary ».
--surface-pageLe fond de la page--surface-raisedUne carte, un rail, la bande--surface-card-survolLa carte survolée--surface-pastilleL’actif dans une pilule--surface-blockUn bloc dans un bloc--surface-fieldUn champ de saisie--surface-glassUn voile sur ce qu’il y a dessous--surface-sealLe disque du sceau--text-primaryCe qu’on vient lire--text-secondaryCe qui accompagne--text-accentLes étiquettes, les micro-lignes--text-signalCe qui appelle — jamais décoratif--text-on-invertSur un aplat inversé--line-neutralLa séparation au repos--line-steelLa même, au survol--line-signalL’onglet actif, l’erreur--state-focusLe contour de focus — toujours rouge--state-invert-bgLe fond d’un bouton au survol--state-disabled-fgCe qui ne répond plus--state-liveLe point du directArchivo pour ce qui titre, Inter pour ce qui se lit, Space Mono pour ce qui étiquette. Deux rôles en capitales, pas trois.
Deux formes, et rien d’autre. Le sceau est le seul disque du système ; le losange sépare, et c’est tout.
Trois variantes, deux tailles. Le primaire s’assombrit au survol au lieu de rougir — le rouge est déjà pris.
Tout ce qu’on manipule : un rail gris au filet fin, l’actif posé dans une pastille. Le même dessin pour les onglets de filtre, le thème et les étiquettes.
Un aplat au repos, un demi-cran de plus au survol. Ni filet ni ombre.
Fond « raised », sans filet, deux pixels de rayon.
Survole-moi : l’aplat fonce d’un demi-cran. C’est toute l’élévation du système.
Quand le contenu n’a pas besoin d’être enfermé, il se pose sur le sol, et l’espace autour suffit.
Le focus est le seul rouge garanti de l’interface. Il ne se retire jamais.
Une apparition joue une fois, jamais en boucle, et se tait entièrement si le système demande moins d’animations. Recharge la page pour les revoir.
.hyko-fade-up.hyko-fade-in.hyko-fade-left.hyko-fade-right.hyko-fade-down.hyko-zoom-inElles ne vivaient jusqu’ici qu’en commentaires de CSS, où personne ne va les lire.
Boutons (le rouge d’action compris), onglets, sélecteur de thème, étiquettes, champ de recherche et boutons d’icône prennent la pilule (`--radius-pill`). Photos, cartes, vignettes et vidéos restent anguleuses, 2 px au plus (`--radius-sharp`). Deux exceptions : la case à cocher reste carrée, pour se distinguer d’un choix unique, et la zone de texte sur plusieurs lignes aussi. Ce qui flotte au-dessus de la page — la palette de recherche, un menu déroulant — prend des coins doux (`--radius-flottant`), assez ronds pour que ses options en pilule s’y logent.
Une zone se tient par son fond `--surface-raised`, pas par une bordure. Au survol, elle fonce d’un demi-cran (`--surface-card-survol`). Dans un aplat, un champ est un creux : son fond suffit, et le filet rouge n’apparaît qu’au focus. Un outil, ce sont deux aplats côte à côte — le résultat et les réglages — et non un cadre coupé en deux. Il n’y a pas une seule `box-shadow` dans la maison.
Photos, vignettes, bannières et vidéos se posent nues, à 2 px de rayon. Au survol, c’est l’image qui répond, d’un léger rapproché. Seuls le papier des tirages de l’accueil et le cadre de navigateur d’une fiche projet gardent un bord : ce sont des objets, pas des images.
Les listes n’ont plus de filet entre leurs lignes : l’espace les sépare, le survol pose un aplat. Serré dans un groupe, large entre deux : les photos d’une sortie se touchent presque (6 px), deux sorties sont à 64 px. Il reste un filet sous l’en-tête, un au-dessus du pied de page, et le contour fin des pilules.
La braise dit le direct, le focus et l’erreur. L’onglet actif est une pastille grise. Un bouton survolé devient noir ou ivoire — jamais plus rouge.
`hyko-label` et `hyko-micro`. Tout le reste se lit en casse normale.
Un séparateur est un losange. Une icône est un tracé, pas un caractère.
Les apparitions ont `fill-mode: both` et un délai indexé par `--i`. La seule boucle du site est le point du direct.