Specialised domain
Design Systems & Token Architecture
Bridging the chasm between Figma files and production code with pixel precision.
Context
Why it matters.
A design system is not a UI kit; it is a shared language and technical contract between designers and engineers. I build robust design token architectures (colors, spacing, typography, radii, shadows) mapped directly to Tailwind, React, and CSS variables, eliminating design drift forever.
Bottlenecks
Friction I solve.
- Preventing design token fragmentation across legacy and modern tech stacks
- Enforcing strict component variant matrices (sizes, states, accessibility rings)
- Standardizing accessibility standards (WCAG 2.1 AA) at the atomic token layer
- Creating automated handoff documentation that developers actually use and respect
Principles
Rules I design by.
- Every design decision traces back to a token: Primitive → Semantic → Component.
- If a component variant cannot be built cleanly in code, it should not exist in Figma.
- A living style guide must be zero-build and self-contained for complete transparency.
Deliverables
What you receive.
- Unified Design Token Manifest (JSON/TypeScript)
- Tailwind Theme & CSS Variable Synchronization
- Figma Auto-Layout Component Libraries
- Living Zero-Build Style Guide (design-system.html)
Proof
Proven in production.
Reading
Masterclass deep dives.
B2B SaaS9 min read
Designing Enterprise Software That People Don't Dread Opening on Monday Morning
Enterprise software earned a reputation for being grey, slow, and soul-crushing. But the generation entering the workforce today was raised on Slack, Linear, and Notion.
Conversion7 min read
The Silent Power of Micro-Copy: The Tiny Words on Your Buttons That Make or Break Conversions
Changing 'Submit' to 'Get Instant Access' is not a marketing trick; it is an emotional guarantee. Words are the user interface.
FAQ
Questions, answered.
Do you provide code or just Figma files?
Both. I define the design token manifest directly in TypeScript/CSS and provide clean, accessible React component templates matching Tailwind configurations.
When should a startup invest in a design system?
As soon as you have more than 2 engineers building interfaces simultaneously. Without tokens, inconsistency compounds into technical debt exponentially.