DESIGN RESOURCES

The Design System Encyclopedia

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

The Design System Encyclopedia

Visual Language

Color Definitions

https://dribbble.com/shots/6810767-Firefox-family-identity-guide

Grids & Spacing

https://dribbble.com/shots/10976823-Workly-Grid-System

Iconography

https://dribbble.com/shots/6095615-Customer-io-Iconography

Illustrations

https://dribbble.com/shots/10076909-Evolution-Brand-Illustrations

Motion & Animation

https://material.io/design/motion/understanding-motion.html#principles

Photography

https://brand.utk.edu/standards/photographic-style/

Typography Definitions

https://dribbble.com/shots/7793700-Typography

UI Tokens

Avatar

https://dribbble.com/shots/11774045-YSC-Dashboard

Badges

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

Buttons

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

Camera Upload

https://dribbble.com/shots/6340384-Allow-Access

Checkboxes

https://dribbble.com/shots/8947291-Checkbox

Chips

Color Picker

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

File Upload

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

Image

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

Ordered List

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

Radio Buttons

https://dribbble.com/shots/6544191-Radio-Buttons

Range Slider

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

Switches

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

Text Fields

https://dribbble.com/shots/6628016-Input-States

Thumbnail

https://dribbble.com/shots/5474318--Thumbnail

Unordered List

https://dribbble.com/shots/7118882-Dashboard-Tasks

Interaction Patterns

App Onboarding

https://dribbble.com/shots/7084581-onboarding-steps

Authentication

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

Autocomplete

https://dribbble.com/shots/11478574-Quick-Search

Create an Object

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

Delete an Object

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

Drag-and-Drop

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

Feature Onboarding

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

Forgot Username/Password

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

Form

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

Invite

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

Log In

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

Onboarding Spotlight

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

Permissions

https://dribbble.com/shots/4650837-User-Permissions

Reset Password

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

Settings

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

Setup Assistant

https://dribbble.com/shots/10689474-Steps-exploration

Share

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

Sign Up

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

Upgrade

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

Walkthrough

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

Wizard

https://dribbble.com/shots/6145385-Payment-flow

UI Components

Action Bar

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

Activity Feed

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

Avatar Group

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

Breadcrumbs

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

Calendar

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

Card

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

Carousel

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

Chart Legend

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

Chat (live)

https://dribbble.com/shots/4653749-Live-Chat

Comments

https://dribbble.com/shots/4644902-Community-Discussion

Cookie Notification

https://dribbble.com/shots/5559487-Circus-Cookies

Data Table

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

Date Picker

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

Dialog

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

Drawer/Accordion

https://dribbble.com/shots/8957381-Accordion-UI

Filters

https://dribbble.com/shots/7167814-Product-Concepts

Hint

https://dribbble.com/shots/4441119-Tips

List Builder

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

Loading Spinner

https://dribbble.com/shots/4543219-Loader

Map

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

Menu/Dropdown

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

Modal

https://dribbble.com/shots/3768074-Modal-windows

Notification Banner

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

Notification Snackbar

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

Notification Toast

https://dribbble.com/shots/4580930-Toast-Messages

Notification Menu

https://dribbble.com/shots/5308459--Notifications

Page Header

https://tailwindui.com/components/application-ui/headings/page-headings

Page Tabs

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

Pagination

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

Paper Tabs

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

Popover

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

Pre-formatted Text (Code)

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

Primary Navigation Menu

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

Progress Bar

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

Ratings

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

Reviews

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

Rich Text Editor

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

Search

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

Sidebar

https://dribbble.com/shots/10907005-Sidebar-navigation

Sub-navigation Menu

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

Table

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

Testimonial

https://dribbble.com/shots/9333269-Testimonial-Design

Timestamp

https://dribbble.com/shots/3970053-Timeline-Redesign

Tips

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

Toolbar

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

Tooltips

https://dribbble.com/shots/8064813-Search-results

Tree

