Inspiring Design System Documentation
At PUMA, we’re about five weeks into a proof of concept pilot to create a design system for PUMA’s digital products and services. We’re calling it the Unified Design System, and it’s a functional toolkit for developers, designers, content designers, marketers, and more. As we’ve been wrestling with questions, prototyping, and doing research, we’ve come across some great examples of other design systems across all industries.
Design systems like Polaris from Shopify, Github’s Primer, and Salesforce’s Lightning Design System get a ton of love, and rightfully so. They are documentation-heavy (in a good way), well organized, and highly accessible. It doesn’t matter what door you walk through (design, engineering, etc.); the teams have considered your needs. These are mature systems with dedicated support structures that maintain and nurture the well-being of the product or service.
Workbench from Gusto
Gusto is a cloud-based software company that provides payroll, benefits, and HR management tools for small businesses in the United States. Their design system, Workbench, is robust and does a beautiful job at onboarding its consumers. The Gusto team has created a space that provides a soft landing for new and existing team members through videos, working Figma documents, package access, and substantial documentation.
Workbench System Highlights
Getting Started
- Well organized
- Chunked out of digital digestion
- Relevant to new consumers
- Interactive
- Ability to provide feedback
Roadmap & Changelog
- Provides transparency
- Clear communication channels (Newsletters + Changelog)
Seeds from Sprout Social
Sprout Social is a digital tool for social media management, branding, and analytics for businesses. Their design system Seeds is a toolbox for all Sprout Social consumers. I love how the Seeds team has made space for all verticals of their organization. Seeds provides guidance for the Sprout Social brand (beliefs, values, etc.), visual language, written content guidelines, UI components, and more.
Seeds System Highlights
Global
- Status Pill
- The status pill is a clickable element that provides transparency on the health of the component. After clicking the pill, a modal appears with more information and working files.
Components
- Tabbed Page Navigation
- Structuring the page for different types of design system consumers
- Code Snippets
- Syntax highlighting for easy readability
- Clipboard for quick copying of code snippets
- Clear Documentation
- Plain language usage and guidance
- Component best practices
Helsinki Design System from City of Helsinki
The City of Helsinki has a very approachable open-source design system that focuses on usability and accessibility for digital products and experiences. Depending on what hat you wear, there are a few different entry points to the system. At its core, designers and developers have system tracks, but there is space for everyone.
Helsinki Design System Highlights
Guidelines
- Accessibility
- Prime placement highlighting the importance of inclusivity
- Clear definition of standards
Contributing
- Clear communication of deliverables to contribute
- Decision tree for contribution process
- Contact information provided
Resources
- Internal and external links to tools and materials a designer or developer would need to be successful.
While the PUMA Unified Design System is still in its early stages, the potential is endless. Finding inspiration from large enterprise organizations’ design systems and exploring government entities’ best practices has been a breath of fresh air and a guiding light to how we build our design system structure.