# Framer design system: colors, fonts and tokens

> 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.

Source: https://framer.com, captured 25 June 2026. Page: https://designlang.app/design-system/framer

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#0066ff` | 1 |
| Secondary | `#0000ee` | 746 |
| Accent | `#0099ff` | 56 |

Neutrals: `#000000`, `#ffffff`, `#999999`, `#242424`, `#666666`, `#111111`, `#cccccc`, `#303030`, `#878787`, `#444444`

Backgrounds: `#000000`, `#111111`, `#171717`, `#0099ff`, `#ffffff`

## Fonts

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

## 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 |
| 9px | 700 | 10.8px | normal | p |
| 7px | 400 | 7px | 0.21px | p |
| 6px | 400 | 6px | normal | p |

## Spacing

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

## Radii

1px, 4px, 7px, 10px, 14px, 18px, 21px, 25px, 30px, 50px, 100px

## Motion

Feel: smooth. Durations: 300ms.

## Audit

Overall 78/100 (grade C).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/framer-com/framer-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/framer-com/framer-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/framer-com/framer-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/framer-com/framer-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/framer-com/framer-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/framer-com/framer-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/framer-com/framer-com-DESIGN.md)

Regenerate: `npx designlang framer.com`