Layout

Structural consistency

Size Scale

Property group

Applies to

--size-*

Any size-related property (margin, padding, width,height, etc)

Encourage consistent spacing throughout an interface

section {
margin-top: var(--size-5);
}

Property

Value

--size-0

0px

--size-px

1px

--size-1

4px

--size-2

8px

--size-3

12px

--size-4

16px

--size-5

20px

--size-6

24px

--size-7

28px

--size-8

32px

--size-9

36px

--size-10

40px

--size-11

44px

--size-12

48px

--size-14

56px

--size-16

64px

--size-20

80px

--size-24

96px

--size-28

112px

--size-32

128px

--size-36

144px

--size-40

160px

--size-44

176px

--size-48

192px

--size-52

208px

--size-56

224px

--size-60

240px

--size-64

256px

--size-72

288px

--size-80

320px

--size-96

384px

--size-full

100%

--size-screen

100vw

--size-min

min-content

--size-max

max-content

Widths

Property group

Applies to

--width-*

max-width

Encourage consistent max-widths throughout an interface

.page-container {
max-width: var(--width-md);
margin: 0 auto;
}

Property

Value

--width-xs

320px

--width-sm

384px

--width-md

448px

--width-lg

512px

--width-xl

576px

--width-2xl

672px

--width-3xl

768px

--width-4xl

896px

--width-5xl

1024px

--width-6xl

1152px

--width-7xl

1280px