{
  "id": "invitation-rsvp",
  "name": "RSVP",
  "theme": "invitation",
  "category": "Settings & Forms",
  "description": "The reply flow as a stack of cards with one question per card, advanced by turning rather than by scrolling a long form.",
  "layout": "Three 5:7 cards shown as a stack in progress; each holds exactly one question and two large buttons, with the mono code at the foot of every card.",
  "modules": [
    {
      "key": "q1",
      "name": "Question one",
      "html": "\n<article class=\"cd done\"><div class=\"in\"><span class=\"k\">Question one of four</span><h2>Will you be there?</h2><div class=\"ans\"><button class=\"pri\">Yes, gladly</button><button class=\"gh\">Sadly not</button></div><span class=\"ans-given mn\">ANSWERED · YES</span><p class=\"cod mn\">KQ-4482</p></div></article>"
    },
    {
      "key": "q2",
      "name": "Question two",
      "html": "\n<article class=\"cd\"><div class=\"in\"><span class=\"k\">Question two of four</span><h2>How many of you?</h2><div class=\"stp\"><button>−</button><span class=\"n\">2</span><button>+</button></div><p class=\"hint\">We have you down for two. If that is wrong, change it here rather than telling us on the day.</p><p class=\"cod mn\">KQ-4482</p></div></article>"
    },
    {
      "key": "q3",
      "name": "Question three",
      "html": "\n<article class=\"cd next\"><div class=\"in\"><span class=\"k\">Question three of four</span><h2>Anything we should know about food?</h2><p class=\"hint\">One line is plenty. It goes straight to the kitchen and nowhere else.</p><input placeholder=\"One line\"><p class=\"cod mn\">KQ-4482</p></div></article>"
    },
    {
      "key": "prog",
      "name": "Progress note",
      "html": "\n<aside class=\"nt\"><span class=\"k\">Four cards, not one form</span><p>There is no long RSVP form in this system. Each question is a card and you turn to the next one; the whole reply is four turns and takes about twenty seconds.</p><div class=\"dots\"><span class=\"dot on\"></span><span class=\"dot on\"></span><span class=\"dot\"></span><span class=\"dot\"></span></div></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "invitation-rsvp",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:39:45+09:00",
    "updatedAt": "2026-09-02T01:39:45+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/invitation-rsvp.json",
  "structure": "Three 5:7 cards shown as a stack in progress; each holds exactly one question and two large buttons, with the mono code at the foot of every card.",
  "html": "<div class=\"dz dz-invitation-rsvp\" data-design=\"invitation-rsvp\" data-theme=\"invitation\">\n<section class=\"dz-mod\" data-mod=\"q1\" aria-label=\"Question one\">\n<article class=\"cd done\"><div class=\"in\"><span class=\"k\">Question one of four</span><h2>Will you be there?</h2><div class=\"ans\"><button class=\"pri\">Yes, gladly</button><button class=\"gh\">Sadly not</button></div><span class=\"ans-given mn\">ANSWERED · YES</span><p class=\"cod mn\">KQ-4482</p></div></article></section>\n<section class=\"dz-mod\" data-mod=\"q2\" aria-label=\"Question two\">\n<article class=\"cd\"><div class=\"in\"><span class=\"k\">Question two of four</span><h2>How many of you?</h2><div class=\"stp\"><button>−</button><span class=\"n\">2</span><button>+</button></div><p class=\"hint\">We have you down for two. If that is wrong, change it here rather than telling us on the day.</p><p class=\"cod mn\">KQ-4482</p></div></article></section>\n<section class=\"dz-mod\" data-mod=\"q3\" aria-label=\"Question three\">\n<article class=\"cd next\"><div class=\"in\"><span class=\"k\">Question three of four</span><h2>Anything we should know about food?</h2><p class=\"hint\">One line is plenty. It goes straight to the kitchen and nowhere else.</p><input placeholder=\"One line\"><p class=\"cod mn\">KQ-4482</p></div></article></section>\n<section class=\"dz-mod\" data-mod=\"prog\" aria-label=\"Progress note\">\n<aside class=\"nt\"><span class=\"k\">Four cards, not one form</span><p>There is no long RSVP form in this system. Each question is a card and you turn to the next one; the whole reply is four turns and takes about twenty seconds.</p><div class=\"dots\"><span class=\"dot on\"></span><span class=\"dot on\"></span><span class=\"dot\"></span><span class=\"dot\"></span></div></aside></section>\n</div>",
  "css": "\n.dz-invitation-rsvp { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 32px; display: grid; grid-template-columns: repeat(3, 260px) 1fr; gap: 24px; align-items: start; }\n\n.dz-invitation-rsvp .cd { position: relative; aspect-ratio: 5 / 7; background: var(--card); border: 1px solid var(--border); border-radius: 2px; box-shadow: 0 14px 32px -22px color-mix(in oklab, var(--foreground) 70%, transparent); }\n.dz-invitation-rsvp .cd::before { content: \"\"; position: absolute; inset: 24px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-rsvp .in { position: absolute; inset: 24px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }\n.dz-invitation-rsvp .cd .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-rsvp .seal { position: absolute; top: -12px; right: 28px; width: 56px; height: 56px; border-radius: 9999px; background: var(--accent); color: var(--accent-foreground); display: grid; place-items: center; font-family: var(--pv-display); font-weight: 400; font-size: 22px; }\n.dz-invitation-rsvp .done { opacity: .55; }\n.dz-invitation-rsvp .next { border-color: var(--primary); }\n.dz-invitation-rsvp h2 { font-family: var(--pv-display); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 16px 0 auto; }\n.dz-invitation-rsvp .ans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }\n.dz-invitation-rsvp button { border-radius: 2px; padding: 11px; font: inherit; font-size: 14px; cursor: pointer; }\n.dz-invitation-rsvp .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-invitation-rsvp .gh { background: transparent; color: var(--primary); border: 1px solid var(--primary); }\n.dz-invitation-rsvp .ans-given { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }\n.dz-invitation-rsvp .stp { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }\n.dz-invitation-rsvp .stp button { width: 36px; height: 36px; background: var(--secondary); color: var(--foreground); border: 1px solid var(--border); font-size: 17px; }\n.dz-invitation-rsvp .n { font-family: var(--pv-display); font-weight: 400; font-size: 52px; line-height: 1; }\n.dz-invitation-rsvp .hint { font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 12px; }\n.dz-invitation-rsvp input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--foreground); font: inherit; font-size: 15px; padding: 8px 0; }\n.dz-invitation-rsvp input:focus { outline: none; border-bottom-color: var(--primary); }\n.dz-invitation-rsvp .cod { margin-top: auto; color: var(--muted-foreground); }\n.dz-invitation-rsvp .nt .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-invitation-rsvp .nt p { font-size: 14.5px; line-height: 1.62; margin: 0 0 16px; color: var(--muted-foreground); max-width: 52ch; }\n.dz-invitation-rsvp .dots { display: flex; gap: 8px; }\n.dz-invitation-rsvp .dot { width: 10px; height: 10px; border-radius: 9999px; border: 1px solid var(--border); display: block; }\n.dz-invitation-rsvp .dot.on { background: var(--accent); border-color: var(--accent); }\n@media (prefers-reduced-motion: reduce) { .dz-invitation-rsvp *, .dz-invitation-rsvp *::before, .dz-invitation-rsvp *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/invitation.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Yeseva+One:wght@400;500;600;700&family=Readex+Pro:wght@400;500;600;700&family=Nova+Mono:wght@400;500;600;700&display=swap"
}