Aqua IV 0.11
Documentation Editor Engine API

Design system

W4's interface is meant to feel like a modern game client, not a debug tool. Menus, the lobby, the in-game panels and the editor share one set of rules, so a button, a chip or a tooltip looks and behaves the same wherever you meet it.

This section explains those rules. If you play, it tells you why things look and react the way they do. If you make maps, it tells you what the interface will do with your names, colours and messages. If you contribute to W4, it is the standard your screens are held to.

The look: midnight gilt

A moonlit, cold navy world with warm gold. Midnight blue for the scene and the panels, steel for frames and quiet borders, gold for what is yours and what matters, moonlight cream for text. Gold on midnight is the signature pairing, and we keep it.

Panels are not flat fills. They have a lit top edge, a darker bottom edge, a soft shadow and a little depth, like metal and dark glass. Shapes carry meaning too: things you act on (panels, primary buttons) have cut corners, while people and states (avatars, chips, toggles, dots) are round.

Principles

  1. Colour says what a thing is for. One colour, one meaning, on every screen. See Colour.
  2. Hierarchy comes from a few type sizes, not from shouting. Six sizes, one page title per screen. See Typography.
  3. Everything you touch answers. Hover, press, focus and appearance all animate, within a tenth of a second, and nothing blocks your input. See Motion.
  4. Long things get cut down. A chip, a number or a tooltip says it faster than a sentence. A list that does not fit scrolls; it never overflows.
  5. One widget for one job. A button is the same button everywhere. See Components.
  6. One main action per screen. It is big, it is gold, and it sits where your pointer already is. Dangerous actions are red, far from it, and ask first.
  7. Never colour alone. Ally and enemy are words and shapes as well as green and red. See Accessibility.
  8. Honest state. Loading shows progress and says what is loading. Errors say what happened and what to do. A local account looks local.
  9. Style is part of the job. A screen that works but is dull is not finished. See How we critique our own UI.
  10. Cheap to run. Interface costs nothing when it is not on screen or not changing, so thousands of units keep their frame rate.

The pages

The kit page

The game has a page that shows every widget in every state: the UI kit, opened with F2 on the main menu. A widget that is not on that page does not count as built. It is the quickest way to see the whole system at once.

Status

The design system is being built now. Pages here describe the target; where something is planned and not yet in the game, the page says so. The binding rules for contributors live in the repository's docs/UI-GUIDELINES.md and its companions.

In this section

Colour The palette, what each colour means, how surfaces and borders layer, and how contrast is measured.Typography The typefaces, the six sizes, alignment rules and how interface wording is chosen.Motion How the interface moves: springs, timings, transitions, and loading that always tells you what is happening.Components A tour of the kit by category: what each family of widgets is for and how it behaves.Accessibility What already protects every player, and the accessibility settings that are planned: UI scale, reduce motion, high contrast and colour-blind aids.The visual language The shapes and surfaces the interface is made of: capsules, chips, keycaps, the command palette, the loading screen, the game menu and unit icons.How we critique our own UI For contributors: the loop of build, screenshot, critique and fix, and the lenses every screen must pass.