Concept project
Juniper & Sage Hair Studio
A complete working concept site for a fictional hair salon. Raijin Studios is a new studio, so we built the kind of site we would make for a real appointment-based business, and you can try the booking flow yourself.
The brief
Juniper & Sage Hair Studio is a fictional salon. The business, its team and any reviews or ratings in the demo are placeholder content, written to show how real content would work.
The brief we set ourselves: an appointment business needs a site that feels like the studio, shows prices openly and makes booking feel effortless on a phone.
Goals
- Convey the calm, personal feel of the studio from the first screen.
- Show services and prices clearly so visitors do not have to call to ask.
- Make choosing a day and time to book simple on a small screen.
- Keep the page light and fast, with no trackers or heavy scripts.
Design decisions
A menu you can scan
Services sit in a tabbed menu with prices, so visitors compare options quickly without leaving the page.
A human story
A short studio story and a team section make the business feel personal rather than generic.
Booking close at hand
A booking widget with day and time selection is reachable from the first screen and from the menu.
Soft, readable design
Cormorant Garamond headlines and Manrope body text, a calm palette and generous spacing suit the brand while keeping text contrast strong.
Signature effect: soft reveal
The hero text rises into place one line after another, the arches unfold and a blush-coloured blob drifts slowly behind them. The looping parts only run for visitors who have not asked for reduced motion.
Mobile-first decisions
- The phone layout was designed first, then enhanced for larger screens.
- The service menu tabs and the booking day and time pickers are sized for thumbs.
- Visit details, hours and contact options are one tap away.
- Text and buttons stay readable without zooming.
Features in the demo
Everything below is actually present in the live concept site, which you can open and try.
- Tabbed service menu with prices
- Studio story
- Team section
- Booking widget with day and time selection
- Visit, hours and contact details
Measured Lighthouse scores
- 98Performance
- 96Accessibility
- 96Best practices
- 91SEO
Measured on 2026-10-15 with Lighthouse 12.8.2, mobile form factor. Each demo was audited from a local web server on this machine using Lighthouse's default mobile emulation and throttling, headless Chromium, one run per demo. The server sent the demo's real security headers but not the noindex header used on the showcase, because a real client site would be indexable. Scores vary a few points between runs and machines.
Tech and security
- Hand-coded HTML and CSS with a small amount of vanilla JavaScript, with no framework or page builder.
- Self-hosted fonts, so no third-party font requests.
- A strict Content-Security-Policy with no inline code, enforced by our build scan.
- No trackers, no cookies and no third-party scripts.
What we'd do for a real client next
- Connect the booking widget to the salon's real calendar and send confirmation emails.
- Replace placeholder team and studio content with real photography and words.
- Add LocalBusiness structured data and align the Google Business Profile.
- Add a care plan so hosting, updates and price changes are handled.
Ready for a faster, safer website?
Tell us about your business. We review your current site first, reply within one business day, and there is no obligation.