Slate
The design system
Slate

Engineered calm for men's aesthetics — graphite, steel, straight answers. The complete creative direction: how a Slate designer thinks, then every component in that voice.

Men's aestheticsPlan-firstPrivate
Philosophy
Before color, before type — the feeling.

Engineered calm. Maintenance, not makeover.

Feels like

A tailor's fitting roomLeicaConcrete and steelA quarterly reviewAesop for menMonocleA quiet gym at 6amDiscretion

Never

Gym-bro chromeBarber-shop kitschWhisky-and-leather cosplayNeon MAN CAVELocker-room jokesHype
Slate reference
Numbers over adjectives. Program over pampering.
Design principles
The guardrails every decision answers to.

Always

  • Hard grid, hard alignment
  • One steel accent, used sparingly
  • Numbers stated plainly
  • Graphite panels for emphasis
  • Matte everything
  • Privacy signals forward

Never

  • Gradients or gloss
  • Rounded-friendly corners
  • Stock gym imagery
  • Aggressive black-and-red
  • Script or serif display
  • Bro copy ("crush it")
Photography direction
The single biggest lever.

Shoot

Men in treatment, at easeCool window lightConcrete, slate, steelCharcoal linenHands at workCalm male portraits

Avoid

Gym floorsBeards-and-barbers clichésGolden-hour warmthParty colorSyringe close-upsFlexing

Cool, mid-toned, and matter-of-fact — treatment shown the way a good watch ad shows movement: precisely, without shouting.

Motion language
Not what animates — how it moves.

Slate moves like a machined part — one direction, no bounce.

Short linear slides, instant settles, a counter on the stats. Nothing eases in and out playfully; everything arrives and stops.

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 it speaks.

Sounds like

Direct, dry, quietly confident. Costs and timelines stated up front.

"Look sharp. Stay subtle."

Never says

"Pamper yourself." "Man up." Exclamation points. Anything that sounds like a protein-powder label.

System rules
Corners · shadow · grid · texture · shapes.

Corners

2px. Machined, not decorative. The panel edge is the signature, not the radius.

Shadow & elevation

Flat. Depth comes from graphite panels overlapping imagery — never from drop shadows.

Texture

Concrete, slate, charcoal linen — photographed, not simulated. Cool paper ground.

Recurring shapes

The offset panel, the left rule-rail, the stat figure, the index tag.

Grid & spacing

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

Accessibility

Contrast clears WCAG AA. Body ≥ 15px. Tap targets ≥ 44px. Reduced-motion honored.

Why choose Slate
You're picking a perception, not a palette.
Best forNot ideal for
Men's aesthetics · hair restoration · TRT-adjacent clinics · executive clientele · privacy-first positioningFeminine-leaning medspas · playful brands · spa-day pampering positioning · glamour-forward clinics

Slate is how a men's clinic earns trust without raising its voice.

Reference board
The visual source of truth — men in treatment, cool light, concrete and steel, charcoal linen. Engineered calm, never gym-bro. Curate to ~12.

4 shown — male treatment moments, matte materials, disciplined light. The through-line: engineered calm — never chrome, never neon.

Palette
Cool paper, machined steel, graphite panels. Engineered calm — never black-and-red aggression.
Six tokens
Paper#eceef0
Fog#d4dade
Steel#4a6072
Deep steel#33475a
Graphite#1a1e22
Carbon#14171a
Typography kit
Choose the pairing. Never Fraunces, never a tracked-caps eyebrow.
Pairing A · Engineered
Look sharp. Stay subtle.
Aesthetic maintenance for men — planned quarterly, dosed conservatively, never obvious.
Archivo  +  IBM Plex Sans
Pairing B · Technical
Maintenance, scheduled.
A standing appointment for looking rested — quiet, exact, on the calendar.
Space Grotesk  +  IBM Plex Sans
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.
Slate
Steel
Linen
Imagery
Curation & art direction.

Art direction: men at ease in treatment, cool matte grade, hard alignment, the graphite offset panel 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 sharp. Stay subtle.

Aesthetic maintenance for men — planned quarterly, dosed conservatively, never obvious.

Book an assessment
Hero — full-bleed, overlaid

Maintenance,
scheduled.

See the plan
Hero — asymmetric typographic

Discipline, not decoration.

A results program for skin and hair — and for looking less tired than you are.

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.
Measured·Private·Scheduled·Exact·Understated·Measured·Private·Scheduled·Exact·Understated·
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
Nobody noticed. That was the point.
The Slate philosophy
The page — one continuous composition
How the components relate. Rhythm, not a parts bin.

Look sharp. Stay subtle.

Aesthetic maintenance for men — planned quarterly, dosed conservatively, never obvious.

Book an assessment
4.9★
Google rating
112
Reviews
Physician-led
Every treatment
Houston
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. Marcus Hale

MD · Board-certified · 13 yrs

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

Nobody noticed. That was the point.

Ready when you are.

Book a consultation
Alloy
Houston · By appointment only · (512) 555-0163
Signature moments
The visual signatures that repeat until they become Slate.
The offset panel
Rule-rail
04
Stat figure
SL-06
Index tag
Hairline grid
Graphite field
Steel wash
Machined corner
Material library
Slate is materials before it is color.
Graphite
Steel
Concrete
Matte glass
Charcoal linen
Gunmetal
Fog
Paper
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 Slate — light, material, quiet
  2. Whitespacethe material; never fill it
  3. Typographybig-serif vs tiny-caps scale jump
  4. Materialconcrete, steel, slate, charcoal linen
  5. Colorthe quietest lever — one earthy accent
  6. Buttonslast — sharp, hairline, silent
Emotional progression
How a visitor should feel, scroll by scroll.
ArrivalRecognitionProofPlanConfidenceBooking
Before → After
The same clinic, ordinary and then Slate — 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
Slate
Alloy
AboutTreatmentsTeamVisit
Book
Look sharp. Stay subtle.

Aesthetic maintenance for men — planned, private, precise.

Book an assessment