Hierarchy

Element/Class

Properties

Usage

Heading 1

h1

Balboa Light, 30px

Product title (once on a page)Illustration headline

Heading 2

h2

Balboa Light, 24px

Modal titlePage section titleFamily form label

Heading 3

h3

Balboa Light, 18px

TabsBreadcrumbs

Heading 4

h4

Balboa Light, 16px

Subtitle under profile

Heading 5

h5

Balboa Light, 14px

Buttons with illustrations

Body Text - LargeBody Text - Large

body-text body-text--lg body-text--boldbody-text body-text--lg body-text--regular

Proxima Nova Bold and Regular, 20px

Large button titleForm labelLarge modal text

Body Text - MediumBody Text - MediumBody Text - Medium

body-text body-text--md body-text--boldbody-text body-text--md body-text--semiboldbody-text body-text--md body-text--regular

Proxima Nova Bold, Semibold, Regular, 16px

Card title

Body Text - SmallBody Text - SmallBody Text - SmallBody Text - Small

body-text body-text--sm body-text--boldbody-text body-text--sm body-text--semiboldbody-text body-text--sm body-text--mediumbody-text body-text--sm body-text--regular

Proxima Nova Bold, Semibold, Medium, Regular, 14px

Default body textCard subtitles

Body Text - X-SmallBody Text - X-SmallBody Text - X-SmallBody Text - X-SmallBody Text - X-Small

body-text body-text--xs body-text--boldbody-text body-text--xs body-text--semiboldbody-text body-text--xs body-text--mediumbody-text body-text--xs body-text--regularbody-text body-text--xs body-text--italic

Proxima Nova Regular, 10px

Small button textLinks are in Sapphire blue

Body Text - XX-SmallBody Text - XX-SmallBody Text - XX-SmallBody Text - XX-SmallBody Text - XX-Small

body-text body-text--xs body-text--boldbody-text body-text--xs body-text--semiboldbody-text body-text--xs body-text--mediumbody-text body-text--xs body-text--regularbody-text body-text--xs body-text--italic

Proxima Nova Bold, Semibold, Medium, Regular 14px

Small tags

Stat Text 1

stat-text stat-text--xl

Balboa Light, 48px

Reporting numbers

Stat Text 2

stat-text stat-text--lg

Balboa Light, 32px

Reporting numbers

Stat Text 3

stat-text stat-text--md

Balboa Light, 24px

Reporting numbers

Stat Text 4

stat-text stat-text--sm

Balboa Light, 22px

Conversion rates on dashboards