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.
Sans 16
Sans 14
Sans 12
Sans 10
Sans 8
Sans 6
Sans 5t
Sans 5
Sans 4t
Sans 4
Sans 3t
Sans 3
Sans 2
Sans 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Serif 12
Serif 10
Serif 8
Serif 6
Serif 5t
Serif 5
Serif 4t
Serif 4
Serif 3t
Serif 3
Serif 2
Serif 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<Flex justifyContent="space-between" flexDirection="column">
<Box>
<Serif size="12">Serif 12</Serif>
<Serif size="10">Serif 10</Serif>
<Serif size="8">Serif 8</Serif>
<Serif size="6">Serif 6</Serif>
<Serif size="5t">Serif 5t</Serif>
<Serif size="5">Serif 5</Serif>
<Serif size="4t">Serif 4t</Serif>
<Serif size="4">Serif 4</Serif>
<Serif size="3t">Serif 3t</Serif>
<Serif size="3">Serif 3</Serif>
<Serif size="2">Serif 2</Serif>
<Serif size="1">Serif 1</Serif>
</Box>
<Flex py={2}>
<BorderBox>
<Serif size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Serif>
</BorderBox>
</Flex>
</Flex>