Image for post
Image for post

DESIGN RESOURCES

The Design System Encyclopedia

A complete, visual encyclopedia of UI tokens, components, interaction patterns, and visualizations.

Jon Moore
Jon Moore
Aug 16 · 27 min read

Before we get started, I’ve documented everything listed here plus way more over at the Design System Encyclopedia website. Check it out, and be sure to download the Airtable for design system planning (button in the top right).

Image for post
Image for post

I’ve been designing professionally for almost 10 years now, and I’ve come to appreciate the vastness of the design field. As a new designer or a non-designer participating in the design process, it can feel tremendously daunting. The jargon, the rules, and the “invisible design” requirements like empty states, error states, and responsiveness.

Over the years, I’ve collected and created many resources to help me do my job, but none of them were as comprehensive and “evergreen” as I would have hoped. Tools come and go, trends change, and responsibilities evolve.

However, the raw ingredients always stay the same. Buttons are buttons, text fields are text fields, and drop downs will always-and-forever…drop.

So here it is after years of designing, collecting, learning, and discovering:

The Design System Encyclopedia

I won’t argue about what design systems are and what they aren’t, but I do strongly advocate developing an understanding of the complete picture: visual language, UI tokens, UI components, page templates, interaction patterns, and visualizations.


Visual Language

Color Definitions

  • Brand colors: primary, secondary, tertiary
  • State colors: Error, warning, success, info
  • UI colors: black, white, grey
Image for post
Image for post
https://dribbble.com/shots/6810767-Firefox-family-identity-guide

Grids & Spacing

  • Define: column widths, gutter widths, margins, padding, vertical rhythm
Image for post
Image for post
https://dribbble.com/shots/10976823-Workly-Grid-System

Iconography

  • Feature icons: Home, Calendar, Profile, etc.
  • Action icons: add, delete, edit, etc.
  • UI icons: arrows, flags, checks, etc.
Image for post
Image for post
https://dribbble.com/shots/6095615-Customer-io-Iconography

Illustrations

  • Define: illustration style, subject, color usage
Image for post
Image for post
https://dribbble.com/shots/10076909-Evolution-Brand-Illustrations

Motion & Animation

  • Define: style, complexity, speed, easing, sound effects, music, format (gif/svg/mov)
Image for post
Image for post
https://material.io/design/motion/understanding-motion.html#principles

Photography

  • Define: photo style, subject, color treatment, size, crop, angle
Image for post
Image for post
https://brand.utk.edu/standards/photographic-style/

Typography Definitions

  • Define: size, weight, tracking, leading, line-height, color
Image for post
Image for post
https://dribbble.com/shots/7793700-Typography

UI Tokens

Avatar

Image for post
Image for post
https://dribbble.com/shots/11774045-YSC-Dashboard

Badges

Image for post
Image for post
https://dribbble.com/shots/6988594-Invoice-request-details

Buttons

Image for post
Image for post
https://dribbble.com/shots/7007257-DailyUI-083-Button

Camera Upload

Image for post
Image for post
https://dribbble.com/shots/6340384-Allow-Access

Checkboxes

Image for post
Image for post
https://dribbble.com/shots/8947291-Checkbox

Chips

Color Picker

Image for post
Image for post
https://dribbble.com/shots/5709228-UI-Daily-060-Color-Picker

File Upload

Image for post
Image for post
https://dribbble.com/shots/7271626-Multiple-files-upload

Image

Image for post
Image for post
https://dribbble.com/shots/2342857-Image-Placeholder

Ordered List

Image for post
Image for post
https://dribbble.com/shots/2547238-Profile-completeness-checklist

Radio Buttons

Image for post
Image for post
https://dribbble.com/shots/6544191-Radio-Buttons

Range Slider

Image for post
Image for post
https://dribbble.com/shots/3378497-Price-Range-Slider

Switches

Image for post
Image for post
https://dribbble.com/shots/3717188-What-type-of-person-are-you

Text Fields

Image for post
Image for post
https://dribbble.com/shots/6628016-Input-States

Thumbnail

Image for post
Image for post
https://dribbble.com/shots/5474318--Thumbnail

Unordered List

Image for post
Image for post
https://dribbble.com/shots/7118882-Dashboard-Tasks

Interaction Patterns

App Onboarding

Image for post
Image for post
https://dribbble.com/shots/7084581-onboarding-steps

Authentication

Image for post
Image for post
https://dribbble.com/shots/10960055-Two-factor-authentication-2FA

Autocomplete

Image for post
Image for post
https://dribbble.com/shots/11478574-Quick-Search

