Gheeyonnaise

Overview

Gheeyonnaise is India's pioneering ghee-based mayonnaise brand, celebrating the convergence of heritage Indian ingredients with contemporary culinary innovation. The design system embodies 'Warm Heritage Minimalism'—a visual language that honors traditional craftsmanship through a refined, earthy palette while maintaining clean, modern typography and generous whitespace. The brand serves health-conscious Indian consumers seeking premium, ingredient-transparent condiments, and the UI evokes trust, authenticity, and culinary sophistication through its warm gold accents (#d19a2d), deep forest green (#004a2f), and cream backgrounds (#fdf4e2).

The brand voice is confident yet approachable, grounded in ingredient transparency and cultural pride. Tone: educational without being pedantic, celebratory without hyperbole. Vocabulary favors specificity ('100% Pure Gir Cow Ghee', 'no refined oils') over marketing clichés. Example sentence in brand voice: 'Gheeyonnaise brings the richness of Gir Cow Ghee to your table—no compromises, no hidden oils, just pure, creamy indulgence.'

Colors

The color system is anchored in a 'Warm Heritage' philosophy: deep forest green (#004a2f) serves as the primary accent, evoking both Indian tradition and natural authenticity. This green appears on CTAs, navigation highlights, and interactive focus states. The secondary accent, warm gold (#d19a2d), reinforces the ghee-based heritage and appears on badges, highlights, and secondary actions. The tertiary accent, burnt sienna (#c2622e), adds warmth to error states and supporting UI elements. The surface stack uses a warm cream (#fdf4e2) as the base, with progressively cooler off-whites (#f7f1e8, #f0e8dc) for container elevation. On-surface text is deep charcoal (#231f20) for 96% contrast on light backgrounds. The inverse surface (#1a1a1a) is reserved for dark overlays and modals. All color to

Typography

The type system pairs Marcellus (serif, 400 weight) for display and headline-lg contexts, conveying heritage and editorial authority, with Jost (geometric sans-serif, 600 weight) for headlines and labels, providing modern clarity and hierarchy. Body copy uses Lato (humanist sans-serif, 400 weight) for legibility at 16px with 24px line-height, ensuring comfortable reading on product descriptions and long-form content. Display text (60px, Marcellus, -0.02em letter-spacing) anchors hero sections and brand moments; headline-lg (40px, Marcellus) introduces major sections; headline-md (28px, Jost, 600 weight) breaks up content; title-lg (20px, Jost, 600 weight) labels product cards and subsections. Body-md (16px, Lato, 0.01em tracking) is the default paragraph style; body-lg (18px, Lato) elevate

Layout

The layout system uses a 12-column grid with a max-width of 1400px, maintaining a fluid design that scales gracefully from mobile (single column) to desktop (full grid). Container padding is 24px (gutter token) on all sides, creating consistent breathing room. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for inline elements. The hero section spans full-width with 80px vertical padding, establishing a strong visual anchor. Product grids use 5 columns on desktop (20% flex basis per item, 20px gap), 3 columns on tablet, and 1 column on mobile. Card padding is consistently md (24px), with 12px internal spacing between card elements. The design favors generous whitespace: minimum 40px between major sections, minimum

Elevation & Depth

Depth is conveyed through a three-tier shadow system aligned with Material 3 principles. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to subtle interactive elements like badges and small cards, creating minimal separation from the surface. Level 2 (md elevation: 0 4px 12px rgba(0, 0, 0, 0.08)) is the default for product cards, input fields, and standard containers, providing clear visual hierarchy without heaviness. Level 3 (lg elevation: 0 8px 20px rgba(0, 0, 0, 0.12)) is reserved for modals, dropdowns, and hero-adjacent overlays, establishing strong visual dominance. Hove

Shapes

The shape system follows 'Soft-Technical' principles: rounded corners are applied consistently to create approachability while maintaining functional clarity. Buttons and primary CTAs use DEFAULT radius (0.5rem / 8px), providing a friendly, modern appearance without excessive rounding. Cards and containers use md radius (0.75rem / 12px), creating subtle visual softness that complements the heritage aesthetic. Input fields use DEFAULT radius (8px) for consistency with buttons, ensuring form layouts feel cohesive. Badges and micro-elements use full radius (9999px) for pill-shaped appearance, rei

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#004a2f) background with white text, 12px horizontal padding, 48px height, and DEFAULT radius (8px). On hover, the background transitions to {colors.primary-fixed-dim} over 200ms. Button-secondary mirrors the primary structure but uses {colors.secondary} (#d19a2d) background. Button-tertiary is transparent with a 2px solid {colors.primary} border and transparent background on default state; on hover, the background fills with {colors.surface-container-high} (#e8dfd0). All buttons use label-md typography (14px, Jost, 600 weight, 0.05em tracking) and apply a 200ms ease-in-out transition on hover.

Containers & Surfaces Cards are the primary container pattern. Card-standard uses {colors.

Do's and Don'ts

**Do**

• Do use {colors.primary} (#004a2f) exclusively for primary CTAs and interactive focus states—never apply it to passive text or backgrounds.
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.08)) to product cards and standard containers; reserve lg elevation for modals and overlays only.
• Do pair Marcellus serif (display/headline-lg) with Jost sans-serif (headlines/labels) to create visual hierarchy that honors heritage while maintaining modern clarity.
• Do maintain minimum 40px vertical spacing between major sections and 24px between cards to reinforce the 'Warm Heritage Minimalism' aesthetic.
• Do use {colors.secondary} (#d19a2d) for ingredient highlights, promotional badges, and secondary actions to reinforce the ghee-based brand identity.

**Don't**

• Don't apply primary color (#004a2f) to body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the cohesive visual system.
• Don't mix serif and sans-serif fonts within a single headline or button—maintain Marcellus for display/heritage moments and Jost for modern clarity.
• Don't apply shadows heavier than lg elevation (0 8px 20px rgba(0, 0, 0, 0.12)) to standard UI elements; reserve maximum elevation for modals and overlays.
• Don't reduce padding below sm (12px) on cards or containers; the 'Warm Heritage Minimalism' aesthetic requires generous internal whitespace.