Hair Salon Website Prompt — Dark Near-Black Terracotta

# Hair Salon Website Prompt # websiteprompts.ai Build a dark, editorial women's hair salon website called "Studio Nora" using React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + shadcn/ui + lucide-react. ## Design System ### Colors ```css :root { --background: 20 8% 7%; /* near-black warm #130e0c */ --foreground: 38 18% 90%; /* warm pearl */ --primary: 20 8% 7%; --primary-foreground: 38 18% 90%; --accent: 18 42% 55%; /* terracotta #c17a54 */ --surface: 20 6% 11%; --surface-raised: 20 5% 15%; --muted-foreground: 38 8% 55%; --border: 20 5% 18%; } ``` ### Typography - Import: `https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500&display=swap` - Headlines: Bebas Neue — full condensed, maximum scale - Body: Inter 300–500 - Labels: Inter 500 uppercase 10px letter-spacing 0.16em ## Sections ### 1. Navbar - Sticky near-black background, `backdrop-filter: blur(12px)` - Left: Inter 500 uppercase letter-spacing 0.2em wordmark "STUDIO NORA" in terracotta - Right: Services · Portfolio · About · Book + "Book now →" terracotta button ### 2. Hero - Full-viewport height, near-black background - Full-bleed editorial portrait photography `position: absolute inset-0`, `object-fit: cover; object-position: center` - Composition-independent overlay: `linear-gradient(to right, rgba(19,14,12,0.96) 0%, rgba(19,14,12,0.75) 48%, rgba(19,14,12,0.20) 100%)` - Large background text: "NORA" in Bebas Neue `font-size: clamp(240px, 35vw, 500px)` at `opacity: 0.03`, `position: absolute`, centered vertically, `z-index: 1` - Content `z-index: 10` left-aligned `max-width: 560px padding-left: 6vw`: - Inter 500 uppercase 10px terracotta label: "Hair Studio · Notting Hill, London" - Bebas Neue `clamp(72px, 10vw, 140px)` pearl line-height 0.88: "YOUR HAIR.\nYOUR STORY.\nOUR CRAFT." - Terracotta accent on "OUR CRAFT." - Inter 300 muted pearl sub: "Expert cuts, colour, and styling for women who know exactly what they want — and those still discovering it" - CTAs: "Book an appointment →" (terracotta filled, dark text) + "See our work" (ghost) - Trust chips: "10+ Years · Notting Hill · Walk-ins Welcome Mondays" {/* Image brief: editorial portrait of woman with dramatic hair styling, dark moody studio background, fashion photography aesthetic, sharp lighting, high contrast black and white or warm tones */} - Hero: aggressive stagger fade-up (y: 40→0, 0.6s, 0.08s delay per element) ### 3. Services - "What We Do" — Bebas Neue `clamp(52px, 7vw, 90px)` pearl - 6-service 3×2 grid, dark surface cards: - Cut & Style (from £65 — consultation included) - Colour & Balayage (from £95 — bespoke blending) - Highlights (from £85 — foils and freehand) - Blow-Dry (from £40 — in-salon finish) - Keratin Treatment (from £150 — 12-week smoothing) - Extensions (from £200 — tape, bonds, or clip) - Each card: Inter 500 service name, Inter 300 muted description, terracotta price tag, lucide icon - Hover: terracotta border + `box-shadow: 0 0 18px hsl(18 42% 55% / 0.12)` ### 4. Portfolio - "Our Work" — Bebas Neue large pearl - 5-image horizontal strip, `height: 340px`, `min-width: 260px` per image, `overflow-x: auto` on mobile - Scale on hover 1.02, no border-radius, 2px gap - Stagger fade-in on scroll {/* Image brief: close-up of perfect balayage colour, warm blonde tones, editorial beauty photography */} {/* Image brief: sleek blow-dry finish on brunette, studio lighting, fashion-editorial quality */} {/* Image brief: curly hair transformation, vibrant and natural, warm light */} {/* Image brief: short precision cut, dramatic editorial, strong lighting */} {/* Image brief: hair colour close-up — rich red tones, high-gloss finish */} ### 5. Why Studio Nora - Split: left text, right image - Bebas Neue large pearl: "WE DON'T DO CONVEYOR BELT HAIR" - Inter 300 muted: 2 paragraphs — every appointment starts with a consultation, no rushed bookings, no double-stacking clients. Colour consultations always by the same stylist. - 4 terracotta check points (lucide Check): "Dedicated stylist every visit · No hidden pricing · Colour consultations always free · Cancellation up to 24hrs" {/* Image brief: stylist and client in consultation, intimate salon setting, warm light, genuine connection */} ### 6. Team - "Your Stylists" — Bebas Neue large pearl - 3 stylist cards: portrait (square, no border-radius), Bebas Neue name, terracotta specialty chip, Inter 300 bio - Hover: terracotta border + glow {/* Image brief: female hair stylist, editorial headshot, dark studio background, professional and confident */} {/* Image brief: female stylist with scissors, blurred salon background, warm and approachable */} {/* Image brief: stylist at work, focus on hands and technique, artistic photography */} ### 7. Testimonials - Surface-raised section - 3 cards: 5-star row in terracotta, Inter 300 italic pearl quote, client name + service in Inter 10px muted - Stagger fade-up on scroll ### 8. Booking CTA - Full-width, `background: hsl(18 42% 55%)` terracotta - Bebas Neue `clamp(52px, 7vw, 90px)` dark: "READY FOR YOUR BEST HAIR?" - Inter 300 dark: "Book online in 60 seconds — choose your service, stylist, and time" - "Book now →" dark button - "New clients welcome · Consultations always free · Walk-ins Mondays" Inter 10px dark 70% ### 9. Footer - Near-black background, Inter 500 uppercase "STUDIO NORA" in terracotta - Instagram · TikTok · Google - "© 2026 Studio Nora · 14 Pembridge Road, Notting Hill, London W11 · Mon–Sat 9am–7pm" ## Animations - Hero text: aggressive stagger fade-up on mount (y: 40→0) - Background "NORA" text: fade in slowly 1.5s delay - Service grid: stagger fade-up on scroll - Gallery strip: stagger fade-in ## Responsive - Mobile: stacked hero (photo visible behind overlay, text full width), single-column services, hamburger nav ## Full Copy - Wordmark: "STUDIO NORA" - Hero: "YOUR HAIR. YOUR STORY. OUR CRAFT." / "Expert cuts, colour, and styling for women who know exactly what they want" - Services: Cut from £65 · Colour from £95 · Highlights from £85 · Blow-Dry from £40 · Keratin from £150 · Extensions from £200 - Testimonial: "I've been coming to Studio Nora for 3 years. The colour work is genuinely exceptional — I get compliments every time I leave." — Rachel S., Notting Hill - CTA: "READY FOR YOUR BEST HAIR?" / "Book online in 60 seconds"