{
  "schema": "webstylebook.agent-handoff.v2",
  "variant": "slim",
  "generatedAt": "2026-06-05T03:43:06.505Z",
  "handoffUrl": "https://www.webstylebook.com/pages/prompt-workflow?path=ai",
  "jsonEndpoint": "https://www.webstylebook.com/agent-handoff.json",
  "fullVersion": "https://www.webstylebook.com/agent-handoff.full.json",
  "purpose": "Static, JS-free handoff contract for AI coding agents. EN only. Fetch this JSON and you have everything needed: pre-flight checklist, style catalog summaries, anti-patterns, verification checklist, the build prompt, and the self-audit prompt. For trilingual full metadata, fetch fullVersion.",
  "howToUse": [
    "Fetch this JSON with curl or any HTTP client. No JavaScript execution required.",
    "Run the pre-flight checklist before any design or code.",
    "Choose one primary style (optionally one secondary) from `styles`. Open `detailUrl` only when the compact entry is not enough.",
    "Use `prompts.oneShot` as the implementation contract.",
    "After building, run `prompts.selfAudit` on your own output to produce PASS / FIX-NOW / RISK verdicts.",
    "Confirm every entry in `antiPatterns` is absent.",
    "Walk through every group of `selfVerificationChecklist` before claiming completion."
  ],
  "humanInputPolicy": {
    "productContext": "Use the human request, repository context, attached notes, or current task as the product source. Do not infer that Web Stylebook itself is the product.",
    "missingDetails": "Make conservative assumptions, document them in design.md under an \"Assumptions\" section, and continue unless the missing detail blocks implementation.",
    "customRoute": "https://www.webstylebook.com/pages/prompt-workflow?path=custom"
  },
  "parseOrder": [
    "Read this usage guide and the pre-flight checklist first.",
    "Confirm all five pre-flight items, recording assumptions in design.md.",
    "Scan the embedded style catalog by tags, bestFor, constraints, notIdealFor, typography, layout, motion, and palette. Read every entry — do not stop after the heuristics.",
    "Reject any candidate whose notIdealFor matches the target product before picking.",
    "Calibrate your pick against decisionExamples (product → chosen → reasoning → wouldNotPick).",
    "Choose one primary style and optionally one secondary style.",
    "Open detailUrl only for selected styles when the embedded catalog is insufficient.",
    "Read the build prompt as the implementation contract.",
    "Implement design.md, theme tokens, reusable components, then complete responsive screens.",
    "Run every group of the self-verification checklist.",
    "Run the self-audit prompt against your own output to produce PASS / FIX-NOW / RISK verdicts.",
    "Do not treat Web Stylebook itself as the target product unless the human explicitly says so."
  ],
  "agentGuide": "This document is the briefing for an AI coding agent before implementation.\nHandoff page: https://www.webstylebook.com/pages/prompt-workflow?path=ai\nDirect JSON (slim, EN-only): https://www.webstylebook.com/agent-handoff.json\nDirect JSON (full, trilingual): https://www.webstylebook.com/agent-handoff.full.json\n\nRead in this order:\n1. This usage guide.\n2. Pre-flight checklist — confirm all five items before writing any code or design.\n3. Style catalog — pick one primary style (optionally one secondary) for the product. Read every entry; check notIdealFor before committing.\n4. Decision examples — calibrate your pick against worked examples (product → chosen primary/secondary → reasoning → wouldNotPick).\n5. Anti-patterns — hard constraints, not preferences.\n6. Build prompt — the implementation contract.\n7. Self-verification checklist — run before reporting completion.\n8. Self-audit prompt — run on your own output to grade PASS / FIX-NOW / RISK.\n\nRules:\n- Do not copy Web Stylebook as the target product.\n- Infer the product from the human request, repository, URL context, or attached notes.\n- If details are missing, make a conservative assumption, record it in design.md under \"Assumptions\", and continue.\n- Produce design.md, theme tokens, reusable components, complete responsive screens, an anti-pattern absence check, and a verification summary.\n- Never claim completion without running the self-audit.",
  "preflightChecklist": [
    {
      "id": "product-source",
      "label": "Identify the real product source before anything else",
      "detail": "The product is described by the human request, attached files, the current repository, or the current task. The Web Stylebook page itself is never the product unless the human explicitly says so."
    },
    {
      "id": "repo-context",
      "label": "Inspect the repository before choosing a stack",
      "detail": "If a repository exists, read package.json, README, framework config, and existing routes first. Do not override an existing framework without explicit instruction. Match the package manager already in use."
    },
    {
      "id": "style-pick",
      "label": "Choose exactly one primary style up front",
      "detail": "Pick one primary style that fits the product purpose. Optionally pick one secondary style for accents. Record the reasoning in design.md so future changes stay consistent."
    },
    {
      "id": "page-scope",
      "label": "Define the minimum page set",
      "detail": "List only the pages needed to make the product usable. Do not generate generic marketing pages (Hero + Features + Testimonials + CTA) unless the product is actually a marketing site."
    },
    {
      "id": "missing-detail-policy",
      "label": "Handle missing details without stalling",
      "detail": "When a detail is missing, make a conservative assumption, write it in design.md under an \"Assumptions\" section, and continue. Only stop and ask when the missing detail makes implementation literally impossible."
    }
  ],
  "selfVerificationChecklist": [
    {
      "id": "build",
      "title": "Build checks",
      "items": [
        "lint passes",
        "typecheck passes",
        "build command succeeds",
        "no runtime console errors or warnings",
        "no hydration mismatch warnings"
      ]
    },
    {
      "id": "layout",
      "title": "Layout & rendering checks",
      "items": [
        "no horizontal scroll on any breakpoint (≥320px through ≥1440px)",
        "no text clipping or truncation that hides meaning",
        "mobile viewport (≤390px) renders cleanly without zoom",
        "desktop viewport (≥1280px) does not look stretched or empty",
        "no nested cards or panels-inside-panels without purpose",
        "borders are visibly visible (not 8–12% opacity ghosts)"
      ]
    },
    {
      "id": "fidelity",
      "title": "Style fidelity checks",
      "items": [
        "chosen style direction is visibly present — not averaged into a generic SaaS look",
        "design tokens are used (no hardcoded hex/px values in components)",
        "typography hierarchy reads at a glance (display ≫ heading ≫ body)",
        "contrast meets WCAG AA for body text (≥4.5:1)",
        "no decorative chips, badges, or bullets without specific information"
      ]
    },
    {
      "id": "behavior",
      "title": "Behavioral checks",
      "items": [
        "keyboard focus is visible on every interactive element",
        "reduced-motion preference is honored",
        "forms validate and surface errors without silent failure",
        "copy buttons, navigation, and route preservation work"
      ]
    },
    {
      "id": "docs",
      "title": "Documentation checks",
      "items": [
        "design.md exists and matches the implemented output",
        "all assumptions made for missing details are recorded in design.md",
        "verification summary lists commands run, viewports inspected, and remaining risks"
      ]
    }
  ],
  "antiPatterns": [
    {
      "id": "generic-saas",
      "pattern": "Generic SaaS landing template",
      "why": "Hero + 3 features + testimonial + CTA defaults dilute the chosen style and ignore what the product actually needs.",
      "fix": "Start from what the product actually needs (dashboard? editor? form?), then apply the chosen style. Marketing-page structure is never the default."
    },
    {
      "id": "fake-content",
      "pattern": "Placeholder copy and fake content",
      "why": "Lorem ipsum, invented testimonials, stock metrics, and \"trusted by 10,000+ teams\" lines make the result untrustworthy and not ship-able.",
      "fix": "Write real or plausible product-specific copy. If a metric or testimonial is unknown, omit the section entirely rather than fabricating it."
    },
    {
      "id": "nested-cards",
      "pattern": "Nested cards and stacked panels",
      "why": "Cards inside cards inflate borders, kill hierarchy, and produce cheap-looking output. Two stacked rounded panels rarely add information.",
      "fix": "Use one surface level per section. Group with spacing, dividers, or typography — not by wrapping more cards."
    },
    {
      "id": "decorative-chips",
      "pattern": "Decorative chips and badges without information",
      "why": "Generic chips like \"AI-powered\", \"Modern UI\", \"Fast\", or empty status pills add no information and signal templated work.",
      "fix": "Every chip must carry a specific, verifiable fact (a number, a name, a constraint, a status). If you cannot fill that, delete the chip."
    },
    {
      "id": "unverified-completion",
      "pattern": "Claiming completion without verification",
      "why": "Saying \"done\" without listing the checks run, the viewports inspected, and the remaining risks hides regressions and forces re-work.",
      "fix": "End every implementation with a verification summary: commands run, viewports inspected, fonts loaded, console state, and remaining risks. Use the self-audit prompt on this page."
    },
    {
      "id": "wsb-as-product",
      "pattern": "Mistaking Web Stylebook for the product",
      "why": "If the agent treats this style catalog as the product, the resulting work has nothing to do with the human request.",
      "fix": "The product is whatever the human request, repository, attached task, or URL context describes. Web Stylebook is only the style reference."
    }
  ],
  "decisionExamples": [
    {
      "id": "fleet-tracking-dashboard",
      "product": "Real-time fleet tracking dashboard for logistics ops managers; dense tables, map view, vehicle status, alerts.",
      "chosenPrimary": "quiet-utility",
      "chosenSecondary": "runtime-signal",
      "reasoning": "Operational SaaS that gets repeated daily use. Trust and scanning matter more than spectacle. quiet-utility carries the calm-base; runtime-signal contributes the technical status-readout language for the live data panels.",
      "wouldNotPick": [
        {
          "id": "kinetic-pop",
          "reason": "Oversized loud type and springy hovers would fatigue daily operators and bury alert hierarchy."
        },
        {
          "id": "holographic-fluid",
          "reason": "Iridescent gradients beneath dense data destroy contrast and slow scanning."
        }
      ]
    },
    {
      "id": "indie-music-label-launch",
      "product": "Launch site for an indie music label dropping its first compilation; artist roster, listen previews, vinyl preorder.",
      "chosenPrimary": "duotone-bold",
      "chosenSecondary": "neon-drift",
      "reasoning": "Music release benefits from focused 2-color identity (duotone-bold lists music apps in bestFor). Optional neon-drift accent for the listen preview rail brings nightlife energy without flooding the page.",
      "wouldNotPick": [
        {
          "id": "quiet-utility",
          "reason": "Calm operations grammar undersells a release moment and feels institutional for a creator product."
        }
      ]
    },
    {
      "id": "security-scanner-homepage",
      "product": "Marketing homepage for an open-source secrets-scanning CLI; positioning, install flow, GitHub stars, enterprise CTA.",
      "chosenPrimary": "terminal-core",
      "chosenSecondary": "platform-core",
      "reasoning": "Developer-native CLI product. terminal-core gives the install-and-scan demo authentic command-line feel. platform-core provides the enterprise CTA section with the deployable-platform polish that converts buyers.",
      "wouldNotPick": [
        {
          "id": "claymorphism",
          "reason": "Puffy friendly shapes break developer trust signal and contradict security positioning."
        },
        {
          "id": "kinetic-pop",
          "reason": "Campaign loudness reads as marketing hype, not as technical credibility."
        }
      ]
    },
    {
      "id": "sdk-documentation-site",
      "product": "Public documentation site for a payments SDK; reference, guides, code samples in multiple languages, searchable.",
      "chosenPrimary": "fusion-editorial-terminal",
      "chosenSecondary": "platform-core",
      "reasoning": "Long-form technical reading + code blocks is exactly fusion-editorial-terminal's remit (article flow with log callouts and code cards). platform-core supplies the cross-cutting navigation, auth, and pricing pages without breaking the docs reading rhythm.",
      "wouldNotPick": [
        {
          "id": "aurora-gradient",
          "reason": "Cosmic background atmosphere is unreadable for long-form technical text and code."
        }
      ]
    },
    {
      "id": "limited-drop-product-launch",
      "product": "One-page launch for a limited drop of designer sneakers; countdown, hero shot, drop time, single CTA.",
      "chosenPrimary": "fusion-kinetic-brutal",
      "reasoning": "One bold moment that must convert before the drop ends. fusion-kinetic-brutal gives maximum energy with structural guardrails (so the countdown and CTA stay readable). No secondary needed — splitting the visual direction would weaken the punch.",
      "wouldNotPick": [
        {
          "id": "zen-minimalism",
          "reason": "Restraint-first whitespace would feel like the brand is unsure about the drop and kills urgency."
        },
        {
          "id": "editorial-silence",
          "reason": "Magazine cadence is the opposite tempo of a countdown-driven sale."
        }
      ]
    },
    {
      "id": "internal-hr-onboarding-tool",
      "product": "Internal HR onboarding admin used by operations teams to set up new employee accounts and access; multi-step forms, status board, audit log.",
      "chosenPrimary": "quiet-utility",
      "reasoning": "Internal tool used daily by a small team; correctness, scanning, and trust dominate over expressive design. quiet-utility was built for exactly this: dense but breathable forms, restrained type, no decorative illustration. No secondary — single grammar reduces cognitive load.",
      "wouldNotPick": [
        {
          "id": "duotone-bold",
          "reason": "Media-rail composition has no relevance to multi-step employee forms."
        }
      ]
    },
    {
      "id": "designer-portfolio",
      "product": "Personal portfolio for an independent product designer; case studies with long-form writing, full-bleed visuals, contact.",
      "chosenPrimary": "editorial-silence",
      "chosenSecondary": "mono-type",
      "reasoning": "Portfolio sells the designer's eye through hierarchy and restraint. editorial-silence carries the case-study reading. mono-type can take the index/archive page where typography alone should rank work — color would distract.",
      "wouldNotPick": [
        {
          "id": "cyberpunk-glitch",
          "reason": "Glitch surface fights the case-study reading and reads as one specific genre rather than designer range."
        },
        {
          "id": "retro-pixel",
          "reason": "Game aesthetic limits the portfolio to a niche audience and undermines premium client trust."
        }
      ]
    }
  ],
  "styleSelectionHeuristics": [
    "Operational SaaS, dashboards, admin, and repeated workflows usually fit Quiet Utility or Platform Core.",
    "Documentation, premium writing, portfolios, and editorial products usually fit Editorial Silence, Swiss Poster, or Mono Type.",
    "Creator launches, events, campaigns, and bold consumer products usually fit Kinetic Pop, Duotone Bold, or selected fusion styles.",
    "Security, developer tools, trading, infrastructure, and terminal-heavy products can fit Terminal Core, Console Launch, Cyberpunk Glitch, or Runtime Signal when contrast remains readable.",
    "If the product requires trust, repeated use, or dense scanning, favor restraint over spectacle even when using an expressive reference."
  ],
  "detailFetchPolicy": {
    "compactFirst": true,
    "fetchWhen": [
      "The chosen style needs concrete layout, surface, or motion examples beyond this JSON.",
      "The target product has an unusual tone and one detail page can prevent generic output.",
      "Two candidate styles are close and the detail pages will clarify which one fits."
    ],
    "avoidWhen": [
      "The JSON already provides enough palette, typography, layout, motion, and constraints.",
      "Opening many style pages would waste context without improving implementation."
    ]
  },
  "implementationProtocol": {
    "defaultStack": "Unless the human explicitly asks for another stack, use the current stable Next.js release with TypeScript, App Router, ESLint, and the repository-consistent package manager.",
    "designDocument": "Create design.md before broad implementation. It must define the chosen style, tone, token keys, component rules, responsive behavior, and assumptions.",
    "tokenContract": [
      "colors",
      "typography",
      "spacing",
      "radius",
      "borders",
      "shadows",
      "motion",
      "density",
      "breakpoints",
      "focus states"
    ],
    "componentFoundation": [
      "AppShell",
      "Header/Nav",
      "Button",
      "FormControls",
      "Card/Panel",
      "SectionHeader",
      "FeatureList",
      "CTA",
      "Empty/Loading/Error states",
      "domain-specific blocks"
    ],
    "libraryPolicy": "Use shadcn/ui when it improves common-control reliability. Skip it when the chosen style needs freer custom composition.",
    "assemblyPolicy": "Build complete usable screens from tokens and components. Avoid placeholder-only landing pages, nested card stacks, meaningless decoration, clipped text, and horizontal overflow.",
    "verificationChecklist": [
      "lint passes",
      "typecheck passes",
      "build command succeeds",
      "no runtime console errors or warnings",
      "no hydration mismatch warnings",
      "no horizontal scroll on any breakpoint (≥320px through ≥1440px)",
      "no text clipping or truncation that hides meaning",
      "mobile viewport (≤390px) renders cleanly without zoom",
      "desktop viewport (≥1280px) does not look stretched or empty",
      "no nested cards or panels-inside-panels without purpose",
      "borders are visibly visible (not 8–12% opacity ghosts)",
      "chosen style direction is visibly present — not averaged into a generic SaaS look",
      "design tokens are used (no hardcoded hex/px values in components)",
      "typography hierarchy reads at a glance (display ≫ heading ≫ body)",
      "contrast meets WCAG AA for body text (≥4.5:1)",
      "no decorative chips, badges, or bullets without specific information",
      "keyboard focus is visible on every interactive element",
      "reduced-motion preference is honored",
      "forms validate and surface errors without silent failure",
      "copy buttons, navigation, and route preservation work",
      "design.md exists and matches the implemented output",
      "all assumptions made for missing details are recorded in design.md",
      "verification summary lists commands run, viewports inspected, and remaining risks"
    ],
    "selfAuditRoute": "https://www.webstylebook.com/pages/prompt-workflow?path=ai#self-audit"
  },
  "prompts": {
    "oneShot": "You are an autonomous senior frontend product designer and implementation engineer.\n\nOpen this Web Stylebook handoff link before designing: https://www.webstylebook.com/pages/prompt-workflow?path=ai. Or fetch https://www.webstylebook.com/agent-handoff.json directly (no JS execution required) to get the full handoff contract — usage guide, pre-flight checklist, style catalog, anti-patterns, verification checklist, build prompt, and self-audit prompt — in one HTTP call. Choose the product-fit style before implementing, and open selected style detailUrl pages only when the compact catalog is insufficient.\n\nHow to pick the style direction (do not skip): the full catalog is in the styles[] array of this same handoff JSON. Each entry has summary, bestFor, constraints, notIdealFor, and detailUrl. Read every entry — styleSelectionHeuristics is a starting point, not a final answer. Calibrate your decision against decisionExamples (each example shows product, chosenPrimary, chosenSecondary, reasoning, and wouldNotPick). Reject any style whose notIdealFor matches the target product. If two candidates remain close, open their detailUrl pages.\n\nProject: Use the project described by the human, URL context, repository, or current task. Do not assume this Web Stylebook page is the project being built.\n\nTarget: Infer the audience from the human request. If missing, choose a conservative product audience and record the assumption in design.md.\n\nProduct: Infer the product/service from the human request. If the request is vague, define a narrow MVP that can be built and verified.\n\nSelected style references: agent chooses primary + optional secondary from the embedded style catalog.\n\nTypography: AI chooses a purpose-fit typography system after deciding the product style and tone.\n\nRequired pages: Infer the minimum page set needed for the product. Do not create unnecessary marketing pages.\n\nTech stack: Unless explicitly told otherwise, use the current stable Next.js release with TypeScript, App Router, ESLint, and a package manager matching the repository.\n\nPreferred direction: First choose the style, tone, and manner that match the product purpose. Avoid generic AI-looking UI.\n\nMust keep: Mobile stability, readable typography, accessible controls, stable responsive dimensions, clear hierarchy, and no routine clarifying questions.\n\nForbidden: Horizontal scroll, clipped text, low contrast, nested cards, meaningless decoration, placeholder-only pages, and claiming completion without verification.\n\nPre-flight (confirm before any design or code):\n\n1. Identify the real product source before anything else — The product is described by the human request, attached files, the current repository, or the current task. The Web Stylebook page itself is never the product unless the human explicitly says so.\n2. Inspect the repository before choosing a stack — If a repository exists, read package.json, README, framework config, and existing routes first. Do not override an existing framework without explicit instruction. Match the package manager already in use.\n3. Choose exactly one primary style up front — Pick one primary style that fits the product purpose. Optionally pick one secondary style for accents. Record the reasoning in design.md so future changes stay consistent.\n4. Define the minimum page set — List only the pages needed to make the product usable. Do not generate generic marketing pages (Hero + Features + Testimonials + CTA) unless the product is actually a marketing site.\n5. Handle missing details without stalling — When a detail is missing, make a conservative assumption, write it in design.md under an \"Assumptions\" section, and continue. Only stop and ask when the missing detail makes implementation literally impossible.\n\nExecution protocol:\n0. If this prompt came with a Web Stylebook link, open that link first and read the usage guide, pre-flight checklist, style catalog, anti-patterns, verification checklist, and build prompt before designing.\n1. Run the pre-flight checklist. Confirm the product source, repository state, primary style choice, page scope, and missing-detail policy before writing anything.\n2. Decide the purpose-fit visual style, tone, and manner. Use the style catalog to select one primary style and optionally one secondary style. Explain why the chosen direction fits the product and audience.\n3. If the compact style catalog is not enough, open only the selected style detailUrl pages. Do not browse every style page.\n4. If the human did not explicitly require another stack, create or continue with the current stable Next.js release, TypeScript, App Router, and ESLint.\n5. Before page implementation, create design.md with the chosen visual direction: color keys, typography keys, spacing, radius, borders, shadows, motion, density, responsive rules, and an Assumptions section.\n6. Implement the design keys as reusable theme tokens or CSS variables before building screens.\n7. Build the component foundation first. Use shadcn/ui for reliable common controls when it helps, but do not force it when custom composition is needed for the style.\n8. Assemble complete, usable screens from those components. Avoid placeholder-only landing pages unless that is the actual product.\n9. Confirm every anti-pattern listed in the handoff is absent from the result.\n10. Walk through every group of the self-verification checklist. Fix anything that fails before reporting completion.\n11. Run the self-audit prompt on your own output and produce PASS / FIX-NOW / RISK verdicts for every checkpoint.\n\nAnti-patterns — every item below must be absent from the result:\n\n1. Generic SaaS landing template\n   Why: Hero + 3 features + testimonial + CTA defaults dilute the chosen style and ignore what the product actually needs.\n   Fix: Start from what the product actually needs (dashboard? editor? form?), then apply the chosen style. Marketing-page structure is never the default.\n\n2. Placeholder copy and fake content\n   Why: Lorem ipsum, invented testimonials, stock metrics, and \"trusted by 10,000+ teams\" lines make the result untrustworthy and not ship-able.\n   Fix: Write real or plausible product-specific copy. If a metric or testimonial is unknown, omit the section entirely rather than fabricating it.\n\n3. Nested cards and stacked panels\n   Why: Cards inside cards inflate borders, kill hierarchy, and produce cheap-looking output. Two stacked rounded panels rarely add information.\n   Fix: Use one surface level per section. Group with spacing, dividers, or typography — not by wrapping more cards.\n\n4. Decorative chips and badges without information\n   Why: Generic chips like \"AI-powered\", \"Modern UI\", \"Fast\", or empty status pills add no information and signal templated work.\n   Fix: Every chip must carry a specific, verifiable fact (a number, a name, a constraint, a status). If you cannot fill that, delete the chip.\n\n5. Claiming completion without verification\n   Why: Saying \"done\" without listing the checks run, the viewports inspected, and the remaining risks hides regressions and forces re-work.\n   Fix: End every implementation with a verification summary: commands run, viewports inspected, fonts loaded, console state, and remaining risks. Use the self-audit prompt on this page.\n\n6. Mistaking Web Stylebook for the product\n   Why: If the agent treats this style catalog as the product, the resulting work has nothing to do with the human request.\n   Fix: The product is whatever the human request, repository, attached task, or URL context describes. Web Stylebook is only the style reference.\n\nSelf-verification — run every group below before reporting completion:\n\n[Build checks]\n- lint passes\n- typecheck passes\n- build command succeeds\n- no runtime console errors or warnings\n- no hydration mismatch warnings\n\n[Layout & rendering checks]\n- no horizontal scroll on any breakpoint (≥320px through ≥1440px)\n- no text clipping or truncation that hides meaning\n- mobile viewport (≤390px) renders cleanly without zoom\n- desktop viewport (≥1280px) does not look stretched or empty\n- no nested cards or panels-inside-panels without purpose\n- borders are visibly visible (not 8–12% opacity ghosts)\n\n[Style fidelity checks]\n- chosen style direction is visibly present — not averaged into a generic SaaS look\n- design tokens are used (no hardcoded hex/px values in components)\n- typography hierarchy reads at a glance (display ≫ heading ≫ body)\n- contrast meets WCAG AA for body text (≥4.5:1)\n- no decorative chips, badges, or bullets without specific information\n\n[Behavioral checks]\n- keyboard focus is visible on every interactive element\n- reduced-motion preference is honored\n- forms validate and surface errors without silent failure\n- copy buttons, navigation, and route preservation work\n\n[Documentation checks]\n- design.md exists and matches the implemented output\n- all assumptions made for missing details are recorded in design.md\n- verification summary lists commands run, viewports inspected, and remaining risks\n\nRequired deliverables:\n\n- design.md with the chosen visual style, tone, token keys, component rules, responsive behavior, and an Assumptions section.\n\n- A tokenized theme or CSS variable layer that matches design.md.\n\n- Reusable base components before page-specific layouts.\n\n- Complete responsive pages using the chosen stack.\n\n- A final verification summary listing commands run, viewports inspected, anti-patterns confirmed absent, remaining risks, and files changed.\n\nWorking rule: if information is missing, make a reasonable assumption, write it in design.md under Assumptions, and keep moving unless the missing detail makes implementation impossible.",
    "selfAudit": "You are auditing your own frontend implementation against the Web Stylebook handoff contract.\n\nFor every checkpoint, return one verdict: PASS, FIX-NOW, or RISK. FIX-NOW must be fixed before the work is reported as done. RISK is acceptable but must be named in the verification summary.\n\nHandoff link the work used: https://www.webstylebook.com/pages/prompt-workflow?path=ai\n\nProject: Use the project described by the human, URL context, repository, or current task. Do not assume this Web Stylebook page is the project being built.\n\nTarget: Infer the audience from the human request. If missing, choose a conservative product audience and record the assumption in design.md.\n\nProduct: Infer the product/service from the human request. If the request is vague, define a narrow MVP that can be built and verified.\n\nSelected style references: agent chooses primary + optional secondary from the embedded style catalog.\n\nTypography: AI chooses a purpose-fit typography system after deciding the product style and tone.\n\nRequired pages: Infer the minimum page set needed for the product. Do not create unnecessary marketing pages.\n\nTech stack: Unless explicitly told otherwise, use the current stable Next.js release with TypeScript, App Router, ESLint, and a package manager matching the repository.\n\nPreferred direction: First choose the style, tone, and manner that match the product purpose. Avoid generic AI-looking UI.\n\nMust keep: Mobile stability, readable typography, accessible controls, stable responsive dimensions, clear hierarchy, and no routine clarifying questions.\n\nForbidden: Horizontal scroll, clipped text, low contrast, nested cards, meaningless decoration, placeholder-only pages, and claiming completion without verification.\n\nPre-flight — confirm each item is reflected in the actual output and in design.md:\n\n1. Identify the real product source before anything else — The product is described by the human request, attached files, the current repository, or the current task. The Web Stylebook page itself is never the product unless the human explicitly says so.\n2. Inspect the repository before choosing a stack — If a repository exists, read package.json, README, framework config, and existing routes first. Do not override an existing framework without explicit instruction. Match the package manager already in use.\n3. Choose exactly one primary style up front — Pick one primary style that fits the product purpose. Optionally pick one secondary style for accents. Record the reasoning in design.md so future changes stay consistent.\n4. Define the minimum page set — List only the pages needed to make the product usable. Do not generate generic marketing pages (Hero + Features + Testimonials + CTA) unless the product is actually a marketing site.\n5. Handle missing details without stalling — When a detail is missing, make a conservative assumption, write it in design.md under an \"Assumptions\" section, and continue. Only stop and ask when the missing detail makes implementation literally impossible.\n\nAnti-patterns — confirm each is absent. If present, report FIX-NOW with the exact location:\n\n1. Generic SaaS landing template\n   Why: Hero + 3 features + testimonial + CTA defaults dilute the chosen style and ignore what the product actually needs.\n   Fix: Start from what the product actually needs (dashboard? editor? form?), then apply the chosen style. Marketing-page structure is never the default.\n\n2. Placeholder copy and fake content\n   Why: Lorem ipsum, invented testimonials, stock metrics, and \"trusted by 10,000+ teams\" lines make the result untrustworthy and not ship-able.\n   Fix: Write real or plausible product-specific copy. If a metric or testimonial is unknown, omit the section entirely rather than fabricating it.\n\n3. Nested cards and stacked panels\n   Why: Cards inside cards inflate borders, kill hierarchy, and produce cheap-looking output. Two stacked rounded panels rarely add information.\n   Fix: Use one surface level per section. Group with spacing, dividers, or typography — not by wrapping more cards.\n\n4. Decorative chips and badges without information\n   Why: Generic chips like \"AI-powered\", \"Modern UI\", \"Fast\", or empty status pills add no information and signal templated work.\n   Fix: Every chip must carry a specific, verifiable fact (a number, a name, a constraint, a status). If you cannot fill that, delete the chip.\n\n5. Claiming completion without verification\n   Why: Saying \"done\" without listing the checks run, the viewports inspected, and the remaining risks hides regressions and forces re-work.\n   Fix: End every implementation with a verification summary: commands run, viewports inspected, fonts loaded, console state, and remaining risks. Use the self-audit prompt on this page.\n\n6. Mistaking Web Stylebook for the product\n   Why: If the agent treats this style catalog as the product, the resulting work has nothing to do with the human request.\n   Fix: The product is whatever the human request, repository, attached task, or URL context describes. Web Stylebook is only the style reference.\n\nSelf-verification checklist — verdict per item:\n\n[Build checks]\n- lint passes\n- typecheck passes\n- build command succeeds\n- no runtime console errors or warnings\n- no hydration mismatch warnings\n\n[Layout & rendering checks]\n- no horizontal scroll on any breakpoint (≥320px through ≥1440px)\n- no text clipping or truncation that hides meaning\n- mobile viewport (≤390px) renders cleanly without zoom\n- desktop viewport (≥1280px) does not look stretched or empty\n- no nested cards or panels-inside-panels without purpose\n- borders are visibly visible (not 8–12% opacity ghosts)\n\n[Style fidelity checks]\n- chosen style direction is visibly present — not averaged into a generic SaaS look\n- design tokens are used (no hardcoded hex/px values in components)\n- typography hierarchy reads at a glance (display ≫ heading ≫ body)\n- contrast meets WCAG AA for body text (≥4.5:1)\n- no decorative chips, badges, or bullets without specific information\n\n[Behavioral checks]\n- keyboard focus is visible on every interactive element\n- reduced-motion preference is honored\n- forms validate and surface errors without silent failure\n- copy buttons, navigation, and route preservation work\n\n[Documentation checks]\n- design.md exists and matches the implemented output\n- all assumptions made for missing details are recorded in design.md\n- verification summary lists commands run, viewports inspected, and remaining risks\n\nOutput format:\n\n1. Pre-flight verdicts (per item).\n\n2. Anti-pattern verdicts (per item) with file:line references for any FIX-NOW.\n\n3. Verification verdicts grouped by category, with the failing command output for any FIX-NOW.\n\n4. Final summary: total PASS / FIX-NOW / RISK counts, the smallest concrete next change for every FIX-NOW, and the residual concern for every RISK.\n\nWorking rule: do not soften verdicts to look better. A genuine FIX-NOW that survives this audit is worth more than a clean-looking report that hides issues."
  },
  "styleCount": 48,
  "styles": [
    {
      "id": "brutalist-grid",
      "name": "Brutalist Grid",
      "kind": "style",
      "tags": [
        "light",
        "bold",
        "minimal",
        "grid"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/brutalist-grid",
      "accent": "#d72600",
      "summary": "High-contrast boxes, unforgiving alignment, and visible structure for products that need attitude.",
      "bestFor": [
        "developer tools",
        "manifestos",
        "launch pages"
      ],
      "constraints": [
        "No soft shadows",
        "No decorative gradients"
      ],
      "notIdealFor": [
        "healthcare",
        "children products",
        "wellness apps",
        "finance trust products"
      ]
    },
    {
      "id": "editorial-silence",
      "name": "Editorial Silence",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "editorial"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/editorial-silence",
      "accent": "#1c1c1e",
      "summary": "A calm editorial system where hierarchy comes from type scale, measure, and deliberate silence.",
      "bestFor": [
        "essays",
        "portfolios",
        "premium docs"
      ],
      "constraints": [
        "No icon grids",
        "No saturated accents"
      ],
      "notIdealFor": [
        "gaming launches",
        "flash commerce",
        "developer dashboards",
        "high-energy campaigns"
      ]
    },
    {
      "id": "kinetic-pop",
      "name": "Kinetic Pop",
      "kind": "style",
      "tags": [
        "light",
        "bold",
        "color",
        "motion"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/kinetic-pop",
      "accent": "#ff4f7b",
      "summary": "Posters, oversized labels, and punched-up actions for pages that should feel loud and immediate.",
      "bestFor": [
        "campaigns",
        "events",
        "creator products"
      ],
      "constraints": [
        "No muted monochrome",
        "Avoid timid spacing"
      ],
      "notIdealFor": [
        "B2B operational dashboards",
        "enterprise admin",
        "financial reporting",
        "medical or legal products"
      ]
    },
    {
      "id": "cyberpunk-glitch",
      "name": "Cyberpunk Glitch",
      "kind": "style",
      "tags": [
        "dark",
        "bold",
        "tech"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/cyberpunk-glitch",
      "accent": "#22d3ee",
      "summary": "A high-voltage interface language for security, gaming, and speculative products.",
      "bestFor": [
        "security products",
        "game launchers",
        "crypto tools"
      ],
      "constraints": [
        "Do not overuse blur",
        "Keep text contrast high"
      ],
      "notIdealFor": [
        "healthcare apps",
        "financial trust products",
        "children products",
        "editorial publications"
      ]
    },
    {
      "id": "swiss-poster",
      "name": "Swiss Poster",
      "kind": "style",
      "tags": [
        "light",
        "bold",
        "minimal",
        "grid"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/swiss-poster",
      "accent": "#d41f18",
      "summary": "International Typographic Style translated into a product page: precise, lean, and confident.",
      "bestFor": [
        "information products",
        "guides",
        "architecture studios"
      ],
      "constraints": [
        "No centered paragraphs",
        "No random decoration"
      ],
      "notIdealFor": [
        "casual consumer apps",
        "playful onboarding",
        "gaming UI",
        "illustrative storytelling"
      ]
    },
    {
      "id": "quiet-utility",
      "name": "Quiet Utility",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "tech",
        "product"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/quiet-utility",
      "accent": "#526371",
      "summary": "A practical product interface that favors scanning, repeated work, and trust over spectacle.",
      "bestFor": [
        "B2B SaaS",
        "ops dashboards",
        "admin tools"
      ],
      "constraints": [
        "No oversized hero cards",
        "No decorative illustration"
      ],
      "notIdealFor": [
        "consumer marketing pages",
        "creator launches",
        "campaign sites",
        "gaming and entertainment"
      ]
    },
    {
      "id": "platform-core",
      "name": "Platform Core",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "tech",
        "product",
        "minimal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/platform-core",
      "accent": "#171717",
      "summary": "A developer-platform surface that looks deployable: auth, docs, billing, and product primitives feel aligned.",
      "bestFor": [
        "developer platforms",
        "SaaS onboarding",
        "API products"
      ],
      "constraints": [
        "Avoid novelty styling",
        "Keep contrast policy strict"
      ],
      "notIdealFor": [
        "playful consumer products",
        "lifestyle apps",
        "editorial publications",
        "art portfolios"
      ]
    },
    {
      "id": "runtime-signal",
      "name": "Runtime Signal",
      "kind": "style",
      "tags": [
        "dark",
        "grid",
        "developer",
        "runtime",
        "minimal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/runtime-signal",
      "accent": "#74c2b4",
      "summary": "Feels like a runtime dashboard and a reference manual in one surface.",
      "bestFor": [
        "observability",
        "infra dashboards",
        "technical docs"
      ],
      "constraints": [
        "No glow overload",
        "No low-contrast code"
      ],
      "notIdealFor": [
        "consumer marketing",
        "lifestyle apps",
        "storytelling pages",
        "children or education products"
      ]
    },
    {
      "id": "holographic-fluid",
      "name": "Holographic Fluid",
      "kind": "style",
      "tags": [
        "dark",
        "bold",
        "tech",
        "gradient"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/holographic-fluid",
      "accent": "#ff7eb3",
      "summary": "Iridescent surfaces and soft spatial depth for experimental premium experiences.",
      "bestFor": [
        "AI tools",
        "creative portfolios",
        "premium launches"
      ],
      "constraints": [
        "Keep text on solid overlays",
        "Respect reduced motion"
      ],
      "notIdealFor": [
        "enterprise admin",
        "financial dashboards",
        "documentation sites",
        "high-density data tools"
      ]
    },
    {
      "id": "neon-drift",
      "name": "Neon Drift",
      "kind": "style",
      "tags": [
        "dark",
        "bold",
        "tech"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/neon-drift",
      "accent": "#2ef2d5",
      "summary": "A nightlife-inspired SaaS and creator surface with luminous edges and fast perceived energy.",
      "bestFor": [
        "music tools",
        "AI launches",
        "creative apps"
      ],
      "constraints": [
        "Do not bury copy in glow",
        "Limit accent count"
      ],
      "notIdealFor": [
        "enterprise B2B",
        "healthcare",
        "legal or financial trust products",
        "editorial long-form"
      ]
    },
    {
      "id": "glass-orbit",
      "name": "Glass Orbit",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "minimal",
        "tech",
        "glass"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/glass-orbit",
      "accent": "#ff6ad8",
      "summary": "Orbital glass panels for interfaces that need depth without losing a clean product feel.",
      "bestFor": [
        "finance apps",
        "AI dashboards",
        "premium SaaS"
      ],
      "constraints": [
        "Blur only on overlays",
        "Keep borders visible"
      ],
      "notIdealFor": [
        "high-density admin tools",
        "editorial documentation",
        "wellness or craft brands",
        "retro products"
      ]
    },
    {
      "id": "terminal-core",
      "name": "Terminal Core",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "tech",
        "developer"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/terminal-core",
      "accent": "#b9ffbe",
      "summary": "A command-line mood for developer-native products and technical storytelling.",
      "bestFor": [
        "CLIs",
        "developer tools",
        "automation products"
      ],
      "constraints": [
        "Do not fake unreadable code",
        "Avoid rainbow terminal colors"
      ],
      "notIdealFor": [
        "consumer SaaS",
        "marketing campaigns",
        "editorial pages",
        "wellness and lifestyle"
      ]
    },
    {
      "id": "midnight-noir",
      "name": "Midnight Noir",
      "kind": "style",
      "tags": [
        "dark",
        "luxury"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/midnight-noir",
      "accent": "#C6A15B",
      "summary": "High-contrast luxury for premium products, private clubs, and high-value services.",
      "bestFor": [
        "luxury commerce",
        "private memberships",
        "premium services"
      ],
      "constraints": [
        "No playful icons",
        "No bright saturated palette"
      ],
      "notIdealFor": [
        "developer tools",
        "operational dashboards",
        "casual consumer apps",
        "children products"
      ]
    },
    {
      "id": "console-launch",
      "name": "Console Launch",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "tech",
        "onboarding"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/console-launch",
      "accent": "#10b981",
      "summary": "A launch interface that makes setup, status, and next actions feel immediate.",
      "bestFor": [
        "onboarding",
        "CLI products",
        "beta launches"
      ],
      "constraints": [
        "Avoid heavy marketing hero language",
        "Keep actions obvious"
      ],
      "notIdealFor": [
        "marketing landing pages",
        "editorial publications",
        "consumer commerce",
        "luxury brand sites"
      ]
    },
    {
      "id": "bento-bloom",
      "name": "Bento Bloom",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "bento"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/bento-bloom",
      "accent": "#f4d56a",
      "summary": "A friendly modular layout for communicating multiple features without visual noise.",
      "bestFor": [
        "consumer SaaS",
        "productivity tools",
        "feature pages"
      ],
      "constraints": [
        "No nested cards",
        "Avoid one-note pastel wash"
      ],
      "notIdealFor": [
        "luxury brand sites",
        "editorial publications",
        "security or dev tools",
        "finance trust products"
      ]
    },
    {
      "id": "earth-atelier",
      "name": "Earth Atelier",
      "kind": "style",
      "tags": [
        "light",
        "nature",
        "minimal",
        "warm"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/earth-atelier",
      "accent": "#ab6b49",
      "summary": "Warm tactile design language for brands that need calm craft instead of corporate polish.",
      "bestFor": [
        "wellness",
        "studios",
        "food and craft brands"
      ],
      "constraints": [
        "Avoid sterile white",
        "Avoid hyper-saturated accents"
      ],
      "notIdealFor": [
        "developer tools",
        "gaming or tech launches",
        "corporate enterprise dashboards",
        "high-density data UI"
      ]
    },
    {
      "id": "liquid-metal",
      "name": "Liquid Metal",
      "kind": "style",
      "tags": [
        "dark",
        "luxury",
        "tech"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/liquid-metal",
      "accent": "#C0C0C0",
      "summary": "A reflective premium technology direction with restrained copy and strong material presence.",
      "bestFor": [
        "hardware",
        "luxury tech",
        "automotive"
      ],
      "constraints": [
        "Do not use rainbow chrome everywhere",
        "Keep body text flat"
      ],
      "notIdealFor": [
        "B2B SaaS dashboards",
        "editorial content sites",
        "wellness and lifestyle",
        "children and education"
      ]
    },
    {
      "id": "aurora-gradient",
      "name": "Aurora Gradient",
      "kind": "style",
      "tags": [
        "dark",
        "bold",
        "gradient"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/aurora-gradient",
      "accent": "#9d7bff",
      "summary": "A cosmic atmospheric system for expressive hero sections and immersive product stories.",
      "bestFor": [
        "AI products",
        "creative launches",
        "media pages"
      ],
      "constraints": [
        "No text directly on low-contrast gradients",
        "Respect reduced motion"
      ],
      "notIdealFor": [
        "operational dashboards",
        "documentation sites",
        "finance trust products",
        "admin tools"
      ]
    },
    {
      "id": "zen-minimalism",
      "name": "Zen Minimalism",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "nature"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/zen-minimalism",
      "accent": "#6b9a8a",
      "summary": "A restraint-first layout where each object earns its place.",
      "bestFor": [
        "galleries",
        "mindfulness",
        "premium portfolios"
      ],
      "constraints": [
        "No crowded grids",
        "No bright accent noise"
      ],
      "notIdealFor": [
        "dense data dashboards",
        "gaming and entertainment",
        "high-energy campaigns",
        "feature-rich SaaS"
      ]
    },
    {
      "id": "mono-type",
      "name": "Mono Type",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "minimal",
        "type"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/mono-type",
      "accent": "#eeeeee",
      "summary": "Typography as the interface: no color crutches, no extra ornament.",
      "bestFor": [
        "docs",
        "archives",
        "minimal portfolios"
      ],
      "constraints": [
        "No accent palette",
        "No heavy shadow"
      ],
      "notIdealFor": [
        "marketing campaigns",
        "consumer commerce",
        "gaming and playful apps",
        "data visualization tools"
      ]
    },
    {
      "id": "duotone-bold",
      "name": "Duotone Bold",
      "kind": "style",
      "tags": [
        "dark",
        "bold",
        "music",
        "duotone"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/duotone-bold",
      "accent": "#c5ff00",
      "summary": "A focused two-color system for content libraries, music products, and punchy media surfaces.",
      "bestFor": [
        "music apps",
        "media libraries",
        "creator tools"
      ],
      "constraints": [
        "No multicolor palette creep",
        "Keep black base stable"
      ],
      "notIdealFor": [
        "B2B admin",
        "finance dashboards",
        "documentation sites",
        "wellness apps"
      ]
    },
    {
      "id": "mesh-gradient",
      "name": "Mesh Gradient",
      "kind": "style",
      "tags": [
        "light",
        "bold",
        "gradient"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/mesh-gradient",
      "accent": "#6c63ff",
      "summary": "A polished consumer-tech direction with soft color depth and simple product hierarchy.",
      "bestFor": [
        "consumer apps",
        "AI writing tools",
        "landing pages"
      ],
      "constraints": [
        "Do not use gradient behind every card",
        "Keep copy areas solid"
      ],
      "notIdealFor": [
        "developer tools",
        "admin and data dashboards",
        "editorial documentation",
        "craft or wellness brands"
      ]
    },
    {
      "id": "framer-motion",
      "name": "Framer Motion",
      "kind": "style",
      "tags": [
        "dark",
        "motion",
        "saas",
        "modern"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/framer-motion",
      "accent": "#8b5cf6",
      "summary": "A motion-first reference where state changes, reveal timing, and hover depth carry the brand.",
      "bestFor": [
        "motion tools",
        "SaaS launches",
        "AI products"
      ],
      "constraints": [
        "Respect prefers-reduced-motion",
        "Do not animate layout unpredictably"
      ],
      "notIdealFor": [
        "accessibility-critical products",
        "documentation sites",
        "long-form editorial",
        "low-motion contexts"
      ]
    },
    {
      "id": "claymorphism",
      "name": "Claymorphism",
      "kind": "style",
      "tags": [
        "light",
        "soft",
        "pleasant",
        "3d"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/claymorphism",
      "accent": "#ff8b7e",
      "summary": "Puffy depth and friendly components for onboarding, education, and playful tools.",
      "bestFor": [
        "education",
        "wellness",
        "creator tools"
      ],
      "constraints": [
        "No sharp corporate styling",
        "Do not over-stack shadows"
      ],
      "notIdealFor": [
        "professional B2B",
        "finance or legal",
        "developer tools",
        "security products"
      ]
    },
    {
      "id": "neumorphism",
      "name": "Neumorphism",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "clean",
        "shadow"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/neumorphism",
      "accent": "#1a73e8",
      "summary": "A soft hardware-like UI language for controls, calculators, and tactile settings.",
      "bestFor": [
        "settings panels",
        "calculators",
        "IoT controls"
      ],
      "constraints": [
        "Check contrast carefully",
        "Avoid large text on embossed surfaces"
      ],
      "notIdealFor": [
        "content-heavy sites",
        "editorial publications",
        "marketing campaigns",
        "high-density dashboards"
      ]
    },
    {
      "id": "soft-pastel",
      "name": "Soft Pastel",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "soft"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/soft-pastel",
      "accent": "#ff9a76",
      "summary": "Gentle, pleasant interface tone for personal tools and lightweight lifestyle products.",
      "bestFor": [
        "personal apps",
        "lifestyle products",
        "journals"
      ],
      "constraints": [
        "Avoid low-contrast pastel text",
        "Limit roundedness hierarchy"
      ],
      "notIdealFor": [
        "enterprise B2B",
        "developer tools",
        "finance or legal",
        "gaming or security"
      ]
    },
    {
      "id": "notion-style",
      "name": "Notion Style",
      "kind": "style",
      "tags": [
        "light",
        "minimal",
        "clean",
        "productivity"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/notion-style",
      "accent": "#2383e2",
      "summary": "A writing-and-organization surface optimized for clarity, hierarchy, and editing flow.",
      "bestFor": [
        "knowledge bases",
        "dashboards",
        "collaboration tools"
      ],
      "constraints": [
        "No heavy shadows",
        "No decorative backgrounds"
      ],
      "notIdealFor": [
        "marketing landing pages",
        "gaming and entertainment",
        "high-energy launches",
        "luxury commerce"
      ]
    },
    {
      "id": "retro-pixel",
      "name": "Retro Pixel",
      "kind": "style",
      "tags": [
        "dark",
        "retro",
        "pixel",
        "game"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/retro-pixel",
      "accent": "#a7f070",
      "summary": "A nostalgic game-interface language for playful products and retro communities.",
      "bestFor": [
        "games",
        "communities",
        "collectibles"
      ],
      "constraints": [
        "No anti-aliased glossy cards",
        "Keep hit targets usable"
      ],
      "notIdealFor": [
        "B2B SaaS",
        "professional services",
        "finance or legal",
        "enterprise admin",
        "wellness apps"
      ]
    },
    {
      "id": "y2k-retro",
      "name": "Windows 98",
      "kind": "style",
      "tags": [
        "light",
        "retro",
        "web1.0",
        "vibrant"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/y2k-retro",
      "accent": "#000080",
      "summary": "A nostalgic desktop metaphor that still works for docs, launchers, and playful tools.",
      "bestFor": [
        "retro docs",
        "launchers",
        "indie tools"
      ],
      "constraints": [
        "No modern rounded cards",
        "Keep spacing compact"
      ],
      "notIdealFor": [
        "modern enterprise SaaS",
        "finance or legal trust products",
        "wellness and lifestyle apps",
        "premium luxury"
      ]
    },
    {
      "id": "risograph-print",
      "name": "Risograph Print",
      "kind": "style",
      "tags": [
        "light",
        "texture",
        "print",
        "minimal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/risograph-print",
      "accent": "#ff6b6b",
      "summary": "A print-shop visual system with tactile paper and deliberate imperfect color separation.",
      "bestFor": [
        "art projects",
        "zines",
        "creative studios"
      ],
      "constraints": [
        "Limit to two or three spot colors",
        "Keep body text on quiet paper"
      ],
      "notIdealFor": [
        "developer dashboards",
        "finance applications",
        "enterprise SaaS",
        "high-density data tools"
      ]
    },
    {
      "id": "paper-cut",
      "name": "Paper Cut",
      "kind": "style",
      "tags": [
        "light",
        "craft",
        "layered",
        "warm"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/paper-cut",
      "accent": "#486b8c",
      "summary": "A handcrafted layered system for warm storytelling and tactile product explanations.",
      "bestFor": [
        "education",
        "craft brands",
        "story pages"
      ],
      "constraints": [
        "No glossy gradients on paper shapes",
        "Keep shadows directional"
      ],
      "notIdealFor": [
        "developer tools",
        "B2B SaaS dashboards",
        "finance or legal",
        "high-density data"
      ]
    },
    {
      "id": "macos-liquid-glass",
      "name": "macOS Liquid Glass",
      "kind": "style",
      "tags": [
        "dark",
        "light",
        "dual",
        "glass",
        "product",
        "apple"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/macos-liquid-glass",
      "accent": "#2f6feb",
      "summary": "A practical Apple-platform surface for product dashboards that need native familiarity, depth, and careful text clarity.",
      "bestFor": [
        "macOS apps",
        "admin dashboards",
        "creative tools"
      ],
      "constraints": [
        "Never place long body copy on busy glass",
        "Keep controls functional, not decorative"
      ],
      "notIdealFor": [
        "print-style editorial",
        "craft or wellness brands",
        "gaming and entertainment",
        "retro or nostalgic products"
      ]
    },
    {
      "id": "fusion-neon-swiss",
      "name": "Neon x Swiss",
      "kind": "fusion",
      "tags": [
        "dark",
        "bold",
        "tech",
        "grid"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-neon-swiss",
      "accent": "#16f2d1",
      "summary": "Swiss grid discipline holds neon drama in place.",
      "bestFor": [
        "AI dashboards",
        "event tech",
        "launch pages"
      ],
      "constraints": [
        "Keep alignment strict",
        "Do not flood every edge with neon"
      ],
      "notIdealFor": [
        "wellness apps",
        "editorial long-form",
        "children products",
        "craft or lifestyle brands"
      ]
    },
    {
      "id": "fusion-product-swiss",
      "name": "Product x Swiss",
      "kind": "fusion",
      "tags": [
        "light",
        "product",
        "grid",
        "color"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-product-swiss",
      "accent": "#ff5c35",
      "summary": "Use it when a page should feel clean, real, and optimistic without drifting into generic AI SaaS gradients.",
      "bestFor": [
        "collaboration tools",
        "design systems",
        "AI product builders",
        "creative SaaS launches"
      ],
      "constraints": [
        "Keep the canvas mostly white",
        "Use color as object, not atmosphere",
        "Show product UI or workflow artifacts",
        "Avoid glossy purple gradients"
      ],
      "notIdealFor": [
        "gaming and entertainment",
        "craft or wellness brands",
        "luxury commerce",
        "long-form editorial"
      ]
    },
    {
      "id": "fusion-bento-noir",
      "name": "Bento x Noir",
      "kind": "fusion",
      "tags": [
        "dark",
        "luxury",
        "bento"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-bento-noir",
      "accent": "#c9a96e",
      "summary": "Modular luxury for premium platforms with many features.",
      "bestFor": [
        "premium SaaS",
        "membership products",
        "finance"
      ],
      "constraints": [
        "No playful pastel drift",
        "Keep gold sparse"
      ],
      "notIdealFor": [
        "developer tools",
        "craft or wellness brands",
        "children or education products",
        "playful consumer apps"
      ]
    },
    {
      "id": "fusion-editorial-terminal",
      "name": "Editorial x Terminal",
      "kind": "fusion",
      "tags": [
        "dark",
        "tech",
        "minimal",
        "editorial"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-editorial-terminal",
      "accent": "#ffb45a",
      "summary": "A reference/manual format with enough console texture to feel technical.",
      "bestFor": [
        "technical docs",
        "release pages",
        "developer education"
      ],
      "constraints": [
        "Keep body reading comfortable",
        "Do not turn the whole page into code"
      ],
      "notIdealFor": [
        "marketing landing pages",
        "consumer commerce",
        "wellness and lifestyle",
        "gaming and entertainment"
      ]
    },
    {
      "id": "fusion-holo-glass",
      "name": "Holo x Glass",
      "kind": "fusion",
      "tags": [
        "dark",
        "tech",
        "bold",
        "glass",
        "gradient"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-holo-glass",
      "accent": "#a5e3ff",
      "summary": "Iridescent glass for premium AI and creator products.",
      "bestFor": [
        "AI tools",
        "creative suites",
        "premium dashboards"
      ],
      "constraints": [
        "Do not place text on uncontrolled gradients",
        "Limit blur depth"
      ],
      "notIdealFor": [
        "admin dashboards",
        "finance or legal",
        "editorial documentation",
        "craft and wellness"
      ]
    },
    {
      "id": "fusion-kinetic-brutal",
      "name": "Kinetic x Brutal",
      "kind": "fusion",
      "tags": [
        "light",
        "bold",
        "grid",
        "motion"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-kinetic-brutal",
      "accent": "#ff2b1c",
      "summary": "Maximum energy with structural guardrails.",
      "bestFor": [
        "campaign pages",
        "events",
        "creator drops"
      ],
      "constraints": [
        "Keep layout readable",
        "Use loud color intentionally"
      ],
      "notIdealFor": [
        "B2B trust products",
        "finance or legal",
        "wellness apps",
        "documentation sites"
      ]
    },
    {
      "id": "fusion-cyber-console",
      "name": "Cyber x Console",
      "kind": "fusion",
      "tags": [
        "dark",
        "tech",
        "bold"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-cyber-console",
      "accent": "#ff2db1",
      "summary": "A launch console that looks dangerous, technical, and fast.",
      "bestFor": [
        "security launches",
        "game ops",
        "automation tools"
      ],
      "constraints": [
        "Do not fake inaccessible text",
        "Throttle glitch effects"
      ],
      "notIdealFor": [
        "wellness and lifestyle",
        "consumer commerce",
        "editorial publications",
        "children products"
      ]
    },
    {
      "id": "fusion-grain-mono",
      "name": "Analog Press",
      "kind": "fusion",
      "tags": [
        "light",
        "vintage",
        "texture",
        "minimal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-grain-mono",
      "accent": "#b85431",
      "summary": "A monochrome reading system warmed by analog grain and print-shop color.",
      "bestFor": [
        "editorial archives",
        "music writing",
        "zines"
      ],
      "constraints": [
        "Keep grain subtle",
        "Preserve line length"
      ],
      "notIdealFor": [
        "developer dashboards",
        "enterprise admin",
        "gaming and entertainment",
        "high-density data"
      ]
    },
    {
      "id": "fusion-clay-aurora",
      "name": "Clay Aurora",
      "kind": "fusion",
      "tags": [
        "light",
        "playful",
        "gradient",
        "3d"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-clay-aurora",
      "accent": "#5fb09c",
      "summary": "A playful but polished motion surface for onboarding and learning products.",
      "bestFor": [
        "education",
        "AI companions",
        "creative onboarding"
      ],
      "constraints": [
        "Respect reduced motion",
        "Keep content on solid cards"
      ],
      "notIdealFor": [
        "enterprise B2B",
        "developer tools",
        "finance or legal products",
        "gaming"
      ]
    },
    {
      "id": "fusion-floppy-exe",
      "name": "Floppy.exe",
      "kind": "fusion",
      "tags": [
        "light",
        "retro",
        "tech",
        "playful"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-floppy-exe",
      "accent": "#33ff66",
      "summary": "A desktop scene that combines beveled windows, a working terminal, and a taskbar for nostalgic dev surfaces.",
      "bestFor": [
        "retro launchers",
        "developer toys",
        "playful CLIs",
        "creative portfolios"
      ],
      "constraints": [
        "Do not soften the bevels into modern rounded chrome",
        "Keep terminal text inside the screen, never on the desktop"
      ],
      "notIdealFor": [
        "enterprise B2B trust products",
        "finance or legal",
        "wellness apps",
        "modern SaaS landing pages"
      ]
    },
    {
      "id": "fusion-noir-metal",
      "name": "Noir Metal",
      "kind": "fusion",
      "tags": [
        "dark",
        "cinematic",
        "metal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-noir-metal",
      "accent": "#ffb02e",
      "summary": "An elevator service plate. Floor by floor, each room is one photograph graded into a single warm-black palette.",
      "bestFor": [
        "cinematic brand pages",
        "archival institutions",
        "real-estate towers",
        "building / venue presentations"
      ],
      "constraints": [
        "Photo backdrops must be graded to a single warm-amber palette",
        "The chassis stays matte black — amber lives only inside the LCDs and the active rail button"
      ],
      "notIdealFor": [
        "e-commerce",
        "children products",
        "pastel consumer apps",
        "casual gaming"
      ]
    },
    {
      "id": "fusion-strict-console",
      "name": "Strict Console",
      "kind": "fusion",
      "tags": [
        "dark",
        "tech",
        "kinetic"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-strict-console",
      "accent": "#ffb000",
      "summary": "A product page that IS a flight-information display: tokens depart as flights, pricing tiers are fare classes, the CTA is a boarding pass.",
      "bestFor": [
        "B2B SaaS landings with a kinetic signature",
        "design system & devtool launches",
        "fintech and ops console marketing",
        "pages that need cinematic mechanical motion"
      ],
      "constraints": [
        "ONE amber accent only — live beacons, primary CTA, hero accent word, featured stripe",
        "True-black surfaces only — no blue or cream tint",
        "Respect prefers-reduced-motion — disable all flap animations"
      ],
      "notIdealFor": [
        "lifestyle commerce",
        "wellness brands",
        "children products",
        "consumer entertainment"
      ]
    },
    {
      "id": "fusion-quiet-manifesto",
      "name": "Quiet Manifesto",
      "kind": "fusion",
      "tags": [
        "light",
        "technical",
        "editorial",
        "studio"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-quiet-manifesto",
      "accent": "#6e1d1f",
      "summary": "The studio page IS a drafting sheet: registration crosshairs, coordinate ruler, bill of materials, detail callout, and a real title block in the bottom-right corner.",
      "bestFor": [
        "design studios pretending to be engineers",
        "tech-aesthetic manifesto pages",
        "architecture/industrial-design firms",
        "editorial about-pages that need to feel earned"
      ],
      "constraints": [
        "One accent only — oxblood — for registration crosses, status dot, detail ring, and rubber stamp",
        "Display headline must be monospace, not serif/sans display",
        "Vellum cream base — never pure white, never blueprint blue",
        "Borders ≥1.5 px solid ink; hairlines no fainter than 28% opacity"
      ],
      "notIdealFor": [
        "e-commerce",
        "consumer SaaS landing",
        "gaming",
        "lifestyle/wellness"
      ]
    },
    {
      "id": "fusion-pure-noir",
      "name": "Pure Noir",
      "kind": "fusion",
      "tags": [
        "dark",
        "saas",
        "product",
        "minimal"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-pure-noir",
      "accent": "#daa520",
      "summary": "Practical reusable reference for product SaaS: top nav, hero, customer-logo strip, three feature blocks, three-step workflow, four metric cards, three-tier pricing, testimonial, final CTA strip, four-column footer.",
      "bestFor": [
        "B2B SaaS marketing",
        "developer infrastructure",
        "devtool landings",
        "product startup home pages"
      ],
      "constraints": [
        "No accent chroma — only #FAFAFA emphasis on #08090A base",
        "No gradient fills, no glow shadows, no rainbow",
        "Borders must be visible on dark: #1F1F23 (≈12% white) for hairlines, #2A2A2F (≈17%) for divisions, #3A3A3F (≈22%) for input/button outlines",
        "No exaggerated motion — Linear-tier restraint"
      ],
      "notIdealFor": [
        "playful consumer apps",
        "lifestyle / wellness",
        "kids / education",
        "maximalist / Y2K"
      ]
    },
    {
      "id": "fusion-soft-inflate",
      "name": "Soft Inflate",
      "kind": "fusion",
      "tags": [
        "light",
        "minimal",
        "editorial",
        "photographic",
        "sky"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-soft-inflate",
      "accent": "#0ea5e9",
      "summary": "A near-white reading surface where the depth language is the page's point. Six clean editorial sections, each surface either RAISED (principle cards, colophon, image plates) or RECESSED (hero meta band, breath well) via dual-shadow neumorphism on a shared material. HERO (mono brand + Plus Jakarta 800 \"Soft Inflate\" with sky-5 period + Plate I balloon image), MANIFESTO (2-col: fabric plate + manifesto text with sky-5 [ ] brackets), PRINCIPLES (3 raised cards on the room's rules), VARIATIONS (3 plates II/III/IV), BREATH WELL (carved single-row readout with live sky-5 numeric), USES (4-row list, NEVER-FOR in sky-5), COLOPHON. Frames + cards breathe via box-shadow amplitude on an 8-second cycle; cursor movement shifts each image's saturate/brightness slightly.",
      "bestFor": [
        "studio launch pages whose first page should read as a careful object rather than a homepage",
        "quiet products that arrive in a small box — stationery, perfume, ceramics, slow wellness",
        "premium single-product launches with paper-packaging feel — hardware, watches, audio",
        "minimal portfolio sites where curated photography carries the page"
      ],
      "constraints": [
        "NO warm tint, NO yellow palette, NO grey decision-avoidance — pure white only",
        "NO drawn SVG figures (bellows / lungs / cranes) — use REAL UNSPLASH photographs",
        "NO origami fold polygons, NO sphere as primary visual",
        "NO classical serif display, NO Archivo Black at hero",
        "Sky blue appears at four signal moments: title period, manifesto bracket, live breath numeric, NEVER-FOR row label",
        "Credit photographers in the colophon (Unsplash license)"
      ],
      "notIdealFor": [
        "operations dashboards",
        "real-time games",
        "cyber / hacker identities",
        "fast small-screen consumer apps",
        "pricing-heavy marketing pages"
      ]
    },
    {
      "id": "fusion-studio-pixel",
      "name": "Studio Pixel",
      "kind": "fusion",
      "tags": [
        "light",
        "agency",
        "pixel",
        "studio",
        "product"
      ],
      "detailUrl": "https://www.webstylebook.com/pages/fusion-studio-pixel",
      "accent": "#cf493c",
      "summary": "Inspired by agency-first references with huge type and service tiles, then rebuilt as a ticket-board workbench so it reads as Web Stylebook rather than a copy.",
      "bestFor": [
        "digital studios",
        "branding agencies",
        "web/app service landings",
        "productized creative services"
      ],
      "constraints": [
        "Keep the background warm and quiet",
        "Use pixel type as the counterpoint, not as the whole page",
        "Tickets need black hard shadows, perforation dots, tape, and real service labels",
        "Do not imitate a specific logo or copy from a reference site"
      ],
      "notIdealFor": [
        "enterprise admin dashboards",
        "financial products needing sober trust",
        "long-form documentation",
        "luxury monochrome brands"
      ]
    }
  ]
}