My Website Style Guide

Colors

Red

HEX #ff0000

RGB(255,0,0)

Yellow

HEX #ffff00

RGB(255,255,0)

cyan

HEX #00FFFF

RGB(0,255,255)

Green

HEX #008000

RGB(0,128,0)

Blue

HEX #0000FF

RGB(0,0,255)

DeepPink

HEX #FF1493

RGB(255,20,147)

Fonts

Open sans

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.

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.

Roboto

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.

Lato

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.

Alegreya

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Font-weight: 700 (bold)
  • Font-size: 26px
  • Font-family: Roboto

H2: Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Font-weight: 500
  • Font-size: 18px
  • Font-family: Poppins

P: Paragraph text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Font-weight: 400 (regular)
  • Font-size: 14px
  • Font-family: Alegreya