Tokens: Typography

⚠️ On hold until https://github.com/Orange-OpenSource/ouds-flutter/issues/25 is resolved

Description

The aim of this issue is to study and implement the typography tokens taking into account the cohesive multi-platform approach, the customization by libraries inheriting OUDS Flutter, but also what we're using for OUDS Flutter: Flutter, Material 3, etc.

Define the possibilities
Define the constraints
Define the impacts
Implement the tokens (with a future Style Dictionary usage in mind)

Reminder: there will be in the end 3 layers of tokens:

Raw primitive values: Insertion of brand foundations.
- These tokens will be customizable by libraries inheriting OUDS Flutter.
- These tokens cannot be used by developers using OUDS Flutter.
Semantic applications: Depends on raw primitive values.
- Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Flutter.
- These tokens can be used by developers using OUDS Flutter.
Component applications: Depends on semantic applications.:
- Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Flutter.
- These tokens can be used by developers using OUDS Flutter.

Raw primitive values

Font

Family

Token name	Token value
font-family-brand-default	Helvetica Neue
font-family-brand-tv	Helvetica Neue LT
font-family-system-arial	Arial
font-family-system-helvetica	Helvetica
font-family-system-noto-sans	Noto sans
font-family-system-sf-pro-text	SF Pro Text
font-family-system-roboto	Roboto
font-family-monospace-menlo	Menlo
font-family-monospace-monaco	Monaco
font-family-monospace-courier-new	Courier New

Weight

Token name	Token value
font-weight-100	thin, hairline
font-weight-200	extra-light, ultra-light
font-weight-300	light
font-weight-400	normal, regular, book
font-weight-500	medium
font-weight-600	semi-bold, demi-bold
font-weight-700	bold
font-weight-800	extra-bold, ultra-bold
font-weight-900	black, heavy
font-weight-950	extra-black, ultra-black

Size

Token name	Token value
font-size-150	12px / XXXrem
font-size-175	13px / XXXrem
font-size-200	14px / XXXrem
font-size-250	16px / XXXrem
font-size-300	18px / XXXrem
font-size-350	20px / XXXrem
font-size-450	24px / XXXrem
font-size-550	28px / XXXrem
font-size-650	32px / XXXrem
font-size-750	36px / XXXrem
font-size-850	40px / XXXrem
font-size-950	44px / XXXrem
font-size-1050	48px / XXXrem
font-size-1150	52px / XXXrem
font-size-1250	56px / XXXrem
font-size-1450	64px / XXXrem
font-size-1850	72px / XXXrem

Line-height

Token name	Token value
font-line-height-250	16px / 1rem
font-line-height-350	20px / XXXrem
font-line-height-450	24px / XXXrem
font-line-height-550	28px / XXXrem
font-line-height-650	32px / XXXrem
font-line-height-750	36px / XXXrem
font-line-height-850	40px / XXXrem
font-line-height-950	44px / XXXrem
font-line-height-1050	48px / XXXrem
font-line-height-1150	52px / XXXrem
font-line-height-1250	56px / XXXrem
font-line-height-1350	60px / XXXrem
font-line-height-1450	64px / XXXrem
font-line-height-1850	72px / XXXrem
font-line-height-2050	80px / XXXrem

Letter spacing (%)

[!CAUTION] Figma doesn't accept % values

Token name	Token value
font-letter-spacing-n600	-1.5%
font-letter-spacing-n500	-1.25%
font-letter-spacing-n400	-1%
font-letter-spacing-n300	-0.75%
font-letter-spacing-n200	-0.5%
font-letter-spacing-n100	-0.25%
font-letter-spacing-0	0%
font-letter-spacing-100	0.25%
font-letter-spacing-200	0.5%
font-letter-spacing-300	0.75%
font-letter-spacing-400	1%
font-letter-spacing-500	1.25%
font-letter-spacing-600	1.5%

Letter spacing (px)

