System · Semantic Tokens · v1.0

Four colors, one truth.

The canonical semantic palette — green / yellow / red / cyan — used everywhere across MobDial. Every status, badge, toast, call-state, chart series and focus ring resolves to one of these four hues. Tuned for CRT-phosphor glow on dark, desaturated 25% on light.

4 CANONICAL TOKENS
16 ROLE BINDINGS
SOURCE OF TRUTH · LOCKED
WCAG AA · DARK ✓
01The Canonical Four
Hover for 3D tilt · Click hex to copy
SuccessOK · 200
LIVE
Online · Confirmed · Paid · Pickup
#12FFA0COPY
oklch 92% 0.27 153 · rgb 18 255 160
WarningWARN · 3xx
HOLD
Caution · Review · Pending · Hold
#FFD60ACOPY
oklch 92% 0.18 100 · hi-vis saffron
DangerFAIL · 5xx
DROP
Error · Blocked · Destructive · Hangup
#FF3B5CCOPY
oklch 66% 0.27 18 · crimson neon
InfoINFO · 1xx
PING
Brand · Focus · Link · Transfer
#00E5FFCOPY
oklch 87% 0.18 209 · neon cyan
02Role Matrix
Where each color carries meaning
SURFACE
SUCCESS
WARNING
DANGER
INFO
STATUS BADGE
Online · Live · Paid
Pending · Review
Failed · Blocked
Active · Selected
CALL STATE
Connected · Pickup
Ringing · On hold
Hangup · Dropped
Transfer · Dial
TOAST / ALERT
Saved · Sent · Done
Verify · Confirm
Error · Lost
Update · Notice
FORM STATE
Validated
Touched · Unsaved
Invalid · Required
Focus ring
CHART SERIES
Series 1 (primary)
Series 3
Series 4 · Losses
Series 2
CTA / BUTTON
PRIMARY · ✓ default
Caution action
Destructive · delete
Secondary link
METRICS DELTA
▲ Up · Good
— Flat · Watch
▼ Down · Bad
◇ Net new
03Live Demos · In Context
Every component, every color
Toast Stack · ephemeral status
✓
Call connected to +1 415 555 0142Audio path established · jitter 12ms
DISMISS
!
Carrier route degradedFailover to Vonage in 8s
DISMISS
×
Outbound call droppedSIP 487 — recipient ended call
DISMISS
i
New AI summary availableMo wrote a 4-line digest of this call
DISMISS
Banners · persistent system messages
Status Badges · pill format, dot optional, ALL CAPS, max 18 chars
LIVE CONNECTED PAID · ACTIVE WEBHOOK 200 OK PENDING REVIEW ON HOLD RINGING RATE LIMITED FAILED BLOCKED SIP 500 ERR OVERDUE TRANSFER DIAL OUT AI ACTIVE SELECTED FREE TRIAL EMERGENCY
Action Buttons · semantic CTAs
Metric Bars · dashboard readouts
UPTIME SLA99.96%
QUOTA USED62% of 10k min
FAILED ROUTES34 of 100 calls
AI HANDLED78% autonomous
04Where Each Color Lives
Component-by-component

SUCCESS · #12FFA0

15 documented uses
  • Primary brand CTA
  • Answer / accept button
  • Online presence dot
  • Webhook 2xx · API OK
  • Validated form field
  • Paid invoice badge
  • Up-trend metric arrows
  • "Connected" call state
  • Save · Send · Submit
  • Live transcription dot
  • Free trial badge solid
  • Chart series 1 (primary)
  • Focus ring on dark
  • Plan tier "Active"
  • Mo's idle eye color

WARNING · #FFD60A

9 documented uses
  • Pending review badge
  • On-hold call state
  • Ringing inbound state
  • Quota approaching limit
  • Unsaved changes dot
  • Carrier degraded warning
  • Trial expiring soon
  • Chart series 3
  • "Caution" destructive prompt

DANGER · #FF3B5C

11 documented uses
  • End / hangup call button
  • Call dropped state
  • Form validation errors
  • Webhook 5xx · API fail
  • Destructive delete action
  • Payment overdue alert
  • Down-trend metric arrows
  • Blocked / banned status
  • Required field marker
  • SIP error codes
  • Chart series 4 (losses)

INFO · #00E5FF

8 documented uses
  • Transfer call action
  • Dial-out / outbound state
  • AI active indicator
  • Selected row highlight
  • Informational toast
  • Hyperlinks (alt to brand)
  • Chart series 2
  • "New" or "Updated" tag
05Contrast Matrix · WCAG AA
Verified across 4 surfaces
VOID · #05060A
SUCCESS
17.8 : 1 ✓✓
WARNING
14.6 : 1 ✓✓
DANGER
5.2 : 1 ✓
INFO
12.4 : 1 ✓✓
SURFACE · #10131A
SUCCESS
15.2 : 1 ✓✓
WARNING
12.5 : 1 ✓✓
DANGER
4.5 : 1 ✓
INFO
10.6 : 1 ✓✓
ELEVATED · #1A1F2B
SUCCESS
12.8 : 1 ✓✓
WARNING
10.5 : 1 ✓✓
DANGER
3.8 : 1 ✓ lg
INFO
8.9 : 1 ✓✓
LIGHT · #F8F9FA — desat 25%
#0BA365
4.6 : 1 ✓
#A88800
4.8 : 1 ✓
#D63148
4.9 : 1 ✓
#0084A8
5.4 : 1 ✓
06Token Reference
Direct CSS variable bindings
VARIABLE
HEX
USE CASE
ALIAS
--md-success
#12FFA0
Online · Confirmed · Live
--md-brand · --md-call-active
--md-warning
#FFD60A
Pending · Caution · Hold
--md-call-ringing · --md-warning-amber
--md-danger
#FF3B5C
Error · Destructive · Drop
--md-crimson · --md-call-ended · --md-brand-red
--md-info
#00E5FF
Brand alt · Focus · Link
--md-brand-blue
--md-call-hold
#FF9F0A
Hold orange (warning + danger)
derived
--md-call-muted
#6B7280
Muted · disabled call state
neutral
07Do / Don't
The rules that keep the system tight
✓DO
  • Pair color with shape & text. Always: dot + label + (optional) icon. Never color alone.
  • Use ONE color per surface. A toast is success OR danger, never both.
  • Tint backgrounds at 6-12% alpha on dark. Solid fills only for primary action buttons.
  • Desaturate 25% on light surfaces — neon doesn't read on white.
  • Glow = state. Pulse only on live or attention-required states.
  • Match call-state semantics: green = pickup, red = hangup, yellow = ring/hold, cyan = transfer.
✕DON'T
  • Don't invent new hues. No teal, no orange-yellow, no magenta — only these four.
  • Don't mix gradients across roles. A success → info gradient creates ambiguity.
  • Don't use red for "important." Red means destructive or failed — only.
  • Don't put neon on neon. Background = void/surface, never another semantic color.
  • Don't rely on color alone for state. Colorblind users need text + shape too.
  • Don't use #F59E0B / #EAB308 / #EF4444 / #38BDF8. The old palette is deprecated — these 4 are the only allowed semantic tokens.