Size tokens

The size scale helps maintain consistent sizing of elements. This scale applies primarily to width and height.

Name	Value
`25`	4px
`50`	8px
`75`	12px
`100`	16px
`150`	20px
`200`	24px
`300`	32px
`350`	40px
`400`	48px
`500`	64px
`525`	80px
`600`	128px
`700`	256px
`750`	384px
`800`	512px
`850`	768px
`900`	1024px

React

See the style props documentation for the complete list of style props that use the size scale.

live

<HStack
  gap="300"
  sx={{
    div: { backgroundColor: 'brandRed.600', width: '300' },
  }}
>
  <Box height="700" />
  <Box height="600" />
  <Box height="525" />
  <Box height="500" />
  <Box height="300" />
  <Box height="100" />
</HStack>

Bootstrap

Use the sizing utilities to apply system sizing such as width, height etc.

live

<div class="hstack gap-300">
  <div class="h-size-100 bg-brandRed-600 w-size-300"></div>
  <div class="h-size-300 bg-brandRed-600 w-size-300"></div>
  <div class="h-size-500 bg-brandRed-600 w-size-300"></div>
  <div class="h-size-525 bg-brandRed-600 w-size-300"></div>
  <div class="h-size-600 bg-brandRed-600 w-size-300"></div>
  <div class="h-size-700 bg-brandRed-600 w-size-300"></div>
</div>

Shadow

Spacing tokens

Design System

Settings

Size tokens

React

Bootstrap