Typography

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

Component checklist

Design

Review required

React

Review required

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.

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

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

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

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

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

Avoid using light-type colors on light backgrounds.

Avoid using light-type colors on light backgrounds.

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

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

For warnings, alerts, negative confirmations, and other negative information use --color-on-layer-danger 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.

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

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

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.


For the main font, we use the following setup to create the best experience in each part of the platform.


 

Mixins and variables

Headline
Ag
Inter 700 46px/60px
Hero
This text style is exclusively and only to be used on teasing pages.
Collection
-
Mixin
headline-hero
Variable
-
Ag
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.
Collection
-
Mixin
headline-1
Variable
-
Ag
Inter 500 20px/30px
Headline 2
Use on top of the content block as a second headline or title of the surface or page.
Collection
-
Mixin
headline-2
Variable
-
Ag
Inter 500 16px/24px
Headline 3
Use on top of the content block as a third headline or title of the surface or page.
Collection
-
Mixin
headline-3
Variable
-
Ag
Inter 700 13px/18px
Headline 4
Use on top of the content block as a fourth headline or title of the surface or page.
Collection
-
Mixin
headline-4
Variable
-
Ag
Inter 700 13px/18px, upper
Headline 4 - Uppercase
Use on top of the content block as a fourth headline or title of the surface or page.
Collection
-
Mixin
-
Variable
-
Ag
Inter 700 10px/12px, upper
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.
Collection
-
Mixin
headline-5
Variable
-
Body
Ag
Inter 400 13px/18px
13px (Medium) - Regular
Collection
-
Mixin
paragraph-regular
Variable
-
Ag
Inter 700 13px/18px
13px (Medium) - Bold
Collection
-
Mixin
paragraph-regular
Variable
--font-weight-bold
Ag
Inter 400 11px/16px
11px (Small) - Regular
Collection
-
Mixin
paragraph-small
Variable
-
Ag
Inter 700 11px/16px
11px (Small) - Bold
Collection
-
Mixin
paragraph-small
Variable
--font-weight-bold
Code
Ag
Noto Sans Mono 400 13px/18px
13px (Medium) - Regular
Collection
-
Mixin
code-regular
Variable
-
Ag
Noto Sans Mono 700 13px/18px
13px (Medium) - Bold
Collection
-
Mixin
code-regular
Variable
--font-weight-bold
Ag
Noto Sans Mono 400 11px/16px
11px (Small) - Regular
Collection
-
Mixin
code-regular
Variable
-
Ag
Noto Sans Mono 700 11px/16px
11px (Small) - Bold
Collection
-
Mixin
-
Variable
--font-weight-bold
Supporting
Ag
Inter 400 10px/12px
Helper - Regular
Collection
-
Mixin
helper-regular
Variable
-
Ag
Inter 700 10px/12px
Helper - Bold
Collection
-
Mixin
helper-regular
Variable
--font-weight-bold
Ag
Inter 600 13px/18px
Button label
Collection
-
Mixin
-
Variable
-
Ag
Inter 700 11px/16px, upper
Hotkey label
This style is reserved for hotkeys only.
Collection
-
Mixin
-
Variable
-
Ag
Inter 700 10px/12px, upper
Badge label
Collection
-
Mixin
-
Variable
-
Ag
Inter 800 8px/12px, upper
Platform tag label
Collection
-
Mixin
-
Variable
-