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

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
Copy link
Edit on GitHub