Corpus Christi Carmelites

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 secondary, and tertiary colors.

PRIMARY – Dark
#663300

SECONDARY – Medium
#996633

Tertiary – Accent
#BB9966

FONT – Black
#000000

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

Anton

Heading Two

45px

Anton

Heading Three

35px

Anton

Heading Four

27px

Anton

Body

20px

Inter

Body

18px

Inter

Button & Meta

14px

Inter

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 Button 1

Regular Button 2

Regular Button 3

Regular Button 4

Social Media

Social Media Follow 1

Social Media Follow 2

Social Media Follow 3

Corpus Christi Carmelites