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)