Expert-level annotated wireframe with text direction, content hierarchy, and UX specifications for the Coastal Payroll homepage.
Section: Global Navigation — Sticky header. Logo left-aligned. Primary nav links center-weighted. "Client Login" text link + orange "Get a Quote" CTA button right-aligned. Mobile: collapses to hamburger menu. Z-index: 100 (always on top).
Section: Hero — Split layout (50/50). Left: badge tag + H1 headline (Oswald, 48-60px) + supporting paragraph (Avenir 65 Medium, 18px) + dual CTA buttons + social proof row. Right: lifestyle photography of team/office with floating stat cards. Background: warm sand gradient. Text Direction: H1 is the first read — warm, human, conversational. Subhead reinforces "technology + human support." Primary CTA is orange "Get a Quote," secondary is outline "See How It Works."
San Diego-based · Serving Coast to Coast
We're Happy To Talk With You
Powerful payroll technology, paired with the kind of support that actually picks up the phone. Since 2007, businesses have trusted us with their most important asset — their people.
JMSKRL+
3,500+ clients served across all U.S. states & territories
Hero lifestyle photo: Friendly team member on phone, bright coastal office setting
NPS Score
71
Years in Business
18+
Section: Trust Bar / Key Stats — Full-bleed navy background. 4-column grid with vertical dividers. Large orange stat numbers (Oswald 800, 48px) with white descriptive labels below. Establishes immediate credibility. Text Direction: Numbers are eye-catching anchor points. Labels explain each metric concisely (1-2 lines max). Read left to right: scale → satisfaction → recognition → longevity.
3,500+
Clients served in all U.S. states and territories
71
Net Promoter Score — clients refer us again and again
9
Years on the Inc. 5000 fastest-growing list
15+
Years offering #morethanpayroll to businesses nationwide
Section: What Makes Coastal Payroll Different — 3-column card grid. Each card: icon (52px, sand BG) + H3 title + body text. Hover: orange top-border reveal + shadow lift. Text Direction: Section header centers the reader. Cards read L-R: people-first → simplicity → detail-orientation. Each card title is 3-5 words max. Body copy is 2-3 sentences max. Emphasize human differentiators over tech features.
Why Coastal Payroll
What Makes Us Different
We've been doing this since before most payroll apps existed. Here's what nearly two decades of experience looks like.
Real People, Every Time
No call trees, no chatbots. Your dedicated payroll specialist knows your business by name and picks up the phone when you call.
Payroll is What We Do
While others bolt on payroll as an afterthought, it's been our sole focus since 2007. Deep expertise means fewer errors and faster resolution.
We Handle the Details
Tax filings, compliance, garnishments, year-end reporting — the things that keep business owners up at night. We take them off your plate.
Section: What We Handle (Services) — Sand background. Tab navigation (pills) for service categories at top. Below: 2-column layout. Left: checklist of service items (teal check icons). Right: screenshot/illustration placeholder of the payroll platform interface. Text Direction: Tabs let users self-select interest area. Checklist items use bold H4 title + 1-line description pattern. Active tab highlights with navy fill. Copy is benefit-focused, not feature-focused.
Our Solutions
What We Handle
From first paycheck to year-end filing, we've got every detail covered so you can focus on running your business.
Full-Service PayrollTax Filing & ComplianceNew Hire ReportingYear-End Reporting
Accurate & On-Time Processing
Every pay period, every time. Direct deposit, checks, or pay cards — however your team prefers.
Dedicated Payroll Specialist
One point of contact who knows your account inside and out. No ticket numbers, just real conversations.
Employee Self-Service Portal
Your team can access pay stubs, W-2s, and update their info online — fewer questions for you.
Multi-State Payroll
Operating in multiple states? We manage the complexity of varying tax laws and filing requirements.
Platform dashboard screenshot or product illustration here
Section: How It Works — White background. Centered 3-step process. Numbered circles (80px, sand BG, Oswald) connected by dashed orange line. Each step: number → H3 title → description. Text Direction: Simple 1-2-3 reduces perceived complexity. Step titles are action-oriented verbs ("Share," "We Process," "You're Done"). Descriptions are 2 sentences max. The dashed connector line guides the eye left to right.
Getting Started
How It Works
Switching to Coastal Payroll is simple. We handle the heavy lifting so you can get back to business.
1
Share Your Needs
Tell us about your business, your team size, and what you need. We'll build a custom plan that fits.
2
We Set Everything Up
Our onboarding team migrates your data, configures your account, and tests everything before go-live.
3
Sit Back, We've Got It
Your dedicated specialist runs payroll on schedule. You approve with one click. We handle the rest.
Section: Client Stories / Testimonials — Full-bleed navy gradient with subtle wave texture. 2-column grid of frosted-glass cards. Each card: large opening quotation mark (Oswald, orange) + italic quote text + author avatar/name/title. Text Direction: Quotes should feel authentic and specific — mention actual results or experiences. Author info anchors credibility. Cards use backdrop-filter blur for depth. Section header uses "Client Stories" (warmer than "Testimonials").
Client Stories
Don't Take Our Word For It
Hear from businesses who've made the switch to Coastal Payroll.
[Client testimonial placeholder — specific quote about personal service, responsiveness, and reliability. 2-3 sentences that feel genuine and mention a concrete benefit.]
JM
[Client Name]
[Title], [Company Name]
[Client testimonial placeholder — focus on the transition experience, how easy onboarding was, and what it's like having a dedicated specialist. 2-3 sentences.]
SK
[Client Name]
[Title], [Company Name]
Section: Rooted in Southern California — White background. 2-column layout. Left: coastal lifestyle image (beach/San Diego skyline) with overlaid "Est. 2007" badge. Right: H2 + paragraph + 2x2 feature grid (teal dot bullets) + CTA button. Text Direction: This section builds emotional connection. H2 uses "Rooted in Southern California" to establish heritage. Body copy weaves in the 18+ year history naturally. Feature bullets use short phrases (3-5 words). The section answers "Why should I trust these people?"
Coastal San Diego imagery: beach, cliffs, or team photo in the local community
Est. 2007
San Diego, CA
Our Story
Rooted In Southern California
Since 2007, Coastal Payroll has grown from a small San Diego operation into a nationwide payroll partner — but we've never outgrown our roots. Our staff is ready to help, right by the coast, every day.
San Diego headquarters
Nationwide coverage
18+ years of expertise
Inc. 5000 recognized
Dedicated local team
Community-driven values
Section: Final CTA / Conversion Block — Sand background with subtle radial gradient accent. Centered layout, max-width 800px. H2 (Oswald, 48px) + supporting line + dual CTA buttons + reassurance note. Text Direction: H2 uses warm, inviting language ("Let's start a conversation" not "Request a demo"). Primary CTA is "Get a Free Quote" (orange, high contrast). Secondary is "Call Us Directly" (outline). Below: trust reassurance micro-copy ("No commitment. No pressure. Just a conversation.").
Ready to Switch?
Let's Start A Conversation
Whether you're outgrowing your current provider or just exploring options, we'd love to hear about your business.
No commitment. No pressure. Just a conversation.
Photography & Art Direction
Visual guidelines for all photography, illustration, and imagery across the Coastal Payroll brand.
05 / Photography
Image Mood Board
All imagery should feel warm, authentic, and coastal. Natural light is preferred. Avoid overly staged corporate stock. People should look genuine, approachable, and diverse. Settings should feel like Southern California — bright, open, optimistic.
Hero Shot Team member on phone, bright office with coastal light, surfboard visible in background. Warm, approachable.
Coastal Landscape San Diego coastline, golden hour
Team Candid Natural office interaction
Client Meeting Warm handshake, eye contact
Detail / Texture Surfboard wax, sand grain
Shot List & Art Direction by Section
Hero Section Primary lifestyle shot
Hero — Lifestyle Portrait
Subject: Male or female professional, 30-45, on phone or at desk. Setting: Bright, airy office with ocean view or coastal decor. Mood: Confident, warm, mid-conversation. Lighting: Natural window light, slight backlight glow. Avoid: Dark suits, sterile environments, stock-photo smiles.
Testimonials Client headshots
Client Portraits
Subject: Real clients, diverse range of industries and demographics. Setting: Environmental (at their business) or clean background. Mood: Genuine smile, direct eye contact. Format: Square crop for circular avatars. Minimum: 400x400px at 2x.
About / Rooted Place-based imagery
San Diego & Community
Subject: Iconic SD locations — La Jolla Cove, Torrey Pines, Coronado Bridge. Team volunteering or at community events. Mood: Pride, belonging, roots. Treatment: Can use subtle warm color grade. Avoid: Tourist cliches, overly saturated sunsets.
Subject: Dashboard screenshots in device mockups (MacBook, iPad, iPhone). Setting: On desk with coffee, plant, natural light. Mood: Clean, organized, easy-to-use. Treatment: Slight angle (15°), soft shadow. Never: Show real client data.
Team Section Leadership portraits
Team Headshots
Style: Consistent background (navy or light gray), same crop and lighting. Expression: Friendly, approachable, natural. Wardrobe: Business casual, brand colors encouraged. Format: 3:4 ratio, minimum 600x800px at 2x. Avoid: Arms crossed, forced poses.
Image Treatment Guidelines
COLOR GRADING
Warm whites, slight golden tint. Shadows pushed toward navy/blue. Highlights warm and bright. Skin tones natural — never orange or overly warm.
OVERLAY TREATMENTS
Navy gradient overlay (bottom 40%) for text readability. Never exceed 60% opacity. Use linear-gradient from transparent to rgba(27,58,92,0.7).
SIZING & PERFORMANCE
Serve WebP with JPEG fallback. Hero: 1920x1080 max. Cards: 800x600. Avatars: 400x400. All images lazy-loaded below the fold. Target <200KB per image.
Accessibility Specifications
WCAG 2.1 AA compliance requirements, contrast ratios, focus management, and ARIA landmark documentation.
06 / Accessibility
WCAG 2.1 AA Compliance
Every component and page must meet WCAG 2.1 Level AA standards. This section documents contrast ratios, keyboard navigation, screen reader support, and focus management patterns.
Color Contrast Ratios
Aa
Navy text on White background
12.5:1 AAA
Aa
White text on Navy background
12.5:1 AAA
Aa
White text on Orange (buttons)
3.2:1 AA Large
Aa
Orange text on White — decorative only, not for body text
3.2:1 Decorative
Aa
Navy text on Sand background
10.8:1 AAA
Aa
Gray-500 body text on White
5.0:1 AA
Aa
Gray-400 text on Deep Navy (footer secondary)
4.6:1 AA
Aa
White on Orange Dark (hover state) — preferred for small text buttons
4.5:1 AA
Focus Management
Required
All interactive elements must have visible focus indicators: 2px solid outline with 2px offset in var(--cp-navy)
Focus ring on orange buttons uses white outline for contrast
Tab order follows visual reading order (left-to-right, top-to-bottom)
Modal dialogs trap focus within the dialog until closed
Skip-to-content link as first focusable element on every page
Focus returns to trigger element when modal/drawer closes
ARIA Landmarks
Required
role="banner" — Site header/nav
role="navigation" — Primary nav, footer nav
role="main" — Primary content area
role="region" with aria-label — Each named section
role="contentinfo" — Footer
Every form has aria-describedby for error messages
Screen Reader Support
All images have descriptive alt text; decorative images use alt=""
Icons paired with text use aria-hidden="true"
Standalone icon buttons have aria-label
Dynamic content changes announced via aria-live="polite"
Tab panels use role="tablist", role="tab", role="tabpanel"
Keyboard Navigation
Tab: Move forward through interactive elements
Shift+Tab: Move backward
Enter/Space: Activate buttons, links, toggles
Arrow keys: Navigate within tab bars, radio groups, dropdowns
Escape: Close modals, dropdowns, mobile menu
Home/End: Jump to first/last item in lists
Motion & Animation
All animations respect prefers-reduced-motion: reduce
Scroll animations disabled for users who prefer reduced motion
No auto-playing video or carousel without user initiation
Loading spinners use aria-label="Loading"
Hover effects have equivalent focus effects
Forms & Validation
Every input has a visible <label> element (no placeholder-only labels)
Required fields indicated with text "(required)" not just asterisk
Error messages linked to fields via aria-describedby
Error summary at top of form with links to each field
Success states announced to screen readers via live region
Form submission confirms success with visible + announced message
Section: Global Footer — Deep navy background. 4-column grid: brand column (logo + description + phone/email) + 3 link columns (Solutions, Company, Resources). Below divider: copyright + social icons row. Text Direction: Brand column is widest (2fr). Link headings are uppercase labels (12px, 0.1em tracking). Link text is 14px with generous line-height. Social icons use hover-to-orange effect. Phone number and email should be prominent and clickable.