Spacing & Shape

Semantic layout props choose spacing; components own their shape and elevation. The token tables below expose the underlying values for reference, while the examples use the same public APIs as an application.

Gap

Row and Column share a six-step gap axis. snug is the default. Switch the example to compare the space between real components.
A
B
C
iOS
A
B
C
Android
A
B
C
Web
tsx
<Row flush alignCenter>
<Emblem label="A" />
<Emblem label="B" />
<Emblem label="C" />
</Row>
Prop
Spacing token
Gap
flush
0
0px
tight
1
4px
snug
2
8px
cozy
3
12px
relaxed
4
16px
loose
6
24px

Padding

padTight, pad and padLoose inset a layout group. A normal Card already owns its inset; flush removes that inset when a child layout must provide it.
Workspace
One inset around the whole group.
iOS
Workspace
One inset around the whole group.
Android
Workspace
One inset around the whole group.
Web
tsx
<Card flush>
<Column padTight snug>
<Typography medium>Workspace</Typography>
<Typography small>One inset around the whole group.</Typography>
</Column>
</Card>

Spacing reference

The shared numeric scale includes the hairline and half steps alongside the 4px progression. Components and layout primitives map their semantic props onto this scale.
Token
Value
0
0px
px
1px
0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
3.5
14px
4
16px
5
20px
6
24px
7
28px
8
32px
9
36px
10
40px
11
44px
12
48px
14
56px
16
64px
20
80px
24
96px
28
112px
32
128px
36
144px
40
160px
48
192px
56
224px
64
256px

Radius and shape

The radius ladder is a reference for component skins. Use a component's supported shape prop at a call site, such as Emblem circle; other components choose their shape for their own role and platform.
Radius
Value
none
0px
sm
2px
DEFAULT
4px
md
6px
lg
8px
xl
12px
2xl
16px
3xl
24px
full
9999px

Shapes in use

AL
Member
These are Emblem, Avatar and Badge, with their own shapes and materials.
Shape token
Web
iOS
Android
control
8
9999
9999
field
10
8
4
card
14
12
12
dialog
18
28
28
menu
12
26
4
sheet
22
38
28
checkbox
6
9999
2
pill
9999
9999
9999
tile
12
12
12
The shape table records platform token values. Each component selects the platform shape only when that platform defines a control for its job; other native skins use the web shape.

Elevation

Card exposes flat, default and raised appearances. These examples use those appearances directly; the reference lists the shadow helper's output on the running platform in the active theme.
Flat surface
iOS
Flat surface
Android
Flat surface
Web
tsx
<Card flat><Typography>Flat surface</Typography></Card>
Preset
Resolved shadow
none
{"boxShadow":"none"}
sm
{"boxShadow":"0px 16px 32px -22px rgba(0, 0, 0, 0.5)"}
DEFAULT
{"boxShadow":"0px 20px 44px -24px rgba(0, 0, 0, 0.5)"}
md
{"boxShadow":"0px 30px 54px -24px rgba(0, 0, 0, 0.5)"}
lg
{"boxShadow":"0px 26px 50px -20px rgba(0, 0, 0, 0.5)"}
xl
{"boxShadow":"0px 50px 100px -30px rgba(0, 0, 0, 0.45)"}

Layering

Floating components own their placement and stacking. Open the Popover to see the real overlay above its sibling Card.
Content beneath the overlay
iOS
Content beneath the overlay
Android
Content beneath the overlay
Web
tsx
<Column relaxed>
<Popover trigger="Open layer" title="A floating surface" description="The kit positions this panel above the content." actionLabel="Close" />
<Card><Typography>Content beneath the overlay</Typography></Card>
</Column>
Reserve
Owner
10
Local component layers
50
Floating overlays
900
Drag layer
1000
Portal outlet

Component density

compact and comfortable adjust a component's own metrics. Omit both for its regular density. There is no global padding override: the same props are resolved by each component's skin.
Storage
84% of 512 GB used.
iOS
Storage
84% of 512 GB used.
Android
Storage
84% of 512 GB used.
Web
tsx
<Container xxs start>
<Card compact>
<Column tight>
<Typography lead semibold>Storage</Typography>
<Typography small muted>84% of 512 GB used.</Typography>
</Column>
</Card>
</Container>
← Layout & Flexbox
Typography →