Files

T

Christian ManivongandClaude Sonnet 4.6 00c483c2a2 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>

2026-06-28 09:58:47 +02:00

2.8 KiB

Raw Blame History

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:

What is this?
Is it for me?
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.

2.8 KiB Raw Blame History