{
  "id": "studio-vellum-case-study",
  "name": "Case Study",
  "theme": "studio-vellum",
  "category": "Editorial",
  "description": "A project page where the images are enormous and unlabelled and all the explanation lives in one narrow column that never sits beside them.",
  "layout": "Alternating full-bleed plates at 420px separated by a 30rem text column that is always centred, so image and word never compete for the same horizontal band.",
  "modules": [
    {
      "key": "title",
      "name": "Project title",
      "html": "\n<header class=\"pt\"><span class=\"k\">Identity, packaging · 2026</span><h1>Kilcarn Studio</h1><dl><div><dt>Client</dt><dd>Kilcarn Studio, Co. Meath</dd></div><div><dt>Scope</dt><dd>Identity, packaging, print</dd></div><div><dt>Team</dt><dd>Vellum, two people, nine weeks</dd></div></dl></header>"
    },
    {
      "key": "plate1",
      "name": "First plate",
      "html": "\n<figure class=\"bleed\"><img src=\"{{ART gold}}\" alt=\"{{ARTALT gold}}\"></figure>"
    },
    {
      "key": "text",
      "name": "Explanation",
      "html": "\n<div class=\"tx\">\n  <p class=\"lede\">Kilcarn fires once a month and no two glazes match. The identity had to survive being printed on a label that would sit next to a hundred different colours.</p>\n  <p>We stopped trying to choose a brand colour. The mark is ink on unbleached stock and nothing else, which means the object next to it is always the brightest thing in the frame.</p>\n  <p>The only variable element is the firing number, set in the same didone as the wordmark, at a size that reads across a shop.</p>\n</div>"
    },
    {
      "key": "plate2",
      "name": "Second plate",
      "html": "\n<figure class=\"bleed tall\"><img src=\"{{ART vellum}}\" alt=\"{{ARTALT vellum}}\"></figure>"
    },
    {
      "key": "next",
      "name": "Next project",
      "html": "\n<footer class=\"nx\"><span class=\"k\">Next</span><a href=\"#\"><h2>Marsh Lane Weavers</h2><span>Identity, site · 2026</span></a></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "studio-vellum-case-study",
    "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-case-study.json",
  "structure": "Alternating full-bleed plates at 420px separated by a 30rem text column that is always centred, so image and word never compete for the same horizontal band.",
  "html": "<div class=\"dz dz-studio-vellum-case-study\" data-design=\"studio-vellum-case-study\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"title\" aria-label=\"Project title\">\n<header class=\"pt\"><span class=\"k\">Identity, packaging · 2026</span><h1>Kilcarn Studio</h1><dl><div><dt>Client</dt><dd>Kilcarn Studio, Co. Meath</dd></div><div><dt>Scope</dt><dd>Identity, packaging, print</dd></div><div><dt>Team</dt><dd>Vellum, two people, nine weeks</dd></div></dl></header></section>\n<section class=\"dz-mod\" data-mod=\"plate1\" aria-label=\"First plate\">\n<figure class=\"bleed\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-gold.webp\" alt=\"Torn gold leaf on an ivory ground\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"text\" aria-label=\"Explanation\">\n<div class=\"tx\">\n  <p class=\"lede\">Kilcarn fires once a month and no two glazes match. The identity had to survive being printed on a label that would sit next to a hundred different colours.</p>\n  <p>We stopped trying to choose a brand colour. The mark is ink on unbleached stock and nothing else, which means the object next to it is always the brightest thing in the frame.</p>\n  <p>The only variable element is the firing number, set in the same didone as the wordmark, at a size that reads across a shop.</p>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"plate2\" aria-label=\"Second plate\">\n<figure class=\"bleed tall\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-vellum.webp\" alt=\"A folded sheet of ivory vellum resting on a dark slate surface\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"next\" aria-label=\"Next project\">\n<footer class=\"nx\"><span class=\"k\">Next</span><a href=\"#\"><h2>Marsh Lane Weavers</h2><span>Identity, site · 2026</span></a></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-case-study { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 40px 0 0; }\n.dz-studio-vellum-case-study .pt { max-width: 34rem; margin: 0 auto 40px; padding: 0 20px; }\n.dz-studio-vellum-case-study .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-case-study .pt h1 { font-family: var(--pv-display); font-size: 58px; font-weight: 400; letter-spacing: -.025em; margin: 10px 0 28px; }\n.dz-studio-vellum-case-study .pt dl { margin: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-studio-vellum-case-study .pt dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-studio-vellum-case-study .pt dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 2px; }\n.dz-studio-vellum-case-study .pt dd { margin: 0; font-size: 14px; }\n.dz-studio-vellum-case-study .bleed { margin: 0; overflow: hidden; height: 380px; }\n.dz-studio-vellum-case-study .bleed.tall { height: 460px; }\n.dz-studio-vellum-case-study .bleed img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-studio-vellum-case-study .tx { max-width: 30rem; margin: 0 auto; padding: 44px 20px; }\n.dz-studio-vellum-case-study .tx .lede { font-family: var(--pv-display); font-size: 24px; line-height: 1.42; margin: 0 0 22px; }\n.dz-studio-vellum-case-study .tx p { margin: 0 0 16px; font-size: 15px; line-height: 1.82; color: var(--muted-foreground); }\n.dz-studio-vellum-case-study .nx { max-width: 34rem; margin: 0 auto; padding: 44px 20px 44px; text-align: center; }\n.dz-studio-vellum-case-study .nx a { display: inline-block; text-decoration: none; color: var(--foreground); margin-top: 12px; }\n.dz-studio-vellum-case-study .nx h2 { font-family: var(--pv-display); font-size: 40px; font-weight: 400; letter-spacing: -.02em; margin: 0 0 6px; padding-bottom: 8px; 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-slow) var(--ease); }\n.dz-studio-vellum-case-study .nx a:hover h2, .dz-studio-vellum-case-study .nx a:focus-visible h2 { background-size: 100% 1px; }\n.dz-studio-vellum-case-study .nx a span { font-size: 12px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-case-study *, .dz-studio-vellum-case-study *::before, .dz-studio-vellum-case-study *::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"
}