Design system

Tokens live in src/app/globals.css (@theme). Warm paper, near-black ink, one coral Spotlight accent. No gradients, no hardcoded colors in components. Grep enforces it.

Color tokens

paper

card

ink

muted

line

spotlight

spotlight-soft

spotlight-ink

success

success-soft

warning

warning-soft

surface-warm

Type

Space Grotesk: display

Inter: body text, product UI, email.

Display for headlines, wordmark, and money figures. Body for everything a creator reads at speed.

Buttons & badges

Spotlight badgePaidDue soonDraftAI draftSample dataPreview only

SampleBadge and PreviewBadge are honesty primitives: any surface rendering demo data or a non-functional preview must carry one. They are design-system components, not afterthoughts.

Avatars & stats

Avatar colors use semantic tokens only, never per-brand hex values.

$5,400

Outstanding

With a plain-language sub-line

27.5 days

Average days-to-pay

The metric chasing shrinks

+$700

Rate uplift

Agreed vs first quote

Progress

2 of 3 deliverables done. Deal-card progress bar.

AI patterns: draft → approve

The core product pattern. Anything AI-generated renders inside a DraftPanel with an ApproveBar. Nothing sends without a human action, and preview controls say so.

Pricing copilot: suggestion

AI draft

Counter at $3,100. Usage rights are priced as their own line item in this draft.

Preview only. These controls don't send or save anything yet.

AI draft: in your voice

Inbound bubble: warm surface, left aligned.

AI/human reply bubble: ink, right aligned.

Compliance primitives (Phase 2, designed now)

17h 42m left in the 24h windowQueue position 1 · sends after approvalHuman handoff offHuman handoff on

Window countdown: the Meta 24h rule, visible in the thread, never hidden.
Queue / ETA: pacing to platform limits presented as a feature.
Human handoff: one toggle, AI stands down immediately.
Automation disclosure: AI drafts are always labelled as AI drafts.

Card

White surface, 22px radius, 1.5px line border. Used for deal cards, DM threads, pricing panels, and marketing sections.