{
  "id": "invitation-card",
  "name": "The Invitation",
  "theme": "invitation",
  "category": "Landing",
  "description": "A 5:7 invitation with its printed bleed rule and a wax seal overlapping the top edge — the only element in the system allowed to cross a card boundary.",
  "layout": "Two cards side by side as a spread: the invitation and its reverse, both 5:7 with the 24px inset rule, and nothing scrolling inside either.",
  "modules": [
    {
      "key": "front",
      "name": "Card front",
      "html": "\n<article class=\"cd\"><span class=\"seal\">R</span><div class=\"in\"><span class=\"k\">You are invited</span><h1>Marguerite<br>&amp;<br>Rowan</h1><p class=\"dt\">Saturday the twenty-third of May<br>Two thousand and twenty-six</p><p class=\"pl\">Kilcarn Lane · four o'clock</p><span class=\"k ft\">Carriages at midnight</span></div></article>"
    },
    {
      "key": "back",
      "name": "Card reverse",
      "html": "\n<article class=\"cd\"><div class=\"in\"><span class=\"k\">The other side</span><h2>Getting there</h2><p>The lane is unmade for the last three hundred yards. It is fine in a car and a nuisance in heels; there is a gravel path along the hedge for that reason.</p><h2>Staying</h2><p>Six rooms at the Kilcarn Arms are held under our name until the tenth of April. After that they go back to the pub.</p><p class=\"cod mn\">RSVP CODE · KQ-4482</p></div></article>"
    },
    {
      "key": "note",
      "name": "Spread note",
      "html": "\n<aside class=\"nt\"><span class=\"k\">Why two cards</span><p>Nothing scrolls inside a card in this system. When the content did not fit the invitation, a second card was issued rather than the first one growing — which is the discipline printed stationery imposes and which screens usually remove.</p><p>The seal is the only thing on this page that crosses a card edge. Everything else stays inside the bleed rule, including the photographs.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "invitation-card",
    "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-card.json",
  "structure": "Two cards side by side as a spread: the invitation and its reverse, both 5:7 with the 24px inset rule, and nothing scrolling inside either.",
  "html": "<div class=\"dz dz-invitation-card\" data-design=\"invitation-card\" data-theme=\"invitation\">\n<section class=\"dz-mod\" data-mod=\"front\" aria-label=\"Card front\">\n<article class=\"cd\"><span class=\"seal\">R</span><div class=\"in\"><span class=\"k\">You are invited</span><h1>Marguerite<br>&amp;<br>Rowan</h1><p class=\"dt\">Saturday the twenty-third of May<br>Two thousand and twenty-six</p><p class=\"pl\">Kilcarn Lane · four o'clock</p><span class=\"k ft\">Carriages at midnight</span></div></article></section>\n<section class=\"dz-mod\" data-mod=\"back\" aria-label=\"Card reverse\">\n<article class=\"cd\"><div class=\"in\"><span class=\"k\">The other side</span><h2>Getting there</h2><p>The lane is unmade for the last three hundred yards. It is fine in a car and a nuisance in heels; there is a gravel path along the hedge for that reason.</p><h2>Staying</h2><p>Six rooms at the Kilcarn Arms are held under our name until the tenth of April. After that they go back to the pub.</p><p class=\"cod mn\">RSVP CODE · KQ-4482</p></div></article></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Spread note\">\n<aside class=\"nt\"><span class=\"k\">Why two cards</span><p>Nothing scrolls inside a card in this system. When the content did not fit the invitation, a second card was issued rather than the first one growing — which is the discipline printed stationery imposes and which screens usually remove.</p><p>The seal is the only thing on this page that crosses a card edge. Everything else stays inside the bleed rule, including the photographs.</p></aside></section>\n</div>",
  "css": "\n.dz-invitation-card { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 32px; display: grid; grid-template-columns: 320px 320px 1fr; gap: 32px; align-items: start; }\n\n.dz-invitation-card .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-card .cd::before { content: \"\"; position: absolute; inset: 24px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-card .in { position: absolute; inset: 24px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }\n.dz-invitation-card .cd .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-card .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-card h1 { font-family: var(--pv-display); font-weight: 400; font-size: 44px; line-height: 1.12; margin: 18px 0 auto; letter-spacing: -.01em; }\n.dz-invitation-card h2 { font-family: var(--pv-display); font-weight: 400; font-size: 22px; margin: 16px 0 6px; }\n.dz-invitation-card .dt { font-family: var(--pv-display); font-weight: 400; font-size: 17px; line-height: 1.5; margin: 0 0 10px; }\n.dz-invitation-card .pl { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; color: var(--muted-foreground); margin: 0 0 auto; }\n.dz-invitation-card .ft { margin-top: auto; }\n.dz-invitation-card .cd p { font-size: 14.5px; line-height: 1.62; margin: 0 0 10px; }\n.dz-invitation-card .cod { margin-top: auto; color: var(--accent); }\n.dz-invitation-card .nt { padding-top: 8px; }\n.dz-invitation-card .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-card .nt p { font-size: 14.5px; line-height: 1.62; margin: 0 0 12px; color: var(--muted-foreground); max-width: 52ch; }\n@media (prefers-reduced-motion: reduce) { .dz-invitation-card *, .dz-invitation-card *::before, .dz-invitation-card *::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"
}