UI Toolkit (Light Mode)

Based on the "Battleship" theme. Light design system with orange accents.

1. Color Palette

Main Background
#F8FAFC
Card Background
#FFFFFF
Input Background
#F1F5F9
Primary Orange
#F97316
Lines / Borders
#E2E8F0
Primary Text
#0F172A
Secondary Text
#64748B

2. Typography

Main Title (H1)

Battleship

Subtitle (H2)

Game Room

Labels and Section Titles

Game Status

Base Text / Data

Waiting for another player...

3. Buttons and Indicators

Primary Button
Secondary Action
Status Badge
Connected Copy

4. Forms and Inputs

If you have a GameId, you will join that game's room.

5. Complete Layout Example (Mockup)

Battleship

Game Room

Player
player 1
Game ID
#427c5c34-5acd-489d-ab93-046e3a432269
Websocket
Connected
Waiting for player 2...
Status
Waiting for another player
My Turn
No
Remaining Ships
-
My Attacks
0
My Ships
Ship Size Hits Status
Aircraft Carrier 5 0 active
Battleship 4 0 active
Submarine 3 0 active
Patrol Boat 2 0 active