# HoffDesk Design Tokens — Sprint 1

**Author:** Daedalus 🎨
**Date:** 2026-04-19
**Status:** Active — Sprint 1

---

## Design Philosophy

Functional Luxury. Dark mode default. Mobile-first. Every pixel earns its place.
If Aundrea can't read it at 7 AM in two seconds, it's wrong.

---

## Color Palette

### Base (Dark Mode)

| Token | Value | Usage |
|-------|-------|-------|
| `bg-primary` | `#0f1117` | Page background |
| `bg-secondary` | `#1a1d27` | Card background |
| `bg-tertiary` | `#252836` | Card hover / elevated surfaces |
| `border-default` | `#2e3142` | Card borders, dividers |
| `border-subtle` | `#1e2130` | Subtle separators |

### Text

| Token | Value | Usage |
|-------|-------|-------|
| `text-primary` | `#e8e9ed` | Headlines, primary content |
| `text-secondary` | `#9ca0b0` | Secondary labels, timestamps |
| `text-tertiary` | `#6b7084` | Muted info, placeholders |
| `text-inverse` | `#0f1117` | Text on accent backgrounds |

### Accent

| Token | Value | Usage |
|-------|-------|-------|
| `accent-primary` | `#6366f1` | Primary actions, active states, links |
| `accent-primary-hover` | `#818cf8` | Hover state for primary accent |
| `accent-soft` | `rgba(99, 102, 241, 0.12)` | Subtle accent backgrounds |

### Semantic — Status

| Token | Value | Usage |
|-------|-------|-------|
| `status-healthy` | `#22c55e` | System OK, green pill |
| `status-degraded` | `#f59e0b` | Partial service, yellow pill |
| `status-critical` | `#ef4444` | Service down, red pill |
| `status-healthy-bg` | `rgba(34, 197, 94, 0.12)` | Healthy card tint |
| `status-degraded-bg` | `rgba(245, 158, 11, 0.12)` | Degraded card tint |
| `status-critical-bg` | `rgba(239, 68, 68, 0.12)` | Critical card tint |

### Weather

| Token | Value | Usage |
|-------|-------|-------|
| `weather-temp-warm` | `#f97316` | Temps ≥ 75°F |
| `weather-temp-mild` | `#22c55e` | Temps 50–74°F |
| `weather-temp-cool` | `#3b82f6` | Temps 32–49°F |
| `weather-temp-cold` | `#8b5cf6` | Temps < 32°F |

---

## Typography

**Font stack:** `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
**Served:** System font only — zero external font loads for Sprint 1.

| Token | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| `text-display` | `1.875rem` (30px) | 700 | 1.2 | Page title ("Today") |
| `text-headline` | `1.25rem` (20px) | 600 | 1.3 | Card titles ("Calendar", "Weather") |
| `text-body` | `1rem` (16px) | 400 | 1.5 | Event names, weather condition |
| `text-body-sm` | `0.875rem` (14px) | 400 | 1.5 | Secondary info, timestamps |
| `text-caption` | `0.75rem` (12px) | 500 | 1.4 | Labels, tags, status pills |
| `text-mono` | `0.875rem` (14px) | 500 | 1.3 | Numbers, temps, times |

---

## Spacing

Based on 4px grid.

| Token | Value | 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-6` | `1.5rem` (24px) | Card padding |
| `space-8` | `2rem` (32px) | Section gaps |
| `space-12` | `3rem` (48px) | Page margins |

---

## Border Radius

| Token | Value | Usage |
|-------|-------|-------|
| `radius-sm` | `0.375rem` (6px) | Status pills, tags |
| `radius-md` | `0.75rem` (12px) | Cards |
| `radius-lg` | `1rem` (16px) | Large containers |

---

## Shadows

| Token | Value | Usage |
|-------|-------|-------|
| `shadow-card` | `0 1px 3px rgba(0,0,0,0.3)` | Default card elevation |
| `shadow-card-hover` | `0 4px 12px rgba(0,0,0,0.4)` | Card hover state |

---

## Animation

| Token | Value | Usage |
|-------|-------|-------|
| `transition-fast` | `150ms ease` | Hover states, color changes |
| `transition-base` | `250ms ease` | Card interactions |
| `poll-interval` | `30000ms` | HTMX auto-refresh (30s per plan) |

---

## Breakpoints

| Token | Value | Usage |
|-------|-------|-------|
| `mobile` | `< 640px` | Primary target — phone |
| `tablet` | `640px – 1024px` | Secondary |
| `desktop` | `> 1024px` | Nice-to-have, Sprint 1+ |

Sprint 1 targets `mobile` only. Tablet/desktop refinements are Sprint 2+.

---

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