Foundations15 tokens

Spacing

Padding and gaps. The name is the value: space/16 is 16px.

Scale

A 4px grid. 2 and 6 are half-steps for tight UI. The name is the value.

space/00px

space/22px

space/44px

space/66px

space/88px

space/1212px

space/1616px

space/2020px

space/2424px

space/3232px

space/4040px

space/4848px

space/6464px

space/8080px

space/9696px

Padding (orange) and gap (striped) inside a row of items. Small UI uses 4–12, layout uses 16 and up.

padding & gap · space/4

padding & gap · space/8

padding & gap · space/12

padding & gap · space/16

How to pick a value.

When

Use

Icon to label

space/4 – space/8

Inside controls

space/6 – space/16

Between items in a group

space/4 – space/12

Card padding

space/12 – space/24

Between sections

space/32 and up