{
  "id": "curated-catalog-order-trace",
  "name": "Order Trace",
  "theme": "curated-catalog",
  "category": "Settings & Forms",
  "description": "An order page that shows a made-to-order piece progressing through the workshop, not a courier tracking bar.",
  "layout": "Order summary card at the top, then a vertical stage timeline where each completed stage carries a real photograph from the workshop and future stages are outlined only.",
  "modules": [
    {
      "key": "summary",
      "name": "Order summary",
      "html": "\n<header class=\"os\"><div><span class=\"os-k\">Order 24-0918</span><h1>Turned Walnut and Brass Bowl</h1><p>Placed 18 September · Kilcarn Studio</p></div><div class=\"os-r\"><span class=\"eta\">Expected 14 – 18 October</span><button type=\"button\">Message the studio</button></div></header>"
    },
    {
      "key": "trail",
      "name": "Workshop stages",
      "html": "\n<ol class=\"trail\">\n  <li class=\"done\"><div class=\"dot\"></div><div class=\"st\"><h3>Blank selected</h3><time>21 September</time><p>Cut from a board that has been drying since 2021.</p><img src=\"{{IMG texture 300 200}}\" alt=\"{{ALT texture}}\"></div></li>\n  <li class=\"done\"><div class=\"dot\"></div><div class=\"st\"><h3>Turned</h3><time>2 October</time><p>Roughed and left for a week to move before the final cut.</p><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"></div></li>\n  <li class=\"now\"><div class=\"dot\"></div><div class=\"st\"><h3>Brass foot fitted</h3><time>In progress</time><p>Spun to size this week. This is the stage that most often adds a day or two.</p></div></li>\n  <li><div class=\"dot\"></div><div class=\"st\"><h3>Oiled and cured</h3><time>Around 12 October</time></div></li>\n  <li><div class=\"dot\"></div><div class=\"st\"><h3>Packed and posted</h3><time>Around 14 October</time></div></li>\n</ol>"
    },
    {
      "key": "help",
      "name": "Order actions",
      "html": "\n<footer class=\"oa\"><div><h4>Need it sooner?</h4><p>Tell us the date and we will say honestly whether it is possible. We would rather refund than rush a finish.</p></div><div class=\"oa-b\"><button type=\"button\">Change delivery address</button><button type=\"button\" class=\"warn\">Cancel this order</button></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "curated-catalog-order-trace",
    "model": "Claude Fable 5.1",
    "author": "Claude Code",
    "createdAt": "2026-09-02T16:52:47+09:00",
    "updatedAt": "2026-09-02T16:58:37+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curated-catalog-order-trace.json",
  "structure": "Order summary card at the top, then a vertical stage timeline where each completed stage carries a real photograph from the workshop and future stages are outlined only.",
  "html": "<div class=\"dz dz-curated-catalog-order-trace\" data-design=\"curated-catalog-order-trace\" data-theme=\"curated-catalog\">\n<section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Order summary\">\n<header class=\"os\"><div><span class=\"os-k\">Order 24-0918</span><h1>Turned Walnut and Brass Bowl</h1><p>Placed 18 September · Kilcarn Studio</p></div><div class=\"os-r\"><span class=\"eta\">Expected 14 – 18 October</span><button type=\"button\">Message the studio</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"trail\" aria-label=\"Workshop stages\">\n<ol class=\"trail\">\n  <li class=\"done\"><div class=\"dot\"></div><div class=\"st\"><h3>Blank selected</h3><time>21 September</time><p>Cut from a board that has been drying since 2021.</p><img src=\"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=300&h=200&q=70&auto=format&fit=crop\" alt=\"Two latte cups held over a dark table, seen from above\"></div></li>\n  <li class=\"done\"><div class=\"dot\"></div><div class=\"st\"><h3>Turned</h3><time>2 October</time><p>Roughed and left for a week to move before the final cut.</p><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"></div></li>\n  <li class=\"now\"><div class=\"dot\"></div><div class=\"st\"><h3>Brass foot fitted</h3><time>In progress</time><p>Spun to size this week. This is the stage that most often adds a day or two.</p></div></li>\n  <li><div class=\"dot\"></div><div class=\"st\"><h3>Oiled and cured</h3><time>Around 12 October</time></div></li>\n  <li><div class=\"dot\"></div><div class=\"st\"><h3>Packed and posted</h3><time>Around 14 October</time></div></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"help\" aria-label=\"Order actions\">\n<footer class=\"oa\"><div><h4>Need it sooner?</h4><p>Tell us the date and we will say honestly whether it is possible. We would rather refund than rush a finish.</p></div><div class=\"oa-b\"><button type=\"button\">Change delivery address</button><button type=\"button\" class=\"warn\">Cancel this order</button></div></footer></section>\n</div>",
  "css": "\n.dz-curated-catalog-order-trace { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 34px 32px; }\n.dz-curated-catalog-order-trace .os { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; background: var(--card); border-radius: var(--pv-radius-xl); padding: 22px 24px; box-shadow: 0 6px 22px color-mix(in srgb, var(--foreground) 10%, transparent); }\n.dz-curated-catalog-order-trace .os-k { font-size: 12.5px; color: var(--primary); }\n.dz-curated-catalog-order-trace .os h1 { font-family: var(--pv-display); font-size: 25px; margin: 5px 0 4px; }\n.dz-curated-catalog-order-trace .os p { margin: 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-curated-catalog-order-trace .os-r { text-align: right; }\n.dz-curated-catalog-order-trace .eta { display: block; font-size: 13.5px; margin-bottom: 10px; }\n.dz-curated-catalog-order-trace .os-r button { font: inherit; font-size: 13px; padding: 9px 17px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--background); color: var(--foreground); cursor: pointer; }\n.dz-curated-catalog-order-trace .trail { list-style: none; margin: 26px 0 0; padding: 0 0 0 26px; position: relative; }\n.dz-curated-catalog-order-trace .trail::before { content: \"\"; position: absolute; left: 5px; top: 6px; bottom: 20px; width: var(--pv-bw); background: var(--border); }\n.dz-curated-catalog-order-trace .trail li { position: relative; padding: 0 0 24px; }\n.dz-curated-catalog-order-trace .dot { position: absolute; left: -26px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border); background: var(--background); }\n.dz-curated-catalog-order-trace .trail .done .dot { background: var(--primary); border-color: var(--primary); }\n.dz-curated-catalog-order-trace .trail .now .dot { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }\n.dz-curated-catalog-order-trace .st h3 { font-family: var(--pv-display); font-size: 18px; margin: 0 0 2px; }\n.dz-curated-catalog-order-trace .trail li:not(.done):not(.now) .st h3 { color: var(--muted-foreground); }\n.dz-curated-catalog-order-trace .st time { font-size: 12.5px; color: var(--primary); }\n.dz-curated-catalog-order-trace .st p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); max-width: 52ch; }\n.dz-curated-catalog-order-trace .st img { width: 220px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pv-radius-sm); display: block; margin-top: 10px; }\n.dz-curated-catalog-order-trace .oa { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-top: 8px; padding-top: 20px; border-top: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-order-trace .oa h4 { font-family: var(--pv-display); font-size: 17px; margin: 0 0 5px; }\n.dz-curated-catalog-order-trace .oa p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 46ch; }\n.dz-curated-catalog-order-trace .oa-b { display: flex; gap: 8px; flex: none; }\n.dz-curated-catalog-order-trace .oa-b button { font: inherit; font-size: 13px; padding: 9px 17px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); cursor: pointer; }\n.dz-curated-catalog-order-trace .oa-b .warn { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 45%, transparent); }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-order-trace *, .dz-curated-catalog-order-trace *::before, .dz-curated-catalog-order-trace *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/curated-catalog.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}