What font does SiteGround use?

SiteGround’s website uses two typefaces: Poppins (headings), served from static-cdn.siteground.com; Inter (body text), served from static-cdn.siteground.com.

What are SiteGround’s brand colours?

The main colours on siteground.com are Light Slate Blue (#6164FF), Slate Blue (#5645F5), Medium Blue (#1B0AA7), Medium Spring Green (#17FFB7), Steel Blue (#007AFF) and Deep Aqua Marine (#33D495).

What colour is SiteGround’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is SiteGround’s logo from?

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

Is this SiteGround’s official style guide?

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

Unofficial A style guide made by SiteStyleGuide from siteground.com’s public web pages. Not affiliated with or endorsed by SiteGround. The real site is siteground.com ↗

Unofficial style guide

SiteGroundstyle guide

SiteGround’s website (siteground.com) sets its headings in Poppins and its body text in Inter. Its palette is led by Light Slate Blue (#6164FF), Slate Blue (#5645F5) and Medium Blue (#1B0AA7), with #000000 text on #FFFFFF. Captured from the live site on 4 November 2026.

Website: siteground.com
Typefaces: Poppins, Inter
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 4 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the siteground.com homepage on a desktop screen — Screenshot of siteground.com on a 1440 px desktop screen, 4 Nov 2026.

Screenshot of the siteground.com homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: Web Hosting Perfected - SiteGround; ● 34 / 60 characters
Meta description: Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 24/7 fast and expert support! Get started now!; ● 154 / 160 characters
Site name: SiteGround
og:title: Web Hosting Perfected - SiteGround
og:description: Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 24/7 fast and expert support! Get started now!
Language: en
Theme colour: #f3efe7

In search results

SiteGroundhttps://au.siteground.com/

Web Hosting Perfected - SiteGround

Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 24/7 fast and expert support! Get started now!

When shared

siteground.com

Web Hosting Perfected - SiteGround

Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 2…

Logo & favicons

Found as: schema.org logo. PNG, 400 × 81.

Logo

On white

On black

On Light Slate Blue

Favicons

2 found

180 px · PNG apple-touch-icon
32 px · ICO shortcut icon

Web Hosting Perfected - SiteGround

Light browser tab

Web Hosting Perfected - SiteGround

Dark browser tab

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 43%
Deep Black 19.9%
Light Slate Blue 8.5%
Slate Blue 4.5%
Light Black 3.8%
Charcoal 2.6%
Medium Blue 2.6%
Medium Spring Green 2.5%
Steel Blue 2.4%
Deep Aqua Marine 1.9%
Light Aqua Marine 1.7%
Deep Slate Blue 1.4%
Sky Blue 1.4%
Fire Brick 1.4%
Red 1.4%
Blue Violet 1.1%

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
—

Background, text, border · .btn:after, .btn--bg-pri
Deep Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, text, graphic · .btn--ghost-sec:after, .hero
Light Black

HEX

RGB

HSL

OKLCH

CMYK
100 100 0 95

On text
1.01:1 Fail

On white
20.87:1 AAA

Background · .border--gradient-bf, .border--gradient-cm
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 2 6 80

On text
1.64:1 Fail

On white
12.81:1 AAA

Graphic, background · .bg--color-logo-black, .header:has(#trigger:checked) .header-logo svg [fill="#333230"]

Colours

Brand colours and accents, most used first

Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
62 61 0 0

On text
4.78:1 AA

On white
4.40:1 AA large

Used · --color-primary-500, --color-transparent-primary-5
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
65 72 0 4

On text
3.57:1 AA large

On white
5.89:1 AA

Used · --ocean-base, --ocean-light
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
84 94 0 35

On text
1.65:1 Fail

On white
12.74:1 AAA

Used · --ocean-dark, --salmon-dark
Medium Spring Green

HEX

RGB

HSL

OKLCH

CMYK
91 0 28 0

On text
16.02:1 AAA

On white
1.31:1 Fail

Background, text · .border--gradient-cm, .bg--cm-label
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
5.23:1 AA

On white
4.02:1 AA large

Background, text · .swiper-pagination-bullet-active, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill
Deep Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
76 0 30 17

On text
10.99:1 AAA

On white
1.91:1 Fail

Background, text, graphic · .bg--color-green-promo, .text--color-salem-promo
Light Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
100 0 20 17

On text
11.00:1 AAA

On white
1.91:1 Fail

Background · .hero .wrap1 .container-boxes .selected-indicator
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
68 64 0 0

On text
4.30:1 AA large

On white
4.88:1 AA

Background · .border--gradient-cm, .bg--cm-lenta-banner
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
69 10 0 2

On text
13.49:1 AAA

On white
1.56:1 Fail

Background · .border--gradient-cm, .bg--cm-lenta-banner
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 94 94 24

On text
3.37:1 AA large

On white
6.22:1 AA

Background · .bg--bf-hero, .dialog__fit--closure-bf
Red

HEX

RGB

HSL

OKLCH

CMYK
0 79 79 9

On text
4.91:1 AA

On white
4.27:1 AA large

Background · .border--gradient-bf, .bg--bf-hero-sales
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
47 70 0 10

On text
3.85:1 AA large

On white
5.46:1 AA

Background · .bg--color-label-purple, --color-label-4

Gradients

linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))

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.

Poppins

Aa 400 Aa 600

Poppins

Served from static-cdn.siteground.com · weights 400, 500, 600 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 600

Inter

Served from static-cdn.siteground.com · weights 400, 500, 600 · body · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS · root 10 px

Heading 1 2.8rem · 28 px / 4rem weight 500 · Poppins

SiteGround

Heading 2 3.2rem · 32 px / 4.8rem weight 500 · Poppins

Web Hosting Perfected - SiteGround

Heading 3 — weight 500 · Poppins

Web Hosting Perfected - SiteGround

Heading 4 — weight 500 · Poppins

Web Hosting Perfected - SiteGround

Heading 5 — weight 500 · Poppins

Web Hosting Perfected - SiteGround

Heading 6 — weight 500 · Poppins

Web Hosting Perfected - SiteGround

Body — weight 400 · Inter

Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 24/7 fast and expert support! G…

Paragraph 1.8rem · 18 px / 2.8rem

Web hosting services helping 3,000,000+ domains thrive online with ultrafast speed, unmatched security, and 24/7 fast and expert support! G…

Link clamp(1.2rem,.83dvw,1.4rem) · 14 px / clamp(1.8rem,1.15dvw,2.2rem) weight 600

Sizes in use

Most common across the site

32pxline clamp(4rem,2.5dvw,4.8rem) · 2 rules
28pxline 4rem · 2 rules
24pxline clamp(3.2rem,1.88dvw,3.6rem) · 2 rules
18pxline 2.8rem · 11 rules
16pxline 2.4rem · 13 rules
14pxline 2.2rem · 16 rules
12pxline 1.8rem · 9 rules
10px1 rules

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

.btn:after · #FFFFFF · radius inherit

Corner radius

50% · 16×
1.2rem · 9×
2.4rem · 8×
.8rem · 5×
50vh · 4×
5rem · 4×

Shadows

0 1rem 2rem rgba(0,0,0,.1)
0 0 0 1px
0 0 0 1px rgba(0,0,0,.15)

Layout

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

Grid

Breakpoints

767

768

1023

1024

1280

1281

1600

1601

On a scale of 0 to 1601 px.

Content widths (max-width)

1520 px

1200 px

960 px

850 px

600 px

360 px

Notes

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

Notes

● FineThe title is 34 characters, short enough to show in full in search results.

Questions

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

Questions

What font does SiteGround use?: SiteGround’s website uses two typefaces: Poppins (headings), served from static-cdn.siteground.com; Inter (body text), served from static-cdn.siteground.com.
What are SiteGround’s brand colours?: The main colours on siteground.com are Light Slate Blue (#6164FF), Slate Blue (#5645F5), Medium Blue (#1B0AA7), Medium Spring Green (#17FFB7), Steel Blue (#007AFF) and Deep Aqua Marine (#33D495).
What colour is SiteGround’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is SiteGround’s logo from?: The logo shown in this guide was found on siteground.com’s homepage. For official logo files and usage rules, check SiteGround’s own brand or press page.
Is this SiteGround’s official style guide?: No. SiteStyleGuide made it from siteground.com’s public web pages on 4 November 2026, and isn’t affiliated with SiteGround. Members can refresh a guide after 90 days to pick up changes.

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

siteground-com-tokens.css

Download

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

/* siteground.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/siteground.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-deep-black: #000000;
  --colour-light-black: #00000E;
  --colour-charcoal: #333230;
  --colour-light-slate-blue: #6164FF;
  --colour-slate-blue: #5645F5;
  --colour-medium-blue: #1B0AA7;
  --colour-medium-spring-green: #17FFB7;
  --colour-steel-blue: #007AFF;
  --colour-deep-aqua-marine: #33D495;
  --colour-light-aqua-marine: #00D4AA;
  --colour-deep-slate-blue: #525BFF;
  --colour-sky-blue: #4EE1FB;
  --colour-fire-brick: #C30B0C;
  --colour-red: #E83131;
  --colour-blue-violet: #7A46E6;
  --gradient-1: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0));
  --gradient-2: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0));
  --gradient-3: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));

  /* Typefaces */
  --font-headings: 'Poppins', 'Arial', 'Helvetica', sans-serif;
  --font-buttons: 'Poppins', 'Arial', 'Helvetica', sans-serif;
  --font-body: 'Inter', 'Arial', 'Helvetica', sans-serif;

  /* Type scale */
  --text-h1: 2.8rem;
  --leading-h1: 4rem;
  --text-h2: 3.2rem;
  --leading-h2: 4.8rem;
  --text-p: 1.8rem;
  --leading-p: 2.8rem;
  --text-a: clamp(1.2rem,.83dvw,1.4rem);
  --leading-a: clamp(1.8rem,1.15dvw,2.2rem);

  /* Shape */
  --radius-1: 50%;
  --radius-2: 1.2rem;
  --radius-3: 2.4rem;
  --radius-4: .8rem;
  --radius-5: 50vh;
  --radius-6: 5rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1023px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1280px;
  --breakpoint-6: 1281px;
  --breakpoint-7: 1600px;
  --breakpoint-8: 1601px;
  --max-width-1: 1520px;
  --max-width-2: 1200px;
  --max-width-3: 960px;
  --max-width-4: 850px;
  --max-width-5: 600px;
  --max-width-6: 360px;
}

{
    "site": "siteground.com",
    "source": "https://sitestyleguide.com/siteground.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Black",
            "hex": "#00000E",
            "rgb": [
                0,
                0,
                14
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333230",
            "rgb": [
                51,
                50,
                48
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#6164FF",
            "rgb": [
                97,
                100,
                255
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#5645F5",
            "rgb": [
                86,
                69,
                245
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#1B0AA7",
            "rgb": [
                27,
                10,
                167
            ]
        },
        {
            "name": "Medium Spring Green",
            "hex": "#17FFB7",
            "rgb": [
                23,
                255,
                183
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        },
        {
            "name": "Deep Aqua Marine",
            "hex": "#33D495",
            "rgb": [
                51,
                212,
                149
            ]
        },
        {
            "name": "Light Aqua Marine",
            "hex": "#00D4AA",
            "rgb": [
                0,
                212,
                170
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#525BFF",
            "rgb": [
                82,
                91,
                255
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#4EE1FB",
            "rgb": [
                78,
                225,
                251
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C30B0C",
            "rgb": [
                195,
                11,
                12
            ]
        },
        {
            "name": "Red",
            "hex": "#E83131",
            "rgb": [
                232,
                49,
                49
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#7A46E6",
            "rgb": [
                122,
                70,
                230
            ]
        }
    ],
    "fonts": [
        {
            "name": "Poppins",
            "stack": "Poppins, Arial, Helvetica, sans-serif",
            "weights": [
                400,
                500,
                600
            ],
            "source": "Served from static-cdn.siteground.com"
        },
        {
            "name": "Inter",
            "stack": "Inter, Arial, Helvetica, sans-serif",
            "weights": [
                400,
                500,
                600
            ],
            "source": "Served from static-cdn.siteground.com"
        }
    ]
}

Other websites using Poppins as their main typeface

NCI

cancer.gov · set in Poppins
Save
BuildYourBzns

buildyourbzns.com · set in Poppins
Save
CDC

cdc.gov · set in Poppins
Save
Universidad Martín Lutero

uml.edu.ni · set in Poppins
Save

Websites whose lead colour is closest to SiteGround’s

Discord

discord.gg · 6 days ago
Save
PPP

ppp.tokyo.jp · 5 days ago
Save
JetBrains

jetbrains.com · 5 days ago
Save
WeTransfer

we.tl · 2 days ago
Save

Captured from siteground.com on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by SiteGround; this guide describes the public website for reference.

SiteGroundstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Light Black

Charcoal

Colours

Light Slate Blue

Slate Blue

Medium Blue

Medium Spring Green

Steel Blue

Deep Aqua Marine

Light Aqua Marine

Deep Slate Blue

Sky Blue

Fire Brick

Red

Blue Violet

Gradients

Poppins

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run siteground.com?

Also set in Poppins

NCI

BuildYourBzns

CDC

Universidad Martín Lutero

Similar colours

Discord

PPP

JetBrains

WeTransfer

Title &
description