# Arizona Roofers — brand spec

**Source:** https://arizonaroofers.com
**Captured:** 2026-07-24
**Stack:** WordPress · Astra theme · Spectra / UAGB blocks · WPForms multi-step · Cloudflare-fronted, fonts self-hosted from `/cf-fonts/`
**Vertical / picker tags:** `roofing trades`
**Crawl corpus:** `~/code/ds-extract-batch/arizona-roofers/*.html` (37 fetched pages of 275 enumerated)

Phoenix-metro roofing contractor, ~100 staff, 25+ years, 651 Google reviews at 4.9. Residential and commercial, heavy on tile, foam and elastomeric systems, with a large storm-damage and insurance-claim book.

---

## Extraction rule

Every pattern in `sections.html` is transcribed from a section that exists on the live source site, cited with its source URL, and badged SIGNATURE. Built pages compose only from that catalog. Copy is verbatim or omitted — no headline, lede, list item, review, stat, phone number or fine-print string in the transcription files was written by us. Where a string is broken in the source (see *Omitted because broken*), the element was dropped rather than repaired.

Execution — spacing scale, token architecture, radius system, responsive behaviour — is ours. The source is a builder site with inconsistent block spacing and a stylesheet full of tokens it never paints; the structure and voice are extracted, the craft is rebuilt.

---

## Voice anchors (verbatim)

- "Top 1% of North American Roofers"
- "MOST Reliable Arizona Roofers & Roofing Company"
- "Invest in the best Arizona Roofing Company"
- "Why Phoenix roofs fail differently than the rest of the country"
- "To be Arizona's most trusted and reliable roofing company—where every homeowner knows they'll get honest service, dependable craftsmanship, and a roof built to last."

Register: blunt, proof-first, locally specific. The site earns its claims with numbers (25+, 1,000+, 100+, 4.9 / 651) and with climate detail no national template would carry — thermal cycling counts, 160°F tile surfaces, monsoon microbursts, HOA colour approval.

---

## Colour tokens

Ranked by rendered occurrence in the live DOM, not by the declared `:root` block.

| Token | Value | Provenance | Role |
|---|---|---|---|
| `--accent` | `#e11b14` | extracted · 14 rendered buttons | every CTA |
| `--accent-deep` | `#c00802` | derived | hover / pressed, links |
| `--accent-hot` | `#fe0000` | extracted · Astra `--ast-global-color-5` | the quote marquee ground, and nothing else |
| `--band-dark` | `#1f0a0c` | extracted | nav, mission band, footer, photo bases |
| `--ink` | `#1c1b1b` | extracted | body copy |
| `--ink-head` | `#1f0a0c` | extracted | every heading — a near-black with a red cast, deliberately not the body ink |
| `--paper` | `#ffffff` | extracted | default ground |
| `--paper-alt` | `#f9f9f9` | extracted | alternating band |
| `--on-dark-soft` | `#f2e9e9` | extracted | the hero label's own colour |

Two accent bands only. Section grounds alternate white and near-white; the red marquee and the dark mission band above the footer are the only breaks in the page.

### Dead declared values — do not build

| Declared | Rendered count | Verdict |
|---|---|---|
| `border-radius: 9999px` pill CTA | **0 elements** | dead. Live button radius census is 6px ×14, 3px ×1, 27px ×1. This kit ships no pill. |
| pink tints `#FBECED`, `#F7D0D1` | **0** | dead. Not tokenised. |
| `8px` card radius | 6px ×1, most cards square | cards are 0–6px |
| Gutenberg defaults `#00d084`, `#0693e3`, `rgb(255,105,0)`, `#8ed1fc`, `#0f9d58` | ~74× each, purely from the editor palette declaration | never painted as brand |
| `--wpforms-*` vars, `--bg: #f7f7f9` | — | plugin scaffolding |

---

## Type

No substitution was needed. Archivo, Work Sans and Inter are all free Google faces and are the same families the source self-hosts from Cloudflare, so the source's metrics carry over unchanged.

