Hero Left Text & Full-Width Banner
A luxury e-commerce design system tailored for high-end retail, specifically jewelry or boutique fashion. It features a sophisticated burgundy and gold color palette, high-contrast typography using the Rajdhani heading font, and a mobile-optimized layout. Key elements include a 55/45 split-column hero section, horizontal circular category scrolling, and full-width banners with floating animations. The aesthetic combines traditional elegance with modern mobile UI patterns like fixed bottom navigation and snap-scrolling.
Summary
An elegant, mobile-first luxury retail interface utilizing a deep burgundy (#540b0e) and gold (#cfa801) theme. It employs a clean split-section hero, smooth micro-interactions, and a structured product grid to create a high-end shopping experience.
Style
The style is defined by its 'Royal Traditional' aesthetic. Typography pairings include the geometric Rajdhani for headings (bold, high tracking) and PT Sans for legible body text. The color scheme relies heavily on deep burgundy for backgrounds and gold for accents and highlights. Animations are subtle, featuring a signature 'float-scale' effect for brand imagery and scale-down transitions for tactile buttons.
Layout & Structure
A vertical-scrolling mobile layout with a sticky header and fixed bottom navigation. Features specialized sections like a split-hero, horizontal category tray, full-width feature banner, and a 2-column product grid.
Header
Split-Hero Section
Category Scroll
Spotlight Banner
Product Grid
Bottom Navigation
Components
Animated Feature Banner
Full-bleed banner with parallax-style floating image and high-contrast typography.
Circular Avatar Category
Snap-scrolling category navigation with circular framing.
Special Notes
MUST: Maintain a strict 55/45 ratio for the hero section to balance text and visual weight. MUST: Use the 'mix-blend-multiply' property for product images on light backgrounds to ensure seamless integration. MUST NOT: Add extra horizontal padding to full-width banners. MUST NOT: Use generic sans-serif fonts for headings; Rajdhani is essential for the brand's 'heritage' feel.