Halder Consulting Incorporated Style Guide

This text sets forward standards and guidelines to ensure consistent branding.

Logo

The logo is the combination of an icon that consists of a cloud superimposed with gears and an accompanying wordmark.

There are variations available. When space is limited and the full logo cannot be displayed legibly it is suitable to use the icon without the accompanying wordmark e.g. as a favicon.

The cloud is optional, but the gears must always be present.

Don’t:
-apply extra effects to the logo like lensflare, dropshadow, gradients
-rotate the logo
-change the colors
-change the aspect ratio or display the logo in a manner that distorts it
-use a different font for the wordmark

The wordmark is in the font Duepuntozero: https://www.dafont.com/duepuntozero.font

Color Palette

Slate Gray

#69839e

Gray

#d2d7dd

Dark Gray

#303133

Sandal

#a9846a

Blue for Web*

#006cff

*Not recommended for use as a background color

Fonts

Roboto and Poppins are used when possible, but Open Sans is also acceptable.

The fallback font should be the default sans-serif. This is necessary:
-for text that cannot be rendered in Roboto or Poppins e.g. special characters
-when fonts are unavailable e.g. some email clients

Use Roboto for:
-body text
-for most copy in general

Use Poppins for:
-navigation bar links
-buttons

Links:

https://fonts.google.com/specimen/Roboto
https://fonts.google.com/specimen/Poppins
https://fonts.google.com/specimen/Open+Sans

 

Iconography

Font Awesome icons can be used sparingly to add a visual flare to otherwise regular copy.

Photography

Feature:
-people in casual to semi-formal attire
-familiar objects e.g. coffee, vehicles, denim jeans, boots
-earth tones, khaki, denim and leather

CSS Samples

The quick brown fox jumps over the lazy dog

color: rgb(48, 49, 51);
font-family: Roboto;
font-size: 35px;
font-weight: 300;
letter-spacing: normal;
line-height: 42px;

The quick brown fox jumps over the lazy dog

color: rgb(48, 49, 51);
font-family: Roboto;
font-size: 12px;
font-weight: 600;
letter-spacing: 2.4px;
line-height: 14px;
text-transform: uppercase;

The quick brown fox jumps over the lazy dog

color: rgb(48, 49, 51);
font-family: Poppins;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
line-height: 12px;
text-transform: uppercase;

Recommendations

Consider removing the dropshadow effect from the logo and its variations.

Sans serif fonts can be complemented visually with a serif font. Consider pairing Roboto Slab with Poppins — https://fonts.google.com/specimen/Roboto+Slab

Images should not be scaled up. When small images get stretched to fill a larger size, the image quality suffers. A large, compressed image file may be smaller than a small, uncompressed image file. Exporting compressed images will make the file smaller and smaller files will load faster. When selecting an image:
1. Start with a large image. Make a copy and scale it to just larger than necessary while maintaining the aspect ratio.
2. Export a compressed copy of the image while retaining the original file.

Consider replacing carousels. See this opinionated demo of carousels — https://shouldiuseacarousel.com/

Consider replacing hero video with lightweight animation or static content. An idea: https://codepen.io/RSH87/pen/gMdJKQ and more ideas: https://codepen.io/chris22smith/pen/RZogMa,  https://codepen.io/Lewitje/pen/BNNJjo,

The copy is inconsistent in use of pronouns. Statements with ambiguity like “Have you ever?” or “Does this describe?” clash with the unambiguous, analytical, and otherwise confident tone. Consider some revision.