Christian ManivongandClaude Opus 5.5
f70fec496a
The site felt old, unfocused and bloated: 11 pages, a features page of 171 bullets, a homepage of 830 words in card grids around seven mockup-style screenshots, and no single thing it wanted a visitor to understand. - Message: control instead of drift. Audience: IT departments in small and mid-sized companies. Goal: buy a licence — netOrk itself is free, the licence adds vulnerability data and image updates. - Home is under 400 words: the drift comparison of a real access point, three steps, the hardware it runs on, vulnerabilities with a licence, what else is in the box, one closing band. Features, Drivers and Roadmap are gone; their URLs redirect (router and nginx 301). - New Pricing page: the free core, Starter / Pro / Enterprise on request with the plan differences from the licence server, four questions; buttons go to the licence portal. The unit-less KB request limit is left out. - Persona pages are one template; NIS2 and Plugins are cut to half or less. Impressum and Datenschutz exist as marked placeholders; the unsupported "MIT licence" claim is gone from the footer. - Look: light paper and ink, the dark product on a stage, Inter self-hosted, split sections and ruled lists instead of cards. Four real, cropped screenshots replace eight full-window ones. - Language follows the browser until someone chooses; <html lang> is set. Scroll-to-top on navigation, a catch-all route, no dead /docs/architecture. - CLAUDE.md, DESIGN.md, PAGES.md and PRODUCT.md describe the new rules. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
79 lines
3.3 KiB
Markdown
79 lines
3.3 KiB
Markdown
# 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.
|