--- version: alpha name: Supper Club description: Lilac dusk with rose and burnt orange, and prices that follow the dish after a leader of dots — never in a column. meta: id: "theme-supper-club" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:16+09:00" updatedAt: "2026-09-02T00:58:16+09:00" version: "1.0.0" isNew: false lookbook: tagline: A menu, printed for tonight. bestFor: Restaurants and wine bars, tasting menus, supper clubs, hospitality booking, chef residencies avoidFor: Delivery apps, anything with hundreds of items, anything needing price comparison defaultMode: dark surfaceStyle: flat accentUse: text caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 1 duration: 300ms ease: "cubic-bezier(0.4, 0, 0.2, 1)" signature: "The page changes at service. Nothing else animates; the transition between lunch and dinner is the only motion with meaning." displayFont: Cormorant Garamond displayKind: serif bodyFont: Cardo monoFont: Xanh Mono colors: background: "#CFD1E0" foreground: "#07080B" card: "#C5C9DB" card-foreground: "#07080B" popover: "#C5C9DB" popover-foreground: "#07080B" primary: "#985D7C" primary-foreground: "#F9FAFF" secondary: "#BBBFD7" secondary-foreground: "#07080B" muted: "#BBBFD7" muted-foreground: "#4B4D53" accent: "#8E2C23" accent-foreground: "#F9FAFF" destructive: "#B6322D" destructive-foreground: "#F9FAFF" border: "#ACB0C5" input: "#ACB0C5" ring: "#985D7C" chart-1: "#955F7B" chart-2: "#A3656C" chart-3: "#925947" chart-4: "#98729F" chart-5: "#665A8C" colorsDark: background: "#181A22" foreground: "#DFE8F8" card: "#1F2237" card-foreground: "#DFE8F8" popover: "#1F2237" popover-foreground: "#DFE8F8" primary: "#CE8FB0" primary-foreground: "#0A0C1A" secondary: "#282C49" secondary-foreground: "#DFE8F8" muted: "#282C49" muted-foreground: "#8D97AA" accent: "#E17769" accent-foreground: "#0A0C1A" destructive: "#FE7469" destructive-foreground: "#0A0C1A" border: "#363A55" input: "#363A55" ring: "#CE8FB0" chart-1: "#CB91AF" chart-2: "#C8878D" chart-3: "#DB9D88" chart-4: "#AA83B1" chart-5: "#B7ABE3" typography: display-lg: fontFamily: Cormorant Garamond fontSize: 72px fontWeight: 300 lineHeight: 1.02 letterSpacing: -0.02em headline-lg: fontFamily: Cormorant Garamond fontSize: 40px fontWeight: 300 lineHeight: 1.14 letterSpacing: -0.015em headline-md: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 400 lineHeight: 1.3 body-lg: fontFamily: Cardo fontSize: 18px fontWeight: 400 lineHeight: 1.68 body-md: fontFamily: Cardo fontSize: 16.5px fontWeight: 400 lineHeight: 1.66 body-sm: fontFamily: Cardo fontSize: 14px fontWeight: 400 lineHeight: 1.55 label-caps: fontFamily: Cardo fontSize: 10.5px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.22em label-mono: fontFamily: Xanh Mono fontSize: 13px fontWeight: 400 lineHeight: 1.5 numeral-xl: fontFamily: Xanh Mono fontSize: 46px fontWeight: 300 lineHeight: 1.05 letterSpacing: -0.01em rounded: none: 0px sm: 1px md: 2px lg: 2px xl: 3px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 30px xl: 64px gutter: 26px margin: 40px measure: 58ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 14px button-ghost: backgroundColor: transparent textColor: "{colors.accent}" rounded: "{rounded.sm}" padding: 14px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 28px badge-label: backgroundColor: transparent textColor: "{colors.accent}" typography: "{typography.label-caps}" rounded: "{rounded.none}" --- # Supper Club ## Overview Supper Club is a printed menu that happens to be a website. Its one refusal is the price column: **prices follow the dish name after a leader of dots**, on the same line, exactly as a printed menu sets them. They are never right-aligned in their own column, because a price column turns a menu into a comparison table and a guest starts optimising instead of choosing. The second commitment is that the page belongs to a service, not a session. At half past five the whole site changes: the menu, the header image, the booking form's defaults. There is no "switch to dinner menu" tab. The restaurant is serving one thing at a time and the site says so. Lilac dusk, rose, burnt orange. It suits restaurants, wine bars and residencies. It is wrong for delivery, which needs exactly the comparison this refuses. ## Colors A room at dusk with two warm ends. - **Ground:** lilac-grey, dark by default. The default mode here is dark because the default hour is evening. - **Primary (rose):** book a table. One action, one colour, once per page. - **Accent (burnt orange):** **text** — the price, the wine pairing note, the "sold out" mark. Solved to 4.5:1 on ground and card, because a price that cannot be read is the one unforgivable error in this system. - **Neutrals** are warm-tinted lilac; nothing here is grey. - Charts are analogous and essentially unused. A restaurant does not need a dashboard on its public site. ## Typography Cormorant Garamond at Light for display, Cardo for the menu, Xanh Mono for times. - **Display:** Cormorant Garamond at 300, 72px. Very light, very high contrast — it looks like letterpress and falls apart under 24px, which is why nothing below headline-md uses it. - **Body:** Cardo at 16.5px, 1.66, 58ch. An old-style serif with generous spacing; a dish description reads as a sentence, not a spec. - **Xanh Mono** for service times, table numbers and the date on the menu head. It is a slab-ish mono with real character and it is the printer's mark here. - Uppercase at 0.22em — the widest tracking in the library — for course headings: TO BEGIN, TO FOLLOW, TO FINISH. ## Layout **Leader lines and a single column.** The menu is one 58ch column, centred in the page but left-aligned within itself. Each dish is: name in Cardo, a dotted leader that fills the remaining width, and the price in accent. The dotted leader is a real border-bottom on a flex spacer, not an image and not a string of periods. Course headings are uppercase, centred, with 64px above and 30px below. The 64px is the largest section gap in the library and it is what makes the page feel like a card rather than a page. Margins are 40px, gutters 26px, at 1080px. Narrow — this is a document. ## Elevation & Depth Flat. No shadows anywhere. The card is a 1px border and 28px of padding and it is used only for the booking form and the wine flight. The only meaningful motion in the system is the service change: at the boundary hour the menu cross-dissolves over 300ms to the next service. Everything else is still. ## Shapes Effectively square — 1px on controls, 2px on cards. Nothing in a dining room is rounded. Photography is warm-graded, low-light, and always of a room or a table mid- service — never a plated dish shot from above on white. There is at most one photograph per page and it is full-bleed. ## Components - **Dish line:** name in Cardo 16.5px, flex spacer with a 1px dotted bottom border, price in accent. Description below in body-sm at 80% width, muted. - **Course heading:** uppercase, 0.22em, centred, with a hairline above. - **Service switch:** not a control. A label in mono reading the current service and its hours, in the page header. - **Booking form:** date, covers and time as three mono fields on one line, with a rose fill button beneath at full width. - **Wine pairing:** an indented block in accent text with a 1px left rule. ## Do's and Don'ts - Do set prices inline after a dotted leader. - Do let the whole page belong to one service at a time. - Do keep the display face above 24px. - Don't build a price column. - Don't put a tab for the other menu; change the page. - Don't shoot dishes from above on white. - Don't add a shadow to the booking card.