DESIGN SYSTEM
Pulse Design System
A comprehensive, scalable design system built from scratch for a fast-growing SaaS platform — 300+ components, full token architecture, and a living documentation site.
The Challenge
Pulse had scaled from 5 to 40 engineers in 18 months. The result was a product riddled with visual inconsistencies, duplicated components, and a design-to-dev handoff process that was slowing everyone down.
The ask was clear: build a single source of truth that the entire product org could work from — designers and engineers alike — and do it without halting the product roadmap.
⚡ The Process
-
AUDIT
Component Audit
Full audit of the existing product — identified 200+ UI patterns, de-duplicated, and categorised them.
-
TOKENS
Token Architecture
Built a multi-tier design token system covering colour, spacing, typography, elevation, and motion.
-
BUILD
Component Library
Designed 300+ components in Figma with auto-layout, variants, and interactive states throughout.
-
DOCUMENT
Documentation
Wrote usage guidelines, accessibility notes, and do/don't examples for every component.
The Outcome
Pulse reduced their design-to-dev cycle by 60% within the first quarter of adoption. The system is now used daily by 12 designers and 40 engineers, and has become the foundation for two new product lines. It was shortlisted for the Design Systems Award 2024.
Components delivered
Design-to-dev cycle time
Designers & engineers using it daily
Skills & Tools
- Design System
- Tokens
- Figma
- Documentation
- Accessibility
- SaaS