05 — Skin studio & med spa

Maison Aura

A quieter way to care for your skin.

Industry: Skin studio & med spa
Type: Concept Project — Obsidian Webworks
Scope: 5-page site · Design · Build · Mobile
Typefaces: Newsreader / Hanken Grotesk

Maison Aura website homepage — Skin studio & med spa concept by Obsidian Webworks

Overview

The business & the brief.

Maison Aura is a fictional skin studio and med spa in Palm Beach that sees one guest at a time and prints every price on the menu. The site lets visitors browse treatments by concern, build an appointment as they read, and carry it straight into a four-step booking flow.

Maison Aura is a fictional business. This concept was designed and built by Obsidian Webworks to demonstrate what we create for beauty & wellness businesses. No client results are implied.

Design direction

Look, feel & voice.

A luxury beauty editorial system: light Newsreader display type and refined italics, tiny tracked Hanken Grotesk UI, warm ivory and blush, 1px rules, square 4:5 and 2:3 crops and rectangular thin-border buttons. It reads like a skincare house catalog crossed with a slow fashion magazine, which matches a studio whose whole promise is calm and no upsell.

#F5F1EA

#E9D6CE

#7A5E4E

#D8CFC4

#1C1A18

Newsreader — displayHanken Grotesk — body & interface

Key features

Built to bring customers in.

Treatments as a product catalog

Eleven numbered treatment tiles separated by hairline rules, each with concern, duration, price, a one-line note and an Add to appointment toggle.

Appointment tray

A drawer in the bottom corner collects chosen treatments, totals time and price (including from-prices and consult-only items) and persists across pages via localStorage.

Filter by concern

Hydration, Clarity, Calm, Renewal, Hair and Brows chips filter the catalog live, hide empty categories and announce the result count.

Four-step booking with an appointment card

book.html picks up the tray, then walks through a keyboard-navigable calendar, duration-aware time slots and validated details before printing a framed appointment card.

The Ritual in four slow steps

The home page sets the visit out as Arrive, Look, Treat and Rest in a staggered, descending editorial sequence.

Team portraits with hover notes

4:5 portraits reveal a short studio note on hover or focus on desktop and become a swipeable scroll-snap row with notes below on phones.

Mobile thumb-reach booking

A sticky bottom Book bar turns into the tray summary once treatments are added and opens as a bottom sheet; the menu is a full-screen ivory overlay with large serif links and one image.