Phoenix · Scottsdale · Mesa · Tucson, AZ

Arizona Roofers

A red-on-white roofing system extracted from arizonaroofers.com. Its signature is Archivo run at both ends of its weight axis — 72px at weight 100 for the hero display, 48px at weight 800 for the stat numerals — plus an inverted hero hierarchy, a solid-red scrolling quote band, and circled unicode process numerals.

Sourcearizonaroofers.com
TypeRoofing contractor · trades
Primary#e11b14 · #1f0a0c
Captured2026-07-24

Start here

Design System

Tokens, the two-extreme Archivo ramp, buttons, cards, signature anchors.

Sections

42 patterns, every one transcribed from a live arizonaroofers.com section.

Homepage

The flagship composition, hero to footer, assembled from the catalog.

Brand Spec

Voice anchors, extraction notes, dead-token list, crawl-scope log.

Files in this kit

_shared.cssTokens plus every component class. All pages link only this.
palettes.jsonArizona Red (canonical) · Desert Teal · Copper Sun · Monsoon Indigo.
brand-spec.mdVoice, colour extraction, type rationale, forbidden list, crawl log.
design-system.htmlKitchen-sink reference.
sections.html42-pattern block library, all signature.
homepage.htmlFlagship demo page.
landing-1-service.htmlService landing · foam roofing grammar.
landing-2-city.htmlCity landing · Phoenix grammar.
landing-3-estimate.htmlOffer landing · free-estimate grammar.
pages.htmlGallery linking all four compositions.
assets/arizona-roofers-brand/Logo (white wordmark, red star) and 9 real site photos.

Quick characterizations

Vibe
Desert-hardened, volume-scale, proof-forward roofing contractor.
Audience
Phoenix-metro homeowners facing monsoon and UV damage, plus commercial property managers with flat and low-slope roofs.
Voice anchors (verbatim)
"Top 1% of North American Roofers" · "Invest in the best Arizona Roofing Company" · "Why Phoenix roofs fail differently than the rest of the country"
Forbidden
Pill buttons (the declared 9999px radius renders zero times) · the pink tints #FBECED and #F7D0D1 (dead) · the Gutenberg default palette · coloured words inside headings · decorative label bars above headings.
Mood keywords
desert-hardenedvolume-scaleproof-forwardhigh-contrasturgent