{
  "id": "invitation-suite",
  "name": "The Suite",
  "theme": "invitation",
  "category": "Marketing",
  "description": "A stationery suite shown as it prints — three 5:7 cards in a row with foil, emboss and letterpress photographs each held inside its own bleed rule.",
  "layout": "Three cards as a spread, each with a photograph inside the inset rule and its specification in mono beneath, plus a closing order block.",
  "modules": [
    {
      "key": "head",
      "name": "Suite header",
      "html": "\n<header class=\"sh\"><span class=\"k\">Kilcarn Press · stationery</span><h1>Printed, not rendered</h1><p>Everything in this suite is 5:7 on 300gsm cotton. The border you see on screen is the blind emboss you will feel on the card.</p></header>"
    },
    {
      "key": "cards",
      "name": "Suite cards",
      "html": "\n<section class=\"sp\">\n<article class=\"cd\"><div class=\"in ph\"><img src=\"{{ART card}}\" alt=\"{{ARTALT card}}\"><div class=\"sp2\"><span class=\"k\">Invitation</span><p class=\"mn\">300gsm cotton · blind emboss · letterpress in magenta · from £4.20 each</p></div></div></article>\n<article class=\"cd\"><div class=\"in ph\"><img src=\"{{ART foil}}\" alt=\"{{ARTALT foil}}\"><div class=\"sp2\"><span class=\"k\">Save the date</span><p class=\"mn\">300gsm cotton · violet foil · from £3.10 each</p></div></div></article>\n<article class=\"cd\"><div class=\"in ph\"><img src=\"{{ART envelope}}\" alt=\"{{ARTALT envelope}}\"><div class=\"sp2\"><span class=\"k\">Envelope and seal</span><p class=\"mn\">Blush wove · hand-addressed · real wax seal · from £2.40 each</p></div></div></article>\n</section>"
    },
    {
      "key": "why",
      "name": "Why 5:7",
      "html": "\n<section class=\"wy\"><span class=\"k\">Why everything is 5:7</span><p>It is the proportion of a standard invitation card and it is the proportion of every surface in the software that manages one. A guest list, a table plan, an RSVP question — all of them are the same shape as the thing they describe, and none of them scrolls.</p></section>"
    },
    {
      "key": "order",
      "name": "Order block",
      "html": "\n<footer class=\"or\"><div><span class=\"k\">Minimum order</span><p class=\"mn\">40 cards · six weeks from artwork approval</p></div><button class=\"pri\">Order a sample pack</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "invitation-suite",
    "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-suite.json",
  "structure": "Three cards as a spread, each with a photograph inside the inset rule and its specification in mono beneath, plus a closing order block.",
  "html": "<div class=\"dz dz-invitation-suite\" data-design=\"invitation-suite\" data-theme=\"invitation\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Suite header\">\n<header class=\"sh\"><span class=\"k\">Kilcarn Press · stationery</span><h1>Printed, not rendered</h1><p>Everything in this suite is 5:7 on 300gsm cotton. The border you see on screen is the blind emboss you will feel on the card.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"cards\" aria-label=\"Suite cards\">\n<section class=\"sp\">\n<article class=\"cd\"><div class=\"in ph\"><img src=\"https://designlookbook.dev/assets/img/invitation-card.webp\" alt=\"A single blush card with a deep blind-embossed border\"><div class=\"sp2\"><span class=\"k\">Invitation</span><p class=\"mn\">300gsm cotton · blind emboss · letterpress in magenta · from £4.20 each</p></div></div></article>\n<article class=\"cd\"><div class=\"in ph\"><img src=\"https://designlookbook.dev/assets/img/invitation-foil.webp\" alt=\"Violet foil catching the light on card stock\"><div class=\"sp2\"><span class=\"k\">Save the date</span><p class=\"mn\">300gsm cotton · violet foil · from £3.10 each</p></div></div></article>\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\"><div class=\"sp2\"><span class=\"k\">Envelope and seal</span><p class=\"mn\">Blush wove · hand-addressed · real wax seal · from £2.40 each</p></div></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"why\" aria-label=\"Why 5:7\">\n<section class=\"wy\"><span class=\"k\">Why everything is 5:7</span><p>It is the proportion of a standard invitation card and it is the proportion of every surface in the software that manages one. A guest list, a table plan, an RSVP question — all of them are the same shape as the thing they describe, and none of them scrolls.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"order\" aria-label=\"Order block\">\n<footer class=\"or\"><div><span class=\"k\">Minimum order</span><p class=\"mn\">40 cards · six weeks from artwork approval</p></div><button class=\"pri\">Order a sample pack</button></footer></section>\n</div>",
  "css": "\n.dz-invitation-suite { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 32px; }\n\n.dz-invitation-suite .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-suite .cd::before { content: \"\"; position: absolute; inset: 24px; border: 1px solid var(--border); pointer-events: none; }\n.dz-invitation-suite .in { position: absolute; inset: 24px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }\n.dz-invitation-suite .cd .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-suite .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-suite .sh { margin-bottom: 30px; }\n.dz-invitation-suite .sh .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }\n.dz-invitation-suite h1 { font-family: var(--pv-display); font-weight: 400; font-size: 60px; line-height: 1.06; letter-spacing: -.015em; margin: 10px 0 12px; }\n.dz-invitation-suite .sh p { margin: 0; font-size: 14.5px; line-height: 1.64; color: var(--muted-foreground); max-width: 52ch; }\n.dz-invitation-suite .sp { display: grid; grid-template-columns: repeat(3, 300px); gap: 32px; justify-content: start; }\n.dz-invitation-suite .ph { padding: 0; }\n.dz-invitation-suite .ph img { width: 100%; flex: 1; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-invitation-suite .sp2 { padding: 12px 4px 0; }\n.dz-invitation-suite .sp2 .mn { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); margin: 6px 0 0; }\n.dz-invitation-suite .wy { margin: 36px 0; }\n.dz-invitation-suite .wy .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-suite .wy p { margin: 0; font-size: 14.5px; line-height: 1.64; max-width: 52ch; }\n.dz-invitation-suite .or { display: flex; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-invitation-suite .or .k { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 500; color: var(--muted-foreground); display: block; }\n.dz-invitation-suite .or .mn { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .02em; color: var(--muted-foreground); margin: 6px 0 0; }\n.dz-invitation-suite .pri { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 13px 24px; font: inherit; font-size: 14.5px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-invitation-suite *, .dz-invitation-suite *::before, .dz-invitation-suite *::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"
}