{
  "design": {
    "id": "good-weird",
    "name": "Good Weird",
    "niche": "Branding studio",
    "vibe": "Playful, punchy, charmingly unconventional",
    "tailwindVersion": "4.3.3",
    "fonts": {
      "heading": "Syne",
      "body": "DM Sans",
      "label": "Space Mono"
    },
    "colors": {
      "background": "#f5f3e8",
      "foreground": "#211c2f",
      "primary": "#ff715b",
      "primary-foreground": "#211c2f",
      "card": "#e0cafa",
      "card-foreground": "#211c2f",
      "muted": "#e8e5d5",
      "muted-foreground": "#62576c",
      "border": "#211c2f",
      "accent": "#e7ff66",
      "accent-foreground": "#211c2f",
      "secondary": "#e8e5d5",
      "secondary-foreground": "#211c2f",
      "popover": "#e0cafa",
      "popover-foreground": "#211c2f",
      "destructive": "#b42318",
      "input": "#211c2f",
      "ring": "#ff715b"
    },
    "typography": {
      "hero": "clamp(4rem,7.4vw,7.3rem)",
      "heroMobile": "clamp(3rem,12.5vw,5.5rem)",
      "headingTracking": "-.065em",
      "headingLineHeight": ".98",
      "headingWeight": "700",
      "bodySize": "1rem",
      "bodyLineHeight": "1.65"
    },
    "spacing": {
      "unit": ".25rem",
      "contentWidth": "1280px",
      "gutter": "clamp(1.25rem,4vw,4rem)",
      "section": "6rem",
      "layoutGap": "2rem"
    },
    "radii": {
      "base": "16px"
    },
    "shadows": {
      "card": "5px 5px 0 #211c2f"
    },
    "motifs": [
      "Offset solid shadows",
      "Fat outlined labels",
      "Typographic stars",
      "Alternating coral, lilac and citrus panels"
    ],
    "motion": {
      "character": "Playful small rotations and hover compression; optional star rotation",
      "fast": "180ms",
      "respectReducedMotion": true,
      "pauseControl": true
    },
    "layoutGuidance": "Stacked full-width color blocks, offset headings, punchy editorial rows. Prefer personality to symmetry. Additional section references: Asymmetric fictional brand playground; Oversized three-line studio manifesto; Playful team nameplates with staggered alignment. Footer: Illustrated-by-type postcard with sender/recipient columns and handwritten-style signoff. Choose the sections relevant to the new brief rather than repeating this sequence.",
    "reusePolicy": "Transfer typography, spacing rhythm, semantic colors, component treatments, imagery direction and motion principles. Compose a new layout for the user’s content; do not copy this page structure or fictional copy.",
    "shadcnMapping": {
      "btn": "Button",
      "card": "Card",
      "faq": "Accordion",
      "contact-dialog": "Dialog + Form + Input + Textarea",
      "mobile-nav": "Sheet",
      "badge": "Badge"
    },
    "demo": {
      "fictionalBrand": true,
      "backend": false
    },
    "revision": 2,
    "sectionIdeas": [
      "Asymmetric fictional brand playground",
      "Oversized three-line studio manifesto",
      "Playful team nameplates with staggered alignment"
    ],
    "footerDesign": "Illustrated-by-type postcard with sender/recipient columns and handwritten-style signoff",
    "sortOrder": 3
  },
  "themeTokensCSS": ":root {\n  --background: #f5f3e8;\n  --foreground: #211c2f;\n  --primary: #ff715b;\n  --primary-foreground: #211c2f;\n  --card: #e0cafa;\n  --card-foreground: #211c2f;\n  --muted: #e8e5d5;\n  --muted-foreground: #62576c;\n  --border: #211c2f;\n  --accent: #e7ff66;\n  --accent-foreground: #211c2f;\n  --secondary: #e8e5d5;\n  --secondary-foreground: #211c2f;\n  --popover: #e0cafa;\n  --popover-foreground: #211c2f;\n  --destructive: #b42318;\n  --input: #211c2f;\n  --ring: #ff715b;\n  --font-heading: 'Syne', sans-serif;\n  --font-body: 'DM Sans', sans-serif; --font-label: 'Space Mono', monospace;\n  --radius:16px; --shadow:5px 5px 0 #211c2f; --hero-size:clamp(4rem,7.4vw,7.3rem); --hero-mobile:clamp(3rem,12.5vw,5.5rem);\n  --heading-tracking:-.065em; --heading-line:.98; --heading-weight:700;\n  --content-width:1280px; --gutter:clamp(1.25rem,4vw,4rem); --section-space:6rem; --layout-gap:2rem; --motion-fast:180ms;\n}",
  "tailwindThemeCSS": "@theme inline {\n  --color-background:var(--background);\n  --color-foreground:var(--foreground);\n  --color-primary:var(--primary);\n  --color-primary-foreground:var(--primary-foreground);\n  --color-card:var(--card);\n  --color-card-foreground:var(--card-foreground);\n  --color-muted:var(--muted);\n  --color-muted-foreground:var(--muted-foreground);\n  --color-border:var(--border);\n  --color-accent:var(--accent);\n  --color-accent-foreground:var(--accent-foreground);\n  --color-secondary:var(--secondary);\n  --color-secondary-foreground:var(--secondary-foreground);\n  --color-popover:var(--popover);\n  --color-popover-foreground:var(--popover-foreground);\n  --color-destructive:var(--destructive);\n  --color-input:var(--input);\n  --color-ring:var(--ring);\n  --font-sans:var(--font-body); --font-display:var(--font-heading); --font-mono:var(--font-label);\n  --radius-sm:calc(var(--radius)*.5); --radius-md:var(--radius); --radius-lg:calc(var(--radius)*1.5);\n  --spacing-gutter:var(--gutter); --spacing-section:var(--section-space); --container-content:var(--content-width);\n}",
  "componentAndMotifCSS": "\n*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-body);font-size:1rem;line-height:1.65}button,input,textarea,select{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}img{display:block;max-width:100%;object-fit:cover}@layer base{h1,h2,h3,p{margin:0}p{max-width:65ch}}h1,h2,h3{font-family:var(--font-heading);font-weight:var(--heading-weight);text-wrap:balance}h1{font-size:var(--hero-size);line-height:var(--heading-line);letter-spacing:var(--heading-tracking)}h2{font-size:clamp(2.3rem,4.5vw,4.5rem);line-height:1.08;letter-spacing:var(--heading-tracking)}h3{font-size:1.5rem;line-height:1.2}section[id]{scroll-margin-top:2rem}.wrap{width:min(var(--content-width),calc(100% - var(--gutter)*2));margin-inline:auto}.section{padding-block:var(--section-space)}.eyebrow{font-family:var(--font-label);font-size:.75rem;line-height:1.5;font-weight:600;text-transform:uppercase;letter-spacing:.14em}.muted{color:var(--muted-foreground)}.rule{border-top:1px solid var(--border)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-gap)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--layout-gap)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:3rem;padding:.8rem 1.5rem;border:1px solid transparent;border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);font-size:.875rem;font-weight:600;line-height:1.4;transition:transform var(--motion-fast) ease,background var(--motion-fast) ease,box-shadow var(--motion-fast) ease}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.btn.outline{background:transparent;color:inherit;border-color:var(--border)}.link{display:inline-flex;gap:1rem;align-items:center;min-height:2.75rem;font-size:.875rem;border-bottom:1px solid currentColor}.icon{width:1.25rem;height:1.25rem;display:inline-block;flex-shrink:0;vertical-align:middle}.nav{min-height:6rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-heading);font-weight:700;font-size:1.35rem;letter-spacing:-.04em}.nav-links{display:flex;align-items:center;gap:2rem;font-size:.875rem}.nav-links a:hover{text-decoration:underline;text-underline-offset:6px}.mobile-nav{display:none;position:relative}.mobile-nav summary{cursor:pointer;list-style:none;padding:.65rem .9rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-links{position:absolute;right:0;top:3.25rem;z-index:30;min-width:220px;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);padding:1rem;box-shadow:var(--shadow)}.mobile-links a{display:block;padding:.8rem}.skip{position:fixed;z-index:100;left:1rem;top:-8rem;background:var(--primary);color:var(--primary-foreground);padding:1rem}.skip:focus{top:1rem}:focus-visible{outline:3px solid var(--ring);outline-offset:5px}.card{padding:2rem;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius)}.photo-credit{font-size:.75rem;opacity:.8}.faq{border-bottom:1px solid var(--border);padding-block:1.3rem}.faq summary{cursor:pointer;font-weight:500;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:1.5rem}.faq[open] summary:after{content:'−'}.faq p{padding-top:1rem;color:var(--muted-foreground)}.contact-dialog{width:min(540px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow)}.contact-dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}.contact-dialog h2{font-size:2rem;margin-block:1rem}.contact-dialog label{display:block;font-size:.875rem;margin-top:1rem}.contact-dialog input,.contact-dialog textarea{display:block;width:100%;margin-top:.4rem;padding:.8rem;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);color:var(--foreground)}.contact-dialog .close{float:right;background:transparent;border:1px solid var(--border);width:2.75rem;height:2.75rem;border-radius:var(--radius)}.contact-dialog .status{margin-top:1rem;font-size:.875rem;color:var(--foreground)}.motion-control{font-family:var(--font-body);background:transparent;border:1px solid var(--border);border-radius:var(--radius);font-size:.75rem;padding:.45rem .7rem;min-height:2.75rem}.motion-paused *{animation-play-state:paused!important}.reveal{animation:enter 750ms both}@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes rotate{to{transform:rotate(360deg)}}@media(max-width:760px){.nav{min-height:5rem}.nav-links{display:none}.mobile-nav{display:block}.grid2,.grid3{grid-template-columns:1fr}.section{padding-block:4rem}h1{font-size:var(--hero-mobile)}.card{padding:1.5rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}\n\n\n.nav .brand{font-size:1.6rem}.weird-hero{background:var(--accent);padding:4.5rem 0 5rem;border-top:2px solid var(--border);border-bottom:2px solid var(--border);overflow:clip}.weird-title{display:flex;gap:3rem;align-items:center}.weird-highlight{display:inline-block;background:var(--card);padding:.04em .1em .12em;transform:rotate(-2deg);border:2px solid var(--border);box-shadow:7px 7px 0 #211c2f}.weird-star{color:var(--primary);font-size:16rem;line-height:1;-webkit-text-stroke:2px #211c2f;animation:rotate 30s linear infinite}.weird-bottom{display:flex;gap:2rem;align-items:center;justify-content:space-between;margin-top:4rem;padding-right:11rem}.weird-sticker{position:absolute;right:0;bottom:0;border:2px solid var(--border);border-radius:50%;width:136px;height:136px;display:grid;place-content:center;text-align:center;font-weight:700;background:var(--primary);transform:rotate(12deg);font-size:1rem;line-height:1.3}.weird-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.weird-card{border:2px solid var(--border);border-radius:var(--radius);box-shadow:6px 6px 0 #211c2f;padding:2rem;background:var(--card)}.weird-card:nth-child(2){background:var(--primary);transform:rotate(2deg)}.weird-card:nth-child(3){background:var(--accent)}.weird-card h3{font-size:1.8rem;margin:1rem 0}.weird-card p{max-width:25rem}.weird-symbol{font-family:var(--font-heading);font-size:5rem;font-weight:700;margin-top:2rem;line-height:1.2}.weird-way{background:var(--card);border-block:2px solid var(--border)}.weird-pill{padding:.5rem 1rem;border:1.5px solid var(--border);border-radius:999px;font-size:.875rem}.btn{border:2px solid var(--border);box-shadow:4px 4px 0 #211c2f}.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 #211c2f}@media(max-width:760px){.weird-hero{padding:3rem 0}.weird-title{display:block}.weird-star{position:absolute;right:0;top:calc(100% + 2rem);bottom:auto;font-size:4.2rem}.weird-title h1{font-size:clamp(2.9rem,11.5vw,5rem)}.weird-bottom{display:block;padding-right:0;margin-top:3rem}.weird-bottom p{max-width:75%;font-size:1rem;margin-bottom:2rem}.weird-sticker{display:none}.weird-cards{grid-template-columns:1fr;gap:2rem}.weird-card:nth-child(2){transform:rotate(1deg)}}\n\n.fineprint{font-size:.75rem;line-height:1.7}.fineprint a{text-decoration:underline;text-underline-offset:4px}.section-note{font-size:.875rem;color:var(--muted-foreground)}.section-title{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:3rem}.section-title p{max-width:25rem}.editorial-label{font-family:var(--font-label);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.editorial-photo{width:100%;height:100%;object-fit:cover}.section-title h2{max-width:18ch}footer nav a{display:block;width:fit-content;padding:.45rem 0;font-size:.875rem}footer nav a:hover{text-decoration:underline;text-underline-offset:5px}footer :focus-visible{outline-color:currentColor}footer .photo-credit{opacity:1}footer .fineprint .photo-credit{display:block}.minor-link{display:inline-block;border:0;border-bottom:1px solid currentColor;background:none;padding:.7rem 0;color:inherit;cursor:pointer;font-size:.875rem}.editorial-quote{margin:0}.editorial-quote p{font-family:var(--font-heading);line-height:1.18;letter-spacing:var(--heading-tracking)}.editorial-quote cite{display:block;margin-top:2rem;font-style:normal;font-size:.875rem}figure{margin:0}.contact-large{display:block;text-align:left;border:0;padding:0;background:none;font-family:var(--font-heading)!important;font-size:clamp(3rem,7vw,7rem)!important;letter-spacing:var(--heading-tracking);line-height:1.05;font-weight:var(--heading-weight)}.contact-large:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}.section-endnote{font-size:.75rem;letter-spacing:.03em}.inset-rule{border-top:1px solid currentColor;padding-top:1.5rem}@media(max-width:760px){.section-title{display:block}.section-title>p{margin-top:1.5rem}.contact-large{font-size:clamp(2.6rem,12vw,5rem)!important}}\n\n.weird-projects{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:start}.weird-projects article{border:2px solid #211c2f;border-radius:1rem;padding:2rem;box-shadow:7px 7px 0 #211c2f;overflow:hidden}.weird-pip{background:#ff715b}.weird-project-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}.pip-type{font-family:var(--font-heading);font-size:clamp(6rem,14vw,13rem);font-weight:700;line-height:1;letter-spacing:-.05em;margin:2rem 0}.pip-bottom{font-size:1.5rem;font-weight:500;line-height:1.3;margin-bottom:2rem}.weird-loud{background:#e0cafa;margin-top:5rem;transform:rotate(2deg)}.loud-type{font-family:var(--font-heading);font-weight:700;line-height:.95;font-size:clamp(2.8rem,4.6vw,4.8rem);letter-spacing:-.06em;margin:3rem 0 2rem}.weird-loud .weird-pill{display:inline-block}.weird-values{background:#211c2f;color:#f5f3e8}.weird-manifesto>p{font-family:var(--font-heading);font-weight:700;font-size:clamp(2.5rem,5.8vw,6rem);line-height:1.3;letter-spacing:-.065em}.weird-manifesto span{color:#e0cafa}.weird-manifesto .manifesto-last{color:#e7ff66;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}.weird-manifesto-note{margin:3rem 0 0 auto;max-width:18rem;transform:rotate(-4deg);color:#e7ff66}.weird-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}.weird-people article{min-width:0;overflow-wrap:anywhere}.weird-people article{padding:2rem;border:2px solid #211c2f;border-radius:1rem;background:#e7ff66}.weird-people article:nth-child(2){background:#e0cafa;transform:translateY(1.5rem)}.weird-people article:nth-child(3){background:#ff715b}.person-number{font-size:.75rem;font-family:var(--font-label)}.weird-people h3{font-size:3rem;margin:2rem 0 1rem}.weird-people .weird-pill{display:inline-block;margin-top:2rem;font-size:.75rem}.weird-footer{padding:4rem 0 2rem;background:#e7ff66;border-top:2px solid #211c2f}.weird-postcard{border:2px solid #211c2f;background:#f5f3e8;box-shadow:8px 8px 0 #211c2f;display:grid;grid-template-columns:1.3fr 1fr;padding:3rem;border-radius:1rem;gap:3rem}.weird-postcard h2{font-size:clamp(2.5rem,4.5vw,4.5rem);margin:2rem 0}.postcard-right{border-left:2px dashed #211c2f;padding-left:3rem;position:relative;padding-top:8rem}.postcard-stamp{position:absolute;top:0;right:0;padding:.8rem;border:4px double #211c2f;transform:rotate(8deg);font-family:var(--font-label);font-size:.75rem;line-height:1.2;background:#e0cafa}.postcard-right nav{margin:1.5rem 0}.postcard-right>p:last-child{font-size:.875rem}.weird-signoff{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:3rem}.weird-footer-word{font-family:var(--font-heading);font-size:2rem;font-weight:700;letter-spacing:-.04em}@media(max-width:760px){.weird-projects,.weird-people,.weird-postcard{grid-template-columns:1fr}.weird-loud{margin-top:1rem}.weird-people article:nth-child(2){transform:rotate(-2deg)}.weird-postcard{padding:1.5rem;gap:2.5rem}.postcard-right{border-left:0;border-top:2px dashed #211c2f;padding:2rem 0 0}.postcard-stamp{display:none}.weird-signoff{flex-wrap:wrap}.weird-projects article{padding:1.5rem}.weird-footer{padding-top:3rem}.weird-signoff .fineprint{order:3;width:100%}}\n",
  "implementationNotes": [
    "This is a style reference, not a layout to copy. Compose around the new content.",
    "Use the semantic colors and font roles. Preserve the spacing rhythm and contrast.",
    "In React, use the existing shadcn components and apply the supplied tokens.",
    "HTML dialog/details examples are native counterparts, not the actual shadcn React implementation.",
    "Keep reduced-motion support, keyboard operation, focus visibility and responsive layouts.",
    "Replace fictional business copy, sample prices, photos and all demo-only behavior.",
    "Compile Tailwind in the production builder; the browser CDN is for these references."
  ]
}