Design System — Framer Design System

Visual Theme & Atmosphere

Framer's marketing canvas is a near-pure black artboard. The dominant surface is {colors.canvas} — almost pure black with a faint warmth — and on top of it sits oversized white display type set in GT Walsheim Medium with letter-spacing pulled to extreme negative values (-5.5px on the 110px display, -4.25px on the 85px hero). The page reads like a poster: one assertive statement per band, generous breathing room above and below.

The single accent is {colors.accent-blue} — used scarcely, mostly for hyperlinks, selection halos, and a subtle blue-tinted shadow ring on focused inputs. The brand chrome itself is monochrome: white pill buttons, charcoal cards, gray secondary text. What makes Framer distinctive is the rhythm break — every few sections the page drops in a vibrant gradient atmosphere card: a magenta-violet spotlight, a sunset-orange wash, a coral-pink panel. These aren't section backgrounds; they're individual cards arranged in a card grid, each one a small living poster that shows what Framer can produce.

...

Key Characteristics:

Black-canvas marketing system: {colors.canvas} is the surface for hero, body, pricing, FAQ, and footer alike — no light interludes.
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: framer.com (home), /ai/, /startups/, /marketplace/templates/nudge/, /gallery/a16z-speedrun-×-tonik, /pricing.

Brand & Accent

Pure White ({colors.primary}): The brand primary surface. Every primary CTA pill, every display headline, every body line on canvas.
Sky Blue ({colors.accent-blue}): The single chromatic accent. Hyperlinks, focused-input rings, and a few selection states. Never used for backgrounds or as a brand fill.

Surface

Canvas ({colors.canvas}): Default page background — near-black with a faint warmth. Footer, pricing, hero, and FAQ all sit on it.
Surface 1 ({colors.surface-1}): One step above canvas — pricing cards, secondary buttons, mockup tiles.
...

Text

Ink ({colors.ink}): All headline and emphasized body type — pure white.
Ink Muted ({colors.ink-muted}): Secondary type — gray (#999999) used for meta info, footer columns, comparison-row labels, deselected pricing tabs. Hierarchy on the dark canvas is carried by ink → ink-muted contrast, not by weight changes.

Semantic

Success Green ({colors.semantic-success}): Pricing comparison-table checkmarks. Glyph fill, not surface.

Brand Gradient (signature)

Gradient Magenta ({colors.gradient-magenta}): Spotlight card variant.
Gradient Violet ({colors.gradient-violet}): Spotlight card variant — most common.
...

These four sit as oversized atmospheric tiles inside otherwise monochrome card grids — a dark canvas with one or two glowing spotlight cards is a recurring page signature.

primary

#ffffff

on-primary

#000000

accent-blue

#0099ff

ink

#ffffff

ink-muted

#999999

canvas

#090909

surface-1

#141414

surface-2

#1c1c1c

hairline

#262626

hairline-soft

#1a1a1a

inverse-canvas

#ffffff

inverse-ink

#000000

gradient-magenta

#d44df0

gradient-violet

#6a4cf5

gradient-orange

#ff7a3d

gradient-coral

#ff5577

semantic-success

#22c55e

Typography Rules

Font Family

GT Walsheim Framer Medium / GT Walsheim Medium — Framer's display typeface. Geometric, slightly humanist, very confident at large sizes with extreme negative tracking. Fallbacks: GT Walsheim Medium Placeholder system font.
Inter Variable — System body typeface. Used with extensive OpenType character variants: cv01 (alternate "1"), cv05 (alternate "g"), cv09 (alternate "i" / "l"), cv11 (alternate "0"), ss03 / ss07 stylistic sets, dlig discretionary ligatures, and tnum for numerics in tabular contexts. The result is a body voice that feels bespoke without commissioning a custom face.
...

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

Letter-spacing scales with size, hard. Display-xxl pulls -5.5px (5% of size); body sticks to about -1% (-0.15px on 15px). The result: posters at the top, comfortable reading at body.
OpenType character variants are the brand voice. Switching off cv11, ss03, etc. visibly changes the body voice — the brand depends on them.
...

Note on Font Substitutes

If implementing without GT Walsheim Medium, suitable open-source substitutes include Mona Sans, Geist, or Inter at weight 600–700 with manually tightened tracking. Mona Sans's hairline weights at 100–300 are particularly close to Framer's cleaner section openers. Inter Variable is open-source — keep it as-is and preserve the documented OpenType variants.

Dynamic Preview:

display-xxl size: 110px | weight: 500 | height: 0.85 | spacing: -5.5px