Vintage Wholesale Supply

Overview

Vintage Wholesale Supply embodies **Industrial Maximalism**—a design philosophy that celebrates abundance, urgency, and uncompromising clarity. The brand serves UK and international vintage buyers seeking premium deadstock from Carhartt, Dickies, Nike, and heritage labels. The aesthetic combines stark black-and-white minimalism with explosive accent colors (vivid orange #ff6b35, golden yellow #f4ac03) to convey both the curated precision of a wholesale operation and the raw energy of a treasure hunt. The UI evokes the feeling of walking into a warehouse where every moment counts: inventory is finite, restocks are imminent, and discovery is immediate.

The voice is direct, confident, and urgently conversational—never flowery or apologetic. Vocabulary leans into scarcity and exclusivity: "200,000 items restocking soon," "Don't miss it," "Premium vintage brands." The tone assumes the user knows what they want and respects their time. Example sentence in brand voice: "Carhartt jackets just landed—grab yours before the restock ends."

Colors

The color system is built on **high-contrast industrial clarity**: a pure white (#ffffff) canvas anchors the interface, while a true black (#000000) primary serves as the dominant interactive and typographic element. This monochromatic foundation is punctuated by two strategic accent colors that signal urgency and premium status.

**Primary (#000000)** is deployed on all primary CTAs ("Add to Cart," "Shop Now"), navigation links, and body text. It conveys authority and trustworthiness in a wholesale context. **Secondary (#ff6b35, a warm burnt orange)** appears on promotional badges, countdown timers, and urgency indicators—the color of a warehouse alert light. **Tertiary (#f4ac03, a rich golden yellow)** highlights best-sellers, limited inventory warnings, and secondary CTAs. Together, the

Typography

The type system pairs **Jost** (a geometric sans-serif with 600 weight for headings) with **Poppins** (a rounded, friendly sans-serif at 400/700 weights for body and labels). This pairing balances industrial precision (Jost's sharp angles) with approachability (Poppins' warmth). Display text (60px, 600 weight, -0.02em tracking) commands attention on hero sections and countdown timers. Headline-lg (42px, 600 weight) anchors section titles. Body text (16px, 400 weight, 0.06rem letter-spacing) maintains readability at small sizes and on mobile. Labels (15px, 700 weight) appear on buttons and badges with 0.02em tracking for emphasis. All text over busy product imagery should receive a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure legibility. Headings use -0.015em to -0.02em negative lett

Layout

The layout follows a **12-column grid** with a max-width of 1280px (160rem in the theme variables). The design uses a fluid, mobile-first approach: on mobile, content stacks vertically with 20px grid gaps; on desktop, gaps expand to 40px. Section separation uses lg spacing (40px) between major blocks, creating breathing room without sacrificing the sense of density. The header is fixed at 96px height (--header-height: 96px) and remains visible during scroll to maintain navigation access. Hero sections use full-width backgrounds with 50px horizontal padding on desktop, collapsing to 16px on mobile. Product cards and collection cards use 0.8rem (12.8px) corner radius and 0px border-width by default, maintaining the sharp, architectural feel. Container padding follows the gutter token (24px)

Elevation & Depth

Depth is achieved through **shadow layering and border definition** rather than blur or glassmorphism. The system uses three elevation levels: **Level 1 (Base)** has no shadow, relying on 1px solid borders at rgba(0, 0, 0, 0.1) to define surfaces. **Level 2 (Standard Card/Hover)** applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift on interactive elements. **Level 3 (Modal/Elevated)** uses box-shadow: 2px 2px 10px 2px hsla(0, 0%, 60%, 0.2) for maximum separation. Buttons and inputs use a 1px border-width at 100% opacity (not semi-transparent) to maintain the sharp, industri

Shapes

The shape philosophy is **Architectural Sharpness with Controlled Softness**. Buttons use 1rem (16px) border-radius, creating a subtle rounded corner that softens the industrial edge without compromising precision. Cards and containers use 0.5rem (8px) radius by default, maintaining the grid-like, warehouse aesthetic. Inputs use 0.5rem radius to match cards. Badges and pills use full (9999px) radius for maximum softness, signaling secondary importance. The product card corner-radius is set to 0.8rem (12.8px), slightly more generous than standard containers to draw focus. Modals and drawers use

Components

Action Elements **Button-Primary** (black background, white text, 16px border-radius, 12px 30px padding, 48px height) is the dominant CTA for checkout, product addition, and primary navigation. On hover, the background shifts to #303030 (primary-container) with a 200ms ease-out transition. **Button-Secondary** (white background, black text, 6px border-radius, 1px #bfbfbf border, 10px 20px padding, 40px height) is used for secondary actions like "Log in" or "View details." On hover, background becomes #f6f6f6 (surface-container-low). **Button-Accent** (orange #ff6b35 background, white text, 16px radius) appears on urgency-driven CTAs like "Download App" or "Restock Alert." All buttons use Poppins 700 weight with 0.02em letter-spacing.

Containers & Surfaces **Card** (white backgroun

Do's and Don'ts

**Do**

• Do use the black primary (#000000) on all primary CTAs and headlines to maintain industrial authority and ensure 7:1 contrast ratio on white backgrounds.
• Do apply the orange accent (#ff6b35) sparingly—only on urgency signals, countdown timers, and restock alerts—to preserve its impact and prevent visual fatigue.
• Do maintain 1px solid borders at rgba(0, 0, 0, 0.1) on all cards and containers to preserve the architectural grid aesthetic and define surfaces without shadows.
• Do use Jost 600 for all headings (display, headline-lg, headline-md) and apply -0.015em to -0.02em negative letter-spacing to tighten the visual weight and convey urgency.
• Do stack spacing using the semantic scale (sm: 12px, md: 24px, lg: 40px) consistently across sections, cards, and form groups to create predictable rhythm.

**Don't**

• Don't use the secondary orange (#ff6b35) on body text, backgrounds, or non-urgent elements—it is reserved exclusively for urgency and promotional signals.
• Don't apply shadows to buttons or inputs; use 1px borders and focus outlines instead to maintain the sharp, architectural aesthetic.
• Don't mix Jost and Poppins weights carelessly; Jost is always 600+ (headings only), Poppins is 400 (body) or 700 (labels/buttons). Never use Poppins 600 for headings.
• Don't round corners beyond 16px on primary CTAs or cards; the brand identity depends on controlled softness, not organic curves.
• Don't use transparency or glassmorphism effects (backdrop-filter, rgba backgrounds with blur); the design system is built on solid colors and geometric shadows for clarity and warehouse authenticity.