Kit d'interface pour jeu incrémental : compteurs, cartes d'amélioration, prestige et gains hors ligne (SVG, PNG, CSS, clair et sombre)

Ce kit s’adresse aux développeurs indépendants et aux designers de jeux incrémentaux, ces jeux idle où les nombres grimpent pendant que le joueur regarde ailleurs, dans le navigateur comme sur mobile. Il couvre les écrans propres au genre : la barre des monnaies et leur production par seconde, le grand compteur qui passe de la notation courte à la notation scientifique, les rangées de générateurs avec leur bouton d’achat, les cartes d’amélioration, la barre vers le prochain palier, l’écran de prestige et la fenêtre de gains hors ligne au retour du joueur. Il sert aussi pour un prototype ou une game jam, quand l’interface doit être lisible tout de suite. Le kit est générique : aucun univers, aucun personnage, des formes rondes et une palette chaude, dans un style plat, sans relief ni dégradé, en clair et en sombre. Il prolonge les boucles de progression des jeux idle : production, amélioration, remise à zéro.

• 40 icônes, chacune en 2 variantes (couleur et monochrome), réparties en 4 familles de 10 :
  • Ressources et monnaies : coin-stack, banknote, diamond, ticket, key, battery, lightbulb, piggy-bank, income, prestige ;
  • Générateurs et production : tap, conveyor, mine-cart, cog, solar-panel, sprout, rocket, pickaxe, gauge, magnet ;
  • Améliorations et multiplicateurs : level-up, multiplier, percent, flame, growth, shop, max-level, dice, tiers, potion ;
  • Progression (succès, temps, hors ligne, automatisation) : medal, checklist, stopwatch, calendar, gift, offline, robot, locked, target, skill-tree.
• 24 composants en HTML et CSS : panel, panel-titled, dialog, currency-bar, counter, generator-row, buy-amount, upgrade-card, multiplier-badge, progress-bar, milestone-bar, prestige-screen, prestige-confirm, offline-earnings, achievement, toast, button, icon-button, tabs, tooltip, tooltip-rich, badge-counter, badge-status, auto-toggle.
• 80 cadres, soit 40 par thème : panneaux, dialogue, infobulle et sa pointe, cartes d’amélioration dans leurs états (abordable, trop chère, achetée, verrouillée), boutons primary, secondary, ghost et prestige dans leurs états (repos, survol, appui, désactivé), onglets, segments du choix de quantité, anneau de focus, piste et remplissages de barre (cycle, palier, prestige), badges et notification.
• 2 thèmes, clair et sombre, pour les composants et les cadres.
• 199 tokens de design (couleurs, typographie, espacements, rayons, bordures, tailles), 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 : 160 fichiers SVG (icônes et cadres), 520 fichiers PNG (280 pour les icônes, 240 pour les cadres) et 713 fichiers.

Organisation de l’archive :

• icons/svg/color/ et icons/svg/mono/ : une icône SVG par nom, en couleur et en monochrome.
• icons/png/<taille>/ et icons/png/mono-white/<taille>/ : les PNG des icônes.
• icons/sprite/ : icons-color.svg et icons-mono.svg.
• ui/svg/<thème>/ et ui/png/<thème>/<1x|2x|4x>/ : les cadres, avec ui/nine-slice.json.
• css/ : tokens.css et game-ui.css.
• tokens/game-ui.tokens.json, palette/palette.json et palette/palette.png.
• html/index.html et html/components/<composant>.html : la démo et un extrait par composant.

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

Comment l’utiliser

• Grands nombres : chaque nombre s’affiche dans un élément <data class="gu-n" value="…">. La valeur exacte reste dans value, le texte visible suit la notation choisie : courte, scientifique ou exacte. La démonstration montre comment basculer de l’une à l’autre, et les chiffres tabulaires gardent les compteurs immobiles quand leur valeur change.
• 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 199 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.

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, puis relue à l’œil.
• Contraste des icônes : la couleur de base de chaque icône atteint au moins 3,37:1 sur le fond des panneaux en clair, et 4,09:1 en sombre.
• Contraste des textes : les textes des composants, dans tous leurs états, atteignent au moins 4,86:1 en clair comme en sombre. L’anneau de focus atteint de 3,28:1 à 4,58:1.
• États : un bouton désactivé l’est par un attribut, et un coût trop élevé, une amélioration achetée ou verrouillée, l’achat automatique activé ou non sont écrits en toutes lettres, pas seulement signalés par une couleur.
• Page de démonstration : HTML validé sans erreur, avec les 24 extraits ; aucune violation relevée par l’outil d’audit axe ; 100 en accessibilité à l’audit Lighthouse.

À savoir

• Le kit de stratégie de la boutique utilise le même préfixe gu- : ne chargez pas les deux feuilles de style dans la même page, leurs classes entreraient en collision.
• 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.
• Les filets fins (piste du choix de quantité, interrupteur, bandeau des onglets) sont tracés sans bordure : ils ne décalent pas le contenu et restent alignés sur la grille de 4 px.
• 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 Rubik n’est pas incluse dans le zip : la page de démonstration la charge depuis un service de polices en ligne. Pour un jeu hors ligne ou 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, 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, 80 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 24 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 Rubik, référencée par un lien et jamais incluse, est sous licence SIL OFL 1.1.

• Ce que les jeux idle apprennent à l’UX produit
• Jeux de gestion par navigateur : la boucle économique comparée
• Le kit d’interface pour jeu de stratégie suit la même construction (icônes en deux variantes, cadres 9-slice, tokens, clair et sombre) avec des icônes de ressources, de construction et de carte, une autre palette et une autre police. Ses icônes ne reprennent aucune de celles de ce kit.
• Les effets d’interface et de récompense en pixel art animent le ramassage de pièces, l’ouverture de coffre ou la montée de niveau, dans un autre style : le pixel art.

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