What font does Squarespace use?

Squarespace’s website uses four typefaces: Clarkson (headings and body text), served from media-www.sqspcdn.com; Noto Sans JP, served from media-www.sqspcdn.com; Noto Sans KR, served from media-www.sqspcdn.com; Clarkson Serif, served from media-www.sqspcdn.com.

What are Squarespace’s brand colours?

The main colours on squarespace.com are Steel Blue (#087BB5), Dark Slate Grey (#1E4C41), Medium Slate Blue (#7B61FF), White (#FFFFFF), Black (#000000) and Near Black (#1A1A1A).

What colour is Squarespace’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Squarespace’s logo from?

The logo shown in this guide was found on squarespace.com’s homepage. For official logo files and usage rules, check Squarespace’s own brand or press page.

Is this Squarespace’s official style guide?

No. SiteStyleGuide made it from squarespace.com’s public web pages on 25 October 2026, and isn’t affiliated with Squarespace. Members can refresh a guide after 90 days to pick up changes.

Squarespace Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Website Builder – Easily Create Your Own Website — Squarespace; ▲ 62 / 60 characters
Meta description: Create a website and grow your business with a free Squarespace trial. Start with customizable website templates, AI website builder tools, or a domain name.; ● 157 / 160 characters
Site name: Squarespace
og:title: Website Builder – Easily Create Your Own Website — Squarespace
Language: en-US
Theme colour: white

In search results

Squarespacehttps://www.squarespace.com/

Website Builder – Easily Create Your Own Website — Squarespace

Create a website and grow your business with a free Squarespace trial. Start with customizable website templates, AI website builder tools, or a domain name.

When shared

squarespace.com

Website Builder – Easily Create Your Own Website — Squarespace

Create a website and grow your business with a free Squarespace trial. Start with customizable website templa…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 208 × 30.

Logo

On white

On black

On Steel Blue

Favicons

8 found

1024 px · PNG apple-touch-icon
300 px · PNG icon
180 px · PNG apple-touch-icon
167 px · PNG apple-touch-icon
152 px · PNG apple-touch-icon
128 px · ICO icon
120 px · PNG apple-touch-icon
32 px · ICO dark-mode-icon

Website Builder – Easily Create Your Own Website — Squarespace

Light browser tab

Website Builder – Easily Create Your Own Website — Squarespace

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 46.1%
Black 44.7%
Near Black 4.3%
Off White 2.7%
Steel Blue 1%
Dark Slate Grey 0.9%
Medium Slate Blue 0.5%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Text, background, theme · .cta--primary.cta--light, .cta--primary-subtle.cta--light
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, text · .cta--primary, .cta--primary-subtle
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 90

On text
1.21:1 Fail

On white
17.40:1 AAA

Background, text · #footer .footer__locale-setting-button, .global-navigation__account-dropdown
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 12

On text
15.91:1 AAA

On white
1.32:1 Fail

Background, border · .accordion-headline__item:before, .faq__accordion-item:before

Colours

Brand colours and accents, most used first

Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
96 32 0 29

On text
4.51:1 AA

On white
4.66:1 AA

Border · .cta:focus-visible, --color-focus
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
61 0 14 70

On text
2.17:1 Fail

On white
9.70:1 AAA

Background · .global-navigation .global-navigation__account-avatar, .global-navigation__launchpad-avatar
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
52 62 0 0

On text
5.00:1 AA

On white
4.20:1 AA large

Background · .grid-overlay__column

Gradients

linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor)
linear-gradient(-45deg, #000 , #fff0 )
linear-gradient(#1a1a1a 0%,#1a1a1a00 100%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Clarkson

Aa 300 Aa 500

Clarkson

Served from media-www.sqspcdn.com · weights 300, 400, 500 · headings · shown in a stand-in if you don’t have it

Aa 300 Aa 500

Noto Sans JP

Served from media-www.sqspcdn.com · weights 300, 400, 500 · headings · shown in a stand-in if you don’t have it

Aa 300 Aa 500

Noto Sans KR

Served from media-www.sqspcdn.com · weights 300, 400, 500 · headings · shown in a stand-in if you don’t have it

Aa 300 Aa 500

Clarkson Serif

Served from media-www.sqspcdn.com · weights 300, 400, 500 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 clamp(24px,1.27143rem + 1.14286vw,32px) · 32 px weight 400 · Noto Sans KR

Squarespace

Heading 2 clamp(20px,.964286rem + 1.42857vw,30px) · 30 px weight 400 · Noto Sans KR

Website Builder – Easily Create Your Own Websit…

Heading 3 clamp(18px,.839286rem + 1.42857vw,28px) · 28 px weight 400 · Noto Sans KR

Website Builder – Easily Create Your Own Websit…

Paragraph clamp(16px,.964286rem + .178571vw,18px) · 18 px weight 400 · Noto Sans KR

Create a website and grow your business with a free Squarespace trial. Start with customizable website templates, AI website builder tools,…

Small 80%

Create a website and grow your business with a free Squarespace trial. Start with customizable website templates, AI website builder tools,…

Sizes in use

Most common across the site

64pxline 1.04 · 1 rules
18pxline 1.2 · 3 rules
16pxline normal · 3 rules
15pxline 1.4 · 3 rules
14pxline 1em · 10 rules
12pxline 1.4 · 2 rules
10pxline 140% · 2 rules
8px2 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.cta--primary · #000000 · radius 4px

Corner radius

8px · 15×
4px · 13×
30px · 6×
50% · 5×
100px · 4×
16px · 3×

Shadows

0 12px 20px #00000024,0 36px 32px -4px #00000012
0 0 0 2px #d83b2b
0 23px 14px #0000000d,0 10px 10px #00000017,0 3px 6px #0000001a
0 134px 80px #0000000d,0 60px 60px #00000017,0 15px 33px #0000001a

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Content widths (max-width)

365 px

300 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

▲ CheckThe title is 62 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Squarespace use?: Squarespace’s website uses four typefaces: Clarkson (headings and body text), served from media-www.sqspcdn.com; Noto Sans JP, served from media-www.sqspcdn.com; Noto Sans KR, served from media-www.sqspcdn.com; Clarkson Serif, served from media-www.sqspcdn.com.
What are Squarespace’s brand colours?: The main colours on squarespace.com are Steel Blue (#087BB5), Dark Slate Grey (#1E4C41), Medium Slate Blue (#7B61FF), White (#FFFFFF), Black (#000000) and Near Black (#1A1A1A).
What colour is Squarespace’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Squarespace’s logo from?: The logo shown in this guide was found on squarespace.com’s homepage. For official logo files and usage rules, check Squarespace’s own brand or press page.
Is this Squarespace’s official style guide?: No. SiteStyleGuide made it from squarespace.com’s public web pages on 25 October 2026, and isn’t affiliated with Squarespace. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

squarespace-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* squarespace.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/squarespace.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-near-black: #1A1A1A;
  --colour-off-white: #E0E0E0;
  --colour-steel-blue: #087BB5;
  --colour-dark-slate-grey: #1E4C41;
  --colour-medium-slate-blue: #7B61FF;
  --gradient-1: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  --gradient-2: linear-gradient(-45deg, #000 , #fff0 );
  --gradient-3: linear-gradient(#1a1a1a 0%,#1a1a1a00 100%);

  /* Typefaces */
  --font-headings: 'Clarkson', 'Helvetica', sans-serif;
  --font-other: 'Clarkson Serif', 'Helvetica', sans-serif;

  /* Type scale */
  --text-h1: clamp(24px,1.27143rem + 1.14286vw,32px);
  --text-h2: clamp(20px,.964286rem + 1.42857vw,30px);
  --text-h3: clamp(18px,.839286rem + 1.42857vw,28px);
  --text-p: clamp(16px,.964286rem + .178571vw,18px);
  --text-small: 80%;

  /* Shape */
  --radius-1: 8px;
  --radius-2: 4px;
  --radius-3: 30px;
  --radius-4: 50%;
  --radius-5: 100px;
  --radius-6: 16px;
}

{
    "site": "squarespace.com",
    "source": "https://sitestyleguide.com/squarespace.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1A1A1A",
            "rgb": [
                26,
                26,
                26
            ]
        },
        {
            "name": "Off White",
            "hex": "#E0E0E0",
            "rgb": [
                224,
                224,
                224
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#087BB5",
            "rgb": [
                8,
                123,
                181
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#1E4C41",
            "rgb": [
                30,
                76,
                65
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#7B61FF",
            "rgb": [
                123,
                97,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Clarkson",
            "stack": "Clarkson, Helvetica, sans-serif",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        },
        {
            "name": "Noto Sans JP",
            "stack": "Noto Sans JP",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        },
        {
            "name": "Noto Sans KR",
            "stack": "Noto Sans KR",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        },
        {
            "name": "Clarkson Serif",
            "stack": "Clarkson Serif, Helvetica, sans-serif",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        },
        {
            "name": "Noto Serif JP",
            "stack": "Noto Serif JP",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        },
        {
            "name": "Noto Serif KR",
            "stack": "Noto Serif KR",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from media-www.sqspcdn.com"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run squarespace.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/squarespace.com" title="Squarespace style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Squarespacestyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Near Black

Off White

Colours

Steel Blue

Dark Slate Grey

Medium Slate Blue

Gradients

Clarkson

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

The Library of Congress

The New Yorker

Discovery

about.me

Squarespacestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Near Black

Off White

Colours

Steel Blue

Dark Slate Grey

Medium Slate Blue

Gradients

Clarkson

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run squarespace.com?

Similar colours

The Library of Congress

The New Yorker

Discovery

about.me

Title &
description