Design

Each family covers responsive needs across 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 and 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 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.

Body 1
Body 2
Body 3
Body 4
Body 5
Body 6
Body 7
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 a font family, font size, font weight, line height and 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 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 and 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.

Size guidelines

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.

Tokens

These tokens define the typography primitives the text styles above are composed from. In code, reach for the typography classes rather than the tokens directly — the classes already bundle the right combination per breakpoint.

Font family

--tng-font-font-family-kinto

Toyota Type

Lorem Ipsum

--tng-font-font-family-lexus

Nobel

Lorem Ipsum

--tng-font-font-family-lexus-decorative

LexusDecorativeType

Lorem Ipsum

--tng-font-font-family-toyota

Toyota Type

Lorem Ipsum

--tng-font-font-family-kinto

Toyota Type

Lorem Ipsum

--tng-font-font-family-lexus

Nobel

Lorem Ipsum

--tng-font-font-family-lexus-decorative

LexusDecorativeType

Lorem Ipsum

--tng-font-font-family-toyota

Toyota Type

Lorem Ipsum

--tng-font-font-family-kinto

Toyota Type

Lorem Ipsum

--tng-font-font-family-lexus

Nobel

Lorem Ipsum

--tng-font-font-family-lexus-decorative

LexusDecorativeType

Lorem Ipsum

--tng-font-font-family-toyota

Toyota Type

Lorem Ipsum

Font weight

--tng-font-font-weight-bold

700

Lorem Ipsum

--tng-font-font-weight-bold-italic

700

Lorem Ipsum

--tng-font-font-weight-italic

500

Lorem Ipsum

--tng-font-font-weight-light

200

Lorem Ipsum

--tng-font-font-weight-light-italic

200

Lorem Ipsum

--tng-font-font-weight-medium

500

Lorem Ipsum

--tng-font-font-weight-regular

400

Lorem Ipsum

--tng-font-font-weight-regular-italic

400

Lorem Ipsum

--tng-font-font-weight-semibold

600

Lorem Ipsum

--tng-font-font-weight-semibold-italic

600

Lorem Ipsum

--tng-font-font-weight-bold

700

Lorem Ipsum

--tng-font-font-weight-bold-italic

700

Lorem Ipsum

--tng-font-font-weight-italic

500

Lorem Ipsum

--tng-font-font-weight-light

200

Lorem Ipsum

--tng-font-font-weight-light-italic

200

Lorem Ipsum

--tng-font-font-weight-medium

500

Lorem Ipsum

--tng-font-font-weight-regular

400

Lorem Ipsum

--tng-font-font-weight-regular-italic

400

Lorem Ipsum

--tng-font-font-weight-semibold

600

Lorem Ipsum

--tng-font-font-weight-semibold-italic

600

Lorem Ipsum

--tng-font-font-weight-bold

700

Lorem Ipsum

--tng-font-font-weight-bold-italic

700

Lorem Ipsum

--tng-font-font-weight-italic

500

Lorem Ipsum

--tng-font-font-weight-light

200

Lorem Ipsum

--tng-font-font-weight-light-italic

200

Lorem Ipsum

--tng-font-font-weight-medium

500

Lorem Ipsum

--tng-font-font-weight-regular

400

Lorem Ipsum

--tng-font-font-weight-regular-italic

400

Lorem Ipsum

--tng-font-font-weight-semibold

600

Lorem Ipsum

--tng-font-font-weight-semibold-italic

600

Lorem Ipsum

Letter spacing

--tng-font-letter-spacing-none

0px

Lorem Ipsum

--tng-font-letter-spacing-tight

-1px

Lorem Ipsum

--tng-font-letter-spacing-wide

1px

Lorem Ipsum

--tng-font-letter-spacing-wider

1.6px

Lorem Ipsum

--tng-font-letter-spacing-widest

2px

Lorem Ipsum

--tng-font-letter-spacing-none

0px

Lorem Ipsum

--tng-font-letter-spacing-tight

-1px

Lorem Ipsum

--tng-font-letter-spacing-wide

1px

Lorem Ipsum

--tng-font-letter-spacing-wider

1.6px

Lorem Ipsum

--tng-font-letter-spacing-widest

2px

Lorem Ipsum

--tng-font-letter-spacing-none

0px

Lorem Ipsum

--tng-font-letter-spacing-tight

-1px

Lorem Ipsum

--tng-font-letter-spacing-wide

1px

Lorem Ipsum

--tng-font-letter-spacing-wider

1.6px

Lorem Ipsum

--tng-font-letter-spacing-widest

2px

Lorem Ipsum

Line height

--tng-font-line-height-12

12px

Lorem Ipsum

--tng-font-line-height-14

14px

Lorem Ipsum

--tng-font-line-height-16

16px

Lorem Ipsum

--tng-font-line-height-18

18px

Lorem Ipsum

--tng-font-line-height-20

20px

Lorem Ipsum

--tng-font-line-height-22

22px

Lorem Ipsum

--tng-font-line-height-24

24px

Lorem Ipsum

--tng-font-line-height-26

26px

Lorem Ipsum

--tng-font-line-height-28

28px

Lorem Ipsum

--tng-font-line-height-30

30px

Lorem Ipsum

--tng-font-line-height-32

32px

Lorem Ipsum

--tng-font-line-height-34

34px

Lorem Ipsum

--tng-font-line-height-36

36px

Lorem Ipsum

--tng-font-line-height-38

38px

Lorem Ipsum

--tng-font-line-height-40

40px

Lorem Ipsum

--tng-font-line-height-42

42px

Lorem Ipsum

--tng-font-line-height-44

44px

Lorem Ipsum

--tng-font-line-height-46

46px

Lorem Ipsum

--tng-font-line-height-48

48px

Lorem Ipsum

--tng-font-line-height-56

56px

Lorem Ipsum

--tng-font-line-height-64

64px

Lorem Ipsum

--tng-font-line-height-70

70px

Lorem Ipsum

--tng-font-line-height-72

72px

Lorem Ipsum

--tng-font-line-height-80

80px

Lorem Ipsum

--tng-font-line-height-88

88px

Lorem Ipsum

--tng-font-line-height-96

96px

Lorem Ipsum

--tng-font-line-height-102

102px

Lorem Ipsum

--tng-font-line-height-104

104px

Lorem Ipsum

--tng-font-line-height-106

106px

Lorem Ipsum

--tng-font-line-height-116

116px

Lorem Ipsum

--tng-font-line-height-128

128px

Lorem Ipsum

--tng-font-line-height-136

136px

Lorem Ipsum

--tng-font-line-height-140

140px

Lorem Ipsum

--tng-font-line-height-160

160px

Lorem Ipsum

--tng-font-line-height-172

172px

Lorem Ipsum

--tng-font-line-height-174

174px

Lorem Ipsum

--tng-font-line-height-190

190px

Lorem Ipsum

--tng-font-line-height-211

211px

Lorem Ipsum

--tng-font-line-height-256

256px

Lorem Ipsum

--tng-font-line-height-276

276px

Lorem Ipsum

--tng-font-line-height-12

12px

Lorem Ipsum

--tng-font-line-height-14

14px

Lorem Ipsum

--tng-font-line-height-16

16px

Lorem Ipsum

--tng-font-line-height-18

18px

Lorem Ipsum

--tng-font-line-height-20

20px

Lorem Ipsum

--tng-font-line-height-22

22px

Lorem Ipsum

--tng-font-line-height-24

24px

Lorem Ipsum

--tng-font-line-height-26

26px

Lorem Ipsum

--tng-font-line-height-28

28px

Lorem Ipsum

--tng-font-line-height-30

30px

Lorem Ipsum

--tng-font-line-height-32

32px

Lorem Ipsum

--tng-font-line-height-34

34px

Lorem Ipsum

--tng-font-line-height-36

36px

Lorem Ipsum

--tng-font-line-height-38

38px

Lorem Ipsum

--tng-font-line-height-40

40px

Lorem Ipsum

--tng-font-line-height-42

42px

Lorem Ipsum

--tng-font-line-height-44

44px

Lorem Ipsum

--tng-font-line-height-46

46px

Lorem Ipsum

--tng-font-line-height-48

48px

Lorem Ipsum

--tng-font-line-height-56

56px

Lorem Ipsum

--tng-font-line-height-64

64px

Lorem Ipsum

--tng-font-line-height-70

70px

Lorem Ipsum

--tng-font-line-height-72

72px

Lorem Ipsum

--tng-font-line-height-80

80px

Lorem Ipsum

--tng-font-line-height-88

88px

Lorem Ipsum

--tng-font-line-height-96

96px

Lorem Ipsum

--tng-font-line-height-102

102px

Lorem Ipsum

--tng-font-line-height-104

104px

Lorem Ipsum

--tng-font-line-height-106

106px

Lorem Ipsum

--tng-font-line-height-116

116px

Lorem Ipsum

--tng-font-line-height-128

128px

Lorem Ipsum

--tng-font-line-height-136

136px

Lorem Ipsum

--tng-font-line-height-140

140px

Lorem Ipsum

--tng-font-line-height-160

160px

Lorem Ipsum

--tng-font-line-height-172

172px

Lorem Ipsum

--tng-font-line-height-174

174px

Lorem Ipsum

--tng-font-line-height-190

190px

Lorem Ipsum

--tng-font-line-height-211

211px

Lorem Ipsum

--tng-font-line-height-256

256px

Lorem Ipsum

--tng-font-line-height-276

276px

Lorem Ipsum

--tng-font-line-height-12

12px

Lorem Ipsum

--tng-font-line-height-14

14px

Lorem Ipsum

--tng-font-line-height-16

16px

Lorem Ipsum

--tng-font-line-height-18

18px

Lorem Ipsum

--tng-font-line-height-20

20px

Lorem Ipsum

--tng-font-line-height-22

22px

Lorem Ipsum

--tng-font-line-height-24

24px

Lorem Ipsum

--tng-font-line-height-26

26px

Lorem Ipsum

--tng-font-line-height-28

28px

Lorem Ipsum

--tng-font-line-height-30

30px

Lorem Ipsum

--tng-font-line-height-32

32px

Lorem Ipsum

--tng-font-line-height-34

34px

Lorem Ipsum

--tng-font-line-height-36

36px

Lorem Ipsum

--tng-font-line-height-38

38px

Lorem Ipsum

--tng-font-line-height-40

40px

Lorem Ipsum

--tng-font-line-height-42

42px

Lorem Ipsum

--tng-font-line-height-44

44px

Lorem Ipsum

--tng-font-line-height-46

46px

Lorem Ipsum

--tng-font-line-height-48

48px

Lorem Ipsum

--tng-font-line-height-56

56px

Lorem Ipsum

--tng-font-line-height-64

64px

Lorem Ipsum

--tng-font-line-height-70

70px

Lorem Ipsum

--tng-font-line-height-72

72px

Lorem Ipsum

--tng-font-line-height-80

80px

Lorem Ipsum

--tng-font-line-height-88

88px

Lorem Ipsum

--tng-font-line-height-96

96px

Lorem Ipsum

--tng-font-line-height-102

102px

Lorem Ipsum

--tng-font-line-height-104

104px

Lorem Ipsum

--tng-font-line-height-106

106px

Lorem Ipsum

--tng-font-line-height-116

116px

Lorem Ipsum

--tng-font-line-height-128

128px

Lorem Ipsum

--tng-font-line-height-136

136px

Lorem Ipsum

--tng-font-line-height-140

140px

Lorem Ipsum

--tng-font-line-height-160

160px

Lorem Ipsum

--tng-font-line-height-172

172px

Lorem Ipsum

--tng-font-line-height-174

174px

Lorem Ipsum

--tng-font-line-height-190

190px

Lorem Ipsum

--tng-font-line-height-211

211px

Lorem Ipsum

--tng-font-line-height-256

256px

Lorem Ipsum

--tng-font-line-height-276

276px

Lorem Ipsum

Design

Available styles

Title styles

Body styles

Using typography

Why styles instead of individual tokens?

Follow hierarchical intent

Respect responsive scaling

Use emphasis strategically

Size guidelines

Title sizes

Body sizes

Tokens

Font family

Font size

Font weight

Letter spacing

Line height