Website Design System

Amber

#FF7E00

Android Green

#B0BF1A

Persian Plum

#662200

Maya Blue

#7CB9E8

Sea Green

#3B7A57

Maroon

#800000

Almond

#EFDECD

Deep Saffron

#FF9933

Light Salmon Pink

#FF9999

Sapphire

#0044CC

Lincoln Green

#0D4D00

Deep Carmine

#AB274F

Colors

Few of my favourite colours. I intend to use variant of them mostly with navigations and menus. I will also refer to a color wheel to identify complementary colors. Mostly I will incorporate these primary rules and guidelines that surround color and its use in creating aesthetically pleasing visuals, thereby evoking a particular emotion, vibe, or aesthetic.

I want to also be more intentional in creating visuals that make an impact. Using primary colors as my parent colors, anchoring my design in a general color scheme.

I want to be able to use the color wheel which gives me opportunities to create brighter, lighter, softer, and darker colors by mixing white, black, and gray with the original colors.

Font Guide
Font Name	Style	Sample Text
Roboto	Weight 300 - light	The quick brown fox jumped over the lazy dog
	Weight 400 - italics	The quick brown fox jumped over the lazy dog
	Weight 700 - Bold	The quick brown fox jumped over the lazy dog
Nunito Sans	Weight 300 - light	Build it step by step, you are almost there
	Weight 300 - italics	Build it step by step, you are almost there
	Weight - 600 semi-bold	Build it step by step, you are almost there
Marck Script	Weight 400 - regular	Quotes help to butress our inner thoughts
Various font choices intended to use the Roboto for Headers, navigations. The Nunito Sans for paragraphs and any other elements I deem fit. The Marck script is meant for quotes and to isolate any element that I want to stand out.

Font Styles

H1: Main Heading

font-family: Roboto;
font-Weight: 700;
font-size: 30px;

H2: Sub-heading

font-family: Roboto;
font-Weight: 400;
font-size: 25px;

p: Paragraph Text

font-family: Nunito Sans, sans-serif;
font-Weight: 300;
font-size: 14px;