Kit d'interface pour jeu de stratégie : 40 icônes de ressources, panneaux, barres et boutons (SVG, PNG, CSS, clair et sombre)

Ce kit s’adresse aux développeurs et aux designers de jeux de stratégie ou de gestion qui se jouent dans le navigateur : la barre de ressources en haut de l’écran, la fiche d’un bâtiment avec son coût et son minuteur, les files de construction, les onglets d’alliance. Il sert aussi pour un prototype ou une game jam, quand l’interface doit être lisible tout de suite sans y passer des jours. Tout est dessiné dans un style plat, sans relief ni dégradé, sur une même grille, en clair et en sombre. Les icônes de ressources se prêtent bien à la boucle économique d’un jeu de gestion : production, stockage, coûts.

• 40 icônes, chacune en 2 variantes (couleur et monochrome), réparties en 4 familles :
  • Ressources (16) : metal, crystal, energy, population, food, wood, stone, gold, research, time, water, fuel, gem, mana, influence, happiness ;
  • Construction (8) : build, upgrade, production, storage, queue, speed-up, repair, demolish ;
  • Militaire (8) : attack, defense, army, scout, siege, training, loot, rally ;
  • Carte et social (8) : map, territory, alliance, diplomacy, message, ranking, event, quest.
• 19 composants en HTML et CSS : panel, panel-inset, panel-titled, dialog, building-card, resource-bar, progress-bar, capacity-bar, segmented-bar, timer, button, icon-button, tabs, tooltip, tooltip-rich, badge-level, badge-counter, badge-status, cost-list.
• 68 cadres, soit 34 par thème : panneaux, dialogue, infobulle et sa pointe, boutons primary, secondary, ghost et danger dans leurs états (repos, survol, appui, désactivé), onglets, anneau de focus, piste et remplissages de barre (progression, capacité, alerte, plein), badges.
• 2 thèmes, clair et sombre, pour les composants et les cadres.
• 174 tokens de design (espacements, rayons, bordures, typographie, couleurs), en CSS et en JSON.
• Une palette de 23 couleurs, en JSON et en image.
• 2 sprites SVG qui réunissent les 40 icônes, l’un en couleur, l’autre en monochrome.
• 1 page HTML de démonstration qui assemble les composants en clair et en sombre.

En tout : 148 fichiers SVG, 484 fichiers PNG (280 pour les icônes, 204 pour les cadres) et 660 fichiers.

Organisation de l’archive :

icons/svg/color/<nom>.svg
icons/svg/mono/<nom>.svg
icons/png/<taille>/<nom>.png
icons/png/mono-white/<taille>/<nom>.png
icons/sprite/icons-color.svg
icons/sprite/icons-mono.svg
ui/svg/<thème>/<cadre>.svg
ui/png/<thème>/<1x|2x|4x>/<cadre>.png
ui/nine-slice.json
css/tokens.css
css/game-ui.css
tokens/game-ui.tokens.json
palette/palette.json
palette/palette.png
html/index.html
html/components/<composant>.html

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

• Icônes SVG : la variante couleur se pose telle quelle ; la variante monochrome est un seul tracé en currentColor, qui prend la couleur du texte autour d’elle. Les sprites permettent d’appeler une icône par son nom avec <use>.
• Icônes PNG : la variante couleur existe en 16, 24, 32, 48 et 64 px ; la variante monochrome existe en blanc, en 32 et 64 px, pour les fonds sombres.
• CSS : chargez tokens.css puis game-ui.css, et copiez l’extrait HTML du composant voulu depuis html/components/. Les classes commencent par gu-, pour ne pas entrer en conflit avec les vôtres.
• Clair et sombre : le thème clair s’applique par défaut, le sombre suit le réglage du système. Pour l’imposer, posez data-theme="dark" ou data-theme="light" sur un élément parent.
• Tokens : tokens.css (propriétés personnalisées CSS) et tokens/game-ui.tokens.json (format DTCG) portent les mêmes 174 tokens, pour les reprendre dans votre outil ou votre chaîne de build.
• Cadres 9-slice, pour un moteur de jeu ou un canvas : ui/nine-slice.json donne pour chaque cadre sa taille minimale et la largeur de ses coins fixes. Les bords s’étirent sur un axe, le centre sur les deux. Les PNG existent en 1x, 2x et 4x : multipliez la taille et les coins par l’échelle. La pointe d’infobulle (tooltip-arrow) est une image fixe, à ne pas étirer.
• Chiffres : la démonstration utilise la police Barlow Semi Condensed et ses chiffres tabulaires, pour que les compteurs de ressources ne bougent pas quand leur valeur change.

