Grids

Our system adapts from XS to XL breakpoints, ensuring consistent spacing, alignment, and rhythm from small mobile screens to large desktops. Use these grid templates to guide responsive design decisions and maintain visual balance.

A series of light pink columns illustrating different grids

XL

Template width: 1920px
Columns: 12
Margin width: 96px
Gutter width: 24px

A light gray rectangle with light pink columns equally dividing the image to illustrate a grid system

Large

Template width: 1440px
Columns: 12
Margin width: 48px
Gutter width: 24px

A light gray rectangle with light pink columns equally dividing the image to illustrate a grid system

Medium

Template width: 1024px
Columns: 12
Margin width: 48px
Gutter width: 24px

A light gray rectangle with light pink columns equally dividing the image to illustrate a grid system

Small

Template width: 768px
Columns: 4
Margin width: 24px
Gutter width: 24px

A light gray rectangle with light pink columns equally dividing the image to illustrate a grid system

XS

Template width: 375px
Columns: 4
Margin width: 24px
Gutter width: 8px

A light gray rectangle with light pink columns equally dividing the image to illustrate a grid system

Favicon

Icons