--- version: alpha name: Invitation description: Blush card stock, magenta ink, violet foil. Every surface is a 5:7 card that could be printed and posted. meta: id: "theme-invitation" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:18+09:00" updatedAt: "2026-09-02T00:58:18+09:00" version: "1.0.0" isNew: false lookbook: tagline: If it would not print, it is not a card. bestFor: Events and RSVPs, weddings and parties, save-the-dates, ticketed socials, membership cards avoidFor: Data-heavy tools, long-form content, anything with unbounded text defaultMode: light surfaceStyle: filled accentUse: fill caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 3 duration: 340ms ease: "cubic-bezier(0.34, 1.56, 0.64, 1)" signature: "Cards flip on their vertical axis to reveal their reverse. Nothing in this system scrolls internally — it turns over." displayFont: Yeseva One displayKind: serif bodyFont: Readex Pro monoFont: Nova Mono colors: background: "#FBD7F0" foreground: "#1A131B" card: "#E6D0DF" card-foreground: "#1A131B" popover: "#E6D0DF" popover-foreground: "#1A131B" primary: "#9948B0" primary-foreground: "#FFF8FC" secondary: "#DEC1D5" secondary-foreground: "#1A131B" muted: "#DEC1D5" muted-foreground: "#5A505C" accent: "#3652BC" accent-foreground: "#FFF8FC" destructive: "#B6322D" destructive-foreground: "#FFF8FC" border: "#CFB5C6" input: "#CFB5C6" ring: "#9948B0" chart-1: "#954EAA" chart-2: "#438C23" chart-3: "#A13C81" chart-4: "#00985F" chart-5: "#6E48AD" colorsDark: background: "#1E0A19" foreground: "#E1DBE2" card: "#241720" card-foreground: "#E1DBE2" popover: "#241720" popover-foreground: "#E1DBE2" primary: "#DF8BF8" primary-foreground: "#150812" secondary: "#33212E" secondary-foreground: "#E1DBE2" muted: "#33212E" muted-foreground: "#948C95" accent: "#7295FF" accent-foreground: "#150812" destructive: "#FF8C80" destructive-foreground: "#150812" border: "#42313C" input: "#42313C" ring: "#DF8BF8" chart-1: "#D68BEC" chart-2: "#6FB954" chart-3: "#F88BD2" chart-4: "#19B774" chart-5: "#C6ACFF" typography: display-lg: fontFamily: Yeseva One fontSize: 60px fontWeight: 400 lineHeight: 1.06 letterSpacing: -0.015em headline-lg: fontFamily: Yeseva One fontSize: 34px fontWeight: 400 lineHeight: 1.18 letterSpacing: -0.01em headline-md: fontFamily: Yeseva One fontSize: 20px fontWeight: 500 lineHeight: 1.32 body-lg: fontFamily: Readex Pro fontSize: 16px fontWeight: 400 lineHeight: 1.64 body-md: fontFamily: Readex Pro fontSize: 14.5px fontWeight: 400 lineHeight: 1.62 body-sm: fontFamily: Readex Pro fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Readex Pro fontSize: 10px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.2em label-mono: fontFamily: Nova Mono fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.02em numeral-xl: fontFamily: Nova Mono fontSize: 52px fontWeight: 400 lineHeight: 1 letterSpacing: -0.02em rounded: none: 0px sm: 2px md: 3px lg: 4px xl: 6px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 24px xl: 48px gutter: 24px margin: 32px measure: 52ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 13px button-ghost: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.sm}" padding: 13px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.sm}" padding: 28px badge-label: backgroundColor: "{colors.accent}" textColor: "{colors.accent-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.none}" --- # Invitation ## Overview Invitation is a stationery system. Its rule is a ratio: **every primary surface is a 5:7 portrait card**, at a fixed aspect, with a 24px printed bleed border inside its edge. Invitations, RSVPs, schedules, table plans, membership cards — all of them are 5:7. The consequence is the interesting part: **nothing scrolls inside a card.** If the content does not fit, it becomes a second card. That forces every piece of copy in the system to be edited down to a card's worth, which is exactly the discipline printed stationery imposes and screens usually remove. Cards turn over rather than expanding. The reverse of the invitation carries the directions, the dietary form, the gift note — the things that are on the back of a real card. Blush stock, magenta ink, violet foil. It suits events and RSVPs. It is wrong for anything with unbounded text. ## Colors Stock, ink, foil. - **Ground:** blush card stock. Warm, low chroma, and slightly darker than the cards themselves so a card reads as a physical thing lying on a table. - **Primary (magenta):** the ink. Headings on cards, the RSVP button, the rules. - **Accent (violet):** a **fill**, and it is the foil: the seal, the guest-count badge, the "you are invited" chip. Filled, so the pair is contrast-checked. - **Neutrals** are blush-tinted; a muted line reads as letterpress that did not take. - Charts are duotone and appear only in the host's dashboard — a guest never sees a chart in this system. ## Typography Yeseva One for the occasion, Readex Pro for detail, Nova Mono for the code. - **Display:** Yeseva One at 60px. A single-weight display serif with heavy contrast and slightly eccentric curves. It is used for the couple's names, the event title, the number of the table — one phrase per card and no more. - **Body:** Readex Pro at 14.5px, 1.62, and the measure is **52ch**, the narrowest in the library, because a card is narrow. - **Nova Mono** for RSVP codes, dates, times and table numbers. It is a geometric mono with an unusual shape and it reads as a printer's mark. - Uppercase at 0.2em for card labels: RSVP BY, DRESS, CARRIAGES. ## Layout **5:7, and a 24px bleed.** Cards are a fixed aspect with an inset 1px rule 24px from every edge — the bleed border of a printed card. Content sits inside that rule and never crosses it. The card wall is a 3-up grid at 1200px with 24px gutters, and rows are even because every card is the same shape. A card that needs more room does not grow; a second card is issued and the pair is shown as a spread. The RSVP flow is a stack of cards, one question per card, advanced by turning. There is no long form anywhere in this system. ## Elevation & Depth Filled cards with a soft shadow — they are objects on a surface and they should look like it. One shadow depth, used everywhere, plus a slightly deeper one on the card currently being turned. The signature motion is a 340ms flip on the vertical axis with a small overshoot. Nothing fades and nothing slides. Under reduced motion the flip becomes an instant swap, which preserves the model without the rotation. ## Shapes Barely rounded — 2px on cards and controls, which is the radius of a guillotined corner rather than a UI radius. Photography is warm-graded, and it is always **inside the bleed border**, treated as a printed image on the card rather than as a background. A photograph never bleeds off a card edge in this system, which is the opposite of the usual full-bleed instinct and is what makes the cards read as objects. ## Components - **Card:** 5:7 aspect, 1px inset rule at 24px, Yeseva One title, Readex Pro body at 52ch, mono details at the foot. Flips to reveal its reverse. - **Seal:** a violet fill circle at 56px with a monogram, overlapping the top edge of a card by 12px. The only element permitted to cross the card boundary. - **Guest count:** numeral-xl in Yeseva One with the word beneath in uppercase. It is the largest thing on the host's screen. - **RSVP card:** one question, two large buttons, a mono code at the foot. One question per card, always. - **Table plan:** a grid of small 5:7 cards, one per table, number in Yeseva One and names in body-sm. ## Do's and Don'ts - Do keep every primary surface at 5:7 with the 24px bleed rule. - Do issue a second card rather than scrolling one. - Do keep photographs inside the bleed border. - Don't build a long RSVP form; use one question per card. - Don't let a card grow to fit its content. - Don't full-bleed an image off a card edge. - Don't set more than one phrase per card in the display face.