Señorita Drinks

Overview

Señorita Drinks is a premium cannabis beverage brand that transforms THC consumption into a sophisticated, sun-soaked ritual. The design aesthetic embraces 'Warm Minimalism'—a fusion of clean, approachable typography with vibrant, energetic accent colors (golden orange #ff9e25, lime green #a4d866) that evoke tropical citrus, agave fields, and the sensory experience of a craft margarita. The UI prioritizes clarity and accessibility, using generous whitespace (surface #fbf9f2) and bold, friendly typefaces (Fairweather for headlines, Brandon Grotesque for body) to communicate premium quality without pretension. The emotional response is inviting, confident, and celebratory—users feel welcomed into a lifestyle brand, not a clinical product interface.

The brand voice is conversational, playful, and grounded in authenticity. Sentences are direct and benefit-focused, avoiding jargon while celebrating the craft. Vocabulary leans into sensory language (citrus, smooth, refreshing) and lifestyle positioning (cabana, ritual, night out). Example sentence in brand voice: 'This cabana is 21+—please confirm that you are 21 years old or older.'

Colors

The color system is built on a warm, inviting foundation. Primary (#ff9e25, a golden orange) is the signature accent used on all call-to-action buttons, links, and interactive focus states—it commands attention without aggression. Secondary (#a4d866, a bright lime green) provides a complementary accent for supporting UI elements, badges, and success states, evoking fresh citrus and natural ingredients. Tertiary (#eb8a11, a deeper burnt orange) adds depth and is reserved for hover states, secondary buttons, and emphasis. The surface stack uses warm, off-white tones: surface (#fbf9f2) as the primary background, surface-container-high (#ebebeb) for elevated cards and containers, and surface-container-lowest (#f6f0dd) for the deepest recessed areas. On-surface text is a warm charcoal (#242121,

Typography

The type system uses a three-tier hierarchy to guide users through content. Display (Fairweather, 68px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and brand moments—its geometric, sun-ray aesthetic reinforces the tropical, celebratory mood. Headline-lg and headline-md (also Fairweather/Montserrat, 48px–32px) are used for section titles and product names, maintaining visual prominence. Body copy (Brandon Grotesque, 16px–18px, 400 weight, 0.01em letter-spacing) is warm and approachable, with 24px line-height for comfortable reading on mobile and desktop. Labels (Brandon Grotesque, 12px–14px, 500–600 weight, 0.02–0.03em letter-spacing) are used for buttons, form fields, and metadata. On small labels over busy backgrounds (e.g., badges on product cards), apply text-shad

Layout

The layout uses a 12-column grid with a 1200px max-width container, maintaining a fluid layout on mobile (100vw with 20px gutter on each side) and fixed on desktop. Section separation uses lg spacing (40px) between major content blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The header is sticky and uses 19px padding (top/bottom) with a white background (#ffffff) and subtle shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to separate it from hero content. Hero sections use full-width backgrounds with overlaid text, leveraging the warm color palette (gradients from #a4d866 to #96d4ea) to create visual interest. Cards and modals use md padding (24px) internally, with 8px border-radius for a soft-technical feel. The spacing scale is semantic: xs (4px) for

Elevation & Depth

Depth is conveyed through a three-level shadow system that creates clear visual hierarchy without relying on color shifts. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px solid border at {colors.outline-variant} (#d2cfff). This creates a subtle lift from the surface, ideal for standard cards and form fields. Level 2 (Elevated/Hover): box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 2px 2px 4px rgba(0, 0, 0, 0.1), applied on card-hover and interactive elements, signaling interactivity. Level 3 (Modals/Dialogs): box-shadow: 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0,

Shapes

The shape philosophy is 'Warm-Technical'—a blend of soft, approachable curves with geometric precision. Buttons use full border-radius (9999px) to feel friendly and inviting, while cards and containers use md (10px) or DEFAULT (8px) for a balanced, modern aesthetic. Form inputs use DEFAULT (8px) to maintain visual consistency with cards. Badges and toggle switches use full (9999px) to emphasize their role as discrete, self-contained elements. The rationale: full-radius buttons feel premium and approachable (avoiding sharp corners that read as corporate), while moderate radii on containers main

Components

Action Elements Buttons are the primary interaction mechanism and use a 44px height with 12px vertical and 32px horizontal padding for comfortable touch targets. Primary buttons (button-primary) use {colors.primary} (#ff9e25) with white text, full border-radius (9999px), and a 2px solid border matching the background. On hover (button-primary-hover), the background shifts to {colors.tertiary} (#eb8a11) with a 200ms ease-out transition, creating a warm, responsive feel. On focus (button-primary-focus), add a 3px solid outline in {colors.primary-container} (#cde880) with 2px offset for accessibility. Secondary buttons (button-secondary) use {colors.primary-container} (#cde880) with dark text, md border-radius (10px), and a 1px outline in {colors.outline} (#cccccc). Ghost buttons (button-

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff9e25) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to create a premium, responsive feel.
• Do use Fairweather for display and headline typography to reinforce the tropical, celebratory brand personality—it is distinctive and memorable.
• Do maintain the warm color palette throughout (surface #fbf9f2, on-surface #242121) to create a cohesive, inviting experience.
• Do use full border-radius (9999px) on buttons and badges to communicate approachability and premium quality.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) on small labels over busy backgrounds to ensure legibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the warm palette (on-surface #242121, surface #fbf9f2) to maintain brand warmth.
• Don't apply sharp corners (0px border-radius) to buttons or cards—the brand requires soft, approachable geometry.
• Don't use secondary colors (#a4d866, #eb8a11) as primary CTAs—reserve {colors.primary} (#ff9e25) for all primary actions to maintain visual hierarchy.
• Don't exceed 300ms transition timing on interactive elements—keep animations snappy and responsive (200ms is the standard).
• Don't mix typeface families within a single component—use Brandon Grotesque for body/labels and Fairweather/Montserrat for headlines consistently.
• Don't use shadows heavier than {elevation.lg} on standard cards—reserve the highest elevation for modals and overlays only.