# Framer — Design Reference

> A black canvas where the product is the only light source

**Theme:** dark · **Measured from:** framer.com (English, 1440 px)

Framer looks like its own editor with the lights off. The canvas is pure black (`#000000`) from top to bottom, headlines are white in a tight geometric sans (GT Walsheim 500, tracked to -0.04em), and everything else is Inter in gray: `#999999` for body, `#cccccc` for navigation. There is no marketing accent color. The only color on the page is Framer Blue `#0099ff`, and it belongs to the product: canvas frame borders, selection outlines, the Publish button and blue-tinted panels glowing out of the dark. Buttons are small and quiet — a white 8px rectangle with black text, next to a translucent gray twin. Big product screenshots in 20px-radius frames do the selling; the copy stays short.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Black | `#000000` | Page canvas, every section |
| White | `#ffffff` | Headlines, primary text, primary button fill |
| Ash | `#999999` | Subheadlines and body (white at 60%) |
| Silver | `#cccccc` | Navigation links, secondary labels |
| Smoke | `#666666` | Tertiary text, timestamps |
| Carbon | `#111111` | Editor panels, feature tiles |
| Graphite | `#171717` | Large media frames, nested panels |
| Iron | `#1f1f1f` | Small rounded tiles, hover fills |
| Glass | `#1a1a1a` | Secondary button fill (white at 10%) |
| Framer Blue | `#0099ff` | Editor accent: frame borders, selections, Publish button, 20% tinted panels |
| Mint | `#00bb88` | Small status labels inside product UI |
| Violet | `#8856ff` | Rare label accent inside product UI |

**Blue is a product color, not a CTA color.** Use `#0099ff` for 1px outlines (full or ~40% opacity) and for panels filled at ~20% opacity, as if they were selected frames in the editor. Marketing buttons stay white or gray.

The orange text (`#d67a5c`) in the measurements comes from an embedded third-party terminal (Claude Code) and is not part of the brand.

## Typography

**GT Walsheim** (Medium 500) for section headlines only. Substitute: **Figtree 500** from Google Fonts.
**Inter** for everything else (400 to read, 500–600 for labels and buttons) — free on Google Fonts.
**Input Mono** for tiny 12px technical labels. Substitute: **JetBrains Mono** (Framer also uses it for code).

- Headlines are always weight 500, white, with tracking at -0.04em (`-2.16px` at 54px, `-1.76px` at 44px) and line-height near 1. They are short and break into two lines.
- Small headings (h3) are not bold: Inter 400 at 15–18px in white, with gray Inter body directly underneath.
- Body has slight negative tracking (`-0.1px` to `-0.2px`).

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 54px | 500 | 1 | -2.16px |
| Heading | 44px | 500 | 1.1 | -1.76px |
| Body large | 18px | 400 | 1.35 | -0.2px |
| Body | 15px | 400 | 1.35 | -0.1px |
| Body small | 14px | 400 | 1.4 | -0.1px |
| Label | 13px | 500 | 1.6 | 0 |
| Button | 14px | 500 | 1 | 0 |
| Mono | 12px | 400 | 1.33 | 0 |
| Caption | 12px | 500 | 1.4 | 0 |

## Shape and spacing

- **Buttons:** 8px radius. Small and compact (30–35px tall).
- **Media frames:** 20px radius with a faint 1px white-at-6% border. Small tiles: 15px.
- **Pills and badges:** 100px.
- **Feature rows:** square, divided by 1px hairlines rather than separate cards.
- **Base unit:** 4px. Scale: 4, 8, 10, 14, 20, 40, 80, 240.
- **Content width:** 1200px, centered.
- **Section gap:** very large, about 240px of black between sections.

## Components

### Primary button
White `#ffffff` fill, black text, 8px radius, padding `8px 10px` in the nav (30px tall) and slightly larger in the hero (about 34px), Inter 500 at about 14px. No border, no shadow. Labels: "Sign up", "Get started for free".

### Secondary button
Glass fill (white at 10%, renders `#1a1a1a`), white text, 8px radius, padding `10px 14px` (35px tall), optional trailing icon (download arrow). Sits right next to the primary. Labels: "Download app", "Start with agents".

### Navigation
Transparent bar on black. Framer mark and wordmark on the left, then Platform, Solutions, Resources (with small chevrons), Enterprise, Pricing in Silver Inter 500 at about 15px. Right side: "Log in" as a plain gray link and "Sign up" as the small white button.

### Hero media frame
Full content-width panel on `#111111`/black with a 20px radius and a hairline border, holding an editor recording: blue-outlined device frames ("Desktop 1200", "Tablet", "Mobile") with a blue glow. Sits directly under the hero buttons.

### Editor screenshot
A real Framer canvas in a dark panel: left sidebar (Pages, Layers, Assets), center canvas with a blue-framed page, right agent/style panel, and a blue "Publish" pill in the top bar. Use it as the main proof object instead of illustrations.

### Feature triad
Three columns under a screenshot, separated by 1px hairlines: small line icon, white Inter 400 title at 15px, then two or three lines of Ash body.

### Logo grid
Customer wordmarks in white, two rows of four, centered on black with plenty of space around.

## Do

- Keep the whole page on pure black and let screenshots supply the light.
- Set headlines in weight 500 with tight -0.04em tracking.
- Use gray Inter for body and keep h3s at regular weight.
- Use Framer Blue only on product-like elements: outlines, selections, Publish.
- Pair a white primary button with a translucent gray secondary.
- Leave huge black gaps between sections.

