Tokens

Color

Purple stays. The published apps use indigo and violet. Campaign blue is extra — logo and merch — until we decide to migrate.

Shipped product

Brand indigo

--brand-indigo

Shipped: email wordmark “loop”, mobile primary, pricing gradient.

Dashboard violet

--primary

Shipped: web dashboard + landing + admin. Midnight Ember primary.

Rule: email, mobile, and decks that match the live apps use indigo. Dashboard UI uses violet. Do not remove these — customers already see them.

Campaign (additional)

Sampled from the logo ribbon and merch. Use on campaign art. Not a replacement for product purple.

Campaign blue

--brand-blue

Additional: logo ribbon, merch, campaign art. Not a replacement for purple yet.

Campaign navy

--brand-navy

Merch fabric and campaign plates.

Campaign blue deep

--brand-blue-deep

Ribbon folds and hover on campaign assets.

Campaign blue glow

--brand-blue-glow

Glow on campaign illustrations only.

Midnight Ember — dark surfaces

background

--background

App canvas — Midnight Ember

surface

--surface

Sidebar / recessed

card

--card

Cards, tables

card-hover

--card-hover

Hover lift

border

--border

1px hairlines

foreground

--foreground

Primary text

Light theme surfaces

Opt-in via [data-theme="light"]. Stripe-style: white base, warm-neutral surfaces, hairline borders over shadows.

background

--background

White canvas

surface

--surface

Off-white sidebar

card

--card

Cards

border

--border

Subtle borders, no heavy shadows

primary

--primary

Darker violet for contrast on white

foreground

--foreground

Near-black text

Neutral scale

Theme-constant — same HSL in light and dark.

--neutral-50

Lightest wash

100

--neutral-100

Light hover

200

--neutral-200

Light borders

300

--neutral-300

Disabled

400

--neutral-400

Placeholder

500

--neutral-500

Secondary text

600

--neutral-600

Muted on light

700

--neutral-700

Dark muted

800

--neutral-800

Elevated dark

900

--neutral-900

Light foreground

950

--neutral-950

Deepest

Chart palette

chart-1

--chart-1

Violet — primary series (dashboard)

chart-2

--chart-2

Cyan — scheduled / secondary

chart-3

--chart-3

Teal

chart-4

--chart-4

Amber — in progress

chart-5

--chart-5

Rose — en route (dashboard)

chart-6

--chart-6

Light violet

Semantic states

success

--success-500

Completed, paid, online

warning

--warning-500

Pending, due soon, high

destructive

--destructive-500

Cancelled, overdue, urgent

Mobile Stitch (shipped)

Shared by the customer and worker apps. Primary is indigo, not campaign blue.

primary

Shipped mobile primary

primaryContainer

Filled containers

secondary

Completed / success green

background

Outdoor-readable white

surface

Indigo-tinted surface

textPrimary

Body on light

statusEnRoute

En route

statusInProgress

In progress

statusLive

LIVE badge