My Website Style Guide

logo

Colors

Dark Blue

#2d5dcc

Moderate-Cyan

#d957d9

Cyan

#81e9e6

Color types

We have three main categories of color, which are Primary, Secondary and Tertiary. Primary colors are Red, Blue and Yellow. Secondary colors are obtained by equaly mixing primary colors.We get Purple, Orange and Green. Tertiary colors we obtain by combining Primary with Secondary.

Color Terminology

Hue- represents the dominant color in a color family. For example pure red, pure green , pure yellow and so on....

Tint- is when you add white to a pure color.

Shade- is mixing a pure color with black.

Tone- is when you mix a pure color with a grey.

Saturation-determines how rich or how dull a color is.

Brightness-tell you if a color is closer to white or closer to black in the color scale.

Temperature-tells us if a color is warm or cold.

CMYK-stands for cyan,magenta,yellow, black and to create colors this model uses what's called subtractive mixing.This model is mostly used for printing.

RGB-stands for red, green, blue and it uses additive mixing of light to create different colors.When overlapping red, green, and blueat full brightness, we get white and this is how screens work.

stands for hue, saturation and brightness. This uses a mix of these three attributes to create different colors.

Hexadeciaml(HEX)-is a friendlier way of displaying RGB colors because the first two letters/ numbers refer to red ,the next two refer to green and the last two refer to blue.

Fonts

Source Code Pro

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.

Nunito 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.

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

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

H2: Subheading

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

P: Paragraph text

  • Font-weight: 400 (regular)
  • Font-size: 18px
  • Font-family: Poppins