Style Guide

A guide to design standards for Reef Ecologic brand.
3

Logo

Colours

AQUA

#3ac5ef

R58 G197 B239
C65 M0 Y4 K0

GREEN

#39b448

R57 G180 B72
C75 M0 Y100 K0

STEEL

#39464f

R57 G70 B79
C77 M62 Y52 K38

WHITE

#ffffff

R255 G255 B255
C0 M0 Y0 K0

Typography

General – Dark + Light

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold text dolor sit amet, consectetur sed do eiusmod tempor hovered ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea default link color consequat. Duis aute dolor in reprehenderit in voluptate eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Ordered List
  1. Item 1
  2. Item 2
  3. Item 3
Unordered List
  • Item 1
  • Item 2
  • Item 3

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold text dolor sit amet, consectetur sed do eiusmod tempor hovered ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea default link color consequat. Duis aute dolor in reprehenderit in voluptate eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Ordered List
  1. Item 1
  2. Item 2
  3. Item 3
Unordered List
  • Item 1
  • Item 2
  • Item 3

Special – Aqua + Green

Different coloured headings and bullet lists can be achieved by applying a CSS Class to the module. Note default link colour is aqua so CSS Class not required.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Here is a green link in text.

  • Excepteur sint occaecat
  • Dolore magna aliqua
  • Officia deserunt mollit anim
  • Consectetur sed do eiusmod
  • Excepteur sint occaecat
  • Dolore magna aliqua
  • Officia deserunt mollit anim
  • Consectetur sed do eiusmod

Buttons

Note that aqua button is default, green button requires CSS Class green in advanced tab on module.

This is default aqua button
This is green button

Imagery