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 intent** | **Link to specs**
| h1 | Main heading
| h2 | Secondary headings
| h3 | Tertiary (section) headings
| h4| Quaternary headings. Used to style titles within components (e.g. Dialog)
| h5| Quinary headings. Used to style titles within components (e.g. Table)
| h6| Heading with the lowest hierarchical level
| Body| Paragraph text. Style of dialog content, text area input text.
| Body S| Smaller body size. Popover text.
| UI text | Style of text input of all input variants (except Text area), table cell content
| UI text - bold| Button (and derivates) text, Dropdown text
| Label* | Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu
| Link* | Default style of links
| Placeholder | Input and all input variants
| Description| Style of complementary paragraphs. All components that include labels (e.g. inputs, dropdown) might also include an optional description.
| Small text| Smallest UI text. Used to style cells’ subtext in the Table component
*Already exist as reusable styles (currently, mixins)
**ACs**:
- The need to specify styles for components' text repeatedly is removed (e.g. as it was already done with the Label element). Designers only need to provide the name of the style in the specs
- System implementers can applying styles to text in the application in a simple way that ensures consistency.
Note: Inspired by [[ https://docs.google.com/document/d/1bS34ARSi51zIORmMRp06VS9HYmi98SyHcqV8ecOQHrs/edit?ts=5f2bfa8b#bookmark=id.u44zf7iw0hja | recent conversations ]] and as seen in [[ https://designsystem.digital.gov/design-tokens/typesetting/overview/ | other design systems ]], it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style component text.