| Role | Family | Size / line-height | Weight | Colour |
|---|---|---|---|---|
| Hero display (an `h2` on the source) | Archivo | 72px / 73px → `clamp(2.6rem, 4.6vw + 1rem, 4.5rem)` | **100** | `#ffffff` |
| Hero label (the semantic `h1`) | Work Sans | 18px / 19.8px, ls −1px | 400 | `#f2e9e9` |
| Section heading (h2) | Work Sans | 48px / 62.4px → `clamp(1.85rem, 2.2vw + 1.1rem, 3rem)` | 400 | `#1f0a0c` |
| Stat numeral | Archivo | 48px | **800** | `#1c1b1b` |
| Card title (h3) | Work Sans | 24px | 600 | `#1f0a0c` |
| Body | Inter | 16px / 28px | 400 | `#1c1b1b` |
| Button label | Inter | 16px, pad 18×28 | 500 | `#ffffff` |

Stray `poppins !important` declarations on a handful of nodes are editor leftovers and were ignored.

---

## Signature shapes

1. **Archivo at both axis extremes.** Weight 100 at 72px for the hero display, weight 800 at 48px for the stat numerals. One family, opposite ends. This is the brand's typographic identity and the single thing most worth carrying into a sprinkle.
2. **Inverted hero hierarchy.** The `h1` is an 18px Work Sans label with −1px tracking sitting above the display. Reproduced as `.hero-label`.
3. **Full-bleed photo hero** with a `::before` scrim at `opacity: .3`, inset 0, over a painted `--band-dark` base.
4. **`GET A FREE QUOTE!` marquee** on solid `#fe0000`, full-bleed, zero padding. Appears on the home, about and every service page. Built as a CSS `@keyframes` translateX with the text repeated, and it holds still under `prefers-reduced-motion`.
5. **Circled unicode process numerals** `⓵ ⓶ ⓷ ⓸` — literal glyphs in the source markup, not CSS counters, so they are literal glyphs here.
6. **`aspect-ratio: 4/3` post thumbnails.**
7. **Dark `#1f0a0c` mission band** above the footer, `40px 0`, carrying the CEO's mission sentence.
8. **6px corners throughout** — buttons 6px, cards square to 6px.

Circle-masked portrait images (`is-style-circle-mask`) and the lightbox `backdrop-filter: blur(16px) saturate(180%)` exist on the source but back UI this kit does not ship (a photo lightbox, portrait headshots the roster page does not actually publish), so neither is carried.

---

## Assets

No logo SVG is published by the source; the mark is a `.webp`. It is used as-is — nothing was traced or redrawn.

| File | Role | Notes |
|---|---|---|
| `arizona-roofers-logo.webp` | Logo | Red star + **white** wordmark on transparency. Dark grounds only — hence the dark nav, dark footer, and the dark asset thumb on the reference page. |
| `arizona-roofers-hero-team.webp` | Homepage hero ground | |
| `arizona-roofers-crew.webp` | Why-Choose photo ground, team blocks | |
| `arizona-roofers-shingle-replacement.jpg` | Installations card, shingle posts | |
| `arizona-roofers-residential.jpg` | Residential card, city hero | |
| `arizona-roofers-monsoon.jpg` | Offer banner, monsoon posts | |
| `arizona-roofers-flashing-repair.jpg` | Repairs card, warranty banner | |
| `arizona-roofers-hail-inspection.jpg` | Inspections card | |
| `arizona-roofers-project-1.jpg` | Flat / foam roof, service hero | |
| `arizona-roofers-project-2.jpg` | Commercial card, map still | |

The contact page embeds a live Google map; it is rendered here as a static still rather than mirroring a third-party embed.

---

## Pattern inventory — 42 patterns, all SIGNATURE

Patterns 01–35 are the catalog proper. 36–42 are the distinct renders folded into the utility pages, each still transcribed and cited, because the built pages need them (landing 3 is composed on 39).

