Skip to content

Every color, size and effect in Dead Signal comes from one file.

tokens/tokens.json is the source. npm run build:tokens turns it into assets/css/tokens.css, which both the UI and the Three.js scene read. Everything on this page renders live from those tokens, so if it looks right here, it looks right in the game.

Loading tokens…

Buttons

Two variants only. Use .btn-primary for the one main action in a context and .btn-secondary for everything else. .btn-lg is the only size modifier.

.btn.btn-primary Corner ornaments come from --btn-corner-image.
.btn.btn-secondary Moves, clear, reset, close.
.btn-lg Title screen only.
:disabled Applied to every control while a sequence runs.

In context: the controls grid

Containers

.panel is the one surface. panel-corners.js adds the four mirrored ornaments from --panel-corner-image; add .panel-no-corners to opt out.

Program Rover

A plain panel with a section title.

.panel + .panel-title

📡 Signal Restored

The rover has successfully reached the transmission tower.

Moves used: 7
.panel.panel-modal Shown inside .overlay.overlay-dim in the game.

Queue & toast

  1. 1. ↑ Forward✕
  2. 2. ↻ Turn Right
  3. 3. ↑ Forward✕
.queue-item and .queue-item.active (the command currently running).
Executing sequence…
COLLISION — path blocked. Mission failed.
.toast and .toast.error Shown pinned here; in the game it slides in at the top of the 3D view.