Creating & Implementing Design Systems

Design systems are an essential part of creating consistent and efficient digital products. As companies grow, they often face the challenge of maintaining consistency in their design and development processes, resulting in user confusion and technical debt. To address this issue, many organizations turn to design systems to help streamline their development and design processes, allowing them to maintain a consistent visual language and user experience across all products.

In this guide, we will explore the challenges of implementing design systems and provide tips on how to overcome them based on my personal experience leading digital product teams at large organizations.


An Introduction to Design Systems


A design system is a standardized toolkit for designing and developing marketing materials.

A design system offers several benefits, including:

  • Faster Workflow. Pre-made, reusable design components can streamline the design and prototyping process for designers, as well as simplify complex ideas for developers.
  • Consistent Visuals. Each element within a design system is informed by its visual language, ensuring that they work together harmoniously, regardless of where they are used.
  • Improved Collaboration. Design systems enable stakeholders and designers to quickly visualize and articulate complex ideas, leading to greater understanding and a more cohesive team.
  • Better Code Quality. Modular, reusable elements result in cleaner, more efficient, and scalable code, reducing complexity and minimizing UX and technical debt.


Design systems can vary in terms of their scope.

  • Sometimes, a design system is focused exclusively on digital products or a website. It could include a library of elements, components, design patterns, and templates that can be reused and remixed to quickly conceptualize experiences.
  • Other times, a design system could expand beyond digital products to include any marketing materials, such as digital banner ads, email templates, and social posts, as well as traditional business cards, flyers, and direct mail pieces.

The focus of this document is on building design systems for a digital product or website.


Learning from others is a great way to get familiar with design systems. Here are some examples of design systems worth exploring:

What is Inside of a Digital Design System?


Design systems for digital products generally have two types of files:

  1. Design files which are built in your favorite design software ( Sketch, Figma, InVision, etc.)
  2. Live code built with HTML, CSS, and Javascript files which replicate wireframes elements.

These two files are essentially digital twins which should be synchronized as much as possible. When enhancements are made to the graphic file, the live code should be updated. Conversely, if there is an update to the live code, the graphic file should be modified.


Digital design systems should include:

  1. Visual Style Guide – Attributes that establish a visual language for your design system. Examples: colors, typography. [Required]
  2. Utility Library – Elements that influence all other aspects of the design system. Examples: Grid, page structure, templates, CSS utilities. [Required]
  3. Elements – Basic web elements. These are the smallest type of web element, which gets reused throughout the system. Examples: Buttons, headers, form fields. [Required]
  4. Components – Remix different elements to create components and patterns what solve for specific use cases. [Optional]
  5. Templates – Frameworks for common pages within site. Define page layout and structure. Remix components and elements for a specific use case. [Optional]
  6. Capabilities – Designs for special capabilities or complex tools that do not fit into standard page templates. Example: Live chat, shopping cart. [Optional]

<aside> ✋🏾 NOTE

Not all of the items above are necessary to have a workable design system. I’ve indicated which ones are [Required] vs. [Optional]. Start with the required elements as a baseline, then expand over time. To determine which items make the cut, ask (1) Who will use the design system? (2) What will they be doing? (3) What elements are most important to them?



To increase the adoption and impact of your design system, it may be helpful to include documentation that (1) provides overarching principles and philosophies governing design work and (2) provides various team members with guidance on how to use the design system.

This documentation could include:

  1. Overview – Describes the purpose, intended audiences, and intended use of the design system.
  2. Get Started Guide – Explains how the system is organized and may include instructions on how to use it. If icons or graphics are used throughout the system or documentation, include a key or legend here.
  3. Principles – Provides general statements that capture the essence and heart of the team’s design philosophies. Could also outline the approach to solving customer issues. Topics could include design thinking, empathy, customer validation, etc.
  4. Standards – Describes guidelines, rules, and best practices in key areas that govern the system. Topics could include SEO, design, usability, performance, code, accessibility, folder structure, taxonomy, etc.
  5. Considerations – Outlines additional considerations for all audiences as they use the system. Because these considerations do not carry the weight of principles or standards, they should be captured separately.
  6. Case Studies – Use fictional or real scenarios to showcase examples of the design system “in the wild”. Provides ideas on how to translate ideas into reality.
  7. Asset Library – Includes live assets that can be downloaded and used. Includes snippets of code that can be cut and pasted where needed. While each of these items can also be integrated throughout the design system, in context with the area it is related, this library provides one location for quick access.
  8. Inspiration – Collection of screenshots and ideas from related companies and/or competitors.
  9. Resources – Highlights key contacts and includes links to resources and additional information.


Here is a checklist of what to consider including in your design system.

Digital Design System

