Figma

• A constellation rather than a brand color — Figma anchors on two recurring spots (cyan #33dfdf with 10 measured uses, gold #b98e01 with 8) and surrounds them with eight one-off accents (orange #ff7237, electric purple #874fff, azure #00b6ff, sage #95b9ac, lilac #cb9fd2, peach #ffc9c1, deep red #721c1c, ice cyan #c7f8fb). The structure says 'every creator has a seat' without flattening into noise.
• A triple typographic voice that still coheres — figmaSans (UI), figmaMono (code), and ABCWhytePlusVariable (display) — each tokenized in CSS variables. Most teams can't pull this off; Figma has earned the coherence by giving each family one job and refusing overlap.
• Design-system transparency as a posture — the CSS variable layer is openly namespaced and inspectable (31 captured `--f-*` tokens for fonts, cursors, containers, gutters). The page confesses how it's built, which is itself the brand argument.
• Cursor states as first-class tokens — grab, grabbing, text, pointer, default — tokenized like colors are elsewhere. A giveaway of what the product actually is: a canvas where interaction state carries meaning.
• Container widths restrained and restrained again — 840 px and 980 px are the only two bounded reading rails the page uses. For a company that sells infinite canvas, the marketing reading surface is deliberately compact.
• Motion is Framer Motion-driven (runtime evidence: `window.MotionIsMounted`) but stays on simple CSS easings — `ease-out`, `ease-in-out`, `ease`, `linear`. The library's full vocabulary is available; the brand chooses restraint anyway.

• How Figma turns its own design system into marketing proof — the CSS variables aren't hidden, they're exhibited. Steal the discipline: your tokens should be inspectable by the curious user, not buried in a Storybook deploy.
• Multi-family typography without visual chaos — the key is role separation (sans for UI, mono for code, display for one hero moment) rather than mixed weights inside a single family. When you need three voices, don't crowd them inside one.
• Two-anchor + many-spots palette structure — instead of a single brand color or a flat rainbow, Figma stabilises on two recurring accents and surrounds them with one-off swatches. The result is plural without losing identity.
• Semantic cursor tokens on a marketing page — a small detail that says the team thinks about interaction at the token level. Worth borrowing even if you don't ship a canvas product.
• Framer Motion as a power hidden in plain sight — the library is loaded but the visible motion vocabulary stays on CSS easings. Worth lifting: capability you don't lean on is a posture, not a waste.

• Don't replicate the constellation palette without earning it — Figma's structure works because it maps to a plural creator audience. Use it on a finance page and the signal becomes 'we're not serious'.
• Don't license a variable display family before you have the editorial moments to justify it — Whyte Plus here earns its line in a couple of hero headlines, not every heading. The cost of the licence is the discipline of using it sparingly.
• Don't copy the `--f-*` CSS variable namespace verbatim — the namespace is part of Figma's brand grammar. Invent your own token namespace that tells your own story.
• Don't pull Framer Motion into a project just to leave it idle — Figma earns the library by having a few moments that need it. Loading it for ambient marketing pages without spring physics or layout animation is wasted bytes.

The page reads like a design system documentation site that someone accidentally gave a marketing team to run. Nothing shouts, nothing slouches; the spot accents feel less like decoration and more like a color-index margin on a technical book. Whitespace is confident, type climbs to a 64 px display at its loudest, and the overall effect is 'we trust your attention' — a rare confidence in the design-tool category. The duo of cyan and gold doing the recurring work makes the constellation read as composed rather than scattered.

• The category-defining brand of the collaborative-first design-tool generation — Figma redrew the map Sketch and Adobe XD operated on, and its marketing page is the receipt of that shift.
• Shares DNA with the self-hosted-type + custom-design-system cohort (Linear, Stripe, Vercel, Notion) — brands that treat their marketing as a proof-of-concept for the product they're selling, not as a creative-agency handoff.
• Part of the 'community platform brand' lineage (Are.na, Cargo, Canva) — products whose audience is plural enough that the visual identity has to make room for many voices without losing its own.