nav

Two tiers. A white utility row holds the logo, the secondary links and a slate quote button; below it a full-width oxblood bar carries the primary service navigation. That bar is the largest painted use of the accent anywhere in the system, and on the live site the white row collapses to nothing on scroll while the oxblood bar stays.

home-hero

Three layers over the photograph, not one scrim: a flat black wash at 10%, then a black gradient across the bottom half at 85%. The picture stays bright at the top and the copy still lands on near-black. A slate trust strip sits inside the hero at the top, content is bottom-anchored and centred, and a 2.5px white hairline drops from the bottom edge. On the live site the ground is video; this ships a still.

internal-hero

The page opener on 75 of 81 crawled pages. Same bottom-anchored centred construction as the home hero, but the flat wash is 45% instead of 10% because there is no video motion to preserve. Breadcrumb, one uppercase h1, two controls.

content-img-slider

Long-form product argument beside a photo carrying a solid oxblood corner label. Quoting the verbatim anchor: "BECAUSE YOU DESERVE THE BEST".

horizontal-cards

The two-service split. Full-bleed photograph with copy welded into the bottom of the tile over a hard-stop dark gradient, so the label always has a painted ground.

logo-slider

Vendor rail on the grey band. The edge fade is the source's own hard-stop gradient, opaque to 8% then clear to 92%, rebuilt in CSS rather than approximated. Brand marks are slots: the source's logos are third-party artwork and are not mirrored here.

icon-cards

Three differentiator cards on white. Used on 28 of 81 pages, which makes it the workhorse trust block of the system.

testimonial-slider

Scroll-snap review rail on the grey band. Reviewer names are set at h4 weight in uppercase, which is heavier than most review patterns and is deliberate here.

split-content

Photo beside copy with a hairline-led claim list. The list rule is the same 30px 1px graphic as the pre-title, which is what ties the system together.

split-content-bg

Full-bleed photo band under the scrim with white benefit panels floated over it. The panels reassert their own ink, which is the rule this system needs most on dark grounds.

gallery-slider

Project rail at the source's own 524x360 aspect ratio. Swipes on a phone, no arrows required.

gallery-grid

The gallery in grid form, on 31 pages. Tiles use the source's 524x384 ratio and open a blurred-backdrop modal in the live theme.

accordion

FAQ stack on 21 pages. The chevron is the only place the source lets the oxblood touch a heading, and it is an icon rather than a coloured word.

cta

The closing band, on 37 pages and therefore the single most reused pattern in the system. One question, two controls.

step-cards

The process explainer, on 22 pages. Numerals are set at weight 600 rather than the system's usual 800, which is the source's own exception.

logo-image-card-slider

Square brand tiles with a hard-stop black gradient welded to the bottom edge. Hover lifts the copy by 10px, transcribed from the source's own rule.

image-cards

Product style grid with a Load More control. This is one of the few places the source writes a description under every label, so the kit carries them.

overlap-img-text

Photo beside three uppercase claims separated by hairline rules. The source ships labels only here, so this ships labels only.

location-cards

Service-area tiles, each with two controls. Backs the six areas-served pages and the footer's area links.

side-tabs

Vertical tab list beside a grey panel. The selected tab takes the oxblood ground, which is one of only four places the accent fills a shape.

basic-content

The long-form measure used by the legal pages. Narrow container, ink-soft body, headings dropped a level so a policy does not shout.

blog-posts

Post cards with the date set as an oxblood chip welded into the bottom-left of the thumbnail. Backs 36 blog URLs.

single-post

Article template with a sticky grey table of contents and prev/next pagination. The TOC header is the one heading in the system set at weight 400 in sentence case.

form

The quote form, transcribed field for field including the brand list and the financing question. Collapses to one column at 880px with inputs never narrower than 150px.

footer

Four columns on the darkest ground in the system, closing with the licence numbers. The logo switches to the lightness-inverted variant here.