Design Systems: The Parts

In our last article, we explored why you might seek help getting started on your Design System and where to begin. Now, we’ll explore what goes into one.

What goes into a Design System?

There are some differing opinions on exactly what goes into a Design System and how best to structure the inventory. From what I’ve seen, the differences from one system to another are mostly about nomenclature and how best to organize things. For us, we’ve largely defined Design Systems as "a digital library of guidelines and resources." 

Guidelines

Simply put, these are the documented standards—a place to go to see examples and written descriptions to better understand usages patterns. We break them up into two primary categories: Style Guidelines and UI Guidelines.

Style Guidelines

These are the perceptual patterns that are core to the brand, from principles to voice and tone guidance.

Examples:

• Principles
• Colors
• Typography
• Voice & Tone
• Logos & Identity
• Accessibility
• Motion
• Sound

UI Guidelines

These are the building blocks of your user interface (UI) design—the functional patterns. It’s worth noting you may see other organizations call this a Component Library or Pattern Library—we like UI Guide as a nice complement to a Style Guide.

Here’s a list of things you might find in a UI Guide. Note this list only includes some of the more common components for brevity—to see what a long list looks like view Salesforce’s Lightning Design System.

Examples:

• Alerts
• Avatars
• Badges
• Blockquotes
• Breadcrumbs
• Buttons
• Captions
• Cards
• Carousels
• Checkboxes
• Data Tables
• Dividers
• Drawers
• Grid
• Headings
• Iconography
• Lists
• Pagination
• Paragraphs
• Progress Indicators
• Radio Buttons
• Select Boxes
• Spacing
• Tabs
• Tags
• Text Fields
• Toggles
• Tool Tips

Resources

This is where you go for usable parts, whether it be source files or code samples. In our organization, we often refer to these as a “Parts Kits” and separate them into two categories: one by designers and one by developers. Audiences vary based on needs, but the use case is usually a means of helping to build, extend, and maintain your Design System across an ecosystem of touch points.

Design Toolkit

These are the source files (usually) created by a designer and made available for download.

Examples:

• Logos
• Licensed Fonts
• Color Palettes
• Icon Libraries
• Graphics (patterns, textures, etc.)
• Page templates
• Design Source files (Sketch, Photoshop, Figma, etc.)

Developer Toolkit

These are the usable parts, samples, and examples made by a developer for use and reference.

Examples:

• Modular components
• Code snippets
• Page builders

In Summary

I hope this gives you a good idea of how Design Systems can be structured. Quite honestly, they come in all shapes and sizes. Even if you only have a small portion of what you see listed in this article, you’ll already have the beginning of one. After all, Design Systems are meant to expand and evolve over time so getting started can be easy.

For further exploration, here are a few examples of Design Systems that we like:

Examples:

• Salesforce's Lightning Design System
• Atlassian's End-to-End Design Language
• Trello's Nachos