Types

Types in the Soul Design System will help designers and developers create consistent and effective designs, regardless of the context. By establishing clear rules and guidelines for how different types are used, the design system helps ensure that the visual language of a product or brand remains cohesive and easily recognizable to users.

Primary

This is the main type used to represent a page's primary action or element. It is typically represented by the primary color to help it stand out.

Secondary

This type represents secondary actions or elements on a page, such as subheadings or secondary buttons. It has a slightly smaller font size and a less prominent color than the primary type.

Tertiary

This type is used for less important elements or actions, such as captions, footnote text, or supported buttons. It has a smaller font size and a less prominent color than primary and secondary types.

Danger

This type represents actions or elements that may have negative consequences or require caution, such as error messages, warning signs, or deleter or remove actions. It is represented by a distinctive red color to convey urgency or danger.

Request

This type represents actions that require user input or confirmation, such as form fields or buttons that initiate a request. It is represented by a distinctive green color, used as a border or background color, and indicates that it is waiting for user input.

Success

This type represents the result of previous actions on elements that have positive outcomes or successful completions, such as confirmation messages or success indicators. It is represented by a distinctive green color, to convey positivity or success.

Inverse

This type is used to represent text or elements that appear on a dark or colored background, where the default primary and secondary types may not be legible. It has a lighter color and a higher contrast than the other types to ensure that it is easily readable.