Typography

Typography in the Design System is structured around two main families of styles:

• Titles: Used for all headings and hierarchical content structure.
• Body: Used for paragraphs, supporting text, descriptions and functional content.

Each family is defined through a set of predefined styles that cover responsive needs across different breakpoints (Desktop, Tablet and Mobile) and specific emphasis variations when needed (e.g. default, emphasis, heavy).

The goal of this setup is to:

• Ensure visual consistency across products and platforms.
• Provide a clear typographic hierarchy for readability and accessibility.
• Enable flexibility across breakpoints without maintaining multiple disconnected systems.
• Make typography token-driven and scalable, allowing efficient updates and brand adaptations.

Available styles

Title Styles

The Title system defines the visual hierarchy of page structure and content sections.

There are 10 title levels, from Title 1 (largest) to Title 10 (smallest).

Every level is available for:

• Desktop
• Tablet
• Mobile

Some levels include:

• Default variants
• Emphasis variants, used when extra prominence or focus is required.

Title styles are intended for:

• Page headings (hero titles, main page headers)
• Section headers
• Content grouping titles
• Featured or promotional headlines
• Card and module titles

The descending scale ensures a clear typographic hierarchy, making layouts readable and scannable across all screen sizes.

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Title 7

Title 8

Title 9

Title 10

Body styles

Body Styles

Body styles are designed for reading content and functional interface text.

• The system includes 8 body sizes (Body 1 to Body 8).
• Each size is available in multiple weight variants:
• Default: Standard reading weight for most use cases
• Emphasis: For highlighting key phrases or important text
• Heavy: For high-contrast or strong visual emphasis

Body styles are used for:

• Paragraphs and long-form content
• Descriptions, subtitles and secondary information
• UI copy such as labels, hints and helper text
• Legal or meta content
• Dense or compact interfaces where smaller text sizes are required

Together, these variants provide flexibility while maintaining consistent typography rules.

1. Body 1
2. Body 2
3. Body 3
4. Body 4
5. Body 5
6. Body 6
7. Body 7
8. Body 8

Using Typography

Typography styles in the Design System are applied through predefined text styles in Figma, rather than selecting individual tokens manually.

Each text style is built by grouping several typography tokens into a single, reusable style definition, typically combining:

• Font family token
• Font size token
• Font weight token
• Line height token
• Letter spacing token

Designers should never apply typography by manually selecting individual tokens. The correct workflow is to select a predefined text style and apply it directly.

Why Use Styles Instead of Individual Tokens?

Using styles instead of individual tokens guarantees:

• Consistency: All screens follow the same typographic rules.
• Efficiency: Designers apply one style instead of managing multiple properties.
• Maintainability: Global updates happen at the token level and flow automatically into all styles.
• Brand scalability: Typography can be adjusted for different brands or themes without redefining styles manually.

Follow hierarchical intent

Use styles according to their semantic role:

• Higher Title levels (Title 1 – Title 3): Page headers, major sections
• Mid Title levels (Title 4 – Title 6): Content group sections, component-level titles
• Lower Title levels (Title 7 – Title 10): Subsections, small UI or card titles

Body styles should be selected depending on content density:

• Larger body sizes: Long-form text, important supporting copy
• Medium body sizes: Standard paragraph text, descriptions and subtitles
• Smaller body sizes: Metadata, labels, secondary or helper text

Respect responsive scaling

Each title style is already adapted for:

• Desktop
• Tablet
• Mobile

Designers must not choose a larger or smaller style manually for mobile or tablet to “fake” scaling. Instead, apply the same semantic style and allow the responsive token definitions to handle size adjustments automatically.

Use emphasis strategically

• Emphasis variants: Highlight keywords inside sentences. Provide subtle hierarchy without introducing new text styles.
• Heavy variants: Draw strong attention to key UI data. Use sparingly to avoid visual overload.

Emphasis should support content hierarchy, not replace proper use of Title and Body levels.

Font Size Guidelines

Based on the existing scale, the following rules apply:

Title sizes

Title levels follow a progressive descending scale. Always move down the hierarchy one level at a time. Avoid skipping more than 2 levels unless a clear structural separation is required.

Example: Title 1 → Title 2 → Title 3. Avoid jumping directly from Title 1 to Title 5 without an intermediate title.

Body sizes

Choose size according to content density and reading comfort. Maintain at least one size step difference between visually adjacent body blocks to ensure legibility and hierarchy.

Accessibility

Minimum Font Sizes

To ensure readability and accessibility, the typography system follows these size rules:

Reading Text

Any text intended for continuous reading or primary content must not be smaller than:

• 14 px on Mobile
• 16 px on Desktop and Tablet

This includes paragraphs, descriptions, main UI instructions, and helper or explanatory text.

In practice, this means:

• Use Body 4 or larger on Desktop & Tablet
• Use Body 5 or larger on Mobile

Microcopy and auxiliary text (12 px)

The system includes smaller sizes (down to 12 px) for specific, limited use cases. 12 px text is allowed only for non-interactive UI elements:

• Captions
• Legal disclaimers
• Image credits
• Metadata
• Supporting labels
• Non-critical secondary information

This text must:

• Not contain essential information required to complete a task
• Never be used for paragraphs or long reading blocks
• Always maintain WCAG contrast compliance
• Be used sparingly to avoid compromising general readability

Small text exists to support dense layouts where visual economy is necessary, but must not replace standard body text for meaningful content.