Sangeetha Mobiles

Overview

Sangeetha Mobiles is a direct-action e-commerce platform for mobile phones and accessories in India, serving price-conscious consumers seeking clarity and speed in their purchasing decisions. The design aesthetic is 'Transactional Minimalism'—a high-contrast, no-nonsense visual language that prioritizes information hierarchy and conversion over decoration. The brand personality is urgent yet trustworthy: every element exists to guide the user toward a purchase or location selection. The UI evokes confidence through bold black headers, decisive white space, and strategic use of red-orange accents that signal deals and time-sensitive offers. Voice: direct, benefit-focused, never flowery. Example: 'Get up to 40% off—select your location to check availability now.'

Colors

The color system is built on a foundation of pure black (#000000) as primary, paired with pure white (#ffffff) for maximum contrast and legibility in a mobile-first, high-traffic environment. Black is used for headers, primary CTAs ('Type manually'), and critical UI surfaces; white provides the neutral canvas. The secondary accent is a vibrant red-orange (#e22900), reserved exclusively for discount badges, urgency signals ('Hurry Up!'), and promotional overlays—it appears infrequently but commands immediate attention. Tertiary blue (#0b74b8) supports secondary interactions and informational elements. The surface stack uses carefully calibrated grays: #f5f7fb (surface-dim) for subtle backgrounds, #eaecf0 (surface-container) for card containers, and #c4cad0 (outline-variant) for borders and

Typography

The type system uses Outfit exclusively, a geometric sans-serif optimized for digital clarity and modern commerce. Display (56px, 700 weight) anchors hero sections and major promotional banners with -0.03em letter-spacing to tighten the visual mass. Headline-lg (40px, 700) and headline-md (28px, 700) establish section hierarchy with -0.02em and -0.01em spacing respectively, creating a crisp, architectural feel. Title-lg (22px, 600) labels product cards and modal headers. Body-md (16px, 400) is the workhorse for product descriptions and form labels, with 24px line-height for comfortable reading on mobile. Label-md (14px, 600) and label-sm (12px, 500) handle button text, badges, and metadata with increased letter-spacing (0.02–0.03em) to enhance scannability. All interactive text uses 600+ w

Layout

The layout follows a 12-column fluid grid with a max-width of 1320px, collapsing to single-column on mobile (< 576px). The gutter is 24px, maintained consistently across breakpoints via Bootstrap's --bs-gutter-x variable. Hero sections and category carousels use full-width containers with 40px (lg spacing) padding on desktop, reducing to 24px (md spacing) on tablet and 12px (sm spacing) on mobile. Product grids use 4 columns on desktop (1140px+), 3 on tablet (768px–1139px), and 2 on mobile. White space is aggressive: section separators use 64px (xl spacing) vertical margin, creating visual breathing room between 'Hurry Up! Get Up to 40% Off' and product listings. Container max-width of 1320px ensures content never stretches beyond comfortable reading width. Modals (location picker, cookie

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of borders, avoiding the visual noise of multiple shadow layers. Level 1 (Base): flat white background (#ffffff) with no shadow; used for body and card backgrounds. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border at #c4cad0; applied to product cards, input fields, and standard modals. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border; triggered on card hover and modal overlays. The header uses no shadow, relying on a 1px bottom border (#c4cad0)

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used sparingly and consistently to signal interactivity without softening the brand's direct, no-nonsense character. Buttons use 8px (DEFAULT) border-radius, balancing approachability with geometric sharpness. Input fields and standard cards use 10px (md), creating a slightly softer container that feels inviting without compromising the modern aesthetic. Modals and elevated surfaces use 12px (lg) to signal importance and separation from the base layer. Badges and small UI elements use 4px (sm) for minimal visual weight. Circula

Components

Action Elements Buttons are the primary conversion drivers. Button-primary (black background, white text, 48px height, 16px vertical padding, 24px horizontal padding, 8px radius) is used for critical CTAs: 'Select Location...', 'Type manually', 'Add to Cart'. On hover, shift to button-primary-hover (background: #212529, text: #f5f7fb) with a 200ms transition. Button-accent (red-orange #e22900, white text, same dimensions) is reserved for promotional or time-sensitive actions; on hover, shift to button-accent-hover (background: #ff6b4a). Button-secondary (transparent background, black text, 1px outline at #c4cad0, 48px height) is used for secondary actions like 'Use Current Location' or 'Reject' (cookies). On hover, fill with surface-container-high (#e0e3e8) and apply a 150ms ease-in-ou

Do's and Don'ts

**Do**

• Do use black (#000000) for primary CTAs and headers to signal urgency and authority—never dilute with gray or lighter shades.
• Do apply the red-orange accent (#e22900) exclusively to discount badges and time-sensitive promotions; overuse dilutes its impact.
• Do maintain 24px gutters and 40px section spacing on desktop to ensure content breathes and scans quickly.
• Do use Outfit 600+ weight for all interactive text (buttons, links, labels) to create clear affordance.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and inputs; avoid multiple shadow layers.
• Do test all text at 16px body-md size for mobile legibility; never go below 14px for body copy.

**Don't**

• Don't use rounded corners larger than 12px; they soften the brand's decisive, transactional character.
• Don't apply shadows to the header or base surfaces; reserve elevation for interactive and modal elements only.
• Don't mix typefaces; Outfit is the single source of truth for all text.
• Don't use colors outside the defined palette (e.g., custom greens, purples) without explicit brand approval.
• Don't reduce padding below 12px on mobile or 16px on desktop; white space is a feature, not a constraint.
• Don't apply opacity or transparency to primary text; maintain WCAG AAA contrast (21:1 for black-on-white).