Pixel Art — Stylebook

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(68% 0.18 258)
--fg oklch(12% 0.04 35)
--muted oklch(38% 0.06 35)
--surface oklch(96% 0.01 80)
--surface-2 oklch(88% 0.02 80)
--border oklch(35% 0.12 32)
--accent oklch(55% 0.22 27)
--accent-fg oklch(98% 0 0)
--focus oklch(55% 0.22 27)

Token	Value
--font-body	`'Press Start 2P', ui-monospace, 'Courier New', monospace`
--font-display	`'Press Start 2P', ui-monospace, 'Courier New', monospace`
--font-mono	`'Press Start 2P', ui-monospace, 'Courier New', monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`4px 4px 0 oklch(6% 0.01 260)`
--shadow-lg	`8px 8px 0 oklch(6% 0.01 260)`

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
	--bg: oklch(68% 0.18 258);
	--fg: oklch(12% 0.04 35);
	--muted: oklch(38% 0.06 35);
	--surface: oklch(96% 0.01 80);
	--surface-2: oklch(88% 0.02 80);
	--border: oklch(35% 0.12 32);
	--accent: oklch(55% 0.22 27);
	--accent-fg: oklch(98% 0 0);
	--focus: oklch(55% 0.22 27);
	--font-body: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
	--font-display: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
	--font-mono: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: 4px 4px 0 oklch(6% 0.01 260);
	--shadow-lg: 8px 8px 0 oklch(6% 0.01 260);
}

Where it came from

Origin: Early video games — arcade cabinets, home consoles, and 8-bit computers

Pixel art was born from hardware constraints: early displays and consoles could only show a handful of colours at low resolutions. Artists learned to suggest depth and texture through careful dithering and colour selection. When hardware improved and the limits disappeared, pixel art became a deliberate aesthetic — kept alive in indie games, NFT art, and generative creative tools.

How to spot it

Sharp, aliased edges — no anti-aliasing
Severely limited colour palette, often 4–16 colours
Bitmap fonts at exact integer sizes
Dithering patterns for gradient simulation

Trade-offs

Strengths	Weaknesses
Charming and instantly nostalgic	Small text can become unreadable
Very distinctive grid-based structure	Grid structure constrains free-form layout
Scales perfectly at integer multiples	Novelty fades without strong illustration

In the wild

Space Invaders and Pac-Man sprite art
Minecraft UI and world art style
Celeste and Shovel Knight UI design

Use it when

Games, profiles, or creative projects that celebrate early computer culture.

Related styles

Terminal Windows 95 Retro Futurism