Rizal's Website Design System

Colors

Off White

Color Codes:

  • Hex: #E3E3E3
  • RGB: 227, 227, 227
  • HSL: 0, 0, 89

Base colour that occupies a large portion of the website.

Gray

Color Codes:

  • Hex: #9FA5A6
  • RGB: 159, 165, 166
  • HSL: 188.6, 3.8, 63.7

Use this on areas that need to pop out from the background, but not draw too much attention.

Terracotta

Color Codes:

  • Hex: #BF7763
  • RGB: 191, 119, 99
  • HSL: 13, 42, 57

Used to support highlight/orange zones.

Orange

Color Codes:

  • Hex: #F5832C
  • RGB: 245, 131, 44
  • HSL: 26, 91, 57

Use this in areas of high interest.

Sand

Color Codes:

  • Hex: #F9CE8C
  • RGB: 249, 206, 140
  • HSL: 36, 90, 76

Used to support highlight/orange zones.

Fonts

Montserrat

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Poppins

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Text Styles

H1: Main page heading

H2: Subheading L1

H3: Subheading L2

P: Paragraph text

Extra Considerations

At the start of the website's design, ask yourself these questions: