GPL Vault

Overview

GPL Vault is a professional WordPress marketplace platform serving developers, agencies, and digital professionals seeking premium plugins and themes. The design system embodies "Minimalist Professionalism"—a refined aesthetic that prioritizes clarity, scannability, and trust through generous whitespace, a restrained color palette, and purposeful typography hierarchy. The brand personality is authoritative yet approachable: confident in its expertise, never condescending, speaking to users as capable professionals. The interface evokes a sense of organized efficiency—every element has a clear purpose, every interaction is predictable. Voice example: "Browse 5,000+ GPL-licensed plugins and themes. Find exactly what you need in seconds."

Colors

The color system centers on a vibrant primary blue (#1e88e5) that signals trust, action, and digital professionalism—used exclusively on primary CTAs (the prominent 'PRICING' button), interactive focus states, and key navigation elements. This blue appears infrequently but with high impact, ensuring it commands attention without overwhelming the interface. Secondary purple (#720eec) serves as a supporting accent for WooCommerce-specific elements and secondary brand touchpoints, appearing in badges and tertiary UI components. Tertiary orange (#ff6900) is reserved for promotional highlights, alerts, and status indicators. The surface stack is anchored in pure white (#ffffff) for maximum content legibility, with subtle grays (#f4f4f9 for container-low, #e8e8e8 for container-high) providing vi

Typography

The typography system uses Poppins (Google Fonts: 400, 500, 600, 700 weights) as the primary typeface, establishing a modern, geometric aesthetic that feels both technical and approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 700 weight) is reserved for section titles and modal headers, maintaining visual hierarchy without excessive scale. Body-md (16px, 400 weight, 24px line-height) serves as the default reading text, optimized for 1.5 line-height ratio to ensure comfortable scanning of policy documents and product descriptions. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text, form labels, and navigation items, with increased letter-spacing to enhance legibility at smal

Layout

The page layout employs a 12-column grid system with a max-width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on smaller screens. The gutter spacing is fixed at 24px between columns, providing consistent rhythm. Section separation uses lg spacing (40px) between major content blocks, creating clear visual breathing room that guides users through the information hierarchy. The header occupies a fixed 64px height with 15px horizontal padding, establishing a consistent navigation anchor. The search bar spans 100% width of its container with 24px left/right margins, emphasizing its role as a primary discovery mechanism. Card-based content uses md spacing (24px) for internal padding, with 12px gaps between stacked elements. Container backgrounds tra

Elevation & Depth

Elevation in GPL Vault is achieved through subtle, flat-design shadows and strategic use of borders rather than dramatic depth effects. Level 1 (Base/Surface) uses no shadow, relying on 1px solid borders at rgba(0, 0, 0, 0.1) to define edges. Level 2 (Standard Cards) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border at rgba(0, 0, 0, 0.1), creating gentle separation from the background. Level 3 (Modals/Elevated Content) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) combined with a 1px border, establishing clear visual hierarchy. Hover states on interactive elements transit

Shapes

The shape philosophy is "Soft-Technical Pragmatism"—rounded corners are applied strategically to soften the interface without sacrificing professional polish. Primary buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel modern and inviting, drawing the eye to key actions like 'PRICING'. Secondary buttons and form inputs use moderate rounding (border-radius: 0.5rem / 8px) to balance approachability with clarity. Cards and containers use minimal rounding (border-radius: 0.25rem / 4px) to maintain a structured, organized appearance. The search button intentionall

Components

Action Elements Primary buttons (#1e88e5, 44px height, 10px 48px padding, border-radius: 9999px) are the dominant call-to-action, rendered in white text (fontWeight: 500) on the brand blue. Hover state transitions to #1565c0 over 200ms, providing clear feedback. Secondary buttons use transparent backgrounds with a 1px primary-blue border, allowing them to sit alongside primary buttons without competing for attention. The 'SEARCH' button (background: #303030, color: #ffffff, border-radius: 0px 2px 2px 0px) is intentionally darker and right-aligned to the search input, creating a visual compound component.

Containers & Surfaces Cards use white backgrounds (#ffffff) with 1px borders at rgba(0, 0, 0, 0.1) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). On hover, the shadow elevates to

Do's and Don'ts

**Do**

• Do use the primary blue (#1e88e5) exclusively on high-priority CTAs and interactive focus states—never on decorative elements or backgrounds.
• Do maintain 24px gutter spacing between grid columns and 40px section separation to create visual breathing room that guides users through content.
• Do apply Poppins 700 weight with -0.02em to -0.04em letter-spacing on all headings to create visual weight and hierarchy.
• Do use full border-radius (9999px) only on primary buttons; use 4px for cards and inputs to maintain structural clarity.
• Do transition all interactive states (hover, focus, active) over 150ms–200ms using ease-in-out timing to provide smooth, predictable feedback.

**Don't**

• Don't use secondary purple (#720eec) or tertiary orange (#ff6900) on primary CTAs—reserve them for badges, secondary actions, and status indicators.
• Don't apply shadows stronger than 0 16px 40px rgba(0, 0, 0, 0.12) or blur-radius > 40px; excessive depth contradicts the minimalist aesthetic.
• Don't mix Poppins with system fonts or fallbacks in component definitions—always specify Poppins as the primary family with explicit font-weight.
• Don't use near-black (#020203) text on colored backgrounds with contrast < 7:1; maintain WCAG AAA compliance on all body text.
• Don't apply rounding > 1.5rem (24px) to cards or containers; the soft-technical aesthetic relies on subtle, purposeful radius values.