Incremental game UI kit: counters, upgrade cards, prestige and offline earnings (SVG, PNG, CSS, light and dark)

This kit is for independent developers and designers of incremental games, those idle games where the numbers keep climbing while the player looks elsewhere, in the browser as well as on mobile. It covers the screens the genre needs: the currency bar with production per second, the big counter that switches from short to scientific notation, generator rows with their buy button, upgrade cards, the bar towards the next milestone, the prestige screen and the offline earnings window when the player comes back. It also works for a prototype or a game jam, when the interface has to read clearly straight away. The kit is generic: no setting, no characters, rounded shapes and a warm palette, in a flat style with no bevel and no gradient, in light and dark. It follows the progression loops of idle games (in French): production, upgrade, reset.

• 40 icons, each in 2 variants (colour and monochrome), in 4 families of 10:
  • Resources and currencies: coin-stack, banknote, diamond, ticket, key, battery, lightbulb, piggy-bank, income, prestige;
  • Generators and production: tap, conveyor, mine-cart, cog, solar-panel, sprout, rocket, pickaxe, gauge, magnet;
  • Upgrades and multipliers: level-up, multiplier, percent, flame, growth, shop, max-level, dice, tiers, potion;
  • Progression (achievements, time, offline, automation): medal, checklist, stopwatch, calendar, gift, offline, robot, locked, target, skill-tree.
• 24 components in HTML and 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 frames, that is 40 per theme: panels, dialog, tooltip and its arrow, upgrade cards in their states (affordable, too expensive, purchased, locked), primary, secondary, ghost and prestige buttons in their states (default, hover, pressed, disabled), tabs, buy amount segments, focus ring, bar track and bar fills (cycle, milestone, prestige), badges and toast.
• 2 themes, light and dark, for the components and the frames.
• 199 design tokens (colours, typography, spacing, radii, borders, sizes), in CSS and in JSON.
• A 23-colour palette, as JSON and as an image.
• 2 SVG sprites holding the 40 icons, one in colour, one in monochrome.
• 1 HTML demo page that puts the components together in light and dark.

In all: 160 SVG files (icons and frames), 520 PNG files (280 for the icons, 240 for the frames) and 713 files.

Archive layout:

• icons/svg/color/ and icons/svg/mono/: one SVG icon per name, in colour and monochrome.
• icons/png/<size>/ and icons/png/mono-white/<size>/: the icon PNGs.
• icons/sprite/: icons-color.svg and icons-mono.svg.
• ui/svg/<theme>/ and ui/png/<theme>/<1x|2x|4x>/: the frames, with ui/nine-slice.json.
• css/: tokens.css and game-ui.css.
• tokens/game-ui.tokens.json, palette/palette.json and palette/palette.png.
• html/index.html and html/components/<component>.html: the demo and one snippet per component.

The zip also contains the licence text, a README file and the credits.

How to use it

• Big numbers: every number sits in a <data class="gu-n" value="…"> element. The exact value stays in value, the visible text follows the chosen notation: short, scientific or exact. The demo shows how to switch from one to another, and tabular figures keep the counters still when their value changes.
• SVG icons: the colour variant is used as is; the monochrome variant is a single path in currentColor, which takes the colour of the text around it. The sprites let you call an icon by name with <use>.
• PNG icons: the colour variant comes in 16, 24, 32, 48 and 64 px; the monochrome variant comes in white, at 32 and 64 px, for dark backgrounds.
• CSS: load tokens.css then game-ui.css, and copy the HTML snippet of the component you need from html/components/. Classes start with gu-, so they do not clash with yours.
• Light and dark: the light theme applies by default, the dark one follows the system setting. To force one, set data-theme="dark" or data-theme="light" on a parent element.
• Tokens: tokens.css (CSS custom properties) and tokens/game-ui.tokens.json (DTCG format) carry the same 199 tokens, to bring them into your tool or your build chain.
• 9-slice frames, for a game engine or a canvas: ui/nine-slice.json gives each frame its minimum size and the width of its fixed corners. Edges stretch along one axis, the centre along both. The PNGs come in 1x, 2x and 4x: multiply the size and the corners by the scale. The tooltip arrow (tooltip-arrow) is a fixed image, not to be stretched.

Measured accessibility

• Legibility at 16 px: each icon was rendered at 16 px and compared with all the others, to rule out silhouettes that are too close, then checked by eye.
• Icon contrast: the base colour of each icon reaches at least 3.37:1 on the panel background in light, and 4.09:1 in dark.
• Text contrast: component texts, in all their states, reach at least 4.86:1 in light as in dark. The focus ring reaches 3.28:1 to 4.58:1.
• States: a disabled button is disabled through an attribute, and a cost that is too high, a purchased or locked upgrade, automatic buying on or off are written out in words, not only shown by a colour.
• Demo page: HTML validated with no error, along with the 24 snippets; no violation reported by the axe audit tool; 100 for accessibility in the Lighthouse audit.

Good to know

• The shop’s strategy game kit uses the same gu- prefix: do not load both stylesheets in the same page, their classes would clash.
• The --radius-1 token (2 px) is not used by any component. It is the corner radius of the icons: reuse it if you draw your own.
• The button-ghost-default and button-ghost-disabled frames are transparent by design (empty SVG and PNG). At rest, the ghost button has neither background nor border: only its text shows.
• Hairlines (buy amount track, toggle, tab strip) are drawn without borders: they do not shift the content and stay aligned on the 4 px grid.
• The width of some components relies on calc-size(), which only Chromium-based browsers support. In the others, it falls back to the content width, with no overflow found at 375 px under WebKit. Firefox has not been tested.
• The Rubik typeface is not included in the zip: the demo page loads it from an online font service. For an offline game or a production site, host it yourself (it is under the SIL OFL 1.1 licence).
• The demo texts are in English.
• The kit contains no characters and no illustrations, and no mockup file for a design tool: import the SVGs into yours.

Production and AI

The geometry of the icons and frames, the tokens, the CSS, the HTML and the generation scripts were produced with an AI assistant (Claude Code), then reviewed and checked: hash of every file, palette and grid verified, icon legibility at 16 px, contrast in light and dark, HTML validation, accessibility audit, sheets reviewed by eye. No image was produced by an image generator: every file comes from the same code.

• SVG: 40 colour icons, 40 monochrome ones, 80 frames and 2 sprites, usable in a browser and in most design tools.
• PNG: icons in 16, 24, 32, 48 and 64 px, frames in 1x, 2x and 4x, on a transparent background, for a game engine or a canvas.
• CSS: tokens.css and game-ui.css, with no dependency and no build step.
• HTML: the 24 component snippets and the demo page.
• JSON: the tokens in DTCG format, the palette and the description of the 9-slice frames.

The kit is sold under the commercial licence (terms in French): you can use it in your personal and professional projects, including for your clients and in the games you sell or release, but you may not resell or redistribute the files, on their own or in another kit, even for free. The Rubik typeface, referenced by a link and never included, is under the SIL OFL 1.1 licence.

• What idle games teach product UX (in French)
• Browser management games: the economic loop compared (in French)
• The strategy game UI kit follows the same construction (icons in two variants, 9-slice frames, tokens, light and dark) with resource, construction and map icons, another palette and another typeface. Its icons repeat none of this kit’s.
• The pixel art UI and reward effects animate coin pickups, chest openings or level-ups, in another style: pixel art.

1.0.0 (11 November 2026): first version.