MobDial DS · v1
40+ assets ● live
Design System · v1 · dark-sovereign

Operator-grade design system.

The dark-sovereign system powering MobDial — 40+ assets across type, color, spacing, components, and ui kits. One brand, one cosmos, every screen.

▸ Brand fonts
3
Sora · DM · JetBrains
▸ Color tokens
38
semantic + call states
▸ Components
30+
drop-in CSS · JS
▸ UI Kits
4
web · marketing · mobile · auth
▸ Screens
26
end-to-end production
▸ 01 · IDENTITY

The mark.

1 asset · 10 sections
MobDial
▸ OPERATOR · GRADE

▸ 01 · Brand

Logo & mark

3 official mascot poses · long-form lockup · icon mark · 10 sections covering construction, clearspace, lockups, color usage, and don'ts.

Open

▸ 01 · Brand colors

Status palette

Six neon status tokens · pure RGB primaries · waiting · connected · ringing · queued · voicemail · ended.

View
▸ 02 · TYPOGRAPHY

The voice.

5 assets · 3 families
Big moment.

▸ 02·a · Display

Display hero

Sora 800, -.03em tracking, 1.05 leading — for hero headlines and major moments.

View
XL · L · M · S
5-step display ladder

▸ 02·b · Display

Display scale

5 ramp steps from 32 to 96px with paired line-height and tracking values.

View
DM Sans
Operator clarity at 13–18px sizes.

▸ 02·c · Body

Body & lead

DM Sans 400/500/600/700 — every paragraph, table cell, button label.

View
▸ STATUS · LIVE · 04:17
+1 (303) 555-0182 · MOS 4.4

▸ 02·d · Mono

Mono labels

JetBrains Mono 600/700 — telemetry, IDs, timestamps, status pills.

View
Sora
DM Sans
JetBrains Mono

▸ 02·e · Families

Type families

The 3-family system — when to use each, full character grids, pairing rules.

View
▸ 03 · COLOR

The spectrum.

5 assets · 38 tokens

▸ 03·a

Brand palette

Six neon status tokens · canonical hex + HSL · when each one fires.

View

▸ 03·b

Semantic tokens

Success · warning · danger · info — paired surfaces, borders, focus rings.

View

▸ 03·c

Surface scale

5 elevation tiers from void to elevated — the layering language.

View

▸ 03·d

Call states

Pure RGB primaries — waiting cyan, connected green, ringing yellow, ended red.

View

▸ 03·e

Gradients & atmosphere

Hero gradients · nebula sweeps · the chroma vocabulary used across heroes.

View
▸ 04 · SPACING

The rhythm.

3 assets · 8pt grid

▸ 04·a

8pt scale

9 spacing tokens 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.

View

▸ 04·b

Border radii

From sharp 2px to round full — the corner language used on every surface.

View

▸ 04·c

Shadows & glows

5 elevation shadows · 4 brand-color glows for accent moments.

View
▸ 05 · COMPONENTS

The parts.

5 categories · 30+ drop-ins · live index ▸
PrimarySECONDARY

▸ 05·a

Buttons & CTAs

Primary · secondary · ghost · brand · cosmic · border-beam · send.

View
● LIVE ● QUEUED ● ENDED

▸ 05·b

Badges & pills

Status pills · count badges · tag chips · all semantic-token aware.

View

▸ 05·c

Cards & surfaces

Glass cards · spotlight cards · feature bento · team showcase.

View
+1 (303) 555-…

▸ 05·d

Inputs & controls

Text · select · toggle · radio · neon checkbox · wheel · credit card form.

View

▸ 05·e

Dialpad & call UI

Real DTMF synth · live waveform · AI whisper · contact-aware caller card.

View
▸ 06 · UI KITS

The products.

17 screens across 4 kits · all screens ▸

▸ 06·a · MARKETING

Marketing site

Home · pricing · status · integrations fan-out — public-facing surfaces.

Open

▸ 06·b · WEB APP

Console shell

9 routable screens — dashboard · live dialer · campaigns · contacts · reports · settings.

Open

▸ 06·c · AUTH

Sign in & signup

Multi-tenant · 5 OAuth · passkey · live email + password validation.

Open

▸ 06·d · MOBILE

iOS companion

7 iPhone screens — recents · keypad · in-call · voicemail · contact · SMS · settings.

Open