{
  "id": "greengrocer-boxes",
  "name": "Box Scheme",
  "theme": "greengrocer",
  "category": "Pricing",
  "description": "Three veg boxes priced with their own per-kilo figure, so a bigger box is not automatically better value and the page says which one is.",
  "layout": "Three crates in a row, each with a pack price at 40px and its per-kilo figure underlined in accent, plus a comparison rule beneath.",
  "modules": [
    {
      "key": "head",
      "name": "Box header",
      "html": "\n<header class=\"bh\"><span class=\"k\">Weekly box · delivered Thursday</span><h1>THREE BOXES</h1><p>Every box shows its own per-kilo figure. The large box is not the best value this week and we are not going to hide that.</p></header>"
    },
    {
      "key": "boxes",
      "name": "Box crates",
      "html": "\n<section class=\"gd\">\n<article class=\"cr c1\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>SMALL</h2><div class=\"pb\"><span class=\"pk\">£14.00</span><span class=\"un\">£2.33 / KG</span></div><p class=\"wt\">ABOUT 6 KG · FEEDS TWO</p><ul><li>SIX OR SEVEN LINES</li><li>ROOTS, GREENS AND ONE FRUIT</li><li>SKIP ANY WEEK</li></ul><button class=\"bp gh\">CHOOSE SMALL</button></article>\n<article class=\"cr c2 best\"><figure><img src=\"{{ART leaves}}\" alt=\"{{ARTALT leaves}}\"></figure><h2>MEDIUM</h2><div class=\"pb\"><span class=\"pk\">£21.00</span><span class=\"un\">£2.10 / KG</span></div><p class=\"wt\">ABOUT 10 KG · FEEDS THREE</p><ul><li>NINE OR TEN LINES</li><li>ROOTS, GREENS, HERB AND FRUIT</li><li>SKIP ANY WEEK</li><li>BEST PER KILO THIS WEEK</li></ul><button class=\"bp\">CHOOSE MEDIUM</button></article>\n<article class=\"cr c3\"><figure><img src=\"{{ART stall}}\" alt=\"{{ARTALT stall}}\"></figure><h2>LARGE</h2><div class=\"pb\"><span class=\"pk\">£34.00</span><span class=\"un\">£2.27 / KG</span></div><p class=\"wt\">ABOUT 15 KG · FEEDS FIVE</p><ul><li>THIRTEEN OR FOURTEEN LINES</li><li>EVERYTHING IN MEDIUM PLUS POTATOES</li><li>SKIP ANY WEEK</li></ul><button class=\"bp gh\">CHOOSE LARGE</button></article>\n</section>"
    },
    {
      "key": "why",
      "name": "Value note",
      "html": "\n<footer class=\"wn\"><span class=\"k\">Why the large box is worse this week</span><p>It is weighted towards potatoes, which are the cheapest thing on the stall. More kilos, lower value per kilo. Next week the potatoes come out and the arithmetic reverses; we will say so then too.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-boxes",
    "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-boxes.json",
  "structure": "Three crates in a row, each with a pack price at 40px and its per-kilo figure underlined in accent, plus a comparison rule beneath.",
  "html": "<div class=\"dz dz-greengrocer-boxes\" data-design=\"greengrocer-boxes\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Box header\">\n<header class=\"bh\"><span class=\"k\">Weekly box · delivered Thursday</span><h1>THREE BOXES</h1><p>Every box shows its own per-kilo figure. The large box is not the best value this week and we are not going to hide that.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"boxes\" aria-label=\"Box crates\">\n<section class=\"gd\">\n<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>SMALL</h2><div class=\"pb\"><span class=\"pk\">£14.00</span><span class=\"un\">£2.33 / KG</span></div><p class=\"wt\">ABOUT 6 KG · FEEDS TWO</p><ul><li>SIX OR SEVEN LINES</li><li>ROOTS, GREENS AND ONE FRUIT</li><li>SKIP ANY WEEK</li></ul><button class=\"bp gh\">CHOOSE SMALL</button></article>\n<article class=\"cr c2 best\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-leaves.webp\" alt=\"Wet green leaves pressed flat against a pink surface\"></figure><h2>MEDIUM</h2><div class=\"pb\"><span class=\"pk\">£21.00</span><span class=\"un\">£2.10 / KG</span></div><p class=\"wt\">ABOUT 10 KG · FEEDS THREE</p><ul><li>NINE OR TEN LINES</li><li>ROOTS, GREENS, HERB AND FRUIT</li><li>SKIP ANY WEEK</li><li>BEST PER KILO THIS WEEK</li></ul><button class=\"bp\">CHOOSE MEDIUM</button></article>\n<article class=\"cr c3\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-stall.webp\" alt=\"Empty stacked crates against a pink painted wall\"></figure><h2>LARGE</h2><div class=\"pb\"><span class=\"pk\">£34.00</span><span class=\"un\">£2.27 / KG</span></div><p class=\"wt\">ABOUT 15 KG · FEEDS FIVE</p><ul><li>THIRTEEN OR FOURTEEN LINES</li><li>EVERYTHING IN MEDIUM PLUS POTATOES</li><li>SKIP ANY WEEK</li></ul><button class=\"bp gh\">CHOOSE LARGE</button></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"why\" aria-label=\"Value note\">\n<footer class=\"wn\"><span class=\"k\">Why the large box is worse this week</span><p>It is weighted towards potatoes, which are the cheapest thing on the stall. More kilos, lower value per kilo. Next week the potatoes come out and the arithmetic reverses; we will say so then too.</p></footer></section>\n</div>",
  "css": "\n.dz-greengrocer-boxes { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 32px 24px; }\n.dz-greengrocer-boxes .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-boxes .bh { margin-bottom: 24px; }\n.dz-greengrocer-boxes h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 76px; line-height: .94; margin: 6px 0 12px; }\n.dz-greengrocer-boxes .bh p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 62ch; color: var(--muted-foreground); }\n.dz-greengrocer-boxes .gd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }\n.dz-greengrocer-boxes .cr { background: var(--card); border: 2px solid var(--border); border-top: 6px solid var(--accent); padding: 18px; }\n.dz-greengrocer-boxes .c2 { border-top-color: var(--primary); }\n.dz-greengrocer-boxes .c3 { border-top-color: var(--chart-3); }\n.dz-greengrocer-boxes .best { border-color: var(--primary); }\n.dz-greengrocer-boxes .cr figure { margin: 0 0 14px; }\n.dz-greengrocer-boxes .cr img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-greengrocer-boxes h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 26px; font-weight: 700; margin: 0 0 10px; }\n\n.dz-greengrocer-boxes .pb .pk { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1; display: block; }\n.dz-greengrocer-boxes .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-boxes .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-boxes .wt { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); margin: 14px 0; }\n.dz-greengrocer-boxes ul { list-style: none; margin: 0 0 18px; padding: 0; }\n.dz-greengrocer-boxes li { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; padding: 10px 0; border-bottom: 2px solid var(--border); }\n.dz-greengrocer-boxes .bp { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 14px; font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; cursor: pointer; }\n.dz-greengrocer-boxes .gh { background: transparent; color: var(--foreground); border: 2px solid var(--border); }\n.dz-greengrocer-boxes .wn { margin-top: 24px; border-left: 6px solid var(--accent); padding-left: 16px; }\n.dz-greengrocer-boxes .wn p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 70ch; }\n@media (prefers-reduced-motion: reduce) { .dz-greengrocer-boxes *, .dz-greengrocer-boxes *::before, .dz-greengrocer-boxes *::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"
}