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

Component

Component

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

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

Component Library

Component Library

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

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

Design System

Design System

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

Governance

Governance

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


Further Reading:

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


Further Reading:

Guidelines

Guidelines

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.

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

Pattern

Pattern

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

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

Pilot

Pilot

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

Reference Site

Reference Site

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

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

Token

Token

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:


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:


UI Kit

UI Kit

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 curriculum & community to support how you design at scale.

Become a member.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.

Design System University is curriculum & community to support how you design at scale.

Become a member.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.

Design System University is curriculum & community to support how you design at scale.

Become a member.

Subscribe for the latest content about design systems:

© 2023–2024 Design System University. All rights reserved.