How this site was built

the brief

Sell the outcome, show nothing internal

Nordet studies how a professional actually works, builds an automation that does the repetitive parts, and operates it. The site had one job: make that outcome feel real without ever showing the machinery. No runtime names, no configuration, no screenshots of software.

The first shipped version got the structure right and the feeling wrong. An independent review in July 2026 called it what it was: visually generic. Muddy mid-tone greens, a hero that was literally a mock software card, typography set small and safe, and a story that dramatized pausing (the approval gate) instead of the thing clients are buying: continuous, unattended throughput.

the direction

Two poles, one accent, one metaphor

The redesign kept the green and killed the mid-tones. Everything now sits on two poles: warm cream paper and near-black spruce ink, with a single copper accent that appears only where something warm or human happens. Type is a three-voice system: Newsreader for display (with exactly one italic copper word per headline), Instrument Sans for reading, IBM Plex Mono for labels and data.

The metaphor was already in the name. A nordet is the Quebec northeast wind: steady, works all night. Northeast is also the direction a growth chart points. The logo is that idea drawn literally: an N whose diagonal overshoots into a northeast arrowhead. The wind shows up again as an ambient drift in the dark sections, and the whole palette reads like a field notebook: paper, ink, one copper instrument needle.

the signature

The operations tape

The hero used to climax on two buttons: approve or decline. It now shows the opposite story: a continuous stream of finished work. Each line is a real task shape drawn from the use cases (a listing compared, a file read, a form pre-filled), entering scattered and dim, snapping onto the rail as a completed tick, and drifting up while two serif counters climb.

It's not a video and not a library: one requestAnimationFrame loop throttled to 30 frames per second, a fixed pool of recycled DOM nodes, and under 5KB of code. The server renders a meaningful still frame, so with JavaScript off or reduced motion on, the hero is a photograph of the same truth.

line.y -= (SPEED * dt) / 1000;
if (line.y < -LINE_GAP) {
  // recycle at the bottom with the next log entry, scattered and dim
  line.y += LINE_COUNT * LINE_GAP;
  line.text = nextText.current++ % TEXT_COUNT;
  line.snapAt = now + SNAP_DELAY;
}

provenance

Where every asset comes from

Every visual on this site is drawn, not sourced. The N-vane, the reclaimed-week stripes below, the plan diagram, the quiet-month strip and the tape are hand-written SVG and canvas in this repository. The social card is generated at request time from the same stripe geometry and palette tokens. Fonts are Newsreader, Instrument Sans and IBM Plex Mono via Google Fonts. There is no stock photography and no generated imagery on any page.

the passes

What each pass changed

July 15, 2026 · the redesign pass: cream/spruce/copper token system with a full dark mode; display-scale headlines with the single italic word; the approval-demo hero replaced by the operations tape; a sitewide sweep that moved the story from pausing to throughput in both languages; the reclaimed-week stripes; the N-vane; the motion system (scroll reveal, page entrances, counters, self-drawing logo, wind field), all behind prefers-reduced-motion.

The three polish passes land after the portals; each will be logged here with what it found and what it changed.