Pulumi Design System

Pulumi's marketing site does the move that distinguishes a serious IaC product from a SaaS landing page. The hero headline is rendered in pure ink-black — not in the brand violet — on a pure-white canvas, at 64px Inter weight 600 with a tight -3.2px letter-spacing that reads as Stripe-quiet rather than as Vercel-loud. The violet voltage is held back. It appears as a small pill CTA at the bottom of the hero ("Get Started"), as an inline emphasis tone in body copy, and as the link color across the editorial sections, but the hero canvas itself is pure white and the headline ink is pure black. Where Vercel paints its hero on matte black and Cloudflare gives its orange the full above-fold canvas, Pulumi commits to maximum-contrast type with the brand color held in reserve.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens drawn from a 200-plus CSS root that exposes the standard Tailwind violet / blue / green / yellow / orange / red shade ladders alongside a structural grey scale. The brand voltage is a saturated violet hex #5a30c5 (wired as --color-violet-primary and --color-violet-700) — appears 40 times in the captured render, 35 as text, 5 as background, 0 as border. The structural canvas is pure #ffffff, the ink is a deeply-warm near-black #1f1b21 (wired as --color-service-black), and the hairlines walk a cool grey scale anchored on #e0dfe2 (941 occurrences as border — the dominant border tone). Two typefaces carry the system: Inter at 64px / 600 for the hero display and at 14-16px / 400-600 across body and labels, plus Monaspace Neon Var (a recent Github-released programming monospace) at 12-14px uppercase for section eyebrows and inside code blocks.

Sixteen components cover the violet-pill primary CTA, the white hairline cards, the mono-uppercase eyebrow rows, the Mermaid-flavored architecture diagrams in the 4-color product-domain palette, and the dark editorial footer band on `{colors.canvas-dark}`. Feed this file to Claude or Cursor and it will reproduce Pulumi's specific moves: the ink-not-violet hero, the -3.2px tracked display, Monaspace Neon Var uppercase eyebrows, and the held-back voltage that lets a single small violet pill carry the entire chromatic anchor. The one move worth borrowing only if your product story is genuinely typographic-first rather than visual-first: the willingness to render the hero in pure ink and reserve the brand voltage for small interactive surfaces.