Type sets

Published: Last updated:

Type sets are predefined collections of font sizes, weights, and styles used across headers, body text, labels, buttons, and other UI elements. They ensure consistency, improve readability, and help establish clear visual hierarchies throughout the product.

Heading styles

Display

Display-sized heading text is used sparingly for standout moments, like page titles or hero content, where maximum impact is needed.

Display 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-10 56px / 3.5rem Medium – 500 64px / 4rem -0.25px

Display 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-09 40px / 2.5rem Medium – 500 48px / 3rem 0px

Display 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-08 36px / 2.25rem Medium – 500 44px / 2.75rem 0px

Headline

Headline text is used for key section headings, helping to structure and organise content clearly.

Headline 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-07 32px / 2rem Semibold – 600 40px / 2.5rem 0px

Headline 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-06 28px / 1.75rem Semibold – 600 36px / 2.25rem 0px

Headline 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-05 24px / 1.5rem Semibold – 600 32px / 2rem 0px

Title

Title text is ideal for card headings or highlighting smaller, self-contained sections of content.

Title 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-05 24px / 1.5rem Medium – 500 32px / 2rem 0px

Title 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-04 20px / 1.25rem Medium – 500 24px / 1.5rem 0px

Title 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Medium – 500 24px / 1.5rem 0.16px

Title 00 To be paired with Body 00

Type scale
Size
Weight
Line height
Letter spacing
typescale-02 14px / 0.875rem Medium – 500 20px / 1.25rem 0.25px

Body

Body text is used for longer passages of content and general copy. It prioritises readability and supports the overall content structure.

Body 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Light – 300 24px / 1.5rem 0.16px

Body 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-02 14px / 0.875rem Light – 300 20px / 1.25rem 0.25px

Body 00 To be paired with Title 00

Type scale
Size
Weight
Line height
Letter spacing
typescale-01 12px / 0.75rem Light – 300 16px / 1rem 0.25px

Support

Support text is used for small, subtle messaging such as assistive and helper text in forms elements, tooltips, and error messages.

Support 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-01 12px / 0.75rem Regular – 400 16px / 1rem 0.25px

Action

Action text is used for interactive elements like calls to action, button labels, and tags.

Action 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Regular – 400 24px / 1.5rem 0.16px

Action 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-02 14px / 0.875rem Regular – 400 20px / 1.25rem 0.25px

Form

Form input text styles are for user inputs across forms.

Input text 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Regular – 400 28px / 1.75rem 0.16px

Input text 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Regular – 400 24px / 1.5rem 0.16px

Placeholder 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Light – 300 28px / 1.75rem 0.16px

Placeholder 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Light – 300 24px / 1.5rem 0.16px

Label

Label text is used for form fields and interface labels.

Label 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-04 20px / 1.25rem Medium – 500 28px / 1.75rem 0.16px

Label 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Medium – 500 24px / 1.5rem 0.25px

Label 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-02 14px / 0.875rem Medium – 500 20px / 1.25rem 0.25px

Key-value

The key-value style is used to display paired information clearly, with distinct styling for labels (keys) and their corresponding data (values).

Key 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Light – 300 24px / 1.5rem 0.16px

Key 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-02 14px / 0.875rem Light – 300 20px / 1.25rem 0.16px

Key 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-01 12px / 0.75rem Light – 300 16px / 1rem 0.25px

Value 04

Type scale
Size
Weight
Line height
Letter spacing
typescale-10 56px / 3.5rem Medium – 500 64px / 4rem -0.25px

Value 03

Type scale
Size
Weight
Line height
Letter spacing
typescale-07 32px / 2rem Medium – 500 40px / 2.5rem 0px

Value 02

Type scale
Size
Weight
Line height
Letter spacing
typescale-05 24px / 1.5rem Medium – 500 32px / 2rem 0px

Value 01

Type scale
Size
Weight
Line height
Letter spacing
typescale-03 16px / 1rem Medium – 500 24px / 1.5rem 0.16px