# netOrk website — design system

**Light pages, dark product.** The site is calm paper with ink; the only dark
surfaces are real screenshots of netOrk and code, set on a "stage". References:
Linear/Vercel for precision, Tailscale/Netbird for friendliness.

Tokens live in `tailwind.config.js`, building blocks in `src/components/ui.tsx`.
If a page needs something that is not there, it probably needs less instead.

## Colour

| Token | Value | Use |
|---|---|---|
| `paper` / `paper-2` | `#FAFAF9` / `#F3F3F0` | page / band |
| `line` / `line-strong` | `#E6E6E3` / `#D4D4D0` | hairlines |
| `ink` / `ink-soft` / `ink-muted` / `ink-faint` | `#0E1116` … `#9AA0A8` | headings / body / secondary / quiet |
| `night` | `#020617` | screenshot and code stage — the netOrk UI's own background |
| `accent` (`hover`, `soft`) | `#0369A1` | links, eyebrows, numbers, focus ring (5.7:1 on paper) |
| `drift` / `sync` | `#B45309` / `#15803D` | status: deviates / matches; never the only signal |

No gradients, no glow, no second accent. Buttons are ink, not accent.

## Type

Inter Variable, self-hosted through `@fontsource-variable/inter` (bundled by
Vite; the site makes no request to anyone else). Scale:

| Class | Use |
|---|---|
| `text-display` | the home headline only |
| `text-h1` | one per page, in `PageHeader` |
| `text-h2` | section headings |
| `text-h3` | row terms, plan names |
| `text-lead` | the paragraph under a heading |
| `text-eyebrow` + `uppercase text-accent` | the small line above a heading |

Everything is left-aligned. Headings balance and hyphenate (`<html lang>` is
set per language). Text columns stay within `max-w-measure` (38rem).

## Layout

- Container `max-w-page` (72rem), `px-5 sm:px-8`. Sections `py-20 md:py-28`.
- **Split**: heading on the left five columns, content on the right. The
  default section.
- **RuleList**: rows divided by hairlines, term and body; one or two columns.
  This replaces every card grid.
- **Steps**: numbered rows (`01`, `02`, `03`) in mono accent.
- **Band**: `bg-paper-2` with hairlines, for the hardware strip and the closing
  call to action (`CtaBand`).
- **Stage**: `bg-night`, `rounded-2xl`, `shadow-stage` — screenshots (`Shot`)
  and code (`CodeBlock`).

Not used: icon tiles, pills for names, cards, centred text blocks, fake browser
windows, emoji. Motion is `transition-colors` only.

## Screenshots

Only real screenshots of netOrk, from the anonymised demo copy
(`scripts/demo`), taken by `scripts/screenshots/capture.py` and published as
WebP in `public/screenshots/`. Their sizes are written to
`src/data/screenshots.json`, which `Shot` reads.

- At most four different images on the site. Each is cropped to the one thing
  the text next to it talks about (`clip` or `element` in `shots.py`).
- Cropping shows less of a real screen; it never changes what is on it. No
  edited data, no clicks that fake a state, no mockups.
- A crop that does not read on a phone gets a `-narrow` variant (`Shot narrow=`).
- Every image has an alt text and a caption that says what is true in it.

## Wordmark

Text only: `net<span class="text-accent">Ork</span>` in ink. `public/logo.png`
is the favicon and OG image; it does not sit well on a light background.

## Glossary marks

Terms from `src/glossary/terms.ts` get a dotted underline and a dark tooltip
(`linkify`). Not on the homepage — short copy there stays unmarked.