23. UI / UX

23.1 Screen layout

Area	Contents
Top bar	World Clock (game date + real countdown to next big event), nation emblem, wallet (home currency, TSR value, rations or scrip where used), notifications.
Main view	Three.js map: zoom from world overview to a city street; toggle overlays (ownership, resources, unrest, army positions, fog).
Left rail	Citizen panel: job, needs, rank ladder, inventory, home.
Right rail	Context panel: selected square/city/building; actions available under your system’s rules.
Bottom dock	Chat tabs, news feed, civic inbox (ballots, summonses, petitions).
Civic Center (full screen)	Offices (all AI), laws, elections, congress, court, budget, diplomacy – styled per nation; your levers on the AI government (ballot, petition, quota board, pledge, share vote) are one tap away.
AI leader panel (v0.7)	Portrait and persona card of each AI office holder, current pledges, the latest Reasoning Brief (where the system publishes it, Section 8.6), upcoming decisions and a ‘Watch’ button for live speeches, debates and summits.

23.2 UX principles

The system is the skin: the same screens are themed per nation – Kindle’s ballot looks like a modern civic form; Korund’s ration card is a stamped booklet; Aurelle’s decrees are sealed scrolls; Ilmar’s edicts are illuminated glass panels; Hoarvale’s bills carry a frost-blue Royal Assent seal; Varkand’s orders are stamped dispatches with an Alert Level banner; Veldwood’s ballots are a wood-grain Ballot Booklet; Fulmara’s votes are share certificates on a live ticker.
Money is the skin too: Spark prices tick live; Korund’s store shows coupon counts and queue length instead of prices; Aurelle’s coins show the current mint parity; Prism contracts show profit shares instead of interest; Veldwood counts down to Dividend Day.
Explain the rules in context: every greyed-out action says why (‘Requires Labor Bureau approval’, ‘Lèse-majesté: criticizing the Monarch is a crime’).
Time clarity: every timer shows real time and game time.
AI is always visible (v0.7): a consistent AI badge on every AI leader, AI citizen and Notable; an ‘AI-generated’ tag on speeches and articles; a ‘Why?’ link on AI decisions that opens the Reasoning Brief or, in closed systems, the official statement.
Accessibility: HTML UI with keyboard navigation, screen-reader labels, scalable text, color-blind-safe nation palettes (each nation also has a pattern/icon), reduced-motion mode.
Mobile: daily-loop actions in two taps; the map simplified to 2D-styled top-down on small screens.