Site User Guide

Your type standards, color themes, and site tutorials

Tutorials

General Squarespace Basics

About Your Site Build

Articles and Resources

Type Styles

Header 1

Header One

Header One Bold
Header One Italic + Bold

Header 2

Header Two

Header Two Bold
Header Two Italic + Bold

Header 3

Header Three

Header Three Bold
Header Three Italic + Bold

Header 4

Header Four

Header Four Bold

Header Four Italic + Bold

P1 — Large

When the left tire mark goes up on the curb and the right tire mark stays flat and even? Well, the '64 Skylark had a solid rear axle, so when the left tire would go up on the curb, the right tire would tilt out and ride along its edge. But that didn't happen here.

P2 — Body

The tire mark stayed flat and even. This car had an independent rear suspension. Now, in the '60's, there were only two other cars made in America that had positraction, and independent rear suspension, and enough power to make these marks.

P3 — Small

One was the Corvette, which could never be confused with the Buick Skylark. The other had the same body length, height, width, weight, wheel base, and wheel track as the '64 Skylark, and that was the 1963 Pontiac Tempest.

P1 — Bold + Italics

Your Site Subheader (Also applied to all headings if bold + ITalic)

Buttons

Primary Button

Learn more

Secondary Button

Learn more

Tertiary Button

Learn more

Note: Whenever you add a brand new button element to your site, you will need to “Edit” > “Design” > set layout to “Fit”

Color Themes

Theme colors

These come from your site's color palette in Design → Colors. Change them there and they update everywhere automatically.

Brand colors

Set in the site's custom code. Changing one of these requires a code update.

Click any color to copy its hex code.

White 1

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
White 2

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Light 1

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Light 2

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Bright 1

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Bright 2

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Dark 1

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Dark 2

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Black 1

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary
Black 2

Heading sample

Paragraph line to test contrast and legibility.

Primary
Secondary
Tertiary

Section Styles

Section styles are special design classes built into this site. To apply one, add a Markdown block anywhere inside the section and type the following exactly:

Section Styles codeword

Replace codeword with the class name from this guide. You can apply multiple styles by separating them with a space:

Section Styles top-border full-vh

Markdown blocks are invisible on the live site — they only affect styling behind the scenes. Do not delete them or the style will stop working.

Layout + Display

full-vh Desktop + Mobile

Forces the section to fill the full height of the viewport. Used on your cover page. Good for any hero section you want to take up exactly one screen.

top-border Desktop + Mobile

Adds a 1px black line along the top edge of the section. Use to visually separate sections without extra spacing.

bottom-border Desktop + Mobile

Adds a 1px black line along the bottom edge of the section.

split-image-hero Desktop + Mobile

Insets an image block so it appears slightly smaller than its container, with a visible margin on all sides. Creates a framed, gallery-style image treatment. Used at the top of your About page. The image adjusts slightly on mobile to stay proportional.

background-image-right Desktop + Mobile

Shifts the section's background image to the right half of the screen on desktop, leaving the left side clear for text content. On mobile, the image is centered and reduced in height so text remains visible below it.

Typography

xl-h1 Desktop + Mobile

Makes the H1 heading larger than the default size — 3rem on desktop and 2.2rem on mobile. Use for hero or statement headings that need extra visual weight.

text-center-mobile Mobile only

Centers all text in the section on mobile screens only. Has no effect on desktop. Useful when a left-aligned layout looks unbalanced on a narrow screen.

portfolio-list Mobile only

Forces large paragraph text (P1) to align left on mobile. Used in the second section of your portfolio pages. Use on sections where centered text would push list-style content off-balance.

Buttons

button-center-mobile Mobile only

Centers button blocks on mobile only. Has no effect on desktop. Pair with text-center-mobile when you want both text and buttons to center on small screens.

Sticky sections

Sticky sections stack on top of each other as you scroll, creating a layered reveal effect. To set this up, go to each section's settings, open the Advanced tab, and enter the Section ID in order — sticky-one on the first section, sticky-two on the second, and so on. Each ID can only be used once per page. Sections labeled bottom stay pinned while sections labeled top slide over them.

sticky-one Bottom layer
sticky-two or sticky-start Slides over sticky-one
sticky-three Bottom layer
sticky-four Slides over sticky-three
sticky-five Slides over sticky-four

Sticky sections only activate on desktop. On mobile they scroll normally.