Above and Beyond Plumbing & Electric

Overview

Above and Beyond Plumbing & Electric embodies a **Service-Driven Professionalism** aesthetic—a design language that prioritizes trust, accessibility, and action. The brand serves Memphis homeowners and businesses seeking reliable electrical and plumbing expertise, and the UI reflects this through a confident color palette (deep professional blue #1962af paired with energetic action red #ec272e) and clean, utilitarian typography. The emotional response is one of competence and approachability: users immediately sense this is a serious, established service provider that won't waste their time.

The brand voice is direct, solution-focused, and neighborly. Vocabulary leans toward concrete outcomes ("Panel Upgrades," "Surge Protection," "24/7 Emergency Response") rather than abstract benefits. Tone is warm but professional—never overly casual, never corporate-stiff. Example sentence in brand voice: "Your electrical panel is working harder than it should. Let's fix that today."

Colors

The color system is built on a **trust-and-urgency** duality. Primary (#1962af, a confident corporate blue) anchors the brand identity and appears on navigation, secondary CTAs, and informational elements—it signals stability and expertise. Tertiary (#ec272e, a vivid action red) is reserved for high-priority CTAs ("REQUEST SERVICE," "CALL US") and alerts; it creates visual urgency without aggression. Secondary (#a6d6f3, a soft sky blue) provides a calming accent for supporting information, service cards, and hover states, preventing the interface from feeling too stark.

Surface colors follow a light, clean hierarchy: white (#ffffff) as the primary canvas, with progressive grays (#f8f9fa → #dee2e6) for depth and separation. On-surface text is dark charcoal (#212529) for maximum readability

Typography

The type system pairs **Montserrat** (a geometric, confident sans-serif) for headlines and labels with **system-ui stack** (Segoe UI, Roboto, Helvetica Neue) for body text. This combination balances brand personality (Montserrat's modern, slightly technical feel) with legibility and performance (system fonts render instantly). Headlines use Montserrat at weights 600–700 with tight letter-spacing (-0.02em to -0.04em) to convey authority; body text uses the system stack at 400 weight with 1.5 line-height (24px on 16px base) for comfortable reading. Labels and CTAs use Montserrat 600 at 14px with 0.01em letter-spacing to create visual hierarchy without sacrificing clarity. On small labels over busy backgrounds (e.g., service badges), apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) to ensure cont

Layout

The layout follows a **12-column responsive grid** with a max-width of 1280px, ensuring content remains scannable on desktop while adapting fluidly to mobile. The header uses a fixed 24px gutter (left/right padding) on desktop, collapsing to 12px on mobile. Section separation is achieved with 40px (lg spacing) vertical margins between major content blocks, creating a breathing rhythm that prevents cognitive overload. The hero section spans full-width with a semi-transparent overlay (rgba(0,0,0,0.3)) to ensure text legibility over background imagery. Cards and service sections use 24px (md spacing) internal padding with 12px gaps between grid items. Container max-width is 1280px to prevent lines from becoming too long; this maintains ~65–75 characters per line for optimal readability.

Elevation & Depth

Depth is conveyed through a **subtle shadow hierarchy** rather than aggressive layering. Level 1 (base surfaces) uses no shadow—white cards sit flush on the white background. Level 2 (interactive elements like cards on hover, input fields) applies 0 4px 12px rgba(0,0,0,0.08), a soft shadow that lifts the element 4px. Level 3 (modals, dropdowns, active buttons) uses 0 16px 40px rgba(0,0,0,0.12), creating clear visual separation. Buttons receive an additional treatment: primary buttons (blue) have a 4px shadow at rest, escalating to 16px on hover to signal interactivity. The hero section uses a

Shapes

The shape language is **Approachable Modernism**—rounded enough to feel friendly and contemporary, but not so rounded as to sacrifice professionalism. Buttons and CTAs use full pill-shape (border-radius: 9999px) at 48px height with 12px vertical padding, creating a distinctive, clickable silhouette that stands out against rectangular form fields. Cards and containers use 1rem (16px) border-radius for a softer, more inviting appearance than sharp corners, while maintaining a structured feel. Input fields use 0.5rem (8px) border-radius—slightly less rounded than cards—to differentiate form eleme

Components

Action Elements Buttons are the primary interaction pattern. **Primary buttons** (blue, #1962af) use Montserrat 600 at 14px, 12px vertical padding, 24px horizontal padding, and full pill-shape (border-radius: 9999px). They receive a 4px shadow at rest (0 4px 12px rgba(0,0,0,0.08)) and escalate to 16px shadow on hover. Hover state darkens to #144e8c with a 200ms transition (transition: all 200ms ease). **CTA buttons** (red, #ec272e) follow the same dimensions but use tertiary color; these appear on the hero and key conversion points. **Secondary buttons** (sky blue, #a6d6f3) use the same shape but with transparent background and primary text color, appearing as outline buttons for less prominent actions.

Containers & Surfaces Cards use 1rem (16px) border-radius, 24px padding, and a

Do's and Don'ts

**Do**

• Do use primary blue (#1962af) for trust-building elements like navigation, secondary CTAs, and informational links—it's the brand's signature color.
• Do reserve tertiary red (#ec272e) exclusively for high-priority CTAs and alerts; overuse dilutes its urgency.
• Do apply Montserrat for all headlines, labels, and UI text; use system fonts only for body copy to balance personality with performance.
• Do maintain 24px gutters on desktop and 12px on mobile; this breathing room prevents the interface from feeling cramped.
• Do use the full pill-shape (border-radius: 9999px) for buttons to create a distinctive, clickable silhouette.
• Do apply subtle shadows (4px–16px) to create depth; avoid harsh, high-contrast shadows that feel dated.

**Don't**

• Don't use primary blue and tertiary red together in the same component—they compete for attention. Use blue for context, red for action.
• Don't apply border-radius greater than 1.5rem to cards or containers; this breaks the professional, structured aesthetic.
• Don't use system fonts for headlines; Montserrat's geometric personality is essential to brand recognition.
• Don't exceed 40px vertical spacing between sections; this creates awkward, disconnected layouts.
• Don't apply shadows greater than 16px or with opacity above 0.15; this creates a floaty, ungrounded appearance.
• Don't mix rounded and sharp corners in the same interface; maintain consistency across all interactive elements.