# v01-neon

**The idea.** A lit sign at night. One centred column on black, under a sky
that is an ordered-dither ramp from electric blue down into the page black.
Nothing on the page is boxed except the sign-up form.

**The tool list is a list of names.** Every tool is one row of display type:
the name at 2.75rem and its languages under it. The description is not on the
screen until the reader asks for it — pointing at a row or tabbing into it
slides the description in from the right, takes a blue rule down the row's
left edge and steps the row six pixels to the right; the rows either side take
a grey rule. Reading the page is therefore a sequence of single facts, never a
wall of them. No name and no description changes colour while this happens,
and nothing is painted behind the type.

**Dither.** Two places, both ordered (Bayer) and both visible without
hunting: the hero sky (a canvas ramp from the accent into the background at
6px cells) and the band above the sign-up (a ramp into magenta, with a coarser
checker layer drifting across it on parallax). Where script has not run, the
CSS checker carries the same look.

**Parallax.** Three rates on the first screen: the sky moves at 0.28 of the
scroll, the radial haze over it at 0.55, and the dot grid at 0.3, so the text
column separates from its background immediately on the first scroll.

**Palette.** Electric blue `#3d7bff` with hot magenta `#ff3ea5` as the second
colour: magenta carries the arrows and the repeat call to action, blue carries
the sky, the buttons and the open row. The offset shadows are black, as they
are everywhere on the site.

**Type.** Space Grotesk for the claim, the tool names and the headings; Plex
for descriptions; Plex Mono for the languages, the buttons and the labels.
No pixel type on this page.

**Notches.** The bottom-right corner only, on the buttons and the two sign-up
boxes. The list rows are plain rules, top and bottom.

**Arrows.** Two, in magenta: one bows from the hero buttons into the list
heading, and one from the last row of the list into the sign-up. Both travel
through empty column space, and each is a single stroke rather than a
tangle.

**Density.** The lowest on the site: a hero that fills the first screen, then
one name per row, then one box, then one box.

**Mobile (390px).** Left-aligned rather than centred, the hero at a third of
the height, full-width buttons stacked, and every description already open,
because a phone has nothing to hover with. The haze layer, the arrows and the
parallax are off; the dither stays.