Framer Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

17tokens

11type steps

7radius steps

1pxspacing base

Framer, in one page

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.

Body type is Inter Variable, with Framer leaning hard into Inter's character variants (cv01, cv05, cv09, cv11, ss03, ss07, dlig) — the result is a body voice that feels custom-tuned, with single-storey "a", straight-leg "l", and tabular figures. There's no light mode on the marketing site; the brand IS dark.

Key Characteristics:

Black-canvas marketing system: {colors.canvas} is the surface for hero, body, pricing, FAQ, and footer alike — no light interludes.
Massive negative letter-spacing on display sizes (-5.5px / -4.25px / -3.1px) creates a poster-grade headline cadence.
White pill ({components.button-primary}) is the only primary CTA shape across the site; secondary actions live as charcoal pills ({components.button-secondary}) or text links.
Oversized gradient spotlight cards (violet, magenta, orange, coral) act as showcase tiles inside the dark grid; they are individual cards, not section backgrounds.
Inter Variable with bespoke OpenType character variants (cv01/05/09/11, ss03/ss07, dlig) used everywhere body type appears — the typographic voice is unmistakable.
Border radius scale runs from 4px utility chips up to 100px pills and full circles, with 15–20px the default for cards and 30px for atmospheric gradient cards.
A single chromatic accent {colors.accent-blue} reserved for hyperlinks, focus, and selection — never decorative.

Do's and don'ts

Do

Reserve {colors.primary} (white) and {colors.canvas} (near-black) as the system's two anchor surfaces. Every band of the page chooses one or the other.
Push display-size letter-spacing aggressively negative — {typography.display-xxl} at -5.5px is the brand signature, not a stylistic accident.
Use {colors.accent-blue} only for hyperlinks, focus rings, and selected indicators. Never as a background or button fill.
Drop one or two gradient-spotlight-card variants into a card grid; they are the brand's atmosphere device. Don't overdo it — three or more in the same viewport reads as a moodboard, not a system.
Compose every CTA as a pill ({rounded.pill}); secondary actions live as charcoal pills, never as bordered ghost buttons.
Keep body type Inter Variable with character variants cv01, cv05, cv09, cv11, ss03, ss07 enabled — the brand voice depends on them.
Use surface lift (canvas → surface-1 → surface-2) to mark hierarchy on dark, not opacity changes on white type.

Don't

Don't ship a light-mode marketing page. Framer's identity is dark.
Don't introduce mid-tone gray text outside {colors.ink-muted}. The hierarchy is binary: ink or ink-muted.
Don't use {colors.accent-blue} as a brand fill (e.g., a blue CTA pill). The blue is a signal color, not a surface.
Don't square off CTAs. Pill ({rounded.pill}) or full circle is the brand vocabulary.
Don't reduce the negative letter-spacing on display sizes "for accessibility". The compression is intrinsic to the brand voice; reduce the SIZE if needed, but keep the percentage.
Don't apply gradient backgrounds to whole sections. Gradients are CARDS, not section grounds.
Don't combine more than one chromatic accent. The palette is monochrome plus one blue plus the gradient family — not "blue, green, and red".

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Framer design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- 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

Type:
- families: GT Walsheim Framer Medium, GT Walsheim Medium, Inter, Inter Variable
- scale: 12, 13, 14, 15, 18, 22, 24, 32, 62
- weights: 400, 500, 700

Shape:
- radius: 4, 6, 10, 15, 20, 30, 100

Spacing: 1, 4, 8, 10, 12, 15, 16, 20, 24, 30

Rules:
- Reserve `{colors.primary}` (white) and `{colors.canvas}` (near-black) as the system's two anchor surfaces. Every band of the page chooses one or the other.
- Push display-size letter-spacing aggressively negative — `{typography.display-xxl}` at -5.5px is the brand signature, not a stylistic accident.
- Use `{colors.accent-blue}` only for hyperlinks, focus rings, and selected indicators. Never as a background or button fill.
- Drop one or two `gradient-spotlight-card` variants into a card grid; they are the brand's atmosphere device. Don't overdo it — three or more in the same viewpor…
- Compose every CTA as a pill (`{rounded.pill}`); secondary actions live as charcoal pills, never as bordered ghost buttons.
- Keep body type Inter Variable with character variants `cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07` enabled — the brand voice depends on them.

