Command Center — Branding Directions

The Command Center isn't actually 1990s — it's something worse for a demo: late-2021 AI-startup landing page. The animated gradient orbs, shimmer text, eight competing accent colors, and emoji-as-iconography all read as a personal hobby project from the height of the LLM gold rush. Premium tools in 2026 — Linear, Raycast, Stripe Dashboard, Arc — went the opposite direction: monochrome canvas, one disciplined accent, real icons, type that does the heavy lifting.

Diagnosis — what's costing you the "premium" read

Emoji as icons — 🎯 📌 ⚡ ✓ 💭 ☀️ 🔄 🛣️ 🚀. The single biggest tell. Reads as "Slack channel from 2018" or "personal blog," never as a $1k/mo tool.
Eight-accent rainbow — emerald, pink, amber, violet, teal, rose, blue, purple, sky. Pulls the eye everywhere. Premium tools commit to one accent + a state palette (red/amber/green) for status only.
Orbs + shimmer + animated hero gradient — peaked 2021. By 2026 it lands as "trying too hard." Linear, Vercel, Raycast all stripped this years ago.
Hyperbolic copy — "Your second brain, always on / Zero things falling through the cracks / Powered by AI that knows your world." This is landing-page voice, not tool voice. Tools whisper; landing pages shout.
No design tokens — pure Tailwind utilities, every page is one-off styled. Means every refresh has to be applied to every page by hand.
Single dark theme, no toggle — Jaime reads in daylight, you read late-night. Premium tools default light + offer studio dark.

What premium tools actually do in 2026

Three reference points worth absorbing before picking a direction:

Linear — three tokens (base, accent, contrast). Inter sans on near-black, one purple accent, monochrome neutrals everywhere else. The whole product is calm because nothing competes for your eye.
Raycast — sleek charcoal chrome with vibrant gradient accents used as seasoning, not the meal. Mono-style numbers, hairline icons, surfaces only as deep as needed.
Vegas's Aspire playbook (you already paid for this) — cream + terracotta + forest + charcoal, DM Serif Display headlines / DM Sans body / Unbounded numbers, Material Symbols icons, light-default with dark toggle, reading-progress bar, ⌘K search. Battle-tested design system you own.

The four directions

A · Quiet Cockpit

— Linear school

Near-black canvas, one violet accent, Inter throughout. Strip every emoji, replace with Lucide line icons. Pretend it's a fintech internal tool. The CC becomes invisible so the work shows through.

Type: Inter (everything). JetBrains Mono for numbers/timestamps.
Icons: Lucide line icons, 16–20px, 1.5 stroke. Zero emoji.
Accent: One — violet #8B7CFF. Status uses red/amber/green only.
Demo feel: "Wait, what is this thing? It looks like an internal Stripe tool."
Migration: low tokens + 2 layouts + emoji sweep. Pages keep structure.
Risk: Loses warmth. Could read anonymous. No personality cushion if a page is unfinished.

Today's keystone

Lightning Truck — Repair Tracker

OPS-52 · Call scripts ready, three dealers within 30 mi of 43015, CRC + Roadside playbook live. Open before dialing.

✓ Picked · 2026-05-19

B · Aspire-Coherent

— one umbrella brand

Adopt the canonical Aspire Digital Design Library v2 (locked 2026-04-16 by Vegas) wholesale. Cream + terracotta + hunter/forest green + charcoal, light by default, "studio dark" toggle for late-night work. DM Serif Display headlines · DM Sans body · Unbounded for numbers · EB Garamond italic for accents. Material Symbols Outlined replace every emoji. The through-line between your CC, the Aspire playbook, and client sites becomes the demo.

