Daniel
Terms and Conditions (Headline Example)
Centered Subhead 1 Example
Column Name / Leftside Subhead1
Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales.
Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor.
Column Name / Subhead 1 (Leftside)
Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales.
Subhead 2 (leftside)
Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor.
Column Name / Leftside Subhead1
Vestibulum ut ante gravida, elementum dui at, suscipit nisl. Nam id facilisis felis, at facilisis tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ultrices, lectus at consectetur semper, tellus tellus aliquet lacus, nec bibendum mauris ligula vitae massa. Proin tincidunt nibh vitae vestibulum sodales. Nunc sagittis augue tortor, eget ultrices metus suscipit sit amet. Duis fringilla ultrices eros, sed vehicula dolor. In molestie fringilla accumsan. Nunc suscipit urna quis magna tincidunt, vel porta felis tempor. Quisque vehicula, nulla quis finibus efficitur, quam diam hendrerit lorem, eu mollis dui magna ut nisl. Nam non risus ac purus facilisis porttitor. Duis ac sollicitudin urna, at vestibulum diam.
Typefaces used:
Open Sans (primary)
Helvetica Neue (Thin - used on the dashboard and accuracy level for the big number)
The Grid System
Formula: ((1360 - 60 x 2) - 32 x 11) / 12 = 74 px
Current grid system has 12 columns (most flexible) and is applied to the common screen resolution today, which is 1360 px. The gap between those columns is 32 px, resulting the size of a column of 74 px width. Margins (left and right of the screen: 60 px.
74 px
180 px
286 px
392 px
604 px