Website Brand Elements

Helvetica Neue. This is Heading 1

This is italicized in Swear Display Cilati

This is Heading 2

This is Heading 3

This is Heading 4

DOWNLOAD FONT
Screenshot of a font editing settings panel for Helvetica Neue, showing options for style, weight, line height, letter spacing, text transform, and different heading sizes with adjusted rem values.

Lato. This is paragraph 1. Used sparingly.

This is paragraph 2. Used for most paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

This is paragraph 3. Used for meta descriptions, such as categories.

DOWNLOAD FONT
Screenshot of a font editing interface showing settings for a font named Lato, including style, weight, line height, letter spacing, and paragraph sizes.
A color palette featuring five sample colors and a large color gradient box. The colors from left to right are white, beige, lavender, dark teal, and purple. The selected color in the gradient is a shade of blue with the hex code #F3EFFB.
Color palette with five swatches: light purple, beige, lavender, dark teal, purple, and a color selection with a violet hue in a color picker.
Digital color palette with shades of purple, gray, and blue, and a large gradient square displaying a purple to black gradient. The selected color is #CDB2E2, a light lavender shade.
Color palette and a color selection tool displaying the hex code #415B6C, showing various shades of purple and blue.
Color palette with five shades, from light purple to dark purple, and a larger square displaying a gradient of purple shades, with the color code #825086.
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON

For headlines in the first hero section, use heading 1. Edit

WEBSITE BRANDING
Style Guide

Pair paragraph 2 with heading 1 to create clear type hierarchy. Hierarchy, while it carries the connotation of what is important, this is helpful for website visitors as the scan through your website. And for screen readers and keyboard users, the hierarchy helps them navigate the site with ease.

Edit

A group of people participating in a yoga class in a bright studio with large windows overlooking green hills. They are in various yoga poses on mats while a person in a purple top stands in the center smiling.

Anything after the first section, use heading 2. This will help with SEO.

How so you might ask. Each style of text has a text tag. Text tags help Google understand your page structure and content hierarchy, improving how search engines read and categorize your pages.

H1: Use only ONE per page for your main headline

Never use H1 tags in site-wide elements that appear on every page, like your header or footer

Squarespace automatically assigns text tags.

Maintain logical hierarchy: H1 → H2 → H3 for proper content structure

Learn more