SYS BRAND / STYLE GUIDE

The DOM is
the game board.

How DOM VIRUS looks, moves and talks: a flat, neon, hard-shadow world where every surface is something you can press, and every game ships as a cartridge.

01 BRAND

One skull. Many games.

The mark A 64-unit pixel skull with a single offset pixel: the virus "infecting" the grid. Clear space = one eye width on every side. Always crisp-edged; never smoothed, outlined or rotated.

DOM VIRUSThe DOM is the game board.

App icon
full-bleed, no border (iOS)

Battlefield
skull on the grid

Sticker
on every cartridge

Pink mark on dark or light ground
Mono wordmark, wide tracking
No gradients, glows or bevels on the mark
Don’t recolour per game: games carry the accent, the mark stays pink

02 COLOUR

Night first. Neon on purpose.

Two themes share one set of tokens. Dark is home; light is the same world at noon. Each game owns one accent, used for its cartridge, its hard shadows and its screen.

Dark tokens

--bg#100a1b
--surface#1a112b
--raised#281b40
--line#49345e
--faint#b39acd
--muted#cec0e0
--ink#fff4ff
--accent#f4457a

Light tokens

--bg#f6f7f8
--surface#ffffff
--raised#edf0f2
--line#d1d7de
--faint#586577
--muted#4d5866
--ink#171022
--accent-text#bf2d5b

Game accents

Sherman Bytesamber · #ee6875
DOM Battlefieldcyan · #06c4ff
Swarm Protocolviolet · #8573ee
Byte Runnerlime · #4bce82
Null Invaderscyan · #06c4ff
Console / brandpink · #f4457a
Contact goldpins · #ffc94a
Screen blackconsole · #07060f

03 TYPE

Plain sans. Machine mono.

No web fonts, no downloads: a system sans for reading and the platform monospace for everything the machine says.

SANS · Inter, Arial, Helvetica, sans-serif

Pick a cartridge.

Small games. Serious engineering.

Each game plays across the page you are reading.

Body copy is short, plain and friendly. One idea per paragraph; the page should feel quick to read.

MONO · ui-monospace, SFMono-Regular, Consolas

INSERT CARTRIDGE

INSERT CURIOSITY. PRESS PLAY.

01 / DOM TANK TACTICS

04 THE 3D RULE

Every surface can be pressed.

Objects are flat faces over a hard, offset base. Depth always falls down and to the right.

Rest The top surface sits over its base, offset (S, S).
Hover Only the top lifts. The shadow grows by the same amount, so the base never moves.
Press The top lands exactly on the base: translate(S, S), shadow 0.
Selected Stays pressed in, so state is visible without colour alone.
Easing Transform and shadow share one curve. No overshoot: a bounce would push the top through its base.

LIVE: hover and press these

Primary Quiet

The console and the cartridges follow the same rule as solid 45° extrusions: the cartridge side is 7px, the console 14px.

05 COMPONENTS

Cartridges, console, controls.

04 / DOM CHASEByte RunnerFollow the bites. Eat the page.

Standard One action: PRESS START.

02 / SQUAD TACTICSDOM BattlefieldSherman Bytes, a whole platoon.

Special edition A full game: two actions and a sticker.

Shell Accent front face, 2px ink outline.
Notch 22px, 45°, the same angle as the depth.
Side + bottom faces Darker accent, mitred at the corner.
Grip Five ridges along the top.
Label Art, number / kind, name, tagline.
Pins Gold fingers that wrap under the edge; a few worn, tarnished or missing.
Sticker A skull slapped on as an afterthought; some peel.

The console The navigation. A cartridge slides in behind the flat top edge; the screen boots in the game’s accent; BLUE and RED map to the cartridge’s actions. The console never moves, so leaving and coming back are exact mirrors.

Touch controls One shared kit for every game: an analog stick (8-way, or 4-way for mazes), a round pink Fire and cyan secondary buttons, all on the same press rule.

06 MOTION

Alive, cheap, reversible.

Motion is the map: it tells you where you came from and how to get back. It is also cheap: CSS and WAAPI transforms only, no layout in animation frames, no framework, mini-games loaded on the first tap.

