Skip to content
Brian Bautista, home
← All workIdentity & Web

Éclat Aesthetica

A med spa's whole identity and its website, built solo — logo system, brand book, photography, and a site that books appointments.

The simple éclat lockup: the wordmark and its four-point star above the words SPA & WELLNESS in spaced capitals.
Client
Éclat Spa & Wellness
Year
2026
Status
Live
Live
eclatazmedspa.com

Before

A lease, two lasers, and no brand.

A new medical spa in Phoenix had a lease, two lasers, and no brand. No logo, no colors, no typography, no photography, and no website — and a grand opening already on the calendar. Everything a client would use to decide whether to trust them with their face had to exist, and it had to exist at once.

  • NoneLogo
  • NoneColors
  • NoneTypography
  • NonePhotography
  • NoneWebsite

What I built

The whole identity and the site it lives on. A logo system of four lockups in five colorways, traced from a master file into real vector art and shipped as a brand book. A photography direction, shot on location. Then a Next.js site built on that system — a scroll-pinned hero, a treatment catalog, real clinical before-and-afters, and a booking path wired to the spa's actual scheduler.

The mark

Plate I

One layered master. Four lockups, five colorways — traced out to real vector art rather than exported as four pictures of a logo, and handed over as a brand book.

The éclat wordmark: a flowing lowercase italic serif with a rose-gold gradient sweeping across it.
Wordmark
The simple éclat lockup: the wordmark and its four-point star above the words SPA & WELLNESS in spaced capitals.
Simple — the lockup the site itself uses
The stacked éclat lockup: the wordmark above AESTHETICA above SPA & WELLNESS, centered.
Stacked — for a square, a stamp, an avatar
The horizontal éclat lockup: the wordmark and star on one line, followed by Aesthetica over SPA & WELLNESS.
Horizontal — for a nav bar, a sign, a letterhead
  • 4Lockups
    • Wordmark
    • Simple
    • Horizontal
    • Stacked
  • 5Colorways
    • RGB
    • Ink
    • Cream
    • Black
    • White
  • 2Formats
    • SVG
    • PNG
  • 40Files delivered

Four lockups, in five colorways, in two formats: forty files delivered.

The toolchain

Plate II

The logo is not four exported PNGs. It is a build: a layered master and outlined type go in, a tracer and a gradient solve run over them, and forty files come out the other end.

  1. 01 Master

    • Layered PSDOne source of truth(Source)
    • Font outlinesopentype.js, no fonts to ship(Source)

  2. 02 Trace

    • potraceRaster → vector paths(Process)

  3. 03 Fit

    • Gradient solveLeast-squares, pixels → linearGradient(Model)

  4. 04 Build

    • 4 lockupsWordmark, simple, horizontal, stacked(Process)
    • 5 colorwaysRGB, ink, cream, black, white(Process)

  5. 05 Ship

    • SVG + PNG40 files, both formats(Output)
    • Brand bookPDF, client-facing(Output)

The rose-gold sweep across the wordmark is a real SVG gradient, not a raster. potrace gives you flat paths; the sweep is least-squares fitted back out of the source pixels and rebuilt as a linearGradient — so the mark scales to a building sign without turning into a photograph of a logo.

The rooms

Plate III

A photography direction, then the shoot: the spa's own rooms, its own reception, and an editorial still life for each retail line.

A treatment room at the spa: a made bed under warm light, cabinetry, and a laser arm folded back against the wall.

The rooms are real. Shot on location, straightened and graded.

The spa's reception desk, with a product display shelf behind it.
Reception, and the retail wall behind it.
An editorial still life of the Sciton JOULE device and its HALO handpiece, lit and grouped on a warm neutral background.
Editorial still life, built from the manufacturer's own product imagery and regraded to the palette.
An editorial still life of a skincare product range, grouped into a single shot in the brand's warm palette.
One shot per retail line, each built in that line's own palette.

The site

Plate IV

Seven pages on the system the plates above describe: a scroll-pinned hero, the treatment catalog, real clinical before-and-afters, and a booking path wired to the spa's own scheduler.

The Éclat Spa & Wellness homepage: the rose-gold éclat wordmark and its four-point star centered over a dimmed photograph of a real treatment room, above the line 'scroll or tap to begin'.
The live homepage. The lockup shrinks and travels into the nav's wordmark slot as you scroll — a measured FLIP, not a crossfade.
The Éclat services page: the headline 'Light that transforms' in Warbler, beside a photograph of a BBL laser treatment and a description of the Broadband Light service with its concern tags.
Services. Every treatment is a row: the photograph, the claim, the concerns it treats, the price.
Further down the Éclat services page, showing the HALO hybrid fractional laser section with its own photography and treatment detail.
The catalog runs deep — injectables, laser, microneedling, facials, peels, waxing.
The Éclat reviews page, showing the before-and-after gallery laid out with both images visible side by side.
Before and after, side by side — not a drag slider. A slider hides half the story, and this is clinical photography.
The Éclat about page, with editorial serif headlines over a photograph of the spa interior.
The Éclat contact page, with the booking form and the spa's hours and address.
The Éclat homepage on a phone: the same wordmark lockup over the treatment-room photograph, with a stacked mobile navigation.
The Éclat services page on a phone, with each treatment stacked into a single column.

Colophon

Outcome
Concept to live
5 wks
Logo files delivered
40
Pages shipped
7
Contrast, measured per token
AA

Live at eclatazmedspa.com, and still being revised with the client — the last commits are their pricing and their opening hours, not mine.

Role

Solo, and all of it: the identity, the logo system and its build toolchain, the brand book, the photography direction and the shoot, the design, the front end, the SEO, and the deploy. The client's only job was to say yes.

Live
eclatazmedspa.com
Built with
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Motion · Mangomint · Resend · Vercel · Adobe Fonts · potrace · opentype.js · Photoshop
Next

Analytics Dashboard

Trusted Media Brands · 2026

Back to projects