Canonical component gallery

Driftdeck UI Lab

Back to command
Board validation

Deterministic stress fixtures

Open full-board scenarios in the canonical logical frame to audit spacing, overlap, focus elevation, and active-turn hierarchy.

Every card printAudit all definitions at one physical size and open each focused presentation.
Board map · one playerEvery human board zone without an opposing seat.
Board map · two playersEvery board zone with the rival seated across the table.
Board map · three playersEvery board zone with mirrored left and right rivals.
Board map · four playersEvery board zone with all three rival seats occupied.
Two-player opening boardOpening hand, one rival, and an empty deployment zone.
Full human fleetA busy fleet with persistent bases and three rival seats.
Four-player targeting overviewThe full-table camera framing used while choosing a target.
Base spacing · four playersSix bases per seat demonstrate the transition from separated cards to progressive packing.
Maximum densityExtreme ships, bases, hand size, and a base-heavy market.
Top opponent actingA large opposing fleet staged above the compact market.
Left opponent actingLeft opponent acting with all three rival base formations visible.
Right opponent actingA vertical right-seat deployment with persistent human bases.
Resolution system

One stable viewport

Each physical viewport selects one logical composition and scales it uniformly. The remaining area is intentional letterbox space.

canonical
Desktop reference1440 × 900 · 1.000×1440 × 900 logical
canonical
Wide desktop1920 × 1080 · 1.200×1440 × 900 logical
canonical
Phone landscape844 × 390 · 0.813×1038.7692307692307 × 480 logical
canonical
Wide phone915 × 412 · 0.858×1066.0194174757282 × 480 logical
rotate required
Portrait gate390 × 844 · 0.271×1440 × 900 logical
rotate required
Narrow portrait gate360 × 800 · 0.250×1440 × 900 logical
Primitives

Controls and states

Shared focus, disabled, destructive, primary, segmented, and dialog behavior.

Ready
Game components

Piles, seats, decisions, and combat

Deterministic fixtures for shared interaction contracts, including targetable and selected states.

Card piles

18Deck
2Scrap

Player seat

Vega
Authority31
Targetable

Combat allocation

Suppression Frigate3Select a highlighted commander or base

Decision

Awaiting choice
Game language

Symbols

One registry owns each glyph, label, help text, and color.

Trade
Combat
Authority
Draw
Discard
Opponent discard
Scrap
Destroy base
Ship
Base
Outpost
Defense
Ally ability
Deck
Decision
Resolves on play
Game language

Canonical tokens

Every effect uses the same construction. Context changes only the documented size.

compact
11111111111
standard
11111111111
inspection
11111111111
45
Trade8
Combat12
Authority43
Game component

Cards and states

The same `GameCard` renders every faction and surface, including the Rules Lab and live match.

1Vanguard Cell◈
Vanguard Strike2
Pack Momentum1
assault · affordable
1Salvage Drone◈
Salvage Run1+Scrap a card
Repurposed Guns2
industry · damaged
1Signal Disruptor◈
Signal Jam2+May scan enemy Drift
Coordinated Jam2+1
command · selected
1Treaty Shuttle◈
Treaty Run1
Goodwill Mission4
commerce · resolving
0Trade Drone
Supply Run1
neutral · in-flight
Hidden · facedown
Feature compositions

Responsive command layouts

Every landscape device scales the same 1440 × 900 composition. Portrait presents a rotation gate.

HUDOpponentsMarket rowDeploymentsHandCommands
1440 × 900
HUDOpponentsMarket rowDeploymentsHandCommands
390 × 844