Ghar Soaps

Overview

Ghar Soaps embodies 'Warm Heritage Minimalism'—a design philosophy that marries India's rich Ayurvedic tradition with contemporary clarity. The brand serves health-conscious consumers seeking natural, chemical-free skincare solutions, evoking trust through a warm cream-and-teal palette (#fef7ea background, #108474 primary accent) that feels both ancestral and modern. The interface prioritizes accessibility and educational content, transforming complex skincare science into approachable guidance. Voice: conversational, knowledgeable, never clinical. The brand speaks as a trusted family advisor—warm, direct, solution-focused. Example: 'Your skin's dryness tells a story. Our Magic Soap listens and heals with turmeric and neem, the way your grandmother knew.' The emotional response is one of comfort, empowerment, and belonging to a community of 10 lakh+ customers who trust Ghar Soaps.

Colors

The color system anchors on a warm, cream-toned surface (#fef7ea) that evokes natural, sun-dried ingredients and heritage packaging. Primary accent is a deep teal (#108474), used exclusively on CTAs, active states, and brand-critical interactions—this is the 'trust color,' appearing on the 'Download The App Now' button and all primary navigation. Secondary accent is a vibrant golden-yellow (#ffc401), deployed for promotional badges, discount labels, and secondary CTAs to create visual energy without competing with primary. Tertiary accent is a warm burnt-orange (#dd5e1e), reserved for accent imagery and heritage-narrative sections. The surface stack progresses from cream (#fef7ea) through progressively warmer tones (#fdf0d7, #f3e7d5, #e8dcc8) to create subtle depth without harsh contrast.

Typography

The type system pairs Oswald (geometric, confident, heritage-forward) for headlines and Poppins (warm, approachable, modern) for body text. Oswald at 32–60px (headline-md to display) commands attention without aggression, reflecting the brand's authoritative-yet-accessible voice. Poppins at 16–20px (body-md to body-lg) maintains readability at 1.4–1.6 line-height (28–32px), crucial for skincare education content. Letter-spacing is tight on headlines (-0.02em to -0.04em) to reinforce confidence, and relaxed on body (0.025em) to ease scanning. Apply text-shadow: 0 2px 4px rgba(0,0,0,0.08) on small labels (label-sm, 12px) when layered over product imagery to ensure legibility. Font weights are deliberate: Oswald 600–700 for hierarchy, Poppins 400 for body and 600 for labels, creating clear vi

Layout

The layout follows a 12-column fluid grid with a 1280px max-width container, respecting the brand's e-commerce heritage (Shopify Impulse theme). Page rhythm uses lg spacing (40px) for major section separation (hero to product grid, product grid to testimonials), md spacing (24px) for card-to-card gutters, and sm spacing (12px) for internal card padding. The hero section (Web-banner-2000x1000.webp) spans full-width with a 2:1 aspect ratio, anchoring the page with warmth and visual authority. Product grids use 4 columns on desktop, 2 on tablet, 1 on mobile, with 24px gutters. White-space is generous—never cramped—reflecting the brand's premium positioning. The announcement bar (#252121, 'ENJOY FREE SHIPPING') sits fixed at viewport top with 12px vertical padding, creating persistent brand pr

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than aggressive drop-shadows. Level 1 (Base): flat surface at #fef7ea with no shadow. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), applied to product cards and input fields, creating a barely-perceptible lift. Level 3 (Modals & Drawers): box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08), used on the kwikpass-drawer-desktop and app-download modal. Level 4 (Floating Elements): box-shadow: 0 16px 40px rgba(16, 24, 40, 0.12), reserved for floating chat widgets and high-priority overlays. No glassmorphism or blu

Shapes

The shape philosophy is 'Soft-Technical Warmth'—combining geometric precision with human-friendly curves. Buttons use full border-radius (50px / 9999px), creating pill-shaped CTAs that feel approachable and modern. Cards and containers use md (12px) or lg (16px) radius, softening corners without appearing childish. Input fields use DEFAULT (8px) radius, balancing form-field convention with brand warmth. Badge elements use full radius (50px), emphasizing their role as micro-highlights. The announcement bar and modals use 0px radius (sharp corners), reinforcing their role as structural frames. T

Components

Action Elements Buttons are the primary interaction vehicle. Primary buttons (#108474 background, white text, 44px height, 11px 20px padding, Poppins 600, 50px radius) appear on all CTAs: 'Download The App Now,' 'Add to Cart,' 'Shop Now.' Hover state transitions to #7dd9c4 (primary-fixed-dim) with a 0.15s ease-out animation. Secondary buttons use transparent background with a 1px #108474 border, text in primary teal, same padding and height. Tertiary buttons use #ffc401 (secondary) background with black text, deployed for promotional or secondary-priority actions. All buttons include a 0.2s transition on background-color and box-shadow to signal interactivity.

Containers & Surfaces Cards use #f3e7d5 (surface-container-high) background with 12px border-radius, 24px padding, and 0 1

Do's and Don'ts

**Do**

• Do use the teal primary (#108474) exclusively on CTAs, active states, and brand-critical moments—never on passive elements or backgrounds.
• Do pair Oswald headlines with Poppins body text; never reverse or mix weights arbitrarily.
• Do apply 24px (md spacing) as the default gutter between major sections; use 40px (lg spacing) only for hero-to-content transitions.
• Do include a 1px solid border at rgba(255, 255, 255, 0.2) on all glass-like or overlay elements to reinforce layering.
• Do use the warm cream surface (#fef7ea) as the default background; never substitute with pure white (#ffffff) for page backgrounds.
• Do apply box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) to cards and inputs; reserve 0 4px 12px for hover states and modals.

**Don't**

• Don't use the secondary yellow (#ffc401) on primary CTAs or navigation—reserve it for badges, discounts, and promotional accents only.
• Don't apply border-radius: 0px to interactive elements like buttons or inputs; use at least 8px (DEFAULT) for inputs, 50px for buttons.
• Don't mix Oswald and Poppins weights arbitrarily; maintain Oswald 600–700 for headlines, Poppins 400 for body, 600 for labels.
• Don't use pure black (#000000) for text on the warm cream background; use #090909 (on-surface) for maximum warmth and legibility.
• Don't apply aggressive shadows (0 16px 40px) to cards; reserve Level 4 shadows for floating elements and high-priority overlays only.
• Don't nest more than 2 levels of surface containers; the stack (#fef7ea → #fdf0d7 → #f3e7d5) is sufficient for all depth needs.