{
  "id": "studio-vellum-archive",
  "name": "Sparse Archive",
  "theme": "studio-vellum",
  "category": "Search & Browse",
  "description": "An archive that shows four results at a time on purpose, at a size where you actually look at each one rather than scanning past it.",
  "layout": "Search field set at 26px with no border, then a 2x2 grid of very large plates with the caption in the plate's own left margin; pagination is two words, not numbers.",
  "modules": [
    {
      "key": "search",
      "name": "Search field",
      "html": "\n<header class=\"sf\"><label for=\"sv-ar-q\" class=\"k\">Search the archive</label><input id=\"sv-ar-q\" type=\"search\" value=\"ivory\"><div class=\"meta\"><span>18 results</span><span class=\"sp\"></span><span>2019 – 2026</span></div></header>"
    },
    {
      "key": "grid",
      "name": "Result plates",
      "html": "\n<div class=\"rg\">\n  <figure><img src=\"{{ART marble}}\" alt=\"{{ARTALT marble}}\"><figcaption><b>Slab, Ivory</b><span>Atelier · 2026</span></figcaption></figure>\n  <figure><img src=\"{{ART vellum}}\" alt=\"{{ARTALT vellum}}\"><figcaption><b>Fold Study 04</b><span>Editorial · 2025</span></figcaption></figure>\n  <figure><img src=\"{{ART figure}}\" alt=\"{{ARTALT figure}}\"><figcaption><b>Nine Winters</b><span>Lookbook · 2026</span></figcaption></figure>\n  <figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption><b>Cast on Plinth</b><span>Exhibition · 2024</span></figcaption></figure>\n</div>"
    },
    {
      "key": "page",
      "name": "Pagination",
      "html": "\n<footer class=\"pg\"><span class=\"dis\">Newer</span><span class=\"ct\">1 – 4 of 18</span><a class=\"und\" href=\"#\">Older</a></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "studio-vellum-archive",
    "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-archive.json",
  "structure": "Search field set at 26px with no border, then a 2x2 grid of very large plates with the caption in the plate's own left margin; pagination is two words, not numbers.",
  "html": "<div class=\"dz dz-studio-vellum-archive\" data-design=\"studio-vellum-archive\" data-theme=\"studio-vellum\">\n<section class=\"dz-mod\" data-mod=\"search\" aria-label=\"Search field\">\n<header class=\"sf\"><label for=\"sv-ar-q\" class=\"k\">Search the archive</label><input id=\"sv-ar-q\" type=\"search\" value=\"ivory\"><div class=\"meta\"><span>18 results</span><span class=\"sp\"></span><span>2019 – 2026</span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Result plates\">\n<div class=\"rg\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/studio-vellum-marble.webp\" alt=\"Ivory marble with a faint gold vein\"><figcaption><b>Slab, Ivory</b><span>Atelier · 2026</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/studio-vellum-vellum.webp\" alt=\"A folded sheet of ivory vellum resting on a dark slate surface\"><figcaption><b>Fold Study 04</b><span>Editorial · 2025</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/studio-vellum-figure.webp\" alt=\"A draped figure in ivory fabric against a bone wall\"><figcaption><b>Nine Winters</b><span>Lookbook · 2026</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/studio-vellum-hero.webp\" alt=\"A plaster cast in an ivory room with vast empty wall\"><figcaption><b>Cast on Plinth</b><span>Exhibition · 2024</span></figcaption></figure>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"page\" aria-label=\"Pagination\">\n<footer class=\"pg\"><span class=\"dis\">Newer</span><span class=\"ct\">1 – 4 of 18</span><a class=\"und\" href=\"#\">Older</a></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-archive { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 40px 44px 40px; }\n.dz-studio-vellum-archive .sf { max-width: 62rem; margin: 0 auto 40px; }\n.dz-studio-vellum-archive .k { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 12px; }\n.dz-studio-vellum-archive .sf input { width: 100%; font: inherit; font-family: var(--pv-display); font-size: 32px; padding: 0 0 14px; border: 0; border-bottom: var(--pv-bw) solid var(--foreground); background: none; color: var(--foreground); }\n.dz-studio-vellum-archive .sf input:focus-visible { outline: none; border-bottom-width: 2px; border-bottom-color: var(--primary); }\n.dz-studio-vellum-archive .meta { display: flex; margin-top: 12px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-archive .sp { flex: 1; }\n.dz-studio-vellum-archive .rg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 62rem; margin: 0 auto; }\n.dz-studio-vellum-archive .rg figure { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin: 0; align-items: start; }\n.dz-studio-vellum-archive .rg img { grid-column: 2; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: var(--img-filter); transition: filter var(--dur-slow) var(--ease); }\n.dz-studio-vellum-archive .rg figure:hover img { filter: none; }\n.dz-studio-vellum-archive .rg figcaption { grid-column: 1; grid-row: 1; text-align: right; padding-top: 2px; }\n.dz-studio-vellum-archive .rg b { display: block; font-family: var(--pv-display); font-size: 17px; font-weight: 400; line-height: 1.24; }\n.dz-studio-vellum-archive .rg span { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-archive .pg { display: flex; align-items: baseline; gap: 30px; max-width: 62rem; margin: 44px auto 0; padding-top: 20px; border-top: var(--pv-bw) solid var(--border); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; }\n.dz-studio-vellum-archive .dis { color: var(--muted-foreground); opacity: .45; }\n.dz-studio-vellum-archive .ct { margin-left: auto; color: var(--muted-foreground); }\n.dz-studio-vellum-archive .und { color: var(--foreground); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); }\n.dz-studio-vellum-archive .und:hover { background-size: 0 1px; }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-archive *, .dz-studio-vellum-archive *::before, .dz-studio-vellum-archive *::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"
}