What font does elegantthemes.com use?

elegantthemes.com’s website uses two typefaces: Inter (headings and body text), google Fonts; Lato, self-hosted.

What are elegantthemes.com’s brand colours?

The main colours on elegantthemes.com are Blue (#022EEE), Medium Spring Green (#34DD87), Orange Red (#FF4C00), Slate Blue (#4A42EC), Blue Violet (#8F42EC) and Light Royal Blue (#3776FF).

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

Body text is #FFFFFF on a #000000 background.

Where is elegantthemes.com’s logo from?

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

Is this elegantthemes.com’s official style guide?

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

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

Unofficial style guide

elegantthemes.comstyle guide

elegantthemes.com’s website (elegantthemes.com) uses Inter for its headings and body text. Its palette is led by Blue (#022EEE), Medium Spring Green (#34DD87) and Orange Red (#FF4C00), with #FFFFFF text on #000000. Captured from the live site on 31 October 2026.

Website: elegantthemes.com
Typefaces: Inter, Lato
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 31 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the elegantthemes.com homepage on a desktop screen — Screenshot of elegantthemes.com on a 1440 px desktop screen, 31 Oct 2026.

Screenshot of the elegantthemes.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: The Best WordPress Themes In The World; ● 38 / 60 characters
Meta description: WordPress Themes with Visual Drag & Drop Technology that empower a community of 974,872 customers. Home of Divi, the ultimate Visual Page Builder and Theme.; ● 156 / 160 characters
Language: en

In search results

elegantthemes.comhttps://www.elegantthemes.com/

The Best WordPress Themes In The World

WordPress Themes with Visual Drag & Drop Technology that empower a community of 974,872 customers. Home of Divi, the ultimate Visual Page Builder and Theme.

When shared

No og:image, so no picture

elegantthemes.com

The Best WordPress Themes In The World

WordPress Themes with Visual Drag & Drop Technology that empower a community of 974,872 customers. Home of Di…

Logo & favicons

Found as: image in the header. SVG, 109 × 50.

Logo

On white

On black

On Blue

Favicons

5 found

192 px · PNG icon
128 px · PNG icon
96 px · PNG icon
32 px · PNG icon
16 px · ICO favicon.ico

The Best WordPress Themes In The World

Light browser tab

The Best WordPress Themes In The World

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

Colour

Balance

How much each colour is used

White 36.1%
Blue 20.4%
Black 11%
Medium Spring Green 5.2%
Orange Red 4.1%
Slate Blue 3.6%
Blue Violet 2.9%
Light Royal Blue 2.9%
Deep Cool Charcoal 2.8%
Deep Pink 2.2%
Coral 2.1%
Deep Sky Blue 1.8%
Light Slate Grey 1.5%
Medium Aqua Marine 1.2%
Deep Royal Blue 1.2%
Light Cool Charcoal 0.8%

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
—

On white
—

Text, background, border · body, .btn-secondary
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
21.00:1 AAA

On white
21.00:1 AAA

Background, text, graphic · #divi-cta, html
Deep Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
32 13 0 82

On text
14.79:1 AAA

On white
14.79:1 AAA

Text, background, graphic · #main-nav .sub-menu ul h3:after, .exit-button:after
Light Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
27 20 0 78

On text
13.75:1 AAA

On white
13.75:1 AAA

Background · .accent-navy .icon-circle, .accent-navy .subhead

Colours

Brand colours and accents, most used first

Blue

HEX

RGB

HSL

OKLCH

CMYK
99 81 0 7

On text
7.99:1 AAA

On white
7.99:1 AAA

Background, border, graphic · .et_cookie_consent .button, .btn-accent
Medium Spring Green

HEX

RGB

HSL

OKLCH

CMYK
76 0 39 13

On text
1.77:1 Fail

On white
1.77:1 Fail

Background, text, border · .menu-callout.callout-extra, .button-callout
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 70 100 0

On text
3.34:1 AA large

On white
3.34:1 AA large

Text, background, border · .menu-promo .menu-promo-button:first-of-type, .menu-promo h4
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
69 72 0 7

On text
6.40:1 AA

On white
6.40:1 AA

Background, text, border · .menu-callout.callout-bloom, #main-footer .accent-indigo .button
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
39 72 0 7

On text
5.05:1 AA

On white
5.05:1 AA

Background, text, graphic · #main-footer .accent-purple.button, .button-callout.accent-purple
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
78 54 0 0

On text
4.04:1 AA large

On white
4.04:1 AA large

Background, text, graphic · #main-footer .accent-blue .button, .button-callout.accent-blue
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 71 38 0

On text
3.12:1 AA large

On white
3.12:1 AA large

Background, text, graphic · .gradient-background-pink, #main-nav .hamburger span
Coral

HEX

RGB

HSL

OKLCH

CMYK
0 52 83 0

On text
2.59:1 Fail

On white
2.59:1 Fail

Background, border, text · .menu-callout.callout-monarch, .menu-callout.callout-monarch:before
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 21 0 10

On text
2.40:1 Fail

On white
2.40:1 Fail

Background, text, graphic · .button-callout.accent-teal, .gradient-background-teal
Light Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
25 11 0 40

On text
3.63:1 AA large

On white
3.63:1 AA large

Text · #main-nav .sub-menu.sub-menu-extra-wide .menu-block-wide>h3, #main-nav .sub-menu.sub-menu-extra-wide .card-inset-container>h3
Medium Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
76 0 24 13

On text
1.74:1 Fail

On white
1.74:1 Fail

Background · .accent-green .icon-circle, .accent-green .subhead
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
84 64 0 8

On text
5.86:1 AA

On white
5.86:1 AA

Background · .accent-dark-blue .icon-circle, .accent-dark-blue .subhead

Gradients

linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 100%)
linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 100%),color-mix(in srgb,#022eee 85%,#000)
linear-gradient(110deg,rgba(0,0,0,.6) 0,#022eee 50%,#fff 100%)

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.

Inter

Aa 400 Aa 700

Inter

Google Fonts · weights 400, 500, 600, 700 · body

Aa 400 Aa 900

Lato

Self-hosted · weights 400, 700, 900 · buttons · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 clamp(2rem,0.6151rem + 3.4623vw,4.125rem) · 66 px / 1.2 weight 500

elegantthemes.com

Heading 2 clamp(1.75rem,0.8539rem + 2.2403vw,3.125rem) · 50 px / 1.2 weight 500

The Best WordPress Themes In The World

Heading 3 clamp(1.5rem,0.8483rem + 1.6293vw,2.5rem) · 40 px / 1.2 weight 500

The Best WordPress Themes In The World

Heading 4 clamp(1.25rem,0.7612rem + 1.2220vw,2rem) · 32 px / 1.2 weight 500

The Best WordPress Themes In The World

Heading 5 clamp(1rem,0.6741rem + 0.8147vw,1.5rem) · 24 px / 1.2 weight 500

The Best WordPress Themes In The World

Heading 6 clamp(0.875rem,0.7121rem + 0.4073vw,1.125rem) · 18 px / 1.2 weight 500

The Best WordPress Themes In The World

Body 1rem · 16 px / 1.6 weight 400 · Inter

WordPress Themes with Visual Drag & Drop Technology that empower a community of 974,872 customers. Home of Divi, the ultimate Visual Page B…

Paragraph 100% weight 400

WordPress Themes with Visual Drag & Drop Technology that empower a community of 974,872 customers. Home of Divi, the ultimate Visual Page B…

Button 100%

Get started

Link 100%

Sizes in use

Most common across the site

24pxline 2rem · 3 rules
18px4 rules
16pxline 1.6em · 6 rules
15pxline 25px · 4 rules
14pxline 1.5 · 13 rules
13pxline 1.2 · 5 rules
12pxline 28px · 5 rules
10pxline 15px · 3 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

#main-footer .button-callout · #022EEE · radius 3px

Corner radius

0.5rem · 8×
1.5rem · 7×
4px · 6×
8px · 6×
3px · 4×
100px · 3×

Shadows

0 0 #0000,0 0 #0000,
,,0 0 #0000
0 8px 60px 0 rgba(0,0,0,.3)
0 48px 48px -32px rgba(255,76,0,.12),0 96px 96px -64px rgba(255,76,0,.48)

Layout

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

Grid

Breakpoints

640

768

1024

1100

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px

896 px

768 px

448 px

400 px

384 px

Notes

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

Notes

● FineThe title is 38 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

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

Questions

What font does elegantthemes.com use?: elegantthemes.com’s website uses two typefaces: Inter (headings and body text), google Fonts; Lato, self-hosted.
What are elegantthemes.com’s brand colours?: The main colours on elegantthemes.com are Blue (#022EEE), Medium Spring Green (#34DD87), Orange Red (#FF4C00), Slate Blue (#4A42EC), Blue Violet (#8F42EC) and Light Royal Blue (#3776FF).
What colour is elegantthemes.com’s text and background?: Body text is #FFFFFF on a #000000 background.
Where is elegantthemes.com’s logo from?: The logo shown in this guide was found on elegantthemes.com’s homepage. For official logo files and usage rules, check elegantthemes.com’s own brand or press page.
Is this elegantthemes.com’s official style guide?: No. SiteStyleGuide made it from elegantthemes.com’s public web pages on 31 October 2026, and isn’t affiliated with elegantthemes.com. 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

elegantthemes-com-tokens.css

Download

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

/* elegantthemes.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/elegantthemes.com) */
:root {
  /* Colours */
  --text: #FFFFFF;
  --background: #000000;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-deep-cool-charcoal: #20292F;
  --colour-light-cool-charcoal: #292D38;
  --colour-blue: #022EEE;
  --colour-medium-spring-green: #34DD87;
  --colour-orange-red: #FF4C00;
  --colour-slate-blue: #4A42EC;
  --colour-blue-violet: #8F42EC;
  --colour-light-royal-blue: #3776FF;
  --colour-deep-pink: #FF4A9E;
  --colour-coral: #FF7B2B;
  --colour-deep-sky-blue: #00B5E6;
  --colour-light-slate-grey: #74899A;
  --colour-medium-aqua-marine: #34DDA9;
  --colour-deep-royal-blue: #2655EB;
  --gradient-1: linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 100%);
  --gradient-2: linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 100%),color-mix(in srgb,#022eee 85%,#000);
  --gradient-3: linear-gradient(110deg,rgba(0,0,0,.6) 0,#022eee 50%,#fff 100%);

  /* Typefaces */
  --font-body: 'Inter', sans-serif;
  --font-buttons: 'Lato', sans-serif;

  /* Type scale */
  --text-h1: clamp(2rem,0.6151rem + 3.4623vw,4.125rem);
  --leading-h1: 1.2;
  --text-h2: clamp(1.75rem,0.8539rem + 2.2403vw,3.125rem);
  --leading-h2: 1.2;
  --text-h3: clamp(1.5rem,0.8483rem + 1.6293vw,2.5rem);
  --leading-h3: 1.2;
  --text-h4: clamp(1.25rem,0.7612rem + 1.2220vw,2rem);
  --leading-h4: 1.2;
  --text-h5: clamp(1rem,0.6741rem + 0.8147vw,1.5rem);
  --leading-h5: 1.2;
  --text-h6: clamp(0.875rem,0.7121rem + 0.4073vw,1.125rem);
  --leading-h6: 1.2;
  --text-body: 1rem;
  --leading-body: 1.6;
  --text-p: 100%;
  --text-button: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 0.5rem;
  --radius-2: 1.5rem;
  --radius-3: 4px;
  --radius-4: 8px;
  --radius-5: 3px;
  --radius-6: 100px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 640px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1024px;
  --breakpoint-4: 1100px;
  --breakpoint-5: 1280px;
  --max-width-1: 1280px;
  --max-width-2: 896px;
  --max-width-3: 768px;
  --max-width-4: 448px;
  --max-width-5: 400px;
  --max-width-6: 384px;
}

{
    "site": "elegantthemes.com",
    "source": "https://sitestyleguide.com/elegantthemes.com",
    "text": "#FFFFFF",
    "background": "#000000",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Deep Cool Charcoal",
            "hex": "#20292F",
            "rgb": [
                32,
                41,
                47
            ]
        },
        {
            "name": "Light Cool Charcoal",
            "hex": "#292D38",
            "rgb": [
                41,
                45,
                56
            ]
        },
        {
            "name": "Blue",
            "hex": "#022EEE",
            "rgb": [
                2,
                46,
                238
            ]
        },
        {
            "name": "Medium Spring Green",
            "hex": "#34DD87",
            "rgb": [
                52,
                221,
                135
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF4C00",
            "rgb": [
                255,
                76,
                0
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#4A42EC",
            "rgb": [
                74,
                66,
                236
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#8F42EC",
            "rgb": [
                143,
                66,
                236
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#3776FF",
            "rgb": [
                55,
                118,
                255
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FF4A9E",
            "rgb": [
                255,
                74,
                158
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF7B2B",
            "rgb": [
                255,
                123,
                43
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00B5E6",
            "rgb": [
                0,
                181,
                230
            ]
        },
        {
            "name": "Light Slate Grey",
            "hex": "#74899A",
            "rgb": [
                116,
                137,
                154
            ]
        },
        {
            "name": "Medium Aqua Marine",
            "hex": "#34DDA9",
            "rgb": [
                52,
                221,
                169
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#2655EB",
            "rgb": [
                38,
                85,
                235
            ]
        }
    ],
    "fonts": [
        {
            "name": "Inter",
            "stack": "\"Inter\", sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Lato",
            "stack": "Lato, sans-serif",
            "weights": [
                400,
                700,
                900
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Inter as their main typeface

ITFixio

itfixio.co.uk · set in Inter
Save1
IGN

ign.com · set in Inter
Save
Deezer

deezer.com · set in Inter
Save
AI-Native Cloud

digitalocean.com · set in Inter
Save

Websites whose lead colour is closest to elegantthemes.com’s

VectorStock

vectorstock.com · 3 days ago
Save
Foursquare

foursquare.com · 1 day ago
Save
CDiscount

cdiscount.com · 4 days ago
Save
Discover TV, Broadband & Mobile Phone Packages with Sky

sky.com · 6 days ago
Save

Captured from elegantthemes.com on 31 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by elegantthemes.com; this guide describes the public website for reference.

elegantthemes.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Deep Cool Charcoal

Light Cool Charcoal

Colours

Blue

Medium Spring Green

Orange Red

Slate Blue

Blue Violet

Light Royal Blue

Deep Pink

Coral

Deep Sky Blue

Light Slate Grey

Medium Aqua Marine

Deep Royal Blue

Gradients

Inter

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run elegantthemes.com?

Also set in Inter

ITFixio

IGN

Deezer

AI-Native Cloud

Similar colours

VectorStock

Foursquare

CDiscount

Discover TV, Broadband & Mobile Phone Packages with Sky

Title &
description