Jacksonville Cleaning Pros

Overview

Jacksonville Cleaning Pros is a professional exterior cleaning service brand that combines high-energy, action-oriented visual identity with sophisticated serif typography and dark, trustworthy foundations. The aesthetic is 'Service-Driven Warmth'—a blend of approachable energy (vivid orange #FF5E15 on CTAs and hero accents) with professional gravitas (dark charcoal headers #0c0407, serif body copy in Lora). The brand evokes confidence, reliability, and immediate action: users see a bright orange button and know exactly what to do. The visual language prioritizes clarity over decoration, using generous whitespace (24px gutters, 40px section spacing) and high-contrast text to ensure every service offering is scannable. Voice: direct, knowledgeable, and service-focused. Example: 'We clean driveways with a surface cleaner for an even finish, then post-treat to protect the surface—not a one-size-fits-all approach.'

Colors

The color system is anchored by a vibrant, action-oriented primary orange (#FF5E15) used exclusively on primary CTAs ('Call Now', 'Call (904) 938-8585'), hero accents, and interactive focus states. This orange is not decorative—it signals urgency and trust in a service context. Secondary color is a near-black charcoal (#211d1d, #0c0407) used for header backgrounds, footer, and text-heavy sections, creating a sophisticated, professional frame. Tertiary accent (#E55210, a darker orange) is reserved for hover states and secondary emphasis. The surface stack uses warm, off-white tones: #ffffff for main body, #f8f7f4 (cream) for subtle container backgrounds, and #e9ecef (light gray) for disabled or secondary container states. Text color on light backgrounds is a warm, muted green-gray (#47564e,

Typography

The type system is built on Lora (a high-contrast serif from Google Fonts) paired with Source Serif 4 as fallback, establishing a premium, editorial voice that differentiates the brand from generic sans-serif service sites. Display and headline levels (44.8px–56px, fontWeight 700) use Lora at tight line-heights (52px–64px) with negative letter-spacing (-0.03em to -0.02em) to create visual impact and authority. Body copy (16px–18px, fontWeight 400, lineHeight 24px–28px) maintains readability while preserving the serif elegance. Labels and CTAs use fontWeight 500–600 at 15.9375px–16px with subtle letter-spacing (0.01em) to add precision. The serif choice communicates expertise and permanence—appropriate for a service business where trust is paramount. On small labels over busy backgrounds (e

Layout

The layout follows a 12-column grid with a max-width of 1280px, using a fluid container approach on mobile (100vw with 24px horizontal padding) that tightens to fixed width on desktop. Section spacing uses the semantic lg token (40px) between major sections (hero, services, testimonials, CTA), with md spacing (24px) for subsections and card groups. The hero section spans full-width with a dark overlay (rgba(12, 4, 7, 0.85)) to ensure text legibility over the background image, using 24px gutter padding on mobile and 40px on desktop. Cards and content containers use 24px padding (md token) internally, with 12px (sm token) between nested elements. The grid maintains 24px gutters between columns on desktop, collapsing to single-column on mobile with 24px side margins. Whitespace is intentional

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of glassmorphic overlays. Level 1 (base): no shadow; flat surfaces like body background (#ffffff) or light containers. Level 2 (cards, inputs): box-shadow 0 4px 12px rgba(0, 0, 0, 0.08), applied to service cards and form inputs to lift them subtly from the page. Level 3 (modals, elevated cards): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12), used sparingly for overlays or hero-adjacent elements. Interactive elements (buttons on hover) gain a glow effect: box-shadow 0 0 20px rgba(255, 94, 21, 0.4), reinforcing the action-orient

Shapes

The shape philosophy is 'Soft-Technical Professionalism'—rounded corners are present but restrained, signaling approachability without sacrificing authority. Buttons use 8px border-radius ({rounded.md}), a moderate curve that feels modern yet professional. Cards and containers use 12px–16px ({rounded.lg}), creating a softer, more inviting frame for service offerings and testimonials. Input fields use 12px border-radius to match card styling and create visual cohesion. The logo and brand mark use 16px rounded corners on the square icon, reinforcing the brand's friendly-but-serious tone. Full-ci

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use {colors.primary} (#FF5E15) background with white text, 14px 32px padding, 8px border-radius, and fontWeight 500. On hover (button-primary-hover), the background shifts to {colors.tertiary} (#E55210) with a glow effect (box-shadow 0 0 20px rgba(255, 94, 21, 0.4)), creating a sense of energy and readiness. Active state (button-primary-active) darkens to {colors.on-primary-container} (#C2450A). Secondary buttons (button-secondary) use transparent background with a 2px solid border at {colors.outline} (#BDBDBD), text color {colors.on-surface} (#47564E), and 11px 24px padding. On hover, the background fills with {colors.surface-container-high} (#E9ECEF) and text becomes {colors.primary} (#FF5E1

Do's and Don'ts

**Do**

• Do use the primary orange (#FF5E15) exclusively on CTAs and interactive focus states—it signals action and trust in a service context.
• Do maintain 24px gutters and 40px section spacing to create breathing room and guide users through the service offerings.
• Do apply Lora serif typography to headlines and body copy to establish editorial authority and differentiate from generic service sites.
• Do use the dark charcoal header (rgba(12, 4, 7, 0.85)) to frame the page and create visual hierarchy without heavy shadows.
• Do apply the glow effect (box-shadow 0 0 20px rgba(255, 94, 21, 0.4)) on button hover to reinforce the action-oriented aesthetic.
• Do use 8px–16px border-radius consistently across buttons, cards, and inputs to maintain the soft-technical professionalism.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) for body text—stick to the warm green-gray (#47564E) on light backgrounds and white with dark overlay on dark backgrounds.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12)—the design prioritizes clarity and flatness over depth.
• Don't mix serif and sans-serif fonts in the same hierarchy level; Lora is the primary typeface, with Source Serif 4 as fallback only.
• Don't use the secondary orange (#E55210) on primary CTAs—reserve it for hover states and secondary emphasis only.
• Don't exceed 1280px container max-width on desktop; maintain responsive scaling with clamp() for typography on mobile.
• Don't remove the 1px border on glass cards (rgba(255, 255, 255, 0.15))—it's essential for visual separation from the background image.