Skip to content
DesignMunkDesignMunk Submit a site

Barcoop Bevy

barcoopbevy.com
Everyday cocktail mixers made by bartenders with real ingredients.
Ecommerce Food & Drinks Webflow Homepage din-2014-narrow railroad-gothic-atf
Share Visit site
barcoopbevy.com DESKTOP · 1440
Barcoop Bevy

AI Breakdown

Design export

---
version: alpha
name: Barcoop Bevy
description: Everyday cocktail mixers made by bartenders with real ingredients.
colors:
  primary: "#fefcf5"
  secondary: "#289e7c"
  tertiary: "#ffc517"
  neutral: "#121212"
  border: "#374151"
  brand-ajwain-green: "#d2e07d"
  brand-dublin: "#6db96e"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: railroad-gothic-atf
    fontSize: 104.2px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: railroad-gothic-atf
    fontSize: 79.7px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: railroad-gothic-atf
    fontSize: 22.5px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.02em
  headline-xs:
    fontFamily: din-2014-narrow
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: din-2014-narrow
    fontSize: 16.8px
    fontWeight: 400
    lineHeight: 1.48
rounded:
  sm: 8px
spacing:
  xs: 4px
  sm: 8px
  md: 18px
  lg: 22px
  xl: 44px
components:
  button-primary:
    backgroundColor: "#fbf7e9"
    textColor: "#3a8075"
    rounded: 0px
    padding: 17px 22px
    height: 52px
  button-secondary:
    textColor: "#fbf7e9"
    rounded: 0px
    padding: 17px 22px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Barcoop Bevy: Condensed Block Headlines Over Cinematic Produce

## Overview

A bold, packaging-led system for a CPG beverage brand. The site runs in dark mode to keep food photography rich, with cream type and teal/yellow accents for vibrancy. The voice is confident and straightforward—bartender-crafted, no fuss—using condensed headlines and square buttons for a utilitarian, shop-ready feel. Spacing is chunky, favoring strong blocks over fine rules.

## Colors

