{
  "id": "apricot-press-recipe",
  "name": "Recipe Page",
  "theme": "apricot-press",
  "category": "Editorial",
  "description": "The signature page: ingredients hang in a filled card on the left, the method runs down the main column with its numbers in the gutter, and the yield line answers the first question anyone has.",
  "layout": "A 3/7 split at 1240px — filled ingredient card in columns 1–3, method in 4–10 with step numerals hanging outside the text block.",
  "modules": [
    {
      "key": "head",
      "name": "Recipe head",
      "html": "\n<header class=\"rh\"><span class=\"k\">Braises · February</span><h1>Beans, Chard and Burnt Butter</h1><p class=\"yl\"><span class=\"n\">Serves 4</span><span class=\"dot\">·</span><span class=\"n\">1 h 40 min</span><span class=\"dot\">·</span><span class=\"n\">20 min hands-on</span></p><p class=\"dk\">A pot of beans that gets its depth from browning the butter properly rather than from stock, which most versions of this lean on and which is why most versions taste like soup.</p><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></header>"
    },
    {
      "key": "ingredients",
      "name": "Ingredient card",
      "html": "\n<aside class=\"ic\"><h2>Ingredients</h2>\n<ul>\n  <li><span class=\"n\">400 g</span>dried cannellini, soaked overnight</li>\n  <li><span class=\"n\">1</span>onion, halved, skin on</li>\n  <li><span class=\"n\">2</span>bay leaves</li>\n  <li><span class=\"n\">80 g</span>butter</li>\n  <li><span class=\"n\">4</span>anchovy fillets</li>\n  <li><span class=\"n\">2</span>garlic cloves, sliced thin</li>\n  <li><span class=\"n\">300 g</span>chard, stems and leaves separated</li>\n  <li><span class=\"n\">1</span>lemon, zest and juice</li>\n  <li><span class=\"n\">—</span>salt, a lot more than you think</li>\n</ul>\n<p class=\"sub\">Substitution: borlotti work and take ten minutes less. Tinned beans do not work here and the reason is in step 2.</p></aside>"
    },
    {
      "key": "method",
      "name": "Method",
      "html": "\n<section class=\"mt\"><h2>Method</h2>\n<ol>\n  <li><p>Drain the beans, cover with cold water by <b class=\"n\">5 cm</b>, add the onion and bay, bring to a bare simmer and hold it there for <b class=\"n\">70 to 90 minutes</b>. Do not salt yet.</p></li>\n  <li><p>When a bean crushes easily against the roof of your mouth, salt the water heavily and let them sit off the heat for <b class=\"n\">20 minutes</b>. This is the step tinned beans skip, and it is where the seasoning gets inside them rather than sitting on the outside.</p><p class=\"as\"><span class=\"al\">Timing</span>The beans can sit in their liquid for a day at this point and will be better for it.</p></li>\n  <li><p>Melt the butter in a wide pan over medium heat and keep going past the foaming stage until the solids are the colour of a hazelnut, about <b class=\"n\">4 minutes</b>. Add the anchovy and garlic off the heat; they will cook in the residual warmth.</p></li>\n  <li><p>Add the chard stems with a splash of bean liquid, cook <b class=\"n\">5 minutes</b>, then the leaves for <b class=\"n\">2 minutes</b> more.</p></li>\n  <li><p>Fold the beans through with enough of their liquid to make it loose. Lemon zest, then juice, then salt again. Serve warm rather than hot.</p><p class=\"as\"><span class=\"al\">If it splits</span>Add a spoon of cold bean liquid and shake the pan; it will come back together.</p></li>\n</ol></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "apricot-press-recipe",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:03:15+09:00",
    "updatedAt": "2026-09-02T00:03:15+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/apricot-press-recipe.json",
  "structure": "A 3/7 split at 1240px — filled ingredient card in columns 1–3, method in 4–10 with step numerals hanging outside the text block.",
  "html": "<div class=\"dz dz-apricot-press-recipe\" data-design=\"apricot-press-recipe\" data-theme=\"apricot-press\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Recipe head\">\n<header class=\"rh\"><span class=\"k\">Braises · February</span><h1>Beans, Chard and Burnt Butter</h1><p class=\"yl\"><span class=\"n\">Serves 4</span><span class=\"dot\">·</span><span class=\"n\">1 h 40 min</span><span class=\"dot\">·</span><span class=\"n\">20 min hands-on</span></p><p class=\"dk\">A pot of beans that gets its depth from browning the butter properly rather than from stock, which most versions of this lean on and which is why most versions taste like soup.</p><img src=\"https://designlookbook.dev/assets/img/apricot-press-hero.webp\" alt=\"Ingredients laid out on an apricot surface\"></header></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"ingredients\" aria-label=\"Ingredient card\">\n<aside class=\"ic\"><h2>Ingredients</h2>\n<ul>\n  <li><span class=\"n\">400 g</span>dried cannellini, soaked overnight</li>\n  <li><span class=\"n\">1</span>onion, halved, skin on</li>\n  <li><span class=\"n\">2</span>bay leaves</li>\n  <li><span class=\"n\">80 g</span>butter</li>\n  <li><span class=\"n\">4</span>anchovy fillets</li>\n  <li><span class=\"n\">2</span>garlic cloves, sliced thin</li>\n  <li><span class=\"n\">300 g</span>chard, stems and leaves separated</li>\n  <li><span class=\"n\">1</span>lemon, zest and juice</li>\n  <li><span class=\"n\">—</span>salt, a lot more than you think</li>\n</ul>\n<p class=\"sub\">Substitution: borlotti work and take ten minutes less. Tinned beans do not work here and the reason is in step 2.</p></aside></section><section class=\"dz-mod\" data-mod=\"method\" aria-label=\"Method\">\n<section class=\"mt\"><h2>Method</h2>\n<ol>\n  <li><p>Drain the beans, cover with cold water by <b class=\"n\">5 cm</b>, add the onion and bay, bring to a bare simmer and hold it there for <b class=\"n\">70 to 90 minutes</b>. Do not salt yet.</p></li>\n  <li><p>When a bean crushes easily against the roof of your mouth, salt the water heavily and let them sit off the heat for <b class=\"n\">20 minutes</b>. This is the step tinned beans skip, and it is where the seasoning gets inside them rather than sitting on the outside.</p><p class=\"as\"><span class=\"al\">Timing</span>The beans can sit in their liquid for a day at this point and will be better for it.</p></li>\n  <li><p>Melt the butter in a wide pan over medium heat and keep going past the foaming stage until the solids are the colour of a hazelnut, about <b class=\"n\">4 minutes</b>. Add the anchovy and garlic off the heat; they will cook in the residual warmth.</p></li>\n  <li><p>Add the chard stems with a splash of bean liquid, cook <b class=\"n\">5 minutes</b>, then the leaves for <b class=\"n\">2 minutes</b> more.</p></li>\n  <li><p>Fold the beans through with enough of their liquid to make it loose. Lemon zest, then juice, then salt again. Serve warm rather than hot.</p><p class=\"as\"><span class=\"al\">If it splits</span>Add a spoon of cold bean liquid and shake the pan; it will come back together.</p></li>\n</ol></section></section></div>\n</div>",
  "css": "\n.dz-apricot-press-recipe { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px; max-width: 1240px; margin: 0 auto; }\n.dz-apricot-press-recipe .k { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-apricot-press-recipe .n { font-family: var(--pv-mono); font-size: 13.5px; }\n.dz-apricot-press-recipe h1 { font-family: var(--pv-display); font-weight: 400; font-size: 56px; line-height: 1.1; margin: 8px 0 12px; letter-spacing: -.02em; }\n.dz-apricot-press-recipe .yl { display: flex; gap: 12px; align-items: baseline; margin: 0 0 16px; }\n.dz-apricot-press-recipe .dot { color: var(--muted-foreground); }\n.dz-apricot-press-recipe .dk { font-size: 17px; line-height: 1.72; margin: 0 0 22px; max-width: 60ch; }\n.dz-apricot-press-recipe .rh img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--pv-radius-xl); display: block; filter: var(--img-filter); }\n.dz-apricot-press-recipe .cols { display: grid; grid-template-columns: 3fr 7fr; gap: 40px; margin-top: 30px; align-items: start; }\n.dz-apricot-press-recipe h2 { font-family: var(--pv-display); font-weight: 400; font-size: 20px; margin: 0 0 14px; }\n.dz-apricot-press-recipe .ic { background: var(--card); border-radius: var(--pv-radius-lg); padding: 22px; }\n.dz-apricot-press-recipe .ic ul { list-style: none; margin: 0 0 16px; padding: 0; }\n.dz-apricot-press-recipe .ic li { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; }\n.dz-apricot-press-recipe .ic .n { color: var(--muted-foreground); }\n.dz-apricot-press-recipe .sub { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }\n.dz-apricot-press-recipe .mt ol { list-style: none; counter-reset: s; margin: 0; padding: 0; }\n.dz-apricot-press-recipe .mt li { counter-increment: s; position: relative; padding: 0 0 28px 54px; }\n.dz-apricot-press-recipe .mt li::before { content: counter(s); position: absolute; left: 0; top: -2px; font-family: var(--pv-mono); font-size: 13.5px; font-size: 20px; color: var(--muted-foreground); width: 34px; text-align: right; }\n.dz-apricot-press-recipe .mt p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.72; max-width: 60ch; }\n.dz-apricot-press-recipe .mt b { font-weight: 400; }\n.dz-apricot-press-recipe .as { color: var(--accent); position: relative; padding-left: 0; font-size: 14.5px; }\n.dz-apricot-press-recipe .al { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); color: var(--accent); display: block; }\n@media (prefers-reduced-motion: reduce) { .dz-apricot-press-recipe *, .dz-apricot-press-recipe *::before, .dz-apricot-press-recipe *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/apricot-press.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bree+Serif:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700&family=Ubuntu+Mono:wght@400;500;600;700&display=swap"
}