Typography

Plus Jakarta Sans is used in 18 different styles on desktop and 15 different styles on mobile. Our fallback is san-serif and our base element size is 1rem = 16 px. Secondary fonts coming soon.

Case

 

Default: Sentence case

This applies to everything from page titles and section titles to buttons and links

Typography-Example-Case-Default1
Typography-Example-Case-Default2

 

Title case = Proper nouns only

Typography-Example-Case-Title

 

Alignment

Left-align text in most circumstances, with the exception of empty states.

Typography-Example-Alignment-Left
Typography-Example-Alignment-Center

 

Text Color

For non-interactive typography, use only blacks and grays, no purples or other colors; this includes page titles and body copy. For interactive typography, use only purple, not grays or any other colors; this includes hyperlinks and tertiary buttons.

Titles + Body copy

Typography-Example-TextColor-TitlesandBody
Typography-Example-TextColor-Hyperlinks

 

Emphasis

TL;DR always use bold

  • Always use bold font weight
  • Always use bold on 2 or more words, never 1
  • Never use italics, underlines
  • Never use color for emphasis. This is for links only.
Do
Typography-DoDont-Emphasis-Do
Typography-DoDont-Emphasis-Dont

 

Hierarchy

Headings

  • Use the larger Display sizes for marketing content only
  • Use H1 as your page title by default
  • Always go in order from H1 to H2 to H3 and so on. Never skip H2 or H3.

Body

  • Always use body 16px as the default text size
  • Avoid body small and caption sizes

Captions & Labels

  • Use sparingly
  • Captions use case: legal copy
  • Labels use case: intro text above a page title

 

Spacing

Use different vertical spacing on desktop and native app.

 

Resources

(internal only)

Jira

Figma