Apple Gadgets Bangladesh

Overview

Apple Gadgets Bangladesh is a high-energy e-commerce platform serving South Asia's tech-savvy consumers with a design philosophy rooted in **Energetic Minimalism**—a movement that pairs vibrant, action-oriented accent colors with clean, spacious white surfaces to create urgency without chaos. The brand personality is direct, trustworthy, and fast-paced: it celebrates the thrill of discovering the latest gadgets while maintaining the clarity and reliability expected from a major retail chain. The UI evokes confidence through bold typography, decisive color blocking (primary orange #f27f20 on CTAs, secondary coral #fd5b67 on promotions), and generous whitespace that lets products breathe. Voice: conversational yet authoritative, never patronizing. Example: "Grab the latest iPhone before stock runs out—free delivery to Dhaka within 24 hours."

Colors

The color system is built on a **high-contrast, action-driven palette** designed for rapid decision-making in e-commerce. Primary (#f27f20, a warm, energetic orange) is reserved exclusively for primary CTAs, key navigation elements, and interactive focus states—it commands attention without overwhelming. Secondary (#fd5b67, a vibrant coral-red) is deployed on promotional badges, limited-time offers, and secondary CTAs to create urgency and visual hierarchy. The surface stack uses a pure white (#ffffff) as the dominant background with a carefully calibrated gray scale (surface-container-low #efefef, surface-container #e5e5e5, surface-container-high #d9d9d9) for subtle depth and card separation. On-surface text is set to #171717 (near-black) for maximum legibility on white, while on-surface-

Typography

The type system uses **Inter** exclusively across all weights and sizes, chosen for its geometric clarity and exceptional rendering at small sizes on mobile devices—critical for a Bangladesh-focused platform where many users browse on 4-5 inch screens. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand moments; Headline-lg (40px, 600 weight, -0.02em) anchors section titles like "Featured Categories"; Headline-md (28px, 600 weight, -0.01em) breaks up content zones. Body-lg (18px, 400 weight) is used sparingly for product descriptions and marketing copy, while Body-md (16px, 400 weight) is the workhorse for product listings, reviews, and body text. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text and form labels to ensure clickable ele

Layout

The layout follows a **fluid 12-column grid** with a maximum container width of 1440px, scaling down gracefully to 100% on mobile. The spacing scale is semantic: **gutter (24px)** is used for horizontal padding on full-width sections and between major content blocks; **lg spacing (40px)** separates distinct sections (hero, featured categories, product grid); **md spacing (24px)** is the default padding inside cards and between list items; **sm spacing (12px)** is used for internal component spacing (button padding, form field margins). The white-space philosophy is generous—products are never cramped, and cards maintain at least 24px of internal padding to avoid visual density. Hero sections use full-width imagery with 40px bottom margin before the next section. Product grids use a respons

Elevation & Depth

Depth is conveyed through a **subtle shadow hierarchy** that avoids the flat-design trap while maintaining the clean, minimalist aesthetic. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0,0,0,0.1)—a soft, diffuse shadow that lifts cards 4px above the surface, used on product cards, category tiles, and standard containers. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0,0,0,0.12)—a larger, more pronounced shadow that creates clear separation for modals, dropdowns, and overlay panels. On hover, cards

Shapes

The shape language follows **Soft-Technical Pragmatism**: buttons and primary CTAs use full-radius (border-radius: 9999px) to signal action and approachability, while cards and containers use lg (1rem / 16px) for a balanced, modern look that avoids sharp corners without feeling overly rounded. Input fields use full-radius (9999px) to match button styling and create a cohesive interaction zone. Secondary buttons and list items use md (0.75rem / 12px) for a more structured, grid-aligned appearance. Modal and overlay panels use xl (1.5rem / 24px) to create a distinct, premium feel. The rationale:

Components

Action Elements Buttons are the primary driver of conversion and use a consistent 48px height (matching touch targets on mobile) with 12px vertical and 24px horizontal padding. Primary buttons (button-primary) use the signature orange (#f27f20) background with white text, full-radius corners, and a soft shadow (0 4px 12px rgba(242, 127, 32, 0.15)). On hover, the background darkens to #e67e1a and shadow increases to 0 6px 16px rgba(242, 127, 32, 0.25), creating a lifting effect. On active/press, the background shifts to #d46f0f with reduced shadow (0 2px 8px rgba(242, 127, 32, 0.2)) to signal the button is being pressed. Secondary buttons (button-secondary) use a transparent background with a 2px primary-colored border and full-radius corners; on hover, the background fills with the pri

Do's and Don'ts

**Do**

• Do use primary orange (#f27f20) exclusively on primary CTAs, focus states, and key interactive elements—never on backgrounds or decorative elements.
• Do maintain at least 24px of padding inside cards and 40px between major sections to preserve the clean, spacious aesthetic.
• Do apply full-radius (9999px) to all buttons and input fields to signal approachability and reduce friction in the purchase journey.
• Do use the gray scale (surface-container-low through surface-container-highest) for subtle depth and card separation rather than relying on heavy shadows.
• Do apply 150–200ms ease transitions on hover states to create a snappy, responsive feel without feeling sluggish.
• Do use Inter at 16px minimum for body text and 14px minimum for labels to ensure legibility on small screens and in low-light environments.

**Don't**

• Don't use primary orange on backgrounds, borders, or non-interactive elements—it must remain the exclusive accent for CTAs and focus states.
• Don't apply shadows larger than 0 16px 40px rgba(0,0,0,0.12) or use multiple layered shadows; the system relies on subtle, single-layer elevation.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't reduce padding below 12px or increase line-height above 1.6x; the system is optimized for mobile-first readability.
• Don't use secondary coral (#fd5b67) on primary CTAs or navigation elements; reserve it for promotional badges and secondary actions only.
• Don't apply text-shadow or text-stroke effects on body text; use color contrast and weight hierarchy instead for clarity.