Avoid:
- Don't ship a light-mode marketing page. Framer's identity is dark.
- Don't introduce mid-tone gray text outside `{colors.ink-muted}`. The hierarchy is binary: `ink` or `ink-muted`.
- Don't use `{colors.accent-blue}` as a brand fill (e.g., a blue CTA pill). The blue is a signal color, not a surface.
- Don't square off CTAs. Pill (`{rounded.pill}`) or full circle is the brand vocabulary.
- Don't reduce the negative letter-spacing on display sizes "for accessibility". The compression is intrinsic to the brand voice; reduce the SIZE if needed, but k…
- Don't apply gradient backgrounds to whole sections. Gradients are CARDS, not section grounds.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.
Surface 2 ({colors.surface-2}): Two steps above — featured pricing card, hero pill backdrop, selected pricing tab.
Hairline ({colors.hairline}): 1px borders on input groups, comparison-table dividers.
Hairline Soft ({colors.hairline-soft}): Subtler dividers — between FAQ rows and footer column rules.
Inverse Canvas ({colors.inverse-canvas}): Pure white — used as the surface of light-on-dark pill CTAs and a small set of light-mode template thumbnails embedded in the showcase grid.

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.
Gradient Orange ({colors.gradient-orange}): Spotlight card variant — sunset wash.
Gradient Coral ({colors.gradient-coral}): Spotlight card variant — coral/pink.

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.

Type scaleRead the full spec

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.
Inter — Used selectively for {typography.headline} (the 22px / 20px tier). The non-variable cut catches small tracking targets that the variable file rounds.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	110px	500	0.85	-5.5px	Largest hero headline (home, AI page)
`{typography.display-xl}`	85px	500	0.95	-4.25px	Section opener headlines
`{typography.display-lg}`	62px	500	1.00	-3.1px	Sub-section openers
`{typography.display-md}`	32px	500	1.13	-1.0px	Card titles, smaller display
`{typography.headline}`	22px	700	1.20	-0.8px	Pricing tier headlines, FAQ category titles
`{typography.subhead}`	24px	400	1.30	-0.01px	Lead body next to display headlines
`{typography.body-lg}`	18px	400	1.30	-0.18px	Hero subhead, lead paragraphs
`{typography.body}`	15px	400	1.30	-0.15px	Default body, card descriptions
`{typography.body-sm}`	14px	500	1.40	-0.14px	Pricing comparison rows, dense data
`{typography.caption}`	13px	500	1.20	-0.13px	Eyebrows, footer columns, meta
`{typography.micro}`	12px	400	1.20	-0.12px	Disclaimer, footnote
`{typography.button}`	14px	500	1.0	-0.14px	Pill buttons

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.
Weight stays in a narrow band. Display sits at 500, body at 400, body-sm/caption at 500. Hierarchy is carried by size + tracking, not by 700/900 ramps.
Tight line-heights everywhere. Even body runs at 1.30 — Framer's editorial tone is denser than typical SaaS marketing.

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.

Components and layoutRead the full spec

Buttons

button-primary — White pill on dark canvas. The primary CTA across home, pricing, AI, and gallery pages.

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, padding 10px 15px, rounded {rounded.pill}.
Pressed state lives in button-primary-pressed (the live site uses a transform-scale shrink rather than a darkened fill).

button-secondary — Charcoal pill. Used for secondary navigation actions ("Sign in", "Talk to sales") and as the visual counterpart to the primary pill.

Background {colors.surface-1}, text {colors.ink}, type {typography.button}, padding 10px 15px, rounded {rounded.pill}.

button-translucent — Translucent / lifted secondary used on top of busy backgrounds (gallery hero, gradient cards).

Background {colors.surface-2}, text {colors.ink}, type {typography.button}, rounded {rounded.xxl}, padding 8px 14px.

button-icon-circular — 40px circle for inline icon actions (carousel arrows, social links).

Background {colors.surface-1}, text {colors.ink}, rounded {rounded.full}, size 40px.

Pricing Tabs

pricing-tab-default + pricing-tab-selected — The pill-toggle that switches between Basic / Pro / Business / Enterprise on /pricing.

Default: {colors.canvas} background, {colors.ink-muted} text, rounded {rounded.pill}.
Selected: {colors.surface-2} background, {colors.ink} text — selected = lift, not color. Surface depth communicates "active" without needing a chromatic fill.

Inputs & Forms

