A full guide to everything your website needs to look its best!
Header Styles
h1, h2, h3, h4, h5, h6
Font size
Color
Line height
Letter spacing
Body Styles
p, li, td, a
Font size
Color
Line height
Letter spacing
Color Palette
#000000 #ffffff
This should include a complete palette of all primary, secondary, and (possibly) tertiary colors, including hex codes.
Page Header w/ Menu
<header> <nav></nav> </header>
This is the full global header of the main website. Including logo, social icons, search bar, and of course - menu!
Page Header w/o Menu
<header></header>
Not all pages need a menu. Sometimes you just want the user to focus on the page their on. This item includes everything a header needs, except the nav.
Footer
<footer></footer>
The website's global footer includes all of your core secondary links and contact information.
Table Styles
<table></table>
Styles are set for tables used to show charts & data.
List Styles
<li></li>
Almost every website page is going to contain a list. This includes styles for both ordered and unordered lists.
Form Styles
<form></form>
Forms are marketing bread and butter. They're how you collect your leads, gather your applications, and get subscribers to your blog. Makes sure it is styled exactly how your users want it!
CTA Styles
<button></button>
CTAs are how you get your users to take that next step on their marketing journey. Make sure it catches their eye!
Accordion Styles
<div class="accordion"></div>
Sometimes your pages contain A LOT of information, and one of the best ways to prevent scroll fatigue is to give the user a unique drop-down experience. Make sure its a smooth transition!
Slider Styles
<div class="slider"></div>
Sliders are a fun & unique way to visually represent your organization. Sliders can contain images, text, videos, or a combination of all three.
Mobile Styles
@media (max-width: 767px) {}
A good looking site is great, but not if it's not optimized for use on your phone. Make sure all of the following has a mobile variant that is perfect for those on-the-go...
