Framer

version alpha

name Framer

description "A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster."

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" inverse-canvas: "#ffffff" inverse-ink: "#000000" gradient-magenta: "#d44df0" gradient-violet: "#6a4cf5" gradient-orange: "#ff7a3d" gradient-coral: "#ff5577" semantic-success: "#22c55e"

typography display-xxl: fontFamily: GT Walsheim Framer Medium fontSize: 110px fontWeight: 500 lineHeight: 0.85 letterSpacing: -5.5px display-xl: fontFamily: GT Walsheim Medium fontSize: 85px fontWeight: 500 lineHeight: 0.95 letterSpacing: -4.25px fontFeature: ss02 display-lg: fontFamily: GT Walsheim Medium fontSize: 62px fontWeight: 500 lineHeight: 1.00 letterSpacing: -3.1px fontFeature: ss02 display-md: fontFamily: GT Walsheim Medium fontSize: 32px fontWeight: 500 lineHeight: 1.13 letterSpacing: -1.0px headline: fontFamily: Inter fontSize: 22px fontWeight: 700 lineHeight: 1.20 letterSpacing: -0.8px fontFeature: cv05 subhead: fontFamily: Inter Variable fontSize: 24px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.01px fontFeature: cv11 body-lg: fontFamily: Inter Variable fontSize: 18px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.18px fontFeature: cv11 body: fontFamily: Inter Variable fontSize: 15px fontWeight: 400 lineHeight: 1.30 letterSpacing: -0.15px fontFeature: cv11 body-sm: fontFamily: Inter Variable fontSize: 14px fontWeight: 500 lineHeight: 1.40 letterSpacing: -0.14px fontFeature: cv11 caption: fontFamily: Inter Variable fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: -0.13px fontFeature: cv11 micro: fontFamily: Inter Variable fontSize: 12px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.12px fontFeature: cv11 button: fontFamily: Inter Variable fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.14px fontFeature: cv11

rounded xs: 4px sm: 6px md: 10px lg: 15px xl: 20px xxl: 30px pill: 100px full: 9999px

spacing hair: 1px xxs: 4px xs: 8px sm: 12px md: 15px lg: 20px xl: 30px xxl: 40px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 15px button-primary-pressed: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 15px button-translucent: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.xxl}" padding: 8px 14px button-icon-circular: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 14px pricing-tab-selected: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 14px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px pricing-card-featured: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px template-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: 12px gradient-spotlight-card: backgroundColor: "{colors.gradient-violet}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px gradient-spotlight-card-magenta: backgroundColor: "{colors.gradient-magenta}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px gradient-spotlight-card-orange: backgroundColor: "{colors.gradient-orange}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.xl}" padding: 32px product-mockup-tile: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xl}" padding: 16px feature-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 24px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

Overview

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.

Colors

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.

Typography

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.