# 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

![Logomark](../logo-mark.svg)

**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

![Wordmark](../wordmark.svg)

**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

1. **Minimum clear space:** 1× mark height on all sides
2. **Do not:** Recolor the mark outside brand palette
3. **Do not:** Add effects (drop shadows, 3D, gradients beyond the defined one)
4. **Do not:** Rotate or skew the mark
5. **Dark background:** Use full-color mark (indigo glow)
6. **Light background:** Use light-mark variant or solid dark version
7. **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 🎨