Project Overview
Every fast-moving product team eventually hits the same wall inconsistent UI, duplicated components, and a growing gap between design and code. This design system was built to solve exactly that.
I designed and documented a comprehensive design system for a field-first SaaS product software built for on-ground teams, channel partners, and sourcing managers operating in real-world, high-context environments. The system covers everything from color tokens and typography to interactive components and motion principles, serving as a single source of truth for designers and developers alike.
The deliverable is a fully interactive HTML reference document shareable, browser-based, and built to be handed off directly to any developer or stakeholder without needing a Figma account.
My Role & Process
I owned this project end-to-end as the sole designer.
The process started with an audit of existing UI patterns across the product identifying inconsistencies in spacing, color usage, and component behavior. From there, I built the system ground-up in Figma, then translated it into a living HTML document that any team member can open and reference instantly.
The system is organized into three layers Foundation (colors, typography, spacing, shadows), Components (buttons, badges, inputs, cards, navigation, alerts, icons), and Motion & Layout (animation principles, grid system, CSS tokens). Each section includes real component previews, copy-paste code snippets, and usage guidelines.
Key decisions made during the process:
-
Chose CSS custom properties over hardcoded values so the entire system can be rebranded by changing just 3 variables
-
Designed for field context high-contrast color choices, clear status semantics (green/amber/red), and role-based identity colors for promoters, admins, sourcing managers, and channel partners
-
Used inline SVG icons with a standardized 24×24 viewBox spec to keep the system dependency-free
-
Built IntersectionObserver-based scroll tracking so the sidebar always reflects where you are in the document
-
Documented motion principles with live interactive demos not just static specs
Results & Impact
The design system eliminated guesswork from the design-to-development handoff. Developers no longer need to chase down spacing values, color codes, or component behavior everything is documented, interactive, and copy-paste ready.
-
30+ components documented with live previews and code
-
18 color tokens covering brand, semantic, surface, and role-identity colors
-
2 font families with a complete typographic scale
-
9 product pages unified under one visual language
-
Zero external dependencies runs in any browser, no tools required
-
Fully handoff-ready delivered as a single HTML file, no Figma access needed