Spicy Margarita

Overview

Spicy Margarita is a personal brand and service platform for Marguerite, a brand strategist and designer who transforms business identities through bold, playful strategy. The aesthetic movement is 'Warm Maximalism'—a deliberate fusion of vibrant, saturated accent colors (coral-orange primary, soft pastels as supporting hues) against a serene, cream-colored canvas (#fcf9f5). This creates visual tension that feels energetic yet approachable, inviting users into a world where strategy meets personality. The UI evokes confidence, creativity, and accessibility: the brand personality is direct, witty, and unapologetically colorful.

The voice is conversational yet authoritative—Marguerite speaks as a peer, not a consultant. Vocabulary leans into playful metaphors ("spice," "flavor," "defining your brand") without sacrificing clarity. Example sentence in brand voice: "Your brand isn't just a logo—it's the feeling people get when they think of you. Let's make sure that feeling is unforgettable."

Colors

The color system is built on a warm, minimalist foundation with strategic accent pops. Primary (#fa4e24, a vibrant coral-orange) is the signature accent used exclusively on CTAs, key interactive elements, and brand highlights—it commands attention without overwhelming. The surface stack (#fcf9f5 as the base, with #ead8f5 and #d0eaf0 as elevated containers) creates subtle depth through warm pastels rather than cool shadows. Secondary (#e1e89e, a soft chartreuse) and tertiary (#d0eaf0, a pale blue) provide supporting color moments for badges, accents, and secondary UI elements, maintaining visual interest without competing with primary. On-surface text is pure black (#000000) for maximum readability against the cream backdrop. Usage rules: Primary (#fa4e24) appears on all primary CTAs (butto

Typography

The type system pairs a custom display font (Spicy Margarita Regular) with Google Sans Flex for all body and interface text, creating a distinctive visual signature. Display (85px, 400 weight, -0.01em tracking) is reserved for hero headlines and brand moments—the custom font's playful letterforms immediately signal personality. Headline-lg (36px, 400 weight) and headline-md (28px, 600 weight) establish section hierarchy with generous line-height (1.3–1.4) to maintain readability at scale. Body text (18px for lg, 16px for md, 400 weight, 1.8 line-height) is set in Google Sans Flex with ample leading to ensure comfort during longer reads. Labels (19px for md, 600 weight, 0.01em tracking) are used on buttons and interactive elements, with a tighter label-sm (12px, 500 weight) for badges and t

Layout

The layout uses a 12-column grid system with a fixed container max-width of 1200px, centered on desktop and fluid on mobile (320px breakpoint). Page rhythm is established through generous spacing: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) is used for component-level padding. The cream background (#fcf9f5) extends edge-to-edge, creating a unified canvas; content blocks use surface-container tokens to define visual zones without hard borders. Gutter spacing (24px) is applied consistently on desktop; mobile reduces to 12px for compact layouts. White-space is treated as a design element—sections breathe with 60–80px vertical margins between major blocks, allowing the eye to rest and the brand personality to resonate. The grid is fl

Elevation & Depth

Depth is conveyed through a subtle shadow system and strategic use of surface-container colors rather than dramatic layering. Level 1 (Base): The cream background (#fcf9f5) serves as the foundation with no shadow. Level 2 (Standard Cards): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) paired with background-color: {colors.primary-container} or {colors.surface-container-high}, creating a soft lift. Level 3 (Elevated/Modals): Modals and prominent overlays use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with background-color: {colors.surface-bright} or {colors.inverse-surface} for maximum co

Shapes

The shape philosophy is 'Playful Precision'—rounded corners are used generously to soften the interface and reinforce the brand's approachable personality, while maintaining enough angularity to feel intentional and designed. Buttons and primary CTAs use rounded: full (100px border-radius), creating pill-shaped elements that feel friendly and clickable. Cards and containers use rounded: full (100px) for accent cards and rounded: lg (1rem / 16px) for secondary containers, balancing visual warmth with hierarchy. Input fields and smaller components use rounded: DEFAULT (0.5rem / 8px) or rounded:

Components

Action Elements Buttons are the primary interaction mechanism and use a two-tier system. button-primary (background: {colors.primary} #fa4e24, text: white, padding: 10px 28px, height: 48px, border-radius: 100px, font-size: 19px, font-weight: 600) is used for all primary CTAs (Submit, Contact, Learn More). On hover, button-primary-hover transitions background to {colors.primary-fixed-dim} (#d0eaf0) and text to {colors.on-primary-container} (black) over 0.5s, providing clear feedback. button-secondary (background: white, text: {colors.primary} #fa4e24, same padding and radius) is used for secondary actions; on hover, it transitions to button-secondary-hover (background: {colors.primary-container} #ead8f5, text: black) with the same 0.5s timing. Both button variants maintain a 0px border-

Do's and Don'ts

**Do**

• Do use primary (#fa4e24) exclusively on CTAs and interactive elements—it's the brand's signature accent and loses impact if overused.
• Do maintain the cream background (#fcf9f5) as the dominant surface; it's the canvas that makes accent colors sing.
• Do apply rounded: full (100px) to buttons and primary cards to reinforce the playful, approachable brand personality.
• Do use generous spacing (lg: 40px between sections) to let the design breathe and give the brand room to express itself.
• Do pair Spicy Margarita Regular (display font) with Google Sans Flex (body) to create a distinctive, memorable visual hierarchy.
• Do transition all interactive states over 0.5s with ease timing to provide smooth, predictable feedback.

**Don't**

• Don't use primary (#fa4e24) on body text or backgrounds—reserve it for CTAs, hover states, and brand moments only.
• Don't apply border-radius smaller than 8px (rounded: DEFAULT) to buttons or primary cards; the playful aesthetic depends on generous rounding.
• Don't mix Spicy Margarita Regular with body copy; use it only for display and hero headlines to maintain legibility and brand distinctiveness.
• Don't reduce spacing below md (24px) for section separation; the design relies on white-space to feel intentional and premium.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary); stick to the surface-container stack for depth.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12); the aesthetic is soft and approachable, not dramatic or heavy.