- **primary (#fefcf5):** Cream text and icons on dark surfaces; also fills for light tabs and badges.
- **secondary (#289e7c):** Teal accent for CTAs, marquee bars, and interactive states.
- **tertiary (#ffc517):** Citrus yellow for highlights, badges, bullets, and price cues.
- **neutral (#121212):** Near-black base for the dark theme and photography backdrops.
- **border (#374151):** Subtle graphite for input outlines, separators, and card borders when shadows are not used.
- **brand-ajwain-green (#d2e07d):** Bright lime used sparingly for playful flourishes and category labels.
- **brand-dublin (#6db96e):** Mid green for announcement bars and supportive backgrounds.
- **surface ({colors.neutral}):** Standard surface color—use for body, cards, and drawers.
- **on-surface ({colors.primary}):** Default text color over surfaces; ensures compliant contrast in dark mode.

## Typography

Two families define the voice. Railroad Gothic ATF (condensed display) drives all headlines: billboard-scale, compact, and industrial. DIN 2014 Narrow handles subheads and body copy for tightly set, space-efficient text.
- headline-lg (Railroad Gothic ATF, 104.2px/1.2, 700): hero statements over photography.
- headline-md (Railroad Gothic ATF, 79.7px/1.21, 700, -0.01em): section leads and big promos.
- headline-sm (Railroad Gothic ATF, 22.5px/1, 400, 0.02em): overlines, nav emphasis, small labels.
- headline-xs (DIN 2014 Narrow, 18px/1.22, 400): small section intros and metadata.
- body-md (DIN 2014 Narrow, 16.8px/1.48, 400): paragraphs, nav, and control labels.
Availability: both "railroad-gothic-atf" and "din-2014-narrow" are custom (Adobe/ self-hosted) and not agent-loadable by default. Practical substitutes with similar feel: for Railroad Gothic ATF use Oswald (Google), League Gothic (open-source), or Anton (Google) for heavy display. For DIN 2014 Narrow use Barlow Condensed (Google), Roboto Condensed (Google), or IBM Plex Sans Condensed (Google).

## Layout

Spacing is based on a 4px root with purposeful asymmetry: xs 4, sm 8 for tight UI; md 18 and lg 22 introduce chunkier steps around cards and tiles; xl 44 is section padding. Use xl for vertical section rhythm, lg for intra-section spacing, and md around cards or between headlines and buttons. Grids favor bold blocks over dense columns—apply generous gutters so imagery can breathe in dark mode.

## Elevation & Depth

Depth is subtle. Use sm shadow (rgba(25,27,30,0.03) 0 0 5px) for small chips over cream, and md shadow (rgba(25,27,30,0.2) 0 4px 40px) for drawers/modals like the basket. Large components typically avoid shadows; hierarchy comes from dark/cream tonal contrast, the border token (#374151), and whitespace.

## Shapes

Corners are assertive. Buttons are square (0px radius) to feel utilitarian. Cards and inputs use rounded.sm at 8px to soften blocks without losing the industrial tone. Keep mixing square CTAs with 8px containers to reinforce hierarchy.

## Components

### Button — Primary
- Fill #fbf7e9 with text #3a8075. Square corners (0px), 52px height, 17px x 22px padding. Use for main calls to action and cart actions on dark surfaces.

### Button — Secondary
- Text #fbf7e9 with the same geometry as primary. Use on dark backgrounds as a text/hollow button; when needed, pair with a 1px border in #374151 for clarity.

### Button — Link
- Text color {colors.primary} (#fefcf5), square corners. Use inline with chevrons/arrows for lightweight actions like "Shop Now".

### Card
- Background {colors.neutral} (#121212), text {colors.primary} (#fefcf5), 8px radius, 16px padding. Use for product and recipe tiles; add a subtle border (#374151) if against an equally dark background.

### Announcement Bar
- Full-width strip for promos (e.g., Skinny Margarita). Background brand-dublin (#6db96e); set copy in body-md using on-surface text (#fefcf5). Keep height compact and center the link.

### Primary Navigation Tabs
- Background #fefcf5 with labels in #289e7c; body-md size with slight letterspacing for clarity. Maintain generous horizontal padding (md–lg) and 0px radius to echo buttons.

### Hero Stack
- Over full-bleed photography, set headline-lg at 104.2px in on-surface text (#fefcf5). Pair with a primary button; add xl spacing below the headline before the CTA for scanability.

### Benefits Marquee
- A ticker bar repeating short claims separated by bullets. Background #289e7c, text #fefcf5; use tertiary #ffc517 for bullets or separators. Speed should remain readable.

### Product Tile Grid ("Meet The Cocktail Coop")
- Tiles use Card styles with large names in headline-md and a Button—Link for "Shop Now". Arrange 2–4 columns responsively with lg gutters; keep imagery dominant.

### Recipe Cards
- Smaller card variant: image top, headline-xs/body-md copy below. Use border #374151 rather than heavy shadows; CTA is a link button.

### Store Locator CTA
- Dark block with headline-sm and a primary or link button. Use xl vertical padding so the module stands apart from product content.

### Cart Drawer
- Right-side overlay on {colors.neutral} with on-surface text; apply md shadow for lift. Buttons sit at the bottom with full-width primary actions.

## Do's and Don'ts

- Do set text on dark surfaces to on-surface (#fefcf5) for consistent contrast.
- Do keep CTAs square and roomy (52px height, 17x22 padding) to match the brand's utilitarian tone.
- Do reserve tertiary yellow (#ffc517) for emphasis—badges, bullets, and small highlights.
- Don't stack light (cream) elements directly on cream tabs; add a border (#374151) or switch to dark.
- Don't mix rounded buttons with 8px cards; the system's button radius is 0px.
- Don't rely on heavy shadows; prefer tonal contrast and borders for separation.

## Agent Prompt Guide

Quick color reference: text #fefcf5, background #121212, border #374151, accent-1 #289e7c, accent-2 #ffc517.

1) Build a hero over a photo: set page background #121212. Add H1 "ALL NATURAL COCKTAIL MIXERS" at 104.2px, 700, line-height 1.2 in 'Railroad Gothic Atf', fallback 'Oswald', sans-serif; color #fefcf5. Place a primary button 52px tall, 17px/22px padding, background #fbf7e9, text #3a8075, border-radius 0.

2) Create a benefits marquee: full-width bar with background #289e7c; text in 16.8px/1.48 'DIN 2014 Narrow', fallback 'Barlow Condensed', 'Roboto Condensed', sans-serif; color #fefcf5. Separate phrases with • bullets colored #ffc517.

3) Product tile grid: 3 columns on desktop with 22px gutters. Each tile is a card background #121212, text #fefcf5, border 1px #374151, border-radius 8px, padding 16px. Product name in 79.7px, 700 'Railroad Gothic Atf'/Oswald; "Shop Now" as a link button in #fefcf5.

4) Recipe rail: smaller cards using headline-xs at 18px and body text at 16.8px in 'DIN 2014 Narrow'/Barlow Condensed; card padding 16px, radius 8px, border #374151. CTA is a text link with color #fefcf5 and an arrow.

5) Cart drawer: fixed to right, width 420px, background #121212, text #fefcf5, shadow rgba(25,27,30,0.2) 0 4px 40px. Footer actions use the primary button specs above.

## Similar Brands

- Liquid Death: dark mode, photography-first packaging energy; more metal/punk than Barcoop's playful market feel.
- OLIPOP: big type and bright accents; runs light mode where Barcoop prefers dark for richer food color.
- Fly By Jing: bold color blocking and appetizing product shots; more saturated reds and spice cues.
- Athletic Brewing: functional, CTA-driven ecommerce with strong product grids; type is wider and less condensed.
- Spindrift: clean CPG grid with fruit imagery; lighter, airier palette versus Barcoop's moody dark base.

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