## Don't

- Don't make CTAs blue or add a gradient button.
- Don't use bold headlines or loose tracking.
- Don't put body copy in pure white; use `#999999`.
- Don't round buttons into pills; 8px only.
- Don't use dark-gray page sections; surfaces are panels inside the black, not bands.
- Don't add heavy drop shadows; depth comes from glows and hairlines.

## Layout

Left-aligned hero: 54px two-line headline, one gray sentence, then the white + gray button pair, with a small "New: Framer MCP →" link aligned right on the same row. Directly below, a 1200px-wide media frame with the editor demo. Then a logo grid, and a repeating pattern: 44px left-aligned headline (optional small gray button on the right), a large product screenshot, and a three-column feature row divided by hairlines. Sections are separated by about 240px of black.

## Agent prompt guide

- Text: `#ffffff` · Body: `#999999` · Nav: `#cccccc` · Muted: `#666666`
- Canvas: `#000000` · Panels: `#111111` · Nested: `#171717` · Tiles: `#1f1f1f`
- Primary: `#ffffff` fill, black text · Secondary: `rgba(255,255,255,.1)` · Product accent: `#0099ff`

Example prompts:

1. "Hero on pure black #000000: 54px Figtree 500 headline in white, line-height 1, letter-spacing -2.16px; one sentence of Inter 18px #999999 below; then a white button (8px radius, padding 8px 12px, Inter 500 14px, black text) next to a rgba(255,255,255,.1) button with white text."
2. "Editor-style panel: background #111111, 20px radius, 1px border rgba(255,255,255,.06); inside, a page frame with a 1px #0099ff border and a fill of rgba(0,153,255,.2), labeled 'Desktop 1200' in 12px JetBrains Mono #0099ff."
3. "Feature row: three equal columns on black, separated by 1px rgba(255,255,255,.06) lines; each with a small white line icon, a 15px Inter 400 white title and 14px Inter #999999 body."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ash: #999999;
  --color-silver: #cccccc;
  --color-smoke: #666666;
  --color-carbon: #111111;
  --color-graphite: #171717;
  --color-iron: #1f1f1f;
  --color-glass: #1a1a1a;
  --color-framer-blue: #0099ff;
  --color-mint: #00bb88;
  --color-violet: #8856ff;

  /* Fonts */
  --font-display: 'GT Walsheim', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Input Mono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 54px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -2.16px;
  --text-display--font-weight: 500;
  --text-heading: 44px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -1.76px;
  --text-heading--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.35;
  --text-body-lg--letter-spacing: -0.2px;
  --text-body-lg--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.35;
  --text-body--letter-spacing: -0.1px;
  --text-body--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.4;
  --text-body-sm--letter-spacing: -0.1px;
  --text-body-sm--font-weight: 400;
  --text-label: 13px;
  --text-label--line-height: 1.6;
  --text-label--font-weight: 500;
  --text-button: 14px;
  --text-button--line-height: 1;
  --text-button--font-weight: 500;
  --text-mono: 12px;
  --text-mono--line-height: 1.33;
  --text-mono--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 20px;
  --radius-tags: 100px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-bevel: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
  --shadow-blue-glow: 0 1px 2px rgba(0, 153, 255, 0.15), 0 2px 4px rgba(0, 153, 255, 0.2);
  --shadow-float: 0 30px 48px rgba(0, 0, 0, 0.2);

  /* Layout */
  --container-page: 1200px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ash: #999999;
  --color-silver: #cccccc;
  --color-smoke: #666666;
  --color-carbon: #111111;
  --color-graphite: #171717;
  --color-iron: #1f1f1f;
  --color-glass: #1a1a1a;
  --color-framer-blue: #0099ff;
  --color-mint: #00bb88;
  --color-violet: #8856ff;

  /* Fonts */
  --font-display: 'GT Walsheim', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Input Mono', 'JetBrains Mono', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 54px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -2.16px;
  --text-display--font-weight: 500;
  --text-heading: 44px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -1.76px;
  --text-heading--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.35;
  --text-body-lg--letter-spacing: -0.2px;
  --text-body-lg--font-weight: 400;
  --text-body: 15px;
  --text-body--line-height: 1.35;
  --text-body--letter-spacing: -0.1px;
  --text-body--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.4;
  --text-body-sm--letter-spacing: -0.1px;
  --text-body-sm--font-weight: 400;
  --text-label: 13px;
  --text-label--line-height: 1.6;
  --text-label--font-weight: 500;
  --text-button: 14px;
  --text-button--line-height: 1;
  --text-button--font-weight: 500;
  --text-mono: 12px;
  --text-mono--line-height: 1.33;
  --text-mono--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--font-weight: 500;

  /* Radius */
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 20px;
  --radius-tags: 100px;

  /* Spacing */
  --spacing: 4px;

  /* Shadows */
  --shadow-bevel: inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(255, 255, 255, 0.35);
  --shadow-blue-glow: 0 1px 2px rgba(0, 153, 255, 0.15), 0 2px 4px rgba(0, 153, 255, 0.2);
  --shadow-float: 0 30px 48px rgba(0, 0, 0, 0.2);

  /* Layout */
  --container-page: 1200px;
}
```

---

*Measured from https://www.framer.com/ on 2026-10-28 by Faundr. Inspired by Framer; not its official design system and not affiliated with Framer.*