Garage Voltage

Electric blue and a lime hover over a warm near-black, with uppercase condensed headings underlined in 4px of brand colour and card images clipped to a leaning parallelogram. A high-contrast trades system for garage flooring, cabinetry and storage, extracted section by section from a national franchise site.

Sourcepremiergarage.com
TypeGarage flooring, cabinets, wall and overhead storage
Primary#2f3ff3 on #ffffff
Captured28 August 2026

What this system is

Blue is the ground, lime is the hover

The blue paints every full-bleed band, every button border and every heading underline. The lime is declared 2,725 times and paints 10,922 square pixels on two elements: it belongs in hover, on the nav underline and on the social icons, and nowhere at rest. A kit that treated it as a section ground would look wrong in a way every mechanical gate would pass.

One geometric device, and it is CSS

Every service card image is clipped to a rightward-leaning parallelogram. The rule lives in a 13.3 KB style block injected into every page body, not in any of the four linked stylesheets, so downloading the CSS alone would have missed the system's only shape. The source photos stay plain photographs.

Square by default, pill on buttons

The rendered radius census returns 0px on 87 boxes, 50px on 5 and 50% on 4. Nothing carries a global corner. The button is a 48px pill with a 3px border and a flat white fill that flips to lime on hover, and there is no gradient anywhere in the system.

Real Oswald 700, not the source's faux bold

The source requests Oswald 600 only and then forces weight 700 on every h2 and h3, so every section heading on the live site is browser-synthesised bold. This kit loads the real 700 file and re-tunes the heading leading to suit it. The underlined heading keeps its line-height of 2, which the 4px underline needs.

Three probes, not one

Probing only the homepage would have killed four live tokens, including the site's own body ground, which the homepage's full-bleed bands cover completely. A fifth colour ranked fifth by painted area on every page and is not a ground at all: the arithmetic gives it away as a hidden mega-menu panel exactly one viewport wide.

Built from a 635-page franchise network

A national product tree, a 34-post blog, five local page templates behind 585 territory URLs, a commercial line and a second Canadian site the sitemap listed twice. The catalog is broad because the site genuinely runs that many templates, and a third of the crawl turned out to be the 404 page served at HTTP 404 behind linked-but-dead territory paths.

Files

_shared.cssTokens and every component class. The only stylesheet the pages link.
palettes.jsonVoltage (extracted) plus three luminance-matched variants.
brand-spec.mdVoice anchors, token evidence, pattern inventory, crawl-scope log, forbidden list.
sections.htmlThe 33-pattern catalog.
homepage.htmlThe flagship demo in the source homepage's real order.
landing-1-garage-flooring.htmlFlooring landing, following the source's product-page grammar.
landing-2-garage-storage.htmlStorage and cabinetry landing.
landing-3-commercial-storage.htmlCommercial landing, with the business-to-business form variant.
design-system.htmlSwatches, type ramp, buttons, cards, signature anchors.
pages.htmlGallery of live page previews.
index.htmlThis overview.
assets/garage-voltage-brand/Two SVG marks and ten source photographs, all referenced and audit-clean.