Framer design system

Framer's website (framer.com) uses a dark interface with #0066ff as its primary color and Inter as the main typeface, with Inter Variable alongside it. designlang measured 15 font sizes from 6px to 68px, 14 spacing values, 11 corner radii.

Captured 25 June 2026Dark UI3,672 elements read

Download tokens Read it yourself

Framer colors

The brand roles and neutrals framer.com renders, with how many elements use each one.

Brand colors

Primary#0066ff1 uses
Secondary#0000ee746 uses
Accent#0099ff56 uses

Neutrals

#0000005,598 uses
#ffffff622 uses
#999999370 uses
#24242475 uses
#66666654 uses
#11111130 uses
#cccccc24 uses
#30303011 uses
#8787873 uses
#4444442 uses

Backgrounds

#000000
#111111
#171717
#0099ff
#ffffff

Text colors

#0000001:1 on #000000
#0000ee2.23:1 on #000000
#ffffff21:1 on #000000
#9999997.37:1 on #000000
#9a99977.38:1 on #000000
#6666663.66:1 on #000000
#4444442.16:1 on #000000
#cccccc13.08:1 on #000000

Framer fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Inter: sans, most text (304 elements)
Inter Variable: sans, most text (169 elements)
Input Mono Regular: mono, body (32 elements)
GT Walsheim Medium: sans, most text (10 elements)
Input Mono Bold: mono, body (8 elements)
Inter Medium: sans, body (4 elements)
JetBrains Mono: mono, body (1 elements)
Inter Framer Regular: sans, body (1 elements)
Inter Framer SemiBold: sans, body (1 elements)

Body text: 12px at weight 400, line height normal.

Weights in use: 400, 500, 600, 700.

Type scale

Size	Weight	Line height	Tracking	Used on
68px	500	68px	-3.4px	h3
54px	500	54px	-2.16px	h1, h4, span
44px	500	48.4px	-1.76px	h2
20px	400	24px	-0.6px	p, h6
18px	400	23.4px	-0.01px	h3, p, mark, span
17px	400	20.4px	-0.6px	p
16px	400	normal	normal	html, head, meta, title
15px	400	19.5px	-0.01px	p
14px	400	14px	-0.01px	p, a, span, br
13px	500	20.8px	normal	p, span
12px	400	normal	normal	body, script, div, style
10px	500	14px	normal	p

Spacing and radii

Spacing scale

1px
20px
25px
30px
40px
45px
50px
55px
60px
64px
100px
120px
160px
200px

Corner radii

1px
4px
7px
10px
14px
18px
21px
25px
30px

Medium radii lead, with a few larger ones. 18 distinct box shadows.

Motion

The motion reads as smooth.

Durations

md: 300ms

Easing

ease-in-out (2 uses): cubic-bezier(0, 0, 1, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

78/100, grade C

Components found: buttons (6), cards (11), inputs (3), links (131), navigation (1), footer (1).

By category

Color Discipline	92/100
Typography Consistency	50/100
Spacing System	100/100
Shadow Consistency	78/100
Border Radius Consistency	65/100
Accessibility	100/100
CSS Tokenization	50/100

10 font families — consider limiting to 2 (heading + body)
16 !important rules — prefer specificity over overrides
50% of CSS is unused — consider purging
12508 duplicate CSS declarations

Download the tokens

The files designlang wrote for framer.com. Run it yourself for a fresh read: npx designlang framer.com.

The core values as CSS variables

:root {
  --color-primary: #0066ff;
  --color-secondary: #0000ee;
  --color-accent: #0099ff;
  --color-background: #000000;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #ffffff;
  --color-neutral-3: #999999;
  --color-neutral-4: #242424;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Inter Variable", sans-serif;
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-lg: 7px;
}

Read framer.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Resend design system

Dark UI, inter, #d6ebfd

Discord design system

Dark UI, Ggsans, #5865f2

Railway design system

Dark UI, Inter, #59497a

GitHub design system

Dark UI, Mona Sans, #f0f6fc

Quick answers

What font does Framer use?

framer.com sets most of its text in Inter (304 elements), with Inter Variable, Input Mono Regular and GT Walsheim Medium alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Framer's brand colors?

The brand roles on framer.com are primary #0066ff, secondary #0000ee and accent #0099ff, on a #000000 background. The neutrals used most are #000000, #ffffff and #999999.

How do I use the Framer design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang framer.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from framer.com's public pages on 25 June 2026, so it shows what the site renders, not Framer's internal source files. Framer is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of framer.com on 25 June 2026. Framer is a trademark of its owner; designlang is not affiliated with it. More: the full Framer brand kit, the token extraction guide and the markdown version of this page.