Copper House Tavern Style Guide

When you have multiple web professionals working on one site, it’s important to consolidate all your design decisions into a single reference source. This helps to keep your vision consistent across all pages and elements.

In a nutshell, a web design style guide is a reference source where you collect and present all of the design decisions for your website. This includes its color scheme, typography, spacing, icons, imagery, and much more.

Colours

Color plays a vital part in how your website and your brand are perceived and remembered. Therefore, you’ll want to make sure to define your essential primary colors, usually a maximum of three

To complete your color palette, you’ll also need to include secondarytertiary,and neutral colors.

Brown/Copper
#A06734

Shaded Area
#A16733

Dark
#333333

White
#FFFFFF

Typography

Just like color, typography is an essential part of web design. To ensure yours is appealing and consistent throughout your website, you’ll need to create a typography hierarchy in your style guide.

Heading One

55px

Goudy Bookletter

Heading Two

45px

Goudy Bookletter

Heading Three

35px

Didact Gothic

Heading Four

27px

Didact Gothic

Body Bold

20px

Barlow

Body

18px

Barlow

Button & Meta

14px

Barlow

All In One

Heading One

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Four

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

Lorum ipsum dolor sit amet.

Buttons

Once your basic style definitions are in place, it’s time to introduce your main website components into your style guide. These concern the appearance, sizes, and states of buttons, form fields, form elements, navigation menus, notifications and alerts, cards, modals, and more.

Regular Text Button 1

Regular Text Button 2

Regular Button 1

Regular Button 2

Regular Button 3

Social Media

Social Media Follow 1

Social Media Follow 2

Social Media Follow 3

Social Media Follow 4