Source: docs.madebyaspire.com/aspiredigital/design-library — v2, locked 2026-04-16 by Vegas. Single source of truth. Aria never drifts.
Type: DM Serif Display (display, 400 + italic) · EB Garamond (accent quotes, italic 400/600) · DM Sans (body/UI, 300–700) · Unbounded (numerals, 700/900).
Icons: Material Symbols Outlined — 28-icon canonical set. Zero emoji.
Color rules: Hunter #2D5940 = primary CTA · Terracotta #C4622D = large text only (≥18pt) · Accent dark #A34E1A = body links · Forest #4A7B5A = icons/tags on white only.
Light/dark: Light default (#FAF0E2) · Studio Dark toggle uses #2B2D2B dark canvas, terracotta accent persists.
Radii: 6 / 10 / 16 / 20 / 9999px (v2 added the 20px tier for engagement panels).
Demo feel: "You and your agency made this? Of course you did — it all looks like one company."
Migration: med tokens lifted from playbook.css + 2 layouts (light + dark) · ~30 pages inherit automatically · emoji sweep.
Risk: Fuses Aria visually with Aspire. Good for brand compounding now; complicates a future "Aria as standalone product" spin-out.

Today's keystone

Lightning Truck — Repair Tracker

OPS-52. Call scripts ready, three dealers within 30 miles of 43015, CRC + Roadside playbook live. Open this before dialing.

C · Editorial Daily Edition

— a private newspaper for one

The CC reads like a curated daily newspaper. Off-white canvas, serif everywhere, real grid columns, generous whitespace. Color is used only for status (P1 red, pending amber, done green). Section labels are hairline rules with editorial caps. The "Right Now" card lands like a New Yorker pull-quote.

Type: Tiempos Headline (or DM Serif Display fallback) · Lyon Text body · ABC Diatype labels.
Icons: Tabler hairline (1.25 stroke), small, used sparingly. Mostly type does the work.
Accent: None decorative. Color = state. Black is the brand.
Demo feel: "This feels like the Bloomberg terminal's premium tier. Where do I subscribe?"
Migration: high typographic system overhaul · grid system · most layout work of the four.
Risk: Serif on mobile needs care. If executed lazily reads as "Substack template." Highest skill ceiling, highest ceiling.

Today's Keystone

The Lightning Truck stops here.

"Three dealers within thirty miles. Call scripts ready. Open this before dialing." — OPS-52, ongoing.

D · Mission Control

— cockpit, not landing page

Near-black canvas with a faint grid background, ONE warm signal-amber accent, JetBrains Mono for all numbers/IDs/timestamps, Inter for prose. A persistent status bar across the top: lane heat, urgent count, time-of-day phase. The CC stops being a webpage and starts feeling like a tool you launch.

Type: Inter (prose) · JetBrains Mono (numbers, IDs, lane codes, timestamps).
Icons: Lucide line icons + Material Symbols rounded mix. Mono labels.
Accent: Signal amber #F59E0B. State: red/amber/green for severity.
Demo feel: "What are you actually running there?" Strongest "wait what is THAT" reaction.
Migration: med layouts + tokens + status bar component · grid backgrounds replace orbs.
Risk: Dark-only excludes daytime readability (Jaime). Could solve with light "ops mode" toggle, but adds work.

OPS-52 · ACTIVE

Lightning Truck — Repair Tracker

Three dealers within 30mi · 43015 · call scripts ready · CRC + Roadside playbook live · open before dialing.

Side-by-side

Option	Vibe	Demo reaction	Migration	Risk
A · Quiet Cockpit	Linear-school monochrome	"This is a serious tool."	low	Reads anonymous · no personality buffer
B · Aspire-Coherent	Editorial light · earth tones	"Same hands made all of this."	med	Fuses Aria + Aspire brand identity
C · Editorial	Private newspaper · serif-first	"Bloomberg-terminal premium."	high	Highest skill ceiling · easy to botch
D · Mission Control	Cockpit dark · one signal accent	"What are you running there?"	med	Dark-only · Jaime daytime read

✓ Decided · 2026-05-19

Option B — Aspire-Coherent, sourced from the canonical Aspire Digital Design Library v2 (locked 2026-04-16 by Vegas), with a "Studio Dark" toggle that borrows from D for late-night work.

Why this was the right call:

Free, current design system. Vegas already solved palette, type, contrast, components, and accessibility — and v2 (April lock) is more refined than v1.1: Hunter Green for CTAs, terracotta restricted to large text only, harder charcoal, new 20px radius tier. Aria inherits the latest, never drifts.
Single source of truth. The live design library at docs.madebyaspire.com is canonical. When Vegas ships v2.1, Aria pulls the diff — CC stays in lockstep with client sites for free.
Brand compounding. When you demo Aria, then show the agency playbook, then a client site, the through-line tells the story before you do. "I built this entire stack" only lands if it looks like one stack.
Light-default + studio-dark covers both demo modes. Sunday morning over coffee with Jaime: warm cream. Friday night solo work: warm charcoal #2B2D2B with terracotta + hunter. Same tokens, two surfaces.

The one accepted cost: if you ever spin "Aria" out as a standalone product, the visual sibling to Aspire will need to be unwound. That's a 2027+ problem and you'll have earned the design budget by then.

Migration phases (preview — we'll plan in detail next)

Roughly 30 pages exist under /info. They all extend InfoLayout.astro, which means tokens in one file cascade to all of them. Order matters here:

Phase 1 — Tokens from v2 (1 sitting). Pull the canonical v2 CSS variables directly from docs.madebyaspire.com (or read ~/projects/aspire-digital/playbook/public/styles/playbook.css as the local mirror). Drop into sites/command-center/src/styles/global.css alongside the Tailwind import. Add v2-correct Google Fonts link (DM Serif Display + DM Sans + EB Garamond + Unbounded + Material Symbols Outlined).
Phase 2 — Layouts (1 sitting). Rewrite InfoLayout.astro + Layout.astro against v2 tokens. Cream #FAF0E2 canvas, white cards, DM Serif Display headlines, Material Symbols nav icons. Mount Vegas's reading progress bar + scroll-to-top button while we're in there. All 30 info pages inherit on next build.
Phase 3 — Dashboard + Landing (1 sitting). Rewrite dashboard/index.astro and index.astro. Kill orbs, shimmer text, hyperbolic copy. "Right Now" card: white surface, terracotta top-border (5px), DM Serif headline, hunter green CTA. These two pages do the heavy "demo" lifting so they get hand-tuned, not just inherited.
Phase 4 — Emoji → Material Symbols sweep (background pass). Find/replace across pages: 🎯 → target, 📌 → push_pin, ⚡ → bolt, 🔄 → sync, ☀️ → light_mode, 🛣️ → route, 🚀 → rocket_launch. Use the 34px circular eyebrow-badge pattern from v2 for section headers. Each replacement is one line.
Phase 5 — Copy edit. "Your second brain, always on" → tool voice. Most existing copy is already fine; this is a 20-minute audit of the landing + dashboard.
Phase 6 — Studio Dark toggle. Mirror Vegas's localStorage('playbook-theme') pattern but namespace it aria-cc-theme. Dark variant uses #2B2D2B canvas with terracotta accent — same warm temperature as the cream, not the cold zinc-900 we have now.
Phase 7 — Generate /info/design-system. Mirror the v2 spec locally so future Aria-generated CC pages have a one-click reference. Make it auto-link to the upstream v2 doc as the canonical source. One-time, makes every future page free.

Phases 1–2 are the "before / after" demo. If you only had two hours, this is what you'd do. The rest can roll in over a week without breaking anything.

Still open before we touch code

Direction is locked (B · v2). These are the remaining calls I need from you before Phase 1:

Demo moment — what's the ONE page you usually open first when showing someone? That's the page that gets hand-tuned beyond inheritance in Phase 3. (Dashboard? Today's briefing? Lightning Truck pinned card?)
Scope guardrail — freeze the existing client-facing pages under /willowbrook-drb/041826/ from the migration? My recommendation: yes, freeze. Those already shipped to HOA members and have their own visual identity.
Studio Dark scope — ship dark in Phase 6 (separate, after light is locked) or fold into Phase 2? My recommendation: Phase 6. Light-first ensures the v2 spec is faithfully implemented before forking.
Aria's voice in the rewrite — the dashboard has personality (daily quips, "Right Now" framing, capture nudges). Keep tone, restyle container? My recommendation: yes — tone stays Aria, visual container becomes Aspire-v2. Voice is yours; chrome is Vegas's.

Canonical source: docs.madebyaspire.com/aspiredigital/design-library — v2 locked 2026-04-16 by Vegas. Local mirror: ~/projects/aspire-digital/playbook/public/styles/playbook.css. References pulled while drafting: Linear's redesign retrospective · LogRocket's "Linear design vs. brutalism" · the Aspire v2 design library spec.