Components

The kit is the set of widgets every screen is built from. Press F2 on the main menu to open the kit page, which shows each one in all its states. The kit is large and still growing; this page describes the families and what they are for.

Every component passes the same checks: colour by purpose, the six type sizes, aligned to the grid, a tooltip if it is iconic or abbreviated, animated states, and an empty, loading and error state where they apply.

Actions and inputs

What you press, type or choose.

Buttons: primary (gold, one per screen), plain, ghost, danger (red, confirms), icon-only, and loading.
Switches: toggle, checkbox, radio, segmented control and tab bar with a sliding highlight.
Values: slider, range slider, stepper, rating, colour swatches, knobs.
Text: text box, search field with a clear button, select, tag input, code and PIN boxes, password field with a strength meter.
Shortcuts: keycaps that show a hotkey, the command palette, context and radial menus.

Feedback and status

What tells you what is happening.

Chips and badges: small pills with an icon and a word in a purpose colour, such as Local, Official or Ready. Counter badges for unread things.
Alerts and banners: a state for the whole screen, such as "Connection lost, reconnecting".
Toasts and snackbars: slide in at a corner, rest, leave. Success, error and info colours.
Progress: bars, steps, spinners, skeleton placeholders.
Presence: ready ticks, online dots, four-bar ping meters, typing indicator.
Empty states: an icon, what is missing and what to do, never a blank.
Tooltips: one to three short sentences, explaining what a thing is, does, or why it is unavailable.

How screens are organised.

Cards and panels: player cards, game cards, glass panels over the scene, the riveted menu sign.
Dialogs: confirm dialogs with a dimmed backdrop and a clear primary button.
Navigation: tabs, breadcrumbs, pagination, accordions, trees, dropdowns.
Data: tables, leaderboards, key-value lists, calendars, timelines.
Dividers: thin gold rules with a centre gem.

Game widgets

What only a game needs.

Lobby: player cards with a colour edge and ping, team columns with banners, a ready roster, friend list, invite popup, match found.
Identity: avatars, ranks, level badges, medals, nameplates.
In-game HUD: resource plate, minimap frame, command card with cooldown sweeps, health and mana bars with a damage trail, buffs, inventory, kill feed, chat, quest tracker, dialogue box.
Results: victory banner, stat cards, bar charts, sparklines, podium, scoreboard, achievement toast.
Floating text: damage numbers and speech bubbles, drawn with an outline so they read over any terrain.

Icons

One consistent outline set on a 24-pixel grid, tinted by purpose: green tick, red skull, gold crown. Every action, stat and status has one, next to its word. Icons alone appear only where universal, and always with a tooltip. All icons are drawn by us or come from permissively licensed sets credited on the Credits page; none come from Blizzard.

If two screens show the same thing, they call the same widget. When nothing fits, a new widget is added to the kit page first, then used.

The shared controls

Eight controls cover most forms and settings, and every screen uses the same ones: switch, slider, stepper, segmented choice, dropdown (field and rows), key field (to bind a hotkey), modal and ring. Each one animates on hover, press, focus and when it appears, and is built once in aqua4-play's widgets.rs. The Kit page shows them with their states, together with the focus ring, the page states (empty, error, loading), tooltips and text boxes. A gap audit (docs/UI-KIT-GAPS.md) lists what the kit still lacks before more screens are built.