UI Design Inspiration 2026 07

UI Design Inspiration 2026-07

Owner-supplied UI design direction (2026-07-07) for modernising WASP in-game dialogs. First application target is the join-time skin selector overhaul, in progress on the mission repo. Archive files stored in ui-inspiration/; preview image at ui-inspiration/design-canvas-preview.webp.

This page captures the design language and reference mockups delivered with the 2026-07-07 inspiration package. It is the canonical entry point for any agent or developer starting new dialog work.

---

Design Language

Palette

Role	Hex	A2 color-array form
Cyan accent	#42B6FF	{0.26, 0.71, 1.00, 1}
Plate black 70%	—	{0, 0, 0, 0.70}
Plate black 40%	—	{0, 0, 0, 0.40}
Text white 85%	—	{1, 1, 1, 0.85}
Confirm green	#63EC7E	{0.39, 0.93, 0.49, 1}
Enemy red (OPFOR accent)	#E8524A	{0.91, 0.32, 0.29, 1}
Warning amber	#E8C547	{0.91, 0.77, 0.28, 1}
GUER olive	#9FB36B	{0.62, 0.70, 0.42, 1}

Typography

• Font: TahomaB
• Size range: sizeEx 0.026 (slot labels) to sizeEx 0.032 (funds readout)
• Labels: uppercase, letterSpaced

Anatomy

• Panel shell: 1 px cyan-border on black 70% plate
• Header style A: solid cyan background + black text (commander dock)
• Header style B: dark plate + cyan title text + 1 px cyan bottom border (role selector)
• Footer action row: separated from body by 1 px cyan border
• Accent strip: 0.003 safezone-H thin cyan bar above or below the panel
• List rows: cyan selection background (colorSelectBackground[] = {0.26, 0.71, 1.00, 1}) + black selected text (colorSelect[] = {0, 0, 0, 1})
• Primary action button: confirm-green background (#63EC7E) + black text

Engine Constraints

Vanilla Arma 2 OA controls only: RscText, RscListBox, RscButton, RscActiveText. Solid fills; no textures required. All coordinates are safezone-relative (SafeZoneX/Y/W/H).

---

Reference Mockups in the Canvas

The design canvas (ui-inspiration/WASP-Warfare-UI.dc.html + ui-inspiration/support.js) contains the following mockups:

Mockup	Summary
Role-selection dialog	Listbox of roles + description panel + spawn-point row + green DEPLOY button. Direct template for the skin selector overhaul.
Quick-deploy hotkey bar	Bottom-docked strip: funds readout (cyan, left-aligned) + 6 RscActiveText purchase slots.
Commander side dock	Right-edge panel: town listbox + MOVE / ATTACK / DEFEND order buttons.
Theme system	CYAN / CRIMSON / RETRO per-faction palette variants with live switching.
Purchase panel explorations	Five style variants of the unit-purchase panel exploring header treatment, list density, and button placement.

---

Drop-in Code

Two ready-to-use .hpp fragments are archived in ui-inspiration/:

WW_QuickDeployBar.hpp — quick-deploy strip (design 8a), IDD 4870.

Palette macros defined:

Macro	Value
WW_COL_CYAN	{0.26, 0.71, 1.00, 1}
WW_COL_BLK70	{0, 0, 0, 0.70}
WW_COL_TEXT	{1, 1, 1, 0.85}

IDCs: WW_IDC_QDB_FUNDS = 4871, slot IDCs 4881–4886. Six RscActiveText slots stepped SafeZoneW * 0.088 per slot.

WW_CommandDock.hpp — commander side dock (design 8b), IDD 4890.

Palette macros defined: WW_COL_CYAN, WW_COL_BLK70, WW_COL_BLK40 ({0, 0, 0, 0.40}), WW_COL_TEXT. IDCs: WW_IDC_DOCK_TOWNS = 4891, WW_IDC_DOCK_MOVE = 4892, WW_IDC_DOCK_ATK = 4893, WW_IDC_DOCK_DEF = 4894.

IDD safety: IDDs 4870 and 4890 must be checked against UI-IDD-Collision-Repair before use in the mission. Do not #include these files without verifying there are no conflicts in Rsc/Dialogs.hpp.

---

See Also

• UI-Theme-Palette-And-Style-Macros-Catalog — the live Rsc/Styles.hpp WFBE palette these designs align with
• UI-Control-Class-Library-Reference — base Rsc control classes used by these dialogs
• UI-HUD-And-Dialogs — navigation alias for the dialog family
• Client-UI-HUD-And-Menus — quick-reference gateway for client UI work
• UI-IDD-Collision-Repair — verify IDDs before integrating drop-in code

---

Continue Reading

Previous: UI-Theme-Palette-And-Style-Macros-Catalog | Next: UI-Control-Class-Library-Reference

Main map: Home | Status: Progress-Dashboard | Agent file: agent-context.json