Joy Rush

Overview

Joy Rush is a premium THC-infused beverage brand that celebrates joyful, intentional living through vibrant sparkling juices and gummies. The design system embodies "Playful Maximalism"—a bold aesthetic that rejects minimalist restraint in favor of saturated, high-energy color blocking, organic rounded forms, and tactile typography. The brand serves adults seeking sophisticated, feel-good experiences without compromise on flavor or quality. The UI evokes a sense of youthful exuberance, warmth, and approachability: every interaction feels celebratory, never clinical or austere. The emotional response is immediate joy—the kind you feel unwrapping a premium product or sharing a moment with friends.

Voice and personality: Joy Rush speaks with infectious optimism tempered by genuine expertise. The tone is conversational, confident, and never condescending. Vocabulary leans into sensory language ("refreshing," "vibrant," "crafted") and lifestyle affirmation ("live fully," "savor," "smarter choices"). Example sentence in brand voice: "Crafted for those who want to live fully and savor joyful moments—all while making smarter lifestyle choices."

Colors

The Joy Rush color system is built on a foundation of warm, cream-colored surfaces (#fbf6ed, #efe9de) that provide a soft, premium canvas. The primary accent is Fire Fruit (#fe431a)—a vivid, saturated red-orange used exclusively for call-to-action buttons, key interactive elements, and brand-defining moments. This color commands attention without aggression: it's the color of ripe fruit, of celebration, of the moment you decide to say yes. Secondary accents include Tart Cherry (#ff9dd3), a playful hot pink used for highlights and supporting CTAs, and Pear (#ff9740), a warm golden-orange for tertiary actions. The deep, moody Wild Berries (#2f1948) serves as the primary text color and provides sophisticated contrast against the cream surfaces, creating a premium feel. Accent colors are never

Typography

The type system pairs two distinct typefaces to create visual hierarchy and emotional resonance. Fedro-Semibold is reserved for display and headline scales (80px down to 40px), delivering bold, geometric presence with tight letter-spacing (-0.04em to -0.02em) that commands attention and reinforces brand personality. PPNeueMontreal (Bold and Medium weights) handles body, label, and UI text (24px down to 12px), providing clean, contemporary legibility with subtle letter-spacing (0em to 0.02em) that feels modern and refined. The display scale (80px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks; headline-lg (56px) for secondary headlines; headline-md (40px) for subsections. Body text uses PPNeueMontreal-Medium at 16–18px with 24–28px line-height to ensu

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1023px, ensuring the design scales gracefully from mobile (320px) to desktop and beyond. The wrapper applies max-width: calc(100% - 4rem) to maintain consistent gutters (24px on each side) across all breakpoints. Section rhythm is established through lg spacing (40px) for major section separation and md spacing (24px) for component-level grouping. The design favors generous white space—breathing room between sections, cards, and interactive elements—to emphasize the premium, intentional nature of the brand. Hero sections occupy full viewport height with centered content; product grids use responsive column counts (1 column mobile, 2–3 tablet, 4+ desktop) with consistent 24px gaps. The container-max-width of 102

Elevation & Depth

Depth in the Joy Rush system is achieved through subtle, warm shadows and layered surfaces rather than dramatic contrast. The elevation scale uses three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, modals, and interactive surfaces; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals, overlays, and hero-level components. The shadow color uses pure black with low opacity (6–15%) to maintain warmth and avoid harsh contrast against the cream surfaces. Modals employ a layered approach

Shapes

The Joy Rush shape philosophy is "Organic Friendliness"—a deliberate rejection of sharp corners in favor of generous, rounded forms that feel approachable and premium. Buttons and inputs use full border-radius (9999px / {rounded.full}) to create pill-shaped, tactile affordances that invite interaction. Cards and containers use xl radius (1.5rem / 24px) for a softer, more organic feel than typical 8px rounding. Modals and overlays push this further with 6.5rem (104px) border-radius to create cloud-like, almost whimsical shapes that reinforce the playful brand personality. Smaller UI elements (b

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 28px horizontal padding. Primary buttons (#fe431a background, cream text) employ a 2px solid border in the primary color and md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to create tactile presence. On hover, the background transitions to Pear (#ff9740) with a smooth 300ms cubic-bezier(0.645, 0.045, 0.355, 1) easing, and the shadow elevates to lg (0 8px 24px rgba(0, 0, 0, 0.12)). Secondary buttons use transparent background with a 2px primary-colored border and no shadow; on hover, they fill with surface-container-high (#f0ebe2) while maintaining the border. All buttons use PPNeueMontreal-Bold at 14px with 0.01em letter-spacing for crisp, readable labels.

Containers & Su

Do's and Don'ts

**Do**

• Do use Fire Fruit (#fe431a) exclusively for primary CTAs, focus states, and brand-defining moments—it is the signature accent and should never be diluted or overused.
• Do apply generous white space (lg spacing: 40px) between major sections to emphasize the premium, intentional nature of the brand and improve readability.
• Do pair Fedro-Semibold headlines with PPNeueMontreal body text to create clear visual hierarchy and reinforce the playful-yet-sophisticated brand personality.
• Do use full border-radius (9999px) on all buttons and inputs to create tactile, pill-shaped affordances that feel approachable and premium.
• Do maintain the warm, cream-colored surface palette (#fbf6ed, #efe9de) as the foundation—never shift to cold grays or pure white backgrounds.

**Don't**

• Don't use primary (#fe431a) for body text, backgrounds, or non-interactive elements—reserve it for moments of interaction and delight only.
• Don't apply sharp corners (0px or 4px border-radius) to buttons, inputs, or cards—the brand identity depends on generous, organic rounding.
• Don't mix typefaces within a single hierarchy level; Fedro-Semibold is for headlines, PPNeueMontreal is for body and UI—never reverse or blend them.
• Don't reduce shadows below md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on interactive elements; the subtle depth is critical to affordance and premium feel.
• Don't introduce new accent colors outside the defined palette (Fire Fruit, Tart Cherry, Pear, Wild Berries)—consistency across touchpoints reinforces brand recognition.