Restaurant
Restaurant Theme 1
Gilded deco lounge for the after-dark hours.
A dark, gold-lined one-pager built for supper clubs and cocktail lounges, where CSS-drawn sunbursts and stepped arches stand in for photography and every rule, corner and divider is drawn with deco geometry.
- Best for
- Restaurateurs and hospitality groups launching an upscale supper club, lounge, or cocktail bar that wants a gilded, 1920s-revival presence online
- Type
- 'Playfair Display', Georgia, serifDisplay headings run 56–96px with tight negative tracking and high contrast strokes, small caps labels use uppercase text at 12–13px with 0.15em positive tracking, body copy sits at 16–18px regular weight for legibility on dark surfaces.
- Palette
- Background #14100CSurface #1E1712Ink #F3E9D8Muted #B8A78CAccent #D4AF37Border #3A2E1F
- Page structure
- Navigation bar — fixed, 72px tall, hairline gold bottom border on the dark surface; centered sunburst monogram logo, left-aligned text links (Menu, Lounge, Events), right-aligned filled gold button 'Reserve a Table'
- Hero — full-bleed dark section with a large radial sunburst SVG centered behind the copy; oversized serif headline centered, one-line subhead beneath, two CTAs side by side (filled gold 'Reserve a Table' + outlined ghost 'View Menu'), thin gold rules above and below the block
- Origin strip — two-column editorial band: left column holds a large deco numeral '01' with a stepped-arch ornament, right column carries two short paragraphs on the venue's history and ethos
- Menu highlights — four-column card grid, each card framed with a 1px gold stepped-corner border holding dish name, price aligned right, one-line descriptor, and a small corner sunburst flourish
- Atmosphere panels — three-column grid of CSS/SVG geometric pattern tiles (chevron, sunburst, fluted arch) labelled Bar, Dining Room, Terrace, each caption centered below its pattern in small-caps gold type
- Signature cocktails — split section, left half a large fluted-line pattern panel, right half a numbered list of six cocktails with prices right-aligned and thin gold divider lines between rows
- Private events banner — centered dark surface band flanked by symmetrical deco border ornaments, single headline plus one line of copy, outlined gold button 'Inquire for Private Events'
- Press & guest quotes — three-column row, each quote opens with a deco-style quotation mark motif, italic serif quote text, name and publication set below in muted small caps
- Hours & location — two-column band: left stacks address and hours as a simple list, right shows a stylized CSS line-art city block with a single gold pin marker
- Reservation call to action — full-width gold band, dark ink centered headline and one line of copy, dark outlined button 'Reserve Now'
- Footer — three columns: brand mark with tagline, quick links list, and a newsletter row with an inline input plus 'Subscribe' button; bottom hairline strip with copyright and a repeating chevron pattern
- Tags
- art deco · luxury · gilded · restaurant · geometric
The creation prompt
884 words, self-contained. Paste it into a chat session with your coding agent and it builds Restaurant Theme 1 end to end.
Build a restaurant landing page for an art deco supper club and cocktail lounge using the "Restaurant Theme 1" theme — Gilded deco lounge for the after-dark hours. ## Art direction The page reads like the foyer of a 1920s picture palace after the lights have dimmed: near-black grounds, warm gilded linework, and generous negative space that lets a handful of gold marks carry the whole composition. Depth comes from layered hairline borders and radiating sunburst patterns rather than shadows or photography. Density is low and ceremonial — long vertical rhythm, wide margins, a single ornament per section. The feeling is confident, nocturnal glamour: restrained, symmetrical, and lit like candlelight on brass. ## Colour palette (use these exact values) - Background: #14100C - Surface / cards: #1E1712 - Primary text: #F3E9D8 - Secondary text: #B8A78C - Accent (buttons, links, active state): #D4AF37 - Text on accent: #1A1206 - Borders / dividers: #3A2E1F Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour. ## Typography - Headings: 'Playfair Display', Georgia, serif - Body: 'Jost', 'Helvetica Neue', Arial, sans-serif - Display headings run 56–96px with tight negative tracking and high contrast strokes, small caps labels use uppercase text at 12–13px with 0.15em positive tracking, body copy sits at 16–18px regular weight for legibility on dark surfaces. ## Page structure 1. Navigation bar — fixed, 72px tall, hairline gold bottom border on the dark surface; centered sunburst monogram logo, left-aligned text links (Menu, Lounge, Events), right-aligned filled gold button 'Reserve a Table' 2. Hero — full-bleed dark section with a large radial sunburst SVG centered behind the copy; oversized serif headline centered, one-line subhead beneath, two CTAs side by side (filled gold 'Reserve a Table' + outlined ghost 'View Menu'), thin gold rules above and below the block 3. Origin strip — two-column editorial band: left column holds a large deco numeral '01' with a stepped-arch ornament, right column carries two short paragraphs on the venue's history and ethos 4. Menu highlights — four-column card grid, each card framed with a 1px gold stepped-corner border holding dish name, price aligned right, one-line descriptor, and a small corner sunburst flourish 5. Atmosphere panels — three-column grid of CSS/SVG geometric pattern tiles (chevron, sunburst, fluted arch) labelled Bar, Dining Room, Terrace, each caption centered below its pattern in small-caps gold type 6. Signature cocktails — split section, left half a large fluted-line pattern panel, right half a numbered list of six cocktails with prices right-aligned and thin gold divider lines between rows 7. Private events banner — centered dark surface band flanked by symmetrical deco border ornaments, single headline plus one line of copy, outlined gold button 'Inquire for Private Events' 8. Press & guest quotes — three-column row, each quote opens with a deco-style quotation mark motif, italic serif quote text, name and publication set below in muted small caps 9. Hours & location — two-column band: left stacks address and hours as a simple list, right shows a stylized CSS line-art city block with a single gold pin marker 10. Reservation call to action — full-width gold band, dark ink centered headline and one line of copy, dark outlined button 'Reserve Now' 11. Footer — three columns: brand mark with tagline, quick links list, and a newsletter row with an inline input plus 'Subscribe' button; bottom hairline strip with copyright and a repeating chevron pattern ## Components and detailing Buttons are 48px tall with sharp 2px corner radius and 1.5px borders in filled-gold or outline-gold variants, label set in uppercase small caps with 0.1em tracking; cards use 1px gold-toned borders with stepped or clipped corners rather than shadows; icons are thin line marks at 1.5px stroke in gold on dark; imagery is entirely CSS/SVG geometric ornament — sunbursts, chevrons, fluted arches, stepped pyramids — never photographic; inputs are 44px tall with a bottom-only 1px gold border on transparent background. ## Motion Motion is slow and ceremonial: sunburst patterns rotate at roughly one degree per second, section content fades up 12px over 400ms on scroll with generous stagger between elements, buttons scale to 1.02 and brighten their border on hover over 200ms, underlines on nav links draw in from center over 250ms ease. ## Copy and imagery Voice is confident and sensory, favouring short declarative lines over long marketing copy — think menu card, not brochure; imagery throughout is built entirely from CSS and inline SVG geometric patterns (sunbursts, chevrons, stepped arches, fluted lines) rendered in the gold accent against dark grounds, with no photography or external image assets. ## Non-negotiables - Responsive from 360px through desktop — no horizontal scrolling at any width. - Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair. - Fully keyboard operable, with a visible focus ring drawn in the accent colour. - Honour `prefers-reduced-motion` — swap every transition for an instant state change. - Write real copy in the voice described above; no lorem ipsum and no TODO placeholders. - Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service. Build the whole page end to end and show me the result running — not a description of it.
Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.