| # | Pattern | Source |
|---|---|---|
| 01 | hero | https://arizonaroofers.com/ |
| 02 | trust-badges | https://arizonaroofers.com/ |
| 03 | value-intro | https://arizonaroofers.com/ |
| 04 | stats-bar | https://arizonaroofers.com/ |
| 05 | services-grid | https://arizonaroofers.com/ |
| 06 | service-areas | https://arizonaroofers.com/ |
| 07 | solutions-split | https://arizonaroofers.com/ |
| 08 | process | https://arizonaroofers.com/ |
| 09 | cta-band | https://arizonaroofers.com/ |
| 10 | marquee | https://arizonaroofers.com/ |
| 11 | why-choose | https://arizonaroofers.com/ |
| 12 | finance | https://arizonaroofers.com/ |
| 13 | reviews | https://arizonaroofers.com/ |
| 14 | team-teaser | https://arizonaroofers.com/ |
| 15 | contact-cta | https://arizonaroofers.com/ |
| 16 | resources-teaser | https://arizonaroofers.com/ |
| 17 | tools | https://arizonaroofers.com/ |
| 18 | faq | https://arizonaroofers.com/ |
| 19 | service-hero | /arizona-foam-roofing/ |
| 20 | benefits | /arizona-foam-roofing/ |
| 21 | types-cards | /arizona-foam-roofing/ |
| 22 | comparison | /arizona-foam-roofing/ |
| 23 | when-to-replace | /arizona-foam-roofing/ |
| 24 | why-service | /arizona-foam-roofing/ |
| 25 | city-hero | /phoenix-roofing-company/ |
| 26 | city-differentiator | /phoenix-roofing-company/ |
| 27 | city-services | /phoenix-roofing-company/ |
| 28 | neighbourhoods | /phoenix-roofing-company/ |
| 29 | city-reviews | /phoenix-roofing-company/ |
| 30 | article-body | /roofing/tile-roof-repair-phoenix/ |
| 31 | post-archive | /resources/ |
| 32 | about-story | /about/ |
| 33 | core-values | /about/ |
| 34 | team-roster | /about/ |
| 35 | contact-map | /contact/ |
| 36 | careers | /arizona-roofers-careers/ |
| 37 | project-gallery | /recent-projects/ |
| 38 | warranty-offer | /arizona-roofers-warranty-claim-center/ |
| 39 | estimate-offer | /get-a-free-estimate/ |
| 40 | cost-calculator | /arizona-roof-replacement-calculator/ |
| 41 | quiz-shell | /roof-lifespan-maintenance-quiz/ |
| 42 | spectra-quote | /arizona-roofing-services/ |

### Omitted because broken in source

Under "verbatim or omitted", these strings are visibly corrupted on the live site and were dropped rather than corrected:

- Foam-roofing replacement signal #6, titled `Excessive Persistent Leakswear` — whole card omitted.
- Core value `L-EARN & GROW` body (`grouth`, `relenlessly`) and `E-XTREME OWNERSHIP` body (`owen`) — headings kept, bodies omitted.
- Warranty bullet #4, `We honor our promise s` — omitted.
- Team-roster intro paragraph, which carries a literal escaping artifact `clients\'` — omitted.
- The foam page's closing heading. It renders as "Ready to Protect Property with Foam Roofing?" but the markup is `with <br>F<strong>oam Roofing?</strong>`, splitting the word. Landing 1 closes on the site-wide CTA band instead.
- The estimate page's CTA reads `Call ((480) 463-3483` with a doubled parenthesis; the kit uses `Call (480) 463-3483`, which appears verbatim in the site footer.

Where a typo is merely a typo and the string reads cleanly, it is preserved: "Know exactly what its going to take…", "Customised plan", "Why Choose us?" on the estimate page against "Why Choose Us?" on the homepage.

### Not transcribed by choice

The Google review rail carries two negative reviews (Jake Hayes, John Myers) verbatim in the source markup. They are omitted — this kit is shown to prospects. Six short positive reviews are carried with their real attribution.

---

## Crawl-scope log

**Enumerated:** 275 URLs from the sitemap. **Fetched:** 37 representatives (`rep-urls.txt` in the crawl dir).

