New
Used for story telling, compelling narratives and engaging users immediately on a page. These are often used for primary marketing messaging.
Reserved for the highest priority that could include large-impact messaging. It is meant to grab users attention, tell a story and entice users to stay on the page and/or keep scrolling.
<h1 class="fluid-display-01">Fluid display 01</h1><h2 class="fluid-display-02">Fluid display 02</h2>Used for headings where high visibility and importance is needed.
NOTE: not use p tag for heading and subheading
<h1 class="fluid-heading-01">Fluid display 01</h1><h2 class="fluid-heading-02">Fluid display 02</h2><h3 class="fluid-heading-03">Fluid display 03</h3><h4 class="fluid-heading-04">Fluid display 04</h4><h5 class="fluid-heading-05">Fluid display 05</h5>Body is typically used for body copy and long-form written copy (3 lines or more). Dek is mainly used within modules and is for short-form written copy (2 lines or less). Italic and bold variants can also be applied to both these styles.
For fixed body copy, it’s recommended for lists or sections that require more consistent sizing in all screen sizes.
<h1 class="fluid-body">Fluid body</h1><h2 class="fluid-dek">Fluid dek</h2>Meant to be highly functional and are often smaller, for smaller spaces or specific context. Productive typography is focused on clarity, accuracy and completing a specific task. These are most common found in body copy, forms and labels and other UI elements.
Usually used under headings, titles of smaller design elements (cards, tables, charts, etc.).
NOTE: not use p tag for heading and subheading
<h1 class="fixed-subheading-01">Fixed subheading 01</h1><h2 class="fixed-subheading-02">Fixed subheading 02</h2><h3 class="fixed-subheading-03">Fixed subheading 03</h3>Fixed body classes are typically used within modules or components that require all screen sizes to adapt to one consistent look.
<p class="fixed-body">Fixed body<b/>medium default</p>
<p class="fixed-body fixed-body--compact">Fixed body<b/>medium compact</p>
<p class="fixed-body fixed-body--small">Fixed body<b/>small</p>Typically used within certain components or sections that require fixed sizes in all screen size experiences. Largest is 16px, smallest is 12px so that it meets AODA standards depending on the usage of the text. Italicized styling can be applied as well to help emphasize anything extra within the copy.
<h1 class="fixed-label-600">Fixed label 600 default</h1>
<h1 class="fixed-label-600"><em>Fixed label 600 default italic</em></h1><h2 class="fixed-label-400">Fixed label 400 default</h2>
<h2 class="fixed-label-400"><em>Fixed label 400 default italic</em></h2><h3 class="fixed-label-600--compact">Fixed label 600 compact</h3>
<h3 class="fixed-label-600--compact"><em>Fixed label 600 compact italic</em></h3><h4 class="fixed-label-400">Fixed label 400 compact</h4>
<h4 class="fixed-label-400"><em>Fixed label 400 compact italic</em></h4><h1 class="fixed-helpertext-600">Fixed helper text 600 default</h1>
<h1 class="fixed-helpertext-600"><em>Fixed helper text 600 default italic</em></h1><h2 class="fixed-helpertext-400">Fixed helper text 400 default</h2>
<h2 class="fixed-helpertext-400"><em>Fixed helper 400 default italic</em></h2><h3 class="fixed-helpertext-600 fixed-helpertext-600--compact">Fixed helper text 600 compact</h3>
<h3 class="fixed-helpertext-600 fixed-helpertext-600--compact"><em>Fixed helper text 600 compact</em></h3><h4 class="fixed-helpertext-400 fixed-helpertext-400--compact">Fixed helper text 400 compact</h4>
<h4 class="fixed-helpertext-400 fixed-helpertext-400--compact"><em>Fixed helper text 400 compact</em></h4><h1 class="fixed-legal-600">Fixed legal 600 default</h1>
<h1 class="fixed-legal-600"><em>Fixed legal 600 default italic</em></h1><h2 class="fixed-legal-400">Fixed legal 400 default</h2>
<h2 class="fixed-legal-400"><em>Fixed legal 400 default italic</em></h2><h3 class="fixed-legal-600 fixed-legal-600--compact">Fixed legal 600 compact</h3>
<h3 class="fixed-legal-600 fixed-legal-600--compact"><em>Fixed legal 600 compact</em></h3><h4 class="fixed-legal-400 fixed-legal-400--compact">Fixed legal 400 compact</h4>
<h4 class="fixed-legal-400 fixed-legal-400--compact"><em>Fixed legal 400 compact</em></h4>Typically used in copy that deals with API documentation.
<h1 class="fixed-code">Fixed code</h1>
<h1 class="fixed-code fixed-code--compact">Fixed code compact</h1>
Overline is typically used to indicate section of the page when required, often placed above or below headline.
<h1 class="fixed-misc-overline">FIXED MISC OVERLINE</h1>
Meant to be used for call-to-action copy that leads users.
CTA is for when the text is enclosed in a button. CTA link is mostly applied on tertiary links but there will be scenarios where label is used as it can be more readable for users in specific module. It is recommended to use Fixed Label Misc CTA when there’s more than a few words in the tertiary CTA..
<h1 class="fixed-misc-cta">FIXED MISC CTA</h1>
<h1 class="fixed-misc-ctalink">FIXED MISC CTA LINK</h1>
<h1 class="fixed-misc-label-cta">Fixed misc label cta</h1>