{
  "id": "fitting-room-wardrobe",
  "name": "Wardrobe",
  "theme": "fitting-room",
  "category": "App Shell",
  "description": "The main screen: a fourteen-day calendar rail with item blocks positioned at their return dates, and a grid beneath where every card starts with a date.",
  "layout": "A pinned calendar rail with a 2px amber today line and positioned blocks, over a four-up grid of 3:4 cards whose first element is the return date.",
  "modules": [
    {
      "key": "top",
      "name": "Wardrobe bar",
      "html": "\n<header class=\"tp\"><span class=\"lg\">Fitting Room</span><nav><a class=\"on\" href=\"#\">Wardrobe</a><a href=\"#\">Browse</a><a href=\"#\">Returns</a><a href=\"#\">Account</a></nav><span class=\"ct mn\">6 items out · 1 due in 2 days</span></header>"
    },
    {
      "key": "rail",
      "name": "Calendar rail",
      "html": "\n<section class=\"rl\"><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"di\">Mon</span><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"di\">Tue</span><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"di\">Wed</span><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"di\">Thu</span><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"di\">Fri</span><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"di\">Sat</span><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"di\">Sun</span><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"di\">Mon</span><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"di\">Tue</span><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"di\">Wed</span><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"di\">Thu</span><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"di\">Fri</span><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"di\">Sat</span><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"di\">Sun</span><span class=\"dn\">22</span></div></div>\n<div class=\"blocks\"><span class=\"bk late\" style=\"left:0;width:14%;top:0\">Wool overcoat · overdue</span><span class=\"bk\" style=\"left:28.5%;width:14%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:42.8%;width:21%;top:0\">Pleated trousers</span><span class=\"bk\" style=\"left:57.1%;width:14%;top:64px\">Knit dress</span><span class=\"bk\" style=\"left:71.4%;width:21%;top:32px\">Leather boots</span><span class=\"bk\" style=\"left:85.7%;width:14%;top:0\">Linen jacket</span></div></section>"
    },
    {
      "key": "grid",
      "name": "Item grid",
      "html": "\n<section class=\"gd\">\n<article><span class=\"du late\">Due 09 Mar · overdue 3 d</span><figure><img src=\"{{ART coat}}\" alt=\"{{ARTALT coat}}\"></figure><h2>Wool overcoat, navy</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Good</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 13 Mar</span><figure><img src=\"{{ART folded}}\" alt=\"{{ARTALT folded}}\"></figure><h2>Silk shirt, oyster</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">New</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 15 Mar</span><figure><img src=\"{{ART rail}}\" alt=\"{{ARTALT rail}}\"></figure><h2>Pleated trousers, ink</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Worn</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 17 Mar</span><figure><img src=\"{{ART room}}\" alt=\"{{ARTALT room}}\"></figure><h2>Knit dress, slate</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Repaired</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "fitting-room-wardrobe",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:37:40+09:00",
    "updatedAt": "2026-09-02T01:37:40+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/fitting-room-wardrobe.json",
  "structure": "A pinned calendar rail with a 2px amber today line and positioned blocks, over a four-up grid of 3:4 cards whose first element is the return date.",
  "html": "<div class=\"dz dz-fitting-room-wardrobe\" data-design=\"fitting-room-wardrobe\" data-theme=\"fitting-room\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Wardrobe bar\">\n<header class=\"tp\"><span class=\"lg\">Fitting Room</span><nav><a class=\"on\" href=\"#\">Wardrobe</a><a href=\"#\">Browse</a><a href=\"#\">Returns</a><a href=\"#\">Account</a></nav><span class=\"ct mn\">6 items out · 1 due in 2 days</span></header></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Calendar rail\">\n<section class=\"rl\"><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"di\">Mon</span><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"di\">Tue</span><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"di\">Wed</span><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"di\">Thu</span><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"di\">Fri</span><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"di\">Sat</span><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"di\">Sun</span><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"di\">Mon</span><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"di\">Tue</span><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"di\">Wed</span><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"di\">Thu</span><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"di\">Fri</span><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"di\">Sat</span><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"di\">Sun</span><span class=\"dn\">22</span></div></div>\n<div class=\"blocks\"><span class=\"bk late\" style=\"left:0;width:14%;top:0\">Wool overcoat · overdue</span><span class=\"bk\" style=\"left:28.5%;width:14%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:42.8%;width:21%;top:0\">Pleated trousers</span><span class=\"bk\" style=\"left:57.1%;width:14%;top:64px\">Knit dress</span><span class=\"bk\" style=\"left:71.4%;width:21%;top:32px\">Leather boots</span><span class=\"bk\" style=\"left:85.7%;width:14%;top:0\">Linen jacket</span></div></section></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Item grid\">\n<section class=\"gd\">\n<article><span class=\"du late\">Due 09 Mar · overdue 3 d</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-coat.webp\" alt=\"A single blue coat hanging against a mauve wall\"></figure><h2>Wool overcoat, navy</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Good</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 13 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-folded.webp\" alt=\"Folded garments stacked on a pale shelf\"></figure><h2>Silk shirt, oyster</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">New</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 15 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-rail.webp\" alt=\"Hangers close together on a metal rail seen end-on\"></figure><h2>Pleated trousers, ink</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Worn</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n<article><span class=\"du\">Due 17 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-room.webp\" alt=\"A fitting room corner with a curtain and a mirror edge\"></figure><h2>Knit dress, slate</h2><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Repaired</span></p><div class=\"ac\"><button class=\"pri\">Return</button><button class=\"gh\">Extend</button></div></article>\n</section></section>\n</div>",
  "css": "\n.dz-fitting-room-wardrobe { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding-bottom: 28px; }\n.dz-fitting-room-wardrobe .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-fitting-room-wardrobe .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-fitting-room-wardrobe .tp { display: flex; align-items: center; gap: 26px; height: 54px; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-fitting-room-wardrobe .lg { font-family: var(--pv-display); font-weight: 500; font-size: 20px; }\n.dz-fitting-room-wardrobe .tp nav { display: flex; gap: 18px; }\n.dz-fitting-room-wardrobe .tp a { color: var(--muted-foreground); text-decoration: none; font-size: 14.5px; padding-bottom: 3px; }\n.dz-fitting-room-wardrobe .tp a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-fitting-room-wardrobe .ct { color: var(--muted-foreground); margin-left: auto; font-size: 12px; }\n.dz-fitting-room-wardrobe .rl { padding: 12px 28px 18px; border-bottom: 1px solid var(--border); }\n\n.dz-fitting-room-wardrobe .rail { display: grid; grid-template-columns: repeat(14, 1fr); border-bottom: 1px solid var(--border); position: relative; }\n.dz-fitting-room-wardrobe .rail .dy { padding: 8px 0 12px; text-align: center; border-right: 1px solid var(--border); }\n.dz-fitting-room-wardrobe .rail .dy:last-child { border-right: 0; }\n.dz-fitting-room-wardrobe .rail .di { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-fitting-room-wardrobe .rail .dn { font-family: var(--pv-mono); font-size: 13px; display: block; margin-top: 4px; }\n.dz-fitting-room-wardrobe .rail .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }\n.dz-fitting-room-wardrobe .blocks { position: relative; height: 96px; margin-top: 8px; }\n.dz-fitting-room-wardrobe .bk { position: absolute; height: 26px; background: var(--primary); color: var(--primary-foreground); border-radius: 4px; font-family: var(--pv-mono); font-size: 13px; font-size: 11px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }\n.dz-fitting-room-wardrobe .bk.late { background: var(--destructive); color: var(--primary-foreground); }\n.dz-fitting-room-wardrobe .gd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 22px 28px 0; }\n.dz-fitting-room-wardrobe .gd article { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 8px 20px -18px color-mix(in oklab, var(--foreground) 60%, transparent); }\n\n.dz-fitting-room-wardrobe .du { font-family: var(--pv-mono); font-size: 13px; border-bottom: 2px solid var(--accent); padding-bottom: 3px; display: inline-block; }\n.dz-fitting-room-wardrobe .du.late { border-bottom-color: var(--destructive); color: var(--destructive); }\n.dz-fitting-room-wardrobe figure { margin: 12px 0; }\n.dz-fitting-room-wardrobe figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 8px; filter: var(--img-filter); }\n.dz-fitting-room-wardrobe h2 { font-family: var(--pv-display); font-weight: 500; font-size: 20px; line-height: 1.24; margin: 0 0 8px; }\n.dz-fitting-room-wardrobe .mt { display: flex; gap: 8px; margin: 0 0 14px; }\n.dz-fitting-room-wardrobe .sz, .dz-fitting-room-wardrobe .cn { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; background: var(--secondary); color: var(--muted-foreground); border-radius: 4px; padding: 5px 9px; }\n.dz-fitting-room-wardrobe .ac { display: flex; gap: 8px; }\n.dz-fitting-room-wardrobe button { flex: 1; border-radius: 4px; padding: 10px; font: inherit; font-size: 13.5px; cursor: pointer; }\n.dz-fitting-room-wardrobe .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-fitting-room-wardrobe .gh { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n@media (prefers-reduced-motion: reduce) { .dz-fitting-room-wardrobe *, .dz-fitting-room-wardrobe *::before, .dz-fitting-room-wardrobe *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/fitting-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=M+PLUS+1+Code:wght@400;500;600;700&display=swap"
}