There are millions of ways to think of which elements make up your design system. I offer the following as inspiration only. It’s helpful to have a starting point for planning your design system.

  • Visual Style Guide

    • Color

    • Typography

    • Grid & Layout

    • Images

    • Media

    • Visual Form

    • Motion & Sound

    • Design Tokens

  • Elements

    • General Elements
      • Lists
      • Buttons
      • Table
      • Forms
      • Boxes
      • Separators
      • DropCap
      • Blockquote
      • Highlighted Text
    • Specialty Elements
      • Elements – Labels, Tags, Pills
      • Elements – Badges
      • Elements – Charts
      • Elements – Spinners/ Loaders
      • Elements – Numbers/Stats
      • Elements – Scroll to
  • Components

    • Text Boxes
      • Notification / Message Boxes
      • Code Box
      • Alert Box
      • Content Panels
      • Tool Tips
    • Content Organization
      • Accordion
      • Show/ hide content
      • Toggle/Collapse
      • Tabs
      • Tour
      • Carousel
    • Guided Navigation
      • Guided Navigation – Facets
      • Guided Navigation – Sorts
      • Guided Navigation – Pagination
      • Guided Navigation – Horizontal Filters
      • Guided Navigation – Vertical Filters
      • Guided Navigation – Filter box
      • Guided Navigation – Stepped Navigation
      • Guided Navigation – Breadcrumbs
    • Modals
      • Modals – Content Box/ Lightbox/ /Dialogue Box
      • Modals – Promotional Popup
    • Media
      • Media – Cards
      • Media – Gallery
      • Media – Maps
      • Media – Media Player
  • Content Blocks

    Navigation – Topbar

    Navigation – Main

    Navigation – Other

    Footer – Violator

    Footer – Main

    Footer – Sub-Footer

    Header- Hero Image

    Header – Slider

    Header – Title

    Header – Breadcrumbs

    Content Blocks – Listings

    Content Blocks – Features

    Content Blocks – Promos/ CTAs

    Content Blocks – Text/Image

    Content Blocks – Text

    Content Blocks – Testimonials

    Content Blocks – Price Tables

    Content Blocks – Client Showcase

    Forms – Wizards

    Forms- Generic

    Forms – Gated Content

    Forms – Signin/ Login

    Forms – Lead Generation

    Social – Social Feeds

    Social – Social Share

    Social – MicroYes

    Listings – Content / Blog

    Listings – Store

    Listings – Portfolio

    Listings – Skinny Sidebar

  • Page Templates

    UVP – Homepage

    UVP – Services- Main

    UVP – Services – Single

    UVP – Products- Main

    UVP – Products- Single

    UVP – Tour/Features

    UVP – FAQ

    UVP – Pricing

    UVP – Portfolio- Main

    UVP – Portfolio- Single

    UVP – About – History

    UVP – About – Career

    UVP – About – Team

    UVP – About – Investor

    UVP – About – Annual Report

    UVP – About – Press Kit

    UVP – About – Newsroom

    Engagement – Events

    Engagement – Resources – Main

    Engagement – Resources – Details

    Engagement – Blog- Main (listings)

    Engagement – Blog- Authors/ Contributors

    Engagement – Blog- Categories

    Engagement – Blog- Archives

    Engagement – Blog- Single (Details)

    Conversion – Find Rep / Location

    Conversion – Contact

    Conversion – eCommerce Listings

    Conversion – eCommerce Details

    Conversion – Landing Page

    Conversion – Lead Generation – Form

    Conversion – Lead Generation – Thank you Page

    Conversion – Gated Content

    Converion – Microsite

    Specialty – Search

    Specialty – 404

    Specialty – Sitemap

    Specialty – Login/Register

    Specialty – Legal- Terms and Conditions

    Specialty – Legal – Privacy Policy

  • Special Capabilities

    Application – Master & Detail Views


    Live Chat


    Shopping Cart

    Contact/ Location Finder

    Interactive maps

    Search elements

    Sidebar/ Footer Widgets


  • Utility Library



    Scene Creators



    Stock Photos – Hero

    Stock Photos – Blog

    Stock Videos


    Color Palettes






    CSS Utility Library

    Frameworks/ 3rd Party Vendors


Beyond the Digital System

For your overarching digital marketing effort, you may find it helpful to broaden your designs thinking beyond your digital design system. If this is the case, here are some areas that might you might target.

  • Social Marketing






  • Email Marketing

  • Video Marketing



    End Slate




  • Digital Advertising

Process for Implementing a Design System


Begin your design system journey by documenting what your digital ecosystem looks like in its current state. By doing this, you will understand how pervasive any challenges that might exist are, and will be better able to bridge the current state and desired state when you build your design system.

Steps involved in creating a visual inventory include:

  1. Determine which sites and channels you will be targeting.
  2. For each site you are targeting, build an inventory of all visual styles and website elements that are in production.
    1. Not sure what to audit? Use my design system checklist for a comprehensive list.
    2. Not sure how to capture this information? I typically take screengrabs of representative pages within a platform and put them in a Figma file.
  3. Identify the inconsistencies.
  4. Clearly understand the challenges that these inconsistencies create. Specifically, look for:
    1. Operational inefficiencies. Not having a design system can have a negative impact on design and development processes.
    2. User experience issues. Inconsistent, fragmented channels and visual styles create a poor user experience, can impact usability, and can influence how customers feel about the company, brand, or products.


