{
  "id": "invitation-open",
  "name": "Open the Card",
  "theme": "invitation",
  "category": "Auth & Onboarding",
  "description": "Access by RSVP code, presented as a single card asking for one thing, with an envelope photograph sitting inside the bleed rule rather than behind it.",
  "layout": "One 5:7 card carrying the code field, beside a second card whose photograph sits inside its inset rule — never bleeding off the edge.",
  "modules": [
    {
      "key": "entry",
      "name": "Code card",
      "html": "\n<article class=\"cd\"><span class=\"seal\">R</span><div class=\"in\"><span class=\"k\">Kilcarn Lane · 23 May</span><h2>Your code is on the back of the card</h2><input class=\"mn\" value=\"KQ-4482\"><button class=\"pri\">Open</button><p class=\"hint\">Four letters and four numbers. It is on the reverse, under the directions, in the typewriter face.</p><span class=\"k ft\">One code, one household</span></div></article>"
    },
    {
      "key": "photo",
      "name": "Envelope card",
      "html": "\n<article class=\"cd\"><div class=\"in ph\"><img src=\"{{ART envelope}}\" alt=\"{{ARTALT envelope}}\"><p class=\"cap\">The card, as posted. The seal is real wax and it does come off in the post sometimes; the code is underneath it either way.</p></div></article>"
    },
    {
      "key": "help",
      "name": "Lost the card",
      "html": "\n<aside class=\"nt\"><span class=\"k\">If the card is lost</span><p>Tell us your name and we will look you up by hand. There are a hundred and twenty-four invitations and we know most of them by heart.</p><p class=\"mn\">marguerite.and.rowan@example · 087 555 0142</p><p class=\"sm\">This page is not indexed and the codes do not appear anywhere else. If you were not sent one you cannot guess one.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "invitation-open",
    "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-open.json",
  "structure": "One 5:7 card carrying the code field, beside a second card whose photograph sits inside its inset rule — never bleeding off the edge.",
  "html": "<div class=\"dz dz-invitation-open\" data-design=\"invitation-open\" data-theme=\"invitation\">\n<section class=\"dz-mod\" data-mod=\"entry\" aria-label=\"Code card\">\n<article class=\"cd\"><span class=\"seal\">R</span><div class=\"in\"><span class=\"k\">Kilcarn Lane · 23 May</span><h2>Your code is on the back of the card</h2><input class=\"mn\" value=\"KQ-4482\"><button class=\"pri\">Open</button><p class=\"hint\">Four letters and four numbers. It is on the reverse, under the directions, in the typewriter face.</p><span class=\"k ft\">One code, one household</span></div></article></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Envelope card\">\n<article class=\"cd\"><div class=\"in ph\"><img src=\"https://designlookbook.dev/assets/img/invitation-envelope.webp\" alt=\"A blush envelope with a violet wax seal\"><p class=\"cap\">The card, as posted. The seal is real wax and it does come off in the post sometimes; the code is underneath it either way.</p></div></article></section>\n<section class=\"dz-mod\" data-mod=\"help\" aria-label=\"Lost the card\">\n<aside class=\"nt\"><span class=\"k\">If the card is lost</span><p>Tell us your name and we will look you up by hand. There are a hundred and twenty-four invitations and we know most of them by heart.</p><p class=\"mn\">marguerite.and.rowan@example · 087 555 0142</p><p class=\"sm\">This page is not indexed and the codes do not appear anywhere else. If you were not sent one you cannot guess one.</p></aside></section>\n</div>",
  "css": "\n.dz-invitation-open { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 32px; display: grid; grid-template-columns: 300px 300px 1fr; gap: 32px; align-items: start; }\n\n.dz-invitation-open .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-open .cd::before { content: \"\"; position: absolute; inset: 24px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-open .in { position: absolute; inset: 24px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }\n.dz-invitation-open .cd .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-open .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-open h2 { font-family: var(--pv-display); font-weight: 400; font-size: 26px; line-height: 1.22; margin: 16px 0 18px; }\n.dz-invitation-open input { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; font-size: 22px; letter-spacing: .1em; padding: 8px 0; margin-bottom: 16px; text-align: center; }\n.dz-invitation-open input:focus { outline: none; border-bottom-color: var(--primary); }\n.dz-invitation-open .pri { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 12px; font: inherit; font-size: 14.5px; cursor: pointer; }\n.dz-invitation-open .hint { font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); margin: 14px 0 auto; }\n.dz-invitation-open .ft { margin-top: auto; }\n.dz-invitation-open .ph { padding: 0; }\n.dz-invitation-open .ph img { width: 100%; flex: 1; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-invitation-open .cap { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); margin: 10px 0 0; padding: 0 4px; }\n.dz-invitation-open .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-open .nt p { font-size: 14.5px; line-height: 1.62; margin: 0 0 12px; max-width: 52ch; }\n.dz-invitation-open .nt .mn { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; color: var(--accent); }\n.dz-invitation-open .sm { font-size: 13px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-invitation-open *, .dz-invitation-open *::before, .dz-invitation-open *::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"
}