Text

<Box space={2}>
  <Text variant="oak">Oak</Text>
  <Text variant="pine">Pine</Text>
  <Text variant="fir">Fir</Text>
  <Text variant="ceder">Ceder</Text>
  <Text variant="ceder" subStyle="emphasis">
    Ceder Emphasis
  </Text>
  <Text variant="ash">Ash</Text>
  <Text variant="ash" subStyle="emphasis">
    Ash
  </Text>
  <Text variant="maple">Maple</Text>
  <Text variant="spruce">Spruce</Text>
  <Text variant="spruce" subStyle="emphasis">
    Spruce Emphasis
  </Text>
  <Text variant="spruce" subStyle="ui">
    Spruce UI
  </Text>
  <Text variant="birch">Birch</Text>
  <Text variant="birch" subStyle="emphasis">
    Birch Emphasis
  </Text>
  <Text variant="willow">willow</Text>
</Box>

<Text variant={['ash', 'ash', 'fir', 'pine']} subStyle={[, 'emphasis']}>
  Responsive Text
</Text>

<Text variant="pine" color={['red', 'green', 'yellow', 'green']}>
  Colored
</Text>

<Text
  align={['left', 'center', 'justify', 'right']}
  transform={['uppercase', 'lowercase', 'initial', 'uppercase']}>
  Colored
</Text>

<Text variant="ash">
  Hello <Text subStyle="emphasis">World</Text>
</Text>

<Text variant="ash" color="primary">
  Hello <Text subStyle="emphasis">World</Text>
</Text>