Salon & Spa · Free
Gilded
A salon site that feels like the first five minutes of an appointment: champagne neutrals, serif elegance, and a booking flow front and center.

Cormorant Garamond + InterChampagne luxury, mirror-shine booking
prompt.txt — paste as your first message
You are designing the online home of a salon people photograph for Instagram. Build a complete one-page site for a fictional salon called Gilded ("Walk out shinier."). Write every word — warm, assured, zero clichés like "pamper yourself", no lorem ipsum.
ART DIRECTION — champagne luxury. Background #F8F4EE, ink #2B2620, gold accent #9D8354 used for fine rules, prices, and one CTA. A very subtle vertical shimmer band (a light linear-gradient) behind the hero, like light on a mirror. Cards are white with soft 18px radii and barely-there shadows. Fonts via Google Fonts: "Cormorant Garamond" 500/600 for headlines (airy, slightly letterspaced), "Inter" 400 for body and prices. Mood: gold foil on thick paper.
LAYOUT, top to bottom:
1. Whisper nav — serif wordmark, three quiet links, a gold-outlined "Book now" pill.
2. Hero — split: left, an eyebrow in small caps, a big serif headline, one sentence, "Book now" CTA + "★ 4.9 from 800+ clients" proof line; right, a tall composed CSS scene — a rounded arch shape in champagne gradient with a thin gold frame, like a mirror.
3. The menu — a two-column service list typeset like a fine menu: service name, dotted leader line, price. Group into Hair / Colour / Care. 8–10 services with believable prices.
4. The chairs — three stylist cards: CSS-gradient avatar circle, name, specialty, "with [name] from $X".
5. A calm band — full-width ink section, one serif sentence in champagne text ("Good hair is a habit, not an occasion.").
6. Reviews — three short quotes with first names and the service they had.
7. Booking — a labeled form (name, phone, service select, preferred day) with the gold CTA; small honest note that the form needs connecting.
8. Footer — hours, address, a fine-print line.
MOTION: restrained shine. Hero elements fade up 12px with a 70ms stagger; the mirror scene's shimmer band drifts once on load (2s); dotted leaders draw in on reveal; cards lift 3px on hover; section reveals are 450ms fades via IntersectionObserver. Respect prefers-reduced-motion.
RULES: responsive at 375 / 768 / 1280 (menu goes single column, hero stacks). Semantic HTML, labeled form fields, focus states, body contrast at least 7:1 on the paper background. All art is CSS gradients and inline SVG — no photos, no libraries. Complete without JavaScript.Why these prompts work
Every template follows the same five-part structure, so the result is consistent every time:
01
Role + output contract
What to build and the quality bar — no lorem ipsum, real copy.
02
Art direction
Exact hex palette, Google-Fonts pairing, and mood keywords.
03
Layout spec
Section by section, top to bottom — nothing left to chance.
04
Motion spec
Entrances, scroll reveals, hovers, and timing curves.
05
Rules
Responsive breakpoints, accessibility, and what the AI must not do.
Works great for
Each industry page carries this style pre-tailored — your services, prices and palette already written in: