A design system
for UX designers.
PULSE is the design system I use to ship user-centred products faster — tokens, components, patterns, and documentation that scale across web, mobile, SaaS and enterprise.
Foundations
Color tokens
Component
Button · Primary
Foundations
Type scale
Aa
Satoshi · 700
Live · ready to use
120+ components, 80+ patterns.
120+
Components
80+
Patterns
480
Icons
10+
Products powered
What's inside
Everything a product team needs — in one source of truth.
Designed for UX designers and front-end engineers working in parallel. Drag-and-drop in Figma, copy from the same tokens in code.
Foundations
Color, type, spacing, radius, shadow, motion.
Components
Buttons, inputs, cards, tables, modals, navigation.
Patterns
Forms, empty states, loading, onboarding, error handling.
Icons & illustrations
Lucide icon set + a curated illustration library.
Documentation
Anatomy, do/don't, accessibility, usage notes.
Figma + Code
Drag-and-drop in Figma, identical tokens in code.
01 · Foundations · Color
A palette that whispers, then sings.
Deep neutrals carry the content. Brand and semantic colors do the talking — only when they need to.
Brand
PULSE primaryBrand · 50
#FDF2F8
Brand · 100
#FCE7F3
Brand · 300
#F9A8D4
Brand · 500
#EC4899
Brand · 600
#DB2777
Brand · 700
#BE185D
Brand · 900
#831843
Indigo
SecondaryIndigo · 50
#EEF2FF
Indigo · 100
#E0E7FF
Indigo · 300
#A5B4FC
Indigo · 500
#6366F1
Indigo · 600
#4F46E5
Indigo · 700
#4338CA
Indigo · 900
#312E81
Slate
NeutralsSlate · 50
#F8FAFC
Slate · 100
#F1F5F9
Slate · 300
#CBD5E1
Slate · 500
#64748B
Slate · 700
#334155
Slate · 900
#0F172A
Slate · 950
#020617
Semantic
Used only for state — not decoration.
Success
#10B981
Warning
#F59E0B
Danger
#EF4444
Info
#0EA5E9
02 · Typography
Type that earns its place.
Satoshi for product UI, Instrument Serif for moments of voice. Five sizes, two weights, one job — clarity.
Display / 64
Design that connects.
H1 / 48
A system, not a sheet.
H2 / 36
Components that hold up.
H3 / 28
Small parts. Big impact.
Lead / 20
Generous, calm body text — built for reading.
Body / 16
Default paragraph weight for product UI and long-form.
Caption / 13
Microcopy, helper text, footnotes.
Mono / 14
tokens.json — used in code & docs.
03 · Tokens
Spacing, radius, elevation, motion — measured.
Everything sits on a 4-pixel grid. Radius scales from sharp to pill. Shadows are calm. Motion respects you.
Spacing · 4 px base
Radius scale
Elevation · brand-tinted shadows
e1
brand 8–30%
e2
brand 8–30%
e3
brand 8–30%
e4
brand 8–30%
e5
brand 8–30%
e6
brand 8–30%
Motion
04 · Components · Buttons
Buttons that lead, follow, or get out of the way.
Variants
States
Sizes
Icon · Group · Split
05 · Components · Inputs
Inputs that feel natural under the fingers.
We'll only use this for billing.
Checkbox & Radio
Switch
Slider
Volume · 60%
OTP
File upload
Drop a file or browse
06 · Components · Cards
Cards built to hold real content.
Monthly active
128.4k
↑ 12.3% vs last month
Danura Jayakody
Senior UX Designer
Pro plan
$24/mo
- Unlimited projects
- Priority support
- Advanced tokens
Article · 6 min read
Building a design system that ships
Notes from building PULSE across ten product lines — what stuck, what didn't, and what I'd do differently next time.
Intro to PULSE
3:42 · Watch overview
07 · Icons
One icon family — 1.5px stroke, 24px grid.
480 icons in total, all from a single coherent set. Consistent stroke, weight, and corner radius.
Selected stroke weight: 1.5px · Grid: 24 × 24
480 icons · one consistent family
08 · Patterns
Wayfinding & feedback that just works.
Top navigation
Tabs
Breadcrumbs · Pagination
Docs Components Button
Alerts
Saved. Your tokens are in sync.
Two components are missing dark-mode tokens.
Couldn't reach the component library.
Toast
PULSE v3.2 published
12 components updated · 4 new patterns
Empty state
No components yet
Pull from the Figma library to get started.
09 · Data display
Tables, lists, charts — designed for scanning.
Data table
| Component | Type | Owner | Status | Updated |
|---|---|---|---|---|
| Button | Component | Danura | Stable | 2h ago |
| Modal | Surface | Danura | Beta | 1d ago |
| Data table | Pattern | Team | Stable | 3d ago |
| Date picker | Input | Team | In review | 1w ago |
Adoption
87%
Components used across products
Weekly adoption · last 9 weeks
10 · Built for flow
Drag, drop, ship.
PULSE lives in Figma as a published library and in code as a tokenised React kit. Designers compose. Engineers consume. Same primitives, same names, same tokens — no translation layer.
Components published to Figma Assets panel.
Tokens shared via JSON + Tailwind preset.
Auto-layout primitives map 1:1 to flex utilities.
Changelog with adoption metrics per release.
PULSE / Assets
Button
Input
Card
Toggle
Avatar
Badge
11 · Accessibility
WCAG 2.2 AA — baked in, not bolted on.
Contrast AA+
Every text + interactive pair audited at design time.
Focus visible
Brand-tinted 2px focus rings with 2px offset.
Touch targets
44 × 44 minimum across all components.
Reduced motion
Respects prefers-reduced-motion automatically.
The PULSE system
One source of truth — for every product I touch.
Built once, used everywhere. PULSE is the spine of every design and front-end decision in my work — from POS terminals to enterprise GRC dashboards to mobile habit-building apps.