styles

Typography

To present content clearly and efficiently, we use the Inter font family in our products. Inter is an open source font created to aid in legibility and readability across different devices and screens. Its multitude of weights and styles allow us to pick contrasting weights to establish a clear visual hierarchy in our pages. Inter supports almost all Latin, Greek, and Cyrillic languages.

Download Inter

Title & Heading Styles

Name and Size Weight Use Cases
Heading 01. Page Title, 30px 700 Page titles. Every non-immersive page must have a page title.
Heading 02. Secondary Page Title, 24px 600 Content area page titles. Used above content/section headings.
Heading 03. Tertiary Page Title, 22px 400 Content area section headings in pages.
Heading 04. Card Title, 18px 600 Used for titles in cards, panels, flyouts, modals, and dialogs.
Heading 05. Section Title, 16px 500 May be used for section titles within cards, panels, and flyouts.
Heading 06. EYEBROW TITLE, 14px 300 All caps. Used above a header title in modal, panel, and flyout headers.
Heading 07. TABLE COLUMN HEADER, 12px 700 All caps. Used for column headers in tables and lists.

Body & Link Styles

Name and Size Weight Use Cases
Body 01. Paragraph Text, 14px 400 Default paragraph text style for all body text.
Body 02. Paragraph Emphasis Text, 14px 600 For emphasis and distinction within body text.
Body 03. Timestamp, 14px 400 For timestamps and status messages.
Body 04. Paragraph Callout Text, 16px 400 For important messages that need to stand out using a larger font size.
Link 01. Link Text, 14px 700 For links, inline or otherwise.

Line Length

With our baseline set at 14px text, we set our max line width to be 42ems (588px), or about 90 characters in paragraph text.

Back to Top