{
  "id": "studio-vellum-statement",
  "name": "Statement",
  "theme": "studio-vellum",
  "category": "Landing",
  "description": "A landing page that is one sentence, one image and one link, sized so that the sentence is unavoidably the largest thing you have ever read on a homepage.",
  "layout": "Nine-column grid where the headline spans columns 1–7 at 76px and the single image occupies columns 8–9 running full-bleed to the bottom edge; everything else is margin.",
  "modules": [
    {
      "key": "mark",
      "name": "Studio mark",
      "html": "\n<header class=\"mk\"><span class=\"mk-n\">Vellum</span><nav><a href=\"#\">Work</a><a href=\"#\">Studio</a><a href=\"#\">Contact</a></nav></header>"
    },
    {
      "key": "statement",
      "name": "The statement",
      "html": "\n<div class=\"st\"><h1>We make fewer things, and we make them for longer.</h1><a class=\"und\" href=\"#\">Selected work, 2019–2026</a></div>"
    },
    {
      "key": "plate",
      "name": "Single plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART figure}}\" alt=\"{{ARTALT figure}}\"></figure>"
    },
    {
      "key": "foot",
      "name": "Ground line",
      "html": "\n<footer class=\"gl\"><span>Leeds &amp; Lisbon</span><span>Est. 2019</span><span>Taking two projects for 2027</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "studio-vellum-statement",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:47:06+09:00",
    "updatedAt": "2026-08-29T18:47:06+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/studio-vellum-statement.json",
  "structure": "Nine-column grid where the headline spans columns 1–7 at 76px and the single image occupies columns 8–9 running full-bleed to the bottom edge; everything else is margin.",
  "html": "<div class=\"dz dz-studio-vellum-statement\" data-design=\"studio-vellum-statement\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"mark\" aria-label=\"Studio mark\">\n<header class=\"mk\"><span class=\"mk-n\">Vellum</span><nav><a href=\"#\">Work</a><a href=\"#\">Studio</a><a href=\"#\">Contact</a></nav></header></section>\n<section class=\"dz-mod\" data-mod=\"statement\" aria-label=\"The statement\">\n<div class=\"st\"><h1>We make fewer things, and we make them for longer.</h1><a class=\"und\" href=\"#\">Selected work, 2019–2026</a></div></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Single plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-figure.webp\" alt=\"A draped figure in ivory fabric against a bone wall\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Ground line\">\n<footer class=\"gl\"><span>Leeds &amp; Lisbon</span><span>Est. 2019</span><span>Taking two projects for 2027</span></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-statement { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: auto 1fr auto; min-height: 560px; column-gap: 24px; }\n.dz-studio-vellum-statement .mk { grid-column: 1 / 8; display: flex; align-items: baseline; gap: 40px; padding: 30px 0 0 44px; }\n.dz-studio-vellum-statement .mk-n { font-family: var(--pv-display); font-size: 24px; letter-spacing: .02em; }\n.dz-studio-vellum-statement .mk nav { display: flex; gap: 26px; margin-left: auto; padding-right: 20px; }\n.dz-studio-vellum-statement .mk a { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; padding-bottom: 4px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur) var(--ease); }\n.dz-studio-vellum-statement .mk a:hover, .dz-studio-vellum-statement .mk a:focus-visible { color: var(--foreground); background-size: 100% 1px; }\n.dz-studio-vellum-statement .st { grid-column: 1 / 8; align-self: center; padding: 0 40px 0 44px; }\n.dz-studio-vellum-statement .st h1 { font-family: var(--pv-display); font-size: 76px; line-height: 1.02; font-weight: 400; letter-spacing: -.02em; margin: 0 0 40px; }\n.dz-studio-vellum-statement .und { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--foreground); text-decoration: none; padding-bottom: 6px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 22% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); }\n.dz-studio-vellum-statement .und:hover, .dz-studio-vellum-statement .und:focus-visible { background-size: 100% 1px; }\n.dz-studio-vellum-statement .pl { grid-column: 8 / 10; grid-row: 1 / 4; margin: 0; overflow: hidden; }\n.dz-studio-vellum-statement .pl img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-studio-vellum-statement .gl { grid-column: 1 / 8; display: flex; gap: 40px; padding: 0 40px 28px 44px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-statement *, .dz-studio-vellum-statement *::before, .dz-studio-vellum-statement *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/studio-vellum.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}