Om Sweets & Snacks

Overview

Om Sweets & Snacks is a heritage-forward Indian confectionery e-commerce platform that celebrates traditional sweets-making through a modern, accessible digital storefront. The brand serves both hyperlocal customers (Delhi NCR outlets) and pan-India delivery audiences, positioning premium handcrafted mithai as a gift and celebration staple. The aesthetic movement is "Heritage Warmth"—a fusion of traditional Indian spice-market color palettes (deep maroon #710014, golden-amber #b39402, emerald-teal #49a594) with contemporary sans-serif typography and clean card-based layouts. The UI evokes nostalgia and trust through warm, earthy tones while maintaining modern e-commerce usability; users feel they're buying from a family-run institution, not a faceless marketplace.

The brand voice is warm, celebratory, and slightly poetic—never corporate or sterile. Tone markers: conversational but respectful, pride in heritage without pretension, and a focus on occasions and relationships ("Sending love across India", "Craving sweets nearby?"). The vocabulary leans into sensory language ("savor", "indulge", "craving") and occasion-based messaging. Example sentence in brand voice: "Celebrate every moment with our handcrafted sweets—from your neighborhood outlet to doorsteps across India."

Colors

The color system is anchored in a deep maroon primary (#710014), derived from traditional Indian textile dyes and used exclusively for CTAs, navigation accents, and interactive focus states. This maroon conveys heritage, celebration, and trust—it appears on the "Order Locally" and "Order PAN India" buttons, establishing clear conversion paths. The secondary accent is a warm golden-amber (#b39402), used for hover states, badges, and secondary CTAs; it references the saffron and turmeric tones of Indian sweets themselves. A supporting teal-green (#49a594) provides a fresh, modern counterpoint for "New" badges and accent elements, balancing the warmth. The tertiary accent is a deep indigo (#4a4eb8) reserved for "Hot" badges and special promotions. The neutral palette is deliberately warm: sur

Typography

The type system pairs a custom serif-influenced heading font (M-Heading-Font, Albra) with a modern geometric sans-serif body font (M-Body-Font, DM Sans). Headings use Albra at 400 weight for a refined, heritage-forward appearance—display sizes reach 64px on desktop (line-height 74px, -0.02em letter-spacing) for hero sections, while headline-lg sits at 44px for section titles. Body copy uses DM Sans at 400 weight for clarity and accessibility; body-md is 16px with 24px line-height, providing comfortable reading rhythm. Labels and buttons use DM Sans at 500–600 weight (15px, 20px line-height) to ensure clickability and hierarchy. The letter-spacing is minimal across all sizes (0 to -0.02em) to maintain the warm, intimate feel; no aggressive tracking. On small labels over busy product backgro

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centering content on desktop while allowing full-bleed hero sections and color-blocked regions. The page rhythm is driven by the spacing scale: section separation uses lg spacing (40px on mobile, 64px on desktop), card-to-card gutters use md spacing (24px), and internal card padding uses md spacing (24px). The header spans full-width with 40px horizontal padding, establishing a generous left-right margin that carries through product grids and footer. Container max-widths are 1280px for main content, 1023px for narrower sections (e.g., order-choice modal), and 800px for modals and forms. White-space philosophy prioritizes breathing room: cards are never edge-to-edge, and text blocks include 24px margins between sections. The

Elevation & Depth

Depth is achieved through a subtle shadow system and layered card surfaces, avoiding the flat aesthetic while maintaining the warm, approachable feel. Level 1 (Base): flat surfaces with no shadow, used for body backgrounds and inline text. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards, input fields, and standard containers—this creates a gentle lift without drama. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover states and modals, signaling interactivity and focus. All shadows use a warm black (rgba(0, 0,

Shapes

The shape philosophy is "Warm Roundness"—a balance between modern approachability and heritage authenticity. Buttons and inputs use full-pill radius (border-radius: 40px / 9999px), evoking the soft, welcoming aesthetic of traditional Indian sweet packaging (rounded boxes, no sharp edges). Cards use moderate radius (border-radius: 12px / 0.75rem) to feel contemporary without being overly rounded; this applies to product cards, badges, and container elements. Badges use smaller radius (border-radius: 4px / 0.25rem) for a more compact, label-like appearance. The full-pill buttons (#btn-border-rad

Components

Action Elements Primary buttons use #710014 (maroon) background with white text, 15px DM Sans 500, 12px vertical / 30px horizontal padding, 40px border-radius, and no border. On hover (250ms ease), the background transitions to #b39402 (golden-amber) with white text maintained, creating a warm, inviting interaction. On active/pressed, the background darkens to #5a000f with a subtle inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal press feedback. Secondary buttons mirror the primary structure but use #b39402 background with white text; on hover, they shift to a darker amber (#d4a80a). Tertiary (outline) buttons use transparent background with a 1px #710014 border and maroon text; on hover, they gain a light maroon background (rgba(113, 0, 20, 0.08)) without changi

Do's and Don'ts

**Do**

• Do use the maroon primary (#710014) exclusively for primary CTAs and interactive focus states—never dilute it with secondary uses.
• Do apply the full-pill button radius (40px) consistently across all buttons to reinforce the warm, welcoming brand identity.
• Do maintain 24px gutters between cards and 40px section spacing to preserve the breathing room that makes the design feel premium.
• Do pair Albra headings with DM Sans body copy to communicate heritage + modernity; never reverse or mix weights unexpectedly.
• Do use the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) as the default card elevation and reserve Level 3 for hover/active states.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over product images to ensure legibility without compromising warmth.

**Don't**

• Don't use pure black (#000000) for text or shadows; always use the warm near-black (#191919) or warm shadow rgba(0, 0, 0, 0.12–0.15) to maintain the heritage warmth.
• Don't apply sharp corners (0px radius) to any interactive element—even small badges and checkboxes should use 4px minimum radius.
• Don't mix button styles within a single CTA group; if using a primary button, don't pair it with a secondary button of equal visual weight.
• Don't exceed 1280px container max-width on desktop; full-bleed sections should use color blocks or gradients, not stretched content.
• Don't use the golden-amber (#b39402) as a primary text color on light backgrounds—reserve it for buttons, badges, and accents only.
• Don't animate transitions faster than 200ms or slower than 500ms; the sweet spot for this brand is 250ms cubic-bezier(0.2, 0, 0.8, 1) for a warm, responsive feel.