# v06-pixel

**The idea.** A page built out of squares. The wordmark is drawn in the 5x7
bitmap font at scale 7, the tool names in the same font at scale 3, and every
block on the page has a three-pixel outline, a forty-four-pixel notch on its
bottom-right corner and a twelve-pixel black offset shadow, the deepest on the
site. Nothing is rounded and nothing is thin.

**The bitmap type is markup, not a font.** `pixelSVG` renders each glyph as
SVG rectangles with `shape-rendering: crispEdges`, at build time, so the
pixels stay square at any size, there is no font file to load, and every
bitmap name carries a visually hidden text copy for readers and search.

**The tool list is a grid of blocks.** Three columns on the desktop, two
between 900px and 1180px, one on a phone, with 3.25rem of air between them.
A block is a bitmap name, its languages, four lines of description and two
links. Pointing at one lights its outline yellow, throws its shadow five
pixels further and lifts it two pixels; the other blocks answer with a grey
outline. Nothing is painted behind the description and no type changes
colour.

**Dither.** Eight-pixel cells everywhere, the coarsest on the site: a 25%
checker washing out of the top-left of the hero on parallax, and the full-bleed
band before the sign-up (a canvas ramp into orange).

**Parallax.** The hero wash at 0.24 of the scroll rate, the band's checker at
0.18, the dot grid (2px dots on a 32px pitch) at 0.2.

**Palette.** Orange `#ff7a18` on warm black, with yellow `#ffd400` used only
as a rule, a link or an arrow — never as a fill under text. The offset shadow
is black.

**Type.** Bitmap for the wordmark and the block names; Grotesk uppercase for
the claim and the headings; Plex for descriptions; mono for languages, links
and buttons.

**Notches.** Bottom-right, at 44px — the largest on the site, and the reason
the blocks read as cut squares rather than as rectangles.

**Arrows.** Two, 8px with square 14/14 dashes and a 28px head, in yellow: hero
buttons into the grid, and the last block into the sign-up.

**Density.** Medium. Three blocks per row with a lot of air between them; a
hero of one wordmark, three lines of type and two buttons.

**Mobile (390px).** One block per row at full width with every description
open, the notch down to 28px so it does not eat a quarter of a small block,
the bitmap wordmark scaled to the full column width, and full-width buttons.
The hero wash is off; the dither stays.