< Tokens

Typography

File: typography/complete.json

lineheight

lineheight-body

NameCSS VariableValue
font-lineheight-body-small--mds-font-lineheight-body-small16px
font-lineheight-body-midsize--mds-font-lineheight-body-midsize20px
font-lineheight-body-large--mds-font-lineheight-body-large24px

lineheight-heading

NameCSS VariableValue
font-lineheight-heading-small--mds-font-lineheight-heading-small28px
font-lineheight-heading-midsize--mds-font-lineheight-heading-midsize32px
font-lineheight-heading-large--mds-font-lineheight-heading-large40px
font-lineheight-heading-xlarge--mds-font-lineheight-heading-xlarge52px

lineheight-headline

NameCSS VariableValue
font-lineheight-headline-small--mds-font-lineheight-headline-small64px

lineheight

NameCSS VariableValue
font-lineheight-base--mds-font-lineheight-base16px

family

family

NameCSS VariableValue
font-family-primary--mds-font-family-primaryMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif

weight

weight

NameCSS VariableValue
font-weight-light--mds-font-weight-light300
font-weight-regular--mds-font-weight-regular400
font-weight-medium--mds-font-weight-medium500
font-weight-bold--mds-font-weight-bold700

size

size-body

NameCSS VariableValue
font-size-body-small--mds-font-size-body-small12px
font-size-body-midsize--mds-font-size-body-midsize14px
font-size-body-large--mds-font-size-body-large16px

size-heading

NameCSS VariableValue
font-size-heading-small--mds-font-size-heading-small20px
font-size-heading-midsize--mds-font-size-heading-midsize24px
font-size-heading-large--mds-font-size-heading-large32px
font-size-heading-xlarge--mds-font-size-heading-xlarge40px

size-headline

NameCSS VariableValue
font-size-headline-small--mds-font-size-headline-small52px

size

NameCSS VariableValue
font-size-base--mds-font-size-base16px

text-transform

text-transform

NameCSS VariableValue
font-text-transform-none--mds-font-text-transform-nonenone
font-text-transform-uppercase--mds-font-text-transform-uppercaseuppercase
font-text-transform-lowercase--mds-font-text-transform-lowercaselowercase
font-text-transform-titlecase--mds-font-text-transform-titlecasetitlecase

decoration

decoration

NameCSS VariableValue
font-decoration-underline--mds-font-decoration-underlineunderline
font-decoration-none--mds-font-decoration-nonenone

apps

apps-body-small-regular

NameCSS VariableValue
font-apps-body-small-regular-fontFamily--mds-font-apps-body-small-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-small-regular-fontWeight--mds-font-apps-body-small-regular-font-weight400
font-apps-body-small-regular-lineHeight--mds-font-apps-body-small-regular-line-height16px
font-apps-body-small-regular-fontSize--mds-font-apps-body-small-regular-font-size12px
font-apps-body-small-regular-textCase--mds-font-apps-body-small-regular-text-casenone
font-apps-body-small-regular-textDecoration--mds-font-apps-body-small-regular-text-decorationnone

apps-body-small-regular-underline

NameCSS VariableValue
font-apps-body-small-regular-underline-fontFamily--mds-font-apps-body-small-regular-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-small-regular-underline-fontWeight--mds-font-apps-body-small-regular-underline-font-weight400
font-apps-body-small-regular-underline-lineHeight--mds-font-apps-body-small-regular-underline-line-height16px
font-apps-body-small-regular-underline-fontSize--mds-font-apps-body-small-regular-underline-font-size12px
font-apps-body-small-regular-underline-textCase--mds-font-apps-body-small-regular-underline-text-casenone
font-apps-body-small-regular-underline-textDecoration--mds-font-apps-body-small-regular-underline-text-decorationunderline

apps-body-small-medium

NameCSS VariableValue
font-apps-body-small-medium-fontFamily--mds-font-apps-body-small-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-small-medium-fontWeight--mds-font-apps-body-small-medium-font-weight500
font-apps-body-small-medium-lineHeight--mds-font-apps-body-small-medium-line-height16px
font-apps-body-small-medium-fontSize--mds-font-apps-body-small-medium-font-size12px
font-apps-body-small-medium-textCase--mds-font-apps-body-small-medium-text-casenone
font-apps-body-small-medium-textDecoration--mds-font-apps-body-small-medium-text-decorationnone

apps-body-small-medium-underline

