Framer

Framer sets large GT Walsheim Medium headlines with tight tracking on a dark void canvas. Cobalt (#0066ff) is reserved for actions, on buttons with 0px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 15px and 6px on smaller elements.

framer.com ↗

Colors

Cobalt

#0066ff

Primary actions and links

Soft Cobalt

#0099ff

Secondary accent and highlights

Void

#000000

Page canvas

Soft Void

#000000

Headlines and body copy

Bone White

#ffffff

Surface or divider

Void 2

#111111

Surface or divider

Silver Mist

#999999

Supporting colour

Graphite

#171717

Surface or divider

Ash

#666666

Supporting colour

Type scale

DisplayFramer is the design agent for every step from idea to launchGT Walsheim Medium · 54px · 500

HeadingAgents that work alongside you, not instead of youGT Walsheim Medium · 44px · 500

SubheadingDesign with an agentInter Variable · 18px · 400

BodyFramerInter Variable · 14px · 400

NavFramersans-serif · 12px · 400

Buttons

Sign upGet started for freeCopyCopyButton

Style reference measured from the public page at framer.com on 2026-10-12 for design education. Framer and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Framer — Style Reference
> Framer sets large GT Walsheim Medium headlines with tight tracking on a dark void canvas. Cobalt (#0066ff) is reserved for actions, on buttons with 0px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 15px and 6px on smaller elements.

**Theme:** dark · **Source:** https://www.framer.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#0066ff` | `--color-accent` | Primary actions and links |
| Soft Cobalt | `#0099ff` | `--color-secondary` | Secondary accent and highlights |
| Void | `#000000` | `--color-canvas` | Page canvas |
| Soft Void | `#000000` | `--color-ink` | Headlines and body copy |
| Bone White | `#ffffff` | `--color-surface-1` | Surface or divider |
| Void 2 | `#111111` | `--color-surface-2` | Surface or divider |
| Silver Mist | `#999999` | `--color-surface-3` | Supporting colour |
| Graphite | `#171717` | `--color-surface-4` | Surface or divider |
| Ash | `#666666` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | GT Walsheim Medium | 54px | 500 | 1.00 | -0.040em |
| Heading | GT Walsheim Medium | 44px | 500 | 1.10 | -0.040em |
| Subheading | Inter Variable | 18px | 400 | 1.35 | -0.011em |
| Body | Inter Variable | 14px | 400 | 1.00 | -0.001em |
| Nav | sans-serif | 12px | 400 | normal | 0 |

Font families on the page: sans-serif, Inter Variable, GT Walsheim Medium, Inter, Input Mono Bold, Input Mono Regular. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 15px, 6px, 20px, 4px
- Primary button: background `#0066ff`, text `#ffffff`, radius 0px, padding 0px, 16px / 500

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Spotify