<!-- Generated by ExtractVibe — https://extractvibe.com/brand/framer.com -->
<!-- Extracted: 2026-05-03T16:51:49.336Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Framer: Create a professional website, free. No code website builder loved by designers."
description: "Framer embodies a sophisticated, designer-first aesthetic that balances professional precision with creative freedom. The brand feels modern and efficient, leveraging a stark monochrome palette punctuated by a vibrant blue accent to convey clarity and high performance without visual clutter."
colors:
  primary: "#ffffff"
  tertiary: "#0000ee"
  neutral: "#999999"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#999999"
  link: "#0000ee"
  surface-dark: "#000000"
typography:
  display-lg:
    fontFamily: "GT Walsheim Framer Medium"
    fontSize: "110px"
    fontWeight: "500"
    lineHeight: "93.5px"
    letterSpacing: "-5.5px"
  headline-lg:
    fontFamily: "GT Walsheim Medium"
    fontSize: "62px"
    fontWeight: "500"
    lineHeight: "62px"
    letterSpacing: "-3.1px"
  headline-md:
    fontFamily: "Inter Variable"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "28.8px"
    letterSpacing: "-0.01px"
  body-md:
    fontFamily: "sans-serif"
    fontSize: "12px"
    fontWeight: "400"
rounded:
  sm: "11.28px"
  md: "40px"
  lg: "100px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#0000ee"
    rounded: "15px"
    padding: "6px 10px 7px"
    fontSize: "12px"
    fontWeight: "400"
    borderColor: "#0000ee"
---

# Framer: Create a professional website, free. No code website builder loved by designers. — Design System

## Overview

Framer's design system manifests a sophisticated, designer-first aesthetic. It embodies the archetypes of The Creator and The Sage, presenting a professional yet empowering digital environment. The visual language aligns with comparable brands like Linear, Vercel, Stripe, and Notion, emphasizing clarity, precision, and high performance. This is achieved through a minimalist approach that prioritizes content and functionality over decorative elements. The emotional register is one of controlled creativity and intelligent efficiency, designed to instill confidence and facilitate focused work.

This design system deliberately avoids visual clutter, excessive ornamentation, and whimsical elements. It is not playful or overtly casual. Instead, it projects an image of serious design capability and streamlined operation. The stark monochrome palette, punctuated by a vibrant blue accent, reinforces this commitment to clarity and performance, ensuring that the interface remains intuitive and unobtrusive. The design is engineered to support creative freedom within a highly structured and professional framework, reflecting Framer's core offering as a powerful, no-code website builder for designers.

**Key characteristics:**

- Vibe — minimalist, designer-centric, professional, clean, modern, efficient
- Archetypes — The Creator, The Sage
- Comparable to — Linear, Vercel, Stripe, Notion
- Design era — contemporary-minimal
- Emotional tone — confident-precise
- Target audience — Professional designers, creative agencies, and tech-savvy teams who value design control and efficiency over complex coding.
- Visual energy — 6/10 (moderate)

## Colors

The color philosophy centers on a stark, high-contrast palette. Primary and surface colors are uniformly white (#ffffff), establishing a clean, expansive canvas. This minimalist base ensures content takes precedence and reduces visual noise. A vibrant blue serves as the sole accent, strategically deployed to highlight interactive elements, indicate status, and draw attention to key actions. This limited, intentional use of color reinforces Framer's commitment to clarity, efficiency, and a professional, performance-driven aesthetic.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffffff` | White |
| accent / tertiary | `#0000ee` | Blue |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#999999` | Dark Silver |
| link | `#0000ee` | Blue |
| muted | `#999999` | Dark Silver |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#000000` | Black |
| background | `#000000` | Black |

## Typography

The type system is built on modern sans-serifs, primarily GT Walsheim Framer Medium, GT Walsheim Medium, and Inter Variable. This selection communicates precision, contemporary design, and readability across diverse applications. Hierarchy is established through variations in weight and size, ensuring clear information architecture without resorting to excessive font families. The type choices reinforce Framer's professional, clean, and efficient brand identity, supporting a designer-centric experience where clarity and legibility are paramount.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| sans-serif | body | system | 400 |
| GT Walsheim Framer Medium | heading | self-hosted | 500 |
| GT Walsheim Medium | heading | self-hosted | 500 |
| Inter Variable | heading | self-hosted | 400 |
| Inter Variable | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | GT Walsheim Framer Medium | 110px | 500 | 93.5px | -5.5px |
| Heading 2 | GT Walsheim Medium | 62px | 500 | 62px | -3.1px |
| Heading 3 | Inter Variable | 24px | 400 | 28.8px | -0.01px |
| Body | sans-serif | 12px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 11.28px
- `md` — 40px
- `lg` — 100px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#0000ee`
- Radius — `15px`
- Padding — `6px 10px 7px`
- Font size — `12px`
- Font weight — `400`
- Border — ` solid #0000ee`
- Sample copy — "Sign up"

## Do's and Don'ts

### Do

- Use GT Walsheim Medium (500 weight) for all primary headings and Inter Variable (400 weight) for body text, ensuring a clear typographic hierarchy.
- Apply sentence-case capitalization to all headings and UI labels to maintain a modern, approachable tone.
- Style primary action buttons with a #0000ee background, white text, and a 40px border-radius (pill shape) to create high-contrast, clickable elements.
- Style secondary buttons with a #ffffff background, #0000ee text, and a 1px solid #0000ee border, maintaining a 15px border-radius.
- Utilize a strict monochrome base palette (#ffffff background, #000000 text) in light mode, reserving #0000ee exclusively for interactive elements and accents.
- Maintain a flat design aesthetic by strictly avoiding box-shadows and gradients on all UI components.
- Use a base spacing unit of 2px for consistent padding and margins, ensuring generous whitespace around content blocks.
- Keep copy concise and action-oriented, using imperative verbs (e.g., 'Build', 'Scale') and avoiding exclamations or emojis.

### Don't

- Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
- Do not apply any box-shadows or drop-shadows to cards, buttons, or containers; the design is entirely flat.
- Do not use gradients or color overlays; maintain solid, flat colors for all backgrounds and surfaces.
- Do not use serif fonts or decorative typefaces; stick exclusively to the specified sans-serif family (GT Walsheim/Inter).
- Do not use emojis or excessive punctuation (exclamations) in marketing copy or UI labels.
- Do not use bright or saturated colors other than #0000ee for accents; avoid warm tones or multi-color palettes.
- Do not use sharp corners (0px radius) on interactive elements; minimum radius is 11.28px for small elements and 40px for buttons.
- Do not use dense, cluttered layouts; prioritize whitespace and clear visual separation between sections.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs with low-friction qualifiers
- Rhetorical devices — parallelism, superlative, imperative

### Sample copy

> Build bettersites, faster

> No code website builder loved by designers

> Scale without switching tools

> Create, collaborate, and go live

> Framer is the site builder trusted by leading startups and Fortune 500 companies

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| logomark | color | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-3.png) | 80% |
| logomark | color | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-6.png) | 80% |
| logomark | color | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-4.png) | 80% |
| logomark | color | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-5.png) | 80% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-2.png) | 74% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-0.png) | 62% |
| favicon | — | png | [link](https://extractvibe.com/api/assets/brands/framer.com/logo-1.png) | 62% |

## Sources

- Official brand guidelines — https://framer.com/brand
- Live brand page — https://extractvibe.com/brand/framer.com
- Raw JSON — https://extractvibe.com/api/brand/framer.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/framer.com/design.md
- Extracted — 2026-05-03T16:51:49.336Z
- Generator — ExtractVibe vv1
- Quality score — 100/100