Design
Component checklist
Review required
React
Review required
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.
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.
- Case alternates
- Slashed zero
- Contextual alternates
- Tabular numbers (only for tables)
- Character variants (cv08)
Mixins and variables
Headline
Ag
Inter 700 46px/60px
Hero
This text style is exclusively and only to be used on teasing pages.
Mixin
headline-hero
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.
Mixin
headline-1
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.
Mixin
headline-2
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.
Mixin
headline-3
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.
Mixin
headline-4
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.
Mixin
-
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.
Mixin
headline-5
Body
Ag
Inter 400 13px/18px
Medium (13px) - Regular
Mixin
paragraph-regular
Variable
-
Ag
Inter 700 13px/18px
Medium (13px) - Bold
Mixin
paragraph-regular
Variable
--font-weight-bold
Ag
Inter 400 11px/16px
Small (11px) - Regular
Mixin
paragraph-small
Variable
-
Ag
Inter 700 11px/16px
Small (11px) - Bold
Mixin
paragraph-small
Variable
--font-weight-bold
Code
Ag
Noto Sans Mono 400 13px/18px
13px (Medium) - Regular
Mixin
code-regular
Variable
-
Ag
Noto Sans Mono 700 13px/18px
13px (Medium) - Bold
Mixin
code-regular
Variable
--font-weight-bold
Ag
Noto Sans Mono 400 11px/16px
11px (Small) - Regular
Mixin
code-regular
Variable
-
Ag
Noto Sans Mono 700 11px/16px
11px (Small) - Bold
Mixin
-
Variable
--font-weight-bold
Supporting
Ag
Inter 600 11px/18px
Field label
Use this style for all labels of inputs and triggers
Mixin
-
Variable
-
Ag
Inter 400 10px/12px
Helper - Regular
Mixin
helper-regular
Variable
-
Ag
Inter 700 10px/12px
Helper - Bold
Mixin
helper-regular
Variable
--font-weight-bold
Ag
Inter 600 13px/18px
Button label
Mixin
-
Variable
-
Ag
Inter 600 11px/18px
Field label
Use this style for all labels of inputs and triggers
Mixin
-
Variable
-
Ag
Inter 700 11px/16px, upper
Hotkey label
This style is reserved for hotkeys only.
Mixin
-
Variable
-
Ag
Inter 700 10px/12px, upper
Badge label
Mixin
-
Variable
-
Ag
Inter 800 8px/12px, upper
Platform tag label
Mixin
-
Variable
-