HEP Vintage Club

Overview

HEP Vintage Club is a curated marketplace celebrating the joy of vintage discovery through bold, character-driven design. The brand embodies 'Retro-Maximalism'—a design philosophy that embraces warm, saturated colors (deep burgundy #a11e21, golden yellow #fcd25f), playful hand-drawn illustration, and generous typography to transform vintage shopping into an immersive, nostalgic experience. The aesthetic draws from 1970s Italian design culture, mid-century advertising, and contemporary playfulness, evoking feelings of discovery, warmth, and timeless style. Every interface element celebrates the tactile, analog nature of vintage hunting.

The brand voice is enthusiastic yet approachable, speaking to design-conscious collectors and curious newcomers alike. Tone: conversational, encouraging, never pretentious. Vocabulary favors Italian warmth ('carattere,' 'spazi,' 'unici') alongside English accessibility. The brand celebrates imperfection, history, and the stories embedded in vintage pieces. Example sentence in brand voice: 'Scopri il pezzo che racconterà la storia della tua casa—ogni oggetto è un'avventura.'

Colors

The color system centers on a warm, earthy foundation anchored by a signature burgundy primary (#a11e21) that commands attention on CTAs, navigation, and interactive states. This deep wine tone evokes vintage Italian design and appears across buttons, links, and focus states. The secondary accent, a vibrant golden yellow (#fcd25f), provides energetic highlights for badges, callouts, and secondary information—creating visual rhythm without overwhelming. A tertiary green (#1cc691) supports success states and confirmations. The surface stack uses a warm cream (#e9e3d8) as the dominant background, grounding the interface in a tactile, paper-like aesthetic that references vintage packaging and print design. Darker surface variants (#d9cfc0, #d7cfc4) create subtle depth for cards and containers.

Typography

The type system pairs a display-scale script font (Portuguesa Script at 216px) for hero moments with a contemporary geometric sans-serif (PP Agrandir) for body and navigation. This pairing—romantic script + modern sans—mirrors the brand's core tension: honoring vintage aesthetics while remaining accessible and contemporary. Display text uses Portuguesa Script at 216px with 240px line-height and -0.02em letter-spacing to create an expressive, hand-drawn quality that immediately signals the brand's playful personality. Headlines (32–48px) use PP Agrandir at 600 weight, providing clarity and hierarchy without coldness. Body text (16–18px) uses PP Agrandir at 400 weight with 24–28px line-height, ensuring comfortable reading on product descriptions and long-form content. Labels and buttons use

Layout

The layout uses a 12-column fluid grid with a 1200px max-width container, centering content on desktop while allowing full-bleed imagery on mobile. Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero, product grid, testimonials), md (24px) divides cards and subsections, and sm (12px) provides breathing room within components. The gutter width is 24px, creating balanced margins on desktop and tablet. The cream surface (#e9e3d8) extends edge-to-edge, creating a continuous, immersive backdrop. Product grids use a responsive 3-column layout on desktop (1200px+), 2 columns on tablet (768–1199px), and 1 column on mobile, with md spacing between items. Hero sections employ full-width imagery with overlay text positioned using lg spacing from edges. Navi

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids harsh contrast, maintaining the warm, approachable aesthetic. Level 1 (Base): The cream surface (#e9e3d8) with no shadow, establishing the calm foundation. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(0, 0, 0, 0.08), creating subtle separation from the background. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) with the same border treatment, providing clear hierarchy. Hover states intensify the shadow to 0 8px 20px rgba(0, 0, 0, 0.15), signalin

Shapes

The shape philosophy is 'Soft-Retro Precision'—combining rounded corners with intentional geometry to balance playfulness and clarity. Buttons and navigation pills use full rounding (border-radius: 9999px, or {rounded.full}), creating friendly, approachable CTAs that feel vintage-inspired yet contemporary. Cards and containers use lg rounding (1rem / 16px), softening corners without appearing overly rounded. Input fields use DEFAULT rounding (0.5rem / 8px), providing subtle softness while maintaining functional clarity. The full-round treatment on buttons (#a11e21 background, 40px height, 8px

Components

Action Elements Buttons are the primary interaction pattern, using full rounding (border-radius: 9999px) and bold color to command attention. Primary buttons (#a11e21 background, white text, 40px height, 8px 32px padding) use {typography.label-sm} (12px, 700 weight) for crisp, scannable text. On hover, the background shifts to {colors.primary-container} (#d4484d) with a 200ms transition, providing tactile feedback. Secondary buttons use a transparent background with a 2px {colors.primary} border, inverting on hover to a solid primary background. Both button variants use {rounded.full} for consistency. Navigation buttons in the header follow the same pattern, creating a unified interaction language across the site.

Containers & Surfaces Cards use {colors.surface} (#e9e3d8) as the b

Do's and Don'ts

**Do**

• Do use the full-round button style (border-radius: 9999px) for all primary CTAs to signal the brand's playful, vintage-forward personality.
• Do apply the 200ms transition on all interactive elements (buttons, cards, inputs) to create responsive, tactile feedback that feels intentional.
• Do maintain the warm cream surface (#e9e3d8) as the dominant background—it's the visual anchor that grounds the entire experience.
• Do pair Portuguesa Script (display) with PP Agrandir (body/nav) to create the romantic-meets-modern aesthetic that defines the brand.
• Do use the burgundy primary (#a11e21) sparingly on CTAs and focus states—its power comes from restraint and strategic placement.
• Do apply lg spacing (40px) between major sections to create generous, confident page rhythm that reflects the brand's approachability.

**Don't**

• Don't use sharp corners (0px border-radius) on any interactive element—the brand's warmth depends on soft, rounded geometry.
• Don't apply shadows exceeding 20px blur radius; the aesthetic is flat-yet-layered, not deeply dimensional.
• Don't override the primary color (#a11e21) with near-black or near-white for CTAs—the brand's signature burgundy is non-negotiable.
• Don't mix typefaces beyond Portuguesa Script and PP Agrandir; additional fonts dilute the distinctive, curated aesthetic.
• Don't use pure black text (#000000) on the cream surface; always use near-black (#0a0a0a) to maintain warmth and reduce contrast harshness.
• Don't apply the secondary yellow (#fcd25f) as a background for body text—it's reserved for badges and accent highlights to preserve legibility.