Typography

Please note that if a value is provided once, that value should be carried through the rest of the breakpoints (i.e. line-height). Use the desktop styles as your reference when building out the other styles.

Fonts

  • Aa Zz

    Gilroy

Headings

Main Title (h1), Gilroy

font-size: 40px; line-height: 1.25; font-weight: 700;

Main Heading (h2), Gilroy

font-size: 32px; line-height: 1.25; font-weight: 700;

Sub Heading (h3), Gilroy

font-size: 32px; line-height: 1.25; font-weight: 600;

Sub-heading (h4), Gilroy

font-size: 21px; line-height: 1.5; font-weight: 600;
Sub-heading (h5), Gilroy
font-size: 18px; line-height: 1.25; font-weight: 600;
Sub-heading (h6), Gilroy
font-size: 16px; line-height: 1.25; font-weight: 600;
LABEL, Gilroy
font-size: 12px; line-height: 1.25; font-weight: 700; text-transform: uppercase;

Paragraph text, Gilroy, 16px. This is paragraph text which should be used for the majority of all text content on the page. Inline links, which look like this, may be added to paragraph text using the link icon.

font-size: 16px;

Normal paragraphy text, HK Grotesk, 16px. It should be used for an introductory sentence or short paragraph. There should never be more than one paragraph of intro text.

font-size: 14px;

Small paragraph text, HK Grotesk, 14px. This is small-paragraph text which should be used for content that is second in heirarchy, like the Helpful links sidebar.

font-size: 12px;

Buttons

Button Primary

Login Login

Button Secondary

View Profile

Tab

Dropdown Sorting

Dropdown Filter

Text Button

Profile Cards

Text Fields