Wright Agency

Overview

Wright Agency is a roofing company marketing specialist that transforms lead generation into booked jobs through strategic web design and follow-up systems. The brand embodies a "Warm Brutalism" aesthetic—pairing a dark, no-nonsense canvas (rgb(23, 22, 15)) with bold, energetic orange accents (rgb(228, 131, 35)) that command attention and convey urgency without sacrificing professionalism. The visual language evokes trust, efficiency, and action: every interface element is designed to move the user toward conversion. The emotional response is one of clarity and confidence—a contractor sees this site and immediately understands that Wright Agency knows how to turn interest into revenue.

The brand voice is direct, conversational, and outcome-focused. Vocabulary leans into business metrics ("leads," "booked jobs," "conversion") and avoids jargon; sentences are short and punchy. The tone is confident but not arrogant—Kevin Wright is a peer, not a guru. Example sentence in brand voice: "You're already spending money on leads. We build your website and follow-up system to turn more leads into roof replacements."

Colors

The color system is anchored in a dark, warm foundation (surface: #171610, on-surface: #f0ece2) that creates a premium, focused environment for high-stakes marketing. Primary (#e48323, a warm burnt orange) is the signature accent—deployed on all CTAs, interactive states, and brand-critical moments. This orange is not merely decorative; it is the visual equivalent of a contractor's phone ringing. Secondary (#00bbff, a bright cyan) provides a supporting accent for secondary actions, status indicators, and accent highlights, creating visual rhythm without competing for attention. Tertiary (#7bdcb5, a soft teal) is reserved for success states, confirmations, and supportive UI elements.

Surface stack follows a strict hierarchy: surface-container-lowest (#0a0805) for the deepest backgrounds, su

Typography

The type system pairs Barlow (a geometric sans-serif with high contrast and strong personality) for headlines and calls-to-action with Lato (a warm, humanist sans-serif) for body text and supporting copy. This pairing creates a hierarchy that is both authoritative and approachable. Display (64px, 900 weight, -0.04em letter-spacing) is reserved for hero headlines and makes an immediate visual impact; headline-lg (48px, 700 weight) anchors section introductions; body-lg (18px, 400 weight, 28px line-height) ensures readability in dense marketing copy. Label-md (14px, 700 weight, 0.02em letter-spacing) is used for button text and form labels, with tight tracking to reinforce action-oriented language.

On small labels and CTAs over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.

Layout

The layout system uses a 12-column grid with a max-width of 1200px, allowing for flexible two-column and three-column layouts while maintaining focus on mobile (single column). The gutter is consistently 24px, creating breathing room between sections without sacrificing density. White-space is used strategically: lg spacing (40px) separates major sections (hero, benefits, testimonials), md spacing (24px) separates cards and components within sections, and sm spacing (12px) separates inline elements. The hero section uses a full-width background with contained content, allowing the dark surface to extend edge-to-edge while keeping text readable within the container.

Container max-width of 1200px prevents line-length from exceeding 80 characters on large displays, supporting readability of

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of surface-container layers rather than aggressive drop shadows. Level 1 (Base): the dark surface (#171610) with no shadow, establishing the foundation. Level 2 (Standard Card): surface-container (#211d18) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), creating subtle separation from the base. Level 3 (Elevated/Modal): surface-container-highest (#39332c) with elevation.lg (0 8px 24px rgba(0, 0, 0, 0.25)), reserved for modals, overlays, and hero sections. Interactive elements (buttons, inputs) use a 2px focus ring at rgb

Shapes

The shape philosophy is "Architectural Precision"—sharp, intentional corners that convey professionalism and efficiency. Border-radius follows a strict scale: sm (4px, 0.25rem) for buttons and form inputs, md (12px, 0.75rem) for cards and panels, lg (16px, 1rem) for larger containers and modals, and full (9999px) for badges and pill-shaped elements. The 4px radius on buttons (e.g., "Get Your Lead Flow Inspection") is deliberately small—not rounded enough to feel soft or playful, but rounded enough to avoid harsh corners. This creates a "business-casual" aesthetic that feels modern without bein

Components

Action Elements Buttons are the primary conversion driver. button-primary uses the signature orange (#e48323) with 19.2px Barlow 700, 48px height, and 19.2px 32px padding. On hover, the background brightens to #ff9d4d and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) appears, signaling interactivity. On active, the background darkens to #d46b1a, providing tactile feedback. Transitions use 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion. button-secondary uses a transparent background with a 2px primary-colored border, allowing secondary actions to coexist without visual noise. Focus states on all buttons use a 2px outline at rgba(228, 131, 35, 0.3), creating a glowing effect that is accessible and on-brand.

Containers & Surfaces Cards (card component) use surfa

Do's and Don'ts

**Do**

• Do use primary orange (#e48323) exclusively on CTAs and high-priority interactive elements—never on decorative or passive UI.
• Do maintain the dark surface (#171610) as the dominant background; it creates focus and reduces cognitive load for conversion-focused users.
• Do pair Barlow headlines with Lato body text to create clear hierarchy; never reverse this pairing or use Barlow for body copy.
• Do apply 200ms transitions on hover and focus states to create a responsive, tactile feel that builds user confidence.
• Do use the surface-container stack (lowest, low, standard, high, highest) to create clear depth hierarchy; never use arbitrary background colors.
• Do reserve secondary (#00bbff) and tertiary (#7bdcb5) for supporting actions and status indicators; they are not primary accents.

**Don't**

• Don't use rounded corners larger than 12px on buttons or cards—the sharp, efficient aesthetic is core to the brand.
• Don't apply shadows larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.25))—excessive depth dilutes the dark, focused aesthetic.
• Don't use light backgrounds or near-white surfaces; the dark canvas is non-negotiable and defines the brand's premium positioning.
• Don't mix Barlow and Lato weights arbitrarily—follow the typography scale strictly to maintain visual hierarchy and readability.
• Don't apply opacity or transparency to the primary orange; use the fixed-dim variant (#d46b1a) for darker states instead.
• Don't use more than three accent colors in a single view; secondary and tertiary are supporting players, not co-stars.