Our design system is not open source, but we’re making it public to raise awareness, foster collaboration, drive higher-quality content, and champion transparency. Our system comprises four key sections: Foundations, Components, Patterns, and the Product content style guide.
The Foundations establish our core design principles—covering colors, typography, spacing, icons, elevations, and illustrations—that are essential building blocks for every project.
The Components section offers ready-to-use elements that ensure consistency and efficiency across our interfaces.
Patterns provide tested, reusable solutions that combine these elements to address common user needs and workflows.
Our Product content style guide sets standards for in-product copy, ensuring that every text is clear, concise, and aligned with our value-focused communication. By sharing these guidelines, we invite valuable feedback and encourage a collective sense of ownership that enhances the overall user experience.
Foundations
Foundations are the essential building blocks that help you kickstart your projects. This section outlines practical guidelines and assets—including colors, typography, spacing, icons, elevations, and illustrations—that ensure a consistent and cohesive visual language from day one.
Accessibility
Soul's commitment to accessibility is a fundamental aspect of our design philosophy.
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.
Modul 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.
Typography
Typography serves to help organize information.
UI Icon
Provide additional meaning or in places where text label doesn’t fit.
UI Motion
Motion brings to our UI a sense of life while providing our users with valuable interactional feedback.
Components
Components are the ready-to-use building blocks that bring your interfaces to life. This section offers a curated library of pre-designed elements—such as buttons, forms, data tables, or navigations—that are fully compliant with our style guidelines. Use these components to quickly assemble consistent, accessible, and efficient user interfaces, or explore specific categories to find the perfect fit for your project.
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 are standard and reusable solutions that combine multiple components and templates to address common user challenges. They encapsulate best practices and proven workflows, guiding you in creating consistent, intuitive experiences that efficiently meet user goals.
🚧 AI guidelines
Create AI-enhanced applications that provide significant value to users.
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.
🚧 Export
Follow Soul's recommendations for data exporting in Emplifi Suite.
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.
UI Shell
It isolates specific sections of an interface with a distinct, alternate color mode.
Product content style guide
Product Content Style Guide sets the standards for every piece of in-product copy on the Emplifi Platform. It provides clear, actionable guidelines to craft messages that are easy-to-read, concise, and modern—ensuring users navigate the platform effortlessly and complete their tasks efficiently. Our value-focused, consistent tone empowers users by making every instruction and piece of information both engaging and intuitive.
Grammar
Abbreviations
Articles
Capitalization
Contractions
Date and time
Numbers
Punctuation
Singular versus plural