--- name: Storybook tagline: Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. updated_at: 2026-05-28T23:12:10.229Z published_at: 2026-05-28T23:12:10.229Z author: webdesignhot source_url: https://storybook.js.org spec: webdesignhot/0.1 quality: curated featured: false categories: [dev-tools, design-tools] tags: [light, structured, sans, developer, ui] preview_swatch: ['#ffffff', '#ff4785', '#0d1026'] related: [vercel] description: 'Storybook is the open-source frontend workshop — the de-facto tool for building, documenting, and testing UI components in isolation, and its marketing site dresses component-driven development in friendly, rounded, approachable chrome. The canvas is pure white `#ffffff` with pure-black `#000000` body type, set in the warm humanist sans **Nunito Sans** — a typeface whose rounded terminals signal "open, friendly, community-built" rather than the engineered austerity of a Geist or Inter. The signature is the coral-pink brand mark `#FF4785` — Storybook''s instantly recognizable accent, descended from the catalog''s storybook-pink heritage and applied to links, the logo, key highlights, and brand moments. The hero is a dark inversion band: a deep ink-navy `#0d1026` surface carrying a 56px / 700 white headline, a deliberate contrast against the bright white content sections below. CTAs are full-pill (`9999px` radius) with white-on-canvas chrome at the audited hero — the rounded pill geometry is the through-line, echoing the rounded Nunito Sans terminals and the friendly, low-friction register the whole brand is built around. Where developer-tool peers like Vercel commit to brutalist near-black-on-near-white austerity, Storybook leans warm and rounded: white canvas, generous pill radii, coral-pink moments, and a dark hero that frames the headline like the cover of an actual storybook.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-faint border: border themes: default: light available: [light, dark] switch-via: 'data-theme attribute on ; persisted in localStorage' colors: light: bg: '#ffffff' # page canvas — pure white, the dominant content surface bg-elev: '#f8f9fa' # subtle elevation — section bands, inset blocks bg-deeper: '#f1f3f5' # third tier — code-block fills, quiet stripes surface: '#ffffff' # default card surface — white on white, border-defined surface-ink: '#0d1026' # dark hero / inversion band — deep ink-navy text: '#000000' # primary text — pure black on white text-secondary: '#454545' # supporting copy, dense-row body text-tertiary: '#73828c' # captions, meta, muted labels text-faint: '#9aa5ad' # placeholder, disabled, faintest meta text-on-ink: '#ffffff' # white text on the dark hero band text-on-ink-soft: '#b0b8c0' # secondary text on the dark band brand: '#ff4785' # the signature Storybook coral-pink — logo, links, highlights brand-hover: '#e63a73' # darker coral, hover state brand-deep: '#cc3066' # pressed / active coral brand-soft: 'rgba(255, 71, 133, 0.10)' # soft coral wash — badge bg, focus aura brand-tint: 'rgba(255, 71, 133, 0.06)' # subtlest coral tint link: '#ff4785' # inline link colour — coral-pink link-hover: '#e63a73' # link hover — deepens, underline appears on-brand: '#ffffff' # white text on coral fills cta-bg: '#ffffff' # audited hero CTA fill — white pill on dark band cta-text: '#000000' # black text on white pill cta-bg-brand: '#ff4785' # alternate coral-filled CTA on white sections cta-text-brand: '#ffffff' # white text on coral pill border: '#e5e7eb' # default hairline border-soft: '#f1f3f5' # quietest separation border-strong: '#cdd2d6' # outlined buttons, focused inputs focus: '#ff4785' # focus ring — coral success: '#66bf3c' # advisory green — passing tests, ready states success-soft: 'rgba(102, 191, 60, 0.10)' warning: '#e69d00' # advisory amber warning-soft: 'rgba(230, 157, 0, 0.10)' danger: '#ff4400' # error / destructive — Storybook's warm red-orange danger-soft: 'rgba(255, 68, 0, 0.10)' info: '#1ea7fd' # informational blue — docs callouts, info banners info-soft: 'rgba(30, 167, 253, 0.10)' dark: bg: '#020617' # near-black ink canvas in dark mode bg-elev: '#0d1026' # subtle elevation — section bands (same as light's hero ink) bg-deeper: '#161a33' # third tier — code-block fills surface: '#0d1026' # default card surface on dark surface-ink: '#020617' # deepest inversion tier text: '#ffffff' # primary text — white on ink text-secondary: '#b0b8c0' # supporting copy text-tertiary: '#8a93a0' # captions, meta text-faint: '#5a6470' # placeholder, disabled text-on-ink: '#ffffff' text-on-ink-soft: '#b0b8c0' brand: '#ff4785' # coral-pink — identical across themes brand-hover: '#ff5f95' # lifted coral on dark for legibility brand-deep: '#e63a73' brand-soft: 'rgba(255, 71, 133, 0.16)' # stronger wash on dark brand-tint: 'rgba(255, 71, 133, 0.10)' link: '#ff4785' link-hover: '#ff5f95' on-brand: '#ffffff' cta-bg: '#ffffff' # white pill stays white on dark cta-text: '#000000' cta-bg-brand: '#ff4785' cta-text-brand: '#ffffff' border: '#262b45' # default hairline on dark border-soft: '#1a1f38' border-strong: '#3a4163' focus: '#ff4785' success: '#66bf3c' success-soft: 'rgba(102, 191, 60, 0.16)' warning: '#e69d00' warning-soft: 'rgba(230, 157, 0, 0.16)' danger: '#ff6b3d' # lifted warm red on dark danger-soft: 'rgba(255, 68, 0, 0.18)' info: '#1ea7fd' info-soft: 'rgba(30, 167, 253, 0.16)' typography: display: family: '"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [600, 700, 800] body: family: '"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [400, 600, 700] mono: family: '"Operator Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 800, lineHeight: 1.0, tracking: '-0.02em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.015em', family: display } h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.012em', family: display } h2: { size: 32, weight: 700, lineHeight: 1.2, tracking: '-0.008em', family: display } h3: { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.004em', family: display } h4: { size: 20, weight: 700, lineHeight: 1.3, tracking: '0', family: display } h5: { size: 18, weight: 700, lineHeight: 1.4, tracking: '0', family: display } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body } lead: { size: 20, weight: 400, lineHeight: 1.55, tracking: '0', family: body } label: { size: 13, weight: 700, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 13, weight: 800, lineHeight: 1.4, tracking: '0.06em', family: body, transform: uppercase } caption: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.01em', family: body } button: { size: 15, weight: 700, lineHeight: 1.2, tracking: '0', family: body } code-inline: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: mono } code-block: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 components: button-primary: { bg: brand, text: on-brand, padding: '12px 20px', radius: 9999 } button-pill-white: { bg: cta-bg, text: cta-text, padding: '12px 24px', radius: 9999 } button-ghost: { bg: transparent, text: text, border: border, padding: '12px 20px', radius: 9999 } card: { bg: surface, border: border, radius: 12, padding: 24 } input: { bg: bg, border: border, text: text, radius: 8, padding: '10px 14px' } motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(0, 0, 0, 0.05) 0 1px 3px' card: 'rgba(0, 0, 0, 0.06) 0 1px 3px, rgba(0, 0, 0, 0.08) 0 4px 12px -2px' elevated: 'rgba(0, 0, 0, 0.08) 0 4px 12px, rgba(0, 0, 0, 0.06) 0 12px 24px -6px' popover: 'rgba(0, 0, 0, 0.12) 0 12px 32px -8px' modal: 'rgba(0, 0, 0, 0.20) 0 24px 64px -16px' brand-glow: '0 0 0 3px rgba(255, 71, 133, 0.30)' accessibility: contrast-text-on-bg: 21.0 # #000000 on #ffffff — AAA (theoretical max) contrast-text-secondary-on-bg: 9.2 # #454545 on #ffffff — AAA at body sizes contrast-text-tertiary-on-bg: 4.2 # #73828c on #ffffff — AA at large; large/meta only contrast-text-on-ink: 17.5 # #ffffff on #0d1026 — AAA at all sizes contrast-brand-on-bg: 3.6 # #ff4785 on #ffffff — AA large only; pair with weight/underline contrast-on-brand: 4.0 # #ffffff on #ff4785 — AA large; use 700 weight on coral fills focus-ring: '3px coral #ff4785 ring at 0.30 alpha + 2px offset' reduced-motion-honored: true touch-target-min: 44 lineage: summary: 'Storybook''s visual identity descends from open-source community-tooling tradition rather than venture-design polish. The brand mark is the signature coral-pink `#FF4785` — a warm, high-energy accent that reads as friendly and approachable, the opposite of the cool blues and engineered near-blacks that dominate developer-tool branding. The typeface is **Nunito Sans**, a rounded humanist sans whose soft terminals reinforce the same warmth; where Vercel commits to the austere engineered silhouette of Geist, Storybook chooses a face that feels hand-rounded and community-built. The site''s structural move is the dark inversion hero: a deep ink-navy `#0d1026` band carrying a large white headline, framing the pitch like the cover of an actual storybook before the bright white content sections begin. The full-pill (`9999px`) CTA geometry is the through-line — rounded buttons echoing the rounded type and the low-friction, beginner-welcoming register the whole project is built around. Storybook''s design DNA is component-driven development made visually friendly: the tool that lets you build UI in isolation should itself feel open, warm, and unintimidating.' influences: - name: 'Nunito Sans (Vernon Adams / Google Fonts)' role: 'The rounded humanist sans that carries the brand''s warmth — soft terminals signal open, friendly, community-built rather than engineered austerity.' url: 'https://fonts.google.com/specimen/Nunito+Sans' - name: 'Chromatic' role: 'Storybook''s primary commercial sponsor and the team behind much of its design language; the coral-pink and rounded register carry across both surfaces.' url: 'https://www.chromatic.com' - name: 'Component-Driven Development (componentdriven.org)' role: 'The methodology Storybook embodies — build UIs bottom-up from isolated components — shapes the catalog-of-parts visual structure of the site.' url: 'https://www.componentdriven.org' - name: 'Material Design' role: 'Standard easing curves and the elevation-via-soft-shadow vocabulary descend from Material''s motion and depth conventions.' url: 'https://m3.material.io' - name: 'MDX / Markdoc documentation tradition' role: 'Storybook''s docs-as-components approach (Docs addon, MDX stories) shapes the prose-plus-live-preview layout rhythm of the marketing and docs surfaces.' url: 'https://mdxjs.com' - name: 'GitHub open-source project sites' role: 'The community-tooling register — contributor grids, ecosystem logos, "made by the community" framing — descends from the open-source project-site tradition.' url: 'https://github.com/storybookjs/storybook' --- ## 1. Visual Theme & Atmosphere Storybook's site is the friendly face of frontend tooling. Where the developer-tool category trends toward engineered austerity — near-black canvases, cool blues, monoline sans faces, hairline-tight geometry — Storybook leans the other way: a bright white `#ffffff` canvas, the rounded humanist warmth of **Nunito Sans**, full-pill (`9999px`) button geometry, and a signature coral-pink `#FF4785` that radiates approachability. The whole brand is built around the idea that the tool which lets you build UI components in isolation should itself feel open, welcoming, and unintimidating. It's an open-source community project's visual identity, not a venture-design moodboard. The structural signature is the **dark inversion hero**. The page opens on a deep ink-navy `#0d1026` band carrying a large white headline — 56px at weight 700 in the audited hero — framing the pitch like the cover of an actual storybook before the bright white content sections below begin. This single dark band against an otherwise white site is the brand's most considered move: it gives the headline gravity and theatricality without sacrificing the airy, friendly content surfaces that follow. The contrast is deliberate — dark cover, bright pages. The typographic choice carries the warmth. **Nunito Sans** is a rounded humanist sans whose soft, slightly bulbous terminals read as hand-finished rather than engineered. Set against pure-black body type on white, it stays crisp and legible, but the rounding takes the edge off — the same way the project's documentation, beginner tutorials, and "Storybook for X framework" guides take the edge off learning a new tool. The display weights run heavy (700–800) so headlines land with confident, friendly emphasis rather than thin austerity. The coral-pink `#FF4785` is the chromatic identity. It's Storybook's instantly recognizable accent — the logo color, the link color, the highlight color, the brand-moment color. It appears as inline links, as the active-state marker, as the fill on alternate coral CTAs, and as the focus ring. The audit caught white-on-canvas pill chrome on the hero CTA (white pill on the dark band), but the brand mark itself is unmistakably coral — and coral is what makes a Storybook page instantly recognizable even before you read a word. It's a warm accent in a category of cool ones, and that difference is the entire brand. The atmospheric vocabulary that captures Storybook's feeling: *white-canvas, rounded-sans, coral-pink-mark, dark-cover-hero, full-pill-CTAs, friendly-developer, community-built, component-catalog, beginner-welcoming, warm-not-cool, soft-elevation, low-friction.* Every surface lands like it was designed by an open-source community that decided their tool's marketing should feel as approachable as their getting-started guide — warm, rounded, coral-accented, and never intimidating. **Key Characteristics** - Pure white `#ffffff` canvas — the dominant content surface; never cream, never grey-tinted - Pure black `#000000` body type — maximum legibility at 21:1 contrast on white - Rounded humanist **Nunito Sans** for everything — soft terminals signal friendly, community-built warmth - Signature coral-pink `#FF4785` brand mark — logo, links, highlights, focus, alternate CTA fills - Dark inversion hero band at deep ink-navy `#0d1026` — frames the white headline like a book cover - Full-pill (`9999px`) CTA geometry — rounded buttons echoing the rounded type - Heavy display weights (700–800) — confident, friendly emphasis rather than thin austerity - Soft, low-opacity elevation shadows — cards lift gently above the white canvas - 56px / 700 white hero headline on the dark band — the audited hero treatment - Component-catalog structure — the site reads as a friendly catalog of capabilities - Warm semantic palette — coral brand, green success, amber warning, warm red-orange danger, info blue - Switchable light + dark themes via `data-theme` attribute, persisted in localStorage ## 2. Color Palette & Roles ### Primary / Canvas - **Canvas** (`#ffffff`) [→ `--bg`]: the page background — pure white, the dominant content surface across the whole site. - **Bg Elev** (`#f8f9fa`) [→ `--bg-elev`]: subtle elevation tier — section bands, inset blocks, quiet alternation. - **Bg Deeper** (`#f1f3f5`) [→ `--bg-deeper`]: third tier — code-block fills, quiet stripes, recessed panels. - **Surface** (`#ffffff`) [→ `--surface`]: default card surface — white on white, defined by border and soft shadow rather than fill contrast. - **Surface Ink** (`#0d1026`) [→ `--surface-ink`]: the dark hero / inversion band — a deep ink-navy that frames the white headline. ### Text - **Text** (`#000000`) [→ `--text`]: primary body text and headlines on white — pure black at the maximum 21:1 contrast. - **Text Secondary** (`#454545`) [→ `--text-secondary`]: supporting copy, dense-row body, sub-headings. - **Text Tertiary** (`#73828c`) [→ `--text-tertiary`]: captions, meta, muted labels — large/meta sizes only. - **Text Faint** (`#9aa5ad`) [→ `--text-faint`]: placeholder, disabled, faintest meta. - **Text on Ink** (`#ffffff`) [→ `--text-on-ink`]: white text on the dark hero band — the audited 56px / 700 headline colour. - **Text on Ink Soft** (`#b0b8c0`) [→ `--text-on-ink-soft`]: secondary text on the dark band. ### Brand - **Storybook Coral** (`#ff4785`) [→ `--brand`]: the signature brand mark — logo, inline links, highlights, focus ring, alternate CTA fills. The single colour that makes a Storybook page recognizable. - **Brand Hover** (`#e63a73`) [→ `--brand-hover`]: darker coral for link and button hover states. - **Brand Deep** (`#cc3066`) [→ `--brand-deep`]: pressed / active coral. - **Brand Soft** (`rgba(255, 71, 133, 0.10)`) [→ `--brand-soft`]: soft coral wash — badge backgrounds, focus aura, highlight rows. - **Brand Tint** (`rgba(255, 71, 133, 0.06)`) [→ `--brand-tint`]: subtlest coral tint for very quiet emphasis. ### Interactive - **Link** (`#ff4785`) [→ `--link`]: inline links in body copy — coral-pink, underline appears on hover. - **Link Hover** (`#e63a73`) [→ `--link-hover`]: link hover — deepens and reveals underline. - **CTA Bg (White Pill)** (`#ffffff`) [→ `--cta-bg`]: the audited hero CTA fill — a white pill on the dark band, black text. - **CTA Bg (Coral)** (`#ff4785`) [→ `--cta-bg-brand`]: alternate coral-filled CTA used on white content sections, white text. - **Focus** (`#ff4785`) [→ `--focus`]: keyboard focus indicator — coral ring at 0.30 alpha with 2px offset. ### Neutral / Borders - **Border** (`#e5e7eb`) [→ `--border`]: default hairline — card and input outlines. - **Border Soft** (`#f1f3f5`) [→ `--border-soft`]: quietest separation. - **Border Strong** (`#cdd2d6`) [→ `--border-strong`]: outlined buttons, focused inputs, high-emphasis dividers. ### Surface / Shadow - Cards lift via **soft low-opacity shadows** layered with a hairline border. The discipline is gentle: a tight ambient layer plus a wider diffusion at 6–8% opacity, enough to float a card above the white canvas without the heavy drama of consumer-product shadows. The dark hero band carries no shadow — it's a full-bleed inversion, not a floating element. ### Semantic - **Success** (`#66bf3c` on `rgba(102, 191, 60, 0.10)`) [→ `--success`]: advisory green — passing tests, ready states, "story published" confirmations. - **Warning** (`#e69d00` on `rgba(230, 157, 0, 0.10)`) [→ `--warning`]: advisory amber — deprecations, config warnings. - **Danger** (`#ff4400` on `rgba(255, 68, 0, 0.10)`) [→ `--danger`]: Storybook's warm red-orange — errors, destructive actions, failed builds. - **Info** (`#1ea7fd` on `rgba(30, 167, 253, 0.10)`) [→ `--info`]: informational blue — docs callouts, info banners, neutral notices. ## 3. Typography Rules ### Font Family **Primary**: `"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`. **Nunito Sans** is a rounded humanist sans designed by Vernon Adams (and extended by the Google Fonts team), available open-source under the SIL Open Font License. The audited build loads it as a Next.js-optimized font (`__Nunito_Sans_ee04dc`). Its defining feature is the gently rounded terminal — softer than Inter or Geist, warmer than Helvetica — which reads as friendly and approachable rather than engineered. It carries both display and body across the site; there is no separate display face. **Mono companion**: `"Operator Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. Code blocks, CLI commands, story file names, and prop tables use a monospace stack. Storybook's product (the component explorer itself) renders code in mono, and the marketing/docs surfaces preserve that convention for inline `code` references and snippet blocks. The single-family discipline (Nunito Sans for display and body, mono only for code) keeps the brand coherent. The warmth is carried entirely by the rounded sans — even in pure black on white, the type reads soft. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | display-hero | Nunito Sans | 80px | 800 | 1.0 | -0.02em | Oversized landing display | | display-lg | Nunito Sans | 56px | 700 | 1.05 | -0.015em | Hero headline — the audited treatment, white on dark band | | h1 | Nunito Sans | 40px | 700 | 1.10 | -0.012em | Page title, major section opener | | h2 | Nunito Sans | 32px | 700 | 1.20 | -0.008em | Section heading | | h3 | Nunito Sans | 24px | 700 | 1.25 | -0.004em | Card heading, article H3 | | h4 | Nunito Sans | 20px | 700 | 1.30 | 0 | Sub-card heading | | h5 | Nunito Sans | 18px | 700 | 1.40 | 0 | Inline emphasis heading | | lead | Nunito Sans | 20px | 400 | 1.55 | 0 | Hero deck / lede paragraph | | body-lg | Nunito Sans | 18px | 400 | 1.60 | 0 | Large body, intro paragraphs | | body | Nunito Sans | 16px | 400 | 1.60 | 0 | Default body — the audited base size | | body-sm | Nunito Sans | 14px | 400 | 1.55 | 0 | Card body, dense-row body | | label | Nunito Sans | 13px | 700 | 1.40 | 0 | Form field label, bold small text | | eyebrow | Nunito Sans | 13px | 800 | 1.40 | 0.06em | Section pre-label, uppercase | | caption | Nunito Sans | 12px | 600 | 1.40 | 0.01em | Image caption, footer micro | | button | Nunito Sans | 15px | 700 | 1.20 | 0 | Button copy — heavy weight on pills | | code-inline | Operator Mono | 14px | 400 | 1.50 | 0 | Inline `code` references | | code-block | Operator Mono | 14px | 400 | 1.60 | 0 | Code block content | ### Principles - **One family carries everything.** Nunito Sans for display, body, captions, and labels; mono only for code. The rounded silhouette is the brand's typographic identity. - **Display weights run heavy.** Headlines sit at 700–800, not 600. The friendly register wants confident emphasis — heavy Nunito Sans reads as warm-and-bold, not shouty. - **Body holds at weight 400.** The regular-weight rounded body is calm and highly legible at the 16px / 1.60 baseline the audit captured. - **Generous line-height.** Body runs at 1.60 (looser than the 1.50–1.55 dev-tool norm) — the extra air reinforces the friendly, unhurried reading rhythm. - **Negative tracking compresses with size.** `-0.02em` at 80px down to near-zero below 20px; large display headlines tighten, body and small text stay neutral. - **Eyebrows are bold uppercase.** Section pre-labels use weight 800 at 13px with `0.06em` tracking and `text-transform: uppercase` — a punchy, friendly section marker rather than a thin mono caps line. - **Coral for links, weight for emphasis.** Inline emphasis uses weight (700) and the coral link colour rather than italics; Nunito Sans is set roman throughout. - **Mono only where code lives.** Operator-style monospace appears strictly in code blocks, CLI snippets, and inline `code` — never as a decorative label face. ## 4. Component Stylings ### Buttons **Primary Coral Pill** — `#ff4785` coral fill, white text at 15px / 700, **9999px pill radius**, 12×20px padding. Hover deepens to `#e63a73` over 240ms standard. The dominant action on white content sections — *Get Started*, *Install Storybook*, *Try it now*. The coral fill is the brand-moment CTA; the pill geometry echoes the rounded type. **White Pill (Hero)** — `#ffffff` white fill, black text at 15px / 700, **9999px pill radius**, 12×24px padding. This is the audited hero CTA: a white pill sitting on the dark ink-navy hero band, where a coral fill would clash with the dark surface. Hover lifts subtly with a soft shadow. Use case: the primary hero *Get Started* on the dark cover band. **Outlined** — Transparent fill, black text at 15px / 700, 1px border at `#cdd2d6` (border-strong), **9999px pill radius**, 12×20px padding. Hover fills with `#f8f9fa` and deepens the border. Use case: secondary actions paired beside a coral or white primary — *Read the docs*, *View on GitHub*. **Ghost** — Transparent fill, black text at 15px / 700, no border, pill radius, 12×16px padding. Hover fills with `#f1f3f5`. Use case: nav links, footer secondaries, quiet in-card actions. ### Cards **Default Card** — `#ffffff` white fill, 1px hairline border at `#e5e7eb`, **12px radius**, 24px padding, soft card shadow (`rgba(0, 0, 0, 0.06) 0 1px 3px, rgba(0, 0, 0, 0.08) 0 4px 12px -2px`). The workhorse card used across feature grids, framework cards, addon directories, and ecosystem tiles. The shadow is gentle — enough to lift the white card above the white canvas without heavy drama. **Flat Card** — Same as default but `shadow: none`, border only. Used where cards stack tightly (pricing comparisons, dense addon lists), letting the hairline carry the separation. **Ink Card** — `#0d1026` dark fill, white text, no border, 12px radius, 24px padding. Used for highlight or testimonial blocks that echo the hero band, or for inverted "spotlight" cards on otherwise white pages. Rare — one or two per page. ### Inputs / Forms **Text Input** — `#ffffff` fill, black text at 16px / 400 Nunito Sans, 1px border at `#e5e7eb`, **8px radius**, 10×14px padding. Placeholder colour at `#9aa5ad` faint. On focus: border shifts to coral `#ff4785` and a 3px coral ring appears at 0.30 alpha (`0 0 0 3px rgba(255, 71, 133, 0.30)`). **Select** — Same shape as text-input with a chevron icon at right (14px) at tertiary-text colour, rotating on open. **Search** — Full-pill input variant (9999px radius) with a leading magnifier icon at tertiary colour — used in the docs search and addon-catalog filter. ### Badges, Tags, Pills **Brand Badge** — `rgba(255, 71, 133, 0.10)` brand-soft fill, coral text at 12px / 700, 9999px radius, 4×10px padding. Use case: `NEW`, `BETA`, `RECOMMENDED`, version flags. **Neutral Tag** — `#f1f3f5` neutral fill, secondary-text colour at 12px / 600, 9999px radius, 4×10px padding. Use case: framework labels (React, Vue, Svelte, Angular), category tags, addon labels. **Status Pill** — Includes a 6px circle status dot — `#66bf3c` success green for "passing / published", `#ff4400` danger for "failed", `#e69d00` for "pending" — paired with a 13px / 700 label. ### Navigation **Top Nav** — White `#ffffff` fill (or translucent white with blur when over the dark hero), **64px height**, 1px bottom hairline at `#e5e7eb`. Storybook logo + wordmark left (coral mark). Center / right: nav links (Why, Docs, Tutorials, Addons, Community, Showcase) at 15px / 700 ghost-button style. Right edge: outlined *GitHub* (with star count) + coral or white *Get Started* pill. **Footer** — `#f8f9fa` elevated band, multi-column link grid (Get Started, Docs, Community, Showcase, Releases) in Nunito Sans 14px / 400 secondary-text. Storybook logo + Chromatic sponsorship credit + social links + theme switcher at the bottom. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96` - Section padding (vertical): 64–96px for major marketing bands; 32–48px between sub-sections; 16–24px between paragraphs and content blocks - Card internal padding: 24px on default cards; 24px on ink cards; consistent and generous to reinforce the airy, friendly feel - Inter-card gutters: 24px between cards in 2–3-up grids; 16px in dense 4-up addon/ecosystem grids ### Grid & Container - Canonical max width: **1280px** for marketing and content sections - 12-column grid with 24px gutters at desktop - Reading column caps at **720px** for long-form prose (docs, tutorials, blog) — calibrated for comfortable line length - Hero treatment: full-bleed dark `#0d1026` band, headline centered or left-aligned, white 56px / 700 type, pill CTA pair below ### Whitespace Philosophy The page is **airy and generous**, not dense. Where Vercel packs dashboard-grade information rows, Storybook gives each feature room to breathe — generous section gutters (64–96px), 24px card padding, and 1.60 body line-height all reinforce the low-friction, beginner-welcoming register. Whitespace is part of the friendliness: the site never feels cramped or intimidating. ### Section Cadence A typical Storybook page runs: 1. **Hero** — full-bleed dark `#0d1026` band, 56px / 700 white headline, lede deck, white-pill primary CTA + outlined secondary, often a product screenshot or animated component preview 2. **Logo / Framework Strip** — white band, "works with every framework" — React, Vue, Angular, Svelte, Web Components logos in monochrome 3. **Feature Grid** — white `#ffffff` cards in 2–3-up, hairline borders, soft shadow, 24px / 700 card titles + 16px / 400 body 4. **Code-Tour / Live-Preview Band** — alternating prose paragraphs and live component previews or `#f1f3f5` code blocks 5. **Ecosystem / Addons Grid** — dense 4-up tiles for the addon catalog and integrations 6. **Community Band** — `#f8f9fa` elevated band, contributor grid, GitHub star count, sponsor logos 7. **Closing CTA** — coral or white pill on white (or a final dark inversion band echoing the hero) 8. **Footer** — `#f8f9fa` band, multi-column link grid, Chromatic sponsorship credit The alternation is *brightness-based with one dark anchor* — white → elevated-grey → white, bookended by the dark hero (and sometimes a dark closing band). ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Decorative dividers, inner focus marks | | Small | 4px | Inner chips, tight inset elements | | Standard | 8px | Inputs, selects, code chips | | Comfortable | 12px | Cards, panels, modal corners — the dominant content radius | | Large | 16px | Large surfaces, hero panels, feature illustrations | | Pill | 9999px | Buttons, badges, tags, search inputs — the signature CTA geometry | Storybook's signature shape is the **full pill (`9999px`)** on every button, badge, and tag. Where Vercel commits to a sharp 6px button radius for an engineered feel, Storybook rounds everything fully — the pill geometry echoes the rounded Nunito Sans terminals and reinforces the friendly, approachable register. Cards and panels use a comfortable 12px radius; inputs sit at 8px. The rounding is the brand: soft type, soft buttons, soft corners. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, canvas bg | Page canvas, body sections, the dark hero band | | 1 — Hairline | 1px `#e5e7eb` border | Flat cards, dense tiles, inputs | | 2 — Card | 1px border + `rgba(0, 0, 0, 0.06) 0 1px 3px, rgba(0, 0, 0, 0.08) 0 4px 12px -2px` | Default feature cards | | 3 — Elevated | `rgba(0, 0, 0, 0.08) 0 4px 12px, rgba(0, 0, 0, 0.06) 0 12px 24px -6px` | Dropdowns, hover-lifted cards | | 4 — Popover | `rgba(0, 0, 0, 0.12) 0 12px 32px -8px` | Menus, tooltips, popovers | | 5 — Modal | scrim `rgba(0, 0, 0, 0.40)` + `rgba(0, 0, 0, 0.20) 0 24px 64px -16px` | Dialogs, confirmation modals | ### Shadow Philosophy Storybook uses **soft, low-opacity dual-layer shadows** — a tight ambient layer plus a wider diffusion at 6–8% opacity — to gently float white cards above the white canvas. The discipline is friendly rather than dramatic: the shadow signals "this is liftable / interactive" without the heavy drop-shadow of consumer products. Because cards are white-on-white, the shadow (plus the hairline border) does the entire elevation job — there's no fill-contrast to lean on. The dark hero band is the one surface with no shadow at all: it's a full-bleed inversion, anchored to the page, not floating above it. On hover, cards lift one tier (shadow intensifies, border deepens slightly) over 240ms — a gentle, welcoming response rather than a sharp pop. ## 8. Interaction & Motion ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, and colour transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier; modal entry, toast slide-in, accordion expand ### Duration Buckets | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Link underline, focus ring fade-in, icon rotate | | Standard | 240ms | Button hover, card lift, colour transitions | | Slow | 320ms | Dropdown reveal, accordion expand, scroll-reveal fade | ### Per-Component Recipes - **Coral link hover**: colour deepens `#ff4785` → `#e63a73` and a 1px underline appears over 150ms ease-standard. - **Coral pill hover**: fill deepens `#ff4785` → `#e63a73` over 240ms; gentle 1px upward translate with shadow lift. - **White pill hover**: a soft shadow grows and the pill lifts 1px over 240ms — the colour holds white. - **Outlined button hover**: fill `transparent` → `#f8f9fa`, border deepens to `#cdd2d6` over 240ms. - **Card hover**: shadow intensifies one tier + 1px lift + border deepens over 240ms ease-standard — a warm, welcoming response. - **Scroll-reveal**: marketing sections fade + 12px translate-up over 320ms ease-out when entering viewport; one-shot per section. - **Accordion / FAQ**: expands over 320ms ease-emphasized with chevron rotation. - **Modal entry**: backdrop scrim fades over 240ms; content fades + scales from 0.96 → 1.0 over 320ms ease-emphasized. ### Page Transitions Page-to-page navigation uses a soft cross-fade with the sticky header staying static. Anchor links smooth-scroll over ~500ms ease-emphasized. Storybook's docs site (built on a JS framework with client-side routing) prefetches, so most navigation feels instant. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress — replaced with instant render or opacity-only fades. Card-lift and pill-lift become a flat colour/shadow change. Scroll-reveal becomes static on-mount. Modal scale-in becomes instant. Nothing breaks; the friendly experience stays intact, just still. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | `#000000` text on `#ffffff` canvas | 21.0 | AAA (theoretical max) | | `#454545` secondary on `#ffffff` | 9.2 | AAA at body sizes | | `#73828c` tertiary on `#ffffff` | 4.2 | AA at large / meta sizes only | | `#9aa5ad` faint on `#ffffff` | 2.6 | Fails AA — placeholder / disabled only | | `#ffffff` text on `#0d1026` hero band | 17.5 | AAA at all sizes | | `#ff4785` coral on `#ffffff` canvas | 3.6 | AA large only — pair links with weight + underline | | `#ffffff` text on `#ff4785` coral pill | 4.0 | AA large — coral CTAs use 700 weight at ≥15px | | `#000000` text on `#ff4785` coral | 5.2 | AA at body sizes — alternate high-contrast coral treatment | The coral brand `#FF4785` sits at 3.6:1 against white — below AA for small body text. The site mitigates this two ways: inline links use weight (700) plus a hover-underline so the affordance reads beyond colour alone, and coral CTAs carry white text at 700 weight ≥15px (AA-large). For body-size coral text, the black-on-coral pairing (5.2:1) is the accessible alternative. ### Focus Indicators Focus ring is a **3px coral `#ff4785` ring at 0.30 alpha with 2px outline-offset** (`0 0 0 3px rgba(255, 71, 133, 0.30)`). The coral focus ring reinforces the brand on every keyboard-tabbed element — buttons, links, inputs, and tiles all show the same warm ring. It's more visible than a 2px convention and reads clearly against both the white canvas and the dark hero band. ### ARIA Patterns - **Top nav**: `