Typography

Typography serves to organize information into clear hierarchical structures and guide users throughout interface.

Design

Up to date

React

Up to date

Main typeface

Soul uses the open-source typeface Inter. It has been carefully chosen to meet our needs and reflect our brand, ethos, and design principles. The Inter typeface family can be downloaded from Google Fonts.

Type color

The choice of type color should prioritize legibility and accessibility above all else. Keep the neutral color --color-on-layer-primary as a default option for most texts, the subtle color --color-on-layer-secondary for supplemental texts, and use --color-on-layer-interactive for primary actions.

The default color of most UI text is --color-on-layer-primary.

Avoid using colors that are inconsistent with Soul Design System interfaces.

Supplemental texts use subtle color --color-on-layer-secondary to be easily identified.

Avoid using light-type colors on light backgrounds.

For positive confirmations use --color-on-layer-success color.

For warnings, alerts, negative confirmations, and other negative information use --color-on-layer-danger color.

Primary blue color, --color-on-layer-interactive, is used for hyperlinks and primary actions.

Secondary actions and icons use --color-on-layer-primary.

Styles

The right typographic treatment and the controlled usage of typestyle help manage the display of content and keep it useful.

We recommend following our predefined styles to create a series of clear user expectations about hierarchy.

We use the following setup for the main font to create the best experience in each part of the platform.

Case alternates

Slashed zero

Contextual alternates

Tabular numbers (only for tables)

Character variants (cv08)

Mixins and variables

Headline

Inter 700 46px/60px

Display

This text style is exclusively and only to be used on teasing pages.

Mixin

headline-hero

Inter 500 30px/42px

Headline 1

Use on top of the content as a main headline or title of the page or content block. Soul recommends using only one H1 style per page.

Mixin

headline-1

Inter 500 20px/30px

Headline 2

Use on top of the content block as a second headline or title of the surface or page.

Mixin

headline-2

Inter 500 16px/24px

Headline 3

Use on top of the content block as a third headline or title of the surface or page.

Mixin

headline-3

Inter 700 13px/18px

Headline 4

Use on top of the content block as a fourth headline or title of the surface or page.

Mixin

headline-4

Inter 700 13px/18px, uppercase

Headline 4 - Uppercase

Use on top of the content block as a fourth headline or title of the surface or page.

Mixin

Inter 700 10px/12px, uppercase

Headline 5

Use this text style to differentiate smaller blocks of the content inside surfaces. Avoid using the style as a title for inputs or selects elements.

Mixin

headline-5

Body

Inter Regular 16px/24px

Large (16px) - Regular

Mixin

Variable

Inter Bold 16px/24px

Large (16px) - Bold

Mixin

Variable

Inter Regular 13px/18px

Medium (13px) - Regular

Mixin

paragraph-regular

Variable

Inter Bold 13px/18px

Medium (13px) - Bold

Mixin

paragraph-regular

Variable

--font-weight-bold

Inter Regular 11px/16px

Small (11px) - Regular

Mixin

paragraph-small

Variable

Inter Bold 11px/16px

Small (11px) - Bold

Mixin

paragraph-small

Variable

--font-weight-bold

Code

Noto Sans Mono 400 13px/18px

13px (Medium) - Regular

Mixin

code-regular

Variable

Noto Sans Mono Regular 16px/24px

Large (16px) - Regular

Mixin

Variable

Noto Sans Mono Bold 16px/24px

Large (16px) - Bold

Mixin

Variable

Noto Sans Mono Regular 13px/18px

Medium (13px) - Regular

Mixin

Variable

Noto Sans Mono Bold 13px/18px

Medium(13px) - Bold

Mixin

Variable

Noto Sans Mono Regular 11px/16px

Small (11px) - Regular

Mixin

Variable

Noto Sans Mono Bold 11px/16px

Small (11px) - Bold

Mixin

Variable

Noto Sans Mono 700 13px/18px

13px (Medium) - Bold

Mixin

code-regular

Variable

--font-weight-bold

Noto Sans Mono 400 11px/16px

11px (Small) - Regular

Mixin

code-regular

Variable

Noto Sans Mono 700 11px/16px

11px (Small) - Bold

Mixin

Variable

--font-weight-bold

Supporting

Inter 600 11px/18px

Field label

Use this style for all labels of inputs and triggers

Mixin

Variable

Inter 400 10px/12px

Helper - Regular

Mixin

helper-regular

Variable

Inter 700 10px/12px

Helper - Bold

Mixin

helper-regular

Variable

--font-weight-bold

Inter 600 13px/18px

Button label

Mixin

Variable

Inter 600 11px/18px

Field label

Use this style for all labels of inputs and triggers

Mixin

Variable

Inter 700 11px/16px, uppercase

Hotkey label

This style is reserved for hotkeys only.

Mixin

Variable

Inter 700 10px/12px, uppercase

Badge label

Mixin

Variable

Inter 800 8px/12px, uppercase

Platform tag label

Mixin

Variable

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.

Typography

Component checklist

Main typeface

Type color

Styles

Mixins and variables

Soul Design System by Emplifi