Fetched: `/`, `/home-2/`, `/about/`, `/contact/`, `/get-a-free-estimate/`, `/recent-projects/`, `/arizona-roofing-services/`, `/arizona-residential-roofing-services/`, `/arizona-commercial-roofing-services/`, `/arizona-foam-roofing/`, `/arizona-metal-roofing/`, `/arizona-tile-roofing/`, `/arizona-shingle-roofing/`, `/arizona-elastomeric-coatings-roofing/`, `/arizona-modified-bitumen-roofing/`, `/arizona-single-ply-roofing-systems/`, `/arizona-thermal-inspections/`, `/roof-repairs-in-arizona/`, `/roof-installations-in-arizona/`, `/roof-inspections-in-arizona/`, `/roof-inspection-phoenix/`, `/scottsdale-roofing-company/`, `/ahwatukee-roofing-company/`, `/phoenix-roofing-company/`, `/scottsdale-roofing-company/top-roof-repair-…/`, `/arizona/flat-roof-repair-near-me/`, `/arizona-roof-replacement-calculator/`, `/roof-lifespan-maintenance-quiz/`, `/roofing-financing/`, `/arizona-roofers-careers/`, `/arizona-roofers-warranty-claim-center/`, `/privacy-policy/`, `/roofing/tile-roof-repair-phoenix/`, `/resources/`, `/resources/gable-roof-insights/`, `/category/resources/`, `/author/anthony/`.

Skipped, with the evidence for each skip:

| Group | Count | Evidence |
|---|---|---|
| `/roofing/*` blog posts | 177 | one representative fetched (`tile-roof-repair-phoenix`) plus a second under `/resources/*`; both render the same single-post template — h1, byline, prose, Related Posts row. Cataloged as pattern 30. |
| `/resources/*` | 33 | archive index and one child fetched; the index loop is pattern 31. |
| `*-roofing-company` city pages | 25 total, 3 fetched | Phoenix, Scottsdale and Ahwatukee fetched. Phoenix is the richest and backs patterns 25–29. **Honest limitation:** the other 22 were not fetched and were not fingerprint-checked, so their coverage is assumed, not proven. Scottsdale and Ahwatukee differ from each other in byte size, so these are hand-written pages rather than one strict template — a second pass on the remaining 22 could surface sections this catalog lacks. |
| `/category/*` | 11 | one fetched; taxonomy archive reuses the `/resources/` loop. |
| `/author/*` | 2 | one fetched; same loop. |
| `/scottsdale-roofing-company/top-roof-repair-…/` | 1 | fetched; byte-identical body length to its parent, differing only in head metadata — effectively a duplicate. |

---

## Forbidden

- **Pill buttons.** The stylesheet declares `9999px`; the live DOM renders it zero times. 6px, always.
- **The pink tints** `#FBECED` and `#F7D0D1` — declared, never painted.
- **The Gutenberg default palette** (`#00d084`, `#0693e3`, `rgb(255,105,0)`, `#8ed1fc`, `#0f9d58`) — editor scaffolding, not brand.
- **`--accent-hot` anywhere but the marquee.** It is a second red that exists for exactly one band; using it for a button would flatten the distinction the source draws.
- **Coloured words inside headings.** The source never does it and neither does this kit.
- **Decorative small-caps label bars, accent dashes or stripe rules above headings.** The source's small hero label is real and is built, as `.hero-label` — plain type, no rule, no dash, no mono face.
- **The white-wordmark logo on a light ground.**
- **Invented copy of any kind**, including plausible-sounding form helper text, trust bullets and blog excerpts.

## Mood keywords

`desert-hardened` · `volume-scale` · `proof-forward` · `high-contrast` · `urgent`

## Library position

The loudest trades system in the pool. Where `northface-construction` is navy-and-gold and reassuring and `venture-home` is quiet and premium, this one is red, fast and numeric — a high-volume storm-and-replacement contractor that leads with a 72px hairline display and a scrolling red band. Reach for it when a client's business is driven by urgency and volume rather than by considered specification: roofing, restoration, storm response, HVAC emergency work. The Desert Teal, Copper Sun and Monsoon Indigo variants take the same structure off the red without losing the contrast weight, since each variant accent is luminance-matched to the canonical one.