DESIGN SYSTEM · EXOTEL

Signal — one system,
less chaos

Three product lines, one company, no shared language. Signal is the token, component and governance layer that got the workspace, the chatbot and the voicebot speaking the same design language — and ended the great button debate of 2022.

ROLE
Design-system lead · IC
TEAM
Front-end platform eng · PM sponsor · feature squads
TIMELINE
2022 → ongoing
STATUS
v3 · in production
MY SLICE
I led the audit, token architecture, component specs, governance model and documentation. Platform engineering owned the React library; feature squads contributed patterns through the RFC lane I set up.
( WHERE IT LANDED )
−80%
DESIGN-REVIEW CYCLE TIME
120+
COMPONENTS · ALL DOCUMENTED
3→1
PRODUCT LINES, ONE LANGUAGE
1
BUTTON. FINALLY.
( THE AUDIT — WHAT WE FOUND )

Every squad drew its own buttons

Twelve years of shipping fast leaves a mark. I spent two weeks screenshotting every screen of every product into one Figma board. The board did the arguing for me — no deck needed.

// drop: audit board — the button wall
BUTTONS
Dozens of variants for the same primary action — different heights, radii, blues and hover states, all shipped and defended.
// drop: audit board — color inventory
COLOR
Multiple near-identical "primary" blues living side by side. Nobody could say which was the real one, because none of them was.
// drop: audit board — spacing overlay
SPACING
Spacing by vibes. Every design review re-litigated 8 vs 12 px from scratch — the same argument, weekly, forever.
The real cost wasn't ugly screens. It was that every review spent its first thirty minutes on questions a system should have already answered.
( THE BET )

Three rules, strictly kept

01
Tokens before components
No component ships until its colors, type and spacing resolve to named tokens. Fix the vocabulary first and half the debates disappear on their own.
02
Docs or it doesn't exist
Every component ships with usage, states, do/don't and a code link — in the same PR. Undocumented components don't get a version number.
03
Adoption is a product problem
Squads don't adopt systems out of loyalty — they adopt what saves them time this sprint. Signal earns usage with migration guides, office hours and fast RFC turnaround.
( FOUNDATIONS )

The vocabulary

Semantic tokens, not raw values — components reference what a thing means, so a rebrand or a dark theme is a token swap, not a redesign.

TOKEN GRAMMAR — property · role · state
--signal-color-action-primary-hover: … ;
--signal-space-inset-card: 16px;
--signal-type-body-dense: 13px/1.5 …;
COLOR · 6 CORE ROLES
Action, info, accent, surface, ink, success — every hue maps to a role, and WCAG-AA pairings are baked into the token, not left to memory.
TYPE · ONE SCALE, TWO DENSITIES
Aa 28
Aa 20
Aa 14 / 13 dense
A dense variant for agent-facing screens — contact centers live at 13px — and a default for admin surfaces. Same ramp, two rhythms.
SPACE · 4PT, NO EXCEPTIONS
4 · 8 · 12 · 16 · 24 · 32. The "is it 10 or 12?" review question died the week this shipped.
( 120+ COMPONENTS — ANATOMY OF ONE )

The button that ended the debate

Every Signal component ships as the same package: states, tokens, usage rules and a do/don't. Here's what one spec looks like.

STATES — ALL SIX, SPECIFIED
Primary default
Primary hover · −8% lightness
Primary focus · always visible, keyboard-first
Primary disabled · never hidden, always explained
Saving loading · label stays, width locked
USAGE RULES
✓One primary action per view — everything else is ghost or text.
✓Verb-first labels: "Save changes", never "OK".
✕No icon-only primaries. Agents work at speed; labels win.
✕No custom paddings — sizes come from the density token.
// drop: figma spec page — button component
The spec lives in Figma and mirrors 1:1 to the React library — same names, same props, so "design QA" is a diff, not a debate.
( GOVERNANCE — THE PART THAT MAKES IT A SYSTEM )

A library is files. A system is rules.

The failure mode of every design system is month four, when squads quietly fork it. Signal's answer is a contribution lane that's faster than forking.

HOW A PATTERN GETS IN
squad proposes · RFC template→ weekly crit · 48h verdict→ spec + tokens→ React build · platform eng→ docs + versioned release
SEMANTIC VERSIONING
Breaking token changes = major release with a migration note. Squads upgrade on their own schedule — nobody wakes up to broken screens.
OFFICE HOURS
A weekly open slot where any designer or engineer can bring a screen. Most "we need a new component" requests turn out to be a docs gap — so the docs get fixed.
DEPRECATION, NOT DELETION
Old patterns get a sunset date and a pointer to their replacement. The audit board stays public — drift is visible, so it stays rare.
▸_ The Design Playground — live on GitHub A React + TypeScript sandbox where Signal components are built and stress-tested before release. Public, real, forkable. exotel/Exotel-Design-Playground ↗
( DID IT WORK )

Reviews got boring — on purpose

THE MECHANISM BEHIND −80%
Reviews used to be two rounds of foundations (colors, spacing, states) before anyone discussed the flow. With foundations pre-answered by tokens and specs, most work now clears in a single round — the review is about the product decision, not the padding.
measured across squad design reviews, before/after rollout
WHAT ENG SAYS
"We stopped arguing about padding in review and started arguing about the product. That's the whole win."
— front-end platform lead · Exotel
What I'd tell past me: start governance on day one, not after the first fork. A system without a contribution lane is just a very tidy folder.
NEXT CASE STUDY
The workspace Signal was built for →
contact-center workspace →
04 · SIGNAL DESIGN SYSTEM · EXOTEL DESIGNED & DOCUMENTED BY ANJALI S.