Box

<Box width={1/2} color='primary.base'>
  Box
</Box>

<Box p={3} color='secondary.base'>
  Box
</Box>

<Box m={2} color='primary.light'>
  Box
</Box>

<Box color='blue'>
  Box
</Box>

<Box bg='green'>
  Box
</Box>

<Box
  height={[
    '100%', // Sets height 100% at the smallest breakpoint
    '50%', // Sets height 50% at the next breakpoint
    '25%' // Sets height 25% at the next breakpoint
  ]}
  width={[
    1,    // Sets width 100% at the smallest breakpoint
    1/2,  // Sets width 50% at the next breakpoint
    1/4,  // Sets width 25% at the next breakpoint
  ]}
  color='gray'>
  Hello
</Box>