NameCSS VariableValue
font-apps-body-small-medium-underline-fontFamily--mds-font-apps-body-small-medium-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-small-medium-underline-fontWeight--mds-font-apps-body-small-medium-underline-font-weight500
font-apps-body-small-medium-underline-lineHeight--mds-font-apps-body-small-medium-underline-line-height16px
font-apps-body-small-medium-underline-fontSize--mds-font-apps-body-small-medium-underline-font-size12px
font-apps-body-small-medium-underline-textCase--mds-font-apps-body-small-medium-underline-text-casenone
font-apps-body-small-medium-underline-textDecoration--mds-font-apps-body-small-medium-underline-text-decorationunderline

apps-body-small-bold

NameCSS VariableValue
font-apps-body-small-bold-fontFamily--mds-font-apps-body-small-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-small-bold-fontWeight--mds-font-apps-body-small-bold-font-weight700
font-apps-body-small-bold-lineHeight--mds-font-apps-body-small-bold-line-height16px
font-apps-body-small-bold-fontSize--mds-font-apps-body-small-bold-font-size12px
font-apps-body-small-bold-textCase--mds-font-apps-body-small-bold-text-casenone
font-apps-body-small-bold-textDecoration--mds-font-apps-body-small-bold-text-decorationnone

apps-body-midsize-regular

NameCSS VariableValue
font-apps-body-midsize-regular-fontFamily--mds-font-apps-body-midsize-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-midsize-regular-fontWeight--mds-font-apps-body-midsize-regular-font-weight400
font-apps-body-midsize-regular-lineHeight--mds-font-apps-body-midsize-regular-line-height20px
font-apps-body-midsize-regular-fontSize--mds-font-apps-body-midsize-regular-font-size14px
font-apps-body-midsize-regular-textCase--mds-font-apps-body-midsize-regular-text-casenone
font-apps-body-midsize-regular-textDecoration--mds-font-apps-body-midsize-regular-text-decorationnone

apps-body-midsize-regular-underline

NameCSS VariableValue
font-apps-body-midsize-regular-underline-fontFamily--mds-font-apps-body-midsize-regular-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-midsize-regular-underline-fontWeight--mds-font-apps-body-midsize-regular-underline-font-weight400
font-apps-body-midsize-regular-underline-lineHeight--mds-font-apps-body-midsize-regular-underline-line-height20px
font-apps-body-midsize-regular-underline-fontSize--mds-font-apps-body-midsize-regular-underline-font-size14px
font-apps-body-midsize-regular-underline-textCase--mds-font-apps-body-midsize-regular-underline-text-casenone
font-apps-body-midsize-regular-underline-textDecoration--mds-font-apps-body-midsize-regular-underline-text-decorationunderline

apps-body-midsize-medium

NameCSS VariableValue
font-apps-body-midsize-medium-fontFamily--mds-font-apps-body-midsize-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-midsize-medium-fontWeight--mds-font-apps-body-midsize-medium-font-weight500
font-apps-body-midsize-medium-lineHeight--mds-font-apps-body-midsize-medium-line-height20px
font-apps-body-midsize-medium-fontSize--mds-font-apps-body-midsize-medium-font-size14px
font-apps-body-midsize-medium-textCase--mds-font-apps-body-midsize-medium-text-casenone
font-apps-body-midsize-medium-textDecoration--mds-font-apps-body-midsize-medium-text-decorationnone

apps-body-midsize-medium-underline

NameCSS VariableValue
font-apps-body-midsize-medium-underline-fontFamily--mds-font-apps-body-midsize-medium-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-midsize-medium-underline-fontWeight--mds-font-apps-body-midsize-medium-underline-font-weight500
font-apps-body-midsize-medium-underline-lineHeight--mds-font-apps-body-midsize-medium-underline-line-height20px
font-apps-body-midsize-medium-underline-fontSize--mds-font-apps-body-midsize-medium-underline-font-size14px
font-apps-body-midsize-medium-underline-textCase--mds-font-apps-body-midsize-medium-underline-text-casenone
font-apps-body-midsize-medium-underline-textDecoration--mds-font-apps-body-midsize-medium-underline-text-decorationunderline

apps-body-midsize-bold

