Naming

Different fields use names defined in the design system to communicate about variables, elements, components, and the rest. Therefore, names must be modular, expressive, and easily pronounceable.

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 releations.

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.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.