---
title: "Framer design system"
variant: extended
source: https://www.framer.com/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/framer-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Framer · Design System

> A quiet black canvas for bold, editable ideas.

**Theme:** dark · **Industry:** ai · **Source:** https://www.framer.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Framer’s homepage pairs a near-black canvas and crisp white typography with vivid product demonstrations. Broad, carefully paced sections let the interface, customer work, and community content provide the color.

## North star

Keep the site chrome quiet and dark so large, editable product demonstrations and customer work become the focal point.

## Overview

The page is built on a dominant #000000 canvas, with white headings and muted gray supporting text keeping attention on the message and product. Blue is used sparingly for interface emphasis, links, and fine outlines; most of the vivid blue in the first viewport belongs to the product demonstration rather than the surrounding brand chrome. GT Walsheim Medium gives headlines a distinctive, compact shape, while Inter Variable carries readable body copy and navigation. Large left-aligned statements alternate with framed interface media, customer examples, logo rows, and community content. The overall presentation is dark and restrained, but not visually empty: large showcase panels and colorful work samples create contrast within the black field. Rounded dark cards and subtle hairlines distinguish UI layers without introducing bright section bands. Generous gaps between major content groups contrast with compact navigation and dense product screens, making the long homepage feel paced rather than uniform.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and background for the navigation, hero, section bands, and footer. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Primary muted text for supporting copy, secondary navigation, and low-emphasis links. |
| Signal White | `#ffffff` | `--color-signal-white` | brand | Headlines, body text, logos, and the high-contrast sign-up button. |
| Panel Charcoal | `#111111` | `--color-panel-charcoal` | surface | Dark card and product-interface surface, distinct from the black canvas. |
| Electric Blue | `#0099ff` | `--color-electric-blue` | accent | Fine interface borders, selected product details, and occasional accent links. |
| Card Graphite | `#171717` | `--color-card-graphite` | surface | Raised cards, navigation details, and compact secondary interface panels. |
| Deep Azure | `#00406b` | `--color-deep-azure` | semantic | Dark blue edge and interface detail, most visible within product-screen imagery. |
| Action Blue | `#0066ff` | `--color-action-blue` | accent | Bright blue action treatment in interface controls; use sparingly outside product UI. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | neutral | Lighter secondary text in navigation and supporting interface copy. |
| Midnight Teal | `#002238` | `--color-midnight-teal` | surface | Deep blue-black interface panel tone, appearing in product and feature imagery. |
| Slate Charcoal | `#262626` | `--color-slate-charcoal` | surface | Secondary card and interface surface for layering against black and charcoal. |
| Terracotta Note | `#d67a5c` | `--color-terracotta-note` | semantic | Small warm-colored text accent; not a dominant color of the page chrome. |
| Muted Stone | `#666666` | `--color-muted-stone` | neutral | Low-emphasis text or interface detail, used below the contrast level of body copy. |
| Ocean Edge | `#0a4973` | `--color-ocean-edge` | semantic | Dark blue border detail associated with product-interface visuals. |
| Graphite Ink | `#222222` | `--color-graphite-ink` | surface | Subtle button, card, and text-area surface within dark interface components. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#111111` (Panel Charcoal) · `--color-surface-2` → `#171717` (Card Graphite) · `--color-surface-3` → `#002238` (Midnight Teal) · `--color-surface-4` → `#262626` (Slate Charcoal) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#999999` (Quiet Gray) · `--color-text-subtle` → `#cccccc` (Soft Silver) · `--color-border` → `#0099ff` (Electric Blue) · `--color-accent` → `#0099ff` (Electric Blue) · `--color-accent-2` → `#0066ff` (Action Blue) · `--color-accent-3` → `#d67a5c` (Terracotta Note) · `--color-on-accent` → `#ffffff` (Signal White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#ffffff` | `#002238` | 16.33:1 | AAA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#111111` | 6.63:1 | AA |
| `#999999` | `#171717` | 6.29:1 | AA |
| `#999999` | `#002238` | 5.73:1 | AA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#cccccc` | `#111111` | 11.76:1 | AAA |

### Gradients

- `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%)`
- `linear-gradient(90deg, rgba(0, 153, 255, 0.1) 0%, rgba(28, 28, 28, 0.5) 61%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-inter` | webfont | 500, 600, 400, 700 | Navigation, links, and compact interface labels. | Inter |
| Inter Variable | `--font-body` | webfont | 400 | Body copy, captions, and navigation-scale supporting text. | Inter |
| Input Mono Regular | `--font-mono` | webfont | 400, 700 | Code-like or technical labels within product-interface details. | IBM Plex Mono |
| GT Walsheim Medium | `--font-display` | webfont | 500 | Large homepage and section headings. | Manrope |
| Input Mono Bold | `--font-input-mono-bold` | webfont | 700 | Emphasized technical labels in interface examples. | IBM Plex Mono |

- **Inter:** Use restrained medium weights for links and UI; keep labels short and avoid all-caps styling.
- **Inter Variable:** Regular-weight sans-serif with slightly tight tracking; preserve comfortable line spacing for supporting copy.
- **Input Mono Regular:** Use sparingly for small technical text; retain a monospaced, utilitarian feel.
- **GT Walsheim Medium:** Medium weight, compact line height, and tight negative tracking give headlines a close-set, modern shape.
- **Input Mono Bold:** Bold monospaced emphasis should remain limited to product UI rather than editorial headlines.