NameCSS VariableValue
font-apps-body-midsize-bold-fontFamily--mds-font-apps-body-midsize-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-midsize-bold-fontWeight--mds-font-apps-body-midsize-bold-font-weight700
font-apps-body-midsize-bold-lineHeight--mds-font-apps-body-midsize-bold-line-height20px
font-apps-body-midsize-bold-fontSize--mds-font-apps-body-midsize-bold-font-size14px
font-apps-body-midsize-bold-textCase--mds-font-apps-body-midsize-bold-text-casenone
font-apps-body-midsize-bold-textDecoration--mds-font-apps-body-midsize-bold-text-decorationnone

apps-body-large-regular

NameCSS VariableValue
font-apps-body-large-regular-fontFamily--mds-font-apps-body-large-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-large-regular-fontWeight--mds-font-apps-body-large-regular-font-weight400
font-apps-body-large-regular-lineHeight--mds-font-apps-body-large-regular-line-height24px
font-apps-body-large-regular-fontSize--mds-font-apps-body-large-regular-font-size16px
font-apps-body-large-regular-textCase--mds-font-apps-body-large-regular-text-casenone
font-apps-body-large-regular-textDecoration--mds-font-apps-body-large-regular-text-decorationnone

apps-body-large-regular-underline

NameCSS VariableValue
font-apps-body-large-regular-underline-fontFamily--mds-font-apps-body-large-regular-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-large-regular-underline-fontWeight--mds-font-apps-body-large-regular-underline-font-weight400
font-apps-body-large-regular-underline-lineHeight--mds-font-apps-body-large-regular-underline-line-height24px
font-apps-body-large-regular-underline-fontSize--mds-font-apps-body-large-regular-underline-font-size16px
font-apps-body-large-regular-underline-textCase--mds-font-apps-body-large-regular-underline-text-casenone
font-apps-body-large-regular-underline-textDecoration--mds-font-apps-body-large-regular-underline-text-decorationunderline

apps-body-large-medium

NameCSS VariableValue
font-apps-body-large-medium-fontFamily--mds-font-apps-body-large-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-large-medium-fontWeight--mds-font-apps-body-large-medium-font-weight500
font-apps-body-large-medium-lineHeight--mds-font-apps-body-large-medium-line-height24px
font-apps-body-large-medium-fontSize--mds-font-apps-body-large-medium-font-size16px
font-apps-body-large-medium-textCase--mds-font-apps-body-large-medium-text-casenone
font-apps-body-large-medium-textDecoration--mds-font-apps-body-large-medium-text-decorationnone

apps-body-large-medium-underline

NameCSS VariableValue
font-apps-body-large-medium-underline-fontFamily--mds-font-apps-body-large-medium-underline-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-large-medium-underline-fontWeight--mds-font-apps-body-large-medium-underline-font-weight500
font-apps-body-large-medium-underline-lineHeight--mds-font-apps-body-large-medium-underline-line-height24px
font-apps-body-large-medium-underline-fontSize--mds-font-apps-body-large-medium-underline-font-size16px
font-apps-body-large-medium-underline-textCase--mds-font-apps-body-large-medium-underline-text-casenone
font-apps-body-large-medium-underline-textDecoration--mds-font-apps-body-large-medium-underline-text-decorationunderline

apps-body-large-bold

NameCSS VariableValue
font-apps-body-large-bold-fontFamily--mds-font-apps-body-large-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-body-large-bold-fontWeight--mds-font-apps-body-large-bold-font-weight700
font-apps-body-large-bold-lineHeight--mds-font-apps-body-large-bold-line-height24px
font-apps-body-large-bold-fontSize--mds-font-apps-body-large-bold-font-size16px
font-apps-body-large-bold-textCase--mds-font-apps-body-large-bold-text-casenone
font-apps-body-large-bold-textDecoration--mds-font-apps-body-large-bold-text-decorationnone

apps-heading-small-regular

NameCSS VariableValue
font-apps-heading-small-regular-fontFamily--mds-font-apps-heading-small-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-small-regular-fontWeight--mds-font-apps-heading-small-regular-font-weight400
font-apps-heading-small-regular-lineHeight--mds-font-apps-heading-small-regular-line-height28px
font-apps-heading-small-regular-fontSize--mds-font-apps-heading-small-regular-font-size20px
font-apps-heading-small-regular-textCase--mds-font-apps-heading-small-regular-text-casenone
font-apps-heading-small-regular-textDecoration--mds-font-apps-heading-small-regular-text-decorationnone

apps-heading-small-medium

