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?
06.
Resources
FONTS
COLORS
Color Generator: coolers.co
Color Generator (upload image): Canva
color.adobe.com
contrast-ratio.com
Color Generator: colormind.io
w3schools.com
