StyleGuide Framework

Primary Colours

Dark Blue
#005b8e
Light Blue
#0093d8
Darkest Blue
#00354e
Blue
#006899

Grades (as lightened shades)

100%
#005b8e
90%
#006ba8
80%
#007cc1
70%
#009cf4
60%
#28b2ff
70%
#5bc4ff
60%
#8ed6ff
50%
#a8e0ff
40%
#c1e9ff
30%
#005b8e
20%
#005b8e

Grades (as coloured codes)

100%
#005b8e
90%
#196b99
80%
#337ca5
70%
#4c8cb0
60%
#669bdd
50%
#7fadc6
40%
#99bdd2
30%
#b2cddd
20%
#ccdee8
10%
#e5eef3
5%
#f2f7f9

Additional Colours

Form error
Form focus

Standard Colours

White
#ffffff
Black
#00000
Dark Grey
#333333
Grey
#666666
Grey 2
#999999
Light Grey
#bbbbbb
Lighter Grey
#cccccc
Green
#cccccc
20%
#cccccc
Yellow
#cccccc
20%
#cccccc
Orange
#cccccc
20%
#cccccc
Red
#cccccc
20%
#cccccc

Alerts

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.

Typography

48px SemiBold page title

Default

30px SemiBold page title

24px SemiBold page title

18px SemiBold page title

Hover state

30px SemiBold page title

24px SemiBold page title

18px SemiBold page title

Body text

18px Regular body copy - Donec ornare lobortis mauris id tempus. Ut placerat nisi at arcu pellentesque, ac tempor eros viverra. Aliquam nisl turpis, cursus sed cursus porta, sagittis nec sem. Vestibulum et felis elit.

Body text

18px Regular body copy - Donec ornare lobortis mauris id tempus. Ut placerat nisi at arcu pellentesque, ac tempor eros viverra. Aliquam nisl turpis, cursus sed cursus porta, sagittis nec sem. Vestibulum et felis elit.

Body text small

18px Regular body copy - Donec ornare lobortis mauris id tempus. Ut placerat nisi at arcu pellentesque, ac tempor eros viverra. Aliquam nisl turpis, cursus sed cursus porta, sagittis nec sem. Vestibulum et felis elit.

Body text small

18px Regular body copy - Donec ornare lobortis mauris id tempus. Ut placerat nisi at arcu pellentesque, ac tempor eros viverra. Aliquam nisl turpis, cursus sed cursus porta, sagittis nec sem. Vestibulum et felis elit.

Bullet lists

  1. 18px/16px bullet list
  2. 18px/16px bullet list
  3. 18px/16px bullet list
  1. 18px/16px bullet list
  2. 18px/16px bullet list
  3. 18px/16px bullet list

16px lists

Buttons

Default
Hover
Button
Button

Link to page

Primary Large
Default Large
Primary
Default
Secondary (Default)
Secondary (Default)
Navigation Button
Navigation Button

Load more content

See more
See less

Admin tools

edit Create Settings
edit Create Settings

CTA

20 comments thumb_up10 likes 20 thumb_up10
Advanced Search
20 comments thumb_up10 likes 20 thumb_up10
Advanced Search

Forms

Pagination

1 2 3 4 5
1 2 3 4 5

Filters

Tabs

Standard tab panel created on bootstrap using nav-tabs

This is the content

Notice the gap between the content and tab after applying a background color

This is the content

add clearfix to tab-content (see the css)

This is the content

Form Elements

Checkboxes & Radios

CheckboxRadio (no JS)

Default example

Default example (other icon)

Font awesome example

Font awesome example (other icon)
Works best with square icons =)

Any size you want depending on label font-size

Radio

Default example

Default example (other icon)

Font awesome example

Font awesome example (other icon)
Works best with square icons =)

Any size you want depending on label font-size

Toggle switchers

Do you want to proceed?

Example of form

Search form

Inline elements

Form Errors

Title

This is the main description

Error goes here
Error goes here
Error goes here
Error goes here
Error goes here
Error goes here
Error goes here

Title

This is the main description

Error goes here
Error goes here
Error goes here
Error goes here
Error goes here
Error goes here
Error goes here

Inline elements (with errors)