{
  "id": "studio-vellum-index",
  "name": "Work Index",
  "theme": "studio-vellum",
  "category": "Editorial",
  "description": "A list of projects with no thumbnails at all — just the name, the year and the client, set large enough that the list itself is the composition.",
  "layout": "A single ruled list where each row is 84px tall and the project name is set at 32px; a preview image appears in the fixed right margin only on hover, never on load.",
  "modules": [
    {
      "key": "head",
      "name": "Index header",
      "html": "\n<header class=\"ih\"><span class=\"k\">Index</span><h1>Twenty-two projects</h1><div class=\"filt\"><button type=\"button\" class=\"on\">All</button><button type=\"button\">Identity</button><button type=\"button\">Editorial</button><button type=\"button\">Retail</button></div></header>"
    },
    {
      "key": "list",
      "name": "Project list",
      "html": "\n<ol class=\"ix\">\n  <li><span class=\"no\">22</span><h2>Kilcarn Studio</h2><span class=\"cl\">Identity, packaging</span><span class=\"yr\">2026</span></li>\n  <li><span class=\"no\">21</span><h2>Marsh Lane Weavers</h2><span class=\"cl\">Identity, site</span><span class=\"yr\">2026</span></li>\n  <li><span class=\"no\">20</span><h2>The Offcut</h2><span class=\"cl\">Editorial, art direction</span><span class=\"yr\">2025</span></li>\n  <li><span class=\"no\">19</span><h2>Northfield Joinery</h2><span class=\"cl\">Identity</span><span class=\"yr\">2025</span></li>\n  <li><span class=\"no\">18</span><h2>Fen Glass</h2><span class=\"cl\">Packaging, retail</span><span class=\"yr\">2024</span></li>\n  <li><span class=\"no\">17</span><h2>Hollow Press</h2><span class=\"cl\">Identity, editorial</span><span class=\"yr\">2024</span></li>\n</ol>"
    },
    {
      "key": "aside",
      "name": "Hover plate",
      "html": "\n<aside class=\"hp\"><img src=\"{{ART marble}}\" alt=\"{{ARTALT marble}}\"><span>Hover a project</span></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "studio-vellum-index",
    "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-index.json",
  "structure": "A single ruled list where each row is 84px tall and the project name is set at 32px; a preview image appears in the fixed right margin only on hover, never on load.",
  "html": "<div class=\"dz dz-studio-vellum-index\" data-design=\"studio-vellum-index\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Index header\">\n<header class=\"ih\"><span class=\"k\">Index</span><h1>Twenty-two projects</h1><div class=\"filt\"><button type=\"button\" class=\"on\">All</button><button type=\"button\">Identity</button><button type=\"button\">Editorial</button><button type=\"button\">Retail</button></div></header></section><section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Project list\">\n<ol class=\"ix\">\n  <li><span class=\"no\">22</span><h2>Kilcarn Studio</h2><span class=\"cl\">Identity, packaging</span><span class=\"yr\">2026</span></li>\n  <li><span class=\"no\">21</span><h2>Marsh Lane Weavers</h2><span class=\"cl\">Identity, site</span><span class=\"yr\">2026</span></li>\n  <li><span class=\"no\">20</span><h2>The Offcut</h2><span class=\"cl\">Editorial, art direction</span><span class=\"yr\">2025</span></li>\n  <li><span class=\"no\">19</span><h2>Northfield Joinery</h2><span class=\"cl\">Identity</span><span class=\"yr\">2025</span></li>\n  <li><span class=\"no\">18</span><h2>Fen Glass</h2><span class=\"cl\">Packaging, retail</span><span class=\"yr\">2024</span></li>\n  <li><span class=\"no\">17</span><h2>Hollow Press</h2><span class=\"cl\">Identity, editorial</span><span class=\"yr\">2024</span></li>\n</ol></section><section class=\"dz-mod\" data-mod=\"aside\" aria-label=\"Hover plate\">\n<aside class=\"hp\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-marble.webp\" alt=\"Ivory marble with a faint gold vein\"><span>Hover a project</span></aside></section>\n</div>",
  "css": "\n.dz-studio-vellum-index { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 44px; padding: 40px 44px 40px; }\n.dz-studio-vellum-index .ih { grid-column: 1 / -1; padding-bottom: 26px; }\n.dz-studio-vellum-index .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-index .ih h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 400; letter-spacing: -.015em; margin: 10px 0 22px; }\n.dz-studio-vellum-index .filt { display: flex; gap: 22px; }\n.dz-studio-vellum-index .filt button { font: inherit; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; background: none; border: 0; padding: 0 0 5px; color: var(--muted-foreground); cursor: pointer; 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), color var(--dur) var(--ease); }\n.dz-studio-vellum-index .filt button:hover, .dz-studio-vellum-index .filt button.on { color: var(--foreground); background-size: 100% 1px; }\n.dz-studio-vellum-index .ix { list-style: none; margin: 0; padding: 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-studio-vellum-index .ix li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 60px; align-items: baseline; gap: 20px; padding: 24px 0; border-bottom: var(--pv-bw) solid var(--border); transition: padding-left var(--dur-slow) var(--ease); }\n.dz-studio-vellum-index .ix li:hover { padding-left: 14px; }\n.dz-studio-vellum-index .no { font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-studio-vellum-index .ix h2 { font-family: var(--pv-display); font-size: 32px; font-weight: 400; letter-spacing: -.015em; margin: 0; }\n.dz-studio-vellum-index .cl { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-studio-vellum-index .yr { font-family: var(--pv-mono); font-size: 12px; color: var(--muted-foreground); text-align: right; }\n.dz-studio-vellum-index .hp { position: sticky; top: 40px; align-self: start; }\n.dz-studio-vellum-index .hp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-studio-vellum-index .hp span { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-index *, .dz-studio-vellum-index *::before, .dz-studio-vellum-index *::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"
}