text-input + text-input-focused — Form fields on /pricing (seat-count, currency switcher) and the in-product preview surfaces.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 10px 14px.
Focused state retains the same surface; the focus ring is the level-3 blue-tinted shadow rgba(0,153,255,0.15) 0 0 0 1px.

Cards & Containers

pricing-card — Each tier on /pricing.

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.xl}, padding 24px.

pricing-card-featured — The Pro tier (visually emphasized).

Background {colors.surface-2}, otherwise identical structure. The lift is one surface step up — no chromatic outline.

template-card — Thumbnail tile in the home "Built with Framer" gallery and /marketplace.

Background {colors.surface-1}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.lg}, padding 12px.

product-mockup-tile — Larger tile that frames a live product UI mock (Framer canvas, Workshop video, AI translate panel).

Background {colors.surface-1}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.xl}, padding 16px.

Gradient Spotlight Cards (signature)

The defining decorative surface of Framer's marketing — oversized atmospheric tiles dropped into otherwise monochrome card grids. Variants:

gradient-spotlight-card — violet ground (most common).

Background {colors.gradient-violet}, text {colors.ink}, type {typography.subhead}, rounded {rounded.xl}, padding 32px. (The on-site card often pushes to {rounded.xxl} 30px when it spans a wider tile.)

gradient-spotlight-card-magenta — magenta-pink ground.

Background {colors.gradient-magenta}, otherwise identical.

gradient-spotlight-card-orange — sunset-orange wash.

Background {colors.gradient-orange}, otherwise identical.

(Coral pink follows the same shape with {colors.gradient-coral}.)

Comparison & FAQ

feature-row + comparison-row — Single rows inside the pricing comparison table.

feature-row: {colors.canvas} background, {colors.ink} text. Header rows.
comparison-row: {colors.canvas} background, {colors.ink-muted} text. Data rows with {typography.body-sm} and 1px {colors.hairline-soft} underlines.

faq-row — Each accordion line in the pricing-page FAQ.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 24px.

Navigation

top-nav — Sticky bar on {colors.canvas} with the Framer wordmark left, primary nav links centered, and a button-secondary ("Sign in") + button-primary ("Get started for free") pair right.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 56px.
Mobile: collapses primary links into a hamburger; the two pill CTAs collapse into a single primary pill on the bar.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Desktop	1199px	Default desktop layout
Tablet	810px	Card grids collapse 4-up → 2-up; nav becomes hamburger
Mobile-Lg	809px	Pricing comparison table becomes per-tier accordion
Mobile-XS	98px	Smallest documented breakpoint — single-column everything

Touch Targets

Pill buttons (button-primary, button-secondary) maintain a minimum 44px tap height across all viewports — combine {typography.button} 14px line-height with the documented 10px vertical padding.
Circular icon buttons (button-icon-circular) are 40px on desktop and grow to 44px on touch viewports.
Pricing-tab pills hold ≥40px tap height; below 810px they may collapse into a horizontal-scroll row instead of stacking.

Collapsing Strategy

Nav: horizontal nav with a centered link group + right-anchored pill pair collapses to a hamburger overlay below 810px. The button-primary stays visible on the bar.
Card grids: the gallery and template-card grids go 2-up on desktop → 1-up on mobile. Gradient spotlight cards retain {rounded.xxl} corners at every viewport — they don't bleed.
Pricing comparison table: collapses into per-tier accordions below 810px to avoid horizontal scroll.
Display type: {typography.display-xxl} 110px scales down toward {typography.display-lg} 62px on tablet and {typography.display-md} 32px on mobile, preserving the percentage-negative letter-spacing.

Image Behavior

Embedded product mockups (browser frames containing live Framer-built sites) maintain their aspect ratio and never crop.
Gradient spotlight cards keep their gradient orientations across breakpoints — the gradient direction is part of the brand spec.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-framer {--page-bg: #090909;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #ffffff;
  --link-hover-color: #e6e6e6;
  --border-color: #353535;
  --card-bg: #090909;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #1d1d1d;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #090909;
  --footer-text-color: #a9a9a9;
  --button-bg: #ffffff;
  --button-text-color: #000000;
  --button-hover-bg: #e6e6e6;
  --button-border: none;
  --button-border-radius: 15px;
  --button-secondary-bg: #181818;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #272727;
  --button-secondary-border: 1px solid #353535;
  --prompt-bg: #151515;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-inter);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 15px;
}

Download theme.css

Where this came from

Source document: volt/design-md/framer/DESIGN.md · 28.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.