Template
Casa Lumen
A refined restaurant site with an elegant serif look. It opens on a moody full-screen 'Coming Soon' splash with location and inquiry details. Behind it are a category-filtered menu with dish detail pages (ingredients, dietary badges), an about page with a chef bio, and contact cards with an inquiry form.
Italian restaurant website · Website · Small business site · static site
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
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
- Full-viewport dark photo splash with centered huge serif 'Coming Soon' heading and short subline
- Left column: small spaced 'LOCATION' eyebrow and street address; right column: 'INQUIRIES' eyebrow and underlined email link
- Menu page: category filter tabs (Appetizers, Mains, Pizza, Desserts) above a 3-column dish card grid
- Dish detail page: large photo, description, ingredient tag pills, dietary badges, price
- About page: dark overlay hero plus two-column chef bio with photo; values in three columns
- Contact page: info cards (location, phone, email, hours) and a name/email/message form
- 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
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on white | 14.00:1 | 4.5:1 |
| Aa | body text on muted surface | 12.84:1 | 4.5:1 |
| Aa | white splash headline on 70% overlay (worst case over white) | 7.11:1 | 4.5:1 |
| Aa | eyebrows and address on 70% overlay (worst case) | 4.80:1 | 4.5:1 |
| Aa | terracotta prices and active tab text | 6.91:1 | 4.5:1 |
| active tab underline indicator | 6.91:1 | 3:1 | |
| focus ring | 14.00:1 | 3:1 | |
| Aa | white text on dark buttons | 14.00:1 | 4.5:1 |
As vibld’s tokens
The palette on the 15+ color tokens vibld styles a project with, each text color 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.
The baseline
### 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 color 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, labeled 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.