### Type scale — Custom (ratio ≈ 1.732, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 500 | 1 | -0.04em | — | GT Walsheim Medium | Main hero statement, set large and tightly tracked. |
| h2 | 44px | 500 | 1.1 | -0.04em | — | GT Walsheim Medium | Major section titles and feature-block headings. |
| body | 18px | 400 | 1.35 | -0.011em | — | Inter Variable | Supporting descriptions and explanatory homepage copy. |
| caption | 14px | 400 | 1.4 | -0.007em | — | Inter Variable | Small supporting labels around media and interface examples. |
| nav | 14px | 400 | 1.4 | -0.007em | — | Inter Variable | Header navigation and compact menu labels. |
| link | 12px | 500 | 1.3 | 0 | — | Inter | Short calls to action and inline text links. |
| code | 12px | 400 | 1.33 | 0 | — | Input Mono Regular | Technical or code-like labels inside product UI. |

OpenType features in use: `"cv01", "cv05", "cv09", "cv11", "ss03"`, `"cv01", "cv05", "cv09", "cv11"`, `"blwf", "cv01", "cv05", "cv09", "cv11"`, `"cv01", "cv05", "cv09", "cv11", "tnum"`.

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 1, 3, 4, 5, 6, 8, 10, 15, 20, 25, 30, 40 px.
- Section rhythm 40px · element gap 10px · card padding 30px · max content width 1200px.

A centered, wide page frame supports a compact top navigation and a left-aligned hero. Major sections are arranged as long vertical bands on the same black canvas, with generous breathing room between stories and tighter spacing within cards and product screens. Showcase media, logos, feature panels, and editorial examples create changing widths and compositions instead of a repetitive grid. Small UI labels and dense interface content contrast with broad headlines and relatively open section spacing.

## Shape & elevation

- Radius: button `8px` · card `20px` · media `8px` · nav `8px` · link `18px` · xs `1px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px` · pill `9999px`
- Shadow `sm` (other, button): `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- Shadow `hairline-2` (other): `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px`
- Shadow `sm-2` (other): `rgba(0, 153, 255, 0.15) 0px 1px 2px 0px, rgba(0, 153, 255, 0.2) 0px 2px 4px 0px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.2) 0px 26.049px 41.6783px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.2) 0px 35.9341px 57.4945px 0px`

Most content sits close to the black canvas, with dark card surfaces and thin, low-contrast borders defining groups. Use subtle shadows only to separate floating interface elements or cards; avoid broad glows and heavy elevation. The blue product-demo outlines are localized UI emphasis, not a page-wide border treatment.

## Imagery

The page relies on product-interface demonstrations, video-like showcases, customer websites, and community content rather than a single illustration style. Media is presented in large dark frames with restrained outlines; the showcased work supplies most of the vivid color and photographic variety. Keep the surrounding layout quiet so colorful page previews and blue-lit interface edges remain legible.

## Components

### Header navigation

Compact horizontal navigation on the black canvas, with muted links, a white Framer mark, and a high-contrast white sign-up control.

### Hero statement

Large, left-aligned white headline followed by a primary light CTA, a dark secondary action, and a small right-aligned news link.

### Product showcase frame

Large framed interface demonstration with dark controls and selective electric-blue outlines; allow the product screen to carry the visual detail.

### Customer logo row

Compact collection of customer marks on black, primarily white or muted, with clear gaps between logos.

### Feature panels

Dark product and platform surfaces arranged as varied-width cards, with concise labels and product UI imagery.

### Community content

Dense, dark community or template interface preview presented as a large media block within a spacious section.

### Footer link groups

Multiple compact columns of muted links on black, with a small utility row beneath.

### Measured component styles

- **Primary button** (“Copy”): background #0066ff · text #ffffff · radius 0px · padding 0px · 500 16px Inter
- **Secondary button** (“Copy”): background #1f1f1f · text #000000 · radius 8px · padding 0px 10px · 400 12px sans-serif
- **Link** (“Meet our customers”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 500 12px Inter
- **Card** (“Site Settings Title Comet Browser: a Per”): background #111111 · text #000000 · radius 25px · padding 30px · 400 12px sans-serif
- **Navigation item** (“Framer Platform Solutions Resources Ente”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #000000 as the dominant page canvas.
- Set large headlines in a distinctive, tightly tracked sans-serif.
- Keep most page text white or muted gray.
- Reserve vivid blue for interaction and product-interface emphasis.
- Use dark cards to separate content without adding bright section bands.
- Give major showcase sections room to breathe.
- Let customer work supply color and visual variety.

## Don't

- Do not turn the page into a bright, multi-colored marketing layout.
- Do not use blue as a large background across ordinary sections.
- Do not compete with product demos using decorative illustration.
- Do not make every card equally prominent or heavily elevated.
- Do not use oversized navigation or dense header controls.
- Do not apply technical monospace styling to editorial headlines.

## Agent prompt

Build a new Framer-style page on a dominant Canvas Black (#000000) background. Use Signal White (#ffffff) for concise, large headlines and Quiet Gray (#999999) or Soft Silver (#cccccc) for secondary copy. Pair a distinctive tightly tracked headline face with a clean Inter-like sans-serif for body text and navigation. Keep the header compact and let a broad, left-aligned hero lead into framed product media. Use Panel Charcoal (#111111), Card Graphite (#171717), and Slate Charcoal (#262626) for subtle UI surfaces; reserve Electric Blue (#0099ff) and Action Blue (#0066ff) for selected interface edges and controls. Alternate showcase media, customer marks, and varied feature panels with generous section breathing room. Keep shadows restrained, borders fine, and the surrounding chrome quieter than the product imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | cta | Centered single-column prompt area on a black canvas, followed by a compact set of suggested starting ideas. | Prompt input, Suggested prompts, Start without AI | Centered heading, Dark input surface, Compact prompt chips |
| 2 | footer | Dense multi-column directory of product, resource, solution, company, and community links, ending with a compact utility row. | Grouped navigation, Language selector, Social links | Small muted link lists, Multiple columns, Compact bottom utility bar |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/framer-com