terrain-ui

Terrain UI

Ces règles ont été distillées à partir de l'interface d'un jeu à thème industriel, en ne conservant que ce qui s'est avéré utile pour des pages web ordinaires. Le skill ne contient aucun actif de jeu et ne tente pas de recréer le jeu.

Lisez l'intégralité de ce fichier avant de commencer. Ouvrez assets/terrain.css pour les couleurs et le balisage des composants, utilisez assets/contours.js pour l'arrière-plan de contours, et consultez references/research.md pour savoir d'où vient chaque règle et pourquoi certains éléments ont été omis.

Huit règles

1. Une seule couleur d'accent, deux significations : l'emplacement actuel et l'action principale. Par défaut #FEEC00, échantillonnée à partir de l'onglet sélectionné du jeu. Utilisez-la uniquement en remplissage, avec un texte de couleur encre par-dessus ; dans le thème clair, ne l'utilisez jamais pour des lignes ou du texte. La même chose s'applique au survol : seul le bouton principal s'emplit de l'accent au survol. Les liens, les boutons en forme de pilule et les lignes de liste s'éclaircissent simplement ou obtiennent un soulignement plus épais.
2. La sélection dépend de la direction :
   • Listes verticales : le survol éclaircit la ligne ; la ligne sélectionnée devient sombre avec un texte clair, et une barre d'accent apparaît sur la gauche.
   • Onglets horizontaux : l'onglet sélectionné se remplit entièrement de l'accent. Lors du changement, l'ancien bloc se rétracte et le nouveau s'ouvre latéralement depuis son centre.
3. La forme du bouton indique la priorité : l'action principale est un bloc dont le coin inférieur droit est coupé ; les actions secondaires sont des pilules avec une icône ronde à l'extrémité droite. Au maximum une action principale par groupe de boutons.
4. Placez un chemin en haut à gauche de chaque page : // Travail / À propos de moi. Les niveaux auxquels vous pouvez revenir sont des liens.
5. Les numéros sont décoratifs, et ils doivent être vrais : définissez les ID, dates et compteurs actuel / total dans des chiffres larges tabulaires. N'inventez jamais de données et n'ajoutez pas de texte technique factice. La même règle s'applique au texte : ne décrivez un produit (fonctionnalités, portée prise en charge, installation) qu'à partir de ce que l'utilisateur a fourni ou de la documentation du projet, et respectez leur portée. Lorsqu'il n'y a pas de source, écrivez un texte provisoire tel que [TODO: ...] au lieu de le compléter.
6. Affichez les touches de raccourci : par exemple ← → à côté des boutons de page. Affichez-les uniquement sur les appareils dotés d'un pointeur fin.
7. Arrière-plan : lignes de contour fermées : un bloc dans chacun des deux coins, opacité de 6 % à 9 %, toutes les cinquièmes lignes plus épaisses, non animées.
8. Mouvement court et ferme : survol 90 ms, sélection 110 à 120 ms, courbe cubic-bezier(.2,0,0,1). Désactivez tout lorsque le système demande de réduire les mouvements.

Choisissez d'abord un type de page

Décidez du type de page que vous construisez avant de commencer. Les trois partagent les mêmes couleurs et composants ; ils diffèrent par leur audace. En cas de doute, choisissez Lecture.

Type	Utilisé pour	Comment	Équivalent dans le jeu
Lecture	Articles, détails de projet, paramètres, aide	Une colonne de texte, environ 65 caractères latins ou 38 CJK de large ; accent uniquement sur l'élément de navigation actuel et le bouton principal ; contours facultatifs	Encyclopédie, archives
Vitrine	Pages d'accueil, portfolios, pages d'atterrissage	Grands titres larges, police de contour autorisée ; grands chiffres en arrière-plan ; contours activés ; le contenu peut apparaître bloc par bloc	Menu principal, boutique
Atelier	Pages d'administration, tableaux de bord, outils, paramètres d'extension	Navigation en liste verticale à gauche, onglets en haut ; principalement des tableaux, des chiffres et des formulaires ; pas de grands titres ; mouvement uniquement en réponse aux actions	Inventaire, équipement, liste d'amis

Composants

Tous se trouvent dans assets/terrain.css avec le préfixe tu-. examples/demo.html montre chacun d'eux.

