Design system inspiration series: IBM Carbon

🌱 seed (?)

Typography design tokens

Source: https://github.com/carbon-design-system/carbon/tree/main/packages/type/ 😻

  • Typography is a package (@carbon/type), which is then imported as dependency—and exported—by other packages in the DS monorepo (eg. elements)
  • Design tokens are in JS and SCSS formats, defined separately
  • What parts are specified?
    • fontFamily — sans: "'IBM Plex Sans', sans-serif", etc
    • fontWeight — light: 300, etc
    • scale — array of integer sizes, [12, 14, 16, 18, ...]
    • styles — legal01, bodyCompact01, body01, etc
    • tokens — exporting the style names/aliases (legal01 etc)

Links to this note

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.

  • Est ex deserunt esse ut pariatur quis fugiat id velit commodo

    Ut anim fugiat laboris et eiusmod aliquip.