Productive type is reserved for use in web-based product design, where the user needs to focus on tasks. The Productive styles are curated to create a series of clear user expectations about hierarchy.
The Productive styles below introduce the new IBM Design Language tokens. The difference between the Productive and Expressive styles is mainly evident in the Headings. Aside from the token names, which are specifically calibrated for product vs. editorial designers (e.g. $label-01 vs. $caption-01) — the Supporting and Body styles have the same values in both the Productive and Expressive sets.
Even though IBM Plex contains a wide range of scales, it’s important to use curated sets below for their specified purpose. For consistent, reliable performance across various screen sizes, do not use fluid type in components or in product UI.
This is for inline code snippets and smaller code elements.
This is for large code snippets and larger code elements.
This is for field labels in components and error messages.
This is for explanatory helper text that appears below a field title within a component.
This is for short paragraphs with no more than four lines and is commonly used in components.
This is commonly used in both the expressive and the productive type theme layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-form reading. Use this for longer body copy in components such as accordion or structured list. Always left-align this type; never center it.
This is for short paragraphs with no more than four lines and is commonly used in the expressive type theme for layouts.
This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.
This is for component and layout headings.
This is for component and layout headings.
This is for component and layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.
This is for layout headings.