How it’s built

Stack

• Astro, static: HTML and CSS first, scripts only where something is interactive
• Tailwind v4 with its default palette, radii and type scale removed, so only the tokens exist
• Mona Sans, one variable font file, set at two widths
• three.js for the scene, loaded after the text has painted (arrives in P2)

A hero that fixes itself.

The hero opens with the flaws an audit finds in products as they ship, then fixes them one at a time: type, edges, contrast, target, keycaps. The labels on it are measured from the page as it renders, not written by hand.

Replay it on the home page

Checks

• Contrast measured against the colour each text actually sits on, with margin over AA
• Body text at 16 px or more, and 44 px targets on touch screens
• Interface motion between 150 and 250 ms, and none under reduced motion
• No sideways scroll from 360 to 1280 px, and axe clean on every page
• Page weight, load time and layout shift held to the budgets below on every change

Budgets

Type

Mona Sans by the Mona Sans Project Authors, under the SIL Open Font License 1.1.