Design system do framer.com

---
version: alpha
name: "framer.com"
description: "Design system extracted from https://www.framer.com/ on 2026-09-28"
colors:
  background: "#000000"
  surface: "#111111"
  surface-2: "#002137"
  surface-3: "#1a1a1a"
  foreground: "#ffffff"
  muted-foreground: "#999999"
  primary: "#ffffff"
  on-primary: "#111111"
  secondary: "#0099ff"
  border: "#0f0f0f"
typography:
  headline-display:
    fontFamily: "GT Walsheim Medium"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: "-2.16px"
  headline-lg:
    fontFamily: "GT Walsheim Medium"
    fontSize: "44px"
    fontWeight: 500
    lineHeight: "1.1"
    letterSpacing: "-1.76px"
  headline-md:
    fontFamily: "Inter Variable"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "1.35"
    letterSpacing: "-0.2px"
  body-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.63"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: "-0.2px"
  code:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.52"
    letterSpacing: "-0.01px"
rounded:
  none: "0px"
  md: "8px"
  xl: "15px"
  full: "9999px"
spacing:
  unit: "5px"
  1: "5px"
  2: "10px"
  3: "15px"
  4: "20px"
  5: "25px"
  6: "40px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#0000ee"
    typography: "{typography.button}"
    rounded: "8px"
    height: "30px"
    padding: "8px 10px"
  button-ghost:
    backgroundColor: "#000000"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "50px"
    padding: "15px 15px"
  button-secondary:
    backgroundColor: "#1f1f1f"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "30px"
    padding: "0px 10px"
---

# framer.com

## Overview

Framer: AI design agent: Go from idea to launch with an agent that designs and builds on the canvas. Keep each change editable, with hosting, security, analytics, CMS, and SEO built in.

Gently rounded controls, layered shadows for depth, confident display type at 54px / 500, a single neutral accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 3176 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#000000` | Page background |
| surface | `#111111` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#002137` | Secondary surface |
| surface-3 | `#1a1a1a` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#999999` | Secondary text, captions |
| primary | `#ffffff` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#0099ff` | Secondary accent (blue) |
| border | `#0f0f0f` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#111111`, `#262626`, `#002137`, `#1a1a1a`, `#0099ff`, `#ffffff`, `#383838`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)`; `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 96.7656%)`; `linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)`.

The accent `#ffffff` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **GT Walsheim Medium** for h1, h2: self-hosted webfont, not freely available; use **Plus Jakarta Sans** from Google Fonts as the stand-in.
- **Inter Variable** for h3: Google Fonts (Inter Variable).
- **Inter** for body, label, button: Google Fonts (Inter).
- **JetBrains Mono** for code: Google Fonts (JetBrains Mono).

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | GT Walsheim Medium | 54px | 500 | 1 | -2.16px |
| headline-lg | GT Walsheim Medium | 44px | 500 | 1.1 | -1.76px |
| headline-md | Inter Variable | 18px | 400 | 1.35 | -0.2px |
| body-md | Inter | 12px | 400 | 1.63 | normal |
| label-md | Inter | 12px | 400 | 1.33 | normal |
| button | Inter | 16px | 500 | 1 | -0.2px |
| code | JetBrains Mono | 12px | 400 | 1.52 | -0.01px |

Type scale in use: 12px, 13px, 14px, 16px, 18px, 20px, 44px, 54px. Base body size 12px.

The H1 renders at 54px / 500, start aligned, up to 721px wide, tracking -2.16px. Sample: "Framer is the design agent for every step from idea to launch".

## Layout

- Spacing unit: 5px. Scale in use: 5, 10, 15, 20, 25, 40 (px).
- Flex and grid gaps: 5, 10, 15, 20, 25, 30 px.
- Content max width: 1200px, centred.
- Breakpoints: 809px, 810px, 1199px, 1200px.
- Header: 64px tall, relative, background `rgba(0, 0, 0, 0)`; 10 nav links at 12px / 400 (Framer · Platform · Solutions · Resources · Enterprise · Pricing · Log in · Sign up).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`
- shadow-2: `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px`
- shadow-3: `rgba(0, 153, 255, 0.15) 0px 1px 2px 0px, rgba(0, 153, 255, 0.2) 0px 2px 4px 0px`
- shadow-4: `rgba(0, 0, 0, 0.2) 0px 27.8358px 44.5373px 0px`

## Shapes

- Buttons: 8px
- Inputs: 0px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, md 8px, xl 15px, full 9999px

## Components

### Button, primary

Background `#ffffff`, text `#0000ee`, border none, radius 8px, height 30px, padding 8px 10px, 12px / 400. Sample label: "Sign up".

### Button, ghost

Background transparent (it sits on `#000000`, so place it on that colour), text `#000000`, border none, radius 8px, height 50px, padding 15px 15px, 12px / 400. Sample label: "Copy logo SVG".

### Button, secondary

Background `#1f1f1f`, text `#000000`, border none, radius 8px, height 30px, padding 0px 10px, 12px / 400. Sample label: "Copy".

### Link

Colour `#ffffff99`, no underline at rest, weight 400.

## Dark Mode

The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1200px | 120px | 12px | 54px, 2 lines, start | 64px, 10 links, 3 CTA | media below text | 2→1 col; 2→1 col; 2→2 col | content-width |
| laptop 1024px | 984px | 20px | 12px | 42px, 3 lines, start | 64px, 10 links, 3 CTA | media below text | 2→1 col; 2→1 col; 8→3 col | content-width |
| tablet 768px | 728px | 20px | 12px | 36px, 3 lines, start | 64px, 10 links, 3 CTA | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 350px | 20px | 12px | 36px, 3 lines, start | 64px, 10 links, 3 CTA | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |

- H1 goes 54px → 36px (67%), 2 → 3 lines.
- Nav never collapses to a hamburger (10 links still visible at 390px).
- Body text stays 12px at every width.
- Phone side gutter 20px.
- Section top padding 100px → 60px.

## Interaction & Motion

1 elements carry transitions; typical 0.3s with ease-in-out, mostly on all. No running keyframe animations at rest.

- Hover on button-primary ("Sign up"): no visible change; cursor pointer.
- Hover on button-secondary ("Copy logo SVG"): no visible change; cursor pointer.
- Hover on nav-link ("Framer"): no visible change; cursor pointer.
- Focus on button-primary: outline 1px auto rgb(16, 16, 16), offset 1px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- No dropdown menus found in the header.
- 20 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 5px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#ffffff` for actions and focus; never paint large areas with it.
- Do keep body text at 12px in Inter and headings in GT Walsheim Medium.
- Do match corner radii per element class (buttons 8px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.