Moment	Timing	Why
Hover / press	`140ms cubic-bezier(.2,.8,.2,1) · press 55ms`	Transform + shadow share one curve. No overshoot.
Cartridge flight	`820ms desktop · 760ms phone`	Lift, glide, slide in. One rect read per flight.
Eject	`900ms desktop · 800ms phone`	The exact reverse of the flight, from the same seat.
Cartridge swap	`Eject, then plug in · A pressed after 1.1s`	A link from one game to another ejects the current cartridge and plugs in the next.
Screen → page	`View Transition 600ms cubic-bezier(.2,.8,.2,1)`	The console screen morphs into the game display.
Full game	`Board 600ms clip + 550ms fold`	The screen grows to the viewport; the board folds open.
Idle loops	`CSS steps(), paused offscreen`	data-motion pauses anything you can’t see.

Reduced motion Every loop stops; navigation becomes a plain link.
Offscreen pause Illustrations sleep when you scroll away.
State in the URL The page knows where you’re returning from before its first frame.
Swaps, not jumps Game-to-game links never skip the console: they eject one cartridge and plug in the other (swapHref(base, from, to)).
One spot, one cartridge On phones the row centres a cartridge’s spot as it flies in and before it flies home.
Never move the console Launch and return start from the same seat, so the way back is an exact reverse.

07 ICONS

Line for UI. Pixels for play.

Interface icons are 24-unit, 1.8 stroke, round caps. Game art is crisp-edged pixels. Never mix the two in one control.

cartridge
chip
eject
github
globe
palette
sun
moon
play
pause
copy
check
code
browser
layers
target
clock
recall
arrow-up-right
chevron-down

tank
ship
runner
bug
fly-chaser
fly-interceptor
skull

08 VOICE

Short. Playful. Arcade.

Pick a cartridge.
Headlines are commands, not descriptions.

INSERT CARTRIDGE
The machine speaks in caps, in mono.

Eject cartridge
Name the action by what the world does.

Same page. Different rules.
Two beats, full stops, no hype.

BLUE INFO · RED LAUNCH
Controls are named by colour and verb.

Hit Recall to give the page back.
Always tell people how to undo.

09 LINE-UP

Five cartridges.

#	Cartridge	Kind	Accent	On the console
`01`	Sherman Bytes	`DOM TANK TACTICS`	amber	PRESS START → game page
`02`	DOM Battlefield	`SQUAD TACTICS · special edition`	cyan	BLUE INFO → detail page · RED LAUNCH → full game
`03`	Swarm Protocol	`DOM DEFENSE`	violet	PRESS START → game page
`04`	Byte Runner	`DOM CHASE`	lime	PRESS START → game page
`05`	Null Invaders	`DOM SHOOTER`	cyan	PRESS START → game page

10 CASE STUDY

From one long page to a cartridge console.

Where it started

Bolo, on the networked Macs in a middle-school engineering tech class. Reaching across the network to change someone else’s screen was the hook, and building things to see how they talk to each other followed. The story is under the hood.

The problem

The first DOM VIRUS site said everything at once. Four games, the engineering story, performance budgets and embed docs lived in one long scroll. Every game competed for the same attention, the page was hard to scan, and there was no sense of where you were or how to get back.

The idea

Make navigation the first game. Each game became a physical cartridge on a shelf, and a console became the menu. Plug one in, it boots in the game’s colour, press start, and the console screen morphs into the game’s own page. The full game, DOM Battlefield, is a special edition with two actions on the console: BLUE for info, RED to launch.

Orientation through motion

Coming back plays the exact reverse: the page morphs back into the screen, the cartridge pops out and flies home. While it’s out, its empty slot shows a faded cover, so the shelf remembers. The return state lives in the URL, so the page arrives already docked, with no flash and no guessing.

The result

Fewer things on screen at once, and a home page that is fun to use. Deep details moved to one page per game and to each game’s README; the engineering moved under the hood. It stays fast: CSS and WAAPI transforms, no framework, mini-games that load only on the first tap.

See the original one-page site