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.