{
  "design": {
    "id": "supper-club",
    "name": "Supper Club",
    "niche": "Neighbourhood restaurant",
    "vibe": "Warm, convivial, deliciously nostalgic",
    "tailwindVersion": "4.3.3",
    "fonts": {
      "heading": "DM Serif Display",
      "body": "DM Sans",
      "label": "DM Sans"
    },
    "colors": {
      "background": "#fff8e9",
      "foreground": "#74291f",
      "primary": "#8e3327",
      "primary-foreground": "#fff8e9",
      "card": "#f2e4cb",
      "card-foreground": "#74291f",
      "muted": "#f5e8d0",
      "muted-foreground": "#83594a",
      "border": "#c9a28e",
      "accent": "#edc37a",
      "accent-foreground": "#60291d",
      "secondary": "#f5e8d0",
      "secondary-foreground": "#74291f",
      "popover": "#f2e4cb",
      "popover-foreground": "#74291f",
      "destructive": "#b42318",
      "input": "#c9a28e",
      "ring": "#8e3327"
    },
    "typography": {
      "hero": "clamp(4rem,6.8vw,6.8rem)",
      "heroMobile": "clamp(3rem,12.5vw,5.5rem)",
      "headingTracking": "-.04em",
      "headingLineHeight": ".98",
      "headingWeight": "500",
      "bodySize": "1rem",
      "bodyLineHeight": "1.65"
    },
    "spacing": {
      "unit": ".25rem",
      "contentWidth": "1280px",
      "gutter": "clamp(1.25rem,4vw,4rem)",
      "section": "6rem",
      "layoutGap": "2rem"
    },
    "radii": {
      "base": "4px"
    },
    "shadows": {
      "card": "0 12px 36px #00000014"
    },
    "motifs": [
      "Tomato-red typography",
      "Double menu rules",
      "Rounded photo window",
      "Oversized ampersands"
    ],
    "motion": {
      "character": "Still and welcoming; subtle button feedback",
      "fast": "180ms",
      "respectReducedMotion": true,
      "pauseControl": true
    },
    "layoutGuidance": "Restaurant-menu composition with large centered type, convivial photography and simple dish-price rows. Additional section references: Rotated seasonal specials board; Full-bleed restaurant interior and private dining invitation; Chef letter with oversized quotation. Footer: Warm restaurant sign-off with opening-hours table, table-booking action and dining links. 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": [
      "Rotated seasonal specials board",
      "Full-bleed restaurant interior and private dining invitation",
      "Chef letter with oversized quotation"
    ],
    "footerDesign": "Warm restaurant sign-off with opening-hours table, table-booking action and dining links",
    "sortOrder": 7
  },
  "themeTokensCSS": ":root {\n  --background: #fff8e9;\n  --foreground: #74291f;\n  --primary: #8e3327;\n  --primary-foreground: #fff8e9;\n  --card: #f2e4cb;\n  --card-foreground: #74291f;\n  --muted: #f5e8d0;\n  --muted-foreground: #83594a;\n  --border: #c9a28e;\n  --accent: #edc37a;\n  --accent-foreground: #60291d;\n  --secondary: #f5e8d0;\n  --secondary-foreground: #74291f;\n  --popover: #f2e4cb;\n  --popover-foreground: #74291f;\n  --destructive: #b42318;\n  --input: #c9a28e;\n  --ring: #8e3327;\n  --font-heading: 'DM Serif Display', serif;\n  --font-body: 'DM Sans', sans-serif; --font-label: 'DM Sans', monospace;\n  --radius:4px; --shadow:0 12px 36px #00000014; --hero-size:clamp(4rem,6.8vw,6.8rem); --hero-mobile:clamp(3rem,12.5vw,5.5rem);\n  --heading-tracking:-.04em; --heading-line:.98; --heading-weight:500;\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:2rem;font-weight:400}.restaurant-hero{padding:1.5rem 0 5rem}.restaurant-kicker{display:flex;justify-content:space-between;gap:2rem;border-top:1px solid var(--border);padding-top:1.5rem}.restaurant-hero h1{text-align:center;margin:3rem auto;line-height:.98}.restaurant-hero h1 em{font-weight:400}.restaurant-hero-bottom{display:grid;grid-template-columns:1fr 1.65fr .65fr;align-items:center;gap:3rem}.restaurant-side p{max-width:19rem}.restaurant-photo{border-radius:50% 50% 1rem 1rem;overflow:hidden;aspect-ratio:1.55}.restaurant-photo img{width:100%;height:100%;object-position:50% 55%}.restaurant-seal{border:1px solid var(--primary);outline:1px solid var(--primary);outline-offset:6px;border-radius:50%;width:150px;height:150px;display:grid;place-content:center;text-align:center;line-height:1.2;font-family:var(--font-heading);font-size:1.5rem;transform:rotate(10deg)}.restaurant-menu{background:var(--card);border-block:4px double var(--border)}.dish{display:flex;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--border);padding:1.5rem 0}.dish:first-child{padding-top:0}.dish h3{font-size:1.5rem}.dish p{font-size:.875rem;margin-top:.5rem;color:var(--muted-foreground)}.dish>span{font-family:var(--font-heading);font-size:1.5rem}.restaurant-contact{background:var(--primary);color:var(--primary-foreground)}.restaurant-contact .btn{background:var(--background);color:var(--primary)}@media(max-width:1000px){.restaurant-hero-bottom{grid-template-columns:1fr 1.4fr}.restaurant-seal{display:none}}@media(max-width:760px){.restaurant-kicker{flex-direction:column;gap:.7rem;font-size:.75rem}.restaurant-hero h1{font-size:clamp(3.3rem,12vw,5.5rem);margin:2.5rem 0}.restaurant-hero-bottom{grid-template-columns:1fr;gap:2rem}.restaurant-photo{grid-row:1;aspect-ratio:1.35}.restaurant-side p{max-width:100%}.restaurant-menu .grid2{gap:3rem}}\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.supper-season{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}.supper-season-copy>p:last-child{max-width:24rem}.supper-special-board{padding:3rem;border:5px double #74291f;text-align:center;transform:rotate(2deg);background:#f2e4cb}.supper-special-board h3{font-size:2.4rem;line-height:1.15;margin:1.5rem 0 2rem}.supper-special-board>div{border-top:1px solid #c9a28e;padding:1.3rem 0}.supper-special-board>div>span{font-family:var(--font-heading);font-style:italic;font-size:1.2rem}.supper-special-board>div>p{font-size:.875rem;margin:.7rem auto 0}.special-board-note{font-family:var(--font-heading);font-style:italic;font-size:1.25rem;display:block;margin-top:1rem}.supper-gather{display:grid;grid-template-columns:1fr 1fr;background:#edc37a}.supper-room img{width:100%;height:620px;object-fit:cover;object-position:center 55%}.supper-gather-copy{align-self:center;padding:4rem;max-width:640px}.supper-gather-detail{border-left:1px solid #74291f;padding-left:1.5rem;margin:2rem 0;font-size:.875rem;line-height:2}.supper-kitchen{text-align:center;max-width:1000px}.supper-kitchen .editorial-quote p{font-size:clamp(2.5rem,4.4vw,4.5rem);margin:2rem auto 0}.supper-kitchen .editorial-quote cite{margin-top:1.5rem}.supper-kitchen>p:last-of-type{max-width:29rem;margin:2rem auto}.supper-signature{font-family:var(--font-heading);font-style:italic;font-size:1.7rem}.supper-footer{background:#74291f;color:#fff8e9;padding:4rem 0 2rem}.supper-footer-heading{display:flex;align-items:center;justify-content:space-between;gap:2rem;border-bottom:4px double #e2b8a0;padding-bottom:2rem}.supper-footer-heading>p{font-family:var(--font-heading);font-size:4rem;line-height:1;letter-spacing:-.055em}.supper-footer-grid{display:grid;grid-template-columns:1.1fr 1.1fr .7fr;gap:4rem;margin:3rem 0}.supper-footer-grid h2{font-size:2.8rem}.supper-footer-grid>div:first-child>p{margin:1.5rem 0}.supper-footer .btn{background:#fff8e9;color:#74291f}.supper-hours dl{margin:0}.supper-hours dl>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #b67561;padding:.65rem 0;font-size:.875rem}.supper-hours dd{margin:0;text-align:right}.supper-footer-base{border-top:4px double #e2b8a0;display:flex;align-items:start;justify-content:space-between;gap:2rem;padding-top:2rem}@media(max-width:1000px){.supper-footer-grid{grid-template-columns:1fr 1fr}.supper-footer-grid nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}.supper-footer-grid nav>.eyebrow{margin:0}}@media(max-width:760px){.supper-season,.supper-gather,.supper-footer-grid{grid-template-columns:1fr;gap:3rem}.supper-special-board{padding:2rem 1.5rem}.supper-gather{gap:0}.supper-room img{height:420px}.supper-gather-copy{padding:3rem 1.5rem}.supper-footer-heading{display:block}.supper-footer-heading .eyebrow{display:block;margin-top:1.5rem}.supper-footer-heading>p{font-size:3.5rem}.supper-footer-grid nav{display:block}.supper-footer-grid nav>.eyebrow{margin-bottom:1rem}.supper-footer-base{flex-direction:column}}\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."
  ]
}