docs: initial product docs and design reference

Establishes the documentation foundation for the netOrk website:

- CLAUDE.md — tech stack (React 18/Vite/Tailwind), design rules, tone of
  voice, and file structure guidance for the implementation instance
- docs/PRODUCT.md — one-liner, elevator pitch, target audience, value props,
  full feature list, driver table, architecture summary
- docs/DESIGN.md — exact Tailwind classes for colors, typography, spacing,
  and all reusable component patterns (cards, buttons, screenshot frames,
  badges, nav) lifted directly from the product UI
- docs/PAGES.md — page-by-page content plan with route, purpose, section
  structure, and draft copy for every page

No code yet — that follows in a separate instance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,93 @@
+# CLAUDE.md — netork-website
+
+This is the official marketing website for **netOrk**, a self-hosted Network
+Orchestration Platform. The goal is a fast, visually striking single-page (or
+multi-page) site that communicates what netOrk does, who it is for, and how to
+get started.
+
+---
+
+## Project Purpose
+
+Potential users land here and need to answer three questions in under 10 seconds:
+1. What is this?
+2. Is it for me?
+3. How do I try it?
+
+Everything on the site should serve those three questions.
+
+---
+
+## Content & Design Source of Truth
+
+All product content (features, copy, page structure) is in `docs/`:
+
+| File | Purpose |
+|---|---|
+| `docs/PRODUCT.md` | Product description, target audience, value propositions, feature list |
+| `docs/DESIGN.md` | Visual identity — exact Tailwind colors, typography, component patterns |
+| `docs/PAGES.md` | Page-by-page content plan with section headings and copy drafts |
+
+**Read these files before writing any code or copy.** They are the source of
+truth. The design file in particular defines exact class names — use them.
+
+---
+
+## Tech Stack
+
+Mirror the netOrk UI exactly so the design language carries over:
+
+| Layer | Choice |
+|---|---|
+| Framework | React 18 + TypeScript |
+| Build | Vite |
+| Styling | Tailwind CSS v3 |
+| Routing | React Router v6 (or static if single page) |
+| Icons | Heroicons (inline SVG, same as netOrk UI) |
+| Animation | Tailwind transitions only — no GSAP, Framer, etc. |
+
+**No external component libraries.** Build everything from Tailwind primitives,
+exactly as netOrk's `ui/src/components/ui.tsx` does.
+
+---
+
+## Design Rules (summary — full detail in docs/DESIGN.md)
+
+- **Dark theme only.** Background `bg-slate-950`. Cards `bg-slate-900`.
+- **Accent color:** `sky-500` / `sky-600` for CTAs, links, highlights.
+- **No light mode toggle.** Ever.
+- Font stack: system default (Tailwind sans). No Google Fonts.
+- All interactive elements use `transition-colors` — no layout shifts.
+- Screenshots/mockups of the actual app use a `border border-slate-700 rounded-xl
+  overflow-hidden` wrapper to frame them against the dark background.
+
+---
+
+## File Naming
+
+```
+netork-website/
+├── CLAUDE.md               ← this file
+├── docs/
+│   ├── PRODUCT.md
+│   ├── DESIGN.md
+│   └── PAGES.md
+├── public/
+│   └── screenshots/        ← actual app screenshots go here
+├── src/
+│   ├── components/
+│   ├── pages/
+│   └── main.tsx
+├── index.html
+├── package.json
+└── tailwind.config.js
+```
+
+---
+
+## Tone of Voice
+
+- Direct and technical — audience is engineers, not executives.
+- No marketing fluff ("revolutionize", "empower", "seamless").
+- Show, don't tell — a screenshot or code block beats three sentences of prose.
+- German is fine for internal docs; the website copy is in **English**.