Spacing & Layout tokens

Space, size, radius, z-index, shadows and breakpoints.

Space

A 4px scale: 1 = 4px, 4 = 16px. Negative tokens (-2) exist for margins. Prefer padding="4" over raw numbers.

0px

0-5

2px

4px

1-5

6px

8px

2-5

10px

12px

3-5

14px

16px

20px

24px

28px

32px

36px

40px

44px

48px

56px

64px

80px

96px

128px

Size

Sizes reuse the spacing scale and add larger steps for layout boxes: 40 = 160px · 48 = 192px · 56 = 224px · 64 = 256px · 72 = 288px · 80 = 320px · 96 = 384px · 112 = 448px · 128 = 512px · 144 = 576px · 168 = 672px · 192 = 768px · 224 = 896px.

Radius

2xl

full

Radius presets (base value): none 0px · sm 4px · md 8px · lg 12px · xl 16px. Try them in the customizer.

Shadows

Elevation presets map to shadow* props on iOS/web and elevation on Android:

shadows.xs

shadows.sm

shadows.md

shadows.lg

import { shadows } from '@advui/theme'

const Panel = styled(View, { ...shadows.md })

Breakpoints

Mobile-first flat values: <Stack flexDirection="column md:row" />. On web they compile to CSS media queries, so SSR output is stable.

Layout props such as Stack’s direction, Grid’s columns and Container’s gutter also take a map, from phones up: <Stack direction={{ base: 'column', md: 'row' }} />. A breakpoint you leave out keeps the value below it. For your own components, responsiveStyle turns such a map into media props.

Media key	Min width	Typical device
`xs:`	460px	Large phone
`sm:`	640px	Small tablet
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop
`xxl: (2xl)`	1536px	Large desktop

Z-index

base = 0 · dropdown = 1000 · sticky = 1100 · overlay = 1200 · modal = 1300 · popover = 1400 · toast = 1500 · tooltip = 1600Edit this page on GitHub

PreviousType scale

NextIcons