Web Design Style Guides

Love it or hate it. Just Do It.

Because consistency is key to connecting with customers

Why it's so Important

A Web Design Style Guide - an extension of your Brand Style Guide - is a set of standards for communicating your brand online.  It is the foundation for guiding clear, consistent, and professional messaging, and it will pay dividends over the long run.  At a minimum, it includes your logo, color palette, and typography - but it can also include so much more.Below are some examples and resources to help you get started.
01.

Logo

MediaLyon

Font: Patua One
Font-Size: 60px
Font-Weight: 500

02.

Color Pallette

#D76C36
rgb(215,108,54)

#1C2329
rgb(28,35,41)

#3F4A52
rgb(63,74,82)

#2A363F
rgb(42,54,63)

#85C724
rgb(133,199,36)

#7F868C
rgb(127,134,140)

#F3F3F3
rgb(243,243,243)

#FFFFFF
rgb(255,255,255)

03.

Typography

Primary

Family: Roboto, Size: 60px, Weight: 600

The quick brown fox jumps over the lazy dog

Secondary

Family: Roboto Slab, Size: 60px, Weight: 400

The quick brown fox jumps over the lazy dog

Text

Family: Roboto Slab, Size: 60px, Weight: 500

The quick brown fox jumps over the lazy dog

Accent

Family: Roboto, Size: 60px, Weight: 600

The quick brown fox jumps over the lazy dog

Fallback Font Family

Sans-serif

H1

Family: Source Serif Pro, Size: 70px, Weight: 700

The quick brown fox jumps over the lazy dog

H2

Family: Source Sans Pro, Size: 50px, Weight: 500

The quick brown fox jumps over the lazy dog

H3

Family: Montserrat, Size: 24px, Weight: 500

The quick brown fox jumps over the lazy dog

H4

Family: Roboto Slab, Size: 20px, Weight: 500

The quick brown fox jumps over the lazy dog

H5

Family: Roboto, Size: 16px, Weight: 500

The quick brown fox jumps over the lazy dog

H6

Family: Roboto Slab, Size: 12px, Weight: 500

The quick brown fox jumps over the lazy dog
05.

Forms

HOW CAN WE HELP YOU TODAY?

Sans serif fonts

Ariel

Fjalla One

Lato

Montserrat

Open Sans

Oswald

Noto Sans

Poppins

Raleway

Roboto

Source Sans Pro

Serif fonts

Baskervville

Lora

Merriweather

Playfair Display

PT Serif

Source Serif Pro

Spectral

Times New Roman

Display fonts

Abril Fatface

Raleway

Montaga

Cursive fonts

Pacifico

Top Font Pairings

PT Sans Narros

+

Open Sans

Noto Sans

+

Fjalla One

Merriweather

+

Lato

Open Sans

+

Roboto

Cinzel

+

Raleway