Design System

Design systems are repositories of reusable design components and design patterns that can be used across a team or organization to ensure consistency across all design output.

Design systems often contain:

• Style guide: Style guides are often focused on visual design and branding. For example, what are different colors used for? How should the logo be treated? How are different typefaces used? How large should header text be? Some style guides may include further guidance on written content, UX copy, or interaction design.
• Component library: Component libraries are repositories of reusable design components that designers can easily copy into new designs. For example, if a designer needs to add a button to an input form, they could copy a component from the component library.
• Pattern library: Pattern libraries are repositories of reusable design patterns which focus on layouts that could include multiple components and focus on content structure. For example, a login pattern might include multiple components such as a header, text input fields, a button, and potential error or success indicators.

Design systems allow for design to happen more quickly at scale, and can help with onboarding new design team members. These systems allow UX and UI designers to focus on the flow of user behavior, rather than needing to redesign specific components every single time they come up. They also keep design consistent for users. There’s still room for creativity, but a lot of repeat effort is saved on problems that have been solved before.

There are many ways to document a design system, and different organizations will have their own approaches. Separate sections of the system may live within different tools. For example, some organizations might maintain an internal wiki with their style guide, while their component library is maintained in digital design software like Figma or Sketch for easy duplication into new design prototypes. One of the challenges of design systems is ensuring that they are maintained. Both building and updating the system requires time and effort.