Style Guide

Here are some examples of formatting styles used in your template and how to achieve some of the special effects used throughout the website.



Color Palette

#ff0080 is hot pink. It is used in headers, buttons and links.
#2a3f66 is medium blue. It is used in the pre-footer.
#172a45 is dark blue. It is used in the footer.

 

Font

"Proxima Nova" is used for body text.
"Permanent Marker" is used for header text.

Fonts can be changed by going to Design > Style Editor

 

Header 1

This is what a Header 1 looks like.

 

 

Header 2

THIS IS WHAT A HEADER 2 LOOKS LIKE.

 

Header 3

THIS IS WHAT A HEADER 3 LOOKS LIKE.

 

Links

This is what a link looks like.

 

Banners

Banners exist at the top of most pages. You can edit the photo inside the banner by clicking Edit. 

The text style in the banner is achieved by using this combination of formatting:

[normal] WE SEEK [/normal]

[bold] GIRLS WITH GRIT [/bold]

[link] Know One? [/link]

 

Squarespace automatically detects when you're using Normal, Bold or Link and styles each piece accordingly. This will only apply to the banners, and not body copy.

 

Quotes

Quotes are part of Squarespace's block menu. To add a quote, click on an insertion point and click Quote. A quote looks like this:

When I became a man I put away childish things, including the fear of childishness and the desire to be very grown up.
— C. S. Lewis