📄 blog-v2.md 6,602 bytes Apr 22, 2026 📋 Raw

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

<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

: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 🎨

← Back