# HoffDesk Blog Design Tokens — v2

**Author:** Daedalus 🎨  
**Date:** 2026-04-22  
**Status:** Draft — for Matt review  
**Based on:** `design-v2-spec.md` (Content Pipeline v2)

---

## Design Philosophy

Functional Luxury applied to reading. Roman spa for the mind — calm, intentional, luxurious in restraint. Every pixel earns its place.

If Aundrea can't read it at 7 AM half-awake on her phone, it's wrong.

---

## Color Palette

### Base (Dark Mode — Refined)

| Token | Value | Usage |
|-------|-------|-------|
| `bg-primary` | `#0a0c10` | Page background — deeper black |
| `bg-secondary` | `#111318` | Elevated surfaces, cards |
| `bg-tertiary` | `#1a1d24` | Hover states, subtle elevation |
| `bg-card` | `rgba(17, 19, 24, 0.8)` | Glassmorphism cards |

### Borders

| Token | Value | Usage |
|-------|-------|-------|
| `border-default` | `rgba(255, 255, 255, 0.08)` | Default borders |
| `border-subtle` | `rgba(255, 255, 255, 0.04)` | Subtle separators |
| `border-hover` | `rgba(255, 255, 255, 0.12)` | Hover state borders |

### Text

| Token | Value | Usage |
|-------|-------|-------|
| `text-primary` | `#f0f1f5` | Headlines, primary content |
| `text-secondary` | `#9ca3af` | Secondary labels, timestamps |
| `text-tertiary` | `#6b7280` | Muted info, placeholders |

### Accent

| Token | Value | Usage |
|-------|-------|-------|
| `accent-primary` | `#818cf8` | Primary accent (indigo) |
| `accent-glow` | `rgba(129, 140, 248, 0.15)` | Subtle glow effects |

### Category Colors (Semantic)

| Token | Value | Usage |
|-------|-------|-------|
| `cat-homelab` | `#f97316` | Home Lab category |
| `cat-openclaw` | `#8b5cf6` | OpenClaw category |
| `cat-ai` | `#06b6d4` | AI News category |

---

## Typography

### Font Stack

| Token | Value | Usage |
|-------|-------|-------|
| `font-display` | `'Source Serif 4', Georgia, serif` | Article body, elegant reading |
| `font-body` | `'Inter', system-ui, sans-serif` | UI elements, headings, navigation |
| `font-mono` | `'JetBrains Mono', 'SF Mono', monospace` | Code blocks |

**Note:** Fonts loaded via Google Fonts. See implementation below.

### Fluid Type Scale

| Token | Value | Usage |
|-------|-------|-------|
| `text-hero` | `clamp(2rem, 5vw, 3rem)` | Article titles |
| `text-h1` | `clamp(1.75rem, 4vw, 2.5rem)` | Page headlines |
| `text-h2` | `clamp(1.5rem, 3vw, 2rem)` | Section headers |
| `text-h3` | `clamp(1.25rem, 2vw, 1.5rem)` | Subsection headers |
| `text-body` | `clamp(1rem, 1.5vw, 1.125rem)` | Body text |
| `text-caption` | `0.875rem` | Labels, meta |

### Body Text Settings

| Token | Value |
|-------|-------|
| `body-line-height` | `1.75` |
| `body-font-weight` | `400` |
| `h2-margin-top` | `6rem` |
| `h3-margin-top` | `4rem` |
| `p-margin-bottom` | `2rem` |
| `blockquote-margin` | `4rem 0` |
| `blockquote-padding` | `2rem 3rem` |

---

## Spacing Scale (Extended)

| Token | Value | PX | Usage |
|-------|-------|----|-------|
| `space-1` | `0.25rem` | 4px | Tight gaps |
| `space-2` | `0.5rem` | 8px | Inner padding small |
| `space-3` | `0.75rem` | 12px | Inner padding medium |
| `space-4` | `1rem` | 16px | Standard padding |
| `space-5` | `1.5rem` | 24px | Card padding |
| `space-6` | `2rem` | 32px | Section gaps |
| `space-8` | `3rem` | 48px | Large gaps |
| `space-10` | `4rem` | 64px | Page margins |
| `space-12` | `6rem` | 96px | Hero spacing |
| `space-16` | `8rem` | 128px | Page breathing room |

### Content Width

| Token | Value | Usage |
|-------|-------|-------|
| `content-max` | `680px` | Article body width for optimal readability |

---

## Layout

| Token | Value | Usage |
|-------|-------|-------|
| `header-height` | `64px` | Fixed header |
| `header-blur` | `blur(20px) saturate(180%)` | Glassmorphism effect |

---

## Animation & Transitions

| Token | Value | Usage |
|-------|-------|-------|
| `transition-fast` | `150ms ease` | Hover states |
| `transition-base` | `250ms cubic-bezier(0.4, 0, 0.2, 1)` | Card interactions |
| `transition-slow` | `350ms cubic-bezier(0.4, 0, 0.2, 1)` | Larger animations |

### Animation Keyframes

| Keyframe | Effect |
|----------|--------|
| `fadeInUp` | `opacity 0→1, translateY(20px→0), 600ms` |

---

## Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `radius-sm` | `0.375rem` | Pills, tags |
| `radius-md` | `0.75rem` | Cards |
| `radius-lg` | `1rem` | Large containers |

---

## Breakpoints

| Token | Value | Usage |
|-------|-------|-------|
| `mobile` | `< 640px` | Primary target |
| `tablet` | `640px – 1024px` | Secondary |
| `desktop` | `> 1024px` | Nice-to-have |

---

## Google Fonts Implementation

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```

---

## CSS Variables Summary

```css
:root {
  /* Colors */
  --bg-primary: #0a0c10;
  --bg-secondary: #111318;
  --bg-tertiary: #1a1d24;
  --bg-card: rgba(17, 19, 24, 0.8);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f1f5;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --accent-primary: #818cf8;
  --accent-glow: rgba(129, 140, 248, 0.15);

  /* Typography */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --text-hero: clamp(2rem, 5vw, 3rem);
  --text-h1: clamp(1.75rem, 4vw, 2.5rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --content-max: 680px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

---

## Aundrea Test

> Would Aundrea enjoy reading this at 7 AM, half-awake, on her phone?

**Target:** Yes. Serif body text feels like a real article, not a doc page. Generous spacing lets her skim without effort.

---

_Tokens are the contract between design and implementation. If you change a value here, it changes everywhere._

— Daedalus 🎨