styles

Typography

Type gives content its hierarchy, so people can scan a page and find what matters.

Font sizes and line heights are separate tokens (--ds-font-size-*, --ds-line-height-*), always used together by tw-text-*.

Font family

  • Aa Casa 123
    sans"Poppins", Arial, Helvetica, sans-serif
    --ds-font-family-sanstw-font-sans
  • Aa Casa 123
    monoui-monospace, SFMono-Regular, Menlo, monospace
    --ds-font-family-monotw-font-mono

Font sizes

  • Aa Casa
    1010px
    --ds-font-size-10tw-text-10
  • Aa Casa
    1212px
    --ds-font-size-12tw-text-12
  • Aa Casa
    1414px
    --ds-font-size-14tw-text-14
  • Aa Casa
    1616px
    --ds-font-size-16tw-text-16
  • Aa Casa
    1818px
    --ds-font-size-18tw-text-18
  • Aa Casa
    2020px
    --ds-font-size-20tw-text-20
  • Aa Casa
    2222px
    --ds-font-size-22tw-text-22
  • Aa Casa
    2424px
    --ds-font-size-24tw-text-24
  • Aa Casa
    2626px
    --ds-font-size-26tw-text-26
  • Aa Casa
    3030px
    --ds-font-size-30tw-text-30

Line heights

  • pairs with tw-text-10
    1014px
    --ds-line-height-10
  • pairs with tw-text-12
    1216px
    --ds-line-height-12
  • pairs with tw-text-14
    1418px
    --ds-line-height-14
  • pairs with tw-text-16
    1620px
    --ds-line-height-16
  • pairs with tw-text-18
    1822px
    --ds-line-height-18
  • pairs with tw-text-20
    2026px
    --ds-line-height-20
  • pairs with tw-text-22
    2228px
    --ds-line-height-22
  • pairs with tw-text-24
    2430px
    --ds-line-height-24
  • pairs with tw-text-26
    2632px
    --ds-line-height-26
  • pairs with tw-text-30
    3036px
    --ds-line-height-30

Font weights

  • Aa Casa
    regular400
    --ds-font-weight-regulartw-font-regular
  • Aa Casa
    medium500
    --ds-font-weight-mediumtw-font-medium
  • Aa Casa
    semibold600
    --ds-font-weight-semiboldtw-font-semibold