https://dribbble.com/shots/4070665-Add-Content

Video Player

https://dribbble.com/shots/3938240-Player-Stylesheet

Page Templates

Article

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

Cart

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

Checkout

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

Dashboard

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

Forgot Password

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

Getting Started

https://dribbble.com/shots/11185264-Getting-Started

Kanban

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

List

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

Log In

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

Media Lightbox

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

Notification Center

https://dribbble.com/shots/6981104-Notification-Page

Object Details

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

Order Summary

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

Payment

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

Product Details

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

Reset Password

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

Search Results

https://dribbble.com/shots/6323387-Job-Search

Settings

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

Sign Up

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

Split View

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

User Profile

https://dribbble.com/shots/4653784-Edit-Profile

Documentation

Accessibility Guidelines

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

Branding Guidelines

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

Coding Standards

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

Downloadable Assets

https://brandfolder.com/home

Editorial Guidelines

https://www.bbc.com/editorialguidelines/

Employee Onboarding

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

Governance Process

https://whimsical.com/MVWzbvHK1KYYPGUqrKkDh1

Personas

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

Research Guidelines

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

Team Structure

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

Visualizations

Activity Gauge

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

Area

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

Area Range

https://www.highcharts.com/demo/arearange

Area Range + Trendline

https://www.highcharts.com/demo/arearange-line

Bar

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

Bell Curve

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

Bubble

https://dribbble.com/shots/8819622-Efficiency-Report

Bullet Graph

https://dribbble.com/shots/4629736-Bullet-Graphs

Butterfly

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

Candlestick Chart

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

Chord Dependency Wheel

https://www.highcharts.com/demo/dependency-wheel

Choropleth Map

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

Column

https://dribbble.com/shots/3757735-Graph-Visualizations

Column Range

https://www.highcharts.com/demo/columnrange

Comparative Bar

https://dribbble.com/shots/2204512-Widget

Directed Graph

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

Donut

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

Euler Diagram

https://www.highcharts.com/demo/euler-diagram

Funnel Chart

https://dribbble.com/shots/9737429-Dashboard-Widgets

Gantt

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

Gauge

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

Grouped Bar

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

Grouped Column

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

Heat Map

https://dribbble.com/shots/3976563-Heat-Map

Hierarchy

https://dribbble.com/shots/5286010-Sitemappin

Histogram

https://www.highcharts.com/demo/histogram

Honeycomb / Hexbin

https://dribbble.com/shots/11102654-Chart-Builder

Interactive Map

https://dribbble.com/shots/7150621--Real-Estate

Line

https://dribbble.com/shots/5603414--Phishing-Attacks

Multi-Area

https://dribbble.com/shots/3718217-Comparison-chart

Multi-Line

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

Packed Bubble

https://www.highcharts.com/demo/packed-bubble

Percentage Area

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

Percentage Bar

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

Percentage Column

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

Pie

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

Radar Chart

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

Radial Bar

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

Sankey Diagram

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

Scatter Plot

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

Semicircle Donut

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

Sparkline

https://dribbble.com/shots/5405447--KPI-Charts

Spiderweb

https://dribbble.com/shots/5674082--Player-Comparison

Split Packed Bubble

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

Stacked Area

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

Stacked Bar

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

Stacked Column

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

Streamgraph

https://www.highcharts.com/demo/streamgraph

Synchronized

https://www.highcharts.com/demo/synchronized-charts

Timeline

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

Tree Map

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

Upset Plot

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

Venn Diagram

https://dribbble.com/shots/2189240-Venn-Diagram

Waterfall Chart

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

Windrose

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

Word Cloud

https://dribbble.com/shots/1137497-word-cloud

Summary

👉 Check out the Design Encyclopedia 👈

--

--

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com

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
Jon Moore

Principal Design Partner Innovatemap in Indianapolis. Creator of The Design Encyclopedia (https://www.designencyclopedia.io). Email: 1jonmoore@gmail.com