WORK180:
Design System
A comprehensive design system and component library built for scale, covering colour, typography, spacing, and a full component suite used across WORK180's employer-facing and job seeker products.
The challenge
WORK180 didn't have a formalised design system when I joined. Components were inconsistent across surfaces, colour usage was inconsistent especially with the company going through two re-brands, and there was no shared Figma library. I was tasked with building a scalable system from the ground up, one that could serve both the employer portal and job seeker product, and evolve alongside the business.
How I built it
I audited the existing product to catalogue every UI pattern in use, then worked with the engineering and brand teams to align on tokens, naming conventions, and contribution guidelines. The system was built iteratively, starting with foundations (colour, type, spacing) and expanding into components as new product work demanded them.
Colour system
The colour system is built on semantic roles, each palette serves a specific function across UI states, feedback, and brand expression. All colours are tokenised with 100–600 shade scales.
Type scale
The system uses Prodigy Sans across both brand-facing surfaces and the employer portal product, with two defined scales. Each style is documented with size, line height and weight for engineering handoff.
Spacing system
8pt spacing scale
An 8pt linear scale for UI elements and 4pt for icons and small text blocks. The 4pt baseline grid ensures line-heights are divisible by 4, keeping the product consistent and aligned.
Icons
The icon library is built on Lucide, a clean open-source set with consistent stroke weights. Icons are used at 16px, 24px and 32px across the product.
Components
Real components from the design system, exported directly from Figma.
