Storybook Design System

Storybook's marketing page makes a choice that almost no other open-source dev-tool makes: the hero's visual protagonist is the product itself. A detailed mockup of the Storybook UI — component tree on the left, canvas in the center, controls panel on the right — sits inside a dark browser frame that spans the full hero width. The gradient behind it runs from near-black at the page center to a deep indigo-blue at the edges, creating a depth field that makes the product mockup appear to float. The brand's hot-pink logomark sits top-left but the pink goes nowhere else on the marketing surface; the only colors visible in the hero come from the rendered UI components inside the mockup.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens anchored on a near-black-to-midnight gradient canvas with a single structural gray hairline and a muted secondary text tier; 12 typography tokens running Nunito Sans at sizes from 12px caption to 56px display hero; 6 corner-radius tokens from 2px (the tightest code fragment rounding) through 9999px pill (the primary CTA); and 15 component definitions covering the gradient hero, the navy card surface, the pill-shaped primary button, the dark text input, and the brand logo badge. The gradient brand colors (hot pink, deep blue, gradient variants) are declared in the system but appear only inside the logomark and the hero gradient fill.

Feed this file to Claude or Cursor and it reproduces Storybook's specific moves: near-black gradient hero instead of a flat dark canvas, product-screenshot as the visual hero above the fold, pill CTAs against a dark surface, and Nunito Sans across every typographic tier without a second voice. The token set is notably restrained for a brand with this much chromatic personality in its logomark — the design discipline is the abstinence of the pink, held back so the product can carry the page.