NetOrk/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(design): remove SVG, use PNG logo only

Browse Source 
SVG icon is no longer in use. public/logo.png (1024x1024 RGBA) is
the single logo asset. DESIGN.md updated accordingly: SVG snippet
removed, wordmark pattern and <head> references updated to PNG.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Manivong
2026-06-28 10:16:43 +02:00
co-authored by Claude Sonnet 4.6
parent d66ec03165
commit 46929e2ef5
8901 changed files with 1280134 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+7 -25
View File
@@ -8,41 +8,23 @@ between the product UI and the marketing site.
## Logo Assets
Both files are in `public/` — use them directly, do not recreate.
The logo file is in `public/` — use it 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 |
| `public/logo.png` | PNG | 1024×1024, RGBA | Nav logo, OG image, hero, press kit, favicon fallback |
### 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:
### Usage in `<img>` (nav, hero)
```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>
<img src="/logo.png" alt="netOrk" className="h-8 w-8" />
```
### Wordmark pattern (logo + text)
For the nav, pair it with the wordmark:
```tsx
<a href="/" className="flex items-center gap-2.5">
{/* inline SVG above */}
<img src="/logo.png" alt="" className="h-7 w-7" aria-hidden="true" />
<span className="font-semibold text-slate-100 tracking-tight">
net<span className="text-sky-400">Ork</span>
</span>
@@ -55,7 +37,7 @@ in sky-400 ties the wordmark to the accent color.
### `<head>` references
```html
<link rel="icon" href="/logo.svg" type="image/svg+xml" />
<link rel="icon" href="/logo.png" />
<meta property="og:image" content="/logo.png" />
```