Best Practices
All typography tokens are identified in Shoreline by the prefix $text and use the Inter font.
The semantic tokens are intended for usage in specific scenarios and have a suffix that describes its purpose. Some tokens with similar usage also include a number that represents different hierarchal levels in a container, from most important to least important. For example $text-display-1 and $text-display-2.
The primitive tokens ($font-weight, $font-size, $font-height, and $letter-spacing) serve as the basis to compose the semantic tokens and their usage is restricted to code. The line heights are all multiples of 4, so that type is consistent with spacing values, creating a more balanced visual in the Admin.
The Figma library only includes the semantic typography tokens, and their usage is described below.
Display
These tokens represent titles (page, section, subsections) or highlight the most relevant numbers in a dashboard. Use them sparingly to maintain a clear hierarchy, high information density (display texts require more space around them) and avoid a visually-heavy interface.
| Token | Usage |
|---|---|
$text-display-1 | Page title and important numerals in a dashboard. Pair with other Display tokens or with $text-body. |
$text-display-2 | Large container's title such as in a Modal. Pair with $text-display-3, $text-display-4 or with $text-body. |
$text-display-3 | Small container's title such as in a Form section and in a Card. Pair with $text-display-4 or with $text-body. |
$text-display-4 | Nested container's title such as a nested Card and a nested section. Pair with $text-body. |
Body
| Token | Usage |
|---|---|
$text-body | Used in almost all non-interactive or descriptive content (paragraphs, descriptions, field values, labels). Pair with a Display token, $text-emphasis, or $text-caption. |
Action
| Token | Usage |
|---|---|
$text-action | Used in the most relevant actions, such as Buttons, and in cells that identify rows that are clickable in a Table. Pair with $text-body. |
Emphasis
| Token | Usage |
|---|---|
$text-emphasis | Token with a heavier weight than $text-body. Use sparingly in content that is non-interactive or descriptive (Alert message, column name in a Table) or in actions that are less relevant than Buttons (Filters and Menu items). Pair with $text-body. |
Caption
These tokens are used in content that is non-interactive, short and less important in a page (otherwise use $text-body). Use them sparingly so they don't harm readability. They can be paired with $text-body.
| Token | Usage |
|---|---|
$text-caption-1 | Short text over a colored background, such as Tag and Tooltip |
$text-caption-2 | Contextual information such as Help text and Error text in a form field |