What font does Framer use?

Framer’s website uses one typeface: Inter (headings and body text), served from framerusercontent.com.

What are Framer’s brand colours?

The main colours on framer.com are Dodger Blue (#0099FF), Medium Sea Green (#00BB88), Lime Green (#4CD963), Green Yellow (#CBFF00), Golden Rod (#FFBB00) and Medium Slate Blue (#8A58FF).

What colour is Framer’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Framer’s logo from?

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

Is this Framer’s official style guide?

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

Framer 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: Framer: Free website builder and AI design agent; ● 48 / 60 characters
Meta description: The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in.; ● 156 / 160 characters
Site name: Framer
og:title: Framer: Free website builder and AI design agent
og:description: The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in.
Language: en

In search results

Framerhttps://www.framer.com/

Framer: Free website builder and AI design agent

The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in.

When shared

framer.com

Framer: Free website builder and AI design agent

The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with …

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG.

Logo

On white

On black

On Dodger Blue

Favicons

3 found

180 px · PNG apple-touch-icon
64 px · PNG icon
64 px · PNG icon

Framer: Free website builder and AI design agent

Light browser tab

Framer: Free website builder and AI design agent

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

Near Black 27.3%
Grey 23.2%
Black 23.1%
White 15.2%
Dodger Blue 8%
Medium Sea Green 2%
Lime Green 0.4%
Green Yellow 0.2%
Golden Rod 0.2%
Medium Slate Blue 0.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

Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 86

On text
1.35:1 Fail

On white
15.52:1 AAA

Background · inline style on <div>, --border-color
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 40

On text
7.37:1 AAA

On white
2.85:1 Fail

Background, text · inline style on <div>, --framer-link-text-color
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, text · inline style on <a>, inline style on <div>
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text · inline style on <div>, --framer-text-color

Colours

Brand colours and accents, most used first

Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 40 0 0

On text
7.00:1 AAA

On white
3.00:1 AA large

Background · inline style on <div>, inline style on <span>
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 27 27

On text
8.46:1 AAA

On white
2.48:1 Fail

Background · inline style on <div>
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
65 0 54 15

On text
11.41:1 AAA

On white
1.84:1 Fail

Used · --token-281f665e-69f0-4f4c-a171-f40f50fe70d5, --token-f4d7f1ab-60e4-4112-93dc-10fa3370595e
Green Yellow

HEX

RGB

HSL

OKLCH

CMYK
20 0 100 0

On text
17.84:1 AAA

On white
1.18:1 Fail

Used · --token-6ecb0037-dab8-4348-b657-00f38b638028, --token-224bfd43-9bd7-4029-a74c-dfb7dcb6da6e
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 27 100 0

On text
12.36:1 AAA

On white
1.70:1 Fail

Background · --token-be530db7-18b2-4273-89ab-17e94ce4aa9f, inline style on <div>
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
46 65 0 0

On text
4.92:1 AA

On white
4.27:1 AA large

Used · --token-0c90a592-7eca-4244-9a95-72d774c55a0e, --border-color

Gradients

linear-gradient(#0000 0%,#000 100%)
linear-gradient(90deg,#0000 0%,#000 100%)
linear-gradient(90deg,#0000 0%,#000 96.7656%)

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.

Inter

Aa 100 Aa 900

Inter

Served from framerusercontent.com · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · headings · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Body 12px

The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, …

Paragraph 16px / 1.2em weight 400 · none · Inter

The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, …

Button 12px

Get started

Link 16px / weight 400 · none · Inter

Sizes in use

Most common across the site

16pxline 1.2em · 5 rules
12px1 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

8px · 36×
inherit · 20×
15px · 7×
10px · 7×
initial · 5×
25px · 4×

Shadows

0 2px 6px #0003
0 10px 20px #0000000d
0 1px 2px #0099ff26,0 2px 4px #09f3

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

809

810

1199

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

1500 px

1400 px

1240 px

1200 px

660 px

Back to top ↑

Notes

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

Notes

● FineThe title is 48 characters, short enough to show in full in search 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 Framer use?: Framer’s website uses one typeface: Inter (headings and body text), served from framerusercontent.com.
What are Framer’s brand colours?: The main colours on framer.com are Dodger Blue (#0099FF), Medium Sea Green (#00BB88), Lime Green (#4CD963), Green Yellow (#CBFF00), Golden Rod (#FFBB00) and Medium Slate Blue (#8A58FF).
What colour is Framer’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Framer’s logo from?: The logo shown in this guide was found on framer.com’s homepage. For official logo files and usage rules, check Framer’s own brand or press page.
Is this Framer’s official style guide?: No. SiteStyleGuide made it from framer.com’s public web pages on 27 October 2026, and isn’t affiliated with Framer. 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

framer-com-tokens.css

Download

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

/* framer.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/framer.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-near-black: #242424;
  --colour-grey: #999999;
  --colour-black: #000000;
  --colour-white: #FFFFFF;
  --colour-dodger-blue: #0099FF;
  --colour-medium-sea-green: #00BB88;
  --colour-lime-green: #4CD963;
  --colour-green-yellow: #CBFF00;
  --colour-golden-rod: #FFBB00;
  --colour-medium-slate-blue: #8A58FF;
  --gradient-1: linear-gradient(#0000 0%,#000 100%);
  --gradient-2: linear-gradient(90deg,#0000 0%,#000 100%);
  --gradient-3: linear-gradient(90deg,#0000 0%,#000 96.7656%);

  /* Typefaces */
  --font-headings: 'Inter', 'Inter Placeholder', sans-serif;

  /* Type scale */
  --text-body: 12px;
  --text-p: 16px;
  --leading-p: 1.2em;
  --text-button: 12px;
  --text-a: 16px;

  /* Shape */
  --radius-1: 8px;
  --radius-2: inherit;
  --radius-3: 15px;
  --radius-4: 10px;
  --radius-5: initial;
  --radius-6: 25px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 809px;
  --breakpoint-2: 810px;
  --breakpoint-3: 1199px;
  --breakpoint-4: 1200px;
  --max-width-1: 1500px;
  --max-width-2: 1400px;
  --max-width-3: 1240px;
  --max-width-4: 1200px;
  --max-width-5: 660px;
}

{
    "site": "framer.com",
    "source": "https://sitestyleguide.com/framer.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Near Black",
            "hex": "#242424",
            "rgb": [
                36,
                36,
                36
            ]
        },
        {
            "name": "Grey",
            "hex": "#999999",
            "rgb": [
                153,
                153,
                153
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#0099FF",
            "rgb": [
                0,
                153,
                255
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00BB88",
            "rgb": [
                0,
                187,
                136
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#4CD963",
            "rgb": [
                76,
                217,
                99
            ]
        },
        {
            "name": "Green Yellow",
            "hex": "#CBFF00",
            "rgb": [
                203,
                255,
                0
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#FFBB00",
            "rgb": [
                255,
                187,
                0
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#8A58FF",
            "rgb": [
                138,
                88,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Inter",
            "stack": "Inter, Inter Placeholder, sans-serif",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                600,
                700,
                800,
                900
            ],
            "source": "Served from framerusercontent.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 framer.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/framer.com" title="Framer 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 ↑

Framerstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

Grey

Black

White

Colours

Dodger Blue

Medium Sea Green

Lime Green

Green Yellow

Golden Rod

Medium Slate Blue

Gradients

Inter

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

ITFixio

IGN

Deezer

AI-Native Cloud

Gismeteo

Kenhub

ticketportal.cz

GetResponse

Framerstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

Grey

Black

White

Colours

Dodger Blue

Medium Sea Green

Lime Green

Green Yellow

Golden Rod

Medium Slate Blue

Gradients

Inter

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run framer.com?

Also set in Inter

ITFixio

IGN

Deezer

AI-Native Cloud

Similar colours

Gismeteo

Kenhub

ticketportal.cz

GetResponse

Title &
description