Skip to content
DesignMunkDesignMunk Submit a site

Joy Rush

drinkjoyrush.com
Life is a Lot. Joy Should be Too.
Ecommerce Food & Drinks Shopify Homepage Fedro PPNeue Montreal
Share Visit site
drinkjoyrush.com DESKTOP · 1440
Joy Rush

AI Breakdown

Design export

---
version: alpha
name: Joy Rush
description: Life is a Lot. Joy Should be Too.
colors:
  primary: "#000000"
  secondary: "#fca484"
  tertiary: "#2f1948"
  neutral: "#ffffff"
  border: "#fe431a"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Fedro-Semibold
    fontSize: 59px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Fedro-Semibold
    fontSize: 43px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: -0.039em
  headline-sm:
    fontFamily: Fedro-Semibold
    fontSize: 31px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -0.034em
  headline-xs:
    fontFamily: Fedro-Semibold
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.26
    letterSpacing: -0.072em
  body-md:
    fontFamily: PPNeueMontreal-Bold
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.006em
rounded:
  sm: 19.7px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 22px
  lg: 40px
  xl: 66px
components:
  button-primary:
    backgroundColor: "#fbf6ed"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 33px
  button-secondary:
    backgroundColor: "#fbf6ed"
    textColor: "{colors.border}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 33px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fbf6ed"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    padding: 21px 0px 21px 21px
---

# Joy Rush: Cloud Age Gate with Red-Orange Outlines

## Overview

Joy Rush is playful, retro, and grown-up at once: bright vermilion outlines, cream surfaces, and tight serif headlines. Audience is 21+ shoppers comparing functional THC drinks and gummies. The interface should feel fun yet trustworthy—bold headlines, clear labels, and fast paths to "quick add." Default to spacious vertical rhythm and strong contrast; visual energy comes from color and shapes rather than heavy motion.

## Colors

