Casa Lumen

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Gilda Display is a refined high-contrast display serif for drama over photography, and Spline Sans is a neutral, precise utility sans.

• Gilda DisplayHeadings: stacked headline 96px 400 at -2.4px
• Spline SansBody: addresses, menus, forms 16-18px, 12px eyebrows at 0.2em

Who it is for

• Independent Italian restaurants
• Venues preparing to open
• Chefs and hospitality owners
• Small cultural venues needing a launch page

Layout

1. Full-viewport dark photo splash with centered huge serif 'Coming Soon' heading and short subline
2. Left column: small spaced 'LOCATION' eyebrow and street address; right column: 'INQUIRIES' eyebrow and underlined email link
3. Menu page: category filter tabs (Appetizers, Mains, Pizza, Desserts) above a 3-column dish card grid
4. Dish detail page: large photo, description, ingredient tag pills, dietary badges, price
5. About page: dark overlay hero plus two-column chef bio with photo; values in three columns
6. Contact page: info cards (location, phone, email, hours) and a name/email/message form
7. Fixed route-aware header with slide-in mobile menu

Palette

moody, refined, minimal, anticipatory, upscale. A near-monochrome palette lets the photography set the atmosphere.

• splash overlay#111111
• page background#ffffff
• text#282c34
• on-dark text#ffffff
• muted surface#f5f5f5
• border#e5e7eb
• accent terracotta#9a3b2e
• muted text on dark#d4d4d4

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Gilda Display Regular 400, 96px, tight -2.4px tracking, stacked two-line headline

Body

Spline Sans 16 to 18px, weight 400, line-height 1.6; eyebrows 12px uppercase at 0.2em tracking in #d4d4d4 on the dark splash

A high-contrast serif at display sizes only for drama over photography, with a neutral sans for addresses, menus and forms.

Spacing and imagery

Full-bleed splash with three-column flex (address / title / inquiries) at 64px side margins; interior pages use 1200px container, 3-column grids, 8px radius.

One dramatic, darkened interior photograph (dining room or bar) as the splash; food photography on menu cards with gentle zoom on hover.

Components

• Full-screen coming-soon splash
• Eyebrow + address block
• Underlined email link
• Menu category filter tabs
• Dish card with hover zoom
• Dish detail with ingredient pills and dietary badges
• Chef bio two-column section
• Values three-column row
• Contact info cards
• Inquiry form with toast
• Fixed header with route-aware styling
• Slide-in mobile nav with backdrop and scroll lock

Interactions

• Menu filters by category without reload
• Dish card hover: image zoom and shadow lift
• Header switches transparent/solid depending on route
• Mobile menu slides in with backdrop and locks scroll
• Form submit shows a success toast
• Email and phone are click-to-contact links

Data

• Dish{slug, name, category, description, price, image, ingredients[], dietary[vegetarian|vegan|gluten-free], spicy}
• ContactInfo{address, phone, email, hours[]}
• Chef{name, bio, photo}
• Inquiry{name, email, message}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Casa Lumen", a website for a new neighborhood Italian restaurant. Until opening day the homepage is an atmospheric "Opening soon" splash with the address and an inquiry email. The rest of the site lets diners browse a filterable menu with dietary information, meet the chef and get in touch. Owners should be able to switch from splash to full homepage with one config flag.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Badge, Card, Sheet, Toast via Sonner), lucide-react. React Router for pages. react-hook-form + zod for the inquiry form, sent through one serverless function or a form service. Framer Motion for subtle fades.

### Pages & layout
1. **Splash (`/`)**: a full-viewport darkened interior photo. A centered two-line serif headline ("Opening / Soon") at about 96px with a one-line subline. At the left edge, a small spaced "LOCATION" eyebrow above a two-line address; at the right edge, an "INQUIRIES" eyebrow above an underlined email link. On mobile these stack under the title.
2. **Menu**: category Tabs (Starters, Mains, Pizza, Desserts, plus All) above a 3-column grid of dish cards (photo, name, short description, price, dietary icons).
3. **Dish detail**: large photo, name, price, description, ingredient pills, dietary Badges and a back link.
4. **About**: dark-overlay hero, two-column chef bio (portrait and story) and three values.
5. **Contact**: four info cards (address, phone, email, hours) and an inquiry form.
6. **Header**: transparent over dark heroes and solid on light pages, with a slide-in Sheet on mobile.

### Design system
Tokens: `--background: #ffffff`, `--foreground: #282c34`, `--overlay: rgb(17 17 17 / .7)`, `--on-dark-muted: #d4d4d4`, `--muted: #f5f5f5`, `--border: #e5e7eb`, `--accent: #9a3b2e` (a terracotta for prices and active tabs, added for warmth). Fonts: Gilda Display 400/600 for display and Spline Sans for text. Scale: 96/56/36/24/16/12px, display tracking -0.025em, eyebrows 12px uppercase at 0.2em. 8px spacing, 96px sections, 1200px container, 8px radius. Card hover shadow `0 12px 24px -12px rgb(0 0 0/.2)`. Motion: 300ms image zoom, 500ms page fade.

### Components & interactions
- Tabs: active state has an underline in the accent color; arrow-key navigation; filter changes the URL query.
- Dish card: hover zooms the image to 1.05 and lifts the card; focus-visible ring; shows an "Image unavailable" fallback tile.
- Dietary badges: icon plus text (V, VG, GF) with tooltips.
- Inquiry form: inline errors, disabled and loading submit, success and failure toasts.
- Mobile Sheet: backdrop, scroll lock, closes on navigation.
- Empty category: friendly "Nothing here yet" message.

### Data & state
`menu.ts`: `Dish{slug, name, category, description, price, image, ingredients: string[], dietary: ('vegetarian'|'vegan'|'gluten-free')[]}`. `site.ts`: address, phone, email, hours, a `comingSoon` boolean and chef info. Filter state lives in the URL. Seed about 16 fictional dishes with placeholder food photography.

### Accessibility
The 70% overlay keeps white text and `#d4d4d4` eyebrows above 4.5:1 even over a white area of the photo. Dietary information must be text, not color alone. Tabs use Radix semantics. Give dish photos descriptive alt text. The form has labels and `aria-live` errors. Respect reduced motion and keep one H1 per page (the splash H1 is the headline). Verified contrast: body #282c34 on #ffffff = 14.0:1; splash text #ffffff on #585858 = 7.11:1; eyebrows #d4d4d4 on #585858 = 4.8:1; accent #9a3b2e on #ffffff = 6.91:1.

### Security
Validate the inquiry on the client and in the function, add a honeypot and a simple rate limit, and keep mail API keys server-side. Obfuscate the email from naive scrapers, and give map and social links `rel="noopener noreferrer"`.

### Performance & SEO
Preload the splash image in AVIF or WebP at about 200 KB and lazy-load menu images. Add Restaurant JSON-LD (address, hours, servesCuisine) and per-dish meta. Target Lighthouse 95+.

### Guardrails
- Use original copy and placeholder imagery only, with no real restaurant names or logos.
- Do not add fabricated reviews presented as real.
- The inquiry collects only name, email and message.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the splash toggles by config; menu filters work by keyboard and URL; dish pages show dietary text; the form validates and toasts; the layout holds at 360px.

Open the builderAll templatesThis palette on its own