Framer Design System

Framer's marketing canvas reads like a working artboard. The dominant surface is near-pure black with a faint warmth, and on top of it sits oversized white display type in GT Walsheim Medium with letter-spacing pulled to extreme negative values — 5.5px on the 110px hero, 4.25px on the 85px section openers. There is no light mode. Every band of the page chooses between black canvas or a charcoal lift; no white interludes break the rhythm. The single chromatic accent is a sharp signal blue (#0099ff), reserved exclusively for hyperlinks, focus rings, and selection states. What separates Framer from other dark systems is the rhythm break: oversized magenta, violet, orange and coral gradient panels drop into monochrome card grids as living atmosphere tiles, not section backgrounds.

This page packages the whole system into a single DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens grouped into brand, surface, text, semantic and signature gradient sets; 13 type styles running from a 110px display down to 12px micro; 8 corner radii from a 4px utility chip up to a 100px pill; 9 spacing increments on a non-standard 5px base; and 22 components covering pill buttons, pricing tabs, text inputs, mockup tiles, gradient spotlight cards, comparison rows, FAQ, top nav and footer. Every token is a quoted string ready to paste into Tailwind config, CSS variables, or your own component library.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Framer's discipline — the white pill CTA, the charcoal surface lift, the binary ink-to-ink-muted hierarchy, the scarce gradient spotlight — rather than a generic dark SaaS theme. The system is worth studying because it shows how far typography and surface lift can carry a brand when the palette is monochrome plus one signal color. Where lesser dark themes lean on neon or rainbow gradients, Framer leans on negative tracking and a single confident blue.