Game UI Toolkit · v3

Ship menus and HUDs people actually read.

HUDCraft is a game-interface studio in Belém. We packed the patterns we use on client builds into a drop-in kit — components, layout templates, tokens and plain-language guidelines. Grab it, wire it into your game, ship a cleaner interface this sprint.

120+ components Figma + code From R$690
01

What's inside the pack

One download, four folders. Every part is built the same way we build for clients — flat, legible, and easy to restyle to your art direction.

Components

120+ interface parts

Health and stamina bars, minimaps, quest logs, dialogue boxes, inventory grids, ammo counters, buttons, toggles, sliders, tab strips, tooltips and modal shells. Each in idle, hover, focus and disabled states.

  • HUD widgets
  • Menu controls
  • Inventory & loadout
  • Dialog & prompts
120+
Templates

18 full-screen layouts

Main menu, pause, settings with tabbed panels, inventory, map, character sheet, shop, save/load, results screen and a five-step onboarding flow — all laid out on the same grid so screens feel like one product, not ten.

Close-up of blocky game menu and settings screen templates from the HUDCraft toolkit
Tokens

40 design tokens

Color, spacing, type scale and radius as named variables. Swap the accent once, the whole kit re-skins.

Guidelines

A 46-page field guide

Why each pattern is shaped the way it is, what to keep, and the traps that make HUDs hard to read.

Formats

Figma + exportable assets

A tidy Figma library with variants and auto-layout, plus SVG and 9-slice PNG exports and a CSS/UXML token sheet you can paste into Unity UI Toolkit or a web build.

  • Figma library (variants + auto-layout)
  • SVG & 9-slice PNG exports
  • CSS / UXML token sheet
Onboarding

First-run flow kit

Coach marks, tooltip sequences, an empty-state set and a five-screen first-session walkthrough — the stuff most teams bolt on last and regret.

Flat neo-brutalist game HUD mockup with health bars, a minimap and inventory slots in blue and yellow blocks
02

Who grabs this kit

Built for teams where a full interface audit is overkill but "figure out the UI yourself" clearly isn't working.

  1. 01

    Two-person indie teams

    A programmer and an artist with no dedicated interface designer. You want menus that look intentional without inventing a system from a blank canvas.

  2. 02

    Game jam & prototype crews

    You need a readable HUD by Sunday. Drop in the components, restyle the tokens, and the interface stops being the reason your build feels rough.

  3. 03

    Studios between hires

    Your one UI person is buried. Hand the team a shared library so screens stay consistent while you sort out the roadmap.

  4. 04

    Solo devs shipping their first title

    You can build systems but freeze at the settings screen. This is the missing manual, with the parts already drawn.

Teams that shipped with it

Small crews and solo devs who dropped the components straight into a build. Pinned notes, exact words.

shipped it
Diego Fontana solo dev · Rosario, AR

I bought this on a Thursday and had a real pause menu, settings and inventory in my build by Sunday. Set four tokens, pasted the CSS sheet, done — no fighting a design system I don't understand. The field guide settled three arguments I was having with myself about minimap size. Best R$690 I've spent on this project.

★★★★★
Ingrid Møller tech artist · Copenhagen

The 9-slice exports and UXML token sheet dropped into Unity UI Toolkit with basically zero cleanup. Variants and auto-layout in the Figma file are done properly, so restyling to our palette took an afternoon, not a week.

grab & go
Rafael Sousa programmer, 2-person team · Recife

We're a programmer and an artist with nobody to own the UI. This is the interface designer we couldn't hire. Menus finally look intentional.

★★★★★
Camila Restrepo jam team lead · Medellín

Had a readable HUD by Sunday of the jam, which never happens for us. The onboarding flow kit alone — coach marks and the empty states — saved the first-run experience we always cut for time. Judges actually mentioned the interface.

03

From download to running build

No onboarding call, no license server. Four steps and the kit is live in your project.

Unpack

Open the download. Components, templates, tokens and the field guide are sorted into labelled folders — nothing to hunt for.

Set your tokens

