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

Like these icons? Download and use them for yourself!

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 System 🔗

A 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:

  • Designer Alla Kholmatova calls design systems “a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.”
  • Designer/developer Sylvee L. says design systems are “collections of rules, constraints, and principles, implemented in design and code.”
  • Designer Nathan Curtis says, “A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive,” among other things.
  • Developer Jeremy Keith says, “I think we lose sight of the real value of a design system when we focus too much on the components. The components are the trees. The design system is the forest.”
  • Front-end designer Brad Frost says, “A design system [is] the official story of how your organization designs and builds digital products.”

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