{
  "id": "invitation-guests",
  "name": "Guest Count",
  "theme": "invitation",
  "category": "Profile & Social",
  "description": "The host’s view where the guest count is the largest numeral on the screen, set in Yeseva One, with replies as a wall of small 5:7 cards.",
  "layout": "A count card at 5:7 holding one enormous numeral, beside a grid of small reply cards each carrying one guest and their answer.",
  "modules": [
    {
      "key": "count",
      "name": "Count card",
      "html": "\n<article class=\"cd big\"><span class=\"seal\">86</span><div class=\"in\"><span class=\"k\">Replied yes</span><p class=\"num\">86</p><span class=\"k\">of 124 invited</span><div class=\"brk\"><div><span class=\"k\">No</span><b>12</b></div><div><span class=\"k\">Waiting</span><b>26</b></div><div><span class=\"k\">Dietary</span><b>9</b></div></div></div></article>"
    },
    {
      "key": "replies",
      "name": "Reply cards",
      "html": "\n<section class=\"gd\">\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">Marta Reyes</p><p class=\"dc mn\">KQ-4482</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">Teodor Vance</p><p class=\"dc mn\">KQ-4491</p></article>\n<article class=\"mini no\"><span class=\"k\">No</span><p class=\"nm\">Nuala Rennick</p><p class=\"dc mn\">KQ-4503</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 4</span><p class=\"nm\">The Nkemdirims</p><p class=\"dc mn\">KQ-4511</p></article>\n<article class=\"mini wait\"><span class=\"k\">Waiting</span><p class=\"nm\">Iona Marek</p><p class=\"dc mn\">KQ-4520</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 1</span><p class=\"nm\">A. Bekele</p><p class=\"dc mn\">KQ-4528</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">H. Aldwyn</p><p class=\"dc mn\">KQ-4534</p></article>\n<article class=\"mini wait\"><span class=\"k\">Waiting</span><p class=\"nm\">M. Devlin</p><p class=\"dc mn\">KQ-4541</p></article>\n</section>"
    },
    {
      "key": "chase",
      "name": "Chase bar",
      "html": "\n<footer class=\"ch\"><span class=\"k\">Twenty-six have not replied</span><p>The deadline is the tenth of April. We will send one reminder on the third and one on the ninth, and then nothing.</p><button class=\"pri\">Send the first reminder</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "invitation-guests",
    "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-guests.json",
  "structure": "A count card at 5:7 holding one enormous numeral, beside a grid of small reply cards each carrying one guest and their answer.",
  "html": "<div class=\"dz dz-invitation-guests\" data-design=\"invitation-guests\" data-theme=\"invitation\">\n<section class=\"dz-mod\" data-mod=\"count\" aria-label=\"Count card\">\n<article class=\"cd big\"><span class=\"seal\">86</span><div class=\"in\"><span class=\"k\">Replied yes</span><p class=\"num\">86</p><span class=\"k\">of 124 invited</span><div class=\"brk\"><div><span class=\"k\">No</span><b>12</b></div><div><span class=\"k\">Waiting</span><b>26</b></div><div><span class=\"k\">Dietary</span><b>9</b></div></div></div></article></section>\n<section class=\"dz-mod\" data-mod=\"replies\" aria-label=\"Reply cards\">\n<section class=\"gd\">\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">Marta Reyes</p><p class=\"dc mn\">KQ-4482</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">Teodor Vance</p><p class=\"dc mn\">KQ-4491</p></article>\n<article class=\"mini no\"><span class=\"k\">No</span><p class=\"nm\">Nuala Rennick</p><p class=\"dc mn\">KQ-4503</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 4</span><p class=\"nm\">The Nkemdirims</p><p class=\"dc mn\">KQ-4511</p></article>\n<article class=\"mini wait\"><span class=\"k\">Waiting</span><p class=\"nm\">Iona Marek</p><p class=\"dc mn\">KQ-4520</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 1</span><p class=\"nm\">A. Bekele</p><p class=\"dc mn\">KQ-4528</p></article>\n<article class=\"mini yes\"><span class=\"k\">Yes · 2</span><p class=\"nm\">H. Aldwyn</p><p class=\"dc mn\">KQ-4534</p></article>\n<article class=\"mini wait\"><span class=\"k\">Waiting</span><p class=\"nm\">M. Devlin</p><p class=\"dc mn\">KQ-4541</p></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"chase\" aria-label=\"Chase bar\">\n<footer class=\"ch\"><span class=\"k\">Twenty-six have not replied</span><p>The deadline is the tenth of April. We will send one reminder on the third and one on the ninth, and then nothing.</p><button class=\"pri\">Send the first reminder</button></footer></section>\n</div>",
  "css": "\n.dz-invitation-guests { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 32px; display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }\n\n.dz-invitation-guests .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-guests .cd::before { content: \"\"; position: absolute; inset: 24px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-guests .in { position: absolute; inset: 24px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }\n.dz-invitation-guests .cd .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-guests .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-guests .num { font-family: var(--pv-display); font-weight: 400; font-size: 96px; line-height: 1; margin: 16px 0 6px; letter-spacing: -.02em; }\n.dz-invitation-guests .brk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }\n.dz-invitation-guests .brk b { font-family: var(--pv-display); font-weight: 400; font-size: 26px; display: block; margin-top: 2px; }\n.dz-invitation-guests .gd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }\n.dz-invitation-guests .mini { position: relative; aspect-ratio: 5 / 7; background: var(--card); border: 1px solid var(--border); border-radius: 2px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; }\n.dz-invitation-guests .mini::before { content: \"\"; position: absolute; inset: 10px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-guests .mini .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); position: relative; }\n.dz-invitation-guests .yes .k { color: var(--accent); }\n.dz-invitation-guests .no .k { color: var(--destructive); }\n.dz-invitation-guests .nm { font-family: var(--pv-display); font-weight: 400; font-size: 21px; line-height: 1.24; margin: 14px 0 auto; position: relative; }\n.dz-invitation-guests .dc { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; color: var(--muted-foreground); margin: 0; position: relative; }\n.dz-invitation-guests .ch { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-invitation-guests .ch .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); display: block; margin-bottom: 8px; }\n.dz-invitation-guests .ch p { font-size: 14.5px; line-height: 1.62; margin: 0 0 16px; color: var(--muted-foreground); max-width: 52ch; }\n.dz-invitation-guests .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 12px 22px; font: inherit; font-size: 14.5px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-invitation-guests *, .dz-invitation-guests *::before, .dz-invitation-guests *::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"
}