Tokens, type and devices

Every value here was measured on the live site at 1440px and read out of its theme stylesheets. Token names are the theme's own, so --primary is charcoal and --secondary is crimson.

Colour

Ranked by painted area on the source homepage. Switch palettes with the control in the corner: only crimson and its two tints change.

--primary#232323 charcoal. Bands, cards, footer.
--secondary#c11e33 crimson. Slant, pills, section titles.
--tertiary#fad804 yellow. Markers only.
--gray#707070. Labels, card copy.
--band-grey#f4f4f4. Text band ground.
--accent-tintcrimson at 8%. Mission cards.

Type

Poppins on every heading, the system font stack on body copy (what the source actually renders). Sizes are the theme's own clamp() scale.

Heading one style

.h1-style · Poppins 700 · clamp(24px, 3vw, 48px)

Heading three style

.h3-style · Poppins 700 · clamp(23px, 3vw, 36px) · section titles take crimson whole

Heading two style

.h2-style · Poppins 700 · clamp(18px, 1.8vw, 28px)

Heading six style

.h6-style · Poppins 700 · clamp(18px, 1.9vw, 21px) · card titles

Body copy in the system font stack at 16px, line-height 1.5, colour #212529.

body · system-ui 400 · 16px

Buttons and fields

Full pills at weight 200. Every hover swaps ground and ink.

Red pill White pill Charcoal pill Yellow pill

Signature devices

The slant

clip-path polygon(0 0, 100% 0, 90% 100%, 0 100%) on one panel and polygon(10% 0, 100% 0, 100% 100%, 0 100%) on its neighbour, over a crimson ground. Used four times.

Welded pill

A white pill (radius 0 100px 100px 0) with a 150 to 176px crimson disc overhanging it by 56px top and bottom.

Crowned card

A charcoal 23px card with a 175px white disc pulled 120px above its top edge.

Licence tag

White 11px card with a 20px yellow edge; licence number in crimson Poppins.

Framed heading

A heading line between two 6px crimson rules that end in a hose nozzle and a plug.

Washed photo

Photo under a white, transparent, white vertical gradient plus a 65% white overlay.

Assets

Real photos and both logos from the source, under assets/plumber-redline-brand/.

AZP Services logo

logo-primary-gray.png · header and footer

AZP Services white logo
Technician working on pipes

photo-hero-technician.jpg · hero

Technician checking a heating system

photo-technician-heating.jpg · washed grounds

Electrician with a tablet at a panel

photo-electrician-tablet.jpg · CTA band

Collage of commercial work

photo-about-collage.png · about split

Commercial training facility

photo-review-facility.jpg · testimonial

Technician on a ladder at a commercial system

photo-mesa-technician.jpg · photo and text

Technician repairing a sink

photo-sink-repair.jpg · photo and text

Conduit on a building wall

photo-about-conduit.jpg · about

Repairman removing a kitchen faucet

photo-faucet-repair.jpg · spare, from the giveaway page

Licensed technicians

photo-contact-bg.jpg · contact card ground