{Client Name} Web Style Guide
Color Palette
Primary
#HEX
Secondary
#HEX
Accent
#HEX
Background 1
#HEX
Background 2
#HEX
Background 3
#HEX
Light Overlay
#HEX
Dark Overlay 1
#HEX
Dark Overlay 2
#HEX
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text
#HEX
Typography
Lorem Ipsum Dolor
Heading 1 (Page Titles) | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Heading 2 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Heading 3 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Heading 4 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Heading 5 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Heading 6 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Title 1 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem Ipsum Dolor
Title 2 | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lead Paragraph | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Paragraph | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Small Text | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Lorem ipsum dolor sit amet.
Accent Text | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit.
- Proin gravida dolor sit amet lacus accumsan
- Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit.
- Proin gravida dolor sit amet lacus accumsan
- Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
Lists | Font: XXX / Weight: XXX / Size: XXpx / Line Height: XXem / Color: #XXXXXX
Buttons & Links
Primary Button
Secondary Button
Big Link
Medium Link
Regular Link
Primary Button
Secondary Button
Big Link
Medium Link
Accessible Buttons
There needs to be a visible change on hover & focus. Color change is not sufficient. Pick one variation from the options below for each client.
Underline
Knockout
Fill
Grow
Float
Icon
Border
All Corners
1 Corner
Forms
Inquire Now
Required fields are denoted with an asterisk (*).
Panel Examples
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.
