Web style guide - Wawanesa Insurance

WAWANESA INSURANCE

Style Guide for Web PALETTE | TYPOGRAPHY | ELEMENTS V 1.1 / Last updated September 14, 2016 Wawanesa Insurance creative@wawanesa.com

PALETTE

Wawanesa Blue

Dark Blue

#0280c8 R0 G 128 B 195

#003d60 R0 G 93 B 133

#3399cf Alpha 80%

Forest Green

Eggplant Purple

#007a3e R0 G 122 B 62

#3c1053 R 60 G 16 B 83

#bac952 Alpha 80%

#339463 Alpha 80%

#633f75 Alpha 80%

#dc9493 Alpha 50%

#d4de93 Alpha 50%

#80bd9f Alpha 50%

#9e88a9 Alpha 50%

#eabfbe Alpha 30%

#e5ebbe Alpha 30%

#b3d7c5 Alpha 30%

#c5b7cb Alpha 30%

Gold

Orange

Red

Green

# ce3a R 255 G 221 B 85

#f26827 R 244 G 117 B 33

#b32123 R 184 G 41 B 39

#a9b617 R 169 G 188 B 39

#337d9d Alpha 80%

# e377 Alpha 80%

#f6904d Alpha 80%

#c65352 Alpha 80%

#80c0e1 Alpha 50%

#80aec2 Alpha 50%

# eeaa Alpha 50%

#faba90 Alpha 50%

#b3d9ed Alpha 30%

#b3cedb Alpha 30%

# f5cc Alpha 30%

#fcd6bc Alpha 30%

TYPOGRAPHY

BASE STYLE

Open Sans - Normal 400 / 13.5px

font‐size: 13.5px; line‐height: 20px; font‐weight: 400; color: #444;

PRIMARY TYPEFACE

Open Sans - Light 300 Open Sans - Light Italic 300 Open Sans - Normal 400 Open Sans - Normal Italic 400 Open Sans - Semibold 600 Open Sans - Semibold Italic 600 Open Sans - Bold 700 Open Sans - Bold Italic 700 SUPPORTING TYPEFACES

Helvetica Neue / Normal / Bold / Italic / Bold Italic Helvetica / Normal / Bold / Italic / Bold Italic Arial / Normal / Bold / Italic / Bold Italic HEADERS

The base style for all headers:

font‐weight: 600; line‐height:1.15 em; color:#333;

Header font sizes:

Header 1 / 25px font‐size:1.852em;

Header 2 / 17px

Header 2 / 17px font‐size:1.333em;

Header 3 / 16px font‐size:1.222em; Header 4 / 13.5px font‐size:1em; Header 5 / 12px

font‐size:0.889em; Header 6 / 11px

font‐size:0.881em;

ELEMENTS

BODY TEXT

Paragraph

p {margin:0 0 1em 0;}

Links

a{color:#0280c8;text‐decoration:no ne;} a:hover, a:focus {text‐decoration: underline;}

Small text

small {font‐size:0.889em}

Bold text

strong,b {font‐weight:600;}

BUTTONS

For a really, really comprehensive look at the CSS, check out /* BUTTONS */ in this document's source code.

CLASS /

PRIMARY

INFO

SUCCESS

INVERSE

WARNING

DANGER

class="btn‐ primary"

class="btn‐ info"

class="btn‐ success"

class="btn‐ inverse"

class="btn‐ warning"

class="btn‐ danger"

Primary

Info

Success

Inverse

Warning

Danger

class="btn"

Disabled

Disabled

Disabled

Disabled

Disabled

Disabled

class="btn" disabled="d isabled"

Large

Large

Large

Large

Large

Large

class="btn btn‐large"

Small

Small

Small

Small

Small

Small

class="btn btn‐small"

Mini

Mini

Mini

Mini

Mini

Mini

class="btn btn‐mini"

ATTRIBUTE