The design system
Alabaster

Quiet luxury — warm stone, architectural restraint, editorial serif. The complete creative direction: how an Alabaster designer thinks, then every component in that voice.

Alabaster
Philosophy
Before color, before type — the feeling.

Quiet confidence. Luxury that is discovered, not announced.

Feels like

Aman TokyoAxel VervoordtTravertineMorning lightCashmereArchitectural DigestAesopNorm Architects

Never

GlamourHot pinkGold overloadInfluencer beautyDecorative flourishRing lightsHype
Alabaster reference
Warm light, natural materials, unhurried care.
Design principles
The guardrails every Alabaster decision answers to.

Always

  • Restraint over cleverness
  • Asymmetry & editorial hierarchy
  • Whitespace as the material
  • Natural materials — stone, linen, wood
  • Architecture over decoration
  • One confident image per moment

Never

  • Gradients
  • Glassmorphism
  • Loud or bouncy animation
  • Rounded pills everywhere
  • Drop shadows as decoration
  • Tracked-caps eyebrows & Fraunces
Photography direction
The single biggest lever — get this wrong and nothing else matters.

Shoot

Morning lightSoft shadowsWarm neutralsArchitectureLinenStoneWoodHandsQuiet momentsShallow depthNegative space

Avoid

Influencer posesHeavy makeupRing lightsBlue LEDsOversaturationSyringe close-upsStocky smiles

Grade desaturated and warm (≈ saturate .85, a whisper more contrast). Crop tight to material and light; loose around the subject.

Motion language
Not what animates — how it moves.

Alabaster moves like a curtain in still air.

Slow blur-and-rise reveals (opacity + 18px, ~900ms, cubic-bezier(.4,0,.1,1)). A barely-there image scale on hover. The stamp turns once every 20s. No spring, no bounce, no parallax tricks. When in doubt, move less.

Layout DNA
The recurring skeleton, so nothing drifts.

Image left / text right, or offset — asymmetric, never centered-and-symmetrical. Lots of breathing room. A big-serif-versus-tiny-caps scale jump carries the hierarchy. Text columns stay narrow (≤ 42ch). One idea per screen.

Image left · text right · asymmetric — narrow column
Refreshed,
never overdone.

A plan built around your face — quiet, considered, and entirely your own.

Full-bleed image · offset text · one idea per screen
Considered care,
start to finish.
Voice
How Alabaster speaks.

Sounds like

Quiet. Restrained. Architectural. Understated. Outcome over procedure.

"Look refreshed. Never overdone."

Never says

"Amazing." "Transform your life!" Exclamation points. Unit counts as a flex. Hype of any kind.

System rules
The mechanical guardrails — corners, shadow, grid, texture, shapes.

Corners

Sharp (0–4px) everywhere, with one exception: the architectural arch on hero & feature imagery. Never a pill.

Shadow & elevation

Near-none. A 1px hairline does a shadow's job. If unavoidable: soft, ambient, low (0 30px 70px −44px, ink 18%). Elevation = whitespace + a line, not a raised box.

Grid & spacing

1180px container · 12 columns · generous margins. Scale 8 / 16 / 24 / 40 / 64 / 96. Rhythm over symmetry.

Texture

