IndiaMall

Overview

IndiaMall is a Russian B2B wholesale marketplace that transforms cross-border procurement from India into a streamlined, trustworthy experience. The platform serves mid-market and enterprise buyers seeking direct access to Indian manufacturers and suppliers across 250+ product categories. The aesthetic is "Commercial Pragmatism with Warmth"—a blend of professional efficiency (clean grids, high-contrast typography, structured layouts) and approachable humanity (warm orange accents, generous white space, conversational copy). The UI evokes confidence and clarity: users feel they are navigating a serious business tool, not a consumer marketplace, yet the interface never feels cold or intimidating.

The brand voice is direct, knowledgeable, and reassuring. IndiaMall speaks to business owners and procurement managers who value time and transparency. Vocabulary leans into action verbs ("find," "source," "connect," "verify") and concrete outcomes ("250+ categories," "free supplier search," "direct manufacturers"). The tone avoids hype; instead, it emphasizes reliability and process. Example sentence in brand voice: "We've verified these suppliers—browse their catalogs, compare prices, and place your first order in minutes."

Colors

The color system is anchored by a vibrant, energetic primary orange (#f45b2c) that signals action, trust, and forward momentum. This orange appears on all primary CTAs ("Register," "Add to Cart"), search bars, and interactive highlights. It is warm enough to feel approachable yet saturated enough to command attention in a sea of neutral grays. Secondary colors include a deep navy-blue (#2c485e) used for section headers and secondary navigation, and a supporting tertiary orange (#ea580c) for badges and status indicators. The surface palette is deliberately neutral and professional: light grays (#f1f3f6 for body background, #ffffff for cards, #d0d4dc for dividers) create visual breathing room and reduce cognitive load. The on-surface text color is a near-black (#1f2937) for maximum readabili

Typography

The type system uses Commissioner, a geometric sans-serif from Google Fonts, across all weights (200–700). Commissioner was chosen for its modern, approachable character and excellent readability at both display and body sizes. The hierarchy is built on five core levels: Display (60px, 700 weight) for hero headlines; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 600 weight) for subsection headers; Body-lg (18px, 400 weight) for feature descriptions; Body-md (16px, 400 weight) for standard body copy; and Label-md (14px, 600 weight) for buttons and form labels. Letter-spacing is tight on display sizes (-0.04em) to create visual impact, neutral on headlines (-0.01em to -0.02em), and zero on body text for legibility. Line-height is generous: 68px for display (1.13x), 48

Layout

The page layout uses a 12-column grid system with a maximum container width of 1280px, maintaining a 24px gutter on desktop and 16px on mobile. The design philosophy is "structured fluidity"—sections are rigidly aligned to the grid, but content within sections flows naturally with generous white space. Hero sections occupy the full viewport width (100vw) with a minimum height of 400px on desktop, scaling to 320px on mobile; background images are positioned at 72% horizontally to emphasize product/people imagery. Feature cards are arranged in a 2-column grid on desktop (1024px+), 1 column on tablet (768–1023px), and full-width on mobile. The spacing scale is semantic: lg (40px) separates major sections, md (24px) separates cards within a section, sm (12px) separates inline elements, and xs

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reflects the Material Design 3 elevation model, adapted for a B2B context where clarity trumps visual drama. Level 1 (Base): No shadow; flat surfaces like the page background (#f1f3f6) or input fields at rest. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); used for product cards, feature cards, and modals. This shadow is subtle but present, signaling that the element is interactive and slightly raised. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); applied on card hover or when a modal is in f

Shapes

The shape philosophy is "Soft Professionalism"—rounded corners are used consistently but conservatively, signaling approachability without sacrificing authority. Buttons use 1rem (16px) border-radius, creating a modern, friendly appearance while remaining distinctly button-shaped. Cards and containers use 1rem (16px) for standard cards and 1.5rem (24px) for hero banners and featured sections, reinforcing visual hierarchy through scale. Input fields use 0.75rem (12px) for a slightly sharper appearance, distinguishing them from passive containers. Search bars and prominent CTAs use 1.5rem (24px)

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict hierarchy. Primary buttons use #f45b2c (primary orange) with white text, 16px padding (horizontal), 48px height, and 1rem border-radius. On hover, the background shifts to #f0ac95 (a lighter orange) with opacity: 0.9, creating a tactile feedback without changing the button's footprint. On active/focus, the background becomes #cf3400 (a darker orange) with a 2px outer ring at rgba(234, 88, 12, 0.35), providing clear visual confirmation. Secondary buttons use a white background (#ffffff) with dark text (#1f2937), a 1px border in #d0d4dc, and 40px height; on hover, the background shifts to #e0e3e8 (a light gray). Ghost buttons are transparent with primary orange text; on hover, the background becomes #fbf4f0

Do's and Don'ts

**Do**

• Do use primary orange (#f45b2c) exclusively for primary CTAs and brand moments—it is the visual anchor of the system and loses impact if overused.
• Do maintain the 24px gutter and 56px container padding on desktop; this breathing room is essential to the brand's professional, unhurried aesthetic.
• Do apply the three-tier shadow system consistently: no shadow for flat surfaces, 0 3px 8px for standard cards, and 0 8px 24px for elevated/hover states.
• Do use Commissioner 600 weight for all labels and button text; the geometric character of this weight conveys modernity and action.
• Do test focus states with a 3px outer glow at rgba(244, 91, 44, 0.1) on all interactive elements to ensure accessibility and visual clarity.

**Don't**

• Don't use primary orange (#f45b2c) for disabled states, backgrounds, or passive elements—reserve it for interactive moments only.
• Don't reduce the 24px gutter or 56px container padding to save space; the layout's authority depends on generous white space.
• Don't apply shadows to hero banners or full-width sections; use background color contrast and overlay gradients instead.
• Don't mix typefaces; Commissioner is the sole typeface family across all weights and sizes.
• Don't use sharp corners (0px border-radius) for interactive elements; the minimum is 0.75rem (12px) for inputs and 1rem (16px) for buttons and cards.