Colors have been developed to help guide a user through our interface.

Icons add a visual layer to written information. They should be used to inform and enhance components. The purpose of the icon will determine whether or not it needs to receive focus or not.

Shadows and Elevations to be used in Usertesting Next theme.

We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.

Accordion is a toggle component to help customers expand and collapse sections of data

Avatars are used to quickly identify a customer’s properties including: studies, drafts, highlight reels, etc.

Badges help inform customers on the state of a study. They also communicate and indicate number-driven information.

Buttons are useful to draw attention to a goal or action. Calls to actions within buttons should be explicit.

Cards are useful to hold content. They have been used to contain content related to screeners and tasks.

Wrap an input or textarea to keep count

Draggables are items that can be moved about the interface. Customers use this pattern to add and reorder elements to fit their needs.

Dropdowns are used to present individuals with a wide range of options and actions they can take.

Droppables are containers that can receive draggable components and files. They help customers transfer information across the interface.

An image that can be be enlarged to view in full detail using the Lightbox.

Filters are a way for users to drill down information.

This component is in Beta. Gallery Cards are used to hold specific types of content. They have been used to preview content on the dashboard such as highlight reels and insights.

The icon button is used to trigger a secondary action when we want to reduced visual noise.

Indicators are a source of metadata that help customers find what they need quickly.

A lightbox is a UI component used to display (in this case) an image in a modal overlay appearing on top of the main content. It provides users with an immersive way to focus on content without disrupting the overall layout, while also allowing them to quickly navigate back to the content beneath the lightbox.

The List Row component helps group overview information. The information presented should be scannable and actionable.

A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.

Messages enable customers and testers to communicate with each other.

This component provides pictogram typed icons.

This component is a button that provides a preview image for videos.

General purpose component to track progress

This component is a component that will render a QR code of the value provided.

Rating stars component that supports half stars

The row selector component allows the user to select a list for bulk actions. It should only be used within tk-list-row.

Use segment controls for mutually exclusive selections that directly controls another component.

The split view component is made up of two content areas. The description area on the left and with the data/information area on the right. This pattern helps customers focus on data-heavy information.

Tables are used to arrange and display data in a well-structured and meaningful way.

Tags are compact elements that represent an input or attribute.

Configurable widget to display tester demographics along with an optional rating

Typeahead helps customers find teammates and reduce the likelihood of errors.

A checkbox is used to give a user a way to select a value.

Combobox lets you choose a single or multiple values from a list of options.

Form rules are used to divide content within forms.

A prompt for inputs

A controllable input box. Note: we are currently in the midst of breaking out TkInput into several smaller, more focused components.

Input titles are used to name many different elements. Note: This is not yet a web component.

A label for inputs.

A checkbox list is used to give a user a way to select any number of a set of choices.

This component is still in Beta. Please reach out to Design System team before using it.

Make a selection using a dropdown.

A radio box list is used to give a user a way to select one from a set of choices.

The range slider component allows the user to select a value or range.

Switch for users to customize their experience.

A controllable text area box.

Containers are a stylized component to hold content. Containers provide the visual foundation for most views.

Layers are used to give order and preference on components. The most common applications of Layer are on Modals and Tooltips.

Use the Toolkit helper classes to maintain harmony and alignment in the UI.

Two columns layout with main left side content and secondary right side.

Wrappers have specific widths to hold content blocks. Wrappers help organize content on a page to ensure a comfortable reading length.

This component is still in Beta. Please reach out to Design System team before using it.

These components are located near the top of views and help orient customers when they arrive to new pages.

These components are located near the top of views and help orient customers when they arrive to new pages.

Pagination allows customers to navigate between multiple pages worth of items in a single view.

This component is still in Beta. Please reach out to Design System team before using it.

Step Navigation guides users through a workflow.

Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.

When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.

The bulk selector gives individuals the ability to take complex actions on a group of items.

Modals are overlaying patterns and will intentionally obscure information behind it as such they can be disruptive. Modals require action before the user can continue interacting with the rest of UserTesting.

Popovers are components that overlay on top of the interface. Popovers can contain a mix of information. Popovers are used to inform customers about specific content and actions.

Toast gives customers helpful information about the success or failure of their action

Tooltips provide contextual information about a particular element.

The notifications appear when the logged in user has new or existing notifications.

A template that defines a simple message page, with options to include an image, banner and/or button if required.

Question cards allow users to customize their tasks or Screener questions. Group Question Containers show multiple questions that are related to a bigger task or question.

A color palette to help guide our Data Visualizations.