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

Éclat Aesthetica

The whole brand for a new med spa, and the site it lives on: a logo system, a brand book, the photography, and a website that takes bookings. Five weeks, start to finish.

Visit eclatazmedspa.com

One point of contact. The client's only job was to say yes.

The éclat wordmark: a flowing lowercase italic serif with a rose-gold gradient sweeping across it.
Client
Éclat Spa & Wellness
Year
2026
Status
Live

Before

A lease, two lasers, 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 patient 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

The site

Plate I

Seven pages, live right now at eclatazmedspa.com: a scroll-pinned hero, the treatment catalog, clinical before-and-afters, and a booking path wired to the spa's own scheduler. A stranger can book an appointment on it today — go and check.

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 homepage at rest. The lockup at full size, over one of the rooms from the shoot in Plate IV.
The same Éclat homepage after scrolling: the lockup has shrunk into a fixed navigation bar alongside About, Services, Reviews, Contact and a Book Now button, above the treatment-room photograph, a scrolling band of treatment names, and the welcome section.
The same page, scrolled. The lockup has travelled into the nav slot and the booking button has arrived with it. One element moving, measured frame to frame.
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.
About. Editorial serif, set over the spa's own rooms.
The Éclat contact page, with the booking form and the spa's hours and address.
Contact. The form posts into the spa's own scheduler, and the hours are theirs to change.
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.

The mark

Plate II

Under all of it: one layered master. Four lockups, five colorways, and a brand book that says which one goes on a sign, which one goes in an email signature, and what the colors are called.

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 III

A logo has to hold at thirty-two pixels in a browser tab and at four feet across a building. That only works as real vector art, so the mark is built, not exported: a layered master and outlined type in, a tracer and a gradient solve over them, forty files out.

  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 live SVG gradient. potrace gives you flat paths, so the sweep is least-squares fitted back out of the source pixels and rebuilt as a linearGradient: colour stops and an angle, with no resolution left to run out of.

The rooms

Plate IV

A photography direction, then the shoot: the spa's own rooms, its own reception, and an editorial still life for each retail line. Every photograph on the site above is one of these.

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.

Colophon

Outcome
Concept to live
5 wks
Pages shipped
7
People to manage
1

Logo, colors, typography, photography, website. Every one of those was missing at the start, and every one of them shipped. It is theirs to run now: the last commits on the repo 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.

Contrast
AA, measured per token
Built with
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Motion · Mangomint · Resend · Vercel · Adobe Fonts · potrace · opentype.js · Photoshop

Start a project

What do you need built?

Tell me what the thing has to do and who has to use it after I leave. We'll get on a call, and I'll tell you what it takes.

Start a project
Next

Magazine Cover Pipeline

Trusted Media Brands · 2026

Back to projects