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.

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.

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 Storybook, Pattern Lab, and Fractal.

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

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

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

Design System

The smallest set of components and guidelines your organization needs to make your digital products consistently, efficiently, and quickly.

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.”

The smallest set of components and guidelines your organization needs to make your digital products consistently, efficiently, and quickly.

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

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.

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

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:

What are Design Tokens? by Robin Rendle
Tokens in Design Systems by Nathan Curtis

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:

What are Design Tokens? by Robin Rendle
Tokens in Design Systems by Nathan Curtis

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.

Sketch libraries and Figma design systems are examples of UI kits.

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.

Sketch libraries and Figma design systems are examples of UI kits.

Design System University is content & curriculum to help you design at scale.

Subscribe for the latest content about design systems:

Design System University is content & curriculum to help you design at scale.

Home

Courses