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>
3.3 KiB
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. Sectionspy-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-2with 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 (
cliporelementinshots.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
-narrowvariant (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.