Currently, several individual typography tokens have to be specified and used each time a text style needs to be applied to a component (e.g. placeholder) or to a piece of copy in an application's interface (e.g. h3). There's no way to store and reuse the system's typographic styles (i.e. that combination of tokens) in a way that would eliminate the need to specify the same style repeatedly, reduce time and ensure consistency.
Map of typographic styles & component text styles:
| Style | Consuming components and/or style intent | Link to specs |
| h1 | Main heading | link |
| h2 | Secondary headings | link |
| h3 | Tertiary (section) headings | link |
| h4 | Quaternary headings. Used to style titles within components (e.g. Dialog) | link |
| h5 | Quinary headings. Used to style titles within components (e.g. Table) | link |
| h6 | Heading with the lowest hierarchical level | link |
| Body | Paragraph text. Style of dialog content, text area input text. | link |
| Body S | Smaller body size. Popover text. | link |
| Label* | Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu. | link |
| Link* | Default style of links. | link |
| Placeholder | Input and all input variants. | link |
| Description | Style of complementary paragraphs. All components that include labels (e.g. inputs, dropdown) might also include an optional description. | link |
*Already exist as reusable styles (currently, mixins)
ACs:
- The system provides implementers with pre-made typographic styles that can be easily applied to text in components or in application pages.
Note: Inspired by recent conversations and as seen in other design systems, it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style text.