WPMade

Overview

WPMade is a premium WordPress website showcase platform that celebrates exceptional digital craftsmanship through a carefully curated collection of real-world examples. The brand embodies 'Refined Minimalism'—a design philosophy that prioritizes clarity, purposeful whitespace, and sophisticated typography over decorative elements. The interface evokes a sense of professional discovery and inspiration, speaking directly to designers, developers, and creative directors seeking to elevate their own work. The emotional response is one of aspiration tempered by accessibility: users feel empowered to explore without intimidation.

The brand voice is authoritative yet approachable, favoring precision over hyperbole. WPMade speaks in the language of craft: 'handpicked collection,' 'standout WordPress websites,' 'spark your inspiration.' The vocabulary avoids marketing clichés, instead grounding itself in tangible outcomes and real examples. Example sentence in brand voice: 'Discover this week's best WordPress sites—each one engineered for performance and designed for impact.'

Colors

The color system centers on a sophisticated purple-to-charcoal palette that signals both creativity and professionalism. Primary (#7339d0) is a vibrant, saturated purple deployed exclusively on interactive elements—call-to-action buttons, active states, and focus indicators—creating a clear visual hierarchy that guides user attention without overwhelming the interface. Secondary (#1d1e39) is a near-black charcoal used for primary text, button backgrounds on hover, and structural elements, providing the contrast necessary for legibility while maintaining visual warmth. Tertiary (#a18fd6) is a muted lavender that softens the palette, appearing in secondary badges, disabled states, and subtle accent borders.

The surface stack progresses from the bright base (#fcfaff—a near-white with a hint

Typography

The typography system uses Satoshi Font exclusively, a geometric sans-serif that communicates both modernity and approachability. The hierarchy spans from display (68px, 900 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and UI labels. Display and headline-lg employ aggressive negative letter-spacing (-0.02em, -0.015em respectively) to create visual impact and compress the visual weight of large text, while body and label sizes maintain neutral or slightly positive tracking (0em to 0.02em) for optimal readability at smaller scales. The system uses weight variation strategically: 900 weight for display headlines commands attention, 700 for section headers establishes hierarchy, 500 for body text ensures comfortable reading at 16px–18px sizes, and 600 for labels

Layout

The layout employs a 12-column grid system with a maximum container width of 1320px, enabling flexible responsive behavior across breakpoints (991px, 767px, 478px). The page rhythm is governed by a semantic spacing scale: xl (64px) separates major sections (hero from featured projects), lg (40px) creates breathing room between card groups, md (24px) provides standard padding within components, and sm (12px) is reserved for internal element spacing. The design favors generous whitespace—particularly in the hero section and between card rows—to reduce cognitive load and emphasize the curated nature of the content. Gutters are consistently 24px on desktop, collapsing to 16px on tablet and 12px on mobile to maintain proportion. The container-max-width of 1320px ensures content remains scannabl

Elevation & Depth

Depth is conveyed through a restrained shadow system rather than color shifts or borders. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for subtle separation of interactive elements like input fields and small cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and modals that require clear visual distinction from the background, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements and high-priority overlays. Shadows use a soft, diffuse blur radius (12px–40px) to avoid harsh edges, and the y-offset (1px–16px) creates a sense of gentle lift rat

Shapes

The design system embraces 'Architectural Precision'—a shape philosophy that favors minimal, geometric border-radius values that feel intentional rather than decorative. Buttons and input fields use DEFAULT (0.375rem / 6px) radius, creating subtle softness that prevents a harsh, utilitarian appearance while maintaining visual clarity. Cards and larger containers employ md (0.5rem / 8px) or lg (1rem / 16px) radius depending on visual weight, with the larger radius reserved for prominent showcase cards that require visual distinction. Toggle switches and badge components use full (9999px) radius

Components

Action Elements Buttons are the primary interaction mechanism and employ a strict three-tier system. Primary buttons (background: #7339d0, text: #fcfaff, padding: 24px 44px, height: 48px) are reserved for the most important actions—'Site Submit,' 'Accept All' in consent flows, and primary CTAs in hero sections. On hover, the background transitions to secondary (#1d1e39) over 150ms, creating a clear state change without color shift fatigue. Secondary buttons (background: #ffffff, text: #1d1e39, border: 1px solid #a18fd6) are used for alternative actions and navigation; on hover, the background shifts to surface-container-low (#f0ebf9) while maintaining the border. Tertiary buttons (background: transparent, text: #7339d0) are deployed for low-priority actions and inline links; they gain

Do's and Don'ts

**Do**

• Do use primary (#7339d0) exclusively for interactive elements—buttons, links, focus states—to maintain a clear visual hierarchy and guide user attention.
• Do apply generous whitespace (lg: 40px, xl: 64px) between major sections to reduce cognitive load and emphasize the curated, premium nature of the content.
• Do use Satoshi Font at 500–700 weight for body and label text; avoid weights below 500 at sizes smaller than 16px to maintain legibility.
• Do transition hover states over 150–200ms using ease timing to provide tactile feedback without jarring movement.
• Do layer shadows (sm, md, lg) to establish clear visual hierarchy; avoid combining shadows with color shifts on the same element.

**Don't**

• Don't use secondary (#1d1e39) or tertiary (#a18fd6) as primary interactive colors; reserve them for supporting roles and state changes.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding fragments the visual language.
• Don't use Satoshi Font weights below 400 or above 900; the typeface is optimized for 300–900 and extreme weights reduce legibility.
• Don't combine multiple elevation levels (e.g., shadow + border + color shift) on a single component; use one primary depth cue per element.
• Don't deploy the error color (#cf2e2e) for non-critical messaging; reserve it for validation failures and system alerts to maintain urgency.