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 | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A236 | link ]]
| h2 | Secondary headings | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A240 | link ]]
| h3 | Tertiary (section) headings | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A244 | link ]]
| h4| Quaternary headings. Used to style titles within components (e.g. Dialog) | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A237 | link ]]
| h5| Quinary headings. Used to style titles within components (e.g. Table) | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A241 | link ]]
| h6| Heading with the lowest hierarchical level | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A245 | link ]]
| Body| Paragraph text. Style of dialog content, text area input text. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A238 | link ]]
| Body S| Smaller body size. Popover text. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A238 | link ]]
| UI text | Style of text input of all input variants (except Text area), table cell content. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A247 | link ]]
| UI text - bold| Button (and derivates) text, Dropdown text. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A247 | link ]]
| Label* | Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A239 | link ]]
| Link* | Default style of links. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A243 | link ]]
| Placeholder | Input and all input variants. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A246 | link ]]
| Description| Style of complementary paragraphs. All components that include labels (e.g. inputs, dropdown) might also include an optional description. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A272 | link ]]
| Small text| Smallest UI text. Used to style cells’ subtext in the Table component. | [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=8944%3A273v | 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 [[ 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.