Typography
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
reveal less
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.
<Flex mt={4} justifyContent="space-between">
  <Box>
    <Sans size="16">Sans 16</Sans>
    <Sans size="14">Sans 14</Sans>
    <Sans size="12">Sans 12</Sans>
    <Sans size="10">Sans 10</Sans>
    <Sans size="8">Sans 8</Sans>
    <Sans size="6">Sans 6</Sans>
    <Sans size="5t">Sans 5t</Sans>
    <Sans size="5">Sans 5</Sans>
    <Sans size="4t">Sans 4t</Sans>
    <Sans size="4">Sans 4</Sans>
    <Sans size="3t">Sans 3t</Sans>
    <Sans size="3">Sans 3</Sans>
    <Sans size="2">Sans 2</Sans>
    <Sans size="1">Sans 1</Sans>
  </Box>
  <Flex width="50%" px={2} alignItems="center">
    <BorderBox>
      <Sans size="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </Sans>
    </BorderBox>
  </Flex>
</Flex>
Serif
reveal less
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">
  <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 width="50%" px={2} alignItems="center">
    <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>
Specifying the element type
reveal less

This is an h1

This is an h2

And this content is all within a p.

<Flex justifyContent="space-between" flexDirection="column">
  <Box>
    <Serif size="8" element="h1">
      This is an h1
    </Serif>
    <Serif size="6" element="h2">
      This is an h2
    </Serif>
    <Sans size="4" element="p">
      And this content is all within a p.
    </Sans>
  </Box>
</Flex>