Figma Design System

Figma's marketing site is the rare case where a design tool actually demonstrates its own design discipline. The frame is monochrome — black ink, white canvas, figmaSans variable type, pill-shaped CTAs — but every long-form page interrupts itself with oversized pastel panels that span the full content width. Lime for systems and FAQ, lilac for the /design route and FigJam highlights, cream for templates, mint and pink for FigJam pastel stories, coral for "ship products" on the home page, and a deep navy for the only inverse story block above the footer. The chrome stays editorial; the blocks do the storytelling. There is no gradient, no shadow stack, no second accent color outside a single magenta promo pill reserved for one CTA per page.

This page packages all of that into a single DESIGN.md file. Inside: 20 color tokens grouped into brand, surface, text, and semantic roles; 13 type styles across figmaSans and figmaMono; 7 corner radius steps from 2px hairline to a 50px pill; 9 spacing tokens on an 8px base; and 26 components covering buttons, pricing tabs, color-block sections, navigation, comparison glyphs, and the dense footer link grid. The file follows Google Labs' DESIGN.md spec, so every token resolves to a concrete hex, px, or weight a build tool can read.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Figma's contrast — monochrome chrome interrupted by deliberate color-block sections — rather than a generic SaaS theme. Reference the tokens directly to wire them into Tailwind config, CSS variables, or your own component library. The system is worth studying because it solves a problem most marketing sites get wrong: how to feel both technical and joyful without leaning on bling.