What font does Weebly.com use?

Weebly.com’s website uses two typefaces: SQMarket-Medium (headings and body text), served from cdn11.editmysite.com; SQMarket, served from cdn11.editmysite.com.

What are Weebly.com’s brand colours?

The main colours on weebly.com are Light Royal Blue (#3374FF), Deep Royal Blue (#134DC7), Dodger Blue (#2990EA), White (#FFFFFF), Cool Charcoal (#2F3337) and Light Grey (#D4D5D6).

What colour is Weebly.com’s text and background?

Body text is #2F3337 on a #161B1F background.

Where is Weebly.com’s logo from?

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

Is this Weebly.com’s official style guide?

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

Weebly.com 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: Free Website Builder: Build a Free Website or Online Store | Weebly; ▲ 67 / 60 characters
Meta description: Weebly’s free website builder makes it easy to create a website, blog, or online store. Find customizable templates, domains, and easy-to-use tools for any type of business website.; ▲ 181 / 160 characters
Site name: Weebly.com
og:title: Weebly is the easiest way to create a website, store or blog
og:description: Weebly’s free website builder makes it easy to build a website, blog, or online store. Find customizable designs, domains, and eCommerce tools for any type of business using our website builder.
Language: en

In search results

Weebly.comhttps://www.weebly.com/au

Free Website Builder: Build a Free Website or Online Store | …

Weebly’s free website builder makes it easy to create a website, blog, or online store. Find customizable templates, domains, and easy-to-use tools for any type …

When shared

weebly.com

Weebly is the easiest way to create a website, store or blog

Weebly’s free website builder makes it easy to build a website, blog, or online store. Find customizable desi…

Back to top ↑

Logo & favicons

Found as: schema.org logo. PNG, 229 × 173.

Logo

On white

On black

On Light Royal Blue

Favicons

1 found

32 px · ICO favicon.ico

Free Website Builder: Build a Free Website or Online Store | Weebly

Light browser tab

Free Website Builder: Build a Free Website or Online Store | Weebly

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 (#2F3337) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 35.9%
Light Royal Blue 20.2%
Cool Charcoal 18.3%
Deep Royal Blue 7.6%
Dodger Blue 7.5%
Light Grey 5.6%
Grey 4.9%

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
12.73:1 AAA

On white
—

Text, background, border · .masthead-container, .customer-success .cta-section
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
15 7 0 78

On text
—

On white
12.73:1 AAA

Text, background, border · .section-heading-text, .masthead-title
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
1 0 0 16

On text
8.66:1 AAA

On white
1.47:1 Fail

Background, border · .slick-dots li.slick-active button:before, .business-community .business-community-scroller .slick-dots li button:before
Grey

HEX

RGB

HSL

OKLCH

CMYK
5 2 0 36

On text
4.82:1 AA

On white
2.64:1 Fail

Text · [data-icon-before]:before, input[type="color"]::-webkit-input-placeholder

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
80 55 0 0

On text
3.08:1 AA large

On white
4.13:1 AA large

Background, text, border · .masthead-sub-cta a, .themes-container .themes-heading-and-cta .button-container .primary-sign-up-but
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 61 0 22

On text
1.77:1 Fail

On white
7.21:1 AAA

Background, text, border · .masthead-sub-cta a:hover, .themes-container .themes-heading-and-cta .button-container .primary-sign-up-but
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
82 38 0 8

On text
3.80:1 AA large

On white
3.35:1 AA large

Background, text · .btn, .btn--secondary

Gradients

linear-gradient(to bottom, #2990ea 0%, rgba(41,144,234,0.5) 100%)
linear-gradient(to top, rgba(41,144,234,0.5) 0%, rgba(41,144,234,0) 100%)
linear-gradient(to bottom, #966e74 0%, #94647a 30%, #884f78 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.

SQMarket-Medium

Aa 500

SQMarket-Medium

Served from cdn11.editmysite.com · weights 500 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 500

SQMarket

Served from cdn11.editmysite.com · weights 400, 500 · headings · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px / 1.1em

Weebly.com

Heading 2 22px / 32px weight 500 · SQMarket-Medium

Free Website Builder: Build a Free Website or O…

Body 18px / 1.5

Weebly’s free website builder makes it easy to create a website, blog, or online store. Find customizable templates, domains, and easy-to-u…

Paragraph 16px / 28px weight 400 · SQMarket

Weebly’s free website builder makes it easy to create a website, blog, or online store. Find customizable templates, domains, and easy-to-u…

Button 14px / 44px weight 600 · none · brandon-grotesque

Get started

Link 14px weight 500 · none · SQMarket

Sizes in use

Most common across the site

96px1 rules
64px1 rules
62px1 rules
32pxline inherit · 8 rules
22pxline 32px · 3 rules
18pxline 24px · 3 rules
16pxline 28px · 22 rules
14pxline 44px · 12 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

.themes-container .themes-heading-and-cta .button-container .primary-sign-up-but · #3374FF · radius 3px

Link

Read our latest news today.

a · #2990EA

Corner radius

4px · 8×
2px · 4×
100% · 3×
3px · 2×
100px · 1×

Shadows

0 0 0 1px #d4d5d6
0 2px 20px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.2)
rgba(0,0,0,0.1) 0 2px 6px
rgba(0,0,0,0.1) 0 15px 40px

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

Breakpoints

375

479

717

745

992

1023

1024

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1680 px

1120 px

500 px

424 px

310 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 67 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 181 characters. Search results usually show about 160.
▲ CheckBody text (#2F3337 on #161B1F) has a contrast of 1.36:1, under the 4.5:1 WCAG asks for.

Back to top ↑

Questions

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

Questions

What font does Weebly.com use?: Weebly.com’s website uses two typefaces: SQMarket-Medium (headings and body text), served from cdn11.editmysite.com; SQMarket, served from cdn11.editmysite.com.
What are Weebly.com’s brand colours?: The main colours on weebly.com are Light Royal Blue (#3374FF), Deep Royal Blue (#134DC7), Dodger Blue (#2990EA), White (#FFFFFF), Cool Charcoal (#2F3337) and Light Grey (#D4D5D6).
What colour is Weebly.com’s text and background?: Body text is #2F3337 on a #161B1F background.
Where is Weebly.com’s logo from?: The logo shown in this guide was found on weebly.com’s homepage. For official logo files and usage rules, check Weebly.com’s own brand or press page.
Is this Weebly.com’s official style guide?: No. SiteStyleGuide made it from weebly.com’s public web pages on 23 October 2026, and isn’t affiliated with Weebly.com. 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

weebly-com-tokens.css

Download

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

/* weebly.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/weebly.com) */
:root {
  /* Colours */
  --text: #2F3337;
  --background: #161B1F;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #2F3337;
  --colour-light-grey: #D4D5D6;
  --colour-grey: #9BA0A3;
  --colour-light-royal-blue: #3374FF;
  --colour-deep-royal-blue: #134DC7;
  --colour-dodger-blue: #2990EA;
  --gradient-1: linear-gradient(to bottom, #2990ea 0%, rgba(41,144,234,0.5) 100%);
  --gradient-2: linear-gradient(to top, rgba(41,144,234,0.5) 0%, rgba(41,144,234,0) 100%);
  --gradient-3: linear-gradient(to bottom, #966e74 0%, #94647a 30%, #884f78 100%);

  /* Typefaces */
  --font-headings: 'SQMarket-Medium', 'SQMarket', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-buttons: 'SQMarket-Medium', 'SQMarket', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --leading-h1: 1.1em;
  --text-h2: 22px;
  --leading-h2: 32px;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-p: 16px;
  --leading-p: 28px;
  --text-button: 14px;
  --leading-button: 44px;
  --text-a: 14px;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 2px;
  --radius-3: 100%;
  --radius-4: 3px;
  --radius-5: 100px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 375px;
  --breakpoint-2: 479px;
  --breakpoint-3: 717px;
  --breakpoint-4: 745px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1023px;
  --breakpoint-7: 1024px;
  --breakpoint-8: 1200px;
  --max-width-1: 1680px;
  --max-width-2: 1120px;
  --max-width-3: 500px;
  --max-width-4: 424px;
  --max-width-5: 310px;
  --max-width-6: 300px;
}

{
    "site": "weebly.com",
    "source": "https://sitestyleguide.com/weebly.com",
    "text": "#2F3337",
    "background": "#161B1F",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#2F3337",
            "rgb": [
                47,
                51,
                55
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#D4D5D6",
            "rgb": [
                212,
                213,
                214
            ]
        },
        {
            "name": "Grey",
            "hex": "#9BA0A3",
            "rgb": [
                155,
                160,
                163
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#3374FF",
            "rgb": [
                51,
                116,
                255
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#134DC7",
            "rgb": [
                19,
                77,
                199
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#2990EA",
            "rgb": [
                41,
                144,
                234
            ]
        }
    ],
    "fonts": [
        {
            "name": "SQMarket-Medium",
            "stack": "SQMarket-Medium, SQMarket, \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
            "weights": [
                500
            ],
            "source": "Served from cdn11.editmysite.com"
        },
        {
            "name": "SQMarket",
            "stack": "SQMarket, \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "Served from cdn11.editmysite.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 weebly.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/weebly.com" title="Weebly.com 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 ↑

Weebly.comstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Charcoal

Light Grey

Grey

Colours

Light Royal Blue

Deep Royal Blue

Dodger Blue

Gradients

SQMarket-Medium

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Open Broadcaster Software

SORT

Electronic Arts Home Page

Plarium

Weebly.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Charcoal

Light Grey

Grey

Colours

Light Royal Blue

Deep Royal Blue

Dodger Blue

Gradients

SQMarket-Medium

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run weebly.com?

Similar colours

Open Broadcaster Software

SORT

Electronic Arts Home Page

Plarium

Title &
description