Littlebox India

Overview

Littlebox India is a GenZ-focused fashion e-commerce platform specializing in inclusive, curve-friendly clothing and footwear. The brand embraces a **Minimalist-Luxe** aesthetic—pairing stark black navigation and CTAs (#000000) with warm, earthy accent tones (golden-orange #ee8f00) and soft cream backgrounds (#f9f6e7). The visual language prioritizes clean typography (Playfair Display for headlines, Poppins for UI labels) and generous whitespace, creating an aspirational yet approachable shopping experience that celebrates diverse body types through authentic product imagery.

The brand voice is confident, inclusive, and conversational—speaking directly to young women seeking timeless, quality pieces without pretension. Littlebox uses direct imperatives ("SHOP NOW", "Quick buy") paired with warm, relatable copy ("New In Curve", "Meanwhile checkout some of our bestseller products"). The tone avoids hype-driven language; instead, it emphasizes accessibility, ease, and genuine product value. Example: "Step into style with Littlebox India's best-selling shoes and clothing for women. Shop now for timeless elegance and unbeatable quality with easy returns."

Colors

The color system balances a dominant neutral palette with strategic accent colors. **Primary (#000000)** anchors all interactive elements—navigation bars, primary CTAs ("Quick buy" buttons), and active states—creating visual authority and trust. **On-Primary (#ffffff)** provides maximum contrast for readability on dark backgrounds, ensuring WCAG AA compliance at 21:1 ratio. **Secondary (#ee8f00)**, a warm golden-orange, appears on badges ("Best Seller"), accent highlights, and hover states, evoking warmth and approachability without competing with primary actions. The **Surface Stack** uses off-whites and light grays (#f9f6e7 for container-lowest, #f0f0f0 for container-low, #eeeeee for standard container) to create subtle visual hierarchy across cards, modals, and input fields. **Tertiary

Typography

The type system pairs **Playfair Display** (serif, 700 weight) for editorial headlines and hero messaging, establishing luxury and editorial credibility at sizes 28–60px with tight letter-spacing (-0.04em to -0.02em). **Poppins** (sans-serif, 600 weight) handles UI labels, buttons, and category tags at 12–20px, providing warmth and approachability. **Inter** (sans-serif, 400 weight) carries body copy and product descriptions at 16–18px with 24–28px line-height, ensuring readability on mobile and desktop. All small labels (12px) receive 0.05em letter-spacing to enhance legibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on white text over product images to maintain contrast. Button text uses uppercase transformation (text-transform: uppercase) with 1.12px letter-spacing for emphasi

Layout

The layout follows a **12-column fluid grid** with a max-width of 1400px, centering content on desktop while allowing full-bleed hero sections. **Gutter spacing** is consistently 24px between columns and sections. The **spacing scale** uses semantic tokens: `xs` (4px) for micro-interactions, `sm` (12px) for component padding, `md` (24px) for section separation, `lg` (40px) for major section breaks, and `xl` (64px) for hero/footer spacing. Product cards occupy 3–4 columns on desktop, 2 columns on tablet, and 1 column on mobile, with 24px gaps between cards. Hero sections use 64px top/bottom padding; standard sections use 40px. Container backgrounds (surface-container-low, #f0f0f0) separate distinct content zones without hard borders. Navigation occupies a fixed 117px height (--theme-header-

Elevation & Depth

Elevation is achieved through **layered shadows and subtle background shifts** rather than depth-based z-index stacking. **Level 1 (Base)**: Flat surfaces at surface (#ffffff) with no shadow. **Level 2 (Cards & Inputs)**: box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), background: surface-container-low (#f0f0f0), creating a soft, barely-perceptible lift. **Level 3 (Modals & Dropdowns)**: box-shadow: 0px 0px 32px 0px rgba(16, 24, 40, 0.32), background: surface (#ffffff), with 8px border-radius, signaling prominence. Hover states on cards transition shadow from Level 2 to Level 3 over 200ms

Shapes

The shape philosophy is **Architectural Minimalism**—favoring sharp, precise corners over organic curves. **Buttons and inputs** use 4px border-radius (rounded.DEFAULT), creating a subtle, modern edge without softness. **Cards and larger containers** use 6–8px (rounded.md to rounded.lg), providing just enough rounding to feel contemporary without compromising the minimalist aesthetic. **Badges and chips** use full border-radius (9999px) for visual distinction as secondary UI elements. **Category filter buttons** use 3px (rounded.sm) for a tighter, more technical appearance. This graduated appr

Components

Action Elements **Button-Primary** (#000000 background, #ffffff text, 13px Poppins 600, 10px 14px padding, 4px radius, 48px height) is the dominant CTA for checkout, "Quick buy", and navigation actions. On hover, background shifts to primary-container (#222222) with a 150ms ease-out transition. **Button-Secondary** uses transparent background with 1px outline (#cccccc) and on-surface text (#313132), reserved for secondary actions like "Contact Us". **Button-Ghost** has no background or border, text-only, used for tertiary navigation; on hover, background becomes surface-container-low (#f0f0f0) over 150ms. All buttons use uppercase text-transform with 1.12px letter-spacing.

Containers & Surfaces **Card** component uses surface-container-low (#f0f0f0) background, 6px border-radius,

Do's and Don'ts

**Do**

• Do use #000000 for all primary CTAs and navigation—it is the brand's signature authority color and must never be replaced with gray or near-black.
• Do apply 24px gutter spacing between sections and 12px padding inside components; this rhythm is fundamental to the minimalist aesthetic.
• Do use Playfair Display (serif, 700) exclusively for headlines and hero copy; it signals editorial credibility and luxury positioning.
• Do maintain 4.5:1 minimum contrast between text and background (e.g., #313132 on #ffffff, #ffffff on #000000) for WCAG AA compliance.
• Do use the secondary color (#ee8f00) sparingly—only on badges, accents, and hover states—to maintain visual focus on primary actions.
• Do apply 150–200ms ease-out transitions on all hover and focus states (buttons, cards, inputs) for smooth, predictable interactions.

**Don't**

• Don't use gradients, blur effects, or glassmorphism—the brand aesthetic is grounded, print-like, and clarity-focused.
• Don't soften corners beyond 8px border-radius; sharp, precise geometry is core to the minimalist identity.
• Don't apply shadows deeper than 0px 0px 32px 0px rgba(16, 24, 40, 0.32)—excessive depth contradicts the flat, accessible design philosophy.
• Don't mix serif and sans-serif typefaces within a single component; maintain Playfair for headlines and Poppins/Inter for UI.
• Don't use near-black (#111111, #222222) as primary; reserve these only for hover states and secondary containers.
• Don't exceed 40px padding on standard sections or 64px on hero sections; whitespace should feel intentional, not wasteful.