Usage

We use sans serif fonts for most of our type in-product, the exception being when you want to display code then you should defer to monospace fonts.

Font-stacks

Google Fonts
DM Serif DisplayInterIBM Plex Mono

// Sans-Serif Font Stack
font-family: "Inter",sans-serif;

// Serif Font Stack
font-family: "DM Serif Display",serif;

// Mono Font Stack
font-family: "IBM Plex Mono",monospace;
          

Font System

Out font system is custom curated and picked by our best designers. The system consist of two types font scales; Which areHeadings and Body

Headings

Font Family —"Inter", sans-serif
Display
Size80pxWeight800Line90pxSpace-2px
Heading
Size64pxWeight800Line78pxSpace-2px
Heading
Size48pxWeight700Line60pxSpace-1.5px
Heading
Size28pxWeight700Line40pxSpace-0.5px
Heading
Size20pxWeight600Line28pxSpace-0.5px
Sub Heading
Size12pxWeight600Line12pxSpace5%

Body

Font Family —"Inter", sans-serif"IBM Plex Mono", monospace
Base
Size16pxWeight400Line28pxSpacedefault
Text Extra-Small
Size10pxWeight500Line14pxSpacedefault
Text Small
Size12pxWeight500Line16pxSpacedefault
Text Medium
Size18pxWeight400Line28pxSpacedefault
Text Large
Size24pxWeight400Line36pxSpacedefault
Quote
Size20pxWeight600Line28pxSpacedefault
Code
Size14pxWeight500Line20pxSpace-0.6px
Link
Size16pxWeightdefaultLine24pxSpacedefault

Colors

Colors usage of fonts throughout the application.
baseN-800#101231
headingN-900#090B28
subN-400#6B7199
linkN-800#101231
linkHoverB-500#0635F9