​
Overview

The Design Library works as a powerful extension to the theme system, giving users more dynamic and flexible options to bring their company’s design system, crafted by the design team, into Userpilot content seamlessly. The idea is similar to how design teams organize and manage styles in Figma. Just like in Figma, where teams define and reuse components such as typography, colors, spacing and sizes, shadows, and assets, the Design Library provides a centralized place in Userpilot to set up these elements. You can create groups of styles that your team can consistently use across all Userpilot content, including the Chrome Extension, Checklists, Resource Center, NPS, and Surveys. This ensures your in-app experiences always feel cohesive and on-brand without needing to manually adjust styles every time. By setting up your Design Library, you give your entire team easy access to approved, reusable design tokens, making it faster and easier to maintain visual consistency, brand integrity, and a polished user experience at scale. With this approach, your Userpilot content isn’t just functional, it becomes a true extension of your product’s design system, mirroring the same careful planning and detail your team puts into your primary design tools.
If you’re on the Enterprise plan, you’ll have access to the Design Library by default. Users on Starter or Growth plans will need to upgrade to Enterprise to unlock this feature and start building their design library, giving them greater flexibility and control over their content styles.

​
Use cases

  • Brand consistency: ensure all in-app messages follow approved colors, fonts, and spacing for a unified look.
  • Centralized management: update design tokens in one place and apply changes across all Userpilot content.
  • Team collaboration: give teams access to shared, brand-approved styles for easy, consistent creation.
  • Faster creation: save time by reusing pre-defined style groups instead of manual styling every time.
  • Multi-brand support: manage separate style groups for different brands, products, or regions.
  • Cross-channel consistency: apply the same design tokens to Chrome Extension, Checklists, Resource Center, and NPS.

​
How to create a design library

The Design Library lets you organize your design tokens into Groups for easy reuse. You can create Groups for Colors, Typography, Spacing & Sizes, Shadows, and Assets. You can start creating your theme by navigating to Configure > Themes from the sidebar. 2. Select Email from the list of items (5).png Click on Design Library to begin adding your design style groups to your design library. Overview (1).png When you click on the Design Library button, you’ll see several tabs at the top of the screen, including:
  • Colors
  • Typography
  • Spacing & Sizes
  • Shadows
  • Assets
Choose the tab you want (e.g., Colors, Typography) colors (6).png To begin adding your design system styles, simply click on Create Group. colors (7).png Then a side panel will open where you can start adding styles that match your design system, and then enter a Group Name and add your items. create group (1).png
You can add an unlimited number of items by clicking the “Add” button.
Once you’ve finished adding your types, simply click Create to save your changes. colors (8).png

​
Design library tabs explained

​
Colors

  • Use Groups to organize color tokens by theme (e.g. Primary, Grayscale, Status).
  • Define color names and HEX values.
colors (9).png

​
Typography

  • Use Groups to save font styles (e.g. Headings, Body).
  • Define font family, weight, size, and line height.
typography (1).png

​
Spacing & Sizes

  • Use Groups to save spacing scales or size presets.
  • Define pixel or rem values.
spacing and sizes (1).png

​
Shadows

  • Use Groups to save shadow presets.
  • Define offset, blur, color, and opacity.
Shadows (1).png

​
Assets

  • Use Groups to organize images, logos, or icons.
  • Upload and categorize assets.
Assets (1).png After setting up your design library, you can use these token groups throughout your Userpilot content, including the Theme, Chrome Extension, Resource Center, and Checklists, to ensure a consistent and unified experience and reduce creation time by simply selecting predefined styles. choose type (1).png buttons (8).png
The design library currently supports the web app themes and content. We’ll expand its capabilities to include the mobile app theme and content next.
For any questions or concerns, please reach out to support@userpilot.com