Typhography: Titles


When designing title for Ne.Sense please consider the consistancy and only use "Lato" ( download here ) for sans-serif titles ( h1, h2 and so on ). In some rare occasions when needed to use an Serif font type, please use "Georgia". In most cases it should have a letter spacing of 5px on web elements, bold ( font-weight:700 ) and should be uppercased. Please find an example code below:

h1,h2,h3,h4,h5{
   letter-spacing:5px;
   text-transform:uppercase;
   font:700 13px/2em "Lato",sans-serif
   }

Typography: Paragraphs


In paragraph, list items and general prints please use "Helvetica Neue" as the sans-serif font. As for the the Serif font type, please use "Georgia". Both "Helvetica Neue" and "Georgia" should be installed locally on your computer, or you can find them easily through the web. When designing paragraph blocks please allow a 2em line-spacing which is x2 on photoshop. Find the example code below:

p,ul,li{
   font:12px/2em "Helvetica Neue",sans-serif
   }

Colour Scheme: Dark


The colour scheme is an important part as the branding of Ne.Sense. Here, we will address the colour scheme of background, overlays and typography. The main colour scheme of Ne.Sense is dark blue, navy blue, rose gold and white. Please find the reference on the right.

The typography colour guide of the dark colour scheme can also be found on the right. Starting from the block at the bottom left is the title colour scheme, paragraph, list items colour scheme, divider colour scheme and secondary divider colour scheme.

Colour Scheme: Light


On the right hand side you can find typography colours used in the light colour scheme. Counting from the bottom left block is the title colour scheme, paragraph, list items colour scheme, divider colour scheme and seconday divider colour scheme.

If possible, please follow the hex colour guide when using any sorts of colours. This way it can resemble our brand identity more closely. On another note, you can also find the usage of "#f2f2f2" through out our website or graphics, they are subtle backgrounds used to highlight important elements. Types are rarely found used on top of them.


Structure: blocks


The structure of block elements should be spacious, under any block items titles, pargaphs, list items, individual images, image galleries, dividers...etc, there should be a space of 25 pixels. The inside padding of larger block elements ( e.g. sections ) should be 80 pixels ( excluding line-heights). Please find coded references below

h1,h2,h3,p,ol,ul,img,hr{
   margin:0 0 25px
   }

section{
   padding:80px 0
   }

Structure: Typography


As mentioned before, spacious is an important element of our Ne.Sense brand identity. When designing graphics or web elements, please include a 2em line-height ( 200% line-height ) in typography elements. Further more, 10% -20% or 1-3px lower is the perfect size for our Ne.Sense overall typography size. By doing so it can maintain our brands overall elegance.

body{
   line-height:2em;
   font-size:.85em
   }