---
site: "Framer: AI website builder for professional sites"
url: "https://framer.com"
generated_at: "2026-06-25T08:25:38.708Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: vuetify
tokens:
  colors:
    primary: "#0066ff"
    secondary: "#0000ee"
    accent: "#0099ff"
    background: "#000000"
    foreground: "#000000"
  typography:
    sans: Inter
    mono: Input Mono Regular
    base: 12
  spacing:
    base: 5
    scale: "[1, 20, 25, 30, 40, 45, 50, 55, 60, 64]"
  radii:
    xs: 1
    sm: 4
    md: 10
    lg: 14
    xl: 18
  shadows:
    sm: "rgb(17, 17, 17) 0px 0px 0px 1.5px"
    xs: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.61), dressed in **flat** material.

Component library appears to be **vuetify** (0.9).

> "Framer is the AI website builder for standout sites"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `nav → testimonial → hero → nav → logo-wall → nav → testimonial → nav → testimonials → nav → hero → nav → logo-wall → nav → nav → footer`.

Source: <https://framer.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#0066ff` | 1 |
| secondary | `#0000ee` | 746 |
| accent | `#0099ff` | 56 |
| background | `#000000` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#ffffff` · `#999999` · `#242424` · `#666666`

**Total unique colors detected:** 23.

# Typography

**Families**
- `Inter` · 304 uses
- `Inter Variable` · 169 uses
- `Times` · 61 uses
- `Input Mono Regular` · 32 uses

**Body size:** `12px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `68px` | `500` | `68px` |
| h2 | `54px` | `500` | `54px` |
| h3 | `44px` | `500` | `48.4px` |
| h4 | `20px` | `400` | `24px` |

# Layout

**Spacing base:** `5px` increments.
**Scale:** `1px` · `20px` · `25px` · `30px` · `40px` · `45px` · `50px` · `55px` · `60px` · `64px`

**Layout primitives:** 3 grid containers · 1343 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgb(17, 17, 17) 0px 0px 0px 2px`
- `sm` — `rgb(17, 17, 17) 0px 0px 0px 1.5px`
- `xs` — `rgba(0, 153, 255, 0.15) 0px 1px 2px 0px, rgba(0, 153, 255, 0.2) 0px 2px 4px 0px`
- `xs` — `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- `sm` — `rgba(0, 0, 0, 0.25) 0px 2px 4px 0px`
- `sm` — `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`

**Z-index layers:** 18 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `1px`
- `sm` — `4px`
- `md` — `7px`
- `md` — `10px`
- `lg` — `14px`
- `xl` — `18px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 7 |
| input | — | — | 2 |

# Do's and Don'ts

**Do's**
- Use `copy` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 10 font families — consider limiting to 2 (heading + body).
- Don't 16 !important rules — prefer specificity over overrides.
- Don't 50% of css is unused — consider purging.
- Don't 12508 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://framer.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._