Create an Object

Image for post
Image for post
https://dribbble.com/shots/11121004-Add-New-Modal-UI-Design

Delete an Object

Image for post
Image for post
https://dribbble.com/shots/5385333-Daily-UI-54-Confirmation

Drag-and-Drop

Image for post
Image for post
https://dribbble.com/shots/8297994-ikas-Dashboard-Image-Upload-Animation

Feature Onboarding

Image for post
Image for post
https://dribbble.com/shots/7018153-Onboarding-Screens-Time-Tracking-Application

Forgot Username/Password

Image for post
Image for post
https://dribbble.com/shots/5451490-Forgot-Password-UI-Design

Form

Image for post
Image for post
https://dribbble.com/shots/11195555-Hiring-Platform-Job-Application-Page

Invite

Image for post
Image for post
https://dribbble.com/shots/6884877-Email-List-Input-Exploration

Log In

Image for post
Image for post
https://dribbble.com/shots/9512973-Hire-Ground-Sign-In

Onboarding Spotlight

Image for post
Image for post
https://dribbble.com/shots/1231716-Task-form-tutorial

Permissions

Image for post
Image for post
https://dribbble.com/shots/4650837-User-Permissions

Reset Password

Image for post
Image for post
https://dribbble.com/shots/6416451-Reset-Password-UI-Design-Boardme

Settings

Image for post
Image for post
https://dribbble.com/shots/5663523-Birdseed-configuration-components

Setup Assistant

Image for post
Image for post
https://dribbble.com/shots/10689474-Steps-exploration

Share

Image for post
Image for post
https://dribbble.com/shots/10744000-Scripta-Editing-Podcasts

Sign Up

Image for post
Image for post
https://dribbble.com/shots/7757250-Sign-up-revamp

Upgrade

Image for post
Image for post
https://dribbble.com/shots/7085116-Modal-Windows-UI-Components

Walkthrough

Image for post
Image for post
https://dribbble.com/shots/8726163-Modal-Wizard-Flow

Wizard

Image for post
Image for post
https://dribbble.com/shots/6145385-Payment-flow

UI Components

Action Bar

Image for post
Image for post
https://dribbble.com/shots/11116878-Hiring-Platform-Messages-Chat

Activity Feed

Image for post
Image for post
https://dribbble.com/shots/7090382-Concept-Design-Activity-History

Avatar Group

Image for post
Image for post
https://dribbble.com/shots/3227641-Manago-Task-board

Breadcrumbs

Image for post
Image for post
https://dribbble.com/shots/10640072-Breadcrumbs-UI-Design

Calendar

Image for post
Image for post
https://dribbble.com/shots/5797513-Schedule-Web-App

Card

Image for post
Image for post
https://dribbble.com/shots/2979653-Relay-Task-Cards

Carousel

Image for post
Image for post
https://dribbble.com/shots/11283681-Carousel-UI-Design

Chart Legend

Image for post
Image for post
https://dribbble.com/shots/6182239-Report-Builder-for-NLP-Platform

Chat (live)

Image for post
Image for post
https://dribbble.com/shots/4653749-Live-Chat

Comments

Image for post
Image for post
https://dribbble.com/shots/4644902-Community-Discussion

Cookie Notification

Image for post
Image for post
https://dribbble.com/shots/5559487-Circus-Cookies

Data Table

Image for post
Image for post
https://dribbble.com/shots/11920004-Search-Results-Data-Table

Date Picker

Image for post
Image for post
https://dribbble.com/shots/9835658-Leverege-Design-System-Date-Range-Pickers

Dialog

Image for post
Image for post
https://dribbble.com/shots/5385333-Daily-UI-54-Confirmation

Drawer/Accordion

Image for post
Image for post
https://dribbble.com/shots/8957381-Accordion-UI

Filters

Image for post
Image for post
https://dribbble.com/shots/7167814-Product-Concepts

Hint

Image for post
Image for post
https://dribbble.com/shots/4441119-Tips

List Builder

Image for post
Image for post
https://dribbble.com/shots/4001857-Report-Design-Builder

Loading Spinner

Image for post
Image for post
https://dribbble.com/shots/4543219-Loader

Map

Image for post
Image for post
https://dribbble.com/shots/9163173-Truck-monitoring-system

Menu/Dropdown

Image for post
Image for post
https://dribbble.com/shots/4233782-Snooze-notifications-in-Twist

Modal

Image for post
Image for post
https://dribbble.com/shots/3768074-Modal-windows

Notification Banner

Image for post
Image for post
https://dribbble.com/shots/6988594-Invoice-request-details

