{
  "id": "atoll-market-client",
  "name": "Client Record",
  "theme": "atoll-market",
  "category": "Profile & Social",
  "description": "An account page that shows what a client actually owns from previous collections, so the profile is a wardrobe rather than an order history.",
  "layout": "A serif identity line over a wardrobe run of uncontained owned pieces, with fit notes hanging beside them and the order list demoted to a plain table.",
  "modules": [
    {
      "key": "who",
      "name": "Client line",
      "html": "\n<header class=\"cl\"><span class=\"k\">Client since 2021</span><h1>Kemi Oyelaran</h1><p class=\"fit\">Size 2 in coats, 3 in trousers. Prefers unlined. Between sizes on the shoulder, takes the smaller.</p></header>"
    },
    {
      "key": "wardrobe",
      "name": "Wardrobe run",
      "html": "\n<section class=\"wr\"><span class=\"k\">What you have</span>\n<div class=\"run\">\n  <figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption><b>The Long Crimson Coat</b><span class=\"mt\">Collection 04 · size 2</span></figcaption></figure>\n  <figure><img src=\"{{ART fabric}}\" alt=\"{{ARTALT fabric}}\"><figcaption><b>Folded Silk, Aqua</b><span class=\"mt\">Collection 03 · one size</span></figcaption></figure>\n  <figure><img src=\"{{ART model}}\" alt=\"{{ARTALT model}}\"><figcaption><b>The Bone Shirt</b><span class=\"mt\">Collection 02 · size 2</span></figcaption></figure>\n  <figure><img src=\"{{ART still}}\" alt=\"{{ARTALT still}}\"><figcaption><b>Two Objects</b><span class=\"mt\">Collection 04 · the pair</span></figcaption></figure>\n</div></section>"
    },
    {
      "key": "notes",
      "name": "Fit notes",
      "html": "\n<aside class=\"fn\"><span class=\"k\">Notes on your file</span>\n<ul>\n  <li><b>Shoulder</b><span>Took the smaller on the 2023 coat and it was right. We will keep doing that.</span></li>\n  <li><b>Length</b><span>The Collection 03 trouser was shortened 4 cm in the studio. Free, and we remember.</span></li>\n  <li><b>Colour</b><span>Everything you own is crimson or bone. There is one aqua piece in Collection 04 if you ever want it.</span></li>\n</ul></aside>"
    },
    {
      "key": "orders",
      "name": "Order table",
      "html": "\n<section class=\"ot\"><span class=\"k\">Orders</span>\n<table><tbody>\n<tr><td class=\"d\">11 Jun 2026</td><td>The Long Crimson Coat, Two Objects</td><td class=\"pr\">£765</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">02 Feb 2026</td><td>Folded Silk, Aqua ×2</td><td class=\"pr\">£480</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">19 Sep 2025</td><td>Wide Trouser, shortened 4 cm</td><td class=\"pr\">£340</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">14 Mar 2024</td><td>The Bone Shirt</td><td class=\"pr\">£280</td><td class=\"st\">Delivered</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "atoll-market-client",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:13:22+09:00",
    "updatedAt": "2026-09-02T00:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/atoll-market-client.json",
  "structure": "A serif identity line over a wardrobe run of uncontained owned pieces, with fit notes hanging beside them and the order list demoted to a plain table.",
  "html": "<div class=\"dz dz-atoll-market-client\" data-design=\"atoll-market-client\" data-theme=\"atoll-market\">\n<section class=\"dz-mod\" data-mod=\"who\" aria-label=\"Client line\">\n<header class=\"cl\"><span class=\"k\">Client since 2021</span><h1>Kemi Oyelaran</h1><p class=\"fit\">Size 2 in coats, 3 in trousers. Prefers unlined. Between sizes on the shoulder, takes the smaller.</p></header></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"wardrobe\" aria-label=\"Wardrobe run\">\n<section class=\"wr\"><span class=\"k\">What you have</span>\n<div class=\"run\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"><figcaption><b>The Long Crimson Coat</b><span class=\"mt\">Collection 04 · size 2</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/atoll-market-fabric.webp\" alt=\"Crimson fabric folded against an aqua ground\"><figcaption><b>Folded Silk, Aqua</b><span class=\"mt\">Collection 03 · one size</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/atoll-market-model.webp\" alt=\"A figure in crimson against a bright aqua backdrop\"><figcaption><b>The Bone Shirt</b><span class=\"mt\">Collection 02 · size 2</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/atoll-market-still.webp\" alt=\"Two objects arranged on aqua with hard shadows\"><figcaption><b>Two Objects</b><span class=\"mt\">Collection 04 · the pair</span></figcaption></figure>\n</div></section></section><section class=\"dz-mod\" data-mod=\"notes\" aria-label=\"Fit notes\">\n<aside class=\"fn\"><span class=\"k\">Notes on your file</span>\n<ul>\n  <li><b>Shoulder</b><span>Took the smaller on the 2023 coat and it was right. We will keep doing that.</span></li>\n  <li><b>Length</b><span>The Collection 03 trouser was shortened 4 cm in the studio. Free, and we remember.</span></li>\n  <li><b>Colour</b><span>Everything you own is crimson or bone. There is one aqua piece in Collection 04 if you ever want it.</span></li>\n</ul></aside></section></div><section class=\"dz-mod\" data-mod=\"orders\" aria-label=\"Order table\">\n<section class=\"ot\"><span class=\"k\">Orders</span>\n<table><tbody>\n<tr><td class=\"d\">11 Jun 2026</td><td>The Long Crimson Coat, Two Objects</td><td class=\"pr\">£765</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">02 Feb 2026</td><td>Folded Silk, Aqua ×2</td><td class=\"pr\">£480</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">19 Sep 2025</td><td>Wide Trouser, shortened 4 cm</td><td class=\"pr\">£340</td><td class=\"st\">Delivered</td></tr>\n<tr><td class=\"d\">14 Mar 2024</td><td>The Bone Shirt</td><td class=\"pr\">£280</td><td class=\"st\">Delivered</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-atoll-market-client { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 38px 72px; }\n.dz-atoll-market-client .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-atoll-market-client .cl { margin-bottom: 38px; }\n.dz-atoll-market-client h1 { font-family: var(--pv-display); font-weight: 400; font-size: 56px; margin: 10px 0 10px; letter-spacing: -.02em; }\n.dz-atoll-market-client .fit { margin: 0; font-size: 15px; line-height: 1.6; max-width: 56ch; color: var(--muted-foreground); }\n.dz-atoll-market-client .cols { display: grid; grid-template-columns: 1fr 300px; gap: 46px; align-items: start; margin-bottom: 46px; }\n.dz-atoll-market-client .run { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 14px; }\n.dz-atoll-market-client .run figure { margin: 0; }\n.dz-atoll-market-client .run img { width: 100%; height: 240px; object-fit: cover; display: block; filter: var(--img-filter); box-shadow: 0 20px 50px -22px color-mix(in oklab, var(--foreground) 40%, transparent); margin-bottom: 10px; }\n.dz-atoll-market-client figcaption { display: grid; gap: 3px; }\n.dz-atoll-market-client figcaption b { font-family: var(--pv-display); font-weight: 400; font-size: 17px; font-weight: 400; }\n.dz-atoll-market-client .mt { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); }\n.dz-atoll-market-client .fn ul { list-style: none; margin: 14px 0 0; padding: 0; }\n.dz-atoll-market-client .fn li { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 4px; }\n.dz-atoll-market-client .fn b { font-size: 14px; }\n.dz-atoll-market-client .fn span { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }\n.dz-atoll-market-client table { width: 100%; border-collapse: collapse; margin-top: 14px; }\n.dz-atoll-market-client td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }\n.dz-atoll-market-client .d { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); width: 130px; }\n.dz-atoll-market-client .pr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; width: 90px; }\n.dz-atoll-market-client .st { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); text-align: right; }\n",
  "requiredTheme": "/api/v1/themes/atoll-market.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Prata:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}