Protecting What Matters Most, One Roof at a Time.

A roofing system extracted from guardianroofing.com — institutional navy, a single gold action colour, pill buttons, and a certification-heavy proof stack. Thirty-three patterns, every one transcribed from a live section.

guardianroofing.comSource
Roofing & exteriorsType
#003366 / #ffc323Primary
2026-07-22Captured

Four doors

What makes it recognisable

One action colour

Every CTA on the entire site is #ffc323 at a 70px pill radius with a navy label. There are no ghost buttons and no second accent.

The two-tone wedge

A right triangle with a hard-stop navy/gold gradient at 30%, clipped behind the shield mark. Found in the CSS sweep, not the DOM sample.

A dissolving marquee

Certification marks scroll on a 20s loop under a mask gradient that fades them out at both edges instead of clipping.

Navy headings

Headings are brand navy, never black. Body prose is a slate #383f51. The page never goes fully neutral.

Files

_shared.css

Tokens and every component class. The only stylesheet any page links.

brand-spec.md

Extraction rule, CSS-sweep findings, tokens, voice anchors, full crawl-scope log.

palettes.json

Guardian Navy (canonical) plus Cedar, Slate, and Ironwood recolours.

assets/guardian-roofing-brand/

Vector shield, white lockup, 30 photographs, 7 certification marks, 2 state maps.