What font does Webflow use?

Webflow’s website uses two typefaces: Arial (headings and body text), a system font; WF Visual Sans Variable, served from cdn.prod.website-files.com.

What are Webflow’s brand colours?

The main colours on webflow.com are Light Royal Blue (#146EF5), Plum (#CAB1FF), Yellow (#FFFF00), Deep Royal Blue (#0055D4), Deep Dodger Blue (#0082F3) and Light Dodger Blue (#3898EC).

What colour is Webflow’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is Webflow’s logo from?

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

Is this Webflow’s official style guide?

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

Webflow 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: Webflow: The agentic web platform for modern businesses; ● 55 / 60 characters
Meta description: Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over 300k teams.; ● 151 / 160 characters
Site name: Webflow
og:title: Webflow: The agentic web platform for modern businesses
og:description: Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over 300k teams.
Language: en
Theme colour: #146EF5

In search results

Webflowhttps://webflow.com/

Webflow: The agentic web platform for modern businesses

Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over 300k teams.

When shared

webflow.com

Webflow: The agentic web platform for modern businesses

Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and…

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG, 1080 × 674.

Logo

On white

On black

On Light Royal Blue

Favicons

3 found

256 px · PNG apple-touch-icon
32 px · PNG shortcut icon
32 px · ICO favicon.ico

Webflow: The agentic web platform for modern businesses

Light browser tab

Webflow: The agentic web platform for modern businesses

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 (#333333) 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.6%
Black 13.9%
Off White 12.5%
Light Royal Blue 12%
Plum 4.9%
Charcoal 4.6%
Yellow 2.2%
Deep Royal Blue 1.3%
Deep Dodger Blue 1.3%
Light Dodger Blue 1.3%
Steel Blue 1.2%
Orchid 1.2%

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.63:1 AAA

On white
—

Background, text, border · --colors--primary-accent-background, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 97

On text
1.59:1 Fail

On white
20.03:1 AAA

Text, background, border · .mktoField[type=checkbox]:checked::before, --mkto-embed-color-text
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 15

On text
8.86:1 AAA

On white
1.43:1 Fail

Border, background · --mkto-embed-color-border, --mkto-embed-checkbox-border
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text · body, .w-input

Colours

Brand colours and accents, most used first

Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
92 55 0 4

On text
2.75:1 Fail

On white
4.59:1 AA

Background, theme, border · [data-heading-mask='right'], [data-heading-mask='left']
Plum

HEX

RGB

HSL

OKLCH

CMYK
21 31 0 0

On text
6.77:1 AA

On white
1.87:1 Fail

Background · [data-heading-mask='right'], [data-heading-mask='left']
Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 0 100 0

On text
11.77:1 AAA

On white
1.07:1 Fail

Border, background · html.wf-design-mode h1 strong, mark
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 60 0 17

On text
1.96:1 Fail

On white
6.46:1 AA

Background · --mkto-embed-color-button-hover, .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover
Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 47 0 5

On text
3.30:1 AA large

On white
3.83:1 AA large

Text · .w-dropdown-link.w--current, .w-nav-link.w--current
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
76 36 0 7

On text
4.13:1 AA large

On white
3.06:1 AA large

Background, border · .w-button, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
3.15:1 AA large

On white
4.02:1 AA large

Background, text, border · --swiper-theme-color, .swiper-pagination-bullet-active
Orchid

HEX

RGB

HSL

OKLCH

CMYK
0 67 15 7

On text
3.95:1 AA large

On white
3.20:1 AA large

Background · .line-chart-wrap.is-c1

Gradients

linear-gradient(currentColor, currentColor)
linear-gradient(90deg,30%,transparent)
radial-gradient(circle farthest-side at 50% 40%, #cab1ff 2%, #146ef5 21%, currentColor 42%)

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.

Arial

Aa 400

Arial

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

Aa 100 Aa 900

WF Visual Sans Variable

Served from cdn.prod.website-files.com · weights 100, 400, 500, 550, 900 · buttons · shown in a stand-in if you don’t have it

Aa 300

Helvetica Neue

System font, or not loaded on this page · weights 300 · shown in a stand-in if you don’t have it

Aa 400

WF Visual Sans

System font, or not loaded on this page · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Body / weight

Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over…

Paragraph / weight · uppercase

Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over…

Small 80%

Design, build, optimize, and rank in AI search — all in Webflow. Enterprise-grade security, CMS, hosting, and AEO built in. Trusted by over…

Sizes in use

Most common across the site

32pxline 36px · 2 rules
24pxline 30px · 2 rules
18pxline 22px · 6 rules
16pxline · 7 rules
15pxline 12px · 3 rules
14pxline 20px · 11 rules
12pxline 14px · 4 rules
10pxline 1.3 · 3 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

Corner radius

4px · 10×
10px · 9×
50% · 8×
inherit · 6×
.5rem · 5×

Shadows

unset
0 0 0 1px #0000001a,0 1px 3px #0000001a
0 0 3px #3336
0 0 0 2px #fff

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

479

480

767

768

991

992

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1920 px

940 px

728 px

672 px

580 px

400 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does Webflow use?: Webflow’s website uses two typefaces: Arial (headings and body text), a system font; WF Visual Sans Variable, served from cdn.prod.website-files.com.
What are Webflow’s brand colours?: The main colours on webflow.com are Light Royal Blue (#146EF5), Plum (#CAB1FF), Yellow (#FFFF00), Deep Royal Blue (#0055D4), Deep Dodger Blue (#0082F3) and Light Dodger Blue (#3898EC).
What colour is Webflow’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is Webflow’s logo from?: The logo shown in this guide was found on webflow.com’s homepage. For official logo files and usage rules, check Webflow’s own brand or press page.
Is this Webflow’s official style guide?: No. SiteStyleGuide made it from webflow.com’s public web pages on 26 October 2026, and isn’t affiliated with Webflow. 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

webflow-com-tokens.css

Download

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

/* webflow.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/webflow.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #080808;
  --colour-off-white: #D8D8D8;
  --colour-charcoal: #333333;
  --colour-light-royal-blue: #146EF5;
  --colour-plum: #CAB1FF;
  --colour-yellow: #FFFF00;
  --colour-deep-royal-blue: #0055D4;
  --colour-deep-dodger-blue: #0082F3;
  --colour-light-dodger-blue: #3898EC;
  --colour-steel-blue: #007AFF;
  --colour-orchid: #ED4FCA;
  --gradient-1: linear-gradient(currentColor, currentColor);
  --gradient-2: linear-gradient(90deg,30%,transparent);
  --gradient-3: radial-gradient(circle farthest-side at 50% 40%, #cab1ff 2%, #146ef5 21%, currentColor 42%);

  /* Typefaces */
  --font-body: 'Arial', sans-serif;
  --font-buttons: 'WF Visual Sans Variable', sans-serif;
  --font-other: 'Helvetica Neue', 'Helvetica', 'Ubuntu', 'Segoe UI', 'Verdana', sans-serif;

  /* Type scale */
  --text-small: 80%;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 10px;
  --radius-3: 50%;
  --radius-4: inherit;
  --radius-5: .5rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 479px;
  --breakpoint-2: 480px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1440px;
  --max-width-1: 1920px;
  --max-width-2: 940px;
  --max-width-3: 728px;
  --max-width-4: 672px;
  --max-width-5: 580px;
  --max-width-6: 400px;
}

{
    "site": "webflow.com",
    "source": "https://sitestyleguide.com/webflow.com",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#080808",
            "rgb": [
                8,
                8,
                8
            ]
        },
        {
            "name": "Off White",
            "hex": "#D8D8D8",
            "rgb": [
                216,
                216,
                216
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#146EF5",
            "rgb": [
                20,
                110,
                245
            ]
        },
        {
            "name": "Plum",
            "hex": "#CAB1FF",
            "rgb": [
                202,
                177,
                255
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFFF00",
            "rgb": [
                255,
                255,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0055D4",
            "rgb": [
                0,
                85,
                212
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0082F3",
            "rgb": [
                0,
                130,
                243
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#3898EC",
            "rgb": [
                56,
                152,
                236
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        },
        {
            "name": "Orchid",
            "hex": "#ED4FCA",
            "rgb": [
                237,
                79,
                202
            ]
        }
    ],
    "fonts": [
        {
            "name": "Arial",
            "stack": "Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "WF Visual Sans Variable",
            "stack": "\"WF Visual Sans Variable\", sans-serif",
            "weights": [
                100,
                400,
                500,
                550,
                900
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "WF Visual Sans",
            "stack": "WF Visual Sans, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Inconsolata",
            "stack": "Inconsolata, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

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 webflow.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/webflow.com" title="Webflow 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 ↑

Webflowstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Light Royal Blue

Plum

Yellow

Deep Royal Blue

Deep Dodger Blue

Light Dodger Blue

Steel Blue

Orchid

Gradients

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

DaFont

Fauna Robotics

SendSpace

ieee.org

Electronic Arts Home Page

Open Broadcaster Software

Waze

Google

Webflowstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Light Royal Blue

Plum

Yellow

Deep Royal Blue

Deep Dodger Blue

Light Dodger Blue

Steel Blue

Orchid

Gradients

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run webflow.com?

Also set in Arial

DaFont

Fauna Robotics

SendSpace

ieee.org

Similar colours

Electronic Arts Home Page

Open Broadcaster Software

Waze

Google

Title &
description