Aug 16, 2020
DESIGN RESOURCES
The Design System Encyclopedia
A complete, visual encyclopedia of UI tokens, components, interaction patterns, and visualizations.
Before we get started, I’ve documented everything listed here plus way more over at the Design System Encyclopedia website. Check it out!
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
The Design System Encyclopedia is a vast collection of meticulously documented design tokens, components, page layouts, interaction patterns, and visualizations.
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
The visual language is how your product, brand, and system look and feel visually.
Color Definitions
These are the colors used in your product, app, or website. Consider defining the following:
- Brand colors: primary, secondary, tertiary
- State colors: Error, warning, success, info
- UI colors: black, white, grey
Grids & Spacing
Grids and spacing are critical for organizing data and content in an understandable way.
- Define: column widths, gutter widths, margins, padding, vertical rhythm
Iconography
Icons are pictographic symbols or graphics representing an object or action. Icons can be categorized the following way:
- Feature icons: Home, Calendar, Profile, etc.
- Action icons: add, delete, edit, etc.
- UI icons: arrows, flags, checks, etc.
Illustrations
Illustrations are digitally-drawn images used to represent something. They typically reflect the overarching brand.
- Define: illustration style, subject, color usage
Motion & Animation
Motion and animation bring a static brand to life.
- Define: style, complexity, speed, easing, sound effects, music, format (gif/svg/mov)
Photography
Not all brands use photography in their identity, but those that do maintain a consistent standard and style.
- Define: photo style, subject, color treatment, size, crop, angle
Typography Definitions
Typography is the style and appearance of text in your product, app, or website. Define the following attributes in your design system:
- Define: size, weight, tracking, leading, line-height, color
UI Tokens
UI tokens are the most basic building blocks of a digital product. In the book Atomic Design by Brad Frost, UI tokens are the atoms–the foundational blocks–which comprise our interface designs.
Avatar
An avatar is a visual representation of a user.
Badges
Badges are small, visual status descriptors for various interface elements.
Buttons
Buttons execute various actions in the system.
Camera Upload
Camera upload enables the user to take and upload photos directly from their device camera. It is required by law to ask the user’s permission before accessing their camera.
Checkboxes
Checkboxes let users make a binary choice between two distinct options. Groups of checkboxes may be used when the user can make more than one selection from a list of homogenous (similar) options.
Chips
Chips are small, visual, interactive descriptors for interface elements.
Color Picker
A color picker allows the user to select a color to be applied to a system object.
File Upload
A file uploader allows the user to upload external files into the product. Depending on the uploader, files may come from the user’s computer or an online cloud storage service like Dropbox.
Image
Images can be large or small, and cropped in different ways to fit the space.
Ordered List
Ordered lists are used to represent items that must be viewed or completed in a specific sequence.
Radio Buttons
Radio buttons allow the user to choose a single option from a set of mutually exclusive options.
Range Slider
A range slider is an interactive control that allows the user to slide a handle along a predetermined scale to set a numeric input.
Switches
A switch is a binary, skeuomorphic control used to activate or inactivate a setting.
Text Fields
Text fields receive, store, and present alphanumeric content.
Thumbnail
A thumbnail is a smaller version of a large image.
Unordered List
Unordered lists are used to organize items which do not need to be viewed or completed in a specific sequence.
Interaction Patterns
App Onboarding
Onboarding is a technique for teaching the user about your product at the moment they begin using it.
Authentication
Authentication helps verify that the user is who they claim to be. Verification can be done via a third party tool or by asking personally-identifying information.
Autocomplete
Autocomplete is a text field enhancement which predicts the rest of a word the user is typing. Predictions generally appear in a dropdown menu below the text box, and can be navigated using keyboard arrows.
Create an Object
The method by which objects are added to the system by the user. Object creation can be simple or advanced depending on the complexity of the object.
Delete an Object
The method by which objects are permanently removed from the system by the user. Depending on the complexity of the object, deletion may be immediate, or protected by a confirmation step.
Drag-and-Drop
Drag-and-drop allows the user to click (or tap) and drag an object from one place to another. It is typically used for file uploading, but can also be used in list builders and to reorder items in a list.
Feature Onboarding
Feature onboarding is a technique for teaching the user about a specific feature at the moment they first encounter it. This in-the-moment teaching can be informational or interactive.
Forgot Username/Password
The forgot username/password interaction enables users to recover credentials which they cannot remember. Recovery generally happens via email, security questions, or SMS.
Form
A form includes one or more components such as text fields, check boxes, or drop-downs, and is used to collect input from the user. Once completed and validated, this data is submitted and/or saved to the system.
Invite
The invite flow enables users to grant system access to others who lack the appropriate rights or permissions to do so on their own.
Log In
The log in flow validates the identity of a user with at least two credentials — typically an email or username and a password.
Onboarding Spotlight
Spotlights are an onboarding technique for drawing focused attention to specific portions of the screen using a darkened scrim and a “spotlight”. Spotlight onboarding steps can be mandatory or optional.
Permissions
Permissions grant users certain abilities or access within an app.
Reset Password
The reset password flow enables a user to update forgotten credentials after verifying their identity.
Settings
Settings enable users to configure specific details for how the system operates.
Setup Assistant
A setup assistant guides the user through specific steps, sequenced or not, in order to teach them how to do specific tasks.
Share
Sharing grants users without access the ability to see and/or interact with certain objects in the system. The act of sharing can occur via email, hyperlink, or SMS.
Sign Up
Sign up is the method by which users present and verify their identity in order to register or enlist for a product. These credentials are used to validate the identity of a user each time they attempt to access the system.
Upgrade
Upgrading is the act of moving from one package of features to another, typically at a greater expense.
Walkthrough
A walkthrough is a specific sequence of guided steps whereby a user is ushered through successive tasks in order to complete an objective.
Wizard
A wizard is a set of tasks to be completed by the user, but in no particular order.
UI Components
Components are complex UI elements consisting of multiple UI tokens. They are the molecules of atomic design, as they are comprised of several atoms.
Action Bar
An action bar is a group of tools for manipulating objects or performing activities.
Activity Feed
An activity feed is a chronological record of system events or user actions.
Avatar Group
An avatar group is a visual representation of multiple users.
Breadcrumbs
Breadcrumbs are a visual record of a user’s location in a hierarchy of objects.
Calendar
A calendar is a visual arrangement of time, typically represented in days, weeks, months, or years.
Card
Cards are visually-contained groups of similar content and/or actions about a single object or subject.
Carousel
A carousel is a series of content items, displayed one at a time.
Chart Legend
A chart legend is a set of labels describing the content of a chart.
Chat (live)
Chat enables synchronous or asynchronous communication between two users, or one user and a scripted chat engine.
Comments
Comments are written remarks about a particular system object. Comments are often combined with a rating or score.
Cookie Notification
A cookie notification is a visual alert informing the user that a website has stored a small piece of data on their computer so that it can remember important information about them later for things such as advertising.
Data Table
A data table is a tabular collection of like-objects which can be searched, filtered, sorted, and/or manipulated by the user.
Date Picker
A date picker is an interface control which enables the user to select a date visually using a small calendar.
Dialog
A dialog is a small, floating window that communicates information to the user, and/or prompts them for a response.
Drawer/Accordion
An accordion is a vertical or horizontal list of items which can be expanded or collapsed to show or hide additional information.
Filters
Filters are groups of attributes which can be toggled on or off to show or hide objects with those matching attributes.
Hint
A hint is a graphical icon, usually a question mark or a lower case “I”, which displays additional information when the user pauses the mouse cursor on top of it.
List Builder
A list builder is a two-sided control element which allows a user to move list items back and forth between two lists, with one list representing selected items, and the other representing unselected items.
Loading Spinner
A loading spinner is a graphical indicator used to signify when an operation is being performed, but isn’t yet finished. It is meant to signify that the system has received the user’s request, but has not yet finished processing it.
Map
A map is a graphical representation of geospatial information.
Menu/Dropdown
A menu (or dropdown) is a list of options or actions from which the user can choose. When a menu is closed, the options are hidden from view.
Modal
A dialog is a small, floating window that communicates information and collections input from the user.
Notification Banner
A notification banner is a thin, horizontal bar or box containing important information, usually appearing at or near the top of an interface for visibility.
Notification Snackbar
A snackbar is a thin, horizontal bar or box containing important information, usually appearing briefly at the bottom-center of an interface, before disappearing. A snackbar may additionally contain an action that can be triggered during the period in which it is visible.
Notification Toast
A toast notification is a thin, horizontal bar or box containing important information and/or actions, usually appearing at the bottom- or top-right of the interface. A toast notification is named as such due to how it animates into and out of the viewport.
Notification Menu
A notification menu is an activity feed within a dropdown.
Page Header
- Considerations: Icon, page title, subtitle, metadata, breadcrumbs, team members
- Tools & actions: primary, secondary, overflow
Page Tabs
Tabs can help divide and organize detailed content on a page. Page tabs generally appear as plain text directly on the background with the active tab underlined.
Pagination
Pagination is a technique for dividing a list of objects into multiple pages. This eases the load on the database, and often returns results faster than infinite scroll.
Paper Tabs
Tabs can help divide and organize detailed content on a page. Paper tabs mimic the appearance of tabs in a binder or atop a manilla folder.
Popover
Popovers combine the contextual convenience of a tooltip with the content detail of a dialog box. Popovers are generally (but not always) triggered by a click, and appear over or near the triggering item. Popovers may be purely informational, or provide interactive controls.
Pre-formatted Text (Code)
Pre-formatted text tells the browser to display text exactly as it is written, instead of rendering it based on browser rules. Pre-formatted text is generally rendered in a monospaced typeface for increased readability.
Primary Navigation Menu
The primary navigation menu divides an app into unique functional areas.
Progress Bar
A progress bar is a visual status indicator of a determinate or indeterminate process. They are used to let the user know the system is successfully performing an action when a process may take a long time.
Ratings
A rating is a visual representation of rank or grade. Rating systems may vary in step quantity, which is a key factor in understanding how a user rates something, and what their rating means.
Reviews
A review is a formalized, written assessment or examination of something with the possible intention of influencing others.
Rich Text Editor
A rich text editor, sometimes called a WYSIWYG (“what you see is what you get”) editor, is an interface for visually altering the appearance of text.
Search
Search is a function or process whereby the user attempts to locate specific objects by inputting relevant, related words or phrases.
Sidebar
A sidebar is a vertical menu used for holding navigational elements, contextual information, or useful tools.
Sub-navigation Menu
A sub-navigation menu is a set of child pages or functional areas related to a shared parent.
Table
A table is list of homogenous items or objects. Tables are useful for presenting detailed information in an easy-to-consume layout.
Testimonial
A testimonial is written or spoken statement praising the virtue of something.
Timestamp
A timestamp is a digital record of the date and/or time of an event.
Tips
Tips are contextual popovers used to guide the user through a specific task or introduce a new feature.
Toolbar
A toolbar is a collection of controls and actions used to manipulate data on a page.
Tooltips
A tooltip is a snippet of relevant information that appears while hovering over a specific trigger point.
Tree
A tree is a visual hierarchy of information, typically used for files and folders.
Video Player
A video player displays multimedia content with controls for manipulating playback.
Page Templates
Page templates are layouts for common pages. Despite the variety of digital products, all pages tend to boil down to a small set of general layouts. While this isn’t a comprehensive list, these cover most use cases.
Article
An article is a piece of writing and mixed media about a specific topic.
Cart
A cart is where user-selected items are stored before checkout.
Checkout
Checkout is the process by which items are purchased. Checkout requires the user to specify shipping information (when relevant), payment information, and other related details.
Dashboard
A dashboard is the first screen a user encounters when logging into a system. Dashboards present textual and graphical summaries of important information which a user can or should act upon.
Forgot Password
The forgot password page collects an identifying piece of information from the user in order to send them instructions for resetting their password.
Getting Started
A getting started page is a form of onboarding which tasks the user with completing a number of steps in order to prime the system with information, or learn how it works.
Kanban
A kanban board is an interactive visualization of information grouped by a unique attribute (like status). Information snippets are presented on cards which can be moved from one column (or status) to the next.
List
A list is used for presenting simple, actionable data objects. Lists are simpler than tables, and typically don’t include tools like filtering and sorting.
Log In
The log in page validates the identity of a user with at least two credentials — typically an email or username and a password.
Media Lightbox
A media lightbox draws focus to a single piece of media by enlarging it and obscuring the interface with a scrim.
Notification Center
A notification center is and audit trail of all system and user notifications.
Object Details
An object detail modal or page visually organizes object attributes in a consumable layout.
Order Summary
An order summary provides the user with confirmation that their purchase was processed successfully, and summarizes what they bought.
Payment
A payment page is a secure portal for collecting tender details from the user. This page may also include fields for discounts and/or coupon codes.
Product Details
A product detail modal or page visually organizes product attributes in a consumable layout to aid users in purchasing decisions.
Reset Password
The reset password page enables a user to update forgotten credentials according to specific password requirements.
Search Results
A search results page includes the objects located which match the user-specified search criteria.
Settings
Settings are where the user can configure various details about how the system can be accessed, how it operates, and/or how it looks.
Sign Up
The sign up page is where users present and verify their identity in order to register or enlist for a product.
Split View
A split view is a vertically- or horizontally-divided interface for co-displaying related information.
User Profile
The user profile is where access credentials and personal information about a user are stored.
Documentation
Documentation is written guidelines and annotations of a process or requirement. They are critical in a design system for chronicling important decisions, conditions, and necessities.
Accessibility Guidelines
Accessibility guidelines specify how a product should be designed and written to accommodate users of diverse physical and cognitive abilities.
Branding Guidelines
Branding guidelines specify the limitations of how a brand can and should be expressed in various contexts.
Coding Standards
Coding standards help developers maintain a consistent, organized, and coherent code base to ensure maximum team efficiency.
Downloadable Assets
Downloadable assets are centralized and universally-available resources enabling interdisciplinary collaboration and consistency.
Editorial Guidelines
Editorial guidelines are a set of writing rules to ensure brand consistency in voice, tone, and style so that content is consistent across all mediums and channels.
Employee Onboarding
An employee onboarding process is the set of procedures necessary for welcoming, training, and enabling a new hire.
Governance Process
A governance process is a quality control exercise to ensure consistent usage, growth, and maintenance of a design system, brand identity, or style guide.
Personas
A persona is a set of characteristics and behaviors defining a particular type or profile of user, stakeholder, or buyer.
Research Guidelines
User research guidelines specify the methods and techniques for conducting, collecting, and analyzing research.
Team Structure
A team structure diagram illustrates the hierarchical organization of a team. This diagram can serve as a reference for decision-making, responsibilities, and project ownership.
Visualizations
Visualizations are visual techniques for displaying and representing data. While they should never be used as a crutch, visualizations are highly effective for giving meaning to large amounts of data.
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
Used to show progress toward multiple, recurring goals.
Area
Used when data points are highly variable over time. If data points have little variance, consider using a line chart instead.
Area Range
Used to show the delta or difference between two values.
Area Range + Trendline
Used to show how the delta or difference between two values changes over time.
Bar
Use to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent. Most commonly used when sorted by descending value.
Bell Curve
Used to illustrate the distribution of values across a population.
Bubble
Used when data has three dimensions, each containing a set of values. The first dimension represents the y-axis value, the second value represents the x-axis value, and the third dimension represents the size of the bubble.
Bullet Graph
Used for comparing the performance of a primary measure to one or more other measures. A bullet graph can be useful replacement for a gauge or meter.
Butterfly
Used to represent and compare two data series side-by-side.
Candlestick Chart
Used by stock traders to determine possible price movement based on past patterns. A candlestick chart displays four price points — open, close, high, and low — across a specified period of time.
Chord Dependency Wheel
Used to show relationships between items.
Choropleth Map
Used to represent an aggregate summary of a geographic characteristic within an area.
Column
Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
Column Range
Used to show the range of a particular value in a category.
Comparative Bar
Used to compare two sets of data on the same axis.
Directed Graph
Used to represent asymmetrical, directional relationships between objects (called nodes).
Donut
Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents. The area in the center can be used to show additional information.
Euler Diagram
Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.
Funnel Chart
Used to represent values at successive stages of a process.
Gantt
Used for displaying overlapping tasks over time.
Gauge
Used for comparing values between a small number of variables, either with multiple needles on the same gauge, or multiple gauges.
Grouped Bar
Used for showing multi-category change over time.
Grouped Column
Used to compare multiple sets of data.
Heat Map
Used to show the magnitude of a phenomenon as color in two dimensions.
Hierarchy
Used to portray the elements of a system, organization, or concept from its highest position to the lowest. Connecting lines explain the relationship between different objects.
Histogram
Used to represent an approximate representation of the distribution of numerical data.
Honeycomb / Hexbin
Used in place of a choropleth map to avoid area bias, since each region is represented by a hexagon of equal size.
Interactive Map
Used to enable the exploration of a geographic area.
Line
Used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.
Multi-Area
Used to display multiple categories when their data points are highly variable over time.
Multi-Line
Used to track changes over time for two or more categories.
Packed Bubble
Used to compare values of multivariate data. The positioning of the bubbles carries no meaning; the chart is optimized for compactness.
Percentage Area
Used to display the proportions of various categories over time, and how each contributes to the cumulative total.
Percentage Bar
Used to represent percentages instead of values.
Percentage Column
Used to represent percentages instead of values.
Pie
Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents.
Radar Chart
Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.
Radial Bar
Used to present a bar chart in a polar coordinate system.
Sankey Diagram
Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.
Scatter Plot
Used to display values in a large set of data with two variables. Scatter plots are useful for visualizing clustering, trending, and movement over time.
Semicircle Donut
Used to more concisely display donut chart data.
Sparkline
Used to present the general shape of the variation in some measurement when space is limited.
Spiderweb
Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.
Split Packed Bubble
Used to compare values of multivariate data. Bubbles are packed and organized into their respective categories.
Stacked Area
Used to display cumulative totals of multiple categories over time.
Stacked Bar
Used to show the parts of multiple totals.
Stacked Column
Used to show the parts of multiple totals, and how they change over time.
Streamgraph
Used to display high-volume datasets and discover trends and patterns over time across a wide range of categories.
Synchronized
Used to compare multiple data points over time.
Timeline
Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.
Tree Map
Used to display hierarchical data using nested rectangles.
Upset Plot
Used to visualize intersections of multiple sets of data, as in a Venn diagram.
Venn Diagram
Used to see the relationships between two or three sets of items.
Waterfall Chart
Used for displaying sequential activities over time.
Windrose
Used by meteorologists to give a succinct view of how wind speed and direction are distributed at a particular location.
Word Cloud
Used to illustrate the importance, weight, or occurrence of various words.
Summary
This is a lot of information, and Medium isn’t really the best medium for it (heh, pun intended).
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.
👉 Check out the Design Encyclopedia 👈
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:
