What are typography tokens
Section titled “What are typography tokens”Typography tokens are the reusable values that define how text is styled across the Persona Design System (PDS). They ensure that type is applied consistently by replacing manual settings with named tokens that can be combined, updated, and scaled as the system evolves.
PDS typography tokens
Section titled “PDS typography tokens”There are two levels of typography tokens: core typography tokens and alias typography tokens.
Core typoraphy tokens
Section titled “Core typoraphy tokens”Core typography tokens define the raw properties of type, including:
- fontFamilies (e.g.,
Primary,Monospace,SemiMonospace) - fontWeights (e.g.,
Regular,Medium,Light) - lineHeights (numeric scale)
- fontSizes (numeric scale)
- textDecoration (
None,Underline)
Alias typography tokens
Section titled “Alias typography tokens”Alias typography tokens combine core tokens to create complete text styles used across the product. For example: typography.DisplayLarge is created utilizing fontFamilies.Primary, fontWeights.Medium, lineHeights.0, fontSizes.9, and textDecoration.none.
Typescale
Section titled “Typescale”PDS has three typescales: display, heading and body, and two styles: sans and mono. These pairings create a versatile system that can address a variety of use cases while maintaining visual harmony.
Display
Section titled “Display”Display styles should be used sparingly. Display styles take precedence over Title styles, both in hierarchy and size, and should only be used if necessary.
Display Large
Display Medium
Display Small
Heading
Section titled “Heading”Heading styles are typically used to establish the primary information hierarchy on a page. They are ideal for section titles, page headings, and other structural text elements.
Heading Large
Heading Medium
Heading Small
Heading Extra Small
Text styles are essential content styles. They can be used for paragraphs, data, labels, or captions.
Text Large Bold
Text Large
Text Large Light
Text Medium
Text Medium Mono
Text Small
Text Small Mono
Text Extra Small
Token breakdown
Section titled “Token breakdown”| Category | Tokens | Indended Use |
|---|---|---|
| Display | Display.Large, Display.Medium, Display.Small | Large, attention-grabbing moments like page titles, hero sections, or dashboards. |
| Heading | Heading.Large, Heading.Medium, Heading.Small, Heading.ExtraSmall | Section titles, page hierarchy, and structural headings. |
| Text | Text.Large, Text.Medium, Text.Small, Text.ExtraSmall | Body content at different sizes depending on context. |
| Text Variants | Text.LargeBold, Text.LargeLight, Text.MediumBold, Text.MediumLight, Text.SmallLink, Text.MediumLink | Used for emphasis, lighter hierarchy, or interactive elements like links. |
| Mono | Text.Mono | Technical or code-related content. |
Using typography tokens
Section titled “Using typography tokens”Core typography tokens are the foundation and should rarely be applied directly. Instead, use alias typography tokens whenever setting type in designs or code. Alias tokens capture the intended role of text (like display, heading, body, or caption) and ensure consistency across components and surfaces. By building from alias tokens, we can adjust type system-wide—such as updating font sizes, weights, or line heights—without needing to manually change each instance. This makes typography scalable, accessible, and aligned across Persona.