{
  "id": "airmail-desk-invite",
  "name": "Invitation",
  "theme": "airmail-desk",
  "category": "Auth & Onboarding",
  "description": "An invitation acceptance screen presented as a physical card, where the reply form is on the reverse rather than in a modal.",
  "layout": "A centred envelope panel with the airmail stripe on all four edges, the invitation on the face and the reply fields beneath a perforation-weight rule.",
  "modules": [
    {
      "key": "card",
      "name": "Invitation card",
      "html": "\n<section class=\"iv\"><span class=\"sm\"></span>\n<div class=\"ab\"><span>From The Kilcarn Society</span><span>To K. Oyelaran</span><span>Reference KS-2026-041</span></div>\n<h1>The Summer Meeting</h1>\n<p class=\"dt\">Saturday 27 June · 14:00 · Kilcarn Hall</p>\n<p class=\"bd\">A talk on the Ferreira exchange, followed by tea and the annual argument about the accession backlog. Members may bring one guest without notice.</p>\n<p class=\"rsvp\">Please reply by the 20th.</p></section>"
    },
    {
      "key": "reply",
      "name": "Reply form",
      "html": "\n<section class=\"rf\"><span class=\"k\">Your reply</span>\n<div class=\"opts\">\n  <label class=\"on\"><input type=\"radio\" name=\"r\" checked><span>Attending</span></label>\n  <label><input type=\"radio\" name=\"r\"><span>Attending with a guest</span></label>\n  <label><input type=\"radio\" name=\"r\"><span>Unable to attend</span></label>\n</div>\n<label><span class=\"k\">Anything we should know</span><input type=\"text\" placeholder=\"Access, dietary, arriving late\"></label>\n<button type=\"button\" class=\"pri\">Send reply</button></section>"
    },
    {
      "key": "note",
      "name": "Practical note",
      "html": "\n<footer class=\"pn\"><span class=\"k\">Getting there</span><p>Kilcarn Hall is step-free from the Beckton Way entrance only; the front steps have no handrail. Parking is on the road and is free on Saturdays. The 41 bus stops outside.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "airmail-desk-invite",
    "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-invite.json",
  "structure": "A centred envelope panel with the airmail stripe on all four edges, the invitation on the face and the reply fields beneath a perforation-weight rule.",
  "html": "<div class=\"dz dz-airmail-desk-invite\" data-design=\"airmail-desk-invite\" data-theme=\"airmail-desk\">\n<section class=\"dz-mod\" data-mod=\"card\" aria-label=\"Invitation card\">\n<section class=\"iv\"><span class=\"sm\"></span>\n<div class=\"ab\"><span>From The Kilcarn Society</span><span>To K. Oyelaran</span><span>Reference KS-2026-041</span></div>\n<h1>The Summer Meeting</h1>\n<p class=\"dt\">Saturday 27 June · 14:00 · Kilcarn Hall</p>\n<p class=\"bd\">A talk on the Ferreira exchange, followed by tea and the annual argument about the accession backlog. Members may bring one guest without notice.</p>\n<p class=\"rsvp\">Please reply by the 20th.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"reply\" aria-label=\"Reply form\">\n<section class=\"rf\"><span class=\"k\">Your reply</span>\n<div class=\"opts\">\n  <label class=\"on\"><input type=\"radio\" name=\"r\" checked><span>Attending</span></label>\n  <label><input type=\"radio\" name=\"r\"><span>Attending with a guest</span></label>\n  <label><input type=\"radio\" name=\"r\"><span>Unable to attend</span></label>\n</div>\n<label><span class=\"k\">Anything we should know</span><input type=\"text\" placeholder=\"Access, dietary, arriving late\"></label>\n<button type=\"button\" class=\"pri\">Send reply</button></section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Practical note\">\n<footer class=\"pn\"><span class=\"k\">Getting there</span><p>Kilcarn Hall is step-free from the Beckton Way entrance only; the front steps have no handrail. Parking is on the road and is free on Saturdays. The 41 bus stops outside.</p></footer></section>\n</div>",
  "css": "\n.dz-airmail-desk-invite { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px 26px; max-width: 620px; margin: 0 auto; }\n.dz-airmail-desk-invite .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-airmail-desk-invite .iv { position: relative; border: 1px solid var(--border); border-radius: var(--pv-radius-sm); padding: 26px; margin-bottom: 0; }\n.dz-airmail-desk-invite .iv::before { content: \"\"; position: absolute; inset: 0; padding: 8px; background: repeating-linear-gradient(45deg,\n  var(--primary) 0 8px, transparent 8px 16px, var(--accent) 16px 24px, transparent 24px 32px); -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }\n.dz-airmail-desk-invite .sm { position: absolute; right: 24px; top: 24px; width: 46px; height: 54px; border: 1px dashed var(--border); border-radius: 2px; }\n.dz-airmail-desk-invite .ab { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .03em; line-height: 1.42; color: var(--muted-foreground); display: grid; gap: 1px; margin-bottom: 16px; }\n.dz-airmail-desk-invite h1 { font-family: var(--pv-display); font-weight: 600; letter-spacing: -.01em; font-size: 34px; margin: 0 0 8px; }\n.dz-airmail-desk-invite .dt { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .03em; margin: 0 0 14px; }\n.dz-airmail-desk-invite .bd { margin: 0 0 14px; font-size: 15.5px; line-height: 1.66; max-width: 52ch; }\n.dz-airmail-desk-invite .rsvp { margin: 0; font-size: 14px; border-bottom: 2px solid var(--accent); padding-bottom: 1px; display: inline-block; }\n.dz-airmail-desk-invite .rf { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--pv-radius-sm) var(--pv-radius-sm); padding: 22px 26px; margin-bottom: 20px; }\n.dz-airmail-desk-invite .opts { display: grid; gap: 8px; margin: 10px 0 16px; }\n.dz-airmail-desk-invite .opts label { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: var(--pv-radius-sm); padding: 12px 14px; cursor: pointer; font-size: 14.5px; }\n.dz-airmail-desk-invite .opts label.on { border-color: var(--primary); }\n.dz-airmail-desk-invite label:not(.on) { display: block; }\n.dz-airmail-desk-invite input[type=text] { 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-invite .pri { margin-top: 16px; font: inherit; font-size: 14px; background: var(--primary); color: var(--primary-foreground); border: 0; padding: 12px 26px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-airmail-desk-invite .pn p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 62ch; }\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"
}