💬 MsgBurst

Design Tokens — Single Source of Truth

One token set, one accent family, applied identically on every page. This page documents the canonical values — edit the source in public/css/design-system.css (:root, --mb-* tokens), then mirror any change here.

v2026-08-17 · brand-unification pass

60% Base

Light neutral canvas, white surfaces, slate borders. Eyes never strain.

30% Secondary

Charcoal text + slate sidebar. Green reads as accent, never competes.

10% Accent

Brand green #0d8b6f — the only CTA accent. Channel & status colors stay off CTAs.

10% Brand Accent — the single CTA color

Every primary action on every page uses this family: landing hero, pricing Pro, nav, app save buttons, settings sender-mode, sidebar active pills. Hover darkens; gradient light is used only inside gradients.

Brand

--mb-brand

#0d8b6f

Primary CTA · links · active states

Brand Strong

--mb-brand-strong

#076b5b

Hover · pressed · focus

Brand Light

(gradient stop)

#12a594

Gradient light stop only

Brand Soft

--mb-brand-soft

#e7f7ef

Badges · tinted labels

CTA Gradient

linear-gradient

#0d8b6f → #12a594

All .btn-primary

CTA Hover

linear-gradient

#0d8b6f → #076b5b

All .btn-primary:hover

30% Text & Neutrals

True charcoal, no green tint. Sidebar uses slate for dark surfaces.

Ink

--mb-ink · --text-primary

#111827

Headings · body text

Text

--mb-text · --text-secondary

#475569

Secondary text · labels

Muted

--mb-muted

#627872

Tertiary text

Faint

--mb-faint

#8ba19a

Placeholders · disabled

Slate 900

sidebar bg

#0f172a

Sidebar top

Slate 800

sidebar bg-2

#1e293b

Sidebar bottom

60% Surfaces & Borders

The quiet 60% — backgrounds and hairlines that give the green room to pop.

Canvas

--mb-canvas

#f4faf7

Page background

Surface

--mb-surface

#ffffff

Cards · panels

Surface Soft

--mb-surface-soft

#f7fbf8

Alt rows · wells

Surface Hover

--mb-surface-hover

#eef8f2

Hover bg · active tint

Line

--mb-line

#d8e7de

Borders · dividers

Line Strong

--mb-line-strong

#b9d5c5

Emphasized borders

↗ Status Colors — semantic only

Never used on primary CTAs. Meaning is carried by color: green = success, amber = warning/promo, red = error, blue = info.

Success

--success

#16a34a

Delivered · done · valid

Success Border

--success-border

#bbf7d0

Status pill borders · tinted outlines

Success Strong

--success-strong

#15803d

Text on success tints · pill labels

Warning / Promo

--warning

#d97706

Warnings · offers · amber only here

Warning Strong

--warning-strong

#92400e

Text on warning tints

Error

--error · --mb-danger

#dc2626

Failures · destructive

Error Strong

--error-strong

#b91c1c

Text on error tints

Info / Tool

--info · --mb-tool

#2563eb

Info · external tools

Billing / Gold

--mb-billing

#b7791f

Wallet · credits

Billing Soft

--mb-billing-soft

#fffbeb

Wallet badge bg

📡 Channel Colors — coding, not CTAs

Each channel owns its color, and only on its own cards/icons/badges. WhatsApp stays green everywhere it appears; it is never a generic CTA color.

--green-primary

#25d366

WA icons · badges · widgets

WhatsApp Dark

--green-dark

#128c7e

WA gradients · footer

WhatsApp Deep

--green-darker

#075e54

WA dark surfaces

Email / Blue

--mb-tool

#2563eb

Email channel · links

—

#0088cc

Telegram channel

SMS / Amber

—

#f59e0b

SMS channel cards

🎨 Channel Gradients — campaign modal & platform cards

Each channel's gradient uses its primary color → a darker variant. Campaign-modal header + done-button and platform-card icons all consume these pairs.

WhatsApp Gradient

—

#25d366 → #128c7e

Default modal header · done-btn

