Style Guide

Colors

Monochromatic Palette

Navy Blue

hsl(223, 62%, 31%)

header
hero section
footer

Light Blue

hsl(223, 100%, 78%)

accent color
span elements
section background
hover state

Medium Blue

hsl(223, 89%, 64%)

accent color
primary buttons
links

Indian Red

hsl(0, 53%, 58%)

accent color
secondary buttons

Font Colors For The Backgrounds

Off White

hsl(0, 0%, 95%)

Black

hsl(0, 0%, 5%)

Black

hsl(0, 0%, 5%)

Off White

hsl(0, 0%, 95%)

Fonts

Lato

I want to know how to build beautiful and functional websites.

Frank Ruhl Libre

I want to know how to build beautiful and functional websites.

Open Sans

I want to know how to build beautiful and functional websites.

Text Styles

Headers:

<h1>

use it only for the title of the page

font-weight: 700
font-size: 32px
font-family: Lato

<h2>

use it for headings - major sections of the page to draw user's attention

font-weight: 700
font-size: 24px
font-family: Lato

use them for subheadings - smaller focal points, such as articles, to make user notice them, when scanning the page

font-weight: 500
font-size: 21px
font-family: Frank Ruhl Libre

Paragraphs:

<p>

font-weight: 400
font-size: 16px
font-family: Open Sans

Buttons

Flat design

Primary Button Styles

Secondary Button Styles

Learn More Learn More

Skeuomorphic design

Learn More Learn More

Flat Buttons Facts

simpler in design
rectangles, rounded rectangles or circles
visually distinct from other elements
have specific, descriptive labels

Important! Buttons should make use of :hover and :active states and the cursor: pointer declaration.

Skeuomorphic Buttons Facts

imitate a real- life button
‘raised’ appearance while unpressed, a ‘pressed’ appearance when clicked
CSS styles are preferred over images
use of hover and/or active states is important

↑ Back to top