MGH Lawyers
Branding Guideline

Designed by HiViz Web Solutions | 2024

Site Logo

The Site Logo is the “brand” of the website that captures your business in a single graphic/visual. The Primary Logo always take preference. Where the Primary Logo can’t be used, the Secondary Logo will take its place.

Primary Site Logo

Secondary Site Logo

Site Icon

The Site Icon is the “bookmark” for your website as it appears in the browser tab.

Site Icon

Colour Palette

The Primary Colour is the main “look and feel” of your website and your business. The Secondary Colour(s) act to complement the Primary Colour.

It is recommended that the Primary Colour and Secondary Colour(s) complement the Site Logo and Icons for better design consistency.

Primary Colour

Primary

"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)

Secondary Colour(s)

Secondary

"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)

Tertiary

"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)

Background

"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)

Accent

"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)

Typography

Font Size generally conveys relative importance. The bigger the size of the font, the bigger its relative importance.

Font Colour generally highlights the purpose of the text. Primary and Secondary colours are used for Headings and supporting text. Text colour is used for body text, and Accent colour is used for Call-To-Action elements such as buttons. 

Font Styling generally follows the corresponding match in Font Colours.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading div
Heading span

Heading p

This is a Link. This is just normal Body Text.

This is another Link with underline.

This is a Link without link text colour.

This is a Link without link text colour but with underline.

Font Colours

Primary

Secondary

Text

Accent

Secondary Text on Primary

Secondary Text on Secondary

Secondary Text on Tertiary

Secondary Text on Quaternary

Secondary Text on Accent

Font Styling

Primary

Secondary

Text

Accent

Font Selection Approach: Think of the “theme” of the website. Is it scholarly, is it dynamic, is it minimalistic?

Primary and Secondary should be same Font Family, with Primary being bolder and perhaps Uppercase. Secondary is less bold and Normal.

Text should always be easy to read Font.

Accent should contrast Primary and Secondary and (only) used in buttons, so as to make them stand out even more. 

Buttons

In virtually every case, buttons are the element with which your website visitors interact with in order for them to take the desired Call-To-Action. 

The Primary Call-To-Action is the main “money-making” action you want your visitors to take. The Secondary Call-To-Action is (generally) anything that guides/encourages the visitor towards taking the aforementioned main action.

Primary Call-To-Action

Secondary Call-To-Action

Thank You

Designed by HiViz Web Solutions | 2024

System Colour
System Font

H1 H1 H1

H2 H2 H2

H3 H3 H3

H4 H4 H4

H5 H5 H5
H6 H6 H6

Text Text Text

System Colour
System Font

H1 H1 H1

H2 H2 H2

H3 H3 H3

H4 H4 H4

H5 H5 H5
H6 H6 H6

Text Text Text

Custom Colour
System Font

H1 H1 H1

H2 H2 H2

H3 H3 H3

H4 H4 H4

H5 H5 H5
H6 H6 H6

Text Text Text

System Colour
Custom Font

H1 H1 H1

H2 H2 H2

H3 H3 H3

H4 H4 H4

H5 H5 H5
H6 H6 H6

Text Text Text

Custom Colour
Custom Font

H1 H1 H1

H2 H2 H2

H3 H3 H3

H4 H4 H4

H5 H5 H5
H6 H6 H6

Text Text Text