Style Guide (h1)

in hero image

Style Guide (h1)

Fonts (h2)

Headings (h3)

Font family: ‘Vollkorn’, serif;

Laptop:
h1 60px;
h2 42px;
h3 32px;
h4 24px;

Mobile:
h1 36px;
h2 28px;
h3 24px;
h4 22px; 

h1,h2, h3, h4 titles are always centered. 

Body (h3)

Font family: ‘Roboto’, sans-serif;

All screens
p 16px;
Footer “small print” 12px;

Align large paragraphs of text to the left for better readability. Exceptions: location details, daily specials, etc.

basic logo for Kaleafa dispensaries
The "Circle K" logo.

Colors

Pages

Site background: #FCFCFC; (this is the darkest gray that allows AA accessibility for red links)

Headlines: #0F0F0F;
Headlines on BG images: text-shadow: 0px 0px 10px #FF0303;
No text shadows on titles on light gray BG (in the body).

Body font: #737373; (minimum for AA accessibility with light gray background)

Links: #EA0029;
Links:hover: #3A3A3A;

Navigation

Font family: ‘Roboto”, sans-serif;
Font weight: 500;
Font size: 18px;
Text transform: uppercase;

Buttons

Location buttons BG: #2E2F30;
Location buttons text: #FFF;
Location buttons BG:hover: #3A3A3A;
CTA buttons BG: #EA0029;
CTA buttons text: #FFF;
CTA buttons BG:hover: #3A3A3A;

Border radius: 0;
Font weight: 600;
Padding: 12px 24px; (All buttons should fit content – not span full-width of their container. A good example of what not to do are the store Location, Rec Menu, and Med Menu buttons.)

Margins & Padding:

Boxed sections set to “Extended.” Columns and elements set to default.

Style option

Mimic the style of the embedded I Heart Jane ordering system.

I Heart Jane ordering system

Headings

SECTION TITLES

UPPERCASE #333333 (almost black)

Font-family: Overpass.

Slight box shadow on sections.

#6d6a6c on white background.

Share