- **primary (#000000):** Core text and utility labels; anchor for high-contrast copy on white.
- **secondary (#fca484):** Apricot accents for highlights, badges, or subtle backgrounds; avoid for essential text.
- **tertiary (#2f1948):** Plum display color for headings and body on cream cards; the brand's editorial voice.
- **neutral (#ffffff):** Page background and clean surfaces behind photography.
- **border (#fe431a):** Signature vermilion for outlines, ticks, and the age-gate edge; also used as the only colored drop shadow.
- **surface (#ffffff):** Standard surface color; match to neutral.
- **on-surface (#000000):** Default text on light surfaces; match to primary.

## Typography

- Headlines use Fedro-Semibold at four sizes: 59/43/31/22px with tight negative letter-spacing. This font is custom/self-hosted and not freely available to agents. Suggested substitutes: Fraunces 700, Playfair Display 700, or Cormorant Garamond 700 for similar high-contrast, retro warmth.
- Body copy uses PPNeueMontreal-Bold at 16px with generous 1.5 line height. This is also custom/self-hosted; use Inter 600/700, Work Sans 600, or Archivo 600 as obtainable grotesk substitutes. Keep tracking around -0.006em to stay compact under headlines.
- Pairing guidance: use the serif (or substitute) for all headings and emphasis lines; use the grotesk for navigation, product meta, and CTAs. Maintain the provided negative tracking to preserve the dense, magazine-like feel.

## Layout

- Spacing scale favors chunky steps: 6, 14, 22, 40, 66px. Use xl for section paddings, lg for block spacing within sections, md for card gutters, sm/xs for micro-spacing around pills and badges.
- Compose sections as stacked bands: image-led hero, marquee bar, product grid, education, reviews, and offers. Keep text widths moderate; long headlines should wrap by 40–60ch.
- Product grids can step from single column on mobile to multi-column on desktop; maintain consistent md gutters and xl outer padding. Keep callouts (promos, sign-ups) in cream panels to separate them from the neutral page background.

## Elevation & Depth

- Depth is mostly tonal: white page vs cream cards (#fbf6ed) plus bold vermilion outlines (#fe431a).
- The only measured shadow is a small, colored drop (rgb 254,67,26 at 0px 2.625px 0px) used sparingly to lift featured elements. Medium and larger shadows are none—use borders and whitespace to create hierarchy instead.
- Dividers can be simple 1px rules or thick vermilion strokes; avoid grey shadows.

## Shapes

- Radius system: sm = 19.7px for cards and panels; full = 9999px for pills and circular controls.
- Buttons are compact pills at 33px height with generous side padding; keep icons centered within the pill.
- The cloud age-gate shape is artwork—not a tokenized radius. When reusing the motif, keep the vermilion outline (#fe431a) and white/cream fill for continuity.

## Components

- Buttons
  - Primary: background #fbf6ed, text #2f1948, rounded full, 8px 16px padding, 33px height.
  - Secondary: background #fbf6ed, text #fe431a, rounded full, same sizing.
  - Link: text #000000, no radius; reserve for inline actions.
- Card
  - Background #fbf6ed, text #2f1948, rounded 19.7px, padding 21px left/right pattern (21px 0 21px 21px as measured). Use for product tiles and info panels.

### Age Gate Cloud Modal
- Large, centered panel with white fill (#ffffff) and a thick #fe431a outline; may receive the small vermilion shadow. Headline in Fedro 43–59px; two pill buttons (Primary/Secondary) sit side-by-side with sm spacing.

### Benefits Marquee Bar
- A horizontal ticker repeating claims (low calorie, functional ingredients, etc.) on a solid #fe431a band. Keep text in #ffffff or #000000 depending on contrast testing; spacing sm between items; height tuned to 33–40px to align with pill rhythm.

### Product Grid with Quick Add
- Each product sits in a cream card (#fbf6ed) with plum text (#2f1948). Include a small "quick add" Primary button; use md gaps and lg section padding.

### Flavor Slider Header
- Section heading in Fedro 31–43px with negative tracking. Circular arrow controls styled as pills (rounded full) with border or fill to match button-secondary.

### Bundle & Save Ladder
- A stacked offer panel in a cream card: three tiers with short labels ("spend $50 / save $5"). Use lg vertical spacing and Primary/Secondary buttons for CTAs.

### Newsletter Popover (20% off)
- Modal panel using card styling; serif headline at 31px, body at 16px, and a Primary pill CTA. Include the #fe431a outline or small shadow for emphasis.

### Footer Mega Menu
- Four-column link lists on neutral background with plum or black text. Use md gaps between columns and xl top padding; legal and disclaimers follow with xs spacing.

## Do's and Don'ts

- Do use #fe431a for outlines, emphasis strokes, and the small colored shadow; it is a signature brand cue.
- Do set headings in the serif (or Fraunces/Playfair/Cormorant substitutes) with the provided negative tracking to keep the retro feel.
- Do place product content on #fbf6ed cards with #2f1948 text for a warm, editorial tone.
- Don't introduce additional shadow sizes; if you need separation, use borders or switch to the cream card surface.
- Don't set long passages in #fca484 on light backgrounds—contrast will be insufficient.
- Don't square off interactive elements; pills (rounded full) are the default button shape across the site.

## Agent Prompt Guide

Quick color reference: Text #000000 / Background #ffffff / Border #fe431a / Accent #2f1948 (use #fbf6ed for cream cards).

1) Build a hero with age confirmation styling
- Background: full-bleed image; overlay a centered panel 720px max-width.
- Panel fill #ffffff with a 4–6px outline in #fe431a and the small colored shadow (rgb(254,67,26) 0px 2.625px 0px 0px).
- Headline: Fedro-Semibold 43px, -0.039em tracking (substitute Fraunces 700 if Fedro is unavailable).
- Actions: two pill buttons 33px tall, 8px 16px padding; Primary (#fbf6ed bg, #2f1948 text) and Secondary (#fbf6ed bg, #fe431a text). Gap sm (14px).

2) Product card grid
- Section padding: xl (66px) top/bottom, lg (40px) sides.
- Card: 300–360px wide, background #fbf6ed, text #2f1948, radius 19.7px, padding 21px 0 21px 21px, gap md (22px).
- Title: Fedro-Semibold 22px, -0.072em. Meta/body: PPNeueMontreal-Bold 16px/1.5 (substitute Inter 600).
- CTA: Primary pill 33px tall aligned bottom-left.

3) Benefits marquee bar
- Full-width band with background #fe431a.
- Text set in PPNeueMontreal-Bold 16px, letter-spacing -0.006em; color #ffffff or #000000 based on contrast; item gap sm (14px). Keep height near 33–40px to align with pill rhythm.

4) "Bundle & Save" ladder
- Container: card styling (#fbf6ed, radius 19.7px, md internal gaps).
- Heading: Fedro-Semibold 31px (-0.034em). List tiers stacked with md gaps; CTA button-secondary (#fbf6ed bg, #fe431a text) at the end.

5) Newsletter popover
- Modal on #ffffff backdrop; panel is a card with 21px padding and radius 19.7px.
- Headline 31px; body 16px/1.5; Primary pill CTA 33px tall. Optionally add the small #fe431a shadow for lift.

## Similar Brands

- Olipop (drinkolipop.com) — similarly playful CPG with cream panels; Joy Rush goes bolder with vermilion outlines and tighter serif tracking.
- Poppi (drinkpoppi.com) — bright, candy-shop energy; Joy Rush is more retro and leans into cream/plum rather than neon pastels.
- Recess (takearecess.com) — wellness beverage with calm palettes; Joy Rush is louder, using red-orange borders and punchy headlines.
- Ghia (drinkghia.com) — editorial product tiles on soft neutrals; Joy Rush adds pill CTAs and a distinctive compliance modal as a brand moment.

More like this

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