This system is meant to act as an additional layer over our existing type tokens, creating a further degree of specificity around how typographic styles should be contextually applied. The goal is for this system to increase overall design consistency for our product as well as to increase efficiency for both the design and engineering teams.
A single variant is shorthand for a set of typography-specific tokens. The text-treatments vary slightly depending on screen size.
Variant | Large (> 767) | Small (< 767) | Example |
---|---|---|---|
largeTitle | fontSize: size9 lineHeight: title letterSpacing: tight fontWeight: normal | fontSize: size8 lineHeight: title letterSpacing: tight fontWeight: normal | All their equipment and instruments are alive |
title | fontSize: size7 lineHeight: title letterSpacing: tight fontWeight: normal | fontSize: size6 lineHeight: title letterSpacing: tight fontWeight: normal | All their equipment and instruments are alive |
subtitle | fontSize: size6 lineHeight: title fontWeight: normal | fontSize: size5 lineHeight: title fontWeight: normal | All their equipment and instruments are alive |
text | fontSize: size3 lineHeight: body fontWeight: normal | fontSize: size4 lineHeight: body fontWeight: normal | All their equipment and instruments are alive |
mediumText | fontSize: size3 lineHeight: body fontWeight: bold | fontSize: size4 lineHeight: body fontWeight: bold | All their equipment and instruments are alive |
caption | fontSize: size2 lineHeight: body fontWeight: normal | fontSize: size3 lineHeight: body fontWeight: normal | All their equipment and instruments are alive |
small | fontSize: size1 lineHeight: body fontWeight: normal | fontSize: size2 lineHeight: body fontWeight: normal | All their equipment and instruments are alive |
Text extends Box and supports the same set of styled-system props.