Website Design System

Colors

Deep Sea Blue

Hex: #054950

This is used as a font color for lighter backgrounds.

Sea Blue

Hex: #789A9F

This is used as the secondary background color.

Jet Orange

Hex: #F78F1E

This is used as a font/background color for links and other interactive components.

Pale Sea Blue

Hex: #EDF4F5

This is the primary background color.

white

Hex: #FFFFFF

This is used as a font color on darker backgrounds and as some background colors too.

Fonts

Caveat

When to use

Caveat is used for h1-h3 elements

Styling

This font family is used in bold only or 700 if you want the number.

Sample text

"The quick brown fox jumps over the lazy dog"

M PLUS Rounded 1c

When to use

M PLUS Rounded 1c is used for the bulk of the page i.e, p elements and links. it is also used for some headings to but with a lower priorty over Caveat.

Styling

This font family is used in regular 400 and bold 700. This font family does not have an italic style but if needed most browsers will put the text on a slant if the em tag is used.

Sample text

"The quick brown fox jumps over the lazy dog"

Text Styles

Main heading

  • Font-family: Caveat
  • Font-size: 42px
  • Font-weight: Bold 700
  • Font style: Cursive

Sub headings

  • Font-family: Caveat or M PLUS Rounded (for less impotant sub headings)
  • Font-size: 32px, 22px or 18px(for M Plus)
  • Font-weight: Bold 700
  • Font style: Cursive or Sans-serif

p & a elements

  • Font-family: M PLUS Rounded 1c
  • Font-size: 16px
  • Font-weight: Regular 400 or Bold 700(for links)
  • Font style: Sans-serif