Not the bright white component catalog the tool implies: a deep navy #0d1026 ground lit by an aurora of soft radial colour blobs — Storybook pink, blue, orange, amber and purple — each drawn as radial-gradient(closest-side, hue, transparent) and composited with a shared grain texture, so colour reads as film-lit haze rather than a hard gradient. The brand hues stay in the background entirely; every control is a white or transparent 9999px pill. Nunito Sans runs at exactly two weights, 400 for prose and 700 for structure, with normal tracking at every size including the 56px hero and unusually generous line-heights of 1.25 display and 1.75 body — the opposite of the tight negative tracking that dominates the category. There are zero drop shadows anywhere; depth is aurora falloff, grain and 1px hairlines, and the whole lower page hands over to the real Storybook UI rendered inside mock browser chrome at localhost:6006.
Browse Storybook in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: storybook.js.org (live DOM, computed styles), 2026-07-20. Coverage: home. The :root layer holds only DocSearch tokens — no marketing design-token layer is exposed, so every value below is read from computed styles. Responsive: not captured. App surface: the Storybook UI is embedded live on the page, not a separate logged-in product.
Not the bright white component-catalog page the tool's category implies. The site is a deep navy #0d1026 ground lit by a soft aurora of radial-gradient colour blobs — Storybook pink #ff4785, blue #1ea7fd, orange #fc511f, amber #ffae00, purple #6f2cac — each drawn as radial-gradient(closest-side, <hue>, transparent) and composited under a shared texture.svg grain overlay, so colour reads as film-lit haze rather than a hard gradient. Chrome sits on top in pure white: outline pills with a #4d4d4d hairline, a solid white/black primary, and a copy-command pill. Type is **Nunito Sans at weight 700 with zero letter-spacing** and a generous 1.25 display line-height — the opposite of the tight negative tracking that dominates dev-tool sites. Below the fold the page hands over to the real Storybook UI in a browser-chrome frame.
Feels: luminous, friendly-technical, open-source-warm, roomy.
| Role | Hex | Usage |
|---|---|---|
| Primary | #ffffff | Headings and body on the navy ground |
| Inverse | #000000 | Ink inside the white primary pill |
| Muted slate / zinc | #94a3b8 / #a1a1aa / #999999 | Secondary copy, stat labels |
| Faint | #71717a / #64748b / #76828b | Captions, inactive tabs |
| Role | Hex | Usage |
|---|---|---|
| Ground | #0d1026 | The navy canvas behind the aurora |
| Deep ground | #020617 / #000000 | Section wells, logo band |
| White | #ffffff | Primary pill, embedded Storybook UI |
| Zinc fill / cool white | #e4e4e7 / #f7f9fc | Embedded UI insets and canvas |
| Dark fill | #333333 / #52525b | Dark chrome fills |
| Role | Hex | Usage |
|---|---|---|
| Control hairline | #4d4d4d | Outline pills on the navy ground |
| UI hairline | #d9e0e6 | Embedded Storybook UI dividers |
| Dark hairline / Active | #3f3f46 #52525b / #029cfd | Dark dividers; selected state |
| Name | Hex | Usage |
|---|---|---|
| Storybook pink | #ff4785 | The primary brand hue — logo, largest blob |
| Storybook blue | #1ea7fd / #029cfd | Second brand hue, active states |
| Periwinkle | #4791ff | Aurora blob, conic-ring stop |
| Orange / amber / purple | #fc511f / #ffae00 / #6f2cac | Aurora blobs |
| Error | #ef4444 | Required-field markers in the args table |
Rules. The brand hues live entirely in the background aurora, never as button fills — every CTA is white or transparent. Colour is atmosphere here, not signal.
Nunito Sans (loaded as __Nunito_Sans_ee04dc) — the only face on the page.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 56/70px (1.25) | 700 | normal |
| Section h2 | 56/70px (1.25) | 700 | normal |
| Card h3 | 24/32px (1.33) | 700 | normal |
| Body | 16/28px (1.75) | 400 | normal |
| Nav / control | 16px | 500 | normal |
| Primary CTA | 16px | 700 | normal |
| Badge | 12px | 400 | normal |
Patterns. Two weights only: 400 for prose, 700 for everything structural — no middle ground except nav links. Tracking is normal everywhere, with none negative even at 56px, which is what makes the page read as soft rather than engineered. Line-heights are generous: 1.25 display, 1.75 body. No uppercase, no mono in the chrome.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.