Design Systems

A unified approach to digital product design.

Design systems provide the elements and guidelines to ensure consistent and scalable experiences.

“Today, there are nearly 30,000 U.S federal websites with almost no consistency between them.”

18f on Building a large-scale design system: How we created a design system for the U.S. government

Insights + Recommendations

Identify common patterns

Document common patterns to ensure that similar design elements are implemented consistently to enhance the usability of your digital product.

Build trust through consistency

Defining a cohesive experience with recognizable visual elements and design patterns is essential for maintaining user focus and reducing cognitive load.

Define use cases

Define the full range of templates and use cases required to meet your needs. This is essential for understanding the scope and scale of your design system.

Prioritize scalable navigation

Create scalable navigation systems to facilitate all use cases and device types. Plan for edge cases. Try to break the system by asking as many ‘what if’s’ as possible.

Guide content creation

Living into a new design system often means creating and structuring content in new ways. Provide clear guidance around writing principles, formatting, reading levels, and tone of voice for content creators.

Consider multi-site branding

Allow for flexibility in adapting the design system to accommodate brand-specific styling without compromising consistency in layout and functionality.

Establish the foundation

Define a style guide for fundamental elements such as color palette, typography, spacing, and iconography to maintain consistency across the system.

Prepare to iterate

Adopt an iterative approach to developing your design system so you can gradually expand it as your product or service grows, and refine it based on feedback and usage.

Test your system

Conduct user testing and gather feedback on the components and design patterns to ensure they meet the needs and expectations of your target audience.

Onboard team members

Create documentation and training materials to onboard new team members and ensure consistent usage of the design system.

Make it sustainable

Establish governance policies and processes for managing updates, versioning, and making contributions to the design system to ensure its long-term sustainability and effectiveness.

How to create a design system

  1. Begin by understanding the range of users as deeply as possible. Conduct user research to understand their diverse needs.
  2. Gather information from stakeholders and internal teams about business requirements, pain points, and administrative workflows.
  3. Audit all existing sites, content, components, and transaction points to identify patterns.
  4. Understand the range of edge use cases across device types, languages, and accessibility needs.
  5. Map the various customer journeys and user stories that the new design system should accommodate.
  6. Define the set of templates that will meet the needs of the project requirements.
  7. Define a visual language that effectively represents and conveys the brand identity.
  8. Design flexible, modular components such as buttons, forms, and navigation elements that can be reused and scaled across different parts of the product.
  9. Test and iterate on the design system by mocking up real content pages, navigation menus, and flows utilizing the libraries developed and gathering user feedback.


Creating a fully scalable design system to meet your unique set of use cases requires an intentional design process.

Product strategy and planning

User research and testing

Human-centered UX/UI/CX

Components audits and analysis

Scalable information architecture and navigation

Consistent interaction patterns

Accessible UX / UI patterns

Visual design and branding schemas

Comprehensive template and component libraries

Mobile-friendly, responsive design

Multilingual interface

Documentation and usage guidelines

Creating content for a new design system

Your new design system is only as good as the content that populates it. Here are a few tips to prepare your content and teams internally.

Talk with your content creators about any anticipated changes.

Use content gathering tools to establish a template for formatting different types of content.

Conduct a GAP Analysis to understand how the site(s) and page(s) are changing.

Define your tone of voice, audience, and reading levels.

Practice by populating pages and testing them with real users.

Ask your designers to mock up examples of pages using real content. Use this to demonstrate the new approach to content creation teams.

Bring content creators and designers together throughout the design process to collaborate on new solutions.