Lay­out con­ven­tions to help speed up the design process.

Our design style is very edi­to­ri­al­ly influ­enced. The fol­low­ing grids and scales form a frame­work for lay­out and cre­ativ­i­ty for a num­ber of medi­ums & media sizes.

We use a variation of the Gerstner grid that has been optimized for the responsive web. It overlays 2, 3, 4, 5, 6, and 7 fluid column grids on top of each other and is spaced based on our baseline grid unit (aka the var(--line) variable). Our grid concept inspired by Joni Korpi’s Golden Grid System. The margins and columns are fluid while the gutters maintain a fixed width. This ensures consistent proportional spacing and alignment at all screen widths.

Basic grid units

Grid unit combo examples

Talk to us.

Learn more about our programs and find out how we can turn your project leads into loveable hardasses.