DSDesign system · v1 · 2026-05-07

A light command-centre.

Brand-aligned tokens, typography, and components for the celliq product UI. Built against the CellIQ Brand Bible v1.0 in light theme.

↘ Alignment ↘ Colour ↘ Channel coding ↘ Typography ↘ Stats ↘ Components ↘ Spacing ↘ Voice & tone ↘ Don't
All mocks ↗ Wiki ↗

Alignment with the Brand Bible

deliberate deviation
Light theme is a deliberate deviation from the Brand Bible.
The Brand Bible v1.0 prescribes a dark aesthetic — "Bloomberg Terminal meets AI command centre" — and explicitly lists "light backgrounds" in the DON'T column. For the product UI specifically, founder decision (2026-05-06 meeting) overrides this. We translate the brand's spirit — precise, data-driven, premium, channel-coded, founder-to-founder — into a light editorial register. Marketing, social, video, and pitch content continues to follow the dark aesthetic.
What we keep from the Brand Bible
  • · Brand purple #7B6FD4 as primary action + brand identity
  • · Channel colour coding — green Email · purple LinkedIn · amber Voice ★
  • · Typography hierarchy — Space Grotesk display + DM Sans body (web equivalents of bible's Trebuchet MS + Calibri)
  • · Voice + tone — Confident · Direct · Data-led · Founder-to-founder
  • · Geometric precision — thin lines, corner brackets, tabular numerals
What we adapt for product UI
  • · Light surfaces instead of dark navy backgrounds
  • · Warm paper base (#F8F6F0) — premium, less stark than pure white
  • · Deep navy ink (brand background #0D0F1A) used as primary text colour
  • · Subtle elevation via hairlines, not heavy shadow
  • · No "purple accent glows" — replaced by purple corner brackets and underlines

Colour

11 tokens · brand purple primary
Brand
Brand purple primary --brand-purple #7B6FD4
Purple deep --brand-purple-deep #5A4FB0
Purple light --brand-purple-light #9D93E8
Purple tint --brand-purple-tint rgba(.., 0.08)
Surfaces
Paper · primary background --paper #F8F6F0
Paper soft · sectioning --paper-soft #F1EEE5
Surface · cards, inputs --surface #FFFFFF
Ink (text)
Ink · primary text --ink #0D0F1A · brand bg
Ink soft · emphasis --ink-soft #1C2038
Muted · secondary text --muted #5A6072
Muted soft · tertiary --muted-soft #9CA0AE
Functional
Success · also Email channel --success / --channel-email #1D9E75
Warning · also Voice channel ★ --warning / --channel-voice #EF9F27
Error --error #E05555
Usage rules from Brand Bible §03 — Purple is the primary accent for CTAs, highlights, borders. Amber is reserved for AI Voice. Green is for the Email channel and positive metrics. The bible says "never use light backgrounds"; for product UI we use --paper as the explicit, deliberate exception.

Channel coding

consistency rule from brand bible §06
Always green. Use for the Email channel everywhere — pills, lines, charts, status. --channel-email
LinkedIn
Always brand purple. Connection · DM · profile views. --channel-linkedin
AI Voice
Always amber. THE differentiator per brand bible — make it stand out. --channel-voice
Inline tags (lighter than pills)
LinkedIn Voice ★

Typography

Space Grotesk display · DM Sans body · Geist Mono system
Hero stat 2.49 Space Grotesk 700 · 96px · -0.04em
H1 large First impressions matter. Space Grotesk 600 · 48px · -0.025em
H1 page Today's calls Space Grotesk 600 · 36px · -0.02em
H2 section Customer satisfaction agent Space Grotesk 600 · 28px
H3 sub Compliance gates Space Grotesk 600 · 20px
Body lead A short, conversational AI call replacing form-based feedback. DM Sans 400 · 16px · 1.55
Body Default body copy uses 15px DM Sans for comfortable reading at desk distance. DM Sans 400 · 15px · 1.55
Body sm Small body for dense data tables and metadata. DM Sans 400 · 13px · 1.5
Caption Captions, footnotes, supporting metadata. DM Sans 400 · 12px · muted
Eyebrow Section · 01 Geist Mono · 11px · 0.08em uppercase
System call_id 7f2a · p95 240ms · €0.27 Geist Mono 400 · IDs, latencies, money
Brand Bible §04 — Display is Trebuchet MS (desktop) / Space Grotesk (web); Body is Calibri (desktop) / DM Sans (web). We use the web fonts everywhere because the product runs in browsers. Tabular numerals are always on for monetary, latency, and metric values.

Stats & KPIs

data-display first-class
Hero stat — pitch / proof points
40%+ More meetings with AI voice
Hero stat · ink
£1,500 Starting price per month
KPI tiles — Studio surface
Calls today
24
▲ 3 vs yesterday
Response rate
31%
target ≥ 25% · ✅ on track
At-risk identified
3
2 escalations open
Cost per call
£0.27
margin 89% · ✅

Components

brand-aligned
Buttons
Status pills
Connected Token expiring Failed Draft
Channel pills
LinkedIn Voice
Status dots
Inline keyboard
Press ⌘ K to search
Spinner
Loading
Callouts
Composition is visible. Every screen makes the layered architecture legible — you should never wonder where a value came from.
Mono labels for system metadata. IDs, latencies, schemas, ownership — the parts of the system that are facts, not opinions.
Corner brackets — geometric precision
Highlighted block
Wraps a card with thin purple corner brackets. Use for the most-important block on a page.
Soft variant
Same shape with hairline-grey corners. Use as a quieter accent.

Spacing

8px grid
--s-1 · 4px
--s-2 · 8px
--s-3 · 12px
--s-4 · 16px
--s-5 · 24px
--s-6 · 32px
--s-7 · 48px
--s-8 · 64px
--s-9 · 96px

Voice & tone

brand bible §02
How we sound
Confident · not arrogant
Direct · not aggressive
Data-led · not hype-driven
Founder-to-founder · not corporate
Writing rules
  • · Lead with the most important thing — never bury the point
  • · Use specific numbers ("40% more meetings", "3–5 days", "£1,500")
  • · Short sentences. One idea per sentence.
  • · British English — £ not $, "organised" not "organized"
  • · No exclamation marks in professional content
Examples in product UI
DO
Studio empty state: "No agents yet. Connect your first to start booking meetings."
DON'T
"Welcome to celliq! 🎉 Let's get you set up with our amazing AI agents to revolutionise your outbound!"
DO
Cost watch: "£127 spent today · 51 calls · £2.49 average · margin 89%"
DON'T
"You're crushing it! Today's spend looks great and you're saving so much vs hiring an SDR!"
DO
Compliance gate: "AI disclosure played at S0. Recording disclosure played at S0. DNC checked: clear."
DON'T
"All your compliance is handled — relax and let our seamless platform do the rest!"

What we don't do

brand bible §05 — adapted to light theme
  • · Generic SaaS pastel colours outside our palette
  • · Stock photos of smiling office workers (no photos in product UI at all)
  • · Cartoon illustrations or friendly mascots
  • · Neon colours outside the brand palette
  • · Slow drift / float animations — kinetic only on key moments (state changes, success)
  • · Fake italic on Space Grotesk — emphasise via brand purple instead
  • · Heavy shadows — we use hairlines and corner brackets for elevation
  • · "Revolutionary", "game-changing", "disruptive", "seamless", "robust", "innovative" anywhere
  • · Exclamation marks in professional content
  • · $ instead of £ — we are a UK product

Meta

version
celliq design system · v1 · 2026-05-07
brand bible source · CellIQ Brand Bible v1.0 · March 2026
token file · mocks/styles.css (lines 1–155)
component additions · mocks/styles.css (lines 1700+)
changelog
v1 · 2026-05-07 · initial brand-aligned light theme