Skip to content
DesignMunkDesignMunk Submit a site

Panda Gin

panda-gin.com
Le premier gin au litchi, 100% bio, fabriqué en Belgique.
Ecommerce Food & Drinks Shopify Tailwind Homepage Inter
Share Visit site
panda-gin.com DESKTOP · 1440
Panda Gin

AI Breakdown

Design export

---
version: alpha
name: Panda Gin
description: Le premier gin au litchi, 100% bio, fabriqué en Belgique.
colors:
  primary: "#171717"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: Inter
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -0.036em
  headline-sm:
    fontFamily: Inter
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.22
  headline-xs:
    fontFamily: Inter
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.21
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 3.2
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 22px
  lg: 40px
  xl: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 18px 26px
    height: 56px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 18px 26px
    height: 56px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Panda Gin: Monochrome Luxury with Countdown Hero

## Overview

A premium, monochrome ecommerce system built to foreground product photography. The tone is refined and minimal, favoring black text on white surfaces with generous margins and soft, rounded controls. Density is moderate: compact labels, roomy cards, and a large, cinematic hero. The audience spans retail shoppers and gifting buyers, with secondary routes to cocktails and journal content.

## Colors

- **primary (#171717):** Brand black for text, filled CTAs, icons, and key accents.
- **neutral (#ffffff):** Primary surface color for pages, cards, and inputs; also used for text when placed on black fills.
- **border (#e5e7eb):** Subtle dividers for cards, filters, and section seams.
- **surface ({colors.neutral}):** Default card and page background alias of neutral.
- **on-surface ({colors.primary}):** Default text color on white backgrounds.

## Typography

Inter is the sole family across headings, labels, and body. It is a Google font and can be loaded directly.
- Headline-lg (Inter 32px/700/1.19): Primary hero and section titles; tight, bold, and compact.
- Headline-md (Inter 27px/700/1.19, -0.036em): Secondary section headers and promotional callouts.
- Headline-sm (Inter 23px/600/1.22) and Headline-xs (Inter 19px/600/1.21): Tile titles, subheads, and modal titles.
- Body-md (Inter 16px/600/line-height 3.2): Dense labels, prices, and button text; the weight keeps the monochrome palette readable.
Substitutes if Inter is unavailable: Roboto, Helvetica Neue, or system-ui/Segoe UI for comparable x-height and spacing.

## Layout

Spacing follows a short, deliberate scale: 6, 14, 22, 40, 72. Use 72px for hero and major section paddings, 40px for standard section blocks, and 22px as the default gap in product grids and between card elements. Filters, badges, and small controls use 6–14px internal padding. Product grids typically render in 3–4 columns with 22px gutters; on mobile, collapse to a single column with the same internal spacings.

## Elevation & Depth

Shadows are absent at all sizes. Hierarchy relies on white space, the border token (#e5e7eb) for card and input outlines, and strong tonal contrast between #ffffff surfaces and #171717 text/fills. Depth within media is supplied by photography rather than UI effects.

## Shapes

Two radii define the language: 8px for cards and media containers (quiet, premium) and 9999px for interactive pills—buttons, chips, and small badges. The full-radius shape is a brand signature that softens otherwise minimal monochrome elements.

## Components

Buttons
- Primary: Filled pill, 56px height, padding 18px 26px, radius 9999px. On page, it renders as #171717 background with #ffffff text for clear contrast.
- Secondary: Ghost/outline treatment on white surfaces with #ffffff text when used over imagery; pair with a 1px #e5e7eb border when needed.
- Link: Text-only control with #171717, radius 0.

Card
- White surface (#ffffff), 8px radius, 16px inner padding, #171717 copy and #e5e7eb divider/border as required.

### Promo Notice Bar
A thin site-wide strip communicating free shipping thresholds. Background #171717 with #ffffff text; height sized to Body-md; horizontal padding 22–40px.

### Hero Countdown Banner
Edge-to-edge media with draped-black photography, centered copy. Title uses Headline-lg; timer values use Headline-md; CTA is a 56px primary pill. Outer container radius 8px to match cards.

### Category Pills (Filter Row)
Full-radius chips on white: border #e5e7eb, text #171717, internal padding 6px (top/bottom) × 14px (sides). Spacing between pills: 14–22px.

### Product Card Tile
8px image corners, white card, 16px padding. Title in Headline-xs, price in Body-md. Primary "Ajouter au panier" pill at 56px height; optional small "Voir" chip.

### Badge Labels
"BEST-SELLER", "NEW", "Épuisé" small capsules. Use full radius, 6px vertical × 14px horizontal padding, high-contrast text; place top-left within the media frame.

### Age-Gate Modal
Centered card with 8px radius on a dimmed backdrop, title in Headline-sm, two pill buttons (primary/secondary) spaced by 22px.

### Newsletter Signup Bar
White strip with top border #e5e7eb, 40–72px vertical padding. Input with 8px radius and a 56px primary pill aligned right; copy in Headline-xs and Body-md.

## Do's and Don'ts

- Do keep surfaces pure white and rely on #171717 for all typographic emphasis and filled CTAs.
- Do use the 9999px pill radius consistently for buttons, badges, and category chips.
- Do separate sections and cards with the #e5e7eb border or generous 40–72px spacing—not shadows.
- Don't introduce accent colors into the UI; let photography supply color.
- Don't mix multiple CTA styles on the same card; prefer a single 56px primary pill.
- Don't tighten chip padding below 6px × 14px; cramped pills lose the premium feel.

## Agent Prompt Guide

Quick color reference
- Text: #171717
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA fill: #171717

1) Build a countdown hero
- Container: full-width, 72px top/bottom padding, background image; 8px outer radius.
- Title: Inter 32px, weight 700, line-height 1.19, color #ffffff over a dark photo.
- Timer: Inter 27px, weight 700, letter-spacing -0.036em, color #ffffff; stack labels in Inter 16px/600 below.
- CTA: pill button 56px high, padding 18px 26px, radius 9999px, background #171717, text #ffffff.

2) Create a category chip row
- Horizontal list with 22px gap.
- Chip: full radius 9999px, 1px border #e5e7eb, background #ffffff, text #171717.
- Internal padding: 6px top/bottom × 14px left/right (xs × sm). Type: Inter 16px/600.

3) Product grid (3 columns)
- Grid gap 22px; card background #ffffff; 8px radius; 16px inner padding.
- Title: Inter 19px/600. Price: Inter 16px/600.
- Primary CTA: pill 56px high, 18px 26px padding, radius 9999px, background #171717, text #ffffff; card-to-card spacing 22px.

4) Newsletter bar
- Section: white background, top border 1px #e5e7eb, 40px vertical padding.
- Headline: Inter 23px/600; helper copy: Inter 16px/600.
- Input: 8px radius, 1px border #e5e7eb; Submit: pill 56px high, background #171717, text #ffffff.

## Similar Brands

- Seedlip: similarly restrained monochrome UI with product photography as color; Seedlip uses more serif headers for a botanical tone.
- Grey Goose: premium black/white scaffolding with large photography; adds soft blues as a brand accent unlike Panda's strict grayscale.
- Aviation Gin: bold, high-contrast ecommerce with oversized CTAs; employs more texture and promotional color than Panda's minimalism.
- Hendrick's Gin: leans into illustrative eccentricity; shares tight grids but diverges with decorative type and vintage palette.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 1 day ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 3 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 3 days ago