My Website Style Guide

Colors These colors will be used in the background for various sections of the web application.	Header/Buttons #6673FC
	Sections #EEF1F5
	Buttons #46D7EA
	Footer #222C3C

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.

Fonts

These fonts will be used for the headings and content area of the web application.

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.

Text Styles

These text styles will be used along with the fonts for the web application.

H1: Main Heading

font-family: 'Poppins', sans-serif;
font-size: 28.8px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;

A: Navigation

font-family: 'Poppins', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
padding: 5px;
color: #FFFFFF;

H3: Section Heading

font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 18px;
text-align: center;
color: #3A405B;

P: Paragraph Text

font-family: 'Roboto', sans-serif;
font-size: 16px;
text-align: center;
color: #6E6767;

P: Footer Text

font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
text-align: right;
color: #FFC000;

border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
padding: 10px 14px 10px;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgb(0, 0, 0, 0.18);

Buttons

These buttons will be used throughout the web application.

font-family: 'Poppins', sans-serif;
background-color: #6673fc;
border: 1px solid #6673fc;
color: #FFFFFF;

font-family: 'Roboto', sans-serif;
background-color: #46D7EA;
border: 1px solid #46D7EA;
color: #FFFFFF;