Vibe

Overview

Vibe is an organic probiotic cocktail brand that celebrates living fermentation and gut wellness through a bold, irreverent visual identity. The design system embraces "Playful Maximalism"—a movement that rejects minimalist restraint in favor of vibrant color, expressive typography, and unapologetic personality. The brand serves health-conscious adults (21+) who refuse to compromise on taste or fun, and the UI evokes a sense of cultural energy, authenticity, and permission to indulge guilt-free. Every interaction feels alive, warm, and slightly mischievous.

Vibe's voice is conversational, confident, and never preachy. The brand speaks in short, punchy sentences that feel like a friend recommending something cool. Vocabulary leans into wellness language ("cultured," "live," "fermented") without sounding clinical, and humor is self-aware and inclusive. Example sentence in Vibe's voice: "Your gut deserves better than a hangover. Catch a vibe."

Colors

The color palette is built around three core accent hues that work together to create visual energy and brand recognition. Primary (#db98f9, a vibrant orchid-magenta) is reserved for interactive elements, hover states, and brand-defining moments—it appears on secondary CTAs, focus rings, and accent highlights. Tertiary (#fffc54, a neon yellow-lime) is the hero accent used on primary call-to-action buttons and high-priority UI elements; its high contrast against the warm cream background (#fff1e7) ensures maximum legibility and visual pop. Secondary (#ca68f6, a deeper purple) provides a supporting accent for badges, tags, and secondary brand moments. The surface stack is anchored in a warm, inviting cream (#fff1e7) that serves as the page background and primary container color, paired with

Typography

The type system pairs two distinct font families to create visual hierarchy and personality. VC Henrietta, a serif display font, is used exclusively for the largest headlines (display and hero text) where its distinctive letterforms command attention and convey premium, editorial quality. Barlow Condensed, a geometric sans-serif with tight letter-spacing (0.06em), powers all secondary headings, labels, and UI text—its condensed width and bold weights (600–700) create a sense of forward momentum and contemporary energy. Inter, a neutral humanist sans-serif, handles all body copy and smaller text, ensuring readability at 14–18px sizes with a line-height of 1.4–1.6. The display level (157px, VC Henrietta, 600 weight) is reserved for hero statements and should never be used below 80px. Headlin

Layout

The page layout uses a 12-column fluid grid with a maximum container width of 1200px (--normal-page-width), centered on the viewport with symmetric gutters of 24px. Section rhythm is established through a semantic spacing scale: lg spacing (40px) separates major sections (hero, product showcase, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room between inline elements. The hero section spans full viewport height with a background image overlay and uses display-level typography (157px) for maximum impact. Product cards and content containers use 24px padding (md) with 0px border-radius for a sharp, architectural feel. Whitespace is generous but purposeful—the design avoids cramping and uses negative space to guide the eye tow

Elevation & Depth

Depth in Vibe's design system is achieved through subtle layering and motion rather than heavy shadows. The elevation model uses three primary levels: Level 1 (Base) is the warm cream background (#fff1e7) with no shadow. Level 2 (Standard Cards & Surfaces) uses a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and sits 4px above the base, creating gentle separation. Level 3 (Modals, Popovers, Sticky Elements) uses a deeper shadow (0 8px 24px rgba(0, 0, 0, 0.12)) and sits 8px above the base. Interactive elements (buttons, cards on hover) use a combination of transform: translateY(-4px) and the Leve

Shapes

The shape philosophy is "Architectural Sharpness with Playful Accents"—a deliberate contrast between sharp, geometric forms and rounded interactive elements. Primary buttons and CTAs use full border-radius (50%, pill-shaped) to signal interactivity and approachability, creating a friendly, inviting feel. Secondary buttons and input fields use 0px border-radius (sharp corners) to maintain a modern, structured aesthetic that feels intentional and premium. Cards and containers default to 0px border-radius for a clean, editorial look, but can use 0.8rem (md) or 1rem (lg) border-radius for softer,

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. Primary CTAs ("Shop Now", "Add to Cart") use tertiary color (#fffc54) with a 2px solid border in on-tertiary (#1f0229), full border-radius (50%), and 12px vertical × 32px horizontal padding, resulting in a 48px height. On hover, buttons scale to 1.03 and transition over 150ms with cubic-bezier(0.25, 0.46, 0.45, 0.94) easing, creating a snappy, playful lift. Secondary buttons use transparent background with a 1px border in on-surface (#1f0229) and full border-radius; on hover, they shift to surface-container-high background with primary text color over 150ms. All buttons use Barlow Condensed at 14px with 0.06em letter-spacing for crisp, energetic labeling.

Containers & Surfaces Cards are the

Do's and Don'ts

**Do**

• Do use primary (#db98f9) and tertiary (#fffc54) accents sparingly and intentionally—they are brand signatures and should appear on CTAs, focus states, and key brand moments only.
• Do pair Barlow Condensed with 0.06em letter-spacing for all UI text and labels to create visual crispness and distinction from body copy.
• Do use 0px border-radius for cards, containers, and buttons to maintain the architectural, premium aesthetic—reserve rounded corners (50%) for interactive elements only.
• Do apply transform: translateY(-4px) with a 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) transition on all hover states to create playful, snappy motion.
• Do maintain 24px (md) padding and 40px (lg) section spacing throughout to ensure generous whitespace and visual breathing room.

**Don't**

• Don't use primary or secondary colors for body text or large background areas—reserve them for interactive elements and accents only.
• Don't apply heavy shadows (box-shadow > 0 8px 24px) to standard cards; use the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) for consistency.
• Don't mix rounded and sharp border-radius on the same component—buttons are either 50% (pill) or 0px (sharp), never 0.5rem or 1rem.
• Don't use system fonts or generic sans-serifs; always load Barlow Condensed for headings/labels, Inter for body, and VC Henrietta for display text.
• Don't apply text-shadow or text-outline to body text; reserve text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) for small labels over busy backgrounds only.