Warm paper & travertine washes at low opacity; a faint hairline grid. Matte, never glossy. No film grain (that's Velvet).

Recurring shapes

The arch (the seal), the thin vertical rule, the hairline, the sharp rectangle, the rotating ring. Circles are rare and deliberate.

Accessibility

Espresso-on-ivory clears WCAG AA. Body ≥ 15px. Tap targets ≥ 44px. Reduced-motion honored. Restraint is also an accessibility strategy.

Why choose Alabaster
The strategic frame — you're not picking a palette, you're picking a perception.
Best forNot ideal for
Luxury medspa · plastic surgery · architecture-forward clinics · minimal, mature brands · quiet-luxury positioningYoung injector / TikTok clinics · bright, playful brands · high-volume value clinics · anyone who wants the site to "pop"

Alabaster is how a luxury editorial clinic tells its story.

Reference board
The visual source of truth — real medspa interiors, treatment moments, and natural materials. Warm, natural light, never clinical. Curate to ~12.

5 shown — treatment moments, warm interiors, and natural materials. The through-line: natural light, warm neutrals, quiet — never blue-LED clinical or influencer glam.

Palette
Ivory grounds, espresso ink, one earthy accent. Never pure black or white.
Six tokens
Ivory#faf7f1
Oat#f1eadf
Stone#e4dccd
Bronze#8a6d52
Umber#5e4a38
Espresso#2b2420
Typography kit
Choose the pairing. High-contrast serif display + a quiet sans — never Fraunces, never a tracked-caps eyebrow.
Pairing A · Editorial
Ageless, effortless.
Every treatment begins with a conversation — a plan built around your face, your goals, your budget.
Cormorant Garamond  +  Jost
Pairing B · Modern
Quietly considered.
A plan shaped around your face — never a template, never a hard sell.
Spectral italic  +  Karla
Logo directions
Three wordmark treatments for the same name.
Icon style
Thin single-weight line, sharp corners.
Line set
Background patterns
Quiet structure, used at low opacity.
Oak grain
Linen
Travertine
Imagery
Curation & art direction.

Art direction: warm architecture, stone & interiors over faces. Desaturated warm grade, soft natural light, generous negative space inside the frame. Arch-topped crops as the signature.

Buttons
Six treatments — sharp, editorial, no pills.
Set
Navigation
Three concepts.
Centered editorial · stacked
Minimal · single-row left
Transparent over stone
Heroes
Distinct executions of one job.
Hero — editorial split (signature arch)

Look refreshed. Never overdone.

Subtle optimization for the discerning face — timeless balance through low-volume protocols.

Book a consultation
Hero — full-bleed, overlaid

Transformation,
quietly.

Discover
Hero — asymmetric typographic

Cultivating timeless balance.

A face that reads as rested, not treated — the discipline of doing less, exceptionally well.

Reviews — marquee
Two rows, opposite drift, slow, pause on hover. Vanilla CSS — no library, no avatars-from-a-CDN.
★★★★★
The most natural results I've had. They talked me out of more than I asked for.
— Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic.
— Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted.
— Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends.
— Verified review
★★★★★
They explained everything and never upsold me. Rare.
— Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny.
— Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for.
— Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic.
— Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted.
— Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends.
— Verified review
★★★★★
They explained everything and never upsold me. Rare.
— Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny.
— Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for.
— Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic.
— Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted.
— Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends.
— Verified review
★★★★★
They explained everything and never upsold me. Rare.
— Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny.
— Verified review
★★★★★
The most natural results I've had. They talked me out of more than I asked for.
— Verified review
★★★★★
Felt like a real consultation, not a sales pitch. I finally trust a clinic.
— Verified review
★★★★★
I look rested, not “done.” Exactly what I wanted.
— Verified review
★★★★★
Honest, unhurried, and the room is beautiful. I've sent three friends.
— Verified review
★★★★★
They explained everything and never upsold me. Rare.
— Verified review
★★★★★
Subtle, expert, and genuinely kind. Worth every penny.
— Verified review
Editorial marquee
An oversized word-band that drifts — the fashion-house move, in serif.
Refined·Restrained·Considered·Natural·Timeless·Refined·Restrained·Considered·Natural·Timeless·
Gallery — masonry + blur-fade
Columns masonry, each image blurs up on scroll.

Masonry + scroll blur-fade. Imagery placeholder — real client photography drops in per build.

Large testimonial
One quote, held in whitespace.
You should leave looking like you — on the best day you can remember.
The Alabaster philosophy
The page — one continuous composition
How the components relate. Rhythm, not a parts bin.

Look refreshed. Never overdone.

Subtle optimization for the discerning face — timeless balance through low-volume protocols.

Book a consultation
4.9★
Google rating
112
Reviews
Physician-led
Every treatment
Scottsdale
By appointment

Start with what's on your mind

01

Fine lines

Botox, softened, never frozen.

02

Volume

Filler — cheeks, lips, jaw.

03

Texture

Microneedling, peels, laser.

Your provider

Provider portrait

Dr. Jordan Avery

MD · Board-certified · 12 yrs

"I aim for you on your best day — refreshed, not done."

You should leave looking like you — on the best day you can remember.

Ready when you are.

Book a consultation
Lumière
Scottsdale · By appointment only · (512) 555-0163
Signature moments
The visual signatures that repeat until they become Alabaster.
The arch
Hairline divider
Aa
Editorial serif
Rotating seal
Narrow body
One oversized image
Breathing room
The thin rule
Material library
Alabaster is materials before it is color.
Plaster relief
Limestone
Linen
Amber stone
Bronze
Paper
Warm plaster
Concrete
Cropping language
One image, five crops.
Wide
Tall
Close
Editorial
Detail
Art-direction priority
How the aesthetic actually works — in order of what matters.
  1. Photographyhalf of Alabaster — light, material, quiet
  2. Whitespacethe material; never fill it
  3. Typographybig-serif vs tiny-caps scale jump
  4. Materialstone, linen, oak, bronze
  5. Colorthe quietest lever — one earthy accent
  6. Buttonslast — sharp, hairline, silent
Emotional progression
How a visitor should feel, scroll by scroll.
ArrivalCalmTrustLuxuryConfidenceDecision
Before → After
The same clinic, ordinary and then Alabaster — how the direction transforms something generic.
Typical medspa
HomeServicesAboutBlogContact
BOOK NOW
Your Beauty, Our Passion

The #1 rated medspa — look and feel your best!

BOOK NOWCALL TODAY
Botox
Fillers
Laser
Facials
Weight Loss
Alabaster
Lumière
AboutTreatmentsTeamVisit
Book
Look refreshed. Never overdone.

Subtle optimization for the discerning face — timeless balance.

Book a consultation