Foundations · typography · 18 role bundles
Typography
IBM Plex Sans for everything; IBM Plex Mono for code. Carbon's productive + expressive scales, role-bundled. Components consume role names (heading-04, body-compact-01, code-02) — never raw font sizes.
Role bundles
| Role | Sample | Size | Weight |
|---|---|---|---|
--display-01 | Display 01 | 2.625rem (42 px)/1.199 | 300 |
--heading-07 | Heading 07 | 3.375rem (54 px)/1.19 | 300 |
--heading-06 | Heading 06 | 2.625rem (42 px)/1.199 | 300 |
--heading-05 | Heading 05 | 2rem (32 px)/1.25 | 400 |
--heading-04 | Heading 04 | 1.75rem (28 px)/1.286 | 400 |
--heading-03 | Heading 03 | 1.25rem (20 px)/1.4 | 400 |
--heading-02 | Heading 02 | 1rem (16 px)/1.5 | 600 |
--heading-01 | Heading 01 | 0.875rem (14 px)/1.429 | 600 |
--body-02 | Body 02 — generous line-height for reading prose. | 1rem (16 px)/1.5 | 400 |
--body-01 | Body 01 — default body copy in dense UI. | 0.875rem (14 px)/1.429 | 400 |
--body-compact-02 | Body compact 02 — tight line-height. | 1rem (16 px)/1.375 | 400 |
--body-compact-01 | Body compact 01 — dense data UI default. | 0.875rem (14 px)/1.286 | 400 |
--label-02 | Label 02 — form labels, larger. | 0.875rem (14 px)/1.125 | 400 |
--label-01 | Label 01 — form labels. | 0.75rem (12 px)/1 | 400 |
--helper-text-02 | Helper text 02 — form helper, larger. | 0.875rem (14 px)/1.125 | 400 |
--helper-text-01 | Helper text 01 — form helper. | 0.75rem (12 px)/1 | 400 |
--code-02 | code-02 — IBM Plex Mono | 0.875rem (14 px)/1.25 | 400 |
--code-01 | code-01 — IBM Plex Mono | 0.75rem (12 px)/1 | 400 |