Company Digital Brand & UX Guidelines



Changelog

01 Jan 2015 - Changelog notes.

Logo Presentation

Leave about 30% whitespace between the logo and other elements.

Reduce the glyph/icon by about 10% when putting it inside a circle.

Do Not

Description of logo "don't" one. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Do Not

Description of logo "don't" two. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Do Not

Description of logo "don't" three. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Brand Colours

Primary Brand Colours

Color Name

Hex #xxxxxx
RGB 0,0,0

Color Name

Hex #xxxxxx
RGB 0,0,0

Secondary Brand Colours

Color Name

Hex #xxxxxx
RGB 0,0,0

Color Name

Hex #xxxxxx
RGB 0,0,0

Color Name

Hex #xxxxxx
RGB 0,0,0

Web Fonts

Primary Typeface: Helvetica

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Secondary Typeface: Impact

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Sample H1 Header

Sample paragraph text. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere. Vel ea illud nominati, vim ex omnesque reprehendunt. Vel fabellas adipisci ne, sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu, quo simul nostro numquam in. Eum ut harum aeterno consectetuer, pro denique adversarium mediocritatem cu.

Sample H2 Header

Sample paragraph text. An eos aperiam gloriatur, at atqui nobis congue cum. Offendit oporteat delicata sea ad. Cu sit hinc quidam, usu noluisse scribentur id. Te graece recteque sit.

Sample H3 Header

Sample paragraph text. Doctus mentitum hendrerit pro eu, pro ne ridens sententiae. Vel sumo meliore neglegentur eu. Cum ea mundi placerat efficiantur, cu eum paulo essent eripuit, sed in platonem conclusionemque. Ea meis iriure mea, et vel oblique officiis intellegam. Pro interpretaris necessitatibus ea, vitae numquam eu mea, an ancillae molestie quo. Ea animal principes usu. Mea ne altera postulant.

Sample H4 Header

Sample paragraph text. Idque viderer noluisse vix ei, id postea vocent officiis sea, possit quaestio convenire te usu. An nisl euismod imperdiet mei, nominati salutandi id sed, ei essent tacimates has. Vim alii novum audire ea. Ne per simul lobortis periculis.

Icons

Description of icon libraries and guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere. Vel ea illud nominati, vim ex omnesque reprehendunt. Vel fabellas adipisci ne, sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu.

Web & Responsive

Dashboard Grid

Description of layout option one. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Description of layout option two. Sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu.

Description of layout option three. Vim alii novum audire ea. Ne per simul lobortis periculis. An nisl euismod imperdiet mei.

Navigation

Description and samples of navigation guidelines. Doctus mentitum hendrerit pro eu, pro ne ridens sententiae. Vel sumo meliore neglegentur eu. Cum ea mundi placerat efficiantur, cu eum paulo essent eripuit, sed in platonem conclusionemque. Ea meis iriure mea, et vel oblique officiis intellegam. Pro interpretaris necessitatibus ea, vitae numquam eu mea, an ancillae molestie quo. Ea animal principes usu. Mea ne altera postulant.

Sample of web navigation.

Sample of tablet navigation.

Sample of mobile navigation.

Buttons

Description of button guidelines. Idque viderer noluisse vix ei, id postea vocent officiis sea, possit quaestio convenire te usu. An nisl euismod imperdiet mei, nominati salutandi id sed, ei essent tacimates has. Vim alii novum audire ea. Ne per simul lobortis periculis.

Standard Button Disabled Button

Forms

Description of form guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his appetere. Vel ea illud nominati, vim ex omnesque reprehendunt. Vel fabellas adipisci ne, sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu, quo simul nostro numquam in. Eum ut harum aeterno consectetuer, pro denique adversarium mediocritatem cu.

Favicon

Description of favicon guidelines. Sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu. Vim alii novum audire ea. Ne per simul lobortis periculis. An nisl euismod imperdiet mei.

Visuals

Tables

Description of table guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse appetere. Vel ea illud nominati, vim ex omnesque reprehendunt. Vel fabellas adipisci ne, sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu, quo simul nostro numquam in. Eum ut harum aeterno consectetuer, pro denique adversarium mediocritatem cu.

Column One Header Column Two Header Column Three Header
Consectetur adipiscing elit. Aliquam convallis ligula arcu. Id pretium tellus sagittis vitae.
Vivamus eget feugiat quam. Phasellus finibus nisi nisl. Vitae scelerisque enim bibendum in.
Maecenas malesuada sollicitudin. Mi eget luctus. Integer lacinia nibh vel. Magna imperdiet tempor.
1-3 of 257 results Load More +25 +50 +100

Photography

Description of photography guidelines. Idque viderer noluisse vix ei, id postea vocent officiis sea, possit quaestio convenire te usu. An nisl euismod imperdiet mei, nominati salutandi id sed, ei essent tacimates has. Vim alii novum audire ea. Ne per simul lobortis periculis.

Charts

Description of charting library and guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Vel ea illud nominati, vim ex omnesque reprehendunt. Vel fabellas adipisci ne, sea ad tibique vivendum splendide. Mel vide facilisi et, vel melius corrumpit eu, quo simul nostro numquam in. Eum ut harum aeterno consectetuer, pro denique adversarium mediocritatem cu.g.

Social

Description of social guidelines. Doctus mentitum hendrerit pro eu, pro ne ridens sententiae. Vel neglegentur eu. Cum ea mundi placerat efficiantur, cu eum paulo essent eripuit, sed in platonem conclusionemque. Ea meis iriure mea, et vel oblique officiis intellegam. Pro interpretaris necessitatibus ea, vitae numquam eu mea, an ancillae molestie quo. Ea animal principes usu. Mea ne altera postulant.

Description of Twitter guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Description of Facebook guidelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.

Description of Instagram guildelines. Lorem ipsum dolor sit amet, bonorum argumentum vel eu. Ea his vidisse suscipit appetere.