docs(design): add logo assets + wordmark pattern

Copies logo files from the product UI into public/ so the website
instance has the real assets from day one:

- public/logo.svg — 32×32 SVG icon (slate-950 bg + sky-400 network motif),
  sourced from ui/public/favicon.svg; used for nav, favicon, inline marks
- public/logo.png — 1024×1024 RGBA PNG; used for OG image and large displays

docs/DESIGN.md gains a "Logo Assets" section with:
- file table (format, size, intended use)
- inline SVG snippet ready to paste into React components
- wordmark pattern (net + Ork in sky-400) that ties logo to accent color
- <head> reference snippets for favicon and OG image

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

docs/DESIGN.md

@@ -6,6 +6,61 @@ between the product UI and the marketing site.
 
 ---
 
+## Logo Assets
+
+Both files are in `public/` — use them directly, do not recreate.
+
+| File | Format | Size | Use |
+|---|---|---|---|
+| `public/logo.svg` | SVG | 32×32 viewBox | Nav icon, favicon, inline logo mark |
+| `public/logo.png` | PNG | 1024×1024, RGBA | OG image, large hero logo, press kit |
+
+### SVG Logo (inline)
+
+The SVG is a network topology motif: slate-900 background circle, sky-400
+central node, four satellite nodes at the corners, connecting lines. Copy it
+inline into React components wherever needed:
+
+```tsx
+// Nav logo mark
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"
+     className="h-7 w-7 flex-shrink-0">
+  <circle cx="16" cy="16" r="16" fill="#0f172a"/>
+  <circle cx="16" cy="16" r="5"  fill="#38bdf8"/>
+  <circle cx="8"  cy="8"  r="3"  fill="#38bdf8" opacity=".7"/>
+  <circle cx="24" cy="8"  r="3"  fill="#38bdf8" opacity=".7"/>
+  <circle cx="8"  cy="24" r="3"  fill="#38bdf8" opacity=".7"/>
+  <circle cx="24" cy="24" r="3"  fill="#38bdf8" opacity=".7"/>
+  <line x1="11" y1="11" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="21" y1="11" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="11" y1="21" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="21" y1="21" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+</svg>
+```
+
+### Wordmark pattern (logo + text)
+
+```tsx
+<a href="/" className="flex items-center gap-2.5">
+  {/* inline SVG above */}
+  <span className="font-semibold text-slate-100 tracking-tight">
+    net<span className="text-sky-400">Ork</span>
+  </span>
+</a>
+```
+
+Use `net<span class="text-sky-400">Ork</span>` consistently — the `Ork` part
+in sky-400 ties the wordmark to the accent color.
+
+### `<head>` references
+
+```html
+<link rel="icon" href="/logo.svg" type="image/svg+xml" />
+<meta property="og:image" content="/logo.png" />
+```
+
+---
+
 ## Core Principle
 
 **The website looks like a dark-mode dev tool, not a SaaS landing page.**

public/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <circle cx="16" cy="16" r="16" fill="#0f172a"/>
+  <circle cx="16" cy="16" r="5" fill="#38bdf8"/>
+  <circle cx="8"  cy="8"  r="3" fill="#38bdf8" opacity=".7"/>
+  <circle cx="24" cy="8"  r="3" fill="#38bdf8" opacity=".7"/>
+  <circle cx="8"  cy="24" r="3" fill="#38bdf8" opacity=".7"/>
+  <circle cx="24" cy="24" r="3" fill="#38bdf8" opacity=".7"/>
+  <line x1="11" y1="11" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="21" y1="11" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="11" y1="21" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+  <line x1="21" y1="21" x2="16" y2="16" stroke="#38bdf8" stroke-width="1.5" opacity=".5"/>
+</svg>