Composant	Classes	Notes
Titre de chemin	tu-crumb	Règle 4
Liste verticale	tu-list	Marquez l'élément actuel avec aria-current
Onglets horizontaux	tu-tabs tu-tab	Marquez l'onglet actuel avec aria-selected="true" ou aria-current
Bouton principal / secondaire	tu-btn / tu-btn--pill + tu-btn__icon	Règle 3
Indice de touche	tu-kbd	Règle 6
Ligne de champ	tu-fields tu-sep	Séparez les métadonnées avec une barre verticale │
Panneau	tu-panel	Un bloc plat : pas de rayon, d'ombre ou de bordure
Tableau	tu-table-wrap tu-table	Petites étiquettes d'en-tête larges ; alignez à droite les colonnes numériques avec tu-right ; défilement latéral sur écrans étroits
Champ de saisie	tu-field tu-input tu-hint	Au focus, le soulignement s'épaissit et une barre d'accent apparaît sur la gauche
Erreur	tu-error, plus aria-invalid="true" sur le champ	Un petit carré d'accent et une phrase expliquant comment la corriger ; pas de texte rouge
Interrupteur	tu-switch	« On » est un état actif, donc la piste se remplit de l'accent
Dialogue	<dialog class="tu-dialog">	Les boutons se trouvent dans une barre de pied : un principal, annuler en pilule ; il apparaît net à partir d'un flou
Toast	tu-toast	Une barre sombre avec une barre d'accent sur la gauche ; glisse depuis la gauche et disparaît après 2 secondes
État vide	tu-empty	Une boîte en pointillés avec une phrase expliquant ce qui apparaîtra ici, éventuellement un bouton principal
Chargement	tu-progress, plus tu-progress--busy en attente	Une ligne de 2 px ; lorsque la progression est connue, définissez --tu-value et affichez le pourcentage

Pas de rouge. Les avertissements, échecs et états en attente utilisent le petit carré d'accent avec du texte encre. Placez les actions irréversibles telles que la suppression derrière un dialogue de confirmation.

Pour tout ce qui ne figure pas dans ce tableau, déduisez-le des huit règles : si c'est « actuel » ou « principal » détermine s'il peut utiliser l'accent ; si c'est principal ou secondaire détermine bloc ou pilule ; si cela peut être cliqué détermine s'il s'éclaircit au survol.

Mouvement

Action	Durée	Comment
Éclaircissement au survol	90 ms	Transition de couleur d'arrière-plan
Barre de sélection de liste apparaît	110 ms	scaleY(0 → 1)
Changement d'onglet	120 ms	Bloc d'accent scaleX(0 → 1), s'ouvrant depuis le centre
Survol du bouton principal	280 ms	L'accent apparaît depuis la gauche
Changement de page	Sortie 320 ms, entrée 480 ms	L'ancienne page se floute et disparaît ; la nouvelle page apparaît bloc par bloc, espacés de 100 ms

À ne pas faire

• Marqueurs invisibles (points rouges, badges NOUVEAU) : dans le jeu, ils poussent les joueurs à collecter des récompenses ; sur un portfolio ou un site ordinaire, ils ressemblent à du harcèlement.
• Verre dépoli, déchirures de glitch, lignes de balayage, lueur, grands remplissages d'accent, cartes arrondies avec ombres.
• Éléments exclusifs au jeu tels que menus carrousel 3D, illustrations de personnages et barres de couleur de rareté.
• Tout actif officiel du jeu : captures d'écran, logos, icônes, illustrations de personnages, texte ou fichiers de police officiels.

Typographie

• Texte et chiffres latins : Saira (open source, SIL OFL). Étiquettes étirées à 125 %, tout en majuscules, espacement de 0,06 em. Le site officiel n'ajoute pas d'espacement à ses grandes étiquettes ; un petit espacement est conservé ici pour les petites tailles.
• Chinois : Noto Sans SC ou la police sans système. Pas de police serif ou brush pour le corps du texte.
• Tous les chiffres sont tabulaires (font-variant-numeric: tabular-nums).

Livraison d'un fichier HTML unique

• Utilisez les classes terrain.css telles quelles ; n'ajoutez pas de surcharges au niveau de la page qui changent leurs couleurs. Si un changement est nécessaire, le composant a un problème et doit être signalé au skill.
• Placez terrain.css dans un élément <style> et contours.js dans un élément <script>. Avant d'intégrer un script, assurez-vous qu'il ne contient pas de </script> littéral ; si c'est le cas, écrivez-le </script>.
• Si la page doit fonctionner hors ligne, intégrez Saira en tant que data URI woff2 dans @font-face ; sinon, liez Google Fonts et conservez les polices de secours.

Liste de contrôle avant livraison

• Un type de page a été choisi et les tailles de titres de différents types ne sont pas mélangées sur une même page.
• L'accent apparaît uniquement sur l'emplacement actuel et les actions principales ; il n'y a pas de rouge sur la page.
• Chaque groupe de boutons a au maximum un bouton principal en bloc ; les autres sont des pilules.
• Les listes verticales et les onglets horizontaux utilisent leurs propres styles de sélection.
• Chaque page a un titre de chemin //.
• Tous les chiffres sont des données réelles ; chaque affirmation sur un produit a une source et n'exagère pas sa portée.
• Les thèmes clair et foncé ont été vérifiés ; rien ne défile latéralement à la largeur d'un téléphone (environ 400 px).
• Le focus clavier est visible ; tout est immobile avec la réduction de mouvement activée.
• Aucun actif officiel du jeu n'est utilisé.

Fichiers

Fichier	Contenu
assets/terrain.css	Jetons de couleur (clair et foncé) et tous les composants
assets/contours.js	Arrière-plan de contours, une ligne à configurer : TerrainContours.mount(canvas)
examples/demo.html	Chaque composant sur une page, prêt à être ouvert
examples/screenshots/	La page des composants en mode clair, foncé, largeur téléphone et le dialogue
references/research.md	Notes de recherche : ce qui a été observé, ce qui a été conservé, ce qui a été omis