Snapp Market

Overview

Snapp Market is a hyperlocal supermarket delivery platform designed for Iranian urban consumers seeking rapid, trustworthy access to groceries within minutes. The design system embodies 'Urgent Warmth'—a visual language that combines the energy and immediacy of a vibrant orange accent (#fa5800) with the clarity and accessibility of a clean, light interface. The aesthetic balances commercial urgency (warm, action-driven colors) with consumer confidence (generous whitespace, clear hierarchy, accessible typography). The brand personality is direct, helpful, and locally rooted: it speaks to the user's immediate need ('Your groceries arrive in 15 minutes') without breathlessness, using conversational Persian-first language and location-aware features. Example sentence in brand voice: 'نزدیک‌ترین سوپرمارکت شما فقط ۵ دقیقه دورتر است—اکنون سفارش دهید.'

Colors

The color system prioritizes action and trust through a warm, high-contrast palette anchored by the primary orange (#fa5800), which appears on all call-to-action buttons, active states, and key interactive elements. This orange is the brand's signature accent—it signals urgency and commercial intent without aggression. Secondary green (#00a849) reinforces positive actions (successful orders, availability indicators) and is used sparingly on badges and status elements. Tertiary yellow (#faad14) provides a softer highlight for promotional content and warnings. The neutral surface stack (white #ffffff down to light gray #d9d9d9) ensures legibility and accessibility across all content. Error red (#ff4d4f) is reserved for critical alerts and validation failures. On-surface text is a warm near-b

Typography

The typography system uses IRANSansXV exclusively, a Persian-optimized sans-serif that ensures legibility for RTL text and maintains consistent x-height across all sizes. The hierarchy spans from display (56px, 700 weight) for hero messaging down to label-sm (12px, 500 weight) for metadata and badges. Headlines (headline-lg at 38px, headline-md at 30px) use 600 weight to establish clear section breaks without excessive heaviness. Body text (body-lg 18px, body-md 16px) is set at 400 weight with 1.5 line-height (24–28px) to ensure comfortable reading on mobile and desktop. Labels and buttons use 600 weight at 14px to signal interactivity and draw attention to actionable elements. Letter-spacing is minimal (–0.02em on display, 0.01em on labels) to maintain Persian character spacing integrity.

Layout

The layout uses a 12-column grid with a max-width of 1280px, adapting fluidly to mobile (single column), tablet (6 columns), and desktop (12 columns). The gutter is consistently 24px, creating rhythm and breathing room between sections. Section separation uses lg spacing (40px) vertically to establish clear content zones—hero, search, product grid, promotional banners, and footer each occupy distinct vertical bands. Container padding is md (24px) on desktop, reducing to sm (12px) on mobile to maximize content area on small screens. The search bar and location selector occupy the full gutter width, emphasizing their importance in the user journey. Product cards are arranged in a responsive grid: 2 columns on mobile, 4 on tablet, 6 on desktop. Whitespace is generous around primary CTAs (butt

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic elevation changes. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Containers): 0 2px 0 rgba(0, 0, 0, 0.02)—a barely perceptible shadow that separates cards from the background without visual heaviness. Level 3 (Modals & Overlays): 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that lifts modals and dropdowns above the page. Level 4 (Floating Elements): 0 16px 40px rgba(0, 0, 0, 0.12)—reserved for tooltips, popovers, and high-priority alerts. Hover sta

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the interface without sacrificing clarity or modernity. Buttons use lg radius (1rem / 16px), creating a pill-like appearance that feels approachable and clickable. Input fields use full radius (9999px / border-radius: 50%) to emphasize their role as entry points and to match the rounded aesthetic of the search bar. Cards use md radius (0.75rem / 12px), a moderate curve that balances softness with definition. Badges and status indicators use full radius (9999px) to create compact, self-contained visual uni

Components

Action Elements Buttons are the primary driver of user intent. **button-primary** uses the signature orange (#fa5800) background with white text, 600 weight, 14px label-md typography, 12px vertical padding, 24px horizontal padding, and lg radius (16px). The height is fixed at 48px to ensure thumb-friendly targets on mobile. On hover, the background shifts to the lighter primary-container (#ff8847) with a 0.2s ease transition. On active/pressed, an inset shadow (0 2px 4px rgba(0, 0, 0, 0.15)) creates tactile feedback. **button-secondary** uses a transparent background with an orange text color and a 1px outline in outline-variant (#bfbfbf), maintaining the same padding and height. On hover, the background fills with surface-container-high (#e6e6e6) while text remains orange. All buttons

Do's and Don'ts

**Do**

• Do use primary orange (#fa5800) exclusively for primary CTAs, focus states, and active indicators—it is the brand's signature and must remain distinctive.
• Do maintain the full-radius (9999px) aesthetic on all input fields and buttons to create a cohesive, approachable interface.
• Do apply md spacing (24px) between major sections and lg spacing (40px) between distinct content zones to establish clear visual rhythm.
• Do use IRANSansXV at 600 weight for all interactive elements (buttons, labels, links) to signal actionability and draw attention.
• Do test all color combinations for WCAG AA contrast compliance (4.5:1 for text, 3:1 for UI components) to ensure accessibility for all users.
• Do use soft shadows (0 2px 0 rgba(0, 0, 0, 0.02) for cards, 0 4px 12px rgba(0, 0, 0, 0.08) for modals) to create subtle depth without visual noise.

**Don't**

• Don't use primary orange (#fa5800) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states to maintain visual hierarchy.
• Don't apply border-radius values smaller than sm (4px) to interactive elements; use minimal radius only for small UI components like checkboxes or radio buttons.
• Don't exceed 40px of padding on cards or containers; excessive padding dilutes content density and wastes mobile screen real estate.
• Don't mix font weights within a single component (e.g., don't use 400 weight on a button label); maintain consistent weight hierarchy across the system.
• Don't use hard drop shadows or blur effects; all shadows must be soft, spread, and subtle to maintain the clean, accessible aesthetic.
• Don't apply color transitions longer than 0.2s on interactive elements; faster feedback (0.15s–0.2s) feels more responsive and modern.