{
  "id": "apricot-press-scale",
  "name": "Scaling Settings",
  "theme": "apricot-press",
  "category": "Settings & Forms",
  "description": "A settings page for how recipes are rendered, where each choice immediately rewrites a sample step rather than describing what it would do.",
  "layout": "A 1fr/380px split: settings on the left, and a persistently visible sample step on the right that reflects every choice as it is made.",
  "modules": [
    {
      "key": "head",
      "name": "Settings head",
      "html": "\n<header class=\"sh\"><span class=\"k\">Preferences</span><h1>How recipes are written for you</h1><p>These change how every recipe on the site is rendered. They do not change the recipe.</p></header>"
    },
    {
      "key": "form",
      "name": "Setting groups",
      "html": "\n<form class=\"sf\">\n  <fieldset><legend>Measurement</legend>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\" checked><div><b>Weight, metric</b><span>Grams and millilitres. What the recipes were tested in.</span></div></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\"><div><b>Volume, US</b><span>Cups and spoons. Converted, and the conversion is lossy for flour.</span></div></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\"><div><b>Both</b><span>Metric first, volume in brackets. Makes the ingredient card longer.</span></div></label>\n  </fieldset>\n  <fieldset><legend>Scaling</legend>\n    <label><span class=\"k\">Default serving size</span><select><option>As written</option><option>×1.5</option><option>×2</option><option>Halve</option></select></label>\n    <label class=\"chk\"><input type=\"checkbox\" checked> Warn me when a step changes at this scale</label>\n    <label class=\"chk\"><input type=\"checkbox\" checked> Round scaled quantities to something a kitchen can measure</label>\n  </fieldset>\n  <fieldset><legend>Temperature</legend>\n    <label><span class=\"k\">Oven</span><select><option>Celsius, fan</option><option>Celsius, conventional</option><option>Fahrenheit</option><option>Gas mark</option></select></label>\n  </fieldset>\n</form>"
    },
    {
      "key": "sample",
      "name": "Live sample",
      "html": "\n<aside class=\"sm\"><h2>A step, as you will see it</h2>\n<div class=\"step\"><span class=\"no n\">3</span><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.</p></div>\n<div class=\"step\"><span class=\"no n\">2</span><p>Cover with cold water by <b class=\"n\">5 cm</b>, bring to a bare simmer and hold for <b class=\"n\">70 to 90 minutes</b>.</p><p class=\"as\"><span class=\"al\">At ×2</span>Use two pans rather than one. A single deep pan cooks the bottom layer to pulp before the top is done.</p></div>\n<p class=\"fn\">The scaling warning above appears because this recipe genuinely changes method when doubled. Most do not.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "apricot-press-scale",
    "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-scale.json",
  "structure": "A 1fr/380px split: settings on the left, and a persistently visible sample step on the right that reflects every choice as it is made.",
  "html": "<div class=\"dz dz-apricot-press-scale\" data-design=\"apricot-press-scale\" data-theme=\"apricot-press\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Settings head\">\n<header class=\"sh\"><span class=\"k\">Preferences</span><h1>How recipes are written for you</h1><p>These change how every recipe on the site is rendered. They do not change the recipe.</p></header></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Setting groups\">\n<form class=\"sf\">\n  <fieldset><legend>Measurement</legend>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\" checked><div><b>Weight, metric</b><span>Grams and millilitres. What the recipes were tested in.</span></div></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\"><div><b>Volume, US</b><span>Cups and spoons. Converted, and the conversion is lossy for flour.</span></div></label>\n    <label class=\"rd\"><input type=\"radio\" name=\"ms\"><div><b>Both</b><span>Metric first, volume in brackets. Makes the ingredient card longer.</span></div></label>\n  </fieldset>\n  <fieldset><legend>Scaling</legend>\n    <label><span class=\"k\">Default serving size</span><select><option>As written</option><option>×1.5</option><option>×2</option><option>Halve</option></select></label>\n    <label class=\"chk\"><input type=\"checkbox\" checked> Warn me when a step changes at this scale</label>\n    <label class=\"chk\"><input type=\"checkbox\" checked> Round scaled quantities to something a kitchen can measure</label>\n  </fieldset>\n  <fieldset><legend>Temperature</legend>\n    <label><span class=\"k\">Oven</span><select><option>Celsius, fan</option><option>Celsius, conventional</option><option>Fahrenheit</option><option>Gas mark</option></select></label>\n  </fieldset>\n</form></section><section class=\"dz-mod\" data-mod=\"sample\" aria-label=\"Live sample\">\n<aside class=\"sm\"><h2>A step, as you will see it</h2>\n<div class=\"step\"><span class=\"no n\">3</span><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.</p></div>\n<div class=\"step\"><span class=\"no n\">2</span><p>Cover with cold water by <b class=\"n\">5 cm</b>, bring to a bare simmer and hold for <b class=\"n\">70 to 90 minutes</b>.</p><p class=\"as\"><span class=\"al\">At ×2</span>Use two pans rather than one. A single deep pan cooks the bottom layer to pulp before the top is done.</p></div>\n<p class=\"fn\">The scaling warning above appears because this recipe genuinely changes method when doubled. Most do not.</p></aside></section></div>\n</div>",
  "css": "\n.dz-apricot-press-scale { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px; max-width: 1080px; margin: 0 auto; }\n.dz-apricot-press-scale .k { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-apricot-press-scale .n { font-family: var(--pv-mono); font-size: 13.5px; }\n.dz-apricot-press-scale .sh { padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }\n.dz-apricot-press-scale h1 { font-family: var(--pv-display); font-weight: 400; font-size: 42px; margin: 6px 0 10px; letter-spacing: -.02em; }\n.dz-apricot-press-scale .sh p { margin: 0; font-size: 15px; color: var(--muted-foreground); line-height: 1.7; }\n.dz-apricot-press-scale .cols { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }\n.dz-apricot-press-scale fieldset { border: 0; margin: 0 0 26px; padding: 0; }\n.dz-apricot-press-scale legend { font-family: var(--pv-display); font-weight: 400; font-size: 20px; padding: 0 0 12px; }\n.dz-apricot-press-scale .rd { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }\n.dz-apricot-press-scale .rd b { display: block; font-size: 15px; }\n.dz-apricot-press-scale .rd span { font-size: 13px; color: var(--muted-foreground); }\n.dz-apricot-press-scale label:not(.rd):not(.chk) { display: block; margin-bottom: 14px; }\n.dz-apricot-press-scale select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 14.5px; padding: 11px 13px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-md); color: var(--foreground); }\n.dz-apricot-press-scale .chk { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 8px 0; }\n.dz-apricot-press-scale .sm { background: var(--card); border-radius: var(--pv-radius-lg); padding: 24px; position: sticky; top: 20px; }\n.dz-apricot-press-scale h2 { font-family: var(--pv-display); font-weight: 400; font-size: 20px; margin: 0 0 16px; }\n.dz-apricot-press-scale .step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }\n.dz-apricot-press-scale .no { color: var(--muted-foreground); font-size: 20px; text-align: right; }\n.dz-apricot-press-scale .step p { margin: 0 0 8px; font-size: 15px; line-height: 1.72; }\n.dz-apricot-press-scale .step b { font-weight: 400; }\n.dz-apricot-press-scale .as { color: var(--accent); font-size: 14px; grid-column: 2; }\n.dz-apricot-press-scale .al { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); color: var(--accent); display: block; }\n.dz-apricot-press-scale .fn { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }\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"
}