Brand Overview
Roofer Butler helps people confidently discover, understand, and connect with roofing professionals for every type of property.
Make the roofing market legible. Every roofing company in one organized place, described in plain language, with the facts a property owner actually needs before making a call.
We will show you what we know, tell you how we know it, and never pretend a paid placement is a recommendation.
Homeowners and commercial property owners actively choosing a roofer.
Property managers, multifamily operators, facility managers, developers, general contractors, real-estate professionals — and the agencies and vendors who buy Roofer Butler Data.
The public directory. Consumer-facing, warm, plain-spoken.
Find the right roofer for any property.Research and recognition. Earned, documented, revocable — never automatic.
Researched. Reviewed. Recognized.B2B intelligence for agencies, software providers, and industry vendors.
Roofing company intelligence for marketing agencies.- Say what we know and how we know it.
- Coverage over cherry-picking — list the whole market.
- Disclose money. Always.
- Educate before we convert.
- Respect the trades we write about.
- A directory that is genuinely complete
- A researcher, not a referral broker
- Equally fluent in residential and commercial
- An educator on roofing decisions and costs
- A neutral place a roofer is glad to be listed on
- A roofing contractor or a franchise
- A lead-generation funnel dressed as a directory
- An insurance, warranty, or claims brand
- A coupon or home-services deal site
- A cartoon mascot business
Logo System
One master symbol carries the entire system: a white roof peak with a yellow bow tie inside a solid purple circle. Every other mark is a documented derivative of it.
Three white stars sit below the tie. Minimum 56px so the stars stay countable.
Certificates, awards, window decals, downloadable badges. Never in a header or nav.
Charcoal circle, purple rim, same geometry. Never all-black-and-gold.
Icon and wordmark are optically centred on the wordmark's cap height, not its bounding box. Gap between them = 24% of icon width.
| Icon only | 16px |
| Horizontal lockup | 120px wide |
| Lockup + tagline | 220px wide |
| Butler Rated badge | 56px |
| Formal seal | 80px |
Approved backgrounds: white, #FAF8FD, #F5F7F9, #1F1D3D, #2A2748, and photography with a solid plate behind the mark. Left-align the lockup with the content grid; never centre it in a left-aligned header.
Color System
60% white · 20% soft gray and lavender washes · 12% navy · 6% purple · 2% gold. Gold is a seasoning, never a surface. Purple carries meaning — if everything is purple, nothing is.
| USE | PAIR | RATIO |
|---|---|---|
| Body copy | #333333 on #FFFFFF | 12.6:1 |
| Headlines | #1F1D3D on #FFFFFF | 15.4:1 |
| Primary button | #FFFFFF on #34317D | 10.4:1 |
| Links | #6D40C4 on #FFFFFF | 6.3:1 |
| Badge chip | #34317D on #F5F1FB | 9.2:1 |
| Dark surface | #C7A6F5 on #1F1D3D | 7.1:1 |
| Gold text | #1F1D3D on #FFD572 | 10.8:1 |
Never: gold text on white (1.5:1), purple on navy, or white on #FFD572.
Typography
--rb-font-body: Nunito, "Segoe UI", Helvetica, Arial, sans-serif;
--rb-font-data: Inter, "SF Mono", ui-monospace, monospace;
Hero 62 → 36. H1 40 → 28. H2 30 → 23. H3 24 → 20. Body stays 17 (never below 16). Labels stay 11. Letter-spacing relaxes to -1.5% below 768px.
Editorial body 66–75 characters (max-width 680px). Card descriptions 45–60. Never justify. text-wrap: pretty on every heading.
No stencil, slab, script, or condensed “contractor” faces. No all-caps sentences. No letter-spaced body copy. No third typeface in marketing assets.
Layout & Spacing
12 columns, 24px gutters, max content width 1200px (editorial 720px). Tablet 8 columns / 20px. Mobile 4 columns / 16px, 20px side padding.
4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80
Card padding 24 · Section gap 32 desktop / 24 mobile · Section rhythm 80 desktop / 48 mobile
Radius: 8 chips · 12 buttons/fields · 16 cards · 24 sections · 999 pills
Border 1px #E4E9EE (2px #6D40C4 focus)
Shadow sm 0 1px 2px / lg 0 4px 16px rgba(31,29,61,.10). Borders before shadows.
| sm | ≤ 599px | 1 col cards |
| md | 600–899px | 2 col cards |
| lg | 900–1279px | sidebar + list |
| xl | ≥ 1280px | 1200px canvas |
Sidebar 200px fixed, results fluid, 24px gutter, 16px card gap, 24px card padding — all values straight from the scale above.
UI Component System
Heights: 44px default, 52px hero, 36px compact. Icon-left only, 8px gap. Never two primaries in one card.
Roofer Directory Components
Sponsored placements carry a blue disclosure chip and never the Butler Rated badge treatment.
Each step means something different and looks different. Sponsored is informational blue — never gold, never purple.
Location & SEO Page System
Every location page is generated from the same eleven-block template. The blocks are always in this order, and a page only publishes when the first six have real local data.
| Country | Roofing Companies in Canada |
| State / province | Roofers in Ontario |
| Metro | Roofers in the Dallas–Fort Worth Metroplex |
| City | Roofing Companies in Denver, CO |
| County | Roofers in Jefferson County, CO |
| ZIP / postal | Roofers Serving 80202 |
| Service | Roof Inspections in Denver, CO |
| Commercial | Commercial Roofing Contractors in Denver |
| Residential | Residential Roofers in Denver, CO |
| Emergency | Emergency Roof Repair in Denver |
| Material | Metal Roofing Companies in Denver |
A generated page needs at least 8 listed companies, one local statistic, and one locally-written paragraph before it goes live. No local substance, no page — thin pages damage the whole directory.
Editorial & Roofing Education
What a new roof costs in 2026 — and what changes the number
Roof pricing is quoted per square — 100 square feet of finished roof. Two quotes for the same house can differ by 40% and both be honest, because tear-off layers, decking repair, and warranty length are not the same job.
Every type uses the same measure, the same H-scale, and at most one Rufus tip. Blog index cards show type chip, title, read time, review date.
Rufus Roofington — Chief Roofer Scout
Rufus discovers, researches, organizes, and helps verify roofing companies so property owners can make more confident decisions. He is a real, photorealistic human character — never an illustration, never a cartoon, never a costume butler.
Photorealistic editorial photograph of the same recurring character: a 52-year-old man named Rufus Roofington, broad sturdy working build, lightly weathered sun-tanned skin, short salt-and-pepper hair, neatly groomed salt-and-pepper mustache, hazel-green eyes, expressive eyebrows, calm trustworthy expression. Wardrobe, unchanged in every image: pale-gray rolled-sleeve work shirt, dark-navy contractor vest, deep-purple bow tie, dark work pants, brown leather safety boots, navy hard hat with a small purple circular emblem centred on the front. He carries a rugged tablet or clipboard and compact roofing inspection tools. [SCENE]. Natural daylight, soft directional key light, realistic skin texture and pores, documentary editorial style, 50mm lens, shallow depth of field, correct construction-site safety practice. No cartoon, no illustration, no tuxedo, no white gloves, no serving tray, no monocle, no top hat, no plastic skin, no exaggerated features.
Replace [SCENE] only. Everything before and after it is fixed so the same face and wardrobe repeat across the library.Photography Direction
Real, experienced, safe, human, editorial. Photography should look like a good trade magazine, not a stock library — daylight, working hands, honest materials, correct safety gear.
- Full safety equipment in every rooftop frame
- Natural light, minimal grading, true colour
- Real trucks, real tools, honest wear
- Regional roof types that match the page's location
- People of the age and build who actually do this work
- Edge-of-roof hero poses or no harness
- Fake smiles and staged handshakes
- Spotless tools and unworn boots
- Storm-disaster imagery used to create fear
- AI artefacts: bent ladders, impossible flashing, six-finger hands
Iconography & Illustration
Grid 24×24 · stroke 1.75px (2px at 32px+) · round caps and joins · corner radius 2px · outline only, no fills except the master mark · sizes 16 / 20 / 24 / 32 / 48 · optical padding 2px inside the grid.
Purple on lavender for feature icons, white on indigo for filled tiles, slate on white for utility. Below 20px drop internal detail rather than thinning the stroke.
Illustration is used only for empty states and explainer diagrams: flat lavender shapes, one purple accent, no gradients, no isometric cities, no characters. Rufus is photography — never illustrated.
Voice & Messaging
Clear · helpful · direct · knowledgeable · calm · honest · respectful. Plain words over industry jargon; when a technical term is unavoidable, define it in the same sentence.
Pushy · fear-based · overly cute · sarcastic · condescending. No unsupported claims, no “best roofer guaranteed”, no closing language borrowed from a sales script.
Social Media System
Roofing tip · local roofer spotlight · Butler Rated announcement · roofing statistic · cost guide · before-and-after · Rufus educational · new location launch · Data promotion (LinkedIn only).
LinkedIn: commercial, property managers, Data. Facebook and Pinterest: homeowners, cost and maintenance. Instagram and TikTok: craft, before-and-after, Rufus. X: launches and statistics.
Logo on every asset, minimum 34px. Gold only as accent. Never put the Butler Rated badge on a company that has not earned it, even in a mockup.
Advertising System
Agency creative uses navy and charcoal surfaces, Inter for figures, and gold CTAs. Consumer creative stays white and lavender with indigo CTAs. The two never share a layout.
Blue “Sponsored” chip, standard card layout, no gold, no badge, no ranking language. Always above-fold-labelled, never mixed into an organic ranked list without the chip.
Sell visibility and accuracy, never rating. Approved: “Keep your profile accurate.” Prohibited: “Get rated,” “Buy Butler Rated,” “Rank higher.”
Remind, don't pressure: the shortlist they built, the city they searched. No countdowns, no “last chance”, no storm-fear creative.
Email Style
Width 600px · body Nunito 15/25 · headline Poppins 21/26 · single column · one primary button (44px tall, radius 12) · logo top-left at 28px · footer #F5F7F9 with sender identity and unsubscribe · images never carry essential copy.
Homeowner welcome · property-manager welcome · profile-claim · information-verification · Butler Rated notification · monthly newsletter · Data outreach · agency product announcement. Rufus signs consumer and roofer mail; Data mail is signed by a named human on the team.
Printed & Physical Applications
Also standardised: presentation folders (navy, icon debossed), one-page flyers (white, 12pt minimum), trade-show banners (navy top third, mark at 180mm), certificates (seal at 90mm), clipboards and inspection folders (icon only), stickers (icon at 40mm). Print gold is #FEBF2B; never render the mark in metallic ink, foil gloss, or 3D relief.
Accessibility
WCAG 2.2 AA minimum: 4.5:1 body, 3:1 for text 24px+ and UI borders. Body text never below 16px (14px only for captions and table metadata). Gold is never a text colour on white.
3px #C7A6F5 focus ring, never removed. Every filter, card action, and modal is reachable by keyboard in DOM order; modals trap focus and return it on close.
Visible label above every field — placeholders are not labels. Errors are text plus icon, never colour alone, and say what to do: “Enter a full email address so we can confirm your claim.”
Minimum 44×44px touch targets with 8px separation. Filter chips 36px tall with 44px hit area. Sticky search never covers the first result.
Describe function, not decoration: “Butler Rated badge — researched July 2026”. Logo alt is “Roofer Butler”. Star ratings expose “4.8 out of 5, from 312 Google reviews” to screen readers, not five separate icons.
Always on a solid plate or a navy scrim at 60% or more. Never rely on the photo being dark enough — roof photos are bright at the top.
Design Tokens
Copy these into :root. Names are stable — components reference tokens, never raw hex.
--rb-purple-deep: #34317D;
--rb-purple-tint-100: #F5F1FB;
--rb-purple-tint-200: #EAE4F6;
--rb-navy-900: #1F1D3D;
--rb-navy-700: #2A2748;
--rb-gold-accent: #FFD572;
--rb-gold-print: #FEBF2B;
--rb-surface-default: #FFFFFF;
--rb-surface-muted: #F5F7F9;
--rb-surface-wash: #FAF8FD;
--rb-surface-editorial: #FFFCF5;
--rb-border-default: #E4E9EE;
--rb-text-primary: #333333;
--rb-text-heading: #1F1D3D;
--rb-text-muted: #5A6472;
--rb-success: #13CE66;
--rb-warning: #FEBF2B;
--rb-error: #EB5757;
--rb-info: #2F6FD0;
--rb-font-body: Nunito, sans-serif;
--rb-font-data: Inter, sans-serif;
--rb-text-hero: 62px/64px 800;
--rb-text-h1: 40px/46px 800;
--rb-text-h2: 30px/38px 800;
--rb-text-h3: 24px/32px 700;
--rb-text-body: 17px/28px 600;
--rb-text-small: 14px/22px 500;
--rb-text-label: 11px/16px 700;
--rb-space-1: 4px;
--rb-space-2: 8px;
--rb-space-3: 12px;
--rb-space-4: 16px;
--rb-space-6: 24px;
--rb-space-8: 32px;
--rb-space-10: 40px;
--rb-space-14: 56px;
--rb-space-20: 80px;
--rb-radius-control: 12px;
--rb-radius-card: 16px;
--rb-radius-section: 24px;
--rb-radius-pill: 999px;
--rb-border-width: 1px;
--rb-border-focus: 2px;
--rb-shadow-sm: 0 1px 2px rgba(31,29,61,.06);
--rb-shadow-card: 0 2px 10px rgba(31,29,61,.06);
--rb-shadow-lg: 0 4px 16px rgba(31,29,61,.10);
--rb-bp-sm: 599px;
--rb-bp-md: 899px;
--rb-bp-lg: 1279px;
--rb-z-header: 100;
--rb-z-dropdown: 200;
--rb-z-modal: 400;
--rb-z-toast: 600;
--rb-motion-fast: 150ms ease;
--rb-motion-base: 200ms ease;
--rb-control-height: 44px;
--rb-control-height-lg: 52px;
--rb-field-height: 46px;
Final Brand Checklist
Run this before anything publishes — a post, a page, an ad, a certificate, a truck wrap.