{
  "id": "airmail-desk-compose",
  "name": "Compose",
  "theme": "airmail-desk",
  "category": "Settings & Forms",
  "description": "A composer where the address block is filled in as a form and rendered as an actual address block above the body, so the letter is seen as it will arrive.",
  "layout": "An envelope-proportioned composer: address fields in the upper left, stamp square upper right, and the body filling the lower two-thirds.",
  "modules": [
    {
      "key": "head",
      "name": "Compose head",
      "html": "\n<header class=\"ch\"><h1>Write</h1><span class=\"k\">Draft saved 09:41</span></header>"
    },
    {
      "key": "envelope",
      "name": "Envelope composer",
      "html": "\n<section class=\"env\"><span class=\"sm\"><span class=\"k\">Stamp</span></span>\n<div class=\"fields\">\n  <label><span class=\"k\">From</span><input type=\"text\" value=\"K. Oyelaran, Kilcarn Herbarium\"></label>\n  <label><span class=\"k\">To</span><input type=\"text\" value=\"H. Vestergaard, Universitetet i Bergen\"></label>\n  <label><span class=\"k\">Reference</span><input type=\"text\" value=\"KO-2026-115\"></label>\n</div>\n<label class=\"sj\"><span class=\"k\">Subject</span><input type=\"text\" value=\"Re: The plate you asked about\"></label>\n<label class=\"bd\"><span class=\"k\">Letter</span><textarea rows=\"7\">Dear Hanne,\n\nPlease keep it. A sheet that has been in Bergen since 1988 with a Bergen number on the reverse is a Bergen sheet, whatever the 1974 label says, and moving it back would only create a second reconciliation problem to replace the first.\n\nImages would be very welcome.</textarea></label></section>"
    },
    {
      "key": "options",
      "name": "Send options",
      "html": "\n<section class=\"so\"><span class=\"k\">Before sending</span>\n<label class=\"chk\"><input type=\"checkbox\" checked> Attach the accession record for HB.09112</label>\n<label class=\"chk\"><input type=\"checkbox\" checked> Copy to the reconciliation file</label>\n<label class=\"chk\"><input type=\"checkbox\"> Request acknowledgement</label>\n<div class=\"two\"><label><span class=\"k\">Send</span><select><option>Now</option><option>At 08:00 tomorrow</option><option>Hold in drafts</option></select></label><label><span class=\"k\">Reply to</span><select><option>This correspondence</option><option>A new correspondence</option></select></label></div></section>"
    },
    {
      "key": "act",
      "name": "Send bar",
      "html": "\n<footer class=\"sb\"><button type=\"button\" class=\"pri\">Send</button><button type=\"button\" class=\"sec\">Save draft</button><span class=\"k\">Sent letters slide out through the top of the page. Nothing is recalled.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "airmail-desk-compose",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:08:33+09:00",
    "updatedAt": "2026-09-02T00:08:33+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/airmail-desk-compose.json",
  "structure": "An envelope-proportioned composer: address fields in the upper left, stamp square upper right, and the body filling the lower two-thirds.",
  "html": "<div class=\"dz dz-airmail-desk-compose\" data-design=\"airmail-desk-compose\" data-theme=\"airmail-desk\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Compose head\">\n<header class=\"ch\"><h1>Write</h1><span class=\"k\">Draft saved 09:41</span></header></section>\n<section class=\"dz-mod\" data-mod=\"envelope\" aria-label=\"Envelope composer\">\n<section class=\"env\"><span class=\"sm\"><span class=\"k\">Stamp</span></span>\n<div class=\"fields\">\n  <label><span class=\"k\">From</span><input type=\"text\" value=\"K. Oyelaran, Kilcarn Herbarium\"></label>\n  <label><span class=\"k\">To</span><input type=\"text\" value=\"H. Vestergaard, Universitetet i Bergen\"></label>\n  <label><span class=\"k\">Reference</span><input type=\"text\" value=\"KO-2026-115\"></label>\n</div>\n<label class=\"sj\"><span class=\"k\">Subject</span><input type=\"text\" value=\"Re: The plate you asked about\"></label>\n<label class=\"bd\"><span class=\"k\">Letter</span><textarea rows=\"7\">Dear Hanne,\n\nPlease keep it. A sheet that has been in Bergen since 1988 with a Bergen number on the reverse is a Bergen sheet, whatever the 1974 label says, and moving it back would only create a second reconciliation problem to replace the first.\n\nImages would be very welcome.</textarea></label></section></section>\n<section class=\"dz-mod\" data-mod=\"options\" aria-label=\"Send options\">\n<section class=\"so\"><span class=\"k\">Before sending</span>\n<label class=\"chk\"><input type=\"checkbox\" checked> Attach the accession record for HB.09112</label>\n<label class=\"chk\"><input type=\"checkbox\" checked> Copy to the reconciliation file</label>\n<label class=\"chk\"><input type=\"checkbox\"> Request acknowledgement</label>\n<div class=\"two\"><label><span class=\"k\">Send</span><select><option>Now</option><option>At 08:00 tomorrow</option><option>Hold in drafts</option></select></label><label><span class=\"k\">Reply to</span><select><option>This correspondence</option><option>A new correspondence</option></select></label></div></section></section>\n<section class=\"dz-mod\" data-mod=\"act\" aria-label=\"Send bar\">\n<footer class=\"sb\"><button type=\"button\" class=\"pri\">Send</button><button type=\"button\" class=\"sec\">Save draft</button><span class=\"k\">Sent letters slide out through the top of the page. Nothing is recalled.</span></footer></section>\n</div>",
  "css": "\n.dz-airmail-desk-compose { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px; max-width: 820px; margin: 0 auto; }\n.dz-airmail-desk-compose .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-airmail-desk-compose .ch { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }\n.dz-airmail-desk-compose h1 { font-family: var(--pv-display); font-weight: 600; letter-spacing: -.01em; font-size: 29px; margin: 0; }\n.dz-airmail-desk-compose .env { position: relative; border: 1px solid var(--border); border-radius: var(--pv-radius-sm); padding: 22px; margin-bottom: 20px; }\n.dz-airmail-desk-compose .env::before { content: \"\"; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(45deg,\n  var(--primary) 0 8px, transparent 8px 16px, var(--accent) 16px 24px, transparent 24px 32px); }\n.dz-airmail-desk-compose .sm { position: absolute; right: 22px; top: 30px; width: 62px; height: 72px; border: 1px dashed var(--border); border-radius: 2px; display: grid; place-items: center; }\n.dz-airmail-desk-compose .fields { display: grid; gap: 10px; max-width: 66%; margin: 12px 0 16px; }\n.dz-airmail-desk-compose label { display: block; }\n.dz-airmail-desk-compose input, .dz-airmail-desk-compose select, .dz-airmail-desk-compose textarea { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); }\n.dz-airmail-desk-compose .fields input { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .03em; }\n.dz-airmail-desk-compose .sj { margin-bottom: 16px; }\n.dz-airmail-desk-compose textarea { line-height: 1.62; resize: vertical; font-size: 15px; }\n.dz-airmail-desk-compose .so { border: 1px solid var(--border); border-radius: var(--pv-radius-sm); padding: 20px; margin-bottom: 18px; }\n.dz-airmail-desk-compose .chk { display: flex; gap: 10px; align-items: center; font-size: 13.5px; padding: 7px 0; }\n.dz-airmail-desk-compose .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }\n.dz-airmail-desk-compose .sb { display: flex; gap: 12px; align-items: center; }\n.dz-airmail-desk-compose button { font: inherit; font-size: 13.5px; padding: 12px 24px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-airmail-desk-compose .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-airmail-desk-compose .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-airmail-desk-compose .sb .k { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; }\n",
  "requiredTheme": "/api/v1/themes/airmail-desk.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700&family=Urbanist:wght@400;500;600;700&family=Kode+Mono:wght@400;500;600;700&display=swap"
}