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.

<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 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>

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>