Style Guide
+
Resources
+
Style Guide + Resources +
Resources
Shared Google Drive
*Starts @ 2:40
Training + Site Walk Thru
*Select Closed Captions or Show Transcript if you want to read along.
*Basic Chapters in Description
Edit Pages + Sections
Squarespace Guide
Image Compressor
* keep images around 100kb (300kb for hero images)
QR Code in Canva
Social Links URL
*To replace Linktree in Social Media Bio
*Remember to update link in website footer too
Site Contact Forms
Website Contact Form
email notification sent to: rfv@cookinclusive.org
also stored in your Google Drive as: Website Contact Form Submissions
Newsletter Sign-Up Forms x2
1 in Footer
1 bottom of contact page
stored in Squarespace Contacts
Also stored in your Google Drive as: Cook Inclusive Email List
Style Guide
Graphics, Logo’s ETC
Cook Inclusive Logo
Inclusive Hands
Accent Circle
Favicon for Browser Tab
Fonts
Headings: Omnes-Pro
Paragraphs: Aktiv-Grotesk
Font Sizes
This is Heading 1
Heading 1 is used only for the heading at the top of each page
This is Heading 2
Heading 2 is used for all sections headings except for at the top of each page
This is Heading 3
This is Heading 4
Heading 4 is used only for the sub-headlines above the headline.
This is a paragraph 1
This is italics. This is bold. This is a link
This is a paragraph 2
This is italics. This is bold. This is a link
This is a paragraph 3
This is italics. This is bold. This is a link
Buttons
Primary Button
TURNS GREEN ON HOVER
➜
Primary Button is Dark Plum and is used for all Buttons except Donate Buttons
(turns green on hover and white on a dark background)
Secondary Button
TURNS TEAL ON HOVER
➜
Secondary Button is purple and is used for all Donate Buttons
(turns teal on hover and white on a dark background)
Color Themes
DARKEST 1
COLOR: Dark Plum Sky HEX CODE #3C333F
For: Quotes Blocks and Footer
Dark 2
COLOR: Teal Blue Dream HEX CODE #57C7BB
For: Subheadings, Accents Colors, Graphic Backgrounds, Secondary Button Hover Color
Bright 2
COLOR: Purple for All HEX CODE #814793
For: Main Brand Color, Text and Headings, Quote Blocks, Donate Button Color
Light 1
COLOR: Green Joy HEX CODE #E2FF8E
For: Accents Colors, Graphic Backgrounds, Primary Button Hover Color
Lighest 1
COLOR: White Clouds HEX CODE #FCFCFC
For: Majority of Sections, Text Color on Dark Background
Blog Pages + Blog Summary Blocks
News + Events Page
Contains 2 summary Blocks from 2 different blogs, plus added sections before and after the summary blocks. Details of each are listed below, followed by an example of each summary block.
2 blog pages to update
Blog Pages
1. News
2. Events
All blogs are updated on their individual blog pages.
Blog pages are displayed on your site's NEWS + EVENTS PAGE using blog summary blocks.
2 types of blog summary blocks (sections pulled from blogs)
Blog Summary Blocks
1. News - list style
2. Events - basic grid style
Blog Summary blocks are content from your blog pages pulled onto your NEWS + EVENTS PAGE
Blog Summary Block: News
Blog Summary Block: Events
