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.

A single variant is shorthand for a set of typography-specific tokens. The text-treatments vary slightly depending on screen size.

Text extends Box and supports the same set of styled-system props.

<>
  <Text
    variant="largeTitle"
    py={3}
    px={4}
    bg="purple100"
    color="white100"
    borderRadius={6}
    textAlign="center"
  >
    All their equipment and instruments are alive
  </Text>
</>

<>
  <Text variant="largeTitle">Text largeTitle</Text>
  <Text variant="title">Text title</Text>
  <Text variant="subtitle">Text subtitle</Text>
  <Text variant="text">Text text</Text>
  <Text variant="mediumText">Text mediumText</Text>
  <Text variant="caption">Text caption</Text>
  <Text variant="small">Text small</Text>
</>