logo-mark Created with Sketch. Created by FontForge 20170731 at Tue Dec 2 15:06:59 2014 By Aleksey,,, Copyright (c) 2014 by Cruzine. All rights reserved.


Our grid system gives our content structure and guides layout. It is composed of:
1. Columns: 12 (Responsive, 1280px wide)
2. Margins: 30px
3. Gutters: 30px (Scale to match the content)
Content should be placed inside the column areas. To ensure our content looks good across every device our columns use percentages instead of fixed values.
Margins give the content space at the left and right edges. Margins are fixed at 30px to give our content ample room from device edges.
Gutters can be scaled to suit the content. You can make customisations to reduce or increase space between elements. In the example below we’ve scaled the gutter down to 18px to give the artwork and text more screen space.
We use a 6px square baseline grid. When building components and objects for the interface we always try fit them to our baseline. This brings harmony by ensuring the spacing and sizing of elements is consistent. We extend this grid to our typography to unify every element of the interface.
Most of our interface elements are designed and built to this scale.
Padding and margins use the baseline to give us a corresponding scale for creating space between elements.
Our baseline grid, typography and spacing working in unity to create an interface component.