Layout

Gutters will be 24px on each side of the page and 24px between Columns, expanding to 64px and 32px on Desktop. When using the default layout settings, blocks will be (up to) 784px wide, unless they are set to wide mode in which case they’ll extend to 1192px. (these widths can also be manually set on a case-by-case basis as needed, these are just the defaults)

Spacing

Margin/Padding sizes come in a range from “Small” (8px) to “XXX Large” (256px). On smaller viewports, these values will all scale down to their next smallest neighbor. For example “X-Large” on mobile is 32px instead of 48. Small remains at 16px no matter what.


Small (16px)


Medium (24px)


Large (32px)


X-Large (48px)


XX-Large (80px)


XXX-Large (120px)

Color Palette