Post Familiar Minimalist Winery Storefront

Overview

Post Familiar is an experimental e-commerce storefront for a Portland-based winery that breaks traditional retail conventions with a brutalist, high-contrast aesthetic. It serves as a premier reference for builders looking to implement bold age-verification gates, creative typography-led layouts, and liquid-motion product galleries.

Design System

• Color Palette & Visual Hierarchy: The site uses a strict monochrome base (Black #000 and White #fff) with aggressive accent colors like Neon Yellow (#e8e536) and Hotline Pink (#fc3192) used to differentiate sections. The hierarchy is driven by extreme scale rather than color, with massive headings creating a "poster" feel.
• Typography: The system mixes high-impact Serif headings for elegance with Monospaced font stacks (mono class) for technical data like ABV and bottle counts. Font sizes are oversized, with verification numbers reaching up to 310px.
• Page Structure & Flow:
  1. Age Gate: Full-screen high-contrast verification screen (21+ Y/N).
  2. Brand Poster: Large hero section with blended image/text containers.
  3. Value Proposition: Grid-based layout mixing serif and mono text to describe collaborative efforts.
  4. Horizontal Slider: A -item-drag gallery showcasing products with "Sold Out" overlays.
  5. Impact Sections: Full-width color blocks (Pink/Yellow) for specific collaborations and club signups.
• Reusable Components:
  • Age Verification Modal: A simple js-age wrapper with large boolean triggers.
  • Tag Badges: Mono-spaced, high-contrast pills (tag class) for metadata.
  • Newsletter Popover: A minimalist vertical-align overlay with a simple arrow-button submit.
• Interactions & Motion: The UI utilizes smooth-scrolling containers (smooth-wrapper) and JS-driven horizontal dragging for product discovery. Images use a "wrapped-img" class suggests a hover-reveal or lazy-load transition.
• Implementation Clues: Built on Shopify, the code reveals a custom implementation using flexbox (flex-stack) and a 12-column grid system (grid-col-12). It utilizes data-foreground attributes to dynamically swap text colors based on section backgrounds.

Use Cases

• Who should clone this: Developers building for boutique brands in the alcohol, fashion, or high-end streetwear industries where "vibe" is as important as utility.
• Effective Remixes: Perfect for limited-drop product launches where inventory is small but the brand story is dense.
• Remix Directions:
  • Typography Swap: Replace the serif with a bold Grotesk font to pivot from "Winery" to "Tech/SaaS Landing Page."
  • Information Architecture: Adapt the horizontal dragger for a portfolio site to showcase case studies.
  • UI Isolation: Clone the Age Verification gate and the Newsletter Popover as standalone utilities for existing Shopify themes.
• Clone Scope: A full-page clone is recommended for high-concept brands, while others should focus on the -row--poster and -item-drag gallery components.