Welcome to Soul, a design system for Emplifi's products and digital experiences. When you start designing or developing a project, it's the place to go.

Please note that Soul is currently in a beta phase, and it's missing code-based components and other essential features.

Even though our design system is still a work in progress, we're making it public:

  • to raise awareness
  • improve collaboration
  • push ourselves to strive for higher-quality content
  • be more transparent


Foundations are practical steps that'll help you get started with your projects.



Use these core elements compliant with our style to create user interfaces. Browse all the elements or select a specific category.


The avatar serves as a visual element representing the user, profile, chatbot, or user group.

Avatar group

A group of avatars used to visually display a bunch of users or profiles.

Avatar info

If we need to include text information with the avatar, we can use a avatar info.


A badge is a label or indicator for communicating information in a visual way.


The breadcrumb helps users to orient where they are in the hierarchy.


A button allows users to perform actions or to navigate to other pages.

Button group

Button groups offer quick access to actions that are related to each other.


Checkboxes offer the user clickable options for a related statement.

Checkbox button

Checkbox buttons offer users quick access to related actions.

Confirmation dropdown

Dropdown menus present a list of options from which the user can select one.

Dropdown menu

Popovers are an alternative to high-impact dialogs.


Links are navigational elements used next to content or in-line with text.


Modals serve to focus the user’s attention on one task or piece of information.

Number input

Allows users to enter a numeric value and change this value with two controls.

Progress bar

The visual element providing information about the status or collecting process.

Radio button

Radio buttons allow users to select a single option from mutually exclusive choices.


Select is used to choose one or more options from a list.

Selectable item

The base for the lists in the selects or modals representing selectable parts.

Side panel

A side panel is an overlay used to focus the user’s attention on multiple tasks.


Snackbars are messages that appear briefly to describe app processes.


Tabs are used to organize content by allowing the user to switch views.


Tables use columns and rows to display actionable data within the UI.

Text input

Text input allows the user to interact with and input content and data.


Used to switch between two opposing states in the UI, usually on/off.


Tooltips are text containers offering extra information about a given area of the UI.



Patterns represent best practices for how a user fulfills an objective. They indicate reusable combinations of components and templates while addressing common user goals and flows.


Product content style guide

Copy in the Emplifi Platform guides the users through the whole platform and helps them do their job well.