Notification Snackbar

Image for post
Image for post
https://dribbble.com/shots/4178087-Crucial-bits-big-system-pt-1

Notification Toast

Image for post
Image for post
https://dribbble.com/shots/4580930-Toast-Messages

Notification Menu

Image for post
Image for post
https://dribbble.com/shots/5308459--Notifications

Page Header

  • Tools & actions: primary, secondary, overflow
Image for post
Image for post
https://tailwindui.com/components/application-ui/headings/page-headings

Page Tabs

Image for post
Image for post
https://dribbble.com/shots/7285861-Medical-Management-Platform-pt-2

Pagination

Image for post
Image for post
https://dribbble.com/shots/9517419-Pagination-UI-Design

Paper Tabs

Image for post
Image for post
https://dribbble.com/shots/3771146-Unamo-SEO-Search-Console-Integration

Popover

Image for post
Image for post
https://dribbble.com/shots/5753689-Hosting-Dashboard-concept/attachments

Pre-formatted Text (Code)

Image for post
Image for post
https://dribbble.com/shots/5792865-Challenges-Brand-Everything-Is-Fine

Primary Navigation Menu

Image for post
Image for post
https://dribbble.com/shots/11277875-Patient-Portal-Medical-Dashboard

Progress Bar

Image for post
Image for post
https://dribbble.com/shots/9802008-Progress-Bar-Designs-UI-Design

Ratings

Image for post
Image for post
https://dribbble.com/shots/8098254-Booking-Hotel-card

Reviews

Image for post
Image for post
https://dribbble.com/shots/10464678-Daily-UI-039-Testimonials

Rich Text Editor

Image for post
Image for post
https://dribbble.com/shots/11123877-Create-your-HR-document

Search

Image for post
Image for post
https://dribbble.com/shots/8250455-Integrations-Maise-Dashboard-UI-Kit

Sidebar

Image for post
Image for post
https://dribbble.com/shots/10907005-Sidebar-navigation

Sub-navigation Menu

Image for post
Image for post
https://dribbble.com/shots/7285861-Medical-Management-Platform-pt-2

Table

Image for post
Image for post
https://dribbble.com/shots/9532767-Hire-Ground-Dashboard

Testimonial

Image for post
Image for post
https://dribbble.com/shots/9333269-Testimonial-Design

Timestamp

Image for post
Image for post
https://dribbble.com/shots/3970053-Timeline-Redesign

Tips

Image for post
Image for post
https://dribbble.com/shots/4965841-User-Onboarding-Checklists-by-Appcues

Toolbar

Image for post
Image for post
https://dribbble.com/shots/12077842-Components-allocation-by-supplier-Retail-planning-SaaS-web-app

Tooltips

Image for post
Image for post
https://dribbble.com/shots/8064813-Search-results

Tree

Image for post
Image for post
https://dribbble.com/shots/4070665-Add-Content

Video Player

Image for post
Image for post
https://dribbble.com/shots/3938240-Player-Stylesheet

Page Templates

Article

Image for post
Image for post
https://dribbble.com/shots/5651703-Hidden-Onions-Article-Page

Cart

Image for post
Image for post
https://dribbble.com/shots/12587384-Daily-UI-058-Shopping-Cart

Checkout

Image for post
Image for post
https://dribbble.com/shots/9780856-Wedding-man-Payment

Dashboard

Image for post
Image for post
https://dribbble.com/shots/9403394--Property-Management-Dashboard

Forgot Password

Image for post
Image for post
https://dribbble.com/shots/5451490-Forgot-Password-UI-Design

Getting Started

Image for post
Image for post
https://dribbble.com/shots/11185264-Getting-Started

Kanban

Image for post
Image for post
https://dribbble.com/shots/10880905-Candidate-Pipeline-Hiring-Platform

List

Image for post
Image for post
https://dribbble.com/shots/6816310--Exploration-Dashboard-for-Task-Management

Log In

Image for post
Image for post
https://dribbble.com/shots/9512973-Hire-Ground-Sign-In

Media Lightbox

Image for post
Image for post
https://dribbble.com/shots/4731604-Image-viewvmodal

Notification Center

Image for post
Image for post
https://dribbble.com/shots/6981104-Notification-Page

Object Details

Image for post
Image for post
https://dribbble.com/shots/6387254-LoftSmart-Property-Page

Order Summary

Image for post
Image for post
https://dribbble.com/shots/4228239-Daily-UI-Challenge-017-Email-Receipt

Payment

