Design system

Every colour below was confirmed by render across four page types, not by declaration count. Geometry, type and interaction states were read off the source's own stylesheet rather than inferred.

Colour

Brand#00609C
Brand deep#015779
Brand ink#016188
Signal#FFCC00
Gold#DE9312
Slate band#4F5C7E
Ink#292929
Hero floor#000000
Ground 1#F1F2F2
Ground 2#F8F8F8
Link#0074BD
Alert navy#254061

Ratios measured against white: brand 6.66:1, brand deep 7.95:1, brand ink 6.85:1, slate 6.64:1, alert navy 10.58:1, link 4.96:1. The signal yellow measures 1.51:1 on white, so it is a border and a ground and never a text colour on paper.

Type

Display, hero headline

Your Brand New Bath Awaits

Section heading

Trustpoints You Can Count On

Band title

Complete Shower Design and Installation

Card heading

Step 1: Pick Your Palette

Lede

We provide a full range of custom design options as well as curated concepts for every level bath remodel.

Body

Nunito Sans is the only family that renders on either host. Weights in use are 200 for the oversized quote glyph, 400 for body prose, 600 for headings, 700 for review headings and 800 for the primary button label.

Buttons

Extracted geometry: 3px border, 2px radius, 48 to 60px tall, weight 800, transition all .15s linear. The source resolves every button hover to white on #de9312 at 2.53:1; this kit keeps ink on gold at rest and moves the hover to the marine blue. The divergence is logged in brand-spec.md.

Cards and chips

Circular service card

Showers

Circular service card

Bathtubs

Love my new bathroom.

Love my new bathroom. Bath Tune-Up had great recommendations for tile and a vanity that helped make my decisions easier!

Lee Ann S. - Charleston, SC
Radius 2px Radius 50% Shadow 0 3px 6px Border 3px Transition .15s linear

Signature anchors

Circular image mask

Rendered on 13 elements: four service cards, the overlapping badge, and team portraits. It is the one shape the system repeats at three different scales.

Overlapping circular badge

180 pixels wide, a 4px white border, and a negative top margin so it straddles the edge of the image band above it. At desktop widths it hangs off the side of the image entirely.

Oversized quote glyph

A 170px hairline double-quote in brand ink, bled off the left edge of every review. Parked with top and left offsets only, so it can never intrude into the resting card the way a bottom offset would.

Solid black hero floor, plus one added scrim

In the source the floor is not a scrim and not a gradient. It is declared as a background colour under the photograph, which is what keeps the headline resolvable to a visitor on a slow connection, and legibility over the image itself is left to a 3px text halo, text-shadow: 0 0 3px #525252, which the theme stylesheet does not carry and the per-page markup does. A halo is not measurable, and the white headline reads at 1.01:1 on its worst pixel, so this kit adds the one layer the source lacks: the same black at 55% over the photograph, which puts the headline at 4.76:1 and the teaser at 4.81:1. All three devices are scoped to the rotating hero: the inner-page hero sets its title in charcoal on the white page instead.

Assets

Hero photograph one
hero-1.webp
Hero photograph two
hero-2.webp
Hero photograph three
hero-3.webp
Hero photograph four
hero-4.webp
Bathtub service card
card-bathtubs.webp
Shower service card
card-showers.webp
Full remodel service card
card-full-remodel.webp
Conversions service card
card-conversions.webp
Alternating module photograph
featured-experience.webp
Bath Tune-Up brand mark
logo-btu-full-color.svg