NameCSS VariableValue
font-apps-heading-small-medium-fontFamily--mds-font-apps-heading-small-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-small-medium-fontWeight--mds-font-apps-heading-small-medium-font-weight500
font-apps-heading-small-medium-lineHeight--mds-font-apps-heading-small-medium-line-height28px
font-apps-heading-small-medium-fontSize--mds-font-apps-heading-small-medium-font-size20px
font-apps-heading-small-medium-textCase--mds-font-apps-heading-small-medium-text-casenone
font-apps-heading-small-medium-textDecoration--mds-font-apps-heading-small-medium-text-decorationnone

apps-heading-small-bold

NameCSS VariableValue
font-apps-heading-small-bold-fontFamily--mds-font-apps-heading-small-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-small-bold-fontWeight--mds-font-apps-heading-small-bold-font-weight700
font-apps-heading-small-bold-lineHeight--mds-font-apps-heading-small-bold-line-height28px
font-apps-heading-small-bold-fontSize--mds-font-apps-heading-small-bold-font-size20px
font-apps-heading-small-bold-textCase--mds-font-apps-heading-small-bold-text-casenone
font-apps-heading-small-bold-textDecoration--mds-font-apps-heading-small-bold-text-decorationnone

apps-heading-midsize-regular

NameCSS VariableValue
font-apps-heading-midsize-regular-fontFamily--mds-font-apps-heading-midsize-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-midsize-regular-fontWeight--mds-font-apps-heading-midsize-regular-font-weight400
font-apps-heading-midsize-regular-lineHeight--mds-font-apps-heading-midsize-regular-line-height32px
font-apps-heading-midsize-regular-fontSize--mds-font-apps-heading-midsize-regular-font-size24px
font-apps-heading-midsize-regular-textCase--mds-font-apps-heading-midsize-regular-text-casenone
font-apps-heading-midsize-regular-textDecoration--mds-font-apps-heading-midsize-regular-text-decorationnone

apps-heading-midsize-medium

NameCSS VariableValue
font-apps-heading-midsize-medium-fontFamily--mds-font-apps-heading-midsize-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-midsize-medium-fontWeight--mds-font-apps-heading-midsize-medium-font-weight500
font-apps-heading-midsize-medium-lineHeight--mds-font-apps-heading-midsize-medium-line-height32px
font-apps-heading-midsize-medium-fontSize--mds-font-apps-heading-midsize-medium-font-size24px
font-apps-heading-midsize-medium-textCase--mds-font-apps-heading-midsize-medium-text-casenone
font-apps-heading-midsize-medium-textDecoration--mds-font-apps-heading-midsize-medium-text-decorationnone

apps-heading-midsize-bold

NameCSS VariableValue
font-apps-heading-midsize-bold-fontFamily--mds-font-apps-heading-midsize-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-midsize-bold-fontWeight--mds-font-apps-heading-midsize-bold-font-weight700
font-apps-heading-midsize-bold-lineHeight--mds-font-apps-heading-midsize-bold-line-height32px
font-apps-heading-midsize-bold-fontSize--mds-font-apps-heading-midsize-bold-font-size24px
font-apps-heading-midsize-bold-textCase--mds-font-apps-heading-midsize-bold-text-casenone
font-apps-heading-midsize-bold-textDecoration--mds-font-apps-heading-midsize-bold-text-decorationnone

apps-heading-large-regular

NameCSS VariableValue
font-apps-heading-large-regular-fontFamily--mds-font-apps-heading-large-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-large-regular-fontWeight--mds-font-apps-heading-large-regular-font-weight400
font-apps-heading-large-regular-lineHeight--mds-font-apps-heading-large-regular-line-height40px
font-apps-heading-large-regular-fontSize--mds-font-apps-heading-large-regular-font-size32px
font-apps-heading-large-regular-textCase--mds-font-apps-heading-large-regular-text-casenone
font-apps-heading-large-regular-textDecoration--mds-font-apps-heading-large-regular-text-decorationnone

apps-heading-large-medium

NameCSS VariableValue
font-apps-heading-large-medium-fontFamily--mds-font-apps-heading-large-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-large-medium-fontWeight--mds-font-apps-heading-large-medium-font-weight500
font-apps-heading-large-medium-lineHeight--mds-font-apps-heading-large-medium-line-height40px
font-apps-heading-large-medium-fontSize--mds-font-apps-heading-large-medium-font-size32px
font-apps-heading-large-medium-textCase--mds-font-apps-heading-large-medium-text-casenone
font-apps-heading-large-medium-textDecoration--mds-font-apps-heading-large-medium-text-decorationnone

