Design System

Every token below was measured off the live DOM at 1440px on three different pages rather than read out of the stylesheet. On this source the two rankings disagree in both directions, and the render wins.

Colour

accent#2F3FF3
volt#D8F852
accent-deep#19238E
accent-lift#4452F4
ink-body#372f29
ink#221f20
paper-soft#f0f0f0
paper#ffffff

The blue measures 6.72:1 on paper and 2.43:1 on ink, so it carries white type on its own bands and never sits as text on the warm black. The lime measures 1.20:1 on paper, which is the arithmetic reason it is only ever a hover fill under black ink and never a ground. Twelve declared colours paint on zero elements across all three probed pages and are not carried, among them a complete teal palette declared 66 to 147 times each that belongs to a sister brand sharing the same stylesheet bundle. Twenty more dead custom properties are Bootstrap 4.1.3's stock palette.

Type

Hero · Oswald 700 · 50px over 53px at 1440 · uppercase · white on a black base

The Trusted Name in Garage Organization

Section head · Oswald 700 · 40px at 1440 · uppercase · underlined 4px in accent

Taking Garage Organization to the Next Level

Sub head · Oswald 700 · 28px · uppercase

Custom Garage Cabinets Create Valuable Living Space

Banner · Lexend Deca 500 · 50px over 53px · the one headline set in the body face

Lede · Lexend Deca 300 · 20px

We bring the best in custom garage storage and flooring solutions for you to explore in the comfort of your own home.

Body · Lexend Deca 300 · 16px over 1.5

Our designers help you with premier storage solutions for total garage optimization. All designs are custom to your specifications, including materials, styles, finishes, accessories and hardware.

Fine · Lexend Deca 300 · 13px

*Virtual consultations are not available at all locations.

Three families render on the source and all three are free Google faces, so nothing was substituted. The one correction is the display weight: the source loads Oswald 600 and forces 700, which the browser synthesises, and this kit loads the real 700 file and re-tunes heading leading from the source's measured values to 1.1. The underlined heading keeps line-height 2, which the 4px underline at .4rem offset needs. Six more families are requested in the same shared Google Fonts URL and render on zero elements.

Buttons

Every variant is a 48px pill with a 3px border, Lexend Deca 700 at 18px over 24px leading, the house shadow and a .15s linear transition, and every one of them flips to the lime with black ink on hover. The source's own variant names are unreliable, so these are named for what they render: the class it calls --orange is lime, and the one it calls --dark-blue is white with black ink.

Signature anchors

Parallelogram card image

A clip-path polygon at 10 and 90 percent, applied to every service card image. The system's only geometric device, and the only place it appears.

Underlined uppercase heading

Highly Rated by Our Happy Customers

A 4px accent underline at .4rem offset, on a line-height of 2 so the rule clears the descenders. White on the dark band, blue everywhere else.

Oversized quote glyph

We take pride in creating a garage space that works as hard as you do.

A 10rem double quote at minus 15px tracking, parked above the testimonial in the warm near-black.

Photo under a 90 percent flood

Inspiration Starts From Within

A cover photograph under a flat blue flood at 90 percent over a deeper blue base. Photo plus flood, never a gradient scrim.

Assets

PremierGarage on dark
logo, lightlogo-premiergarage-white.svg
PremierGarage in colour
logo, colourlogo-premiergarage-color.svg
hero Ahero-cabinets-honeycomb-lighting.webp
hero Ahero-epoxy-floor-wood-cabinets.webp
hero B+hero-premium-garage-flooring.webp
hero Bhero-black-garage-cabinets.webp
board Aboard-consultation.webp
board A-board-garage-storage.webp
board B+board-tj-hunt-garage-floor.webp
board Bboard-commercial-flooring-lab.webp
card Bcabinets-ltgray-slatwall.webp
card Bdream-garage.webp

One asset the source ships was found and deliberately not carried: a starburst seal whose claim is baked into the pixels. No text-carrying image was shipped in any form, and no gate in this skill can read a raster, so that call had to be made by looking.

Picker tags

garage trades franchise bold