Skip to main content
DESIGN SYSTEM · V5 PHOSPHOR · LIVE

Operator-grade design system.

Every .ds-* utility from apps/site/src/styles/ds-marketing.css rendered live. Cosmos backdrop is in the layout. Motion primitives are registered by MotionProvider - sprinkle data-rise, data-stagger, data-count anywhere and they animate on scroll.

5 PRs merged523 lines drop-in CSS6 motion primitives● cosmos backdrop live
01 · TYPE

The voice.

DISPLAY RAMP
2xl
xl
lg
md
sm
BODY + WEIGHTS

Body lg · 18px

Body md · 16/500

Body sm · 14/600

Body xs · 12/700

MONO TELEMETRY
▸ MONO · LG
▸ MONO · MD
▸ MONO · SM
▸ +1 (303) 555-0182 · MOS 4.4
02 · COLOR + GLOWS

The spectrum.

GLOW SM
0.35α
GLOW MD
0.45α
GLOW LG
0.55α
GLOW DANGER
red
03 · SPACING + RADII

The rhythm.

8PT SPACING SCALE
1
2
3
4
6
8
12
16

.ds-p-1 through .ds-p-24 · 4/8/12/16/.../96px

BORDER RADII
sm
md
lg
xl
2xl

.ds-radius-{sm,md,lg,xl,2xl,full}

04 · STATS + MOTION COUNT-UP

The numbers.

▸ ACTIVE CALLS
0
+12.4% / hour
▸ AGENTS ONLINE
0
98.4% uptime
▸ AVG CONNECT
0
p99 sub-500ms
▸ TCPA COMPLIANT
0
DNC + PEWC + AMD
05 · STATUS PILLS

The signals.

LIVEQUEUEDENDEDINFONEUTRAL
06 · FORM FIELDS

The inputs.

07 · SHADOWS

The depth.

SHADOW CARD

0 4px 24px / 0.3α

SHADOW ELEVATED

0 8px 40px / 0.5α

SHADOW MODAL

0 16px 64px / 0.6α

08 · MOTION PRIMITIVES

The choreography.

Sprinkle data-attributes anywhere - MotionProvider in layout.tsx registers them all on mount. prefers-reduced-motion clamps to instant.

DATA-RISE + DATA-STAGGER

First line rises at 0ms

Second at 120ms

Third at 240ms

Fourth at 360ms

DATA-COUNT
0
calls today
0
SLA
DATA-TYPEWRITER

> initializing dialer... ready.

DATA-MAGNETIC (hover the button)
© 2026 MOBDIAL · CLOSELAB LLC · BUILT IN FLORIDA, USA
v5 phosphor green#12FFA0● live
V13 · ADDITIVE EXTENSIONS · LIVE

The v13 additions.

Three new opt-in primitives on top of Dark Sovereign v5 — the Domino Jack brand display font, a pure-neon --color-status-* palette for telemetry chips and dialpad LEDs, and the SpriteAnimation component for TexturePacker JSON sprites. None of these override the existing --ds-* / --md-* tokens.

DOMINO JACK · 4 VARIANTS
CHROME
BEVEL
ENGRAVED
PUNCH

ALL CAPS · -0.02em · 700+. Hero headlines and section h2 only. Never use for body copy.

SPRITE ANIMATION

TexturePacker JSON · CSS background-position panning · no canvas. Respects prefers-reduced-motion (freezes on frame_000).

PURE-NEON STATUS PALETTE · 6 TOKENS
waiting#00FFFF · Awaiting carrier
connected#0BFF01 · In-call
ringing#FDFE02 · Ringing
queued#4A64FF · Queued
voicemail#FE00F6 · Voicemail
ended#FE0000 · Hangup / dropped

Use via .v13-status-dot[data-state="..."] or import DSStatusColor from @mobdial/tokens. Existing --md-call-* aliases remain unchanged for back-compat.