Radius

We use a range of border radius sizes to create a consistent, approachable look across our UI.

Apply them based on component type, hierarchy, and visual balance.

Three rectangles with varying degree of corner radiuses (8px, 12px, 16px)

Radius scale

Token name	Value
`small`	8px
`medium`	12px
`large`	16px
`xl`	24px
`xxl`	32px
`full`	999999px

Prefer the named sizes above. The equivalent numeric tokens (e.g. 300, 350, 400) remain available but are deprecated and should not be used in new work.

Usage

System border tokens are available for the border-radius, border-width and border-color CSS properties. Border tokens can also be applied with presets that include all three properties preconfigured for specific use-cases.

React

Individual border properties can be set with the corresponding style props of borderRadius, borderWidth, and borderColor. Border presets are applied via the border style prop.

Radius scale

<Stack direction="row" spacing="400">
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="small"
  >
    small
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="medium"
  >
    medium
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="large"
  >
    large
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="xl"
  >
    xl
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="xxl"
  >
    xxl
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    height="600"
    width="600"
    borderRadius="full"
  >
    full
  </Panel>
</Stack>

Border width

<Stack direction="row" spacing="400">
  <Panel
    as={Center}
    border="neutral"
    borderWidth="400"
    height="600"
    width="600"
  >
    400
  </Panel>
  <Panel
    as={Center}
    border="neutral"
    borderWidth="500"
    height="600"
    width="600"
  >
    500
  </Panel>
</Stack>

Logo

Shadow