ABC INSURANCE

WEB STYLE GUIDE

Standards and Resources for Creating ABC Insurance Website

ABC Insurance Style Guide | 1

 COLOR SCHEME

ABC Insurance’s primary color scheme is the blue colour. Blue is for calm, trust and intelligence.
Blue is a serene and calming color that represents intelligence and responsibility. Blue is cool and
relaxing. Light baby blue is peaceful, while dark blue can signify depth and power. It is the most
popular color in the world, both when it comes to personal preferences (for both genders) and
usage in business logos. It’s the go-to color for trusted, corporate institutions, often in combination
with a mature grey:

 IT companies e.g. Intel, Microsoft, IBM, HP, Dell

 Finance institutions e.g. American Express, Visa, Goldman Sachs, Paypal
 Big corporations e.g. Procter & Gamble, General Electric, General Motors, Boeing and
Lowe’s
 Blue is also the natural choice for professional network LinkedIn.

Interestingly, blue is the color of choice for many other social networks too. Facebook is blue—
apparently because founder Mark Zuckerberg is red-green color blind and blue is the most vivid
color that he can see. The association with trust and dependability does work well in the context of
a social network, with all the concerns around data privacy and so on, and you’ll find that Twitter is
also blue, as are Instagram, Russia’s VKontakte and even social media site Mashable.

TOPOGRAPHY

The fonts for ABC Insurance will be: Monserrat, Roboto and Arial.

 Monserrat - ABC Insurance will use this font for all web headings.
 Roboto - This will be ABC Insurance’s secondary font.
 Arial - ABC Insurance will use this font for the web body copy. It is free, widely available,
and easy to read on screen and on print material.

ABC Insurance Style Guide | 2

The new graphic standards (colours, font types, font sizes) have been integrated and "hard-coded"
into the Cascade templates. This allows content editors and web developers to focus on visual
aesthetics and content.

Using Heading Tags

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the largest and visually,
most important heading while <h6> defines the smallest heading size. These tags decrease in size
giving visual hierarchy on the important copy throughout the page.

Heading 1 sample <h1>

h1

font-size: 40px

font-weight: bold

Heading 2 sample <h2>

h2

font-size: 30px

font-weight: bold

Heading 3 sample <h3>

h3

font-size: 20px

Heading 4 sample <h4>

h4

font-size: 18px

font-weight: 140%

Body text sample <p>

font-size: 14px;

Quote:

Italic

font-size: 20px

ABC Insurance Style Guide | 3

BUTTONS:

ABC Insurance Style Guide | 4