Baku Electronics

Overview

Baku Electronics is a dynamic e-commerce marketplace serving Azerbaijan's growing consumer electronics market. The design system embodies 'Energetic Pragmatism'—a visual language that combines bold, attention-grabbing accent colors (#ea2427 red and #0d6efd blue) with clean, functional typography and generous whitespace. The aesthetic is contemporary retail: high-energy promotional banners contrast with calm, scannable product grids and clear call-to-action buttons. The brand personality is confident, accessible, and customer-centric—speaking directly to shoppers with urgency (flash sales, limited-time offers) balanced by trustworthiness (clear pricing, fast delivery messaging). Example sentence in brand voice: 'Sənə özəl təklif — 18 aylıq taksitlə 5% endirim.'

The visual system prioritizes conversion through strategic color deployment: primary red (#ea2427) anchors all CTAs and promotional highlights, secondary blue (#0d6efd) supports secondary actions and informational elements, and a neutral grayscale foundation (white #ffffff, dark gray #212529, light gray #f8f9fa) ensures legibility across product photography and dense category listings. The tone is direct, benefit-focused, and multilingual-ready (Azerbaijani, English, Russian support evident in typography choices).

Colors

The color strategy centers on high-contrast, action-oriented hues designed to drive engagement in a competitive e-commerce environment. Primary (#ea2427) is a vibrant, warm red used exclusively for primary CTAs (Add to Cart, Buy Now), promotional badges, and brand-critical UI elements; it commands attention without overwhelming the interface. Secondary (#0d6efd) is a saturated blue deployed for secondary actions, filter toggles, and informational states—it provides visual hierarchy separation while maintaining energy. Tertiary (#198754) is a muted green reserved for success states, delivery confirmations, and positive feedback messaging. The surface stack is anchored in pure white (#ffffff) for maximum contrast and product image clarity, with carefully calibrated grays (#f8f9fa, #e9ecef, #

Typography

The type system uses San Francisco as the primary font family (with fallbacks to system fonts: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto) to ensure consistent rendering across iOS, Android, and desktop browsers. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and campaign banners; Headline-lg (40px, 600 weight) anchors major section titles; Headline-md (28px, 600 weight) breaks up content zones; Title-lg (20px, 600 weight) labels product cards and modal headers. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive product text and promotional copy, while Body-md (16px, 400 weight, 24px line-height) serves as the default body text for descriptions and metadata. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text, form

Layout

The layout follows a 12-column responsive grid system with a maximum container width of 1320px on desktop, scaling fluidly to 100% viewport width on mobile (320px–576px breakpoints). The gutter spacing is 24px on desktop, reducing to 16px on tablets and 12px on mobile to maximize product card density. Page rhythm is established through lg spacing (40px) for major section separation (hero to featured products, featured to category grid), md spacing (24px) for card-to-card margins, and sm spacing (12px) for internal card padding. The hero banner occupies 100% viewport width with a 65.1% aspect ratio (923×520px preloaded images), creating visual dominance without excessive vertical scroll. Product grids use a 4-column layout on desktop (1320px), 3 columns on tablets (960px), and 2 columns on

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts, avoiding heavy drop shadows that would slow perceived performance. Level 1 (Base/Surface): no shadow, white background (#ffffff) with 1px border in outline-variant (#ced4da) for cards and containers. Level 2 (Elevated/Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: #ffffff, used for product cards, modals, and dropdown menus. Level 3 (Floating/Modals): box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), background: #ffffff, applied to modal overlays, sticky headers, and promotion

Shapes

The shape philosophy is 'Friendly Modernism'—rounded corners are used strategically to soften the interface while maintaining a contemporary, tech-forward aesthetic. Buttons and primary CTAs use rounded: lg (16px / 1rem) to create a welcoming, clickable appearance; this radius is large enough to feel approachable but not so large as to appear childish. Cards and containers use rounded: xl (24px / 1.5rem) for a premium, spacious feel, particularly on product cards and promotional banners. Input fields and form elements use rounded: DEFAULT (8px / 0.5rem) for a more technical, precise appearance

Components

Action Elements Buttons are the primary conversion driver and use a strict three-state system: button-primary (background: #ea2427, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 16px, font-weight: 600, font-size: 14px, letter-spacing: 0.02em, transition: background-color 200ms) for primary CTAs like 'Add to Cart' and 'Buy Now'; button-primary-hover (background: #d11f22) for hover states with no opacity change—this ensures consistent touch targets on mobile; button-secondary (background: transparent, border: 2px solid #ea2427, color: #ea2427) for secondary actions like 'View Details' or 'Compare'; button-ghost (background: transparent, border: 1px solid #adb5bd, color: #212529) for tertiary actions like 'Cancel' or 'Learn More.' All buttons use cursor: pointer and app

Do's and Don'ts

**Do**

• Do use primary red (#ea2427) exclusively for primary CTAs and promotional highlights—it's the brand's signature conversion color and must never be diluted or overused on secondary elements.
• Do apply 24px gutter spacing on desktop and reduce proportionally on mobile (16px tablet, 12px mobile) to maintain visual rhythm across breakpoints without sacrificing content density.
• Do use San Francisco as the primary typeface with explicit fallbacks to system fonts (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto) to ensure consistent rendering across all platforms and prevent font-loading delays.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to cards and containers for subtle depth—avoid heavier shadows (0.15+) except for modals and floating elements to maintain visual lightness.
• Do use 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes (hover, focus, active) to signal interactivity without feeling sluggish or jarring.

**Don't**

• Don't use secondary blue (#0d6efd) or tertiary green (#198754) as primary CTA colors—these are supporting accents and will dilute the brand's conversion signal and confuse users about action hierarchy.
• Don't apply border-radius values smaller than 8px (DEFAULT) to buttons or cards—the brand aesthetic requires friendly, rounded corners; sharp 4px or 0px radii feel cold and technical.
• Don't use drop shadows heavier than 0 10px 30px rgba(0, 0, 0, 0.15) on standard cards—excessive shadows slow perceived performance and create visual clutter on product-dense pages.
• Don't mix font families within a single component—stick to San Francisco for all UI text; Roboto is reserved for form inputs and Material Design components only.
• Don't apply opacity changes (opacity: 0.7) to interactive elements on hover—instead, shift to a darker or lighter shade of the same color (e.g., #d11f22 for primary button hover) to maintain touch target clarity on mobile.