Design System — Command Center

Canonical source of truth: docs.madebyaspire.com/aspiredigital/design-library — v2 locked 2026-04-16 by Vegas.

This page mirrors what's live there. Aria never invents tokens — she pulls from upstream. When Vegas ships v2.1, this page + global.css get updated to match.

Local mirror: ~/projects/aspire-digital/playbook/public/styles/playbook.css

Color palette

Five surface colors + four content colors. Terracotta is the do-something color; hunter is the primary CTA. Forest is for icons + tags on white only — fails AA on cream.

Cream canvas

#FAF0E2 · --bg

Page canvas, primary background

Alt surface

#F2EDE6 · --bg-alt

Card alt surface, footer

White

#FFFFFF · --white

Card body, panel base

Dark canvas

#2B2D2B · --bg-dark

Studio Dark canvas (Phase 7 toggle)

Text

#1A1A1A · --text

Body copy, headlines

Terracotta

#C4622D · --terra

Large text only (≥18pt), accents, top borders

Terra-dark

#A34E1A · --terra-dark

Body links (AA-safe 5.73:1)

Hunter green

#2D5940 · --hunter

Primary CTAs — v2's new green

Forest

#4A7B5A · --forest

Icons, tags — on white only

Sage

#8FAF8A · --sage

Decorative atmosphere ONLY · NEVER text

Text secondary

#666666 · --text-sec

Captions, meta, labels

Border

#E5E5E5 · --border

Default dividers, card outlines

Typography

Four faces. DM Serif Display for headlines, DM Sans for body/UI, EB Garamond italic for accents/quotes, Unbounded for numerals.

H1 · Hero — DM Serif Display 400

Every lane, one dashboard.

clamp(40px, 7vw, 88px) · line 1.06 · letter-spacing −0.02em

H2 · Section — DM Serif Display 700

The Lightning Truck stops here.

~40px / 2.5rem · line 1.2

H3 · Card — DM Serif Display 600

Today's keystone

~28px / 1.75rem · line 1.3

Body — DM Sans 400

A private second brain — personal, agency, finance, family — surfaced as one calm interface. Built for the days when one thing is screaming and four others quietly need an answer.

18px / 1.125rem · line 1.78

Lead — DM Sans 400

Direction locked. Scope locked. Quality bar locked.

20px / 1.25rem · line 1.65

Label / Caps — DM Sans 600

RIGHT NOW · OPS-52 · ACTIVE

12px · letter-spacing 2px · uppercase

Accent / Quote — EB Garamond 400 italic

Reminder: you're not behind on Aspire. You're a founder. Behind is the baseline.

19px / 1.2rem · line 1.55

Numerals — Unbounded 900

79 / 92

stat displays, big numbers, tabular

Buttons

Hunter for primary CTAs (the most important "do this" action). Terracotta for secondary "this is a brand moment." Ghost for tertiary.

Pills / Tags

Compact status/category labels. Default is charcoal (passive), variants for state.

Default Terra Hunter Outline

Eyebrow (section badge)

v2 spec: 6px 20px 6px 6px padding · 34px circular icon container · 9999px radius. The page header on every InfoLayout page uses this pattern.

push_pin Pinned · OPS-52

Icons — Material Symbols Outlined

One icon family across the entire CC. Variable weight + fill. Default size 24px, sm 18px, lg 32px. Zero emoji in page chrome (Phase 4 swept all 74 emoji= props to symbol names).

target push_pin bolt light_mode sync route rocket_launch mic payments credit_card handshake psychology smart_toy trending_up bar_chart

Spacing

Token	Value	Purpose
--space-section	80px	Between major page sections
--space-card	32px	Inside cards + panels
--space-grid	24px	Between grid items
--space-component	16px	Inline gaps, component internals

Border radius

Five tiers. v2 added the 20px XL tier for engagement panels.

6px

10px

16px

20px

∞

Shadow tiers

Three depth tiers. Subtle for cards at rest, medium on hover/modals, strong for emphasis.

subtle

medium

strong

Critical color rules

Hunter green is the primary CTA color. Use it for the most important "do this" button on any view. One per section, ideally.
Terracotta is for large text only (≥18pt). For body links, use Terra-dark #A34E1A instead — it passes AA at 5.73:1.
Forest green works on white only. On cream it fails contrast (4.36:1). On white it passes (4.92:1).
Sage is decorative only. Never text on sage. Sage on cream gives 2.15:1 — completely fails AA.
One terracotta moment per section. Terracotta competing with itself = nothing reads as "go." One dominant use, others reduced.

Studio Dark

Toggle in the topbar (sun/moon icon). State persists in localStorage['aria-cc-theme']. Dark canvas is warm #2B2D2B (matches the cream's temperature), not the cold zinc-900 the legacy theme used. Terracotta and hunter both pop on the warm dark.

How CC inherits from v2

All token definitions live in sites/command-center/src/styles/global.css. The CSS variables and opt-in component classes (.aspire-card, .aspire-btn-primary, .h-display, etc.) are consumed by InfoLayout.astro + the 4 hand-styled pages.

Phase 1 · Tokens — v2 CSS variables + Google Fonts loaded in global.css
Phase 2 · Layout chrome — InfoLayout.astro rewritten; 75 pages auto-inherit
Phase 3 · Hand-styled pages — dashboard, landing, linear-architecture rebuilt; willowbrook-drb deferred (already aligned)
Phase 4 · Icons — emoji emoji="target" swept to symbol names emoji="target" across 74 pages
Phase 5 · Body content drift — every bg-zinc-*, text-zinc-*, border-zinc-* utility class replaced with v2 equivalents · dark gradient backgrounds replaced with stone/cream surfaces
Phase 6 · Copy edit — marketing hyperbole stripped from landing + dashboard (done in Phase 3)
Phase 7 · Studio Dark — toggle button in topbar, localStorage-persisted, warm-charcoal canvas
Phase 8 · This page — canonical v2 mirror so any future CC page has a one-click reference