Glossary

Design systems can be tricky if you don’t know what certain words mean! Here’s a quick primer to help you get acclimated.

Component

A reusable snippet of code. Sometimes used interchangeably with pattern, but we think of them as different things.

Component Library

One of two main ingredients of any design system (the other being guidelines) a component library—also referred to as a pattern library—is a collection of components or patterns where you can browse examples of components and find code references for how to implement the components into a codebase.

Examples of component libraries include Pattern Lab, Fractal, and Storybook.

Further Reading: Pattern Library First: An Approach For Managing CSS, by Rachel Andrew

Design Systems

A connected, package-managed, version-controlled, software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently, and happily.

Many people have different and useful definitions for design systems:

Governance

The particular approach your organization uses to keep its design system up-to-date.

Further Reading: Team Models for Scaling a Design System by Nathan Curtis, The Salesforce Team Model for Scaling a Design System by Jina Anne, Episode 6 – Maintaining and Evolving Your Design System by InVision

Guidelines

The other big ingredient of design systems (along with a component library), guidelines are suggestions or rules to follow for how to best use any given design system.

Good guidelines tell you what and what not to do. A great example of a guideline from Shopify’s design system Polaris is from their anti-patterns section: “Fix a problem before proceeding to the next step.”

Pattern

A reusable flow, like signing in or checking out. Sometimes used interchangeably with component, but we think of them as different things.

Pilot

A product designed to be a proof-of-concept for the efficacy of a design system.

Further Reading: Design Systems: Pilots & Scorecards, by Dan Mall

Reference site

A visible manifestation of a design system, typically a URL that displays both the full component library and a set of guidelines.

Token

A platform- and technology-agnostic way to store a value to be ingested by specific applications.

Examples of useful properties to store as tokens: color palette, typographic families, spacing units.

Further Reading: Tokens in Design Systems by Nathan Curtis, What are Design Tokens by Robin Rendle

UI KIT

As it relates to a design system, a UI Kit is a representation of coded components created in a way that designers who don’t know code can create interface mockups. Examples of UI kits are Sketch libraries and Figma design systems.

Further Reading: Your Sketch library is not a Design System by Brad Frost