A marine blue and signal yellow remodeling system built on circles: circular service photographs, a circular badge straddling every image band, and a 3px-bordered outline button that never fills until you touch it. Extracted section by section from a national bath remodeling franchise and its recruitment host, which run one stylesheet between them.
Tokens, the type ramp, the four button variants and the signature anchors.
33 patterns, every one transcribed from a live section with its source URL.
The flagship demo, in the source homepage's real section order.
Live previews of the homepage and the three audience landings.
Service photographs are masked to full circles, a 180px bordered circle straddles the edge of every alternating image band, and team portraits use the same mask at a third scale. The rendered radius census returns 0px on 100 elements, 50% on 13, and 2px on 9. Nothing else exists.
Every button is a 2px-radius rectangle with a 3px border, 48 to 60 pixels tall, at weight 800. The main call to action is white with a signal-yellow border and ink text. It fills yellow only on hover. Zero elements on the source render as a pill, whatever its stylesheet declares.
The rotating hero paints solid black and lays the photograph over it at cover size. The source stops there: no gradient, no overlay, and a 3px text halo written into the page's own markup as the only thing holding the white headline. Measured, that headline lands at 1.01:1 on its worst pixel, so this kit raises the same black back over the photograph at 55% and both the headline and the teaser clear AA everywhere. The inner-page hero needs none of it, because its title sits on white paper above the photograph rather than on it.
It is the only face that renders anywhere on either host, and it is already a free Google family, so nothing was replaced and no display metrics were re-tuned. Weights in use run from 200 for the quote glyph to 900 for sub-navigation titles.
The source declares a pale #fbdc60 on its primary button border, then overrides it. What actually paints is #ffcc00, and the pale value survives on exactly one element type: a form submit input. Carrying the declared value would have shipped a visibly weaker call to action.
The consumer site and the franchise recruitment site serve a byte-identical 454KB stylesheet, so they are one system rather than two. Six patterns and a standalone FAQ live only on the recruitment host, and that host is also the only place statistics appear anywhere.
_shared.cssTokens and every component class. The only stylesheet the pages link.palettes.jsonHarbor (extracted) plus three luminance-matched variants.brand-spec.mdToken evidence, voice anchors, the 33-pattern inventory, crawl-scope log, divergences and the forbidden list.sections.htmlThe 33-pattern catalog, each with a source-URL citation.homepage.htmlFlagship demo in the source homepage's real h2 order.landing-1-showers.htmlService landing in the source's solution-page grammar.landing-2-collections.htmlGuided-selection landing built on the step module.landing-3-franchise.htmlRecruitment landing using the six franchise-host patterns.design-system.htmlSwatches, type ramp, buttons, cards, signature anchors.pages.htmlGallery of live page previews.index.htmlThis overview.assets/bath-harbor-brand/The brand mark plus nine source photographs, all referenced and audit-clean._crawl/The 928-page corpus both mandatory Phase 5 gates read. Gitignored, never deployed.