Change four variables — accent, base, type and spacing — and the whole library re-skins to match your game in one pass.

Drop in screens

Copy a template — pause, inventory, settings — into your build and swap the placeholder content for yours. The grid keeps it aligned.

Read the guide

When you hit a call — how big should the minimap be, where does the prompt sit — the field guide has a short, opinionated answer.

Flat blocky game interface components — buttons, sliders and toggles with thick borders and hard shadows
Made by a working studio

Patterns tested on real games, not a mood board

HUDCraft designs and reviews menus, HUDs and onboarding for studios that know their interface is holding the game back. Every part in this kit started as a fix on a client build — a health bar players kept missing, a settings screen nobody could navigate, a first session that lost people before the tutorial ended.

We pulled the patterns that kept working, stripped out the client-specific styling, and left a clean base you can bend to your own art. That's the whole idea: give a small team the head start a dedicated interface designer would, without the retainer.

The kit is a living product. Buy once and you get updates for the version you bought — new components, extra templates, fixes when players (or you) find a rough edge.

Belém, Pará · working across Brazilian time zones

Small design team reviewing interface sketches and sticky notes in a studio
The studio behind the kit — Av. Presidente Vargas, Belém
04

Two ways to buy

Grab the toolkit on its own, or add a review where a designer looks at your actual build and hands back a prioritized fix list.

Most teams start here Toolkit

Game UI Toolkit

R$690one-time · updates for this version included
  • 120+ components in four states
  • 18 full-screen layout templates
  • 40 named design tokens
  • 46-page written field guide
  • Figma library + SVG / PNG / CSS exports
  • Commercial licence for one game team
Get the toolkit
Best for a build in progress Toolkit + review

Toolkit & Design Review

R$1,890toolkit + one review round · 5 business days
  • Everything in the Game UI Toolkit
  • Heuristic review of your live interface
  • Written report with annotated screens
  • Prioritized redesign directions
  • One 45-minute walkthrough call
  • Two weeks of follow-up questions by email
Get toolkit + review

Prices in Brazilian reais (R$). Payment is arranged by invoice after you order — the form below never asks for card details.

05

Straight answers

The questions teams ask before they buy. If yours isn't here, write to us — we reply in a day.

Which engines does the kit work with?

The components are engine-agnostic vectors and 9-slice art, so they render anywhere. The token sheet ships as CSS and UXML, which pastes straight into Unity's UI Toolkit or a web build. For Unreal or Godot you rebuild the widgets from the same art and specs — the field guide walks through the measurements.

Will it look like every other game that uses it?

No. The kit is a flat, neutral base built to be restyled. Change the four core tokens and the whole library takes on your art direction. Most teams also swap a handful of shapes and end up with something that reads as theirs, built in a fraction of the time.

What's the licence?

One purchase covers one game team shipping commercial titles. Use it across your projects, no per-seat fee. You can't resell the kit or repackage it as your own asset pack. Full terms are in the download and on our Terms page.

How is the design review different from the toolkit?

The toolkit is parts you assemble. The review is a person: a HUDCraft designer opens your actual build, runs it against the same heuristics we use on client work, and sends back annotated screens with a ranked list of what to fix first. Pick it when your interface already exists but isn't landing.

Do updates cost extra?

Updates within the version you bought are free — new components, extra templates and fixes land in your download. A major new edition is a separate release; existing owners get it at a reduced upgrade price.

How do I get the files after I order?

It's a digital product, so there's nothing to ship. Once your invoice is settled we email a private download link and your licence details — usually the same business day. See the Access & Delivery page for timing.

Order the toolkit

Tell us where to send it

Fill this in and we'll email your invoice and, once it's settled, your private download link. No card details here — payment is arranged separately. Questions first? Write to [email protected].

  • Reply within one business day
  • Download link on the same day payment clears
  • Updates for your version included

By ordering you agree to our Terms and Privacy Policy. We only use these details to send your invoice and download.

Stop redrawing the settings screen.

Everything a small team needs to ship a readable interface, in one download. From R$690.

Get the toolkit