# Storybook — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text

| 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 |

### Surfaces

| 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 |

### Borders

| 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 |

### Brand hues (the aurora set)

| 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.

## 3. Typography Rules

- Sans: `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.

## 4. Component Stylings

**Primary CTA** — `background:#ffffff; color:#000000; border:0; border-radius:9999px;
height:48px; padding:0 24px; font:700 16px;` (nav variant: `height:32px; padding:0 12px;
font-weight:400`). `transition:all .15s cubic-bezier(.4,0,.2,1)`.

**Outline pill** — `background:transparent; color:#ffffff; border:1px solid #4d4d4d;
border-radius:9999px; height:32px; padding:0 12px; font:500 16px;`
`transition:color .15s cubic-bezier(.4,0,.2,1), background-color .15s …`. Used for the
GitHub star count and the search box (which carries a `⌘K` hint).

**Copy-command pill** — outline pill sized to the hero CTA (48px) containing
`npm create storybook@latest` and a trailing copy icon; the command itself is set in the
same Nunito Sans, not a mono face.

**Announcement badge** — 30px full pill, 12px label, 6px 12px padding, transparent border,
with a small glyph, directly above the hero headline.

**Nav** — full-width bar over the aurora, ~74px tall, logo mark + wordmark left, seven 16px
links (two with an external-link arrow), then the GitHub count pill, the search pill and
the white "Get Started" pill. **Tab strip** — 16px text tabs in `#94a3b8`, active `#ffffff`
with a 1px white underline, on a full-width hairline rule above the product frame.

**Browser-chrome frame** — the product embed is wrapped in a mock browser: three traffic
lights, back/forward/reload glyphs and a pill URL field reading `localhost:6006`, with
`border-radius:6px 6px 0 0` on the chrome and `0 0 6px 6px` on the body. Inside it, the
**Storybook UI**: white sidebar with a folder/component tree (2px and 4px radii, `#d9e0e6`
hairlines), a canvas, and an args table with Name / Description / Default / Controls
columns, required markers in `#ef4444`, and radio + slider controls.

## 5. Layout Principles

Content frame `max-width:1440px`; prose blocks around `590px`; narrow columns `320px`.
Spacing is a 4px base; control padding 0 12px / 0 24px, badge 6px 12px. Hero anatomy:
badge → 56px headline → three-line 16/28 body → CTA row (white pill + copy-command pill) →
inline stat row → an oversized "Version 10" lockup pinned right → hairline rule → tab strip
→ the browser-framed product embed, which bleeds past the fold. Below it, a monochrome
logo band on the deep ground.

## 6. Depth & Elevation

Radius census: `9999px` (78 — the pill dominates), `4px` (57), `6px` (31), `2px` (30),
`50%` (16 — avatars/traffic lights), `8px`, plus the split frame radii `6px 6px 0 0` and
`0 0 6px 6px`.

**Shadows: none.** The census returns a single fully-transparent stack across 37 elements;
depth comes entirely from aurora falloff, grain texture and 1px hairlines.

## 7. Motion

- `color, background-color .15s cubic-bezier(.4,0,.2,1)` — 21 elements, the base hover.
- `all .3s cubic-bezier(.4,0,.2,1)` — 17 elements, the slower chrome transitions.
- `all .15s` (14) and `all .2s` (14) same curve.

Everything shares the Material standard curve in a narrow 150–300ms range. A
`conic-gradient(from 338.953deg, #4791ff, #ff4785, #4791ff)` under an `rgba(0,0,0,.7)`
scrim serves as a slowly rotating border ring.

## 8. Backgrounds, Effects & WebGL

The signature effect. The aurora is built from stacked
`radial-gradient(closest-side, <hue>, rgba(<hue>,0))` blobs — pink `#ff4785`, orange
`#fc511f`, periwinkle `#4791ff` — each paired in the same declaration with
`url(https://storybook.js.org/home/texture.svg)`, so **every colour blob carries its own
grain**. Additional `radial-gradient(100% 100%, rgba(<hue>,0) 0px, rgb(<hue>) 100%)` washes
tint section edges. Section transitions use `linear-gradient(#0d1026 90%, rgba(13,16,38,.1))`
and `linear-gradient(to top, #0d1026, rgba(13,16,38,0))` fades; a `conic-gradient` ring
provides an animated border. No WebGL, no background video, no backdrop-filter blur.

## 9. Do's and Don'ts

### Do
- Build the background as overlapping `radial-gradient(closest-side, …)` blobs, each
  composited with a grain texture, on a `#0d1026` navy ground.
- Keep every CTA white or transparent — the brand hues belong to the aurora, not the buttons.
- Set Nunito Sans at exactly two weights: 400 for prose, 700 for structure.
- Use **normal tracking at every size**, including 56px display, and roomy line-heights
  (1.75 body, 1.25 display).
- Make every control a 9999px pill; outline pills get a 1px `#4d4d4d` hairline.
- Frame the product embed in mock browser chrome with a `localhost:6006` URL pill.

### Don't
- Don't render a bright white component-catalog page with coral accents — the site is dark and aurora-lit.
- Don't apply negative letter-spacing anywhere, at any size.
- Don't use weights 500/600 for headings, or a mono face in the chrome.
- Don't add drop shadows, or fill buttons with the brand pink or blue.
- Don't use hard-edged linear gradients where the site uses soft radial blobs plus grain.

## 10. Responsive Behavior

Not captured — desktop viewport only. The 1440px frame, the seven-link nav cluster and the
inline hero stat row are the obvious collapse points.

## 11. Agent Prompt Guide

- Canvas `#0d1026` · Text `#ffffff` · Muted `#94a3b8` · Border `#4d4d4d` · Accent `#ff4785` (background only)
- Font: Nunito Sans · Body: 16/28px · Radius: 9999px control / 6px frame · Control height: 32px (nav) / 48px (hero) · Focus: `#029cfd` border · Hover: fill shift over 150ms `cubic-bezier(.4,0,.2,1)`

<storybook_design_language>
A deep navy `#0d1026` ground lit by an aurora of soft colour blobs — Storybook pink `#ff4785`,
blue `#1ea7fd`, periwinkle `#4791ff`, orange `#fc511f`, amber `#ffae00`, purple `#6f2cac` —
each drawn as `radial-gradient(closest-side, <hue>, transparent)` and composited with a shared
grain texture, so colour reads as film-lit haze. The brand hues stay in the background: every
control is white or transparent, never a coloured fill. Type is Nunito Sans at exactly two
weights, 400 for prose and 700 for structure, with **normal tracking at every size including
the 56px hero** and generous line-heights (1.25 display, 1.75 body at 16/28). Controls are
9999px pills — a solid `#ffffff`/`#000000` primary at 48px in the hero and 32px in the nav, and
outline pills with a 1px `#4d4d4d` hairline. Muted text is `#94a3b8`; the embedded product UI
uses `#d9e0e6` hairlines, `#029cfd` for active state and `#ef4444` for required markers. There
are zero drop shadows; depth is aurora falloff, grain and hairlines. Motion is a narrow
150–300ms band on `cubic-bezier(.4,0,.2,1)`. Layout: 1440px frame, 4px spacing base, and the
real Storybook UI framed in mock browser chrome with a `localhost:6006` URL pill.
Feels: luminous, friendly-technical, open-source-warm, roomy.
Avoid: a bright white catalog page with coral accents, negative letter-spacing at any size,
weight 500/600 headings, mono chrome, drop shadows, or buttons filled with the brand pink.
</storybook_design_language>