Once you have clearly defined the nature and scope of the problems and have determined that having a design system will create value for your organization, it’s time to get buy-in from leadership and team members.

The conversation should include the following:

  1. Overview of how you completed your study and description of findings.
  2. Analysis of the impact. Describe how the issues and inconsistencies that you found are negatively impacting the team’s efficiency and/or the user’s experience, quantifying costs if possible.
  3. Present the design system as the answer. “Building a design system will help the company deliver a better experience to the market faster.” Quantify the benefits, if possible.
  4. Get clear agreement and alignment from the team.
  5. Get funding and resource commitments.


With funding and resource commitments, it’s time to shift into action. Before you can get started, though, you need a plan of action and a team that can execute. Here are steps to setup your process, team, and principles.

Determine Your Approach

  1. Determine your starting point – Will you build from scratch or use an existing product as a foundation?
  2. Define your distribution model – Will you distribute the design system to all teams at once or one team at a time?
  3. Determine the type of system you’re building – Will it be graphic-only or live code?

Build a Project Plan

  1. Run the creation of your design system through your existing design process, following the same stages (discovery, design, develop) and rituals (planning, reviews/demos, retros, etc.).
  2. Regularly communicate progress to sponsors and stakeholders.

Build Your Project Team

  1. Identify the necessary skills, including fixing identified issues and ongoing maintenance and governance.
  2. Assemble your team by identifying members, determining capacity, and assigning roles.
  3. Ensure that internal team members assigned to this project have sufficient availability.

Establish Rules and Principles

  1. Establish rules for the design system to ensure consistency over time and establish rules for how to evolve it.
  2. Establish rules for how the team will work to prevent multiple people from updating and ensure efficient maintenance of the system.


Build the Visual Style Guide

The first step in building a design system is creating a visual style guide. This guide lays the foundation for all your design efforts and sets the tone for the rest of the system. The visual style guide includes standards for all style properties, including colors, typography, icons, and grid systems.

To build your visual style guide, follow these steps:

  1. Build the ideal style and attributes: This involves creating the ideal style for each property and eliminating unnecessary styles, colors, icons, types, etc. Pay special attention to accessibility, including color contrast ratios.
  2. Test the style against the existing system: It’s important to test your new style against the current state to understand how it will translate.
  3. Get acceptance from designers and developers: Once you have a style that works, get feedback from designers and developers and update the style accordingly.
  4. Document best practices and standards: Finally, document the best practices and standards for each style property.

Create Your Pattern Library

Once you have your visual style guide in place, it’s time to focus on building your pattern library. A pattern library is a collection of reusable design elements that are used consistently throughout your design system.

When building your pattern library, start by adjusting patterns based on what is currently in your system. Ensure that your patterns find a balance between the current state and the desired state, and document each part of the library as you go.

Test the System

Testing is a crucial step in building a design system. Review your system with others to identify gaps and update the system accordingly. This step ensures that your system is effective and efficient and that it meets the needs of everyone involved in the design process.


Once your design system is in place, it’s time to implement and socialize it. This involves educating everyone on how to use the system, its purpose, and its benefits. Your design system is meant to be used by designers, developers, outside agencies, and leadership, so make sure everyone is familiar with it.


Finally, it’s important to conduct ongoing updates and maintenance to ensure that your design system stays relevant and effective. Add new items as needed, update existing items as changes occur, and keep up with best practice and trend updates.

Challenges of Implementing a Design System

Design systems are a powerful tool for ensuring design consistency and efficiency in product development. However, implementing them can be challenging. Here are some common challenges and ways to overcome them.


Design systems should be started small and then gradually expanded over time. Identify the most important elements to include first and then expand as needed. To determine what elements should be included, consider who will be using the design system and what information they need. For larger products or systems, spend more time upfront thinking through the elements and how others will use them. It’s also important to have a designated owner for the design system and clear rules for when it gets updated.


Leadership may not understand what a design system is, why it’s important, and how it transforms operations. Explaining the vision of the design system can be challenging but is necessary for successful implementation.


Design systems require time, money, and people to create and maintain over time. Unfortunately, resources are often allocated to projects or products, but not to design system efforts. Teams may try to build design systems within each project, resulting in incomplete or siloed systems.


Despite the abundance of information about design systems, each organization has unique needs. There is no single resource that provides guidance on where to start, how to overcome roadblocks, and how to integrate a design system into operations. Legacy products may also have well-defined code that makes it difficult to implement design changes required by the new system.


Finally, the mindset and culture of an organization may not be ready for a design system. Some team members may resist change or not understand the benefits of a design system. To overcome this, it’s important to communicate the benefits of the design system and involve all stakeholders in the process. Change may take time, but the benefits of a design system are well worth the effort.

Additional Reading



<aside> ✋🏾 Hi there! My name is Tiffany and I am a UX and Technology leader who helps large enterprises build profitable digital products and high-performing digital teams. From time to time, I share helpful resources that address common challenges on my website at


Scroll to Top