Token name	Token value
font-letter-spacing-150	{font-size-150}*{font-letter-spacing-600}=0.18px / XXXrem
font-letter-spacing-175	{font-size-175}*{font-letter-spacing-600}=0.195px / XXXrem
font-letter-spacing-200	{font-size-200}*{font-letter-spacing-500}=0.175px / XXXrem
font-letter-spacing-250	{font-size-250}*{font-letter-spacing-500}=0.2px / XXXrem
font-letter-spacing-300	{font-size-300}*{font-letter-spacing-400}=0.18px / xxxrem
font-letter-spacing-350	{font-size-350}*{font-letter-spacing-0}=0px / 0rem
font-letter-spacing-450	{font-size-450}*{font-letter-spacing-n200}=-0.12px / XXXrem
font-letter-spacing-550	{font-size-550}*{font-letter-spacing-n400}=-0.28px / XXXrem
font-letter-spacing-650	{font-size-650}*{font-letter-spacing-n400}=-0.32px / XXXrem
font-letter-spacing-750	{font-size-750}*{font-letter-spacing-n400}=-0.36px / XXXrem
font-letter-spacing-850	{font-size-850}*{font-letter-spacing-n400}=-0.4px / XXXrem
font-letter-spacing-950	{font-size-950}*{font-letter-spacing-n500}=-0.55px / XXXrem
font-letter-spacing-1050	{font-size-1050}*{font-letter-spacing-n500}=-0.6px / XXXrem
font-letter-spacing-1150	{font-size-1150}*{font-letter-spacing-n500}=0.65px / XXXrem
font-letter-spacing-1250	{font-size-1250}*{font-letter-spacing-n500}=-0.7px / XXXrem
font-letter-spacing-1450	{font-size-1450}*{font-letter-spacing-n600}=-0.96px / XXXrem
font-letter-spacing-1850	{font-size-1850}*{font-letter-spacing-n600}=-1.08px / XXXrem

Paragraph spacing

Token name	Token value
font-paragraph-spacing-100	0px / 0rem
font-paragraph-spacing-200	8px / 0.5rem
font-paragraph-spacing-300	16px / 1rem
font-paragraph-spacing-400	24px / 1.5rem

Typography (Composite)

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value
type-regular-150	font-family:{$font-family}, font-size:{$font-size-150}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-175	font-family:{$font-family}, font-size:{$font-size-175}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-175}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-200	font-family:{$font-family}, font-size:{$font-size-200}, font-line-height:{$font-line-height-value-350}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-200}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-regular-250	font-family:{$font-family}, font-size:{$font-size-250}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-400}, font-letter-spacing:{$font-letter-spacing-250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-150	font-family:{$font-family}, font-size:{$font-size-150}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-175	font-family:{$font-family}, font-size:{$font-size-175}, font-line-height:{$font-line-height-value-250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-175}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-200	font-family:{$font-family}, font-size:{$font-size-200}, font-line-height:{$font-line-height-value-350}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-200}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-250	font-family:{$font-family}, font-size:{$font-size-250}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-300	font-family:{$font-family}, font-size:{$font-size-300}, font-line-height:{$font-line-height-value-450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-300}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-350	font-family:{$font-family}, font-size:{$font-size-350}, font-line-height:{$font-line-height-value-550}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-350}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-450	font-family:{$font-family}, font-size:{$font-size-450}, font-line-height:{$font-line-height-value-650}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-450}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-550	font-family:{$font-family}, font-size:{$font-size-550}, font-line-height:{$font-line-height-value-750}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-550}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-650	font-family:{$font-family}, font-size:{$font-size-650}, font-line-height:{$font-line-height-value-850}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-650}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-750	font-family:{$font-family}, font-size:{$font-size-750}, font-line-height:{$font-line-height-value-950}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-750}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-850	font-family:{$font-family}, font-size:{$font-size-850}, font-line-height:{$font-line-height-value-1050}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-850}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-950	font-family:{$font-family}, font-size:{$font-size-950}, font-line-height:{$font-line-height-value-1150}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-950, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1050	font-family:{$font-family}, font-size:{$font-size-1050}, font-line-height:{$font-line-height-value-1250}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1050}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1150	font-family:{$font-family}, font-size:{$font-size-1150}, font-line-height:{$font-line-height-value-1350}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1150}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1250	font-family:{$font-family}, font-size:{$font-size-1250}, font-line-height:{$font-line-height-value-1450}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1250}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1450	font-family:{$font-family}, font-size:{$font-size-1450}, font-line-height:{$font-line-height-value-1850}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1450}, font-paragraph-spacing:{$font-paragraph-spacing-100}
type-bold-1850	font-family:{$font-family}, font-size:{$font-size-1850}, font-line-height:{$font-line-height-value-2050}, font-weight:{$font-weight-700}, font-letter-spacing:{$font-letter-spacing-1850}, font-paragraph-spacing:{$font-paragraph-spacing-100}

