Pro Edges Painting

A bold brand and marketing site for a Halifax painting crew, built to prove the work, not describe it.

Role
UI Designer & Developer
Tools
Tailwind CSS, shadcn/ui, React, Vite

Problem

Halifax has no shortage of painting contractors, and almost every one of their sites looks the same: a truck photo, a phone number, a vague promise of quality. Homeowners can't tell a careful crew from a sloppy one before they've already let someone in the door, and a paint job can't be quoted instantly the way a small repair can: someone has to see the walls first. Pro Edges needed a site that made craftsmanship visible up front and turned its own tagline, "Sharp lines, solid work," into something you feel scrolling, not just read.

Process

1 / 4

Sharp lines, solid work

The tagline is the whole visual system. Oversized slab type sits under a hero photo of the actual crew and truck, and the photo's edges are torn like a brush stroke instead of cut square. The words Solid work sit on a painted orange swipe. The primary button and a quieter See our work link give the visitor a clear first move.

On mobile

Nothing here is a shrunk-down desktop page. The hero keeps its sticky Call / Free Quote bar within thumb reach for the entire scroll. Services become a swipeable, peeking card carousel with dot pagination instead of a cramped grid. The nav menu and the quote form both open as the same bottom sheet with a drag handle (one interaction learned once, reused twice) so getting around never means reaching for the top of the screen. And the before/after comparisons still take a real finger drag, exactly like a mouse drag on desktop, with no fallback tap-to-toggle needed.

1. Land on the hero2. Open the menu3. Swipe through services4. Request a quote5. Drag the before and after

UX flow

No login, no account: a straight line from landing to a submitted quote request.

Select service
Back
Skippable: the sticky Call / Free Quote bar is always one tap away
Visitor arrives
Returning visitor
Browse the site
Get a Quote
Choose a service type
Fill contact details
Quote request submitted

Color palette

One confident orange against warm off-white and near-black: loud enough to feel like a brand, restrained enough to still look like a professional trade site.

Signal Orange

#F15323

Primary: CTAs, brush-stroke accents

Charcoal

#1A1A1A

Headlines, mascot linework

Ember

#DD3E0E

Hover / pressed state

Off-white

#F4F0EB

Background: warm neutral

Slate

#2E2E2E

Secondary dark surfaces

Outcome

Live in production for a real Halifax painting crew. The brand system (oversized type, the brush-stroke motif, the before/after proof) repeats identically across hero, gallery, and quote flow, so the site reads as one confident voice instead of a stitched-together template. And the before/after slider gives the crew a page they can text a prospective customer instead of describing the work over the phone.