Accessibilité mesurée

• Lisibilité à 16 px : chaque icône a été rendue à 16 px et comparée à toutes les autres, pour écarter les silhouettes trop proches.
• Contraste des icônes : la couleur de base de chaque icône atteint au moins 3:1 sur le fond des panneaux, en clair comme en sombre ; la variante monochrome, dans la couleur du texte, atteint 15,9:1.
• Contraste des textes : 74 textes par thème (boutons, onglets, badges, coûts, infobulles), désactivés compris, atteignent au moins 4,5:1. L’anneau de focus fait 2 px, à 3,64:1 en clair et 4,38:1 en sombre.
• États : un bouton désactivé l’est par l’attribut disabled, et un coût insuffisant est écrit en toutes lettres, pas seulement signalé par une couleur.
• Page de démonstration : aucune violation relevée par l’outil d’audit axe, en clair comme en sombre, et 100 en accessibilité à l’audit Lighthouse.

À savoir

• Le jeton --radius-1 (2 px) n’est utilisé par aucun composant. C’est le rayon des angles des icônes : reprenez-le si vous dessinez les vôtres.
• Les cadres button-ghost-default et button-ghost-disabled sont transparents par conception (SVG et PNG vides). Au repos, le bouton ghost n’a ni fond ni bordure : seul son texte s’affiche.
• La largeur de certains composants s’appuie sur calc-size(), que seuls les navigateurs basés sur Chromium prennent en charge. Dans les autres, elle retombe sur la largeur du contenu, sans débordement constaté à 375 px sous WebKit. Firefox n’a pas été testé.
• La police n’est pas incluse dans le zip : la page de démonstration la charge depuis un service de polices en ligne. Pour un site en production, hébergez-la vous-même (elle est sous licence SIL OFL 1.1).
• Les textes de la démonstration sont en anglais.
• Le kit ne contient ni personnages ni illustrations de bâtiments, et pas de fichier de maquette pour un logiciel de design : importez les SVG dans le vôtre.

Fabrication et IA

La géométrie des icônes et des cadres, les tokens, le CSS, le HTML et les scripts de génération ont été produits avec un assistant d’IA (Claude Code), puis relus et contrôlés : empreinte de chaque fichier, palette et grille vérifiées, lisibilité des icônes à 16 px, contrastes en clair et en sombre, validation du HTML, audit d’accessibilité, planches relues à l’œil. Aucune image n’a été produite par un générateur d’images : chaque fichier sort du même code.

• SVG : 40 icônes en couleur, 40 en monochrome, 68 cadres et 2 sprites, utilisables dans un navigateur et dans la plupart des outils de design.
• PNG : icônes en 16, 24, 32, 48 et 64 px, cadres en 1x, 2x et 4x, à fond transparent, pour un moteur de jeu ou un canvas.
• CSS : tokens.css et game-ui.css, sans dépendance ni étape de build.
• HTML : les 19 extraits de composants et la page de démonstration.
• JSON : les tokens au format DTCG, la palette et la description des cadres 9-slice.

Le kit est vendu avec la licence commerciale : vous pouvez l’utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les jeux que vous vendez ou diffusez, mais pas revendre ni redistribuer les fichiers, seuls ou dans un autre kit, même gratuitement. La police Barlow Semi Condensed, référencée par un lien et jamais incluse, est sous licence SIL OFL 1.1.

• Jeu par navigateur en 2026 : le guide UX complet
• La loi de Hick et les menus des jeux de gestion

1.0.0 (11 novembre 2026) : première version.