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.
The visual language is how your product, brand, and system look and feel visually.
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
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 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)
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 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 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.
An avatar is a visual representation of a user.
Badges are small, visual status descriptors for various interface elements.
Buttons execute various actions in the system.
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 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 are small, visual, interactive descriptors for interface elements.
A color picker allows the user to select a color to be applied to a system object.
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.
Images can be large or small, and cropped in different ways to fit the space.
Ordered lists are used to represent items that must be viewed or completed in a specific sequence.
Radio buttons allow the user to choose a single option from a set of mutually exclusive options.
A range slider is an interactive control that allows the user to slide a handle along a predetermined scale to set a numeric input.
A switch is a binary, skeuomorphic control used to activate or inactivate a setting.
Text fields receive, store, and present alphanumeric content.
A thumbnail is a smaller version of a large image.
Unordered lists are used to organize items which do not need to be viewed or completed in a specific sequence.
Onboarding is a technique for teaching the user about your product at the moment they begin using it.
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 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 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 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.
The forgot username/password interaction enables users to recover credentials which they cannot remember. Recovery generally happens via email, security questions, or SMS.
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.
The invite flow enables users to grant system access to others who lack the appropriate rights or permissions to do so on their own.
The log in flow validates the identity of a user with at least two credentials — typically an email or username and a password.
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 grant users certain abilities or access within an app.
The reset password flow enables a user to update forgotten credentials after verifying their identity.
Settings enable users to configure specific details for how the system operates.
A setup assistant guides the user through specific steps, sequenced or not, in order to teach them how to do specific tasks.
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 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.
Upgrading is the act of moving from one package of features to another, typically at a greater expense.
A walkthrough is a specific sequence of guided steps whereby a user is ushered through successive tasks in order to complete an objective.
A wizard is a set of tasks to be completed by the user, but in no particular order.
Components are complex UI elements consisting of multiple UI tokens. They are the molecules of atomic design, as they are comprised of several atoms.
An action bar is a group of tools for manipulating objects or performing activities.
An activity feed is a chronological record of system events or user actions.
An avatar group is a visual representation of multiple users.
Breadcrumbs are a visual record of a user’s location in a hierarchy of objects.
A calendar is a visual arrangement of time, typically represented in days, weeks, months, or years.
Cards are visually-contained groups of similar content and/or actions about a single object or subject.
A carousel is a series of content items, displayed one at a time.
A chart legend is a set of labels describing the content of a chart.
Chat enables synchronous or asynchronous communication between two users, or one user and a scripted chat engine.
Comments are written remarks about a particular system object. Comments are often combined with a rating or score.
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.
A data table is a tabular collection of like-objects which can be searched, filtered, sorted, and/or manipulated by the user.
A date picker is an interface control which enables the user to select a date visually using a small calendar.
A dialog is a small, floating window that communicates information to the user, and/or prompts them for a response.
An accordion is a vertical or horizontal list of items which can be expanded or collapsed to show or hide additional information.
Filters are groups of attributes which can be toggled on or off to show or hide objects with those matching attributes.
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.
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.
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.
A map is a graphical representation of geospatial information.
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.
A dialog is a small, floating window that communicates information and collections input from the user.
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.
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.
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.
A notification menu is an activity feed within a dropdown.
- Considerations: Icon, page title, subtitle, metadata, breadcrumbs, team members
- Tools & actions: primary, secondary, overflow
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 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.
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.
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.
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.
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.
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 is a function or process whereby the user attempts to locate specific objects by inputting relevant, related words or phrases.
A sidebar is a vertical menu used for holding navigational elements, contextual information, or useful tools.
A sub-navigation menu is a set of child pages or functional areas related to a shared parent.
A table is list of homogenous items or objects. Tables are useful for presenting detailed information in an easy-to-consume layout.
A testimonial is written or spoken statement praising the virtue of something.
A timestamp is a digital record of the date and/or time of an event.
Tips are contextual popovers used to guide the user through a specific task or introduce a new feature.
A toolbar is a collection of controls and actions used to manipulate data on a page.
A tooltip is a snippet of relevant information that appears while hovering over a specific trigger point.
A tree is a visual hierarchy of information, typically used for files and folders.
A video player displays multimedia content with controls for manipulating playback.
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.
An article is a piece of writing and mixed media about a specific topic.
A cart is where user-selected items are stored before 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.
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.
The forgot password page collects an identifying piece of information from the user in order to send them instructions for resetting their password.
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.
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.
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.
The log in page validates the identity of a user with at least two credentials — typically an email or username and a password.
A media lightbox draws focus to a single piece of media by enlarging it and obscuring the interface with a scrim.
A notification center is and audit trail of all system and user notifications.
An object detail modal or page visually organizes object attributes in a consumable layout.
An order summary provides the user with confirmation that their purchase was processed successfully, and summarizes what they bought.
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.
A product detail modal or page visually organizes product attributes in a consumable layout to aid users in purchasing decisions.
The reset password page enables a user to update forgotten credentials according to specific password requirements.
A search results page includes the objects located which match the user-specified search criteria.
Settings are where the user can configure various details about how the system can be accessed, how it operates, and/or how it looks.
The sign up page is where users present and verify their identity in order to register or enlist for a product.
A split view is a vertically- or horizontally-divided interface for co-displaying related information.
The user profile is where access credentials and personal information about a user are stored.
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 specify how a product should be designed and written to accommodate users of diverse physical and cognitive abilities.
Branding guidelines specify the limitations of how a brand can and should be expressed in various contexts.
Coding standards help developers maintain a consistent, organized, and coherent code base to ensure maximum team efficiency.
Downloadable assets are centralized and universally-available resources enabling interdisciplinary collaboration and consistency.
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.
An employee onboarding process is the set of procedures necessary for welcoming, training, and enabling a new hire.
A governance process is a quality control exercise to ensure consistent usage, growth, and maintenance of a design system, brand identity, or style guide.
A persona is a set of characteristics and behaviors defining a particular type or profile of user, stakeholder, or buyer.
User research guidelines specify the methods and techniques for conducting, collecting, and analyzing research.
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 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.
Used to show progress toward multiple, recurring goals.
Used when data points are highly variable over time. If data points have little variance, consider using a line chart instead.
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.
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.
Used to illustrate the distribution of values across a population.
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.
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.
Used to represent and compare two data series side-by-side.
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.
Used to represent an aggregate summary of a geographic characteristic within an area.
Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
Used to show the range of a particular value in a category.
Used to compare two sets of data on the same axis.
Used to represent asymmetrical, directional relationships between objects (called nodes).
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.
Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.
Used to represent values at successive stages of a process.
Used for displaying overlapping tasks over time.
Used for comparing values between a small number of variables, either with multiple needles on the same gauge, or multiple gauges.
Used for showing multi-category change over time.
Used to compare multiple sets of data.
Used to show the magnitude of a phenomenon as color in two dimensions.
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.
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.
Used to enable the exploration of a geographic area.
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.
Used to display multiple categories when their data points are highly variable over time.
Used to track changes over time for two or more categories.
Used to compare values of multivariate data. The positioning of the bubbles carries no meaning; the chart is optimized for compactness.
Used to display the proportions of various categories over time, and how each contributes to the cumulative total.
Used to represent percentages instead of values.
Used to represent percentages instead of values.
Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents.
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.
Used to present a bar chart in a polar coordinate system.
Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.
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.
Used to more concisely display donut chart data.
Used to present the general shape of the variation in some measurement when space is limited.
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.
Used to display cumulative totals of multiple categories over time.
Used to show the parts of multiple totals.
Used to show the parts of multiple totals, and how they change over time.
Used to display high-volume datasets and discover trends and patterns over time across a wide range of categories.
Used to compare multiple data points over time.
Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.
Used to display hierarchical data using nested rectangles.
Used to visualize intersections of multiple sets of data, as in a Venn diagram.
Used to see the relationships between two or three sets of items.
Used for displaying sequential activities over time.
Used by meteorologists to give a succinct view of how wind speed and direction are distributed at a particular location.
Used to illustrate the importance, weight, or occurrence of various words.
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: