Sizes

Soul defines sizing using T-shirt sizes for all elements and components and Number scale for spacing. This makes it possible for anyone, technical or non-technical, to understand the differences and relations.

• Keep it consistent and short: Always use the short-form version (S, M, L, xL) when naming components, tokens, or symbols. This makes it quicker for developers to reference them.
• Default size: M is always the default or the base value.
• Larger sizes: When you want to define a size larger than M, we use L, xL, or xxL. If it’s a component, make it possible to pass the size via a size property.
• Smaller sizes: When you want to define a size smaller than M, we use S, xS, or xxS. If it’s a component, make it possible to pass the size via a size property.

States

States refer to the different visual representations of a component based on its state or condition. For example, a button component may have different visual states based on whether it is being hovered over, clicked, or disabled.

Interactive

• Default
  The "Default" state is a component's default, idle appearance with no interactive effects. For example, a button in its Rest state displays its usual style—its standard color, border, and shape—indicating it's ready for use.
• Hover
  The "Hover" state is a component's appearance when the cursor is over it, signaling interactivity. For example, a button might subtly change color or border when hovered over.
• Active
  The "Active" state indicates that a component is currently being engaged, such as during a click. A button in this state might appear pressed or shift its styling to provide immediate feedback.
• Focus
  The "Focus" state shows that a component is selected, typically via keyboard navigation. For instance, a button might display an outline or highlight, indicating it’s ready for further interaction.

Boolean attributes

• Disabled
• Read-only
• Error
• Required/Optional

Selected (Open, Filtered)

• Selected
• Not selected

Checked

• Not checked
• Indeterminate
• Checked

Loading

• Loading
• Not loading

Validation

• None
• Error (can be standalone as a boolean)
• Success

Dragged

• Not dragged
• Dragged

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 a product or brand's visual language remains cohesive and easily recognizable to users.

Primary

This is the main type representing a page's primary action or element. The primary color typically represents it 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 essential 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.

Inverse

This type represents 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 it is easily readable.