Studio Bloom — Beauty Salon Concept Site

The brief

Show what a premium authored beauty salon site should look like — not “a pink page with a price list and an Instagram button,” but an atmospheric digital space that conveys quiet, care and aesthetics before the visitor even reaches the booking section.

The “Quiet Luxury” concept: dusty rose and warm bronze instead of a shouting pink, serif headings (EB Garamond) for femininity, clean sans-serif (Manrope) for functional blocks, a light paper grain texture over everything — the feel of a premium catalogue rather than a landing page.

The solution

The starting point was a custom “Quiet Luxury” design system: a four-token primary palette (from a soft #a87176 to a deep #815154), a bronze secondary #765931, six cream surface containers, an EB Garamond (headings + italic accents) + Manrope (body) type pair, 8–24px rounded forms, soft shadows with a faint rose undertone. Four concept screens were designed against that system (home, services, masters, booking). From there — manual assembly into a complete one-pager with advanced animation and interactivity.

Bento services grid

Not a dry list — a card composition à la Apple/Linear: one large card (“Hair styling,” 2 columns) and 4 squares. Each — a big AI photo with a bottom-darkening gradient and crisp typography: uppercase category, serif title, secondary-light price. On hover — scale(1.1) via a 700 ms transition.

Multi-step booking with a live panel

4 steps in a single form:

1. Service — 6 button-cards with data-name/data-price/data-time attributes
2. Master — select with specialisation
3. Date + time — native <input type="date"> and 10:00–20:30 chip buttons
4. Contacts — name, phone, comments

To the right — a sticky “Your visit” panel. Clicking a service instantly updates the title (font-display, +50% size), duration and price via JS. Prices are formatted with separators (toLocaleString('ru-RU')). Submit morphs the button into ”✓ Booking confirmed — see you soon!”

Tabbed price list

24 services split across 4 sections (Hair / Nails / Face / Brows). The active tab is a solid primary fill, the rest are outlined. Below — a large card with two columns and thin dividers between items. Each row: serif title, small-print duration and description below, primary-coloured price on the right.

Masters with colour palettes

3 cards with 4:5 portraits, serif names, uppercase specialisation, years of experience, and — the design hook — three colour dots representing each master’s palette (hair tones for the stylist, gel polish shades for the manicurist, brow pigments for the brow artist). A “Top stylist / Nail expert / Makeup artist” badge sits top-right.

Quiet Luxury hero

“Beauty,” assembles character by character with 80 ms delays and a slight rotateZ(-6deg) flourish. “Unfolds” runs in italics with a pink shimmer gradient (linear-gradient + background-position). Behind the content — Ken Burns on a salon interior render at 0.3 opacity, 28 translucent pink petals drift upward at varying speeds and offsets. The content follows the cursor (mouse parallax ±12px). Over everything — a paper grain texture via an SVG feTurbulence filter with mix-blend-mode: multiply.

Soft background animations

In dark and mid-tone sections:

• Pink dots field — blinking rose dots (14–20 per section) with individual 3–7 second rhythms
• Blob pulse — soft rose and warm bronze patches with blur(70px), pulsing every 14 s with individual delays
• Pulse-glow on the CTA — an expanding rose halo

All disabled under @media (prefers-reduced-motion: reduce).

The outcome

The site is live at bloom.nazarov-evgeniy.pro over HTTPS (Let’s Encrypt), loading in milliseconds (~58 KB index.html). No backend — this is a concept demo. For production: hook the booking flow to YClients or DIKIDI (standard beauty-CRMs in Russia), drop in real salon and master photos, add a promotions section and a Bloom Club loyalty page.

Architecturally ready to scale: a beauty trends blog, dedicated treatment pages (/services/keratin-treatment/), Telegram bot integration for appointment reminders — the structure and styles allow this without a refactor.

Tech stack

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, no build) + Vanilla JS
• Animations: CSS @keyframes (Ken Burns, blob pulse, letter reveal, shimmer, petals float-up, twinkle dots, pulse-glow), IntersectionObserver for scroll-reveal, SVG feTurbulence for the paper grain texture
• Typography: EB Garamond 400–600 (headings + italic accents), Manrope 400–700 (body), Material Symbols (icons)
• Imagery: AI art tuned to the brand palette + Unsplash for master portraits
• UX patterns: multi-step booking with sticky summary, tabbed price list without reload, bento grid with hover-zoom, native <input type="date">, time-chip selection
• Design stage: in-house “Quiet Luxury” design system (dusty rose palette, serif typography, shadows, radii, spacing tokens) for an authored beauty-salon brand concept
• Hosting: own VPS, Nginx + Let’s Encrypt SSL