Three pillars of design systems

Design Language

A design language is the set of standards and assets which guide the creation of a suite of products underneath a brand. I like to think of a design language as the personality of a brand and its corresponding design assets.

A design language is comprised of two areas:

• Foundation
• Components

The foundation is comprised of the principles which describe how your design language should be leveraged to build products. It includes things such as:

• Accessibility
• Brand
• Color
• Typography
• Spacing
• Grid
• Motion
• Icons
• Content

Component Library

A component library is the set of components which turn the design language and UI Kit into living, breathing code.

Component libraries can be built with many different frameworks and libraries (sometimes more than one) such as Angular, Vue, and React. Native web components are also a great example when thinking about building a component library.

Style Guide

The style guide is the documentation for the design language, UI Kit, and component library.

There are many different ways to build a style guide.

Perhaps you just need component documentation, so publishing your Storybook site is enough for your team.

Or maybe you want a fully-fledged website.

Gatsby is a great option if you know React, and can be used to create beautiful style guides using markdown.

The Invision DSM is a CMS solution for creating a style guide if you don't have a ton of time or resources.