Le système
8 couleurs · 9 rôles de texte · 1 rougeTout 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 panneau--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.
Trois formes, et rien d’autre. La marque est le seul cercle du système ; l’écusson ne nomme qu’une pièce de la maison, et ne lui dispute rien.
Trois variantes, deux tailles. Le primaire s’assombrit au survol au lieu de rougir — le rouge est déjà pris.
Une carte au repos, une carte qui répond au survol. Aucune ombre, nulle part.
Fond « raised », filet neutre, deux pixels de rayon.
Survole-moi : le filet s’éclaircit. C’est toute l’élévation du système.
Un filet vertical au lieu d’une boîte, quand le contenu n’a pas besoin d’être enfermé.
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.
`--radius-sharp` vaut 2 px et c’est le plafond. Le seul cercle du système est le sceau.
Une carte survolée passe de `--line-neutral` à `--line-steel`. Il n’y a pas une seule `box-shadow` dans la maison.
La braise dit le direct, le focus, l’onglet actif et l’erreur. 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 ou un filet de 0,75 px. 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.