Image for post
Image for post
https://dribbble.com/shots/7079412-Car-insurance-checkout-experience

Product Details

Image for post
Image for post
https://dribbble.com/shots/9394176-Remorse-Product-Details-Page-Exploration-E-commerce

Reset Password

Image for post
Image for post
https://dribbble.com/shots/6416451-Reset-Password-UI-Design-Boardme

Search Results

Image for post
Image for post
https://dribbble.com/shots/6323387-Job-Search

Settings

Image for post
Image for post
https://dribbble.com/shots/5663523-Birdseed-configuration-components/attachments

Sign Up

Image for post
Image for post
https://dribbble.com/shots/7757250-Sign-up-revamp/attachments/444308?mode=media

Split View

Image for post
Image for post
https://dribbble.com/shots/4312843-Price-page-MeilleursAgents

User Profile

Image for post
Image for post
https://dribbble.com/shots/4653784-Edit-Profile

Documentation

Accessibility Guidelines

Image for post
Image for post
https://dribbble.com/shots/10481825/attachments/2316521?mode=media

Branding Guidelines

Image for post
Image for post
https://dribbble.com/shots/9882627-Collibra-Brand-Guidelines/attachments/1916209?mode=media

Coding Standards

Image for post
Image for post
https://www.nws.noaa.gov/oh/hrl/developers_docs/General_Software_Standards.pdf

Downloadable Assets

Image for post
Image for post
https://brandfolder.com/home

Editorial Guidelines

Image for post
Image for post
https://www.bbc.com/editorialguidelines/

Employee Onboarding

Image for post
Image for post
https://www.acorio.com/is-your-employee-onboarding-a-welcoming-event/

Governance Process

Image for post
Image for post
https://whimsical.com/MVWzbvHK1KYYPGUqrKkDh1

Personas

Image for post
Image for post
https://dribbble.com/shots/6341789-Talebook-Revamped-Personas

Research Guidelines

Image for post
Image for post
https://www.nngroup.com/articles/ux-research-cheat-sheet/

Team Structure

Image for post
Image for post
https://medium.com/flexport-design/designing-a-design-team-a9a066bc48a5 by Andrew Coyle

Visualizations

It’s critical to understand the difference between visualizations and when to use them. Using the wrong visualization can lead to misunderstanding, misdirection, or erroneous action.

Activity Gauge

Image for post
Image for post
https://dribbble.com/shots/7142120-Personal-Performance-App-Activity-Tracker

Area

Image for post
Image for post
https://dribbble.com/shots/8725943-Data-Table-Concept

Area Range

Image for post
Image for post
https://www.highcharts.com/demo/arearange

Area Range + Trendline

Image for post
Image for post
https://www.highcharts.com/demo/arearange-line

Bar

Image for post
Image for post
https://dribbble.com/shots/11352990-Horizontal-bar-chart-with-gradient

Bell Curve

Image for post
Image for post
https://dribbble.com/shots/4010581-Bell-curves-concepts

Bubble

Image for post
Image for post
https://dribbble.com/shots/8819622-Efficiency-Report

Bullet Graph

Image for post
Image for post
https://dribbble.com/shots/4629736-Bullet-Graphs

Butterfly

Image for post
Image for post
https://www.highcharts.com/demo/bar-negative-stack

Candlestick Chart

Image for post
Image for post
https://dribbble.com/shots/6011330-Currency-Exchange-Dashboard

Chord Dependency Wheel

Image for post
Image for post
https://www.highcharts.com/demo/dependency-wheel

Choropleth Map

Image for post
Image for post
https://dribbble.com/shots/7201235-Choropleth-2Dto3D

Column

Image for post
Image for post
https://dribbble.com/shots/3757735-Graph-Visualizations

Column Range

Image for post
Image for post
https://www.highcharts.com/demo/columnrange

Comparative Bar

Image for post
Image for post
https://dribbble.com/shots/2204512-Widget

Directed Graph

Image for post
Image for post
https://dribbble.com/shots/2886698-Follow-the-Money

Donut

Image for post
Image for post
https://dribbble.com/shots/4532342-Invocable-Alexa-Skill-Analytics

Euler Diagram

Image for post
Image for post
https://www.highcharts.com/demo/euler-diagram

Funnel Chart

Image for post
Image for post
https://dribbble.com/shots/9737429-Dashboard-Widgets

Gantt

Image for post
Image for post
https://dribbble.com/shots/6363405-Project-management-tool-Project-roadmap-Gantt-chart

Gauge

Image for post
Image for post
https://dribbble.com/shots/4145964-RoboAdvisor-Mobile-Dashboard

