{
  "id": "greengrocer-front",
  "name": "Market Front",
  "theme": "greengrocer",
  "category": "Landing",
  "description": "A grocery landing page that opens with a per-kilo figure at 76px rather than a lifestyle photograph, and states the unit-price rule as the offer.",
  "layout": "A hard-lit stall photograph behind a poster-scale unit price, then three uppercase claims with 6px category bars, then a crate row.",
  "modules": [
    {
      "key": "hero",
      "name": "Poster hero",
      "html": "\n<header class=\"hr\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"ov\"><span class=\"k\">Kilcarn Market · Stall 4</span><h1>£0.90<br>A KILO</h1><p>That is what Maris Pipers cost this week. It is also the only number we will ever put in the biggest type on this site, because it is the one that tells you something.</p><button class=\"bp\">SEE THE STALL</button></div></header>"
    },
    {
      "key": "claims",
      "name": "Three claims",
      "html": "\n<section class=\"cl\"><article class=\"a1\"><h2>UNIT PRICE ON EVERYTHING</h2><p>Every item shows its per-kilo, per-litre or per-each figure at thirteen pixels in semibold, directly under the pack price. Not in grey, not in a footnote.</p></article><article class=\"a2\"><h2>NO UNIT PRICE, NO SALE</h2><p>A product record without one renders as a gap with a note. We would rather lose the sale than show you a number you cannot compare.</p></article><article class=\"a3\"><h2>SORTED BY THE KILO</h2><p>The default sort is per-kilo, not pack price. It reorders the whole list, and the reordering is the point.</p></article></section>"
    },
    {
      "key": "crates",
      "name": "Crate row",
      "html": "\n<section class=\"gd\"><article class=\"cr c1\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>MARIS PIPER</h2><div class=\"pb\"><span class=\"pk\">£2.25</span><span class=\"un\">£0.90 / KG</span></div></article><article class=\"cr c2\"><figure><img src=\"{{ART leaves}}\" alt=\"{{ARTALT leaves}}\"></figure><h2>CAVOLO NERO</h2><div class=\"pb\"><span class=\"pk\">£2.40</span><span class=\"un\">£4.80 / KG</span></div></article><article class=\"cr c3\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>SAVOY CABBAGE</h2><div class=\"pb\"><span class=\"pk\">£1.60</span><span class=\"un\">£1.78 / KG</span></div></article><article class=\"cr c4\"><figure><img src=\"{{ART stall}}\" alt=\"{{ARTALT stall}}\"></figure><h2>CHICORY</h2><div class=\"pb\"><span class=\"pk\">£1.95</span><span class=\"un\">£7.80 / KG</span></div></article></section>"
    },
    {
      "key": "end",
      "name": "Closing bar",
      "html": "\n<footer class=\"en\"><h2>THURSDAY AND SATURDAY, SIX UNTIL ONE</h2><button class=\"bp\">BOX SCHEME</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-front",
    "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-front.json",
  "structure": "A hard-lit stall photograph behind a poster-scale unit price, then three uppercase claims with 6px category bars, then a crate row.",
  "html": "<div class=\"dz dz-greengrocer-front\" data-design=\"greengrocer-front\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Poster hero\">\n<header class=\"hr\"><img src=\"https://designlookbook.dev/assets/img/greengrocer-hero.webp\" alt=\"A market stall front with crates of green produce under a pink awning\"><div class=\"ov\"><span class=\"k\">Kilcarn Market · Stall 4</span><h1>£0.90<br>A KILO</h1><p>That is what Maris Pipers cost this week. It is also the only number we will ever put in the biggest type on this site, because it is the one that tells you something.</p><button class=\"bp\">SEE THE STALL</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"claims\" aria-label=\"Three claims\">\n<section class=\"cl\"><article class=\"a1\"><h2>UNIT PRICE ON EVERYTHING</h2><p>Every item shows its per-kilo, per-litre or per-each figure at thirteen pixels in semibold, directly under the pack price. Not in grey, not in a footnote.</p></article><article class=\"a2\"><h2>NO UNIT PRICE, NO SALE</h2><p>A product record without one renders as a gap with a note. We would rather lose the sale than show you a number you cannot compare.</p></article><article class=\"a3\"><h2>SORTED BY THE KILO</h2><p>The default sort is per-kilo, not pack price. It reorders the whole list, and the reordering is the point.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"crates\" aria-label=\"Crate row\">\n<section class=\"gd\"><article class=\"cr c1\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-crate.webp\" alt=\"A wooden crate of bright green vegetables from above\"></figure><h2>MARIS PIPER</h2><div class=\"pb\"><span class=\"pk\">£2.25</span><span class=\"un\">£0.90 / KG</span></div></article><article class=\"cr c2\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-leaves.webp\" alt=\"Wet green leaves pressed flat against a pink surface\"></figure><h2>CAVOLO NERO</h2><div class=\"pb\"><span class=\"pk\">£2.40</span><span class=\"un\">£4.80 / KG</span></div></article><article class=\"cr c3\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-crate.webp\" alt=\"A wooden crate of bright green vegetables from above\"></figure><h2>SAVOY CABBAGE</h2><div class=\"pb\"><span class=\"pk\">£1.60</span><span class=\"un\">£1.78 / KG</span></div></article><article class=\"cr c4\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-stall.webp\" alt=\"Empty stacked crates against a pink painted wall\"></figure><h2>CHICORY</h2><div class=\"pb\"><span class=\"pk\">£1.95</span><span class=\"un\">£7.80 / KG</span></div></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing bar\">\n<footer class=\"en\"><h2>THURSDAY AND SATURDAY, SIX UNTIL ONE</h2><button class=\"bp\">BOX SCHEME</button></footer></section>\n</div>",
  "css": "\n.dz-greengrocer-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-greengrocer-front .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-front .hr { position: relative; }\n.dz-greengrocer-front .hr img { width: 100%; height: 500px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-greengrocer-front .ov { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, var(--background), transparent 70%); }\n.dz-greengrocer-front h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 76px; line-height: .94; margin: 6px 0 14px; }\n.dz-greengrocer-front .ov p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; max-width: 54ch; }\n.dz-greengrocer-front .bp { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 14px 28px; font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; cursor: pointer; align-self: flex-start; }\n.dz-greengrocer-front .cl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 32px 24px; }\n.dz-greengrocer-front .cl article { border-top: 6px solid var(--accent); padding-top: 14px; }\n.dz-greengrocer-front .a2 { border-top-color: var(--primary); }\n.dz-greengrocer-front .a3 { border-top-color: var(--chart-3); }\n.dz-greengrocer-front h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 22px; font-weight: 700; margin: 0 0 8px; line-height: 1.24; }\n.dz-greengrocer-front .cl p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-greengrocer-front .gd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 24px 32px; }\n.dz-greengrocer-front .cr { background: var(--card); border: 2px solid var(--border); border-top: 6px solid var(--accent); padding: 16px; }\n.dz-greengrocer-front .c2 { border-top-color: var(--primary); }\n.dz-greengrocer-front .c3 { border-top-color: var(--chart-3); }\n.dz-greengrocer-front .c4 { border-top-color: var(--chart-4); }\n.dz-greengrocer-front .cr figure { margin: 0 0 12px; }\n.dz-greengrocer-front .cr img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: var(--img-filter); }\n\n.dz-greengrocer-front .pb .pk { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1; display: block; }\n.dz-greengrocer-front .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-front .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-front .en { display: flex; align-items: center; gap: 24px; padding: 24px; border-top: 2px solid var(--border); margin: 0 24px 32px; }\n.dz-greengrocer-front .en h2 { margin: 0; }\n.dz-greengrocer-front .en .bp { margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-greengrocer-front *, .dz-greengrocer-front *::before, .dz-greengrocer-front *::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"
}