Temporal Design System

Temporal's marketing page holds one temperature across the entire scroll: near-true-black. The canvas is #141414, not the slightly-blue charcoal that Linear and Vercel use, not the navy that Storybook deploys — true near-black with near-white text on every surface. The hero headline "What if your code never failed?" sits at 68px in Aeonik weight 300, a light-weight display choice that goes against every enterprise infrastructure convention. No CTA uses the brand's purple-indigo gradient as a fill; the gradient runs only through the hero background band and inside product-feature illustrations. The primary CTA is a pill shape with no gradient, no color — just a white pill on the near-black canvas.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens organized around a true-black canvas, a slate-blue-gray hairline dominant at 467 occurrences, two brand gradient hues (violet #b664ff and indigo #444ce7), and a neon-yellow accent (#dbff4b) that appears in exactly five places as a status signal and text highlight. Twelve typography tokens run Aeonik at weight 300 across every tier — display to caption — with Noto Sans Mono as the system's second voice for CTAs, code panels, and interactive labels. The radius system has exactly one value: 9999px pill, used once on the primary CTA. Everything else is square.

Feed this file to Claude or Cursor and it reproduces Temporal's disciplined moves: near-black canvas, light-weight display that signals confidence through restraint rather than mass, monospace buttons that read as infrastructure rather than marketing, and a gradient that stays inside illustrations rather than decorating the chrome. The key learning from this system is that a gradient does not have to touch the CTA to register as the brand's chromatic signal — Temporal proves a gradient can live in the background and still define the visual identity.