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
Foundations are practical steps that'll help you get started with your projects.
Colors
Consistent and engaging user interfaces throughout Emplifi Platform.
Container
A container divides content into meaningful sections.
Elevation
The elevations are the layered containers that form the foundation of the UI.
Illustrations
Visual symbols used to represent ideas, objects, or narratives.
Platform icons
App icons represent the main products in platform's navigation.
Radius
Rounded corners in elements and various pieces of content.
Spacing
Help designers deliver clear, functional layouts.
Overview
Typography serves to help organize information.
UI Icon
Provide additional meaning or in places where text label doesn’t fit.
Elements
Use these core elements compliant with our style to create user interfaces. Browse all the elements or select a specific category.
Avatar
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.
Badge
A badge is a label or indicator for communicating information in a visual way.
Breadcrumb
The breadcrumb helps users to orient where they are in the hierarchy.
Button
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.
Checkbox
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.
Link
Links are navigational elements used next to content or in-line with text.
Modal
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
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.
Snackbar
Snackbars are messages that appear briefly to describe app processes.
Tab
Tabs are used to organize content by allowing the user to switch views.
Table
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.
Toggle
Used to switch between two opposing states in the UI, usually on/off.
Tooltip
Tooltips are text containers offering extra information about a given area of the UI.
Patterns
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.
Common actions
Common actions often appear across various components and workflows.
Disabled states
Disabled states appear when the user can't interact with a component.
Empty states
Empty states represent moments where there is no data to display.
Layout
An interface's structure is built from space, division, and density.
Loading
Loading is used when information takes an extended time to process.
Overflow
The overflow pattern involves the option to truncate the text.
Remove, Delete or Disconnect
We differentiate removals based on the impact.
Product content style guide
Copy in the Emplifi Platform guides the users through the whole platform and helps them do their job well.