Grouped Bar

Image for post
Image for post
https://dribbble.com/shots/7369386-Medical-Studies-Concept

Grouped Column

Image for post
Image for post
https://dribbble.com/shots/10762151-Chattermill-Dashboard-in-Motion

Heat Map

Image for post
Image for post
https://dribbble.com/shots/3976563-Heat-Map

Hierarchy

Image for post
Image for post
https://dribbble.com/shots/5286010-Sitemappin

Histogram

Image for post
Image for post
https://www.highcharts.com/demo/histogram

Honeycomb / Hexbin

Image for post
Image for post
https://dribbble.com/shots/11102654-Chart-Builder

Interactive Map

Image for post
Image for post
https://dribbble.com/shots/7150621--Real-Estate

Line

Image for post
Image for post
https://dribbble.com/shots/5603414--Phishing-Attacks

Multi-Area

Image for post
Image for post
https://dribbble.com/shots/3718217-Comparison-chart

Multi-Line

Image for post
Image for post
https://dribbble.com/shots/11020313-grinfer-authors-analytics-page

Packed Bubble

Image for post
Image for post
https://www.highcharts.com/demo/packed-bubble

Percentage Area

Image for post
Image for post
https://www.highcharts.com/demo/area-stacked-percent

Percentage Bar

Image for post
Image for post
https://dribbble.com/shots/11014258-Horizontal-bar-chart

Percentage Column

Image for post
Image for post
https://dribbble.com/shots/7063070-Sales-Analytic-Design-Web-App

Pie

Image for post
Image for post
https://dribbble.com/shots/3406937-Datasoft-Dashboard-Charts

Radar Chart

Image for post
Image for post
https://dribbble.com/shots/3731653-Megadin-Polar-Chart

Radial Bar

Image for post
Image for post
https://dribbble.com/shots/3977100-Russian-Radial-Bar-Chart-Reference-Page

Sankey Diagram

Image for post
Image for post
https://dribbble.com/shots/9095946-MarketsN-Product-B2B-Marketplace

Scatter Plot

Image for post
Image for post
https://dribbble.com/shots/3694722-Google-Analytics-Browser-Sizes

Semicircle Donut

Image for post
Image for post
https://www.highcharts.com/demo/pie-semi-circle

Sparkline

Image for post
Image for post
https://dribbble.com/shots/5405447--KPI-Charts

Spiderweb

Image for post
Image for post
https://dribbble.com/shots/5674082--Player-Comparison

Split Packed Bubble

Image for post
Image for post
https://www.highcharts.com/demo/packed-bubble-split

Stacked Area

Image for post
Image for post
https://dribbble.com/shots/6250451--Juicy-Stacked-Area-Chart/attachments

Stacked Bar

Image for post
Image for post
https://dribbble.com/shots/3406937-Datasoft-Dashboard-Charts

Stacked Column

Image for post
Image for post
https://dribbble.com/shots/5611983--Bar-Chart/attachments

Streamgraph

Image for post
Image for post
https://www.highcharts.com/demo/streamgraph

Synchronized

Image for post
Image for post
https://www.highcharts.com/demo/synchronized-charts

Timeline

Image for post
Image for post
https://dribbble.com/shots/6319003-Timeline-UI-Design

Tree Map

Image for post
Image for post
https://dribbble.com/shots/5295354-Figma-Chart-UI-Library-Treemapping-templates

Upset Plot

Image for post
Image for post
https://www.r-graph-gallery.com/upset-plot.html

Venn Diagram

Image for post
Image for post
https://dribbble.com/shots/2189240-Venn-Diagram

Waterfall Chart

Image for post
Image for post
https://dribbble.com/shots/6710427-Waterfall-NPS-Chart

Windrose

Image for post
Image for post
https://www.highcharts.com/demo/polar-wind-rose

Word Cloud

Image for post
Image for post
https://dribbble.com/shots/1137497-word-cloud

Summary

The complete encyclopedia is meticulously documented to include categorization, types, states, and visualization features. Since it’s built using Airtable, you’ll be able to sort, filter, group, organize, and plan.

Add you own details, link to your internal documentation, and maintain your own centralized source of truth.

It’s massively influenced the way that I work, get inspired, and plan.

I think you’ll like it, too.

Image for post
Image for post

👉 Download the complete encyclopedia 👈

👉 Show me a Free Preview 👈


This post has also been published on www.productschool.com communities.

When I’m not writing about design, I’m principal of product design at Innovatemap, a digital product agency in Indianapolis, Indiana, USA.

Some other stuff:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store