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.

--tng-typography-title-desktop-1-font-size

256px

Lorem Ipsum

--tng-typography-title-desktop-2-font-size

160px

Lorem Ipsum

--tng-typography-title-desktop-3-font-size

80px

Lorem Ipsum

--tng-typography-title-desktop-4-font-size

56px

Lorem Ipsum

--tng-typography-title-desktop-5-font-size

44px

Lorem Ipsum

--tng-typography-title-desktop-6-font-size

34px

Lorem Ipsum

--tng-typography-title-desktop-7-font-size

28px

Lorem Ipsum

--tng-typography-title-desktop-8-font-size

20px

Lorem Ipsum

--tng-typography-title-desktop-9-font-size

18px

Lorem Ipsum

--tng-typography-title-desktop-10-font-size

16px

Lorem Ipsum

--tng-typography-title-mobile-1-font-size

128px

Lorem Ipsum

--tng-typography-title-mobile-2-font-size

96px

Lorem Ipsum

--tng-typography-title-mobile-3-font-size

40px

Lorem Ipsum

--tng-typography-title-mobile-4-font-size

38px

Lorem Ipsum

--tng-typography-title-mobile-5-font-size

36px

Lorem Ipsum

--tng-typography-title-mobile-6-font-size

28px

Lorem Ipsum

--tng-typography-title-mobile-7-font-size

24px

Lorem Ipsum

--tng-typography-title-mobile-8-font-size

20px

Lorem Ipsum

--tng-typography-title-mobile-9-font-size

18px

Lorem Ipsum

--tng-typography-title-mobile-10-font-size

16px

Lorem Ipsum

--tng-typography-title-tablet-1-font-size

256px

Lorem Ipsum

--tng-typography-title-tablet-2-font-size

96px

Lorem Ipsum

--tng-typography-title-tablet-3-font-size

64px

Lorem Ipsum

--tng-typography-title-tablet-4-font-size

48px

Lorem Ipsum

--tng-typography-title-tablet-5-font-size

36px

Lorem Ipsum

--tng-typography-title-tablet-6-font-size

34px

Lorem Ipsum

--tng-typography-title-tablet-7-font-size

24px

Lorem Ipsum

--tng-typography-title-tablet-8-font-size

20px

Lorem Ipsum

--tng-typography-title-tablet-9-font-size

18px

Lorem Ipsum

--tng-typography-title-tablet-10-font-size

16px

Lorem Ipsum

--tng-typography-title-desktop-1-font-size

176px

Lorem Ipsum

--tng-typography-title-desktop-2-font-size

128px

Lorem Ipsum

--tng-typography-title-desktop-3-font-size

64px

Lorem Ipsum

--tng-typography-title-desktop-4-font-size

56px

Lorem Ipsum

--tng-typography-title-desktop-5-font-size

40px

Lorem Ipsum

--tng-typography-title-desktop-6-font-size

34px

Lorem Ipsum

--tng-typography-title-desktop-7-font-size

28px

Lorem Ipsum

--tng-typography-title-desktop-8-font-size

20px

Lorem Ipsum

--tng-typography-title-desktop-9-font-size

18px

Lorem Ipsum

--tng-typography-title-desktop-10-font-size

16px

Lorem Ipsum

--tng-typography-title-mobile-1-font-size

96px

Lorem Ipsum

--tng-typography-title-mobile-2-font-size

64px

Lorem Ipsum

--tng-typography-title-mobile-3-font-size

40px

Lorem Ipsum

--tng-typography-title-mobile-4-font-size

38px

Lorem Ipsum

--tng-typography-title-mobile-5-font-size

32px

Lorem Ipsum

--tng-typography-title-mobile-6-font-size

28px

Lorem Ipsum

--tng-typography-title-mobile-7-font-size

24px

Lorem Ipsum

--tng-typography-title-mobile-8-font-size

20px

Lorem Ipsum

--tng-typography-title-mobile-9-font-size

18px

Lorem Ipsum

--tng-typography-title-mobile-10-font-size

16px

Lorem Ipsum

--tng-typography-title-tablet-1-font-size

176px

Lorem Ipsum

--tng-typography-title-tablet-2-font-size

128px

Lorem Ipsum

--tng-typography-title-tablet-3-font-size

64px

Lorem Ipsum

--tng-typography-title-tablet-4-font-size

48px

Lorem Ipsum

--tng-typography-title-tablet-5-font-size

40px

Lorem Ipsum

--tng-typography-title-tablet-6-font-size

34px

Lorem Ipsum

--tng-typography-title-tablet-7-font-size

24px

Lorem Ipsum

--tng-typography-title-tablet-8-font-size

20px

Lorem Ipsum

--tng-typography-title-tablet-9-font-size

18px

Lorem Ipsum

--tng-typography-title-tablet-10-font-size

16px

Lorem Ipsum

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.

--tng-typography-body-1-font-size

32px

Lorem Ipsum

--tng-typography-body-2-font-size

28px

Lorem Ipsum

--tng-typography-body-3-font-size

24px

Lorem Ipsum

--tng-typography-body-4-font-size

22px

Lorem Ipsum

--tng-typography-body-5-font-size

18px

Lorem Ipsum

--tng-typography-body-6-font-size

16px

Lorem Ipsum

--tng-typography-body-7-font-size

14px

Lorem Ipsum

--tng-typography-body-8-font-size

12px

Lorem Ipsum

--tng-typography-body-1-font-size

34px

Lorem Ipsum

--tng-typography-body-2-font-size

28px

Lorem Ipsum

--tng-typography-body-3-font-size

24px

Lorem Ipsum

--tng-typography-body-4-font-size

20px

Lorem Ipsum

--tng-typography-body-5-font-size

18px

Lorem Ipsum

--tng-typography-body-6-font-size

16px

Lorem Ipsum

--tng-typography-body-7-font-size

14px

Lorem Ipsum

--tng-typography-body-8-font-size

12px

Lorem Ipsum

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.