Flight Manual

How this site is built, for the people who open DevTools.

One static page, generated ahead of time, with no client framework and almost no JavaScript. Everything you read works with scripts off. The one exception is the FO-01 survey model: about 400 lines of hand-written WebGL 2, no 3D library, fetched only when it scrolls into view and rendered only when something changes.

Built to hold. Static output, no runtime dependencies, nothing to break at 3 a.m. Every external link is a plain link.

Restraint. One accent colour, used for the thing that matters on each screen. No shadows anywhere: depth comes from overlap and line weight.

Grounded in real hardware. The FO-01 survey sheet is drawn from real elevation data, not an illustration. The orbit, the ticks and the status bar all borrow from actual instruments.

Motion obeys physics. Things move because they would: the orb orbits, the mark weaves, the lamp blinks. Set Engines: Idle in the header, or ask your OS for reduced motion, and everything parks in its resting pose.

FO-01's contours come from Terrain Tiles on AWS (Mapzen's terrarium encoding, zoom 12), derived from public elevation datasets including USGS 3DEP. Four tiles were resampled to a 64 × 64 grid of roughly 240 m cells, smoothed, and contoured every 400 ft with contourpy. The 3D model resamples that grid to 129 × 97 vertices at decimetre precision and draws contours in the fragment shader, so they stay sharp at any zoom. The transect samples the same grid along a straight line from Crestone to the summit, so it reads a little under the published 14,294 ft: the cells average the peak with its surroundings. Summit heights in the text are the published figures.

The pipeline is two files: the grid, checksummed row by row, and scripts/terrain.py. Swap in a GPX track and a finer grid and the same plate becomes a real route.

Everything here is drawn from Flight Manual, the NYKO design system: 26 colour tokens across a Night and a Day theme, three type families and a 4 px spacing scale. Every text colour clears WCAG AA on the surfaces it's allowed on, and keyboard focus is a solid 2 px ring in every theme.

Mark, system and site: Nykolas Farhangi. Typefaces: Big Shoulders Display and IBM Plex, both under the SIL Open Font License. Co-pilot: Powder.