Typography tokens


Headings
Ag
Roobert PRO 700 23px/32px
Heading 1
Heading 1 is the largest text on the screen, reserved for the Top Navigation Bar, which acts as the page title describing the overall page content.
Code token
heading1
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 700 20px/24px
Heading 2
When introducing an important concept, use a Heading 2.
Code token
heading2
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 700 18px/24px
Heading 3
You can then divide the Heading 2 topic into subsections with Heading 3 level headings, and so on.
Code token
heading3
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 700 16px/24px
Heading 4
You can then divide the Heading 3 topic into subsections with Heading 4 level headings.
Code token
heading4
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 700 14px/20px
Heading 5
You can then divide the Heading 4 topic into subsections with Heading 5 level headings.
Code token
heading5
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 700 13px/16px, upper
Kicker
A Kicker is an introduction to a heading that makes it easier to scan. It’s usually only a word or two, maybe slightly longer. It can also be used as a type of section heading in places where the space is compromised, like tables.
Code token
headingKicker
Token set
Product/App
When to use
-
Purpose
-
Example
-
Body
Ag
Roobert PRO 400 18px/24px
Lead
The lead content summarizes or emphasizes a page's or screen's most significant points.
Code token
lead
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 400 18px/24px, underline
Lead link
[Link style] The lead content summarizes or emphasizes a page's or screen's most significant points.
Code token
leadLink
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 400 16px/24px
Default
The standard body size for content.
Code token
default
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 400 16px/24px, underline
Default link
[Link style] The standard body size for content.
Code token
defaultLink
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 400 14px/20px
Caption
Captions give descriptive details or metadata following a more significant element.
Code token
caption
Token set
Product/App
When to use
-
Purpose
-
Example
-
Ag
Roobert PRO 400 14px/20px, underline
Caption link
[Link style] Captions give descriptive details or metadata following a more significant element.
Code token
captionLink
Token set
Product/App
When to use
-
Purpose
-
Example
-