{
  "design": {
    "id": "form-atelier",
    "name": "Form Atelier",
    "niche": "Architecture practice",
    "vibe": "Precise, spatial, editorial",
    "tailwindVersion": "4.3.3",
    "fonts": {
      "heading": "Manrope",
      "body": "Manrope",
      "label": "IBM Plex Mono"
    },
    "colors": {
      "background": "#edf0f2",
      "foreground": "#262d32",
      "primary": "#262d32",
      "primary-foreground": "#ffffff",
      "card": "#e1e6e9",
      "card-foreground": "#262d32",
      "muted": "#dfe6e9",
      "muted-foreground": "#52616a",
      "border": "#b9c3c9",
      "accent": "#d5e1ec",
      "accent-foreground": "#262d32",
      "secondary": "#dfe6e9",
      "secondary-foreground": "#262d32",
      "popover": "#e1e6e9",
      "popover-foreground": "#262d32",
      "destructive": "#b42318",
      "input": "#b9c3c9",
      "ring": "#262d32"
    },
    "typography": {
      "hero": "clamp(3.5rem,6.3vw,6.5rem)",
      "heroMobile": "clamp(3rem,12.5vw,5.5rem)",
      "headingTracking": "-.075em",
      "headingLineHeight": ".98",
      "headingWeight": "500",
      "bodySize": "1rem",
      "bodyLineHeight": "1.65"
    },
    "spacing": {
      "unit": ".25rem",
      "contentWidth": "1280px",
      "gutter": "clamp(1.25rem,4vw,4rem)",
      "section": "7.5rem",
      "layoutGap": "2rem"
    },
    "radii": {
      "base": "0px"
    },
    "shadows": {
      "card": "0 12px 36px #00000014"
    },
    "motifs": [
      "Blueprint-like index labels",
      "Panoramic concrete images",
      "Cold blue paper",
      "Sharp corners"
    ],
    "motion": {
      "character": "Quiet image scale on hover; otherwise still",
      "fast": "180ms",
      "respectReducedMotion": true,
      "pauseControl": true
    },
    "layoutGuidance": "Offset intro columns, panoramic imagery, thin project dividers, typography as structure. Keep ornament minimal. Additional section references: Architectural project photograph with offset editorial study; Three-column material library and surface notes; Four-phase commission drawing strip. Footer: Technical drawing title block with atelier name, commission cell, index and scale metadata. 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": [
      "Architectural project photograph with offset editorial study",
      "Three-column material library and surface notes",
      "Four-phase commission drawing strip"
    ],
    "footerDesign": "Technical drawing title block with atelier name, commission cell, index and scale metadata",
    "sortOrder": 4
  },
  "themeTokensCSS": ":root {\n  --background: #edf0f2;\n  --foreground: #262d32;\n  --primary: #262d32;\n  --primary-foreground: #ffffff;\n  --card: #e1e6e9;\n  --card-foreground: #262d32;\n  --muted: #dfe6e9;\n  --muted-foreground: #52616a;\n  --border: #b9c3c9;\n  --accent: #d5e1ec;\n  --accent-foreground: #262d32;\n  --secondary: #dfe6e9;\n  --secondary-foreground: #262d32;\n  --popover: #e1e6e9;\n  --popover-foreground: #262d32;\n  --destructive: #b42318;\n  --input: #b9c3c9;\n  --ring: #262d32;\n  --font-heading: 'Manrope', sans-serif;\n  --font-body: 'Manrope', sans-serif; --font-label: 'IBM Plex Mono', monospace;\n  --radius:0px; --shadow:0 12px 36px #00000014; --hero-size:clamp(3.5rem,6.3vw,6.5rem); --hero-mobile:clamp(3rem,12.5vw,5.5rem);\n  --heading-tracking:-.075em; --heading-line:.98; --heading-weight:500;\n  --content-width:1280px; --gutter:clamp(1.25rem,4vw,4rem); --section-space:7.5rem; --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:1rem;letter-spacing:.025em}.architecture-intro{padding:4rem 0 2rem}.architecture-top{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start}.architecture-top h1{max-width:900px}.architecture-top .eyebrow{margin-top:1rem}.architecture-caption{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-top:4rem}.architecture-photo{position:relative;overflow:hidden}.architecture-photo img{width:100%;height:540px;transition:transform 900ms ease}.architecture-photo:hover img{transform:scale(1.02)}.architecture-photo-label{position:absolute;left:2rem;bottom:2rem;font-family:var(--font-label);font-size:.75rem;color:#fff;letter-spacing:.12em;background:#101820bb;padding:.5rem}.project-row{display:grid;grid-template-columns:60px 1.1fr 1fr max-content;gap:2rem;padding:2rem 0;border-top:1px solid var(--border);align-items:center}.project-row p{font-size:.875rem;color:var(--muted-foreground)}.project-row h3{font-size:1.4rem;letter-spacing:-.04em}.architecture-practice{background:var(--accent)}@media(max-width:760px){.architecture-top{grid-template-columns:1fr;gap:2rem}.architecture-intro{padding-top:2rem}.architecture-caption{margin-top:2.5rem;align-items:start;flex-direction:column}.architecture-photo img{height:330px}.architecture-photo-label{left:1rem;bottom:1rem}.project-row{grid-template-columns:24px 1fr;gap:1rem}.project-row p,.project-row>span:last-child{grid-column:2}.project-row>span:last-child{margin-top:-.5rem}}\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.architecture-spread{display:grid;grid-template-columns:1.45fr .75fr;gap:5rem;align-items:center}.architecture-building img{width:100%;height:520px;object-fit:cover}.architecture-building figcaption{display:flex;justify-content:space-between;align-items:start;gap:2rem;padding-top:1.3rem}.architecture-building figcaption h3{font-size:1rem}.architecture-building figcaption p{font-size:.75rem;color:var(--muted-foreground);max-width:14rem}.architecture-pull{font-family:var(--font-heading);font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.25;letter-spacing:-.055em;margin-top:2rem}.drawing-facts{display:flex;gap:2rem;border-top:1px solid var(--border);padding-top:2rem;margin-top:4rem}.drawing-facts span{font-family:var(--font-label);font-size:.75rem}.drawing-facts p{font-size:.875rem;color:var(--muted-foreground)}.architecture-materials{background:#dfe6e9}.material-spread{display:grid;grid-template-columns:1fr 1.1fr .6fr;gap:3rem;align-items:center}.material-spread figure img{width:100%;height:490px;object-fit:cover}.material-spread figcaption{font-size:.75rem;color:var(--muted-foreground);margin-top:1rem}.material-notes article{border-top:1px solid var(--border);padding:1.5rem 0}.material-notes span{font-family:var(--font-label);font-size:.75rem}.material-notes p{font-size:.875rem;color:var(--muted-foreground);margin-top:.7rem}.architecture-process-title{display:flex;justify-content:space-between;gap:3rem;align-items:start;margin-bottom:4rem}.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}.phase-grid article{padding:2rem 2rem 0 0}.phase-grid article+article{border-left:1px solid var(--border);padding-left:2rem}.phase-grid span{font-family:var(--font-label);font-size:.875rem;color:var(--muted-foreground)}.phase-grid h3{margin:3rem 0 1rem}.phase-grid p{font-size:.875rem;color:var(--muted-foreground)}.architecture-footer{padding:4rem 0 2rem;background:#262d32;color:#edf0f2}.architecture-titleblock{display:grid;grid-template-columns:1.3fr 1fr .65fr;border:1px solid #6d777e}.architecture-titleblock>div,.architecture-titleblock>nav{padding:2rem}.titleblock-name p{font-family:var(--font-heading);font-size:clamp(2.5rem,4vw,4rem);line-height:1.05;letter-spacing:-.06em;margin-top:2rem}.titleblock-contact,.architecture-titleblock>nav{border-left:1px solid #6d777e}.titleblock-contact h3{font-size:1.3rem;line-height:1.3;margin:2rem 0}.titleblock-contact .btn{background:#edf0f2;color:#262d32}.architecture-titleblock nav>.eyebrow{display:block;margin-bottom:2rem}.architecture-titleblock .titleblock-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:2rem;border-top:1px solid #6d777e;padding:1rem 2rem;font-size:.75rem}.architecture-colophon{display:flex;justify-content:space-between;gap:2rem;margin-top:2rem;color:#bec8cf}.architecture-colophon .photo-credit{font-size:.75rem}@media(max-width:1000px){.material-spread{grid-template-columns:1fr 1fr}.material-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.architecture-spread{gap:2.5rem}}@media(max-width:760px){.architecture-spread,.material-spread,.material-notes,.phase-grid,.architecture-titleblock{grid-template-columns:1fr}.architecture-building img{height:400px}.architecture-building figcaption{flex-direction:column;gap:.6rem}.material-spread figure img{height:350px}.architecture-process-title{display:block}.architecture-process-title h2{margin-top:2rem}.phase-grid article{padding:2rem 0}.phase-grid article+article{padding-left:0;border-left:0;border-top:1px solid var(--border)}.phase-grid h3{margin:1rem 0}.architecture-titleblock>div,.architecture-titleblock>nav{padding:1.5rem}.titleblock-contact,.architecture-titleblock>nav{border-left:0;border-top:1px solid #6d777e}.architecture-titleblock .titleblock-meta{flex-wrap:wrap;padding:1.5rem}.architecture-colophon{flex-direction:column}.material-notes{gap:0}}\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."
  ]
}