VOIDRUNNER

Everything the game is drawn with: eight colors, two typefaces, a handful of components and two sprite sheets. Every value on this page comes from tokens/tokens.json — change it there, run npm run tokens, and the game and this page update together.

Color

The canvas reads these same CSS variables when it draws stars, platforms and shards, so palette tokens must stay 6-digit hex. Click a swatch to copy its variable.

Type

h1.titleOrbitron 900 · --font-display

VOIDRUNNER

h2.title-smOrbitron 900

SECTOR COMPLETE

.eyebrowSpace Mono · cyan

Signal holding

.subtitleSpace Mono · mist

the drift waits for you

.stat-lineSpace Mono · value in cyan

TIME 01:42.37

bodySpace Mono 400 · --font-body

Collect every shard to open the portal. Each shard refills the run meter.

Components

Button

.big-btn + data-corners="button". The one button style used on every screen. Corner sprites sit on top of the border.

Key caps & controls legend

kbd, .shard-icon and the three-column .controls grid.

AD move

shard = run

SPACE jump

F punch

S block

P pause

HUD

.hud with .pills. The run meter (.boost) turns cyan while .active. Drag the slider to see it.

SHARDS 7 / 23

RUN

00:48.12

Run meter

Frame & overlay

.frame + data-corners="frame" holds the game. .game-overlay covers it for the start, pause and success screens. Frame tokens: --frame-*.

Signal holding

PAUSED

the drift waits for you

Sprites

Character

assets/images/spritesheet.png — 6 × 4 frames of 250 × 350 at 1x, exported at 2x. Animations are defined in assets/js/sprites.js; the previews below play from that same table.

Corners

assets/images/VoidRunner-ContainerEdges.png — two 80 × 80 frames at 1x, exported at 2x. Each is drawn as a top-left corner and flipped for the other three (assets/js/corners.js).

frame · col 0

button · col 1

Token reference

Generated from tokens/tokens.json. References like {color.cyan} become var(--cyan).

Variable	CSS value	Resolves to	Use