The look and feel of Shoals Mobile Wet Shine: cream-and-bronze editorial warmth, a display-serif voice, tactile paper texture, and smooth, unhurried motion. This page is the single source of truth for colors, type, buttons, and tone.
01 · Color
A warm, earthy palette
Cream paper and espresso ink do the heavy lifting; bronze is the single accent, used sparingly for emphasis and calls to action. Dark sections flip to espresso with bone-colored text.
Surfaces
Cream
#F5EFE3--creamPage base
Warm Sand
#EFE7D7--cream-2Alt band
Card
#FBF8F1--cardCards / panels
Bone
#F3ECDD--boneText on dark
Ink
Espresso
#2B2119--espressoPrimary ink / dark bg
Espresso Soft
#6B5A48--espresso-softSecondary text
Deep Espresso
#1C150E--deepFooter
Accent — Bronze
Bronze
#B9803F--bronzeDecorative / rules
Bronze Ink
#8A5730--bronze-inkText-safe accent
Bronze Bright
#C99456--bronze-brightHighlights / CTA
Bronze Rule
Fading hairline used under eyebrows
02 · Typography
Display serif meets clean sans
Coconat — Display Serif
Aa Bb Cc
ABCDEFGHIJKLM · 1234567890
Headings, eyebrows, the logo wordmark, and buttons. High contrast strokes; carries the refined personality. Weights: Regular (headings) & Bold (eyebrows, buttons).
Inter Tight — Sans
Aa Bb Cc
ABCDEFGHIJKLM · 1234567890
Body copy and interface text. Modern and highly legible. Weights: 400 / 500 / 700, plus italic for soft asides.
Display / H1
Showroom shine. Brought to your driveway.
Section / H2
What we clean
Subhead / H3
Every inch
Eyebrow
Mobile car detailing in the Shoals
Body
You're busy, we get it. So we come to you and clean your ride the right way. Park it at home or at work.
Accent italic
Not sure if we reach you? Just ask.
03 · Buttons
One class system, Coconat caps
Every button is .btn plus a color and a size (.btn-primary .btn-md). Uppercase Coconat, pill shape, and a soft light-sweep on hover. Hover any button to see the sheen.
Deeper shadow (--shadow-lift) for hero and featured media.
Selected
Bronze border + tint marks an active/selected state.
Shadows
--shadow-soft
--shadow-lift
1px hairline · rgba(43,33,25,.12)
Bronze rule & grain
A fading brushed-bronze hairline sits under most eyebrows. A near-invisible fractal-noise grain (4% opacity) overlays the entire page for a paper-like texture.
05 · Motion
Smooth, expensive, never flashy
Scroll reveals — content fades and rises in with a gentle stagger as it enters view (GSAP + ScrollTrigger).
Parallax — the hero video and closing image drift slowly on scroll.
Magnetic buttons — primary CTAs lean toward the cursor on hover.
Before / after — a draggable handle wipes between a dirty and clean shot.
Menus & galleries — the mobile menu eases open with a link stagger; the work gallery swipes.
Respectful — everything honors prefers-reduced-motion and falls back to instant.
06 · Voice & copy
Simple, warm, and local
Short sentences at about a 5th-grade reading level. Friendly and plain-spoken, which contrasts nicely with the upscale visuals. No jargon, no em dashes.
Do
"You're busy, we get it. We come to you."
"We bring all our own tools and supplies."
"Most jobs are done the very next day."
Don't
"Leverage our premium mobile solutions."
"Unparalleled, best-in-class detailing."
"Book now — slots are limited!"
07 · Imagery
Real, sunlit, in the driveway
Warm natural light, real vehicles at real homes. Candid work-in-progress moments over staged studio shots. Dark gradients are layered over photos so bone-colored text stays readable.
Lifestyle · we come to youAction · hands onDetail · proof of care
