My Website Style Guide

Colours

Blue Green

#85d2d0

Primary

Pink

#F1A8A7

Secondary

White

#FFFFFF

Background

Purple

#887bb0

Dark Accent

Lilac

#c3acce

Light Accent

Black

#000000

Main text

Fonts

Mochiy Pop One

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Cutive Mono

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Inter

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: Mainpage heading

  • Font-weight: 700 (bold)
  • Font-size: 36px
  • Font-family: Mochiy Pop One
  • Text-align: center

H2: Subheading

  • Font-weight: 400 (regular)
  • Font-size: 26px
  • Font-family: Cutive Mono
  • Text-align: center

P: Paragraph Text

  • Font-weight: 400 (regular)
  • Font-size: 16px
  • Font-family: Inter
A: nav-bar links
  • Font-weight: 400 (regular)
  • Font-size: 16px
  • Font-family: Inter
  • Text-transform: uppercase
  • Text-align: center
  • Font-weight: 400 (regular)
  • Font-size: 12px
  • Font-family: Inter
  • Text-align: center

Buttons

Disclaimer

I'm still learning so things may not be so ironed out yet. I appreciate any feedback anyways :)

Next I'll be learning Flexbox, Grid and more responsive design. Watch this space!