{
  "id": "drafting-room-find",
  "name": "Detail Finder",
  "theme": "drafting-room",
  "category": "Search & Browse",
  "description": "A search across standard details where results are shown as dimensioned thumbnails, because a detail is recognised by its shape long before its number.",
  "layout": "A query bar with discipline chips over a 4-up grid of bordered detail cards, each carrying its own dimension rule beneath the thumbnail.",
  "modules": [
    {
      "key": "query",
      "name": "Detail query",
      "html": "\n<header class=\"dq\"><h1>Standard details</h1><label class=\"f\"><input type=\"search\" value=\"parapet upstand\"><button type=\"button\" class=\"pri\">Find</button></label><span class=\"ct n\">18 of 1,240 details</span></header>"
    },
    {
      "key": "chips",
      "name": "Discipline chips",
      "html": "\n<nav class=\"dc\"><span class=\"k\">Discipline</span><ul><li class=\"on\"><a href=\"#\">Architectural</a></li><li><a href=\"#\">Structural</a></li><li><a href=\"#\">Mechanical</a></li><li><a href=\"#\">Electrical</a></li><li><a href=\"#\">Civils</a></li></ul><label class=\"only\"><input type=\"checkbox\" checked> Current revisions only</label></nav>"
    },
    {
      "key": "grid",
      "name": "Detail grid",
      "html": "\n<section class=\"dg\">\n  <figure><img src=\"{{ART grid}}\" alt=\"{{ARTALT grid}}\"><div class=\"dim\"><span>1,200</span></div><figcaption><b class=\"n\">A-D-104</b><span>Parapet upstand at concrete deck</span><i class=\"n\">Rev C · 1:5</i></figcaption></figure>\n  <figure><img src=\"{{ART tools}}\" alt=\"{{ARTALT tools}}\"><div class=\"dim\"><span>900</span></div><figcaption><b class=\"n\">A-D-107</b><span>Parapet to rainwater outlet</span><i class=\"n\">Rev B · 1:5</i></figcaption></figure>\n  <figure><img src=\"{{ART model}}\" alt=\"{{ARTALT model}}\"><div class=\"dim\"><span>1,500</span></div><figcaption><b class=\"n\">A-D-111</b><span>Upstand at movement joint</span><i class=\"n\">Rev A · 1:10</i></figcaption></figure>\n  <figure><img src=\"{{ART cabinet}}\" alt=\"{{ARTALT cabinet}}\"><div class=\"dim\"><span>600</span></div><figcaption><b class=\"n\">A-D-118</b><span>Coping to blockwork parapet</span><i class=\"n\">Rev D · 1:5</i></figcaption></figure>\n</section>"
    },
    {
      "key": "title",
      "name": "Title block",
      "html": "\n<footer class=\"tb\"><div><span class=\"k\">Library</span><b>Practice standard details</b></div><div><span class=\"k\">Sheet</span><b class=\"n\">SD-INDEX</b></div><div><span class=\"k\">Updated</span><b class=\"n\">02.06.2026</b></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "drafting-room-find",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:51:44+09:00",
    "updatedAt": "2026-09-01T23:51:44+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/drafting-room-find.json",
  "structure": "A query bar with discipline chips over a 4-up grid of bordered detail cards, each carrying its own dimension rule beneath the thumbnail.",
  "html": "<div class=\"dz dz-drafting-room-find\" data-design=\"drafting-room-find\" data-theme=\"drafting-room\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Detail query\">\n<header class=\"dq\"><h1>Standard details</h1><label class=\"f\"><input type=\"search\" value=\"parapet upstand\"><button type=\"button\" class=\"pri\">Find</button></label><span class=\"ct n\">18 of 1,240 details</span></header></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Discipline chips\">\n<nav class=\"dc\"><span class=\"k\">Discipline</span><ul><li class=\"on\"><a href=\"#\">Architectural</a></li><li><a href=\"#\">Structural</a></li><li><a href=\"#\">Mechanical</a></li><li><a href=\"#\">Electrical</a></li><li><a href=\"#\">Civils</a></li></ul><label class=\"only\"><input type=\"checkbox\" checked> Current revisions only</label></nav></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Detail grid\">\n<section class=\"dg\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/drafting-room-grid.webp\" alt=\"Faint blue grid printed on drafting film\"><div class=\"dim\"><span>1,200</span></div><figcaption><b class=\"n\">A-D-104</b><span>Parapet upstand at concrete deck</span><i class=\"n\">Rev C · 1:5</i></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/drafting-room-tools.webp\" alt=\"Drafting instruments arranged on a blue print\"><div class=\"dim\"><span>900</span></div><figcaption><b class=\"n\">A-D-107</b><span>Parapet to rainwater outlet</span><i class=\"n\">Rev B · 1:5</i></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/drafting-room-model.webp\" alt=\"A white card architectural model under raking light\"><div class=\"dim\"><span>1,500</span></div><figcaption><b class=\"n\">A-D-111</b><span>Upstand at movement joint</span><i class=\"n\">Rev A · 1:10</i></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/drafting-room-cabinet.webp\" alt=\"Rolled drawings standing in a plan cabinet\"><div class=\"dim\"><span>600</span></div><figcaption><b class=\"n\">A-D-118</b><span>Coping to blockwork parapet</span><i class=\"n\">Rev D · 1:5</i></figcaption></figure>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"title\" aria-label=\"Title block\">\n<footer class=\"tb\"><div><span class=\"k\">Library</span><b>Practice standard details</b></div><div><span class=\"k\">Sheet</span><b class=\"n\">SD-INDEX</b></div><div><span class=\"k\">Updated</span><b class=\"n\">02.06.2026</b></div></footer></section>\n</div>",
  "css": "\n.dz-drafting-room-find { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px; }\n.dz-drafting-room-find .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-drafting-room-find .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; }\n.dz-drafting-room-find .dq { display: flex; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--primary); }\n.dz-drafting-room-find h1 { font-family: var(--pv-display); font-weight: 600; letter-spacing: -.02em; font-size: 28px; margin: 0; }\n.dz-drafting-room-find .f { display: flex; flex: 1; }\n.dz-drafting-room-find input[type=search] { flex: 1; font: inherit; font-size: 14px; padding: 9px 12px; background: var(--card); border: 1px solid var(--input); border-radius: 0; color: var(--foreground); }\n.dz-drafting-room-find .pri { font: inherit; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); background: var(--primary); color: var(--primary-foreground); border: 0; padding: 9px 18px; cursor: pointer; }\n.dz-drafting-room-find .ct { color: var(--muted-foreground); }\n.dz-drafting-room-find .dc { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; }\n.dz-drafting-room-find .dc ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }\n.dz-drafting-room-find .dc a { display: block; padding: 6px 12px; border: 1px solid var(--border); text-decoration: none; color: var(--foreground); font-size: 13px; }\n.dz-drafting-room-find .dc li.on a { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-drafting-room-find .only { margin-left: auto; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: flex; gap: 8px; align-items: center; }\n.dz-drafting-room-find .dg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }\n.dz-drafting-room-find .dg figure { margin: 0; border: 1px solid var(--primary); background: var(--card); padding: 12px; }\n.dz-drafting-room-find .dg img { width: 100%; height: 140px; object-fit: cover; display: block; filter: var(--img-filter); border: 1px solid var(--border); }\n.dz-drafting-room-find .dim { position: relative; height: 22px; margin-top: 8px;\n  background: linear-gradient(var(--primary), var(--primary)) center/100% 1px no-repeat; height: 18px; }\n.dz-drafting-room-find .dim::before, .dz-drafting-room-find .dim::after { content: \"\"; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--primary); opacity: .55; }\n.dz-drafting-room-find .dim::before { left: 0; }\n.dz-drafting-room-find .dim::after { right: 0; }\n.dz-drafting-room-find .dim span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--card); padding: 0 8px; font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--primary); }\n.dz-drafting-room-find figcaption { display: grid; gap: 3px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); }\n.dz-drafting-room-find figcaption b { font-size: 13px; }\n.dz-drafting-room-find figcaption span { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-drafting-room-find figcaption i { font-style: normal; color: var(--muted-foreground); }\n.dz-drafting-room-find .tb { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--primary); margin-top: 26px; margin-left: auto; width: 480px; }\n.dz-drafting-room-find .tb div { padding: 9px 12px; border-right: 1px solid var(--border); }\n.dz-drafting-room-find .tb div:last-child { border-right: 0; }\n.dz-drafting-room-find .tb b { font-size: 13px; }\n",
  "requiredTheme": "/api/v1/themes/drafting-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
}