Colour Flags Focus states Grammar and style Grid Grid scaleIcons Illustration  Logo Markup Cards Mission Padding Photography Promo assets  Marketing Radius Radius Size Spacing Marketing Spacing Tapestries  Tone of voice Transitions Typography Vocabulary
Design at Wise Foundations ColourFlagsFocus statesGrammar and styleGridIconsIllustration LogoMarkupCardsMissionPaddingPhotographyPromo assets Marketing RadiusRadiusSizeSpacingMarketing SpacingTapestries Tone of voiceTransitionsTypographyVocabularyComponents Patterns Resources
Grid

Our grid system ensures that our content is appropriately designed for all screen sizes.

a graphic of our grid system on desktop
Grid scale

Our grid consists of 5 sizes from XS on mobile to XL on desktop. Our maximum grid width is 1440px. Anything larger than this the content centralises to the viewport.

Grid system on an XS mobile
XS

320px - 479px

Columns: 6

Margin: 20

Gutter: 12

Grid system on a S mobile
S

480px - 767px

Columns: 6

Margin: 32

Gutter: 12

Grid system on a M tablet
M

768px - 991px

Columns: 12

Margin: 40

Gutter: 16

Grid system on a L tablet
L

992px - 1199px

Columns: 12

Margin: 80

Gutter: 28

Grid system on XL desktop
XL

1200px - 1440px

Columns: 12

Margin: 100

Gutter: 32

Grid system on an XXL desktop
XXL

+1440px

Grid is centred