WP Engine

Overview

WP Engine is an enterprise-grade managed WordPress hosting platform that embodies 'Technical Clarity'—a design aesthetic that prioritizes precision, trust, and performance transparency. The brand serves developers, agencies, and enterprises who demand both power and simplicity; the UI reflects this by combining sophisticated technical capability with approachable, human-centered design. The visual language uses a cool, professional palette anchored by a vibrant primary blue (#006bd6) that signals reliability and action, paired with a deep navy secondary (#002447) that conveys stability and expertise. The emotional response is one of confidence: users feel they are in control of a robust, well-engineered system.

The voice is direct, precise, and never condescending. WP Engine speaks in concrete terms—'5M+ websites', '24/7 support', 'UK and EU data centres'—avoiding marketing hyperbole. The tone balances technical authority with accessibility; a developer should feel respected, while a non-technical stakeholder should feel informed. Example sentence in brand voice: 'Your sites run on infrastructure built for scale, monitored every second, backed by engineers who answer in minutes.'

Colors

The color system is anchored by Primary Blue (#006bd6), the signature accent used exclusively for primary CTAs, focus states, and key interactive elements. This blue is not merely decorative—it signals actionability and trust, appearing on the 'Get Started' button, link underlines, and active navigation states. Secondary Navy (#002447) grounds the interface as the dominant text color and provides visual weight to headings and structural elements, creating a professional, authoritative foundation. Tertiary Purple (#7a45e5) is reserved for secondary actions, badges, and accent highlights that need to differentiate from primary interactions without competing for attention. The surface stack uses a clean white (#ffffff) as the primary background, with subtle grays (#f2f2f2, #e9ecef, #dfe3e8) f

Typography

The type system pairs Lora serif for headlines and display text with Inter sans-serif for body and UI labels, creating a 'authoritative-yet-approachable' hierarchy. Lora's generous letterforms and high contrast convey expertise and editorial weight—appropriate for a platform trusted by enterprise clients—while Inter's geometric clarity ensures legibility at small sizes and on interactive elements. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; Headline-lg (40px, 700 weight) anchors feature sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and feature descriptions, providing ample breathing room. Body-md (16px, 400 weight, 24px line-height) is the

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing content to scale responsively from mobile (single column) to desktop (multi-column layouts). The gutter is consistently 24px (md spacing), creating visual rhythm and breathing room between sections. Hero sections use full-width backgrounds with centered content containers, establishing a clear visual hierarchy. Section separation is achieved via lg spacing (40px) vertical margins, creating distinct visual breaks without excessive whitespace. The container-max-width of 1280px ensures that on ultra-wide displays, content remains scannable and not stretched. Padding inside containers follows the spacing scale: cards use md (24px) padding, input fields use sm (12px), and dense UI elements use xs (4px). The design favor

Elevation & Depth

Depth is conveyed through a restrained shadow system and background color shifts rather than heavy drop shadows. Level 1 (Base/Surface) uses no shadow, relying on the white background (#ffffff) as the foundation. Level 2 (Standard Cards & Containers) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 4–8px off the base surface without creating visual heaviness. Level 3 (Modals, Elevated Cards, Hover States) uses box-shadow: 0 3px 6px rgba(0, 36, 71, 0.35), a slightly tighter shadow with increased opacity that conveys greater elevation and focus. Interactive ho

Shapes

The shape philosophy is 'Precision with Approachability'—sharp enough to feel technical and controlled, rounded enough to feel human and modern. Buttons use full radius (border-radius: 9999px), creating pill-shaped CTAs that are instantly recognizable and feel inviting; this applies to all button variants (primary, secondary, tertiary). Cards and containers use lg radius (1rem / 16px), providing subtle rounding that softens the interface without appearing playful or casual. Input fields use DEFAULT radius (0.5rem / 8px), a conservative rounding that maintains a form-like, utilitarian feel whil

Components

Action Elements Buttons are the primary interaction pattern. **Button-Primary** (background: #006bd6, color: white, padding: 12px 32px, height: 48px, border-radius: 9999px, font-weight: 700, font-size: 14px) is used for primary CTAs like 'Get Started' and 'Call 020 3770 9704'. On hover, the background shifts to #0052a3 and the shadow deepens to 0 3px 8px rgba(0, 0, 0, 0.2), with a 150ms transition. On active/press, the background becomes #003d7a and the shadow reduces to 0 1px 3px rgba(0, 0, 0, 0.12), creating tactile feedback. **Button-Secondary** uses a transparent background with a 2px solid border in primary blue, maintaining the same padding and height; on hover, the background fills with #e6f2fd (primary-container) while the border remains. **Button-Tertiary** uses the tertiary p

Do's and Don'ts

**Do**

• Do use Primary Blue (#006bd6) exclusively for primary CTAs and focus states—it is the visual anchor of the brand and should never be diluted or overused.
• Do maintain at least 24px (md spacing) of vertical separation between major sections to create visual breathing room and reduce cognitive load.
• Do apply the full-radius pill shape (border-radius: 9999px) to all buttons to signal interactivity and approachability.
• Do use Lora serif for headlines and Inter sans-serif for body text—never reverse this pairing, as it would undermine the authority-meets-clarity positioning.
• Do pair shadows with background color shifts (e.g., card hover uses both a darker shadow AND a lighter background) to create layered depth without visual heaviness.
• Do ensure all focus states use the 3px inset ring of rgba(0, 107, 214, 0.1) for keyboard accessibility and consistent visual feedback.

**Don't**

• Don't use Secondary Navy (#002447) as a background color—it is reserved for text and structural elements only. Using it as a fill will create insufficient contrast and confuse the visual hierarchy.
• Don't apply rounded corners smaller than 0.5rem (8px) to interactive elements; sharp corners feel unfinished and reduce perceived clickability.
• Don't mix serif and sans-serif fonts within a single heading or button—each element should use one family consistently to maintain clarity.
• Don't use shadows heavier than 0 3px 6px rgba(0, 36, 71, 0.35); excessive shadows create a 'floating' effect that feels disconnected from the professional, grounded brand.
• Don't apply the Tertiary Purple (#7a45e5) to primary CTAs or focus states—it is a supporting accent and should never compete with Primary Blue for attention.
• Don't reduce padding below 12px (sm spacing) on interactive elements; cramped UI feels rushed and reduces accessibility for touch users.