apps-heading-large-bold

NameCSS VariableValue
font-apps-heading-large-bold-fontFamily--mds-font-apps-heading-large-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-large-bold-fontWeight--mds-font-apps-heading-large-bold-font-weight700
font-apps-heading-large-bold-lineHeight--mds-font-apps-heading-large-bold-line-height40px
font-apps-heading-large-bold-fontSize--mds-font-apps-heading-large-bold-font-size32px
font-apps-heading-large-bold-textCase--mds-font-apps-heading-large-bold-text-casenone
font-apps-heading-large-bold-textDecoration--mds-font-apps-heading-large-bold-text-decorationnone

apps-heading-xlarge-regular

NameCSS VariableValue
font-apps-heading-xlarge-regular-fontFamily--mds-font-apps-heading-xlarge-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-xlarge-regular-fontWeight--mds-font-apps-heading-xlarge-regular-font-weight400
font-apps-heading-xlarge-regular-lineHeight--mds-font-apps-heading-xlarge-regular-line-height52px
font-apps-heading-xlarge-regular-fontSize--mds-font-apps-heading-xlarge-regular-font-size40px
font-apps-heading-xlarge-regular-textCase--mds-font-apps-heading-xlarge-regular-text-casenone
font-apps-heading-xlarge-regular-textDecoration--mds-font-apps-heading-xlarge-regular-text-decorationnone

apps-heading-xlarge-medium

NameCSS VariableValue
font-apps-heading-xlarge-medium-fontFamily--mds-font-apps-heading-xlarge-medium-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-xlarge-medium-fontWeight--mds-font-apps-heading-xlarge-medium-font-weight500
font-apps-heading-xlarge-medium-lineHeight--mds-font-apps-heading-xlarge-medium-line-height52px
font-apps-heading-xlarge-medium-fontSize--mds-font-apps-heading-xlarge-medium-font-size40px
font-apps-heading-xlarge-medium-textCase--mds-font-apps-heading-xlarge-medium-text-casenone
font-apps-heading-xlarge-medium-textDecoration--mds-font-apps-heading-xlarge-medium-text-decorationnone

apps-heading-xlarge-bold

NameCSS VariableValue
font-apps-heading-xlarge-bold-fontFamily--mds-font-apps-heading-xlarge-bold-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-heading-xlarge-bold-fontWeight--mds-font-apps-heading-xlarge-bold-font-weight700
font-apps-heading-xlarge-bold-lineHeight--mds-font-apps-heading-xlarge-bold-line-height52px
font-apps-heading-xlarge-bold-fontSize--mds-font-apps-heading-xlarge-bold-font-size40px
font-apps-heading-xlarge-bold-textCase--mds-font-apps-heading-xlarge-bold-text-casenone
font-apps-heading-xlarge-bold-textDecoration--mds-font-apps-heading-xlarge-bold-text-decorationnone

apps-headline-small-light

NameCSS VariableValue
font-apps-headline-small-light-fontFamily--mds-font-apps-headline-small-light-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-headline-small-light-fontWeight--mds-font-apps-headline-small-light-font-weight300
font-apps-headline-small-light-fontSize--mds-font-apps-headline-small-light-font-size52px
font-apps-headline-small-light-lineHeight--mds-font-apps-headline-small-light-line-height64px
font-apps-headline-small-light-textDecoration--mds-font-apps-headline-small-light-text-decorationnone
font-apps-headline-small-light-textCase--mds-font-apps-headline-small-light-text-casenone

apps-headline-small-regular

NameCSS VariableValue
font-apps-headline-small-regular-fontFamily--mds-font-apps-headline-small-regular-font-familyMomentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif
font-apps-headline-small-regular-fontWeight--mds-font-apps-headline-small-regular-font-weight400
font-apps-headline-small-regular-fontSize--mds-font-apps-headline-small-regular-font-size52px
font-apps-headline-small-regular-lineHeight--mds-font-apps-headline-small-regular-line-height64px
font-apps-headline-small-regular-textDecoration--mds-font-apps-headline-small-regular-text-decorationnone
font-apps-headline-small-regular-textCase--mds-font-apps-headline-small-regular-text-casenone