Lemons

Overview

Lemons is a vibrant e-commerce platform specializing in rhinestones and craft supplies for the Russian market. The design system embodies "Energetic Minimalism"—a philosophy that pairs a bold, attention-grabbing yellow accent (#ffe02c) with clean white surfaces and restrained typography to create an inviting, high-energy shopping environment. The brand serves DIY crafters and professional artisans, transforming product discovery into a joyful, friction-free experience. The emotional response is one of optimism and clarity: users feel empowered to explore and purchase with confidence.

The voice is direct, friendly, and product-focused. Lemons speaks in clear, action-oriented language without unnecessary flourish—"Доставляем: СДЭК, Яндекс, 5Post, Ozon" (We deliver via CDEK, Yandex, 5Post, Ozon). The vocabulary emphasizes quality, variety, and accessibility. Example sentence in brand voice: "Выбирайте из 1440 оттенков страз холодной фиксации—каждый оттенок готов к вашему проекту." (Choose from 1440 shades of cold-fix rhinestones—each shade ready for your project.)

Colors

The color system is anchored by a vibrant primary yellow (#ffe02c) that dominates CTAs, badges, and accent elements. This high-contrast, warm accent is paired with a clean white surface (#ffffff) and dark text (#333333) to ensure legibility and visual hierarchy. The primary yellow is used on all interactive elements: buttons (backgroundColor: #ffe02c, textColor: #333333), product badges, and promotional stickers. Secondary colors include a soft periwinkle (#7188d4) for status badges and informational elements, and a bright blue (#1592e5) for tertiary actions and links. The surface stack uses subtle grays: surface-dim (#f7f7f7) for hover states, surface-container-lowest (#ededed) for input backgrounds, and surface-container-high (#f0f0f0) for elevated cards. Error states use a vivid orange

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys modernity and approachability. Display (60px, 700 weight) anchors hero sections and major announcements; headline-lg (40px, 600 weight) introduces product categories; headline-md (28px, 600 weight) titles product cards; body-md (16px, 400 weight) carries product descriptions and body copy. Label-md (14px, 600 weight) is applied to buttons and interactive labels, while label-sm (12px, 500 weight) tags product specifications and metadata. Letter-spacing is tight on headlines (-0.02em to -0.04em) to create visual density and energy, while body text uses 0em spacing for maximum readability. Line-height is generous: 28px for body-lg and 24px for body-md, ensuring comfortable reading on product pages. On small label

Layout

The layout uses a fluid 12-column grid with a max-width of 1200px, centered on the viewport. The gutter (24px) separates major sections; lg spacing (40px) creates breathing room between hero and product grid; md spacing (24px) separates cards within grids. The left sidebar (sticky, 240px width) houses category navigation; the main content area expands to fill remaining space. Product grids use auto-fill with a minimum column width of 240px, ensuring responsive reflow on smaller screens. Container padding is consistently {spacing.md} (24px) on desktop, reducing to {spacing.sm} (12px) on mobile. The hero banner spans full width with 40px padding and uses a subtle gradient background (linear-gradient(135deg, rgba(255, 224, 44, 0.08) 0%, rgba(113, 136, 212, 0.08) 100%)) to frame the primary me

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic depth effects. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), border: 1px solid #999999. Level 3 (Hover/Elevated): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), background shifts to surface-container-high (#f0f0f0). Input fields use Level 1 (no shadow) with a 1px border (#cccccc) to signal interactivity without visual lift. Buttons use Level 1 shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to sit flush with the surface, emphasizing their role as i

Shapes

The shape system follows "Soft-Technical Pragmatism"—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and primary CTAs use lg radius (1rem / 16px) to create a friendly, approachable feel while maintaining clear tap targets. Cards and containers use xl radius (1.5rem / 24px) for a more generous, premium appearance. Input fields use DEFAULT radius (0.5rem / 8px) to signal functional, utilitarian purpose. Badges and small accent elements use full radius (9999px) to create pill-shaped, compact visual markers. Product images within cards use md rad

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: #ffe02c, textColor: #333333, rounded: 1rem, padding: 12px 24px, height: 48px, with a subtle shadow (0 1px 2px rgba(0, 0, 0, 0.06)). On hover, the background shifts to #ffde25 (primary-container) and shadow elevates to 0 4px 12px rgba(0, 0, 0, 0.08) over a 200ms transition. On active, the background darkens to #968000 (inverse-primary) to signal commitment. Button-secondary uses a transparent background with a 2px border in #ffe02c and the same text color; on hover, the background fills with #f0f0f0 (surface-container-high) while the border remains. All buttons use label-md typography (14px, 600 weight) for consistent labeling.

Containers & Surfaces Cards are the primary content cont

Do's and Don'ts

**Do**

• Do use the primary yellow (#ffe02c) exclusively on CTAs, badges, and high-priority interactive elements—never on body text or backgrounds.
• Do maintain 24px (md spacing) gutters between product cards and 40px (lg spacing) between major sections to create visual rhythm.
• Do apply rounded corners consistently: 1rem for buttons, 1.5rem for cards, 0.5rem for inputs, 9999px for badges.
• Do use Montserrat at 600 weight for all interactive labels (buttons, badges) and 400 weight for body copy to create clear visual distinction.
• Do elevate cards to Level 3 shadow (0 16px 40px rgba(0, 0, 0, 0.12)) on hover with a 200ms transition to signal interactivity.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over product images to ensure legibility.

**Don't**

• Don't use the primary yellow on backgrounds or large surface areas—it should accent, not dominate the canvas.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply shadows deeper than Level 3 (0 16px 40px rgba(0, 0, 0, 0.12)) or use multiple overlapping shadows—depth should feel subtle and refined.
• Don't use font weights outside the defined set (400 for body, 600 for labels/headlines, 700 for display); avoid 500 or 800 weight.
• Don't reduce padding below {spacing.sm} (12px) on cards or containers—white-space is a design tool, not a constraint.
• Don't apply color overlays or filters to the primary yellow; use the defined shade variants (#ffde25, #ffdc19) instead.