UI Alignment — Anno City Builder HUD

Screens

1

Title Screen

Full-screen bg, centered menu, New Game / Continue / Settings

2

Main Game

Isometric map + HUD overlay (top bar, bottom bar, panels)

3

Pause Menu

Dimmed overlay, Resume / Save / Load / Settings / Exit

4

Chain Viewer

Full-screen overlay, flow diagrams by tier, bottleneck indicators

Main Game Layout

Interactive wireframe showing all HUD regions in their target positions.

500

50

20

0

Pop: 0 | Settlers: 0 · Citizens: 0 · Patricians: 0

PixiJS Isometric Game World

Events 3

Welcome to your new island!

Lumberjack placed

Low on Wood

Minimap

Bakery

Production

✕

48×48

Active

Recipe

1 Flour → 1 Bread

Cycle

12s

12s / 20s

Efficiency

85%

Stock

Flour: 3 | Bread: 7

Demolish

🏠

House

5W 50C

🍞

Bakery

8W 10S 150C

🌾

Wheat Farm

8W 3S 100C

⚙️

Mill

10W 8S 120C

🔒

Brewery

Tier 3

Residential

Production

Construction

Public

🔗 Chains 🗑 Demolish

💾 Save ⏸ 1× 2× 3×

Key Decisions

UI Implementation

HTML/CSS overlay on PixiJS canvas

Visual Style

Anno 1800 — clean dark panels, gold accents

Resource Display

All resources always visible in top bar

Population Display

Total + tier breakdown inline

Build Menu

4 category tabs, cards with icon + name + cost

Building Info

Right panel with full production detail

Placement Feedback

Ghost sprite + green/red tint

Chain Viewer

Full-screen overlay, count + rate + bottleneck

Camera Controls

WASD + scroll zoom + edge pan

Notifications

Collapsible event log panel

New Game Hint

Subtle dismissible hint text

Save/Load

Quick-save button + Escape pause menu

Keyboard Shortcuts

Esc Cancel / Close

Del Demolish mode

Space Pause / Unpause

1 Residential tab

2 Production tab

3 Construction tab

4 Public tab

P Chain viewer

WASD Pan camera

Scroll Zoom

Visual Language

Color Palette

Role	Value
Panel bg	`rgba(20,25,35,0.85)`
Text primary	`#E8E8E8`
Text muted	`#A0A8B0`
Accent / gold	`#D4A040`
Positive	`#5CB85C`
Warning	`#E8A030`
Danger	`#D44040`
Coins	`#FFD700`

Typography & Sizing

Element	Size
Font family	System sans-serif stack
Top bar height	40px
Bottom bar height	48px
Right panel width	280px
Minimap	180×180px
Building card	~80×100px
Resource icons	20×20px
Panel corner radius	8px

States & Warnings

Building States

State	Indicator
Active	Green dot + "Active"
Idle (no inputs)	Yellow dot + "Idle"
Paused (no coins)	Red dot + "Paused"
Placement valid	Green tint ghost
Placement invalid	Red tint ghost

Warning Indicators

Condition	Feedback
Low resource	Top bar count pulses amber
Negative coins	Coin count turns red
Needs unmet	Warning icon above house
Downgrade imminent	Flashing down-arrow
Game paused	Dimmed overlay + PAUSED

Prototype Scope

Included in Prototype

✓ Isometric grid with building placement
✓ All HUD regions (top bar, bottom bar, panels)
✓ Build menu with 4 category tabs
✓ Production chains running in real-time
✓ House upgrading through 3 tiers
✓ Production chain viewer overlay
✓ Save/load with LocalStorage
✓ Minimap
✓ Event log

Deferred

○ Sound & music
○ Particle effects
○ Tutorial system
○ Achievements
○ Multiple save slots
○ Multiple island templates
○ Undo/redo
○ Trade UI (Phase 2)
○ Mobile/responsive

Anno City Builder — UI Alignment