-
#3b3b3b
-
#525252
-
#6e6e6e
-
#ebebeb
-
#f9f5f3
-
#ffffff
-
#eb5630
-
#fabf99
-
#1c76b5
-
#d7edf6
-
#9abd47
web style guide
Color
Typography
tag | sample | use cases |
---|---|---|
h1 | Headline 1 | Brandon Grotesquie Bold 64pt Large, Initial Caps (one per page) |
h2 | Headline 2 | Brandon Grotesquie Bold 48pt Large, ALL CAPS (used sparingly, major header) |
h3 | Headline 3 | Brandon Grotesquie Bold 36pt Medium, ALL CAPS (frequently used sub headers) |
h4 | Headline 4 | Brandon Grotesquie Bold 28pt Small, ALL CAPS (cards titles, sidebar filer menu titles) |
h5 | Headline 5 | Brandon Grotesquie Bold 28pt Small, Initial Caps (Bottom of page copy heading) |
h6 | Headline 6 | Brandon Grotesquie Bold 32pt ALL CAPS (account page subheads, sidebar callouts) |
body | Food truck tumeric palo santo, gochujang brooklyn chartreuse wolf | PT Sans Regular 24pt All Body Copy |
Iconography
Buttons
Links
-
Menu Links
Gray, No underline
Dried Herbs
Hover State: Orange Underline
Usage Ex: top menu, mega dropdown, popular collections on HP -
Copy Links
Blue, no underline
Dried Herbs
Hover State: Blue underline
Usage Ex: Body copy, account pages, product page -
Sidebar Links
Gray, no underline
Dried Herbs
Hover State: Green, underline
Usage Ex: collection page sidebar, contact us page sidebar -
Minor Links
Gray, underline
Dried Herbs
Hover State: gray, underline, bolder
Usage Ex: Account pages “log out” “return to account details” “edit” “delete” “privacy policy”