Email Gradient

var(--mb-tool) → #1d4ed8

#2563eb → #1d4ed8

Email modal header · done-btn · platform-card

Telegram Gradient

—

#0088cc → #006699

Telegram modal header · done-btn · platform-card

SMS Gradient

— → var(--warning)

#f59e0b → #d97706

SMS modal header · done-btn · platform-card

Box-shadows use the primary color at 28–30% opacity. Dark-mode text tokens (--success-strong, --warning-strong) are used for value highlights inside the modal.

🌙 Dark Theme (optional)

Dark tokens are neutral slate, never green-tinted. Default stays light.

Dark Text Primary

html[data-theme="dark"] --text-primary

#f1f5f9

Dark Text Secondary

--text-secondary

#cbd5e1

Dark Text Muted

--text-muted

#94a3b8

Dark Canvas

html[data-theme="dark"] --mb-canvas

#0b1120

Page background

Dark Surface

--mb-surface

#131c30

Cards · panels

Dark Surface Soft

--mb-surface-soft

#101a2e

Alt rows · zebra stripes

Dark Surface Hover

--mb-surface-hover

#1e293b

Hover bg · active tint

Dark Line

--mb-line

#243349

Borders · dividers

Dark Line Strong

--mb-line-strong

#334155

Emphasized borders

Dark Faint

--mb-faint

#64748b

Placeholders · disabled

📏 Radii & Shadows

Radius

--mb-radius

8px

Radius Small

--mb-radius-sm

6px

∞

Radius Pill

--mb-radius-pill

999px

Shadow Sm

--mb-shadow-sm

0 6px 18px rgba(16,32,29,.07)

Shadow Md

--mb-shadow-md

0 14px 34px rgba(16,32,29,.10)

Focus Brand

--mb-focus-brand

0 0 0 4px rgba(13,139,111,.15)

✓ Usage Rules (the good behavior)

One CTA accentEvery primary action = brand green #0d8b6f. No teal, no amber, no blue on buttons.
Channel codingWhatsApp green / SMS amber / Telegram blue appear only on their own channel UI — never as generic accents.
Status semanticsSuccess/warning/error/info colors carry meaning; never used decoratively on CTAs.
Amber = promo/warning only#d97706/#f59e0b for offers, warnings, Waiting states — never a primary button.
Charcoal textText is neutral #111827/#475569 — green-tinted text is deprecated.
One source of truthChange tokens in design-system.css :root; never hardcode hex in page styles.

Primary action Secondary WhatsApp channel ✓ Delivered ⚠ Offer ✕ Failed

⎘ Canonical CSS (copy to your page)

The minimal token block every page should consume. Full set lives in public/css/design-system.css.

:root {
  /* 60% base */
  --mb-canvas: #f4faf7;          --mb-surface: #ffffff;
  --mb-surface-soft: #f7fbf8;    --mb-surface-hover: #eef8f2;
  --mb-line: #d8e7de;            --mb-line-strong: #b9d5c5;

  /* 30% text / neutrals */
  --mb-ink: #111827;             --mb-text: #475569;
  --mb-muted: #627872;           --mb-faint: #8ba19a;
  /* sidebar dark: #0f172a → #1e293b */

  /* 10% accent — single CTA color */
  --mb-brand: #0d8b6f;           --mb-brand-strong: #076b5b;
  --mb-brand-soft: #e7f7ef;
  /* CTA gradient:  linear-gradient(135deg, #0d8b6f, #12a594) */
  /* CTA hover:     linear-gradient(135deg, #0d8b6f, #076b5b) */

  /* status (semantic only) */
  --success: #16a34a;            --warning: #d97706;
  --error: #dc2626;              --info: #2563eb;

  /* channels (own UI only) */
  --wa-green: #25d366;           --wa-dark: #128c7e;
  --email-blue: #2563eb;         --tg-blue: #0088cc;
  --sms-amber: #f59e0b;

  --mb-radius: 8px;              --mb-radius-sm: 6px;
  --mb-radius-pill: 999px;
}