HoffDesk Brand Identity Suite
Author: Daedalus 🎨
Date: 2026-04-25
Status: Draft — for Matt review
Philosophy
Functional luxury applied to identity. The mark of a sovereign home infrastructure — a workbench that connects home to cloud, analog to digital, family to function.
The brand should feel: precise, warm, architectural, unapologetically self-hosted.
Logo Mark
File: shared/design-tokens/brand/logo-mark.svg
Concept: A shield/desk silhouette framing a terminal cursor. Connection lines arc from home nodes (left/right) to the active center — the bridge between everyday life and infrastructure.
Anatomy:
- Outer shield: The "desk" — your workbench, the Beelink, the sovereign boundary
- Center cursor: The active moment — terminal, a log entry, a heartbeat
- Corner nodes:
- Left: Home (family, analog life)
- Right: Cloud (Tailscale, public endpoints)
- Connection lines: Data flowing, the bridge
- Ground line: The foundation — always present, never decorative
Color (dark mode default): Indigo glow (#818cf8 → #6366f1)
Favicon
File: shared/design-tokens/brand/favicon.svg
Dimensions: 32×32, works down to 16×16
Same shield + cursor simplification. Single indigo stroke on transparent — no detail lost at tiny sizes.
Wordmark
File: shared/design-tokens/brand/wordmark.svg
Lockup: Mark + "Hoff" / "Desk" stacked or inline
Inline version (preferred for nav/header):
[Mark] HoffDesk
Stacked version (for hero/splash):
Hoff
Desk
SOVEREIGN INFRASTRUCTURE
Typography: Inter 600, tight letter-spacing (-1.5), two-line split emphasizes the compound name. "Hoff" in neutral, "Desk" in accent — the desk/workbench is the active concept.
Color Suite
Brand Palette
| Token | Value | Usage |
|---|---|---|
brand-primary |
#818cf8 |
Logo, active states, links |
brand-dark |
#0a0c10 |
Deep background, dark mode base |
brand-surface |
#111318 |
Cards, elevated surfaces |
brand-border |
rgba(255,255,255,0.08) |
Subtle boundaries |
brand-text-primary |
#f0f1f5 |
Headlines, primary copy |
brand-text-secondary |
#9ca3af |
Labels, meta text |
brand-glow |
rgba(129,140,248,0.15) |
Subtle ambient glow |
Light Mode Palette (for favicon/logo on light backgrounds)
| Token | Value |
|---|---|
brand-light-mark |
#f0f1f5 with 70% opacity fill |
brand-light-stroke |
#9ca3af with 15% opacity |
App Icon System
Simplified marks for app tiles / subdomains:
| App | Icon | Mark |
|---|---|---|
| Family | 🏠 | Shield + house silhouette in cursor position |
| Blog | 📄 | Shield + text lines in cursor position |
| Admin | ⚙️ | Shield + gear overlay |
| Status | 📊 | Shield + bar graph in cursor position |
Each is the same shield frame + a single distinguishing element in the cursor area. Consistent family, instant recognition.
Usage Guidelines
- Minimum clear space: 1× mark height on all sides
- Do not: Recolor the mark outside brand palette
- Do not: Add effects (drop shadows, 3D, gradients beyond the defined one)
- Do not: Rotate or skew the mark
- Dark background: Use full-color mark (indigo glow)
- Light background: Use light-mark variant or solid dark version
- Favicon: Always transparent background, single-color or indigo
File Inventory
shared/design-tokens/brand/
├── logo-mark.svg # Primary logomark (dark mode)
├── logo-mark-light.svg # Light mode variant
├── wordmark.svg # Full wordmark lockup
├── favicon.svg # 32×32 favicon
└── BRAND.md # This spec
Next
- [ ] Matt reviews and approves
- [ ] Add Apple touch icon variant (180×180)
- [ ] Deploy to blog templates (replace 📝 emoji)
- [ ] Deploy to family dashboard (replace text logo)
- [ ] Deploy favicon to blog + family + root
- [ ] App icons for subdomain tiles (future)
This is the visual contract. Every pixel earns its place.
— Daedalus 🎨