Web Training + Brand Key
Web Guidelines
On this page you will find a collection of page-by-page video tutorials, development backups, brand color and font keys, and a style guide for unique Squarespace elements that have been custom coded for you and your website. If you get stuck and need help, first review the Squarespace Video Tutorials for guidance. If you still need help, feel free to reach out via email at mayanormandi@gmail.com.
Web Dev
BACKUP FILES
(Includes Page, Header + Footer Injections and page-specific Code Blocks)
Colors
Color Codes
Butter - #FBFCEF
Simmer - #EEF3F0
Spirulina - #141768
Carrot - #F9A505
Robin Egg - #C6E4F5
Zest - #D1F9A3
Oats - #FAF4E6
Acidity - #E5D31C
Kale - #1B3C35
Fonts
BRANDED FONT STYLING
H1 - Header
H2 - Subheader
H3 - Accent
Paragraph 1 - Body
Paragraph 2 - Body
Paragraph 3 - Body, Small
H4 - Small Header
ALTERNATIVE FONT STYLING
H1 Bold - Header, Large
H2 Bold - Subheader, Large
H3 bold - h2 subheader
H3 bold, italic - accent, Small
P Bold - h3 accent
P Bold, Italic - Body, Small
P3 Bold - Body, X-Small (aka caption)
Images + Galleries
Image Blocks
Image Block Alignment — Click once on image, and select the second button (with arrow icons) to set horizontal alignment.
left Aligned,
No Link
Becomes draggable, and has negative left-margin on mobile.
Center Aligned
Default, normal image.
Right Aligned,
No link
Becomes draggable, and has negative right-margin on mobile.
Gallery Blocks, Slideshow
Transparent Background — The left option below is the Slideshow default, with an Acidic Box Shadow and a Blueberry outline on the active slide. For the Inverse color combination, double click the gallery block, navigate to the Design tab, and check the “Transparent Background” option.
Default
Box shadow is Acidic Color, while the Active Slide has a Blueberry outline.
Transparent Background
Box shadow is Blueberry, while the Active Slide has an Acidic outline.
Gallery Blocks, Carousel
Active Alignment — Double click gallery block, navigate to the Design tab, and select the “Active Alignment” Dropdown. Center is default, and will create a gallery with no spacing between elements, and no border color.
***NOTE*** — Carousel Gallery Blocks must be built in the Classic Editor in order to display correctly, and allow for manual adjustment of block height. Please refer to the video mentioned in the Home Page tutorials description for more detail.
left Aligned
Height decreases, spacing added between slides (see above video for FE spacing notes).
Right Aligned
Height decreases, spacing added between slides, and acidic background color added (see above video for FE spacing notes).
Auto-List Sections
AutoList Section, CAROUSEL
Infinite Scroll
When an Auto-List Section has been implemented as a carousel, with Infinite Scroll enabled, it will be set to auto-play and auto-loop (only visible on the front-end, not while editing on the back end).
Examples — Home Page portfolio gallery + logo gallery.
Summary Blocks
BLOG SUMMARY, CAROUSEL
# Counter feature
The blog carousel summary ***can only be used*** for the # counter feature. Header text must be set as “number-counter” and blog excerpt settings should follow instructions found here (pw: h38ns9f3). Please refer to video above for details.