Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[OUDS] Tokens: Typography #2645

Open
1 task
julien-deramond opened this issue Jul 24, 2024 · 0 comments
Open
1 task

[OUDS] Tokens: Typography #2645

julien-deramond opened this issue Jul 24, 2024 · 0 comments
Labels
feature on hold
Milestone
OUDS

Comments

@julien-deramond
Copy link
Member

julien-deramond commented Jul 24, 2024 •
edited
Loading

⚠️ On hold until #2597

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 Web, but also what we're using for OUDS Web: Boosted, Bootstrap 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 Web.
    • These tokens cannot be used by developers using OUDS Web.
  • Semantic applications: Depends on raw primitive values.
    • Mapping between these tokens and the raw primitive values will be customizable by libraries inheriting OUDS Web.
    • These tokens can be used by developers using OUDS Web.
  • Component applications: Depends on semantic applications.:
    • Mapping between these tokens and the semantic tokens should rarely be customized by libraries inheriting OUDS Web.
    • These tokens can be used by developers using OUDS Web.

Tokens: Typography

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

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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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}
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
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}
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}
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}
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}
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}

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: 2x/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

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 sizes) (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 sizes) (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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature on hold
Projects
[OUDS] Project
Status: Triage
Milestone
OUDS
Development

No branches or pull requests
1 participant
@julien-deramond