{
  "id": "greengrocer-listing",
  "name": "New Listing",
  "theme": "greengrocer",
  "category": "Settings & Forms",
  "description": "The grower’s listing form, which will not let a product be saved without a unit price and shows the crate preview updating as the fields are filled.",
  "layout": "A two-column form with square 2px-bordered fields on the left and a live crate preview on the right that renders the missing-unit state until it is fixed.",
  "modules": [
    {
      "key": "head",
      "name": "Listing header",
      "html": "\n<header class=\"lh\"><span class=\"k\">Nendrum Farm · Stall 4</span><h1>NEW LISTING</h1></header>"
    },
    {
      "key": "form",
      "name": "Listing fields",
      "html": "\n<section class=\"fm\">\n<label><span class=\"k\">Item name</span><input value=\"WILD GARLIC\"></label>\n<label><span class=\"k\">Category</span><div class=\"pick\"><span class=\"ch\">LEAF</span><span class=\"ch\">ROOT</span><span class=\"ch\">BRASSICA</span><span class=\"ch on\">ALLIUM</span><span class=\"ch\">HERB</span></div></label>\n<div class=\"two\"><label><span class=\"k\">Pack price</span><input class=\"mn\" value=\"1.80\"></label><label><span class=\"k\">Pack weight</span><input class=\"mn\" value=\"\"></label></div>\n<label class=\"req\"><span class=\"k\">Unit price (£ / kg)</span><input class=\"mn bad\" value=\"\"><em>REQUIRED — A LISTING WITHOUT ONE CANNOT BE SAVED</em></label>\n<label><span class=\"k\">Origin</span><input value=\"THE LANE · 40 YD\"></label>\n<button class=\"bp off\">SAVE LISTING</button>\n</section>"
    },
    {
      "key": "preview",
      "name": "Crate preview",
      "html": "\n<aside class=\"pv\"><span class=\"k\">How it will render</span><article class=\"cr gap\"><figure><img src=\"{{ART leaves}}\" alt=\"{{ARTALT leaves}}\"></figure><h2>WILD GARLIC</h2><div class=\"pb\"><span class=\"pk\">£1.80</span><span class=\"miss\">No unit price recorded</span></div><p class=\"or\">THE LANE · 40 YD</p><div class=\"st off\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article><p class=\"nt\">The crate renders, and it cannot be bought. Enter a per-kilo figure and the stepper turns green.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-listing",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:25:45+09:00",
    "updatedAt": "2026-09-02T01:25:45+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/greengrocer-listing.json",
  "structure": "A two-column form with square 2px-bordered fields on the left and a live crate preview on the right that renders the missing-unit state until it is fixed.",
  "html": "<div class=\"dz dz-greengrocer-listing\" data-design=\"greengrocer-listing\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Listing header\">\n<header class=\"lh\"><span class=\"k\">Nendrum Farm · Stall 4</span><h1>NEW LISTING</h1></header></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Listing fields\">\n<section class=\"fm\">\n<label><span class=\"k\">Item name</span><input value=\"WILD GARLIC\"></label>\n<label><span class=\"k\">Category</span><div class=\"pick\"><span class=\"ch\">LEAF</span><span class=\"ch\">ROOT</span><span class=\"ch\">BRASSICA</span><span class=\"ch on\">ALLIUM</span><span class=\"ch\">HERB</span></div></label>\n<div class=\"two\"><label><span class=\"k\">Pack price</span><input class=\"mn\" value=\"1.80\"></label><label><span class=\"k\">Pack weight</span><input class=\"mn\" value=\"\"></label></div>\n<label class=\"req\"><span class=\"k\">Unit price (£ / kg)</span><input class=\"mn bad\" value=\"\"><em>REQUIRED — A LISTING WITHOUT ONE CANNOT BE SAVED</em></label>\n<label><span class=\"k\">Origin</span><input value=\"THE LANE · 40 YD\"></label>\n<button class=\"bp off\">SAVE LISTING</button>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Crate preview\">\n<aside class=\"pv\"><span class=\"k\">How it will render</span><article class=\"cr gap\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-leaves.webp\" alt=\"Wet green leaves pressed flat against a pink surface\"></figure><h2>WILD GARLIC</h2><div class=\"pb\"><span class=\"pk\">£1.80</span><span class=\"miss\">No unit price recorded</span></div><p class=\"or\">THE LANE · 40 YD</p><div class=\"st off\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article><p class=\"nt\">The crate renders, and it cannot be bought. Enter a per-kilo figure and the stepper turns green.</p></aside></section>\n</div>",
  "css": "\n.dz-greengrocer-listing { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }\n.dz-greengrocer-listing .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 6px; }\n.dz-greengrocer-listing .mn { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; }\n.dz-greengrocer-listing .lh { grid-column: 1 / -1; }\n.dz-greengrocer-listing h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; margin: 6px 0 0; }\n.dz-greengrocer-listing label { display: block; margin-bottom: 18px; }\n.dz-greengrocer-listing input { display: block; width: 100%; box-sizing: border-box; background: var(--card); border: 2px solid var(--border); border-radius: 0; color: var(--foreground); font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 16px; padding: 11px 12px; }\n.dz-greengrocer-listing input.mn { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; font-size: 16px; letter-spacing: 0; }\n.dz-greengrocer-listing input:focus { outline: none; border-color: var(--primary); }\n.dz-greengrocer-listing input.bad { border-color: var(--destructive); }\n.dz-greengrocer-listing .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.dz-greengrocer-listing .req em { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-style: normal; color: var(--destructive); display: block; margin-top: 6px; }\n.dz-greengrocer-listing .pick { display: flex; gap: 8px; flex-wrap: wrap; }\n.dz-greengrocer-listing .ch { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; border: 2px solid var(--border); padding: 8px 12px; color: var(--muted-foreground); }\n.dz-greengrocer-listing .ch.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-greengrocer-listing .bp { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 14px 30px; font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; cursor: pointer; }\n.dz-greengrocer-listing .bp.off { background: var(--secondary); color: var(--muted-foreground); }\n.dz-greengrocer-listing .cr { background: var(--card); border: 2px solid var(--destructive); border-top: 6px solid var(--chart-4); padding: 16px; margin-top: 10px; }\n.dz-greengrocer-listing .cr figure { margin: 0 0 12px; }\n.dz-greengrocer-listing .cr img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-greengrocer-listing h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 20px; font-weight: 700; margin: 0 0 10px; }\n\n.dz-greengrocer-listing .pb .pk { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1; display: block; }\n.dz-greengrocer-listing .pb .un { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; border-bottom: 1px solid var(--accent); padding-bottom: 2px; color: var(--foreground); }\n.dz-greengrocer-listing .pb .miss { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; color: var(--destructive); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; }\n.dz-greengrocer-listing .or { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); margin: 12px 0; }\n.dz-greengrocer-listing .st { display: flex; align-items: center; }\n.dz-greengrocer-listing .st button { width: 34px; height: 34px; background: var(--secondary); color: var(--muted-foreground); border: 0; border-radius: 0; font: inherit; font-size: 18px; cursor: pointer; }\n.dz-greengrocer-listing .st span { width: 40px; text-align: center; font-family: var(--pv-mono); font-size: 13px; font-weight: 600; }\n.dz-greengrocer-listing .nt { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); line-height: 1.6; margin-top: 12px; }\n@media (prefers-reduced-motion: reduce) { .dz-greengrocer-listing *, .dz-greengrocer-listing *::before, .dz-greengrocer-listing *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/greengrocer.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Anton:wght@400;500;600;700&family=Chivo:wght@400;500;600;700&family=Sono:wght@400;500;600;700&display=swap"
}