LUMINA Studio — a dark editorial site for a premium hair salon

A site for a one-to-one private hair salon in Seongsu-dong, Seoul. For a salon, one booking is one sale, so the goal is simple: never hide the price or the duration, and minimise the clicks to a booking.

The problem

This vertical is usually locked into booking platforms, leaving the salon's own site as little more than a list of Instagram links. What only an own site can do is carry the brand's tone fully, and lay out the service system and prices honestly so a first visit carries no uncertainty.

Design approach

Ink black and champagne gold set a dark editorial tone, with an English serif display face played against Korean sans-serif to create an editorial rhythm. Photography is unified through a black-and-white sepia duotone, a gold scrim and a grain overlay.

Art direction when the imagery does not exist

The most practical decision in this project was about images. Freely licensed hair photography is almost entirely snapshot quality, and using it as a premium salon's lookbook would actively damage trust. So the lookbook and stylist cards use editorial photography generated specifically for this brand. The lookbook covers six signature colours, each shot from behind so no face is visible, which makes the colour differences immediately legible; the stylist portraits share one studio lighting setup. Nobody real is depicted, so there are no likeness concerns, and at 20-80KB per WebP there is no performance cost.

Signature interactions

• Service category tabs — hair, colour, care and styling as keyboard-operable tabs, each item showing duration alongside price.
• Sticky booking-process steps — the four-step booking procedure advances with scroll position.
• Two-row counter-scrolling testimonial marquee — the rows travel in opposite directions, and stop entirely under reduced motion.
• Lookbook lightbox — Esc and arrow keys, with focus restored on close.
• Booking form — desired service, preferred date and time, and contact details, with inline validation (and an explicit note that a demo form sends nothing).

Engineering, performance, accessibility

• Build-free static site — plain HTML, CSS and vanilla JS. With no framework or bundler, the deployed output is the source, so nothing can rot at maintenance time.
• Deployed on Cloudflare Pages — served from the edge, with a _headers file applying security headers (X-Content-Type-Options, Referrer-Policy, X-Frame-Options, Permissions-Policy) and a one-year immutable cache for static assets. Unknown paths return a branded 404 page with a real 404 status.
• Images — everything converted to WebP, every img carrying explicit width/height so there is no layout shift. The hero loads eagerly, everything else lazily.
• Motion — animations touch only transform and opacity so they stay on the compositor, and every auto-playing motion stops under prefers-reduced-motion.
• Accessibility — skip link, semantic landmarks, keyboard-operable tabs, lightbox and mobile navigation, visible focus rings, live regions for form status, and WCAG AA contrast.
• SEO — title, description, canonical, Open Graph, Twitter card and vertical-appropriate JSON-LD structured data.

Result

Live demo: ononc-lumina-salon.pages.dev

This is a fictional-brand demo built by ononc to show production quality. It is not a real business, and the inquiry forms do not send anything. The photography is generative-AI imagery created for this fictional brand; the site footer states that no real people or places are depicted.