Contractor Lead Partners

Overview

Contractor Lead Partners is a performance-marketing platform that generates exclusive phone leads for home service contractors. The brand embodies 'Results-Driven Warmth'—a design aesthetic that combines bold, energetic orange-red accents with clean, professional white space and high-contrast typography. The UI is deliberately conversion-focused: every element serves the user's primary goal of capturing leads and booking jobs. The emotional response is confidence mixed with accessibility—contractors feel they're working with a partner who understands their business and delivers measurable outcomes.

The brand voice is direct, honest, and action-oriented. Sentences are short and benefit-driven: 'You only pay after booking a job and receiving a deposit.' The vocabulary avoids marketing jargon; instead, it uses contractor-familiar language ('basement waterproofing calls,' 'niche down,' 'consistent leads'). Personality is professional but approachable—think of a successful contractor who's also a good communicator. Example sentence in brand voice: 'We deliver results, not marketing services – you only pay after booking a job and receiving a deposit.'

Colors

The color system is built on high-contrast, results-focused energy. Primary (#e8573c) is a warm, burnt-orange-red used exclusively on call-to-action buttons, form borders, and interactive focus states. This color appears frequently but strategically—it's the visual equivalent of a contractor's signature on a contract. Secondary (#f4651d) is a slightly brighter orange used for accent links, hover states on navigation, and emphasis in body copy (via underline: inset 0 -1px 0 #f4651d). Tertiary (#fcb900) is a golden amber reserved for badges, highlights, and star ratings (the 5-star testimonial badges). The surface stack is deliberately minimal: white (#ffffff) is the dominant background, with subtle grays (#f5f5f5, #eeeeee, #e9ecef) used for container separation and hover states. On-surface

Typography

The type system pairs Poppins (headings, labels, CTAs) with Public Sans (body copy) and Inter (small labels, metadata). This combination creates a hierarchy that feels both modern and trustworthy. Display and headline-lg (45–60px, 700 weight) are reserved for hero sections and major section breaks; they use tight line-height (68–52px) and negative letter-spacing (-0.04em to -0.02em) to create visual impact and urgency. Headline-md (32px, 600 weight) is used for section subheadings. Body-lg and body-md (18px and 16px, 400 weight) are the workhorses for form labels, testimonials, and descriptive copy; they use generous line-height (28px and 24px) for scannability. Label-md (18px, 700 weight, Poppins) is applied to all button text and form headings to reinforce action-oriented hierarchy. On s

Layout

The page uses a fluid 12-column grid with a max-width of 1175px, centered on desktop. The hero section spans full-width with a dark overlay background image (contractor working on a roof) and white text overlay for maximum contrast. Section spacing follows a consistent rhythm: lg spacing (40px) separates major sections (hero, form, testimonials, how-it-works); md spacing (24px) is used within sections for card-to-card gaps and form field separation. The form card (right side of hero) uses a 3px solid primary-color border and 32px padding to create visual prominence and draw the eye. Container padding is gutter (24px) on desktop, reducing to sm (12px) on tablet and xs (4px) on mobile. White space is generous but purposeful—the form card sits in a sea of white, making it the undeniable focal

Elevation & Depth

Depth is achieved through subtle shadows and border treatments rather than layering. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, form inputs) uses elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to create a barely-perceptible lift. Level 3 (form card, elevated containers) uses elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) and a 3px solid primary border to create visual hierarchy and focus. On hover, cards transition from elevation.sm to elevation.md over 200ms. Form inputs use a 2px solid outline-color border that transitions to a 2px primary border on

Shapes

The shape philosophy is 'Friendly Precision'—rounded enough to feel approachable, but not so rounded that it loses professional credibility. Buttons and form inputs use a full rounded style (80px border-radius) to create a pill-shaped, action-oriented appearance that feels modern and inviting. Cards and containers use lg (1rem / 16px) for a subtle roundness that doesn't distract. The form card uses 20px (slightly more than lg) to create a distinct visual container. Input fields use 72px border-radius to match button styling, creating a cohesive form experience. Badges use full (80px) to emphas

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#e8573c) background, white text, 18px Poppins 700, 14px 38px padding, and 80px border-radius. On hover, the background darkens to #d64a2f over 200ms. Button-secondary uses a white background, primary text, 2px primary border, and the same 80px radius; on hover, it fills with primary-container (#fce4df). The header CTA button uses a transparent background with a 2px primary border until hover, at which point it fills with primary and text turns white. All buttons use transition: all 200ms ease-in-out for smooth state changes.

Containers & Surfaces Cards use a white background, 1px outline border, lg (16px) border-radius, and elevation.sm shadow. On hover, they transition to elevation.md and a

Do's and Don'ts

**Do**

• Do use primary (#e8573c) exclusively for CTAs, focus states, and interactive elements—it's the brand's signature and must remain reserved.
• Do maintain high contrast between text and background; use black (#000000) on white and white on primary for maximum readability.
• Do apply full rounded (80px) to all buttons and form inputs to create a cohesive, action-oriented visual language.
• Do use generous white space (lg spacing, 40px) between major sections to create breathing room and guide the eye.
• Do pair Poppins headings with Public Sans body copy; the combination signals both confidence and approachability.
• Do use the 3px primary border on the form card to create visual hierarchy and draw attention to the conversion focal point.

**Don't**

• Don't use secondary (#f4651d) or tertiary (#fcb900) on buttons or primary CTAs—they are accent colors only, used for links and badges.
• Don't apply shadows heavier than elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)); the design is clean and minimal, not layered.
• Don't use rounded corners smaller than lg (16px) on cards or containers; the design requires friendly, approachable shapes.
• Don't center-align body copy or form labels; left-align for faster scanning and a more professional appearance.
• Don't mix typefaces within a single component (e.g., don't use Inter for a headline); stick to Poppins for headings/labels and Public Sans for body.
• Don't reduce form input padding below 16px or border-radius below 72px; these elements must remain visually prominent and easy to interact with.