Semantic applications

Font

Family

Token name	Token value
font-family-web	font-family-brand
font-family-ios	font-family-brand
font-family-android	font-family-brand
font-family-tv	font-family-brand-tv
font-family-web-display	font-family-web
font-family-web-heading	font-family-web
font-family-web-body	font-family-web
font-family-web-label	font-family-web
font-family-web-code	font-family-monospace-menlo
font-family-ios-display	font-family-ios
font-family-ios-heading	font-family-ios
font-family-ios-body	font-family-ios
font-family-ios-label	font-family-ios
font-family-ios-code	font-family-monospace-menlo
font-family-android-display	font-family-android
font-family-android-heading	font-family-android
font-family-android-body	font-family-android
font-family-android-label	font-family-android
font-family-android-code	font-family-monospace-menlo
font-family-tv-display	font-family-tv
font-family-tv-heading	font-family-tv
font-family-tv-body	font-family-tv
font-family-tv-label	font-family-tv
font-family-tv-code	font-family-monospace-menlo

Weight

Token name	Token value
font-weight-web-default	font-weight-400
font-weight-web-strong	font-weight-700
font-weight-ios-default	font-weight-400
font-weight-ios-strong	font-weight-700
font-weight-android-default	font-weight-400
font-weight-android-strong	font-weight-700
font-weight-tv-default	font-weight-400
font-weight-tv-strong	font-weight-700
font-weight-web-display	font-weight-web-strong
font-weight-web-heading	font-weight-web-strong
font-weight-web-body-default	font-weight-web-default
font-weight-web-body-strong	font-weight-web-strong
font-weight-web-label-default	font-weight-web-default
font-weight-web-label-strong	font-weight-web-strong
font-weight-web-code	font-weight-400
font-weight-ios-display	font-weight-ios-strong
font-weight-ios-heading	font-weight-ios-strong
font-weight-ios-body-default	font-weight-ios-default
font-weight-ios-body-strong	font-weight-ios-strong
font-weight-ios-label-default	font-weight-ios-default
font-weight-ios-label-strong	font-weight-ios-strong
font-weight-ios-code	font-weight-400
font-weight-android-display	font-weight-android-strong
font-weight-android-heading	font-weight-android-strong
font-weight-android-body-default	font-weight-android-default
font-weight-android-body-strong	font-weight-android-strong
font-weight-android-label-default	font-weight-android-default
font-weight-android-label-strong	font-weight-android-strong
font-weight-android-code	font-weight-400
font-weight-tv-display	font-weight-tv-strong
font-weight-tv-heading	font-weight-tv-strong
font-weight-tv-body-default	font-weight-tv-default
font-weight-tv-body-strong	font-weight-tv-strong
font-weight-tv-label-default	font-weight-tv-default
font-weight-tv-label-strong	font-weight-tv-strong
font-weight-tv-code	font-weight-400

Size

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
font-size-mobile-display-large	font-size-850
font-size-mobile-display-medium	font-size-750
font-size-mobile-display-small	font-size-650
font-size-mobile-heading-xLarge	font-size-550
font-size-mobile-heading-large	font-size-450
font-size-mobile-heading-medium	font-size-350
font-size-mobile-heading-small	font-size-300
font-size-mobile-body-large	font-size-250
font-size-mobile-body-medium	font-size-200
font-size-mobile-body-small	font-size-150
font-size-tablet-display-large		font-size-1450
font-size-tablet-display-medium		font-size-1050
font-size-tablet-display-small		font-size-850
font-size-tablet-heading-xLarge		font-size-750
font-size-tablet-heading-large		font-size-550
font-size-tablet-heading-medium		font-size-450
font-size-tablet-heading-small		font-size-350
font-size-tablet-body-large		font-size-250
font-size-tablet-body-medium		font-size-200
font-size-tablet-body-small		font-size-150
font-size-desktop-display-large			font-size-1850
font-size-desktop-display-medium			font-size-1250
font-size-desktop-display-small			font-size-1050
font-size-desktop-heading-xLarge			font-size-850
font-size-desktop-heading-large			font-size-650
font-size-desktop-heading-medium			font-size-550
font-size-desktop-heading-small			font-size-450
font-size-desktop-body-large			font-size-300
font-size-desktop-body-medium			font-size-250
font-size-desktop-body-small			font-size-200

