Foundations
Set up a responsive grid
Defined responsive type scale
Defined spacing scale
Defined colour system
Standardized icon pack
Complex Design Library
System Strategies
Base component strategy
Slot strategy
T-shirt sizing + spacing systems
Pre-made content components
Nested instances
Documentation
Priorities for documentation were:
ease to identify, skim, and comprehend
easy to maintain and automate where possible
only show what’s essential
ultimate test: someone new to the team would be able to self serve
Impact
Faster speed to market
By streamlining design, development, and QA, we eliminated redundancy, reduced tech debt, and shifted 80% of our effort from maintenance to innovation—dramatically increasing speed to market
1 source of turth
Instead of multiple sources with no version control, development, design and product now have 1 source of truth for all website components and guidelines. We created dev and design parity.
Consistent visual language
We created a consistent visual language by: creating a responsive spacing scale, implementing a grid, defining a clear and responsive type scale and by ensuring accessibility compliance.
