The kitchen sink.

Every token, face and component the kit ships, on one page. Colours are live CSS variables, so the palette panel re-themes this reference along with the built pages.

Colour

Ranked by rendered occurrence across the crawl, not by the declared :root block. The pink tints the stylesheet declares paint zero pixels on the live site and are not tokenised here.

--accent
#E11B14
--accent-deep
#C00802
--accent-hot
#FE0000
--band-dark
#1F0A0C
--ink
#1C1B1B
--ink-head
#1F0A0C
--paper-alt
#F9F9F9
--paper
#FFFFFF

Type

Three families, all free Google faces and all the same families the source self-hosts. Archivo carries the display and the numerals; Work Sans carries headings and the hero label; Inter carries body copy and button labels.

Archivo · 100
clamp to 72px / 1.02
--text-display
Top 1% of North American Roofers
Work Sans · 400
18px / 1.1 · ls -1px
.hero-label
MOST Reliable Arizona Roofers & Roofing Company
Work Sans · 400
clamp to 48px / 1.3
h2
Invest in the best Arizona Roofing Company
Archivo · 800
clamp to 48px
.stat .num
1,000+Installs Per Year
Work Sans · 600
clamp to 24px
h3
Licensed, Insured and Bonded
Inter · 400
16px / 1.75
body

Arizona Roofers is fully licensed, insured, and bonded—so you can hire us with confidence. We prioritize safety, accountability, and professional standards on every job.

Buttons

Six-pixel radius, 18px by 28px padding, Inter at weight 500. The stylesheet declares a 9999px pill; the live DOM renders it zero times, so this kit ships no pill.

Get a FREE Quote Contact Us View Team Read More Learn more
Start your project Get a free estimate

Cards and lists

Roof inspection

Roof Inspections

Protect your property with a free roof inspection from trusted Arizona roofers.

Read More
⓶

Roof Planning

We create a personalized roofing plan, choose high-quality materials suited to your property.

  • Customised plan
  • Material selection
  • Scheduling
★★★★★

Called after the last storms and they had a guy out next day to take a look and got a quote right after. Awesome company!

Will Winter

U-RGENCY

We act fast, stay ahead, and show up more prepared than anyone else.

roofingtradesdesert-hardenedproof-forward

Signature anchors

Archivo at both extremes

Weight 100 at 72px for the hero display, weight 800 at 48px for the stat numerals. One family, opposite ends of its axis — the loudest thing about the brand's typography.

Inverted hero hierarchy

The semantic h1 is an 18px Work Sans label with -1px tracking. The visual headline below it is an h2.

The quote marquee

Repeating text on the solid hot red the source reserves for exactly this band. Holds still under prefers-reduced-motion.

Circled unicode numerals

Process steps are numbered with the literal glyphs ⓵ ⓶ ⓷ ⓸ that the source ships in its markup, not with CSS counters.

Six-pixel corners

Buttons 6px, cards square to 6px. No pills anywhere, on any breakpoint.

Two accent bands only

Section grounds are white and near-white. The red marquee and the dark mission band above the footer are the only breaks.

GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!GET A FREE QUOTE! GET A FREE QUOTE!GET A FREE QUOTE!

Assets

The logo is published only as a raster file with a white wordmark on transparency, so it always sits on a dark ground. No SVG exists on the source and none was traced.

Arizona Roofers logo
arizona-roofers-logo.webpLogo · dark grounds only
hero-team.webpHero photo
crew.webpTeam / why-choose ground
shingle-replacement.jpgInstallations
residential.jpgResidential / city hero
monsoon.jpgOffer banner
flashing-repair.jpgRepairs
hail-inspection.jpgInspections
project-1.jpgFlat / foam roof
project-2.jpgCommercial