Shwapno

Overview

Shwapno is a rapid-delivery grocery marketplace designed for South Asian urban consumers who demand speed, trust, and visual clarity. The brand embodies 'Energetic Pragmatism'—a design philosophy that pairs bold, attention-grabbing primary colors (vivid red #df0000 and sunshine yellow #ffd814) with clean, functional layouts that prioritize task completion over decoration. The UI evokes urgency and reliability simultaneously: red signals 'act now,' while the bright, white-dominated canvas ensures product photography and promotional content remain the focal point. The emotional response is one of confident convenience—users feel empowered to shop quickly without cognitive friction. Shwapno's voice is direct, conversational, and locally grounded. The copy avoids corporate jargon, using phrases like 'Fresh Premium Tea Bags 100gm (50 Bag)' and 'Free shipping over 1500Tk' that speak to real shopping concerns. Tone is warm but efficient, never breathless or overly casual. Example sentence in brand voice: 'Get your groceries in 60 minutes—we handle the rush so you don't have to.'

Colors

The Shwapno color system is built on a triadic accent model: primary red (#df0000) for CTAs and urgency, secondary yellow (#ffd814) for promotional highlights and category badges, and tertiary blue (#1a73e8) for secondary actions and trust signals. The surface stack is deliberately light and neutral—pure white (#ffffff) as the base, with subtle grays (#f2f4f8, #e8eaed, #ebecf0) used sparingly for container separation and hover states. This ensures product imagery and promotional banners dominate the visual hierarchy. Primary (#df0000) is applied to all primary CTAs (Add to Cart, Checkout, Download App), delivery badges, and active states. On-primary is always white (#ffffff) for maximum contrast and legibility at small sizes (12px labels). Secondary (#ffd814) is reserved for category pills

Typography

Rubik is the sole typeface family, chosen for its geometric clarity and strong performance at small sizes (12px labels on mobile). The type system follows a six-level hierarchy: Display (60px, 700 weight) for hero headlines, Headline-lg (40px, 600) for section titles, Headline-md (28px, 600) for subsection headers, Title-lg (20px, 600) for card titles, Body-lg (18px, 400) for descriptive copy, Body-md (16px, 400) for body text and form labels, Label-md (14px, 600) for buttons and badges, and Label-sm (12px, 500) for secondary labels and helper text. Letter-spacing is tightened on display sizes (-0.04em) to create visual impact, while body and label sizes use 0em to 0.02em for readability. Line-height scales proportionally: display uses 68px (1.13x), headlines use 36–48px (1.2–1.3x), and bo

Layout

Shwapno uses a fluid 12-column grid with a max-width of 1280px, scaling gracefully from mobile (full-width, 16px gutter) to desktop (1280px container, 24px gutter). The page rhythm is driven by a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for label padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The homepage hero spans full-width with a 24px gutter on mobile, collapsing to 40px horizontal margins on tablet and desktop. Product grids use a responsive column count: 1 column on mobile, 2 on tablet, and 4–5 on desktop, with 12px gap between items. Category sidebar (visible on desktop only) occupies 3 columns, leaving 9 for the main content area. White-space is generous but pur

Elevation & Depth

Shwapno uses a minimal shadow system to maintain the light, accessible aesthetic. Elevation is conveyed through three discrete levels: Level 1 (Base/Surface) has no shadow—cards and inputs sit flush on the white background. Level 2 (Raised/Hover) applies a subtle 1px border in outline-variant (#c6ccd0) plus a soft shadow: 0 0 0 1px rgba(35, 38, 59, 0.1), 0 6px 16px -4px rgba(35, 38, 59, 0.15). This shadow has a 6px blur and -4px spread, creating a soft halo effect that lifts the element without harsh contrast. Level 3 (Modal/Overlay) uses a stronger shadow: 0 8px 24px rgba(0, 0, 0, 0.12), with

Shapes

Shwapno employs 'Functional Roundness'—a shape philosophy that balances approachability with precision. Border-radius values are intentionally limited to four discrete sizes: sm (3px) for subtle softening on search inputs and small UI elements, DEFAULT (5px) for standard cards and form fields, md (9px) for category pills and medium containers, lg (10px) for larger cards and modals, and full (9999px) for pills, badges, and circular buttons. Buttons use full (9999px) to signal interactivity and create a friendly, approachable feel—the rounded pill shape is instantly recognizable as clickable. Ca

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#df0000) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), {rounded.full} (9999px), and padding of 8px 24px for a 40px total height. On hover, the background transitions to {colors.primary-container} (#fb6565) over 150ms (ease-out), maintaining white text. Focus state adds a 2px inset ring: box-shadow: 0 0 0 2px rgba(223, 0, 0, 0.2). Secondary buttons use {colors.secondary} (#ffd814) with {colors.on-secondary} (#504302) text, same padding and radius, and transition to {colors.secondary-fixed-dim} (#ffc107) on hover. Tertiary buttons are transparent with a 1px border in {colors.outline-variant}, text in {colors.primary}, and a hover background of {

Do's and Don'ts

**Do**

• Do use primary red (#df0000) exclusively for primary CTAs, delivery badges, and active states—it's the brand's signature accent and must remain distinctive.
• Do apply {spacing.md} (24px) as the default padding for cards and containers; it creates the visual breathing room that defines Shwapno's clean aesthetic.
• Do use Rubik at 16px (body-md) or larger for all body text; smaller sizes (12px labels) require text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) over busy backgrounds.
• Do limit border-radius to the four defined values (3px, 5px, 9px, 10px, 9999px); this constraint ensures visual consistency and reduces decision fatigue.
• Do transition all interactive elements (buttons, cards, inputs) over 150–200ms using ease-out timing; this creates tactile feedback without feeling sluggish.

**Don't**

• Don't use primary red (#df0000) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and urgent signals to maintain visual hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or with blur greater than 24px; heavy shadows obscure product photography and contradict the light, accessible aesthetic.
• Don't mix typeface families; Rubik is the sole font. Avoid system-ui, sans-serif, or serif fallbacks in component definitions.
• Don't use border-radius values outside the defined scale (3px, 5px, 9px, 10px, 9999px); arbitrary values like 6px or 8px fragment the design system.
• Don't apply more than two colors to a single component (e.g., don't combine primary + secondary + tertiary in one button); this creates visual noise and dilutes the brand accent hierarchy.