{
  "id": "fitting-room-front",
  "name": "Front",
  "theme": "fitting-room",
  "category": "Landing",
  "description": "A landing page whose hero is the calendar rail itself, making the argument that a wardrobe you do not own is organised by dates rather than by purchases.",
  "layout": "A rail with populated blocks as the hero object beside the claim, then a warm 3:4 photograph, then three ruled promises about dates over orders.",
  "modules": [
    {
      "key": "hero",
      "name": "Rail hero",
      "html": "\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Fitting Room · clothing rental</span><h1>You have it until the fourteenth</h1><p>Everything here is organised by when it goes back, not by when you got it. The calendar is the navigation, and the date is the first thing on every card in the application.</p><button class=\"pri\">See what is free now</button></div><div class=\"rl\"><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"di\">M</span><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"di\">W</span><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"di\">F</span><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"di\">M</span><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"di\">W</span><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"di\">F</span><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">22</span></div></div><div class=\"blocks\"><span class=\"bk\" style=\"left:0;width:28%;top:0\">Wool overcoat</span><span class=\"bk\" style=\"left:32%;width:22%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:50%;width:30%;top:0\">Pleated trousers</span><span class=\"bk\" style=\"left:64%;width:26%;top:64px\">Knit dress</span></div></div></header>"
    },
    {
      "key": "photo",
      "name": "Rail photograph",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption>Everything on the rail this week, in the order it comes back.</figcaption></figure>"
    },
    {
      "key": "promises",
      "name": "Three promises",
      "html": "\n<section class=\"pm\"><article><h2>The date is the first fact</h2><p>Top-left of every card, in mono, with an amber rule under it. Before the name, before the price, before the photograph.</p></article><article><h2>Nothing is sorted by date added</h2><p>There is no \"recently added\" anywhere in the product. Items sort by when they come free, which is the only ordering that helps you plan.</p></article><article><h2>Extending shows you where it lands</h2><p>Press the stepper and the block moves along the rail as you press. You see the consequence before you commit to it.</p></article></section>"
    },
    {
      "key": "end",
      "name": "Closing band",
      "html": "\n<footer class=\"en\"><img src=\"{{ART folded}}\" alt=\"{{ARTALT folded}}\"><div><h2>Two, four or eight items on your rail</h2><button class=\"pri\">See the plans</button></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "fitting-room-front",
    "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-front.json",
  "structure": "A rail with populated blocks as the hero object beside the claim, then a warm 3:4 photograph, then three ruled promises about dates over orders.",
  "html": "<div class=\"dz dz-fitting-room-front\" data-design=\"fitting-room-front\" data-theme=\"fitting-room\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Rail hero\">\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Fitting Room · clothing rental</span><h1>You have it until the fourteenth</h1><p>Everything here is organised by when it goes back, not by when you got it. The calendar is the navigation, and the date is the first thing on every card in the application.</p><button class=\"pri\">See what is free now</button></div><div class=\"rl\"><div class=\"rail\"><span class=\"today\" style=\"left:21.4%\"></span><div class=\"dy\"><span class=\"di\">M</span><span class=\"dn\">09</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">10</span></div><div class=\"dy\"><span class=\"di\">W</span><span class=\"dn\">11</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">12</span></div><div class=\"dy\"><span class=\"di\">F</span><span class=\"dn\">13</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"di\">M</span><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"di\">W</span><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"di\">T</span><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"di\">F</span><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"di\">S</span><span class=\"dn\">22</span></div></div><div class=\"blocks\"><span class=\"bk\" style=\"left:0;width:28%;top:0\">Wool overcoat</span><span class=\"bk\" style=\"left:32%;width:22%;top:32px\">Silk shirt</span><span class=\"bk\" style=\"left:50%;width:30%;top:0\">Pleated trousers</span><span class=\"bk\" style=\"left:64%;width:26%;top:64px\">Knit dress</span></div></div></header></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Rail photograph\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/fitting-room-hero.webp\" alt=\"A clothing rail against a mauve wall in window light\"><figcaption>Everything on the rail this week, in the order it comes back.</figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"promises\" aria-label=\"Three promises\">\n<section class=\"pm\"><article><h2>The date is the first fact</h2><p>Top-left of every card, in mono, with an amber rule under it. Before the name, before the price, before the photograph.</p></article><article><h2>Nothing is sorted by date added</h2><p>There is no \"recently added\" anywhere in the product. Items sort by when they come free, which is the only ordering that helps you plan.</p></article><article><h2>Extending shows you where it lands</h2><p>Press the stepper and the block moves along the rail as you press. You see the consequence before you commit to it.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing band\">\n<footer class=\"en\"><img src=\"https://designlookbook.dev/assets/img/fitting-room-folded.webp\" alt=\"Folded garments stacked on a pale shelf\"><div><h2>Two, four or eight items on your rail</h2><button class=\"pri\">See the plans</button></div></footer></section>\n</div>",
  "css": "\n.dz-fitting-room-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-fitting-room-front .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-fitting-room-front .hr { display: grid; grid-template-columns: 1fr 460px; gap: 44px; align-items: center; padding: 48px 28px; }\n.dz-fitting-room-front h1 { font-family: var(--pv-display); font-weight: 500; font-size: 56px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; }\n.dz-fitting-room-front .hr p { margin: 0 0 24px; font-size: 16px; line-height: 1.62; color: var(--muted-foreground); max-width: 52ch; }\n.dz-fitting-room-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 4px; padding: 13px 24px; font: inherit; font-size: 15px; cursor: pointer; }\n.dz-fitting-room-front .rl { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }\n\n.dz-fitting-room-front .rail { display: grid; grid-template-columns: repeat(14, 1fr); border-bottom: 1px solid var(--border); position: relative; }\n.dz-fitting-room-front .rail .dy { padding: 8px 0 12px; text-align: center; border-right: 1px solid var(--border); }\n.dz-fitting-room-front .rail .dy:last-child { border-right: 0; }\n.dz-fitting-room-front .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-front .rail .dn { font-family: var(--pv-mono); font-size: 13px; display: block; margin-top: 4px; }\n.dz-fitting-room-front .rail .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }\n.dz-fitting-room-front .blocks { position: relative; height: 96px; margin-top: 8px; }\n.dz-fitting-room-front .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-front .bk.late { background: var(--destructive); color: var(--primary-foreground); }\n.dz-fitting-room-front .ph { margin: 0 28px; }\n.dz-fitting-room-front .ph img { width: 100%; height: 380px; object-fit: cover; display: block; border-radius: 16px; filter: var(--img-filter); }\n.dz-fitting-room-front figcaption { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); margin-top: 10px; }\n.dz-fitting-room-front .pm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 40px 28px; }\n.dz-fitting-room-front .pm article { border-top: 2px solid var(--accent); padding-top: 14px; }\n.dz-fitting-room-front h2 { font-family: var(--pv-display); font-weight: 500; font-size: 20px; margin: 0 0 8px; }\n.dz-fitting-room-front .pm p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-fitting-room-front .en { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: center; padding: 0 28px 48px; }\n.dz-fitting-room-front .en img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 16px; filter: var(--img-filter); }\n.dz-fitting-room-front .en h2 { font-family: var(--pv-display); font-weight: 500; font-size: 32px; margin: 0 0 20px; }\n@media (prefers-reduced-motion: reduce) { .dz-fitting-room-front *, .dz-fitting-room-front *::before, .dz-fitting-room-front *::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"
}