Space, size and radius
A 4px grid, control sizes with a 44px touch target, radii, border widths, z-index layers and breakpoints.
Space
| Token | CSS | Value | Preview |
|---|
space.0 | --space-0 | 0px | |
space.1 | --space-1 | 4px | |
space.2 | --space-2 | 8px | |
space.3 | --space-3 | 12px | |
space.4 | --space-4 | 16px | |
space.5 | --space-5 | 20px | |
space.6 | --space-6 | 24px | |
space.8 | --space-8 | 32px | |
space.10 | --space-10 | 40px | |
space.12 | --space-12 | 48px | |
space.16 | --space-16 | 64px | |
space.20 | --space-20 | 80px | |
space.24 | --space-24 | 96px | |
space.0.5 | --space-0-5 | 2px | |
Size
| Token | CSS | Value | Preview |
|---|
size.icon.sm | --size-icon-sm | 16px | |
size.icon.md | --size-icon-md | 20px | |
size.icon.lg | --size-icon-lg | 24px | |
size.icon.xl | --size-icon-xl | 32px | |
size.control.sm | --size-control-sm | 32px | |
size.control.md | --size-control-md | 40px | |
size.control.lg | --size-control-lg | 48px | |
size.touchTarget | --size-touch-target | 44px | |
size.avatar.sm | --size-avatar-sm | 24px | |
size.avatar.md | --size-avatar-md | 40px | |
size.avatar.lg | --size-avatar-lg | 64px | |
size.container.sm | --size-container-sm | 640px | |
size.container.md | --size-container-md | 960px | |
size.container.lg | --size-container-lg | 1280px | |
size.container.xl | --size-container-xl | 1536px | |
Radius
| Token | CSS | Value | Preview |
|---|
radius.none | --radius-none | 0px | |
radius.sm | --radius-sm | 4px | |
radius.md | --radius-md | 8px | |
radius.lg | --radius-lg | 12px | |
radius.xl | --radius-xl | 16px | |
radius.2xl | --radius-2xl | 24px | |
radius.full | --radius-full | 9999px | |
Border width
| Token | CSS | Value | Preview |
|---|
borderWidth.hairline | --border-width-hairline | 1px | |
borderWidth.medium | --border-width-medium | 2px | |
borderWidth.thick | --border-width-thick | 4px | |
Z-index
| Token | CSS | Value | Preview |
|---|
zIndex.base | --z-index-base | 0 | |
zIndex.raised | --z-index-raised | 10 | |
zIndex.sticky | --z-index-sticky | 100 | |
zIndex.dropdown | --z-index-dropdown | 1000 | |
zIndex.overlay | --z-index-overlay | 1100 | |
zIndex.modal | --z-index-modal | 1200 | |
zIndex.toast | --z-index-toast | 1300 | |
zIndex.tooltip | --z-index-tooltip | 1400 | |
Breakpoints
| Token | CSS | Value | Preview |
|---|
breakpoint.xs | --breakpoint-xs | 0px | |
breakpoint.sm | --breakpoint-sm | 480px | |
breakpoint.md | --breakpoint-md | 768px | |
breakpoint.lg | --breakpoint-lg | 1024px | |
breakpoint.xl | --breakpoint-xl | 1280px | |
breakpoint.2xl | --breakpoint-2xl | 1536px | |