Skip to main contentPrimer

Size

An overview of all available size CSS variables

Base

View in Storybook

SampleCSS variableOutput valueSource value
--base-size-2
0.125rem2px
--base-size-4
0.25rem4px
--base-size-6
0.375rem6px
--base-size-8
0.5rem8px
--base-size-12
0.75rem12px
--base-size-16
1rem16px
--base-size-20
1.25rem20px
--base-size-24
1.5rem24px
--base-size-28
1.75rem28px
--base-size-32
2rem32px
--base-size-36
2.25rem36px
--base-size-40
2.5rem40px
--base-size-44
2.75rem44px
--base-size-48
3rem48px
--base-size-64
4rem64px
--base-size-80
5rem80px
--base-size-96
6rem96px
--base-size-112
7rem112px
--base-size-128
8rem128px

Border

Border size

View in Storybook

SampleCSS variableOutput valueSource value
--boxShadow-thick
inset 0 0 0 0.125reminset 0 0 0 {borderWidth.thick}
--boxShadow-thicker
inset 0 0 0 0.25reminset 0 0 0 {borderWidth.thicker}
--boxShadow-thin
inset 0 0 0 0.0625reminset 0 0 0 {borderWidth.thin}
--borderWidth-default
0.0625rem{borderWidth.thin}
--borderWidth-thick
0.125rem2px
--borderWidth-thicker
0.25rem4px
--borderWidth-thin
0.0625rem1px

Border radius

View in Storybook

SampleCSS variableOutput valueSource value
--borderRadius-default
0.375rem{borderRadius.medium}
--borderRadius-full
624.9375rem9999px
--borderRadius-large
0.75rem12px
--borderRadius-medium
0.375rem6px
--borderRadius-small
0.1875rem3px

Outline

View in Storybook

SampleCSS variableOutput valueSource value
--outline-focus-offset
-0.125rem-2px
--outline-focus-width
0.125rem2px

Breakpoints

View in Storybook

CSS variableOutput valueSource value
--breakpoint-xsmall
20rem320px
--breakpoint-small
34rem544px
--breakpoint-medium
48rem768px
--breakpoint-large
63.25rem1012px
--breakpoint-xlarge
80rem1280px
--breakpoint-xxlarge
87.5rem1400px

Viewport

View in Storybook

CSS variableOutput value
--viewportRange-landscape
(orientation: landscape)
--viewportRange-narrow
(max-width: calc(48rem - 0.02px))
--viewportRange-narrowLandscape
(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))
--viewportRange-portrait
(orientation: portrait)
--viewportRange-regular
(min-width: 48rem)
--viewportRange-wide
(min-width: 87.5rem)

Layout

Stack

SampleCSS variableOutput valueSource value
--stack-gap-condensed
0.5rem{base.size.8}
--stack-gap-normal
1rem{base.size.16}
--stack-gap-spacious
1.5rem{base.size.24}
--stack-padding-condensed
0.5rem{base.size.8}
--stack-padding-normal
1rem{base.size.16}
--stack-padding-spacious
1.5rem{base.size.24}

Controls

      Overlay

      View in Storybook

      CSS variableOutput valueSource value
      --overlay-borderRadius
      		0.375rem{borderRadius.medium}
      --overlay-height-large
      		27rem432px
      --overlay-height-medium
      		20rem320px
      --overlay-height-small
      		16rem256px
      --overlay-height-xlarge
      		37.5rem600px
      --overlay-offset
      		0.25rem4px
      --overlay-padding-condensed
      		0.5rem{base.size.8}
      --overlay-padding-normal
      		1rem{base.size.16}
      --overlay-paddingBlock-condensed
      		0.25rem{base.size.4}
      --overlay-paddingBlock-normal
      		0.75rem{base.size.12}
      --overlay-width-large
      		40rem640px
      --overlay-width-medium
      		30rem480px
      --overlay-width-small
      		20rem320px
      --overlay-width-xlarge
      		60rem960px
      --overlay-width-xsmall
      		12rem192px