Token name	Token value
font-size-label-xLarge	font-size-300
font-size-label-large	font-size-250
font-size-label-medium	font-size-200
font-size-label-small	font-size-150
font-size-code-medium	font-size-200
font-size-code-small	font-size-150

Line-height

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
font-line-height-mobile-display-large	font-line-height-1050
font-line-height-mobile-display-medium	font-line-height-950
font-line-height-mobile-display-small	font-line-height-850
font-line-height-mobile-heading-xLarge	font-line-height-750
font-line-height-mobile-heading-large	font-line-height-650
font-line-height-mobile-heading-medium	font-line-height-550
font-line-height-mobile-heading-small	font-line-height-450
font-line-height-mobile-body-large	font-line-height-450
font-line-height-mobile-body-medium	font-line-height-350
font-line-height-mobile-body-small	font-line-height-250
font-line-height-tablet-display-large		font-line-height-1850
font-line-height-tablet-display-medium		font-line-height-1250
font-line-height-tablet-display-small		font-line-height-1050
font-line-height-tablet-heading-xLarge		font-line-height-950
font-line-height-tablet-heading-large		font-line-height-750
font-line-height-tablet-heading-medium		font-line-height-650
font-line-height-tablet-heading-small		font-line-height-550
font-line-height-tablet-body-large		font-line-height-450
font-line-height-tablet-body-medium		font-line-height-350
font-line-height-tablet-body-small		font-line-height-250
font-line-height-desktop-display-large			font-line-height-2050
font-line-height-desktop-display-medium			font-line-height-1450
font-line-height-desktop-display-small			font-line-height-1250
font-line-height-desktop-heading-xLarge			font-line-height-1050
font-line-height-desktop-heading-large			font-line-height-850
font-line-height-desktop-heading-medium			font-line-height-750
font-line-height-desktop-heading-small			font-line-height-650
font-line-height-desktop-body-large			font-line-height-450
font-line-height-desktop-body-medium			font-line-height-450
font-line-height-desktop-body-small			font-line-height-350

Token name	Token value
font-line-height-label-xLarge	font-line-height-450
font-line-height-label-large	font-line-height-450
font-line-height-label-medium	font-line-height-350
font-line-height-label-small	font-line-height-250
font-line-height-code-medium	font-line-height-350
font-line-height-code-small	font-line-height-250

Letter-spacing

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
font-letter-spacing-mobile-display-large	font-letter-spacing-850
font-letter-spacing-mobile-display-medium	font-letter-spacing-750
font-letter-spacing-mobile-display-small	font-letter-spacing-650
font-letter-spacing-mobile-heading-xLarge	font-letter-spacing-550
font-letter-spacing-mobile-heading-large	font-letter-spacing-450
font-letter-spacing-mobile-heading-medium	font-letter-spacing-350
font-letter-spacing-mobile-heading-small	font-letter-spacing-300
font-letter-spacing-mobile-body-large	font-letter-spacing-250
font-letter-spacing-mobile-body-medium	font-letter-spacing-200
font-letter-spacing-mobile-body-small	font-letter-spacing-150
font-letter-spacing-tablet-display-large		font-letter-spacing-1450
font-letter-spacing-tablet-display-medium		font-letter-spacing-1050
font-letter-spacing-tablet-display-small		font-letter-spacing-850
font-letter-spacing-tablet-heading-xLarge		font-letter-spacing-750
font-letter-spacing-tablet-heading-large		font-letter-spacing-550
font-letter-spacing-tablet-heading-medium		font-letter-spacing-450
font-letter-spacing-tablet-heading-small		font-letter-spacing-350
font-letter-spacing-tablet-body-large		font-letter-spacing-250
font-letter-spacing-tablet-body-medium		font-letter-spacing-200
font-letter-spacing-tablet-body-small		font-letter-spacing-150
font-letter-spacing-desktop-display-large			font-letter-spacing-1850
font-letter-spacing-desktop-display-medium			font-letter-spacing-1250
font-letter-spacing-desktop-display-small			font-letter-spacing-1050
font-letter-spacing-desktop-heading-xLarge			font-letter-spacing-850
font-letter-spacing-desktop-heading-large			font-letter-spacing-650
font-letter-spacing-desktop-heading-medium			font-letter-spacing-550
font-letter-spacing-desktop-heading-small			font-letter-spacing-450
font-letter-spacing-desktop-body-large			font-letter-spacing-300
font-letter-spacing-desktop-body-medium			font-letter-spacing-250
font-letter-spacing-desktop-body-small			font-letter-spacing-200

Token name	Token value
font-letter-spacing-label-xLarge	font-letter-spacing-300
font-letter-spacing-label-large	font-letter-spacing-250
font-letter-spacing-label-medium	font-letter-spacing-200
font-letter-spacing-label-small	font-letter-spacing-150
font-letter-spacing-code-medium	font-letter-spacing-200
font-letter-spacing-code-small	font-letter-spacing-150

Paragraph-spacing

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
font-paragraph-spacing-mobile-display-large	font-paragraph-spacing-100
font-paragraph-spacing-mobile-display-medium	font-paragraph-spacing-100
font-paragraph-spacing-mobile-display-small	font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-xLarge	font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-large	font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-medium	font-paragraph-spacing-100
font-paragraph-spacing-mobile-heading-small	font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-large	font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-medium	font-paragraph-spacing-100
font-paragraph-spacing-mobile-body-small	font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-large		font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-medium		font-paragraph-spacing-100
font-paragraph-spacing-tablet-display-small		font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-xLarge		font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-large		font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-medium		font-paragraph-spacing-100
font-paragraph-spacing-tablet-heading-small		font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-large		font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-medium		font-paragraph-spacing-100
font-paragraph-spacing-tablet-body-small		font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-large			font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-medium			font-paragraph-spacing-100
font-paragraph-spacing-desktop-display-small			font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-xLarge			font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-large			font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-medium			font-paragraph-spacing-100
font-paragraph-spacing-desktop-heading-small			font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-large			font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-medium			font-paragraph-spacing-100
font-paragraph-spacing-desktop-body-small			font-paragraph-spacing-100

Token name	Token value
font-paragraph-spacing-label-xLarge	font-paragraph-spacing-100
font-paragraph-spacing-label-large	font-paragraph-spacing-100
font-paragraph-spacing-label-medium	font-paragraph-spacing-100
font-paragraph-spacing-label-small	font-paragraph-spacing-100
font-paragraph-spacing-code-medium	font-paragraph-spacing-100
font-paragraph-spacing-code-small	font-paragraph-spacing-100

Typography (Composite)

Display

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
type-display-large	type-bold-850	type-bold-1450	type-bold-1850
type-display-medium	type-bold-750	type-bold-1050	type-bold-1250
type-display-small	type-bold-650	type-bold-850	type-bold-1050

Heading

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
type-heading-xLarge	type-bold-550	type-bold-750	type-bold-850
type-heading-large	type-bold-450	type-bold-550	type-bold-650
type-heading-medium	type-bold-350	type-bold-450	type-bold-550
type-heading-small	type-bold-300	type-bold-350	type-bold-450

Body

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value (col: 2xs/xs/sm) (extra-compact/compact)	Token value (col: md/lg) (regular/medium)	Token value (col: xl/2xl/3xl)
type-body-default-large	type-regular-250	type-regular-250	type-regular-300
type-body-default-medium	type-regular-200	type-regular-200	type-regular-250
type-body-default-small	type-regular-150	type-regular-150	type-regular-200
type-body-strong-large	type-regular-250	type-regular-250	type-regular-300
type-body-strong-medium	type-regular-200	type-regular-200	type-regular-250
type-body-strong-small	type-regular-150	type-regular-150	type-regular-200

Label

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value (all viewport size) (all class sizes)
type-label-default-xLarge	type-regular-300
type-label-default-large	type-regular-250
type-label-default-medium	type-regular-200
type-label-default-small	type-regular-150
type-label-strong-xLarge	type-regular-300
type-label-strong-large	type-regular-250
type-label-strong-medium	type-regular-200
type-label-strong-small	type-regular-150

Code

[!CAUTION] Figma doesn't accept composite tokens

Token name	Token value (all viewport size) (all class sizes)
type-code-medium	type-regular-200
type-code-small	type-regular- 150

Study

[ ] Study the architecture of these tokens, and define the technical details

Technical details

TODO

Orange-OpenSource / ouds-flutter

Tokens: Typography #31

Description

Tokens: Typography

Raw primitive values

Font

Family

Weight

Size

Line-height

Letter spacing (%)

Letter spacing (px)

Paragraph spacing

Typography (Composite)

Semantic applications

Font

Family

Weight

Size

Line-height

Letter-spacing

Paragraph-spacing

Typography (Composite)

Display

Heading

Body

Label

Code

Study

Technical details