{
  "id": "greengrocer-round",
  "name": "Round",
  "theme": "greengrocer",
  "category": "App Shell",
  "description": "The delivery driver’s shell: an uppercase route rail, crates listed by drop, and a total weight that is the largest figure on the screen.",
  "layout": "A 260px route rail, a dense drop list in the middle, and a summary column whose weight figure is set in Anton at poster size.",
  "modules": [
    {
      "key": "top",
      "name": "Round bar",
      "html": "\n<header class=\"tp\"><span class=\"lg\">GREENGROCER</span><nav><a class=\"on\" href=\"#\">ROUND</a><a href=\"#\">STALL</a><a href=\"#\">STOCK</a><a href=\"#\">GROWERS</a></nav><span class=\"dv\">VAN 2 · A. BEKELE · THU AM</span></header>"
    },
    {
      "key": "rail",
      "name": "Route rail",
      "html": "\n<aside class=\"rl\"><span class=\"k\">Drops</span><ul><li class=\"on\"><a href=\"#\">1 · SLADE ROW<b class=\"mn\">6</b></a></li><li><a href=\"#\">2 · KILCARN PIER<b class=\"mn\">4</b></a></li><li><a href=\"#\">3 · NENDRUM LANE<b class=\"mn\">9</b></a></li><li><a href=\"#\">4 · AUGHRIM CROSS<b class=\"mn\">3</b></a></li><li><a href=\"#\">5 · BALLYFIN<b class=\"mn\">7</b></a></li><li><a href=\"#\">6 · THE STRAND<b class=\"mn\">5</b></a></li></ul></aside>"
    },
    {
      "key": "drop",
      "name": "Drop contents",
      "html": "\n<section class=\"dp\"><header class=\"dh\"><h1>1 · SLADE ROW</h1><span class=\"mn\">6 CRATES · 14.2 KG · ETA 08:20</span></header>\n<div class=\"rw c1\"><span class=\"nm\">CAVOLO NERO</span><span class=\"qt mn\">×4</span><span class=\"wt mn\">2.0 KG</span><span class=\"up2\">£4.80 / KG</span></div>\n<div class=\"rw c2\"><span class=\"nm\">MARIS PIPER</span><span class=\"qt mn\">×2</span><span class=\"wt mn\">5.0 KG</span><span class=\"up2\">£0.90 / KG</span></div>\n<div class=\"rw c3\"><span class=\"nm\">SAVOY CABBAGE</span><span class=\"qt mn\">×3</span><span class=\"wt mn\">2.7 KG</span><span class=\"up2\">£1.78 / KG</span></div>\n<div class=\"rw c4\"><span class=\"nm\">LEEK</span><span class=\"qt mn\">×6</span><span class=\"wt mn\">3.0 KG</span><span class=\"up2\">£2.80 / KG</span></div>\n<div class=\"rw c5\"><span class=\"nm\">CHICORY</span><span class=\"qt mn\">×6</span><span class=\"wt mn\">1.5 KG</span><span class=\"up2\">£7.80 / KG</span></div>\n</section>"
    },
    {
      "key": "sum",
      "name": "Weight summary",
      "html": "\n<aside class=\"sm\"><span class=\"k\">This drop</span><p class=\"big\">14.2<small>KG</small></p><div class=\"kv\"><span>CRATES</span><b class=\"mn\">6</b></div><div class=\"kv\"><span>VALUE</span><b class=\"mn\">£38.40</b></div><div class=\"kv\"><span>EMPTIES BACK</span><b class=\"mn\">4</b></div><button class=\"bp\">MARK DELIVERED</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-round",
    "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-round.json",
  "structure": "A 260px route rail, a dense drop list in the middle, and a summary column whose weight figure is set in Anton at poster size.",
  "html": "<div class=\"dz dz-greengrocer-round\" data-design=\"greengrocer-round\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Round bar\">\n<header class=\"tp\"><span class=\"lg\">GREENGROCER</span><nav><a class=\"on\" href=\"#\">ROUND</a><a href=\"#\">STALL</a><a href=\"#\">STOCK</a><a href=\"#\">GROWERS</a></nav><span class=\"dv\">VAN 2 · A. BEKELE · THU AM</span></header></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Route rail\">\n<aside class=\"rl\"><span class=\"k\">Drops</span><ul><li class=\"on\"><a href=\"#\">1 · SLADE ROW<b class=\"mn\">6</b></a></li><li><a href=\"#\">2 · KILCARN PIER<b class=\"mn\">4</b></a></li><li><a href=\"#\">3 · NENDRUM LANE<b class=\"mn\">9</b></a></li><li><a href=\"#\">4 · AUGHRIM CROSS<b class=\"mn\">3</b></a></li><li><a href=\"#\">5 · BALLYFIN<b class=\"mn\">7</b></a></li><li><a href=\"#\">6 · THE STRAND<b class=\"mn\">5</b></a></li></ul></aside></section>\n<section class=\"dz-mod\" data-mod=\"drop\" aria-label=\"Drop contents\">\n<section class=\"dp\"><header class=\"dh\"><h1>1 · SLADE ROW</h1><span class=\"mn\">6 CRATES · 14.2 KG · ETA 08:20</span></header>\n<div class=\"rw c1\"><span class=\"nm\">CAVOLO NERO</span><span class=\"qt mn\">×4</span><span class=\"wt mn\">2.0 KG</span><span class=\"up2\">£4.80 / KG</span></div>\n<div class=\"rw c2\"><span class=\"nm\">MARIS PIPER</span><span class=\"qt mn\">×2</span><span class=\"wt mn\">5.0 KG</span><span class=\"up2\">£0.90 / KG</span></div>\n<div class=\"rw c3\"><span class=\"nm\">SAVOY CABBAGE</span><span class=\"qt mn\">×3</span><span class=\"wt mn\">2.7 KG</span><span class=\"up2\">£1.78 / KG</span></div>\n<div class=\"rw c4\"><span class=\"nm\">LEEK</span><span class=\"qt mn\">×6</span><span class=\"wt mn\">3.0 KG</span><span class=\"up2\">£2.80 / KG</span></div>\n<div class=\"rw c5\"><span class=\"nm\">CHICORY</span><span class=\"qt mn\">×6</span><span class=\"wt mn\">1.5 KG</span><span class=\"up2\">£7.80 / KG</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"sum\" aria-label=\"Weight summary\">\n<aside class=\"sm\"><span class=\"k\">This drop</span><p class=\"big\">14.2<small>KG</small></p><div class=\"kv\"><span>CRATES</span><b class=\"mn\">6</b></div><div class=\"kv\"><span>VALUE</span><b class=\"mn\">£38.40</b></div><div class=\"kv\"><span>EMPTIES BACK</span><b class=\"mn\">4</b></div><button class=\"bp\">MARK DELIVERED</button></aside></section>\n</div>",
  "css": "\n.dz-greengrocer-round { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 260px 1fr 260px; grid-template-rows: auto 1fr; min-height: 600px; }\n.dz-greengrocer-round .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-round .mn { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; }\n.dz-greengrocer-round .tp { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; height: 52px; padding: 0 20px; border-bottom: 2px solid var(--border); background: var(--card); }\n.dz-greengrocer-round .lg { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 24px; }\n.dz-greengrocer-round .tp nav { display: flex; gap: 16px; }\n.dz-greengrocer-round .tp a { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; }\n.dz-greengrocer-round .tp a.on { color: var(--primary); border-bottom: 3px solid var(--primary); }\n.dz-greengrocer-round .dv { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-left: auto; font-size: 11.5px; }\n.dz-greengrocer-round .rl { border-right: 2px solid var(--border); padding: 18px 14px; }\n.dz-greengrocer-round .rl ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-greengrocer-round .rl a { display: flex; padding: 9px 8px; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--foreground); text-decoration: none; }\n.dz-greengrocer-round .rl li.on a { background: var(--primary); color: var(--primary-foreground); }\n.dz-greengrocer-round .rl b { margin-left: auto; font-weight: 700; }\n.dz-greengrocer-round .dp { padding: 18px 20px; }\n.dz-greengrocer-round .dh { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); margin-bottom: 4px; }\n.dz-greengrocer-round h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; margin: 0; }\n.dz-greengrocer-round .dh .mn { color: var(--muted-foreground); }\n.dz-greengrocer-round .rw { display: grid; grid-template-columns: 1fr 60px 90px 120px; gap: 16px; align-items: center; height: 52px; border-bottom: 2px solid var(--border); border-left: 6px solid var(--accent); padding-left: 12px; }\n.dz-greengrocer-round .c2 { border-left-color: var(--primary); }\n.dz-greengrocer-round .c3 { border-left-color: var(--chart-3); }\n.dz-greengrocer-round .c4 { border-left-color: var(--chart-4); }\n.dz-greengrocer-round .c5 { border-left-color: var(--chart-5); }\n.dz-greengrocer-round .nm { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 16px; }\n.dz-greengrocer-round .qt, .dz-greengrocer-round .wt { color: var(--muted-foreground); }\n.dz-greengrocer-round .up2 { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; justify-self: start; }\n.dz-greengrocer-round .sm { border-left: 2px solid var(--border); padding: 18px 16px; }\n.dz-greengrocer-round .big { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 56px; line-height: 1; margin: 10px 0 16px; }\n.dz-greengrocer-round .big small { font-size: 20px; margin-left: 4px; }\n.dz-greengrocer-round .kv { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 2px solid var(--border); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; }\n.dz-greengrocer-round .kv b { color: var(--foreground); }\n.dz-greengrocer-round .bp { width: 100%; margin-top: 18px; 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@media (prefers-reduced-motion: reduce) { .dz-greengrocer-round *, .dz-greengrocer-round *::before, .dz-greengrocer-round *::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"
}