Links

Layout

Structural consistency

Size Scale

Encourage consistent spacing throughout an interface. Pollen's size scale is proportional, so --size-16 is twice as much as --size-8 for example. One size unit is equal to 4px.
Property group
Applies to
--size-*
Any size-related property (margin, padding, width,height, etc)
section {
margin-top: var(--size-5);
}
Property
Value
--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

Container Widths

Encourage consistent max-widths for containers throughout an interface, based roughly on common device breakpoints
Property group
Applies to
--width-*
max-width
.page-container {
max-width: var(--width-md);
margin: 0 auto;
}
Property
Value
--width-xs
480px
--width-sm
640px
--width-md
768px
--width-lg
1024px
--width-xl
1280px

Aspect Ratios

Simple aspect ratios for common formats
Property group
Applies to
--ratio-*
aspect-ratio
.image {
aspect-ratio: var(--ratio-portrait);
}
Property
Value
--ratio-square
1/1
--ratio-portrait
3/4
--ratio-landscape
4/3
--ratio-tall
2/3
--ratio-wide
3/2
--ratio-widescreen
16/9
--ratio-golden
1.618/1