Priceoye

Overview

Priceoye is Pakistan's leading e-commerce marketplace for mobile phones and electronics, serving millions of price-conscious consumers seeking authentic products at competitive rates. The design system embodies 'Digital Maximalism'—a bold, energetic aesthetic that celebrates vibrant color, clear hierarchy, and trustworthy commerce through confident typography and decisive interactive elements. The brand personality is approachable yet authoritative: Priceoye speaks to customers as a knowledgeable friend who knows the market inside-out, never condescending, always direct. The UI evokes confidence through saturated primary blues (#48afff), warm secondary oranges (#f88b2a), and accent greens (#48dbaa) that signal deals, trust, and action. Example voice: 'Get the latest iPhone 15 Pro at Pakistan's lowest price—guaranteed authentic, 30-day returns, zero markup.'

Colors

The color system is built on three pillars: Primary Blue (#48afff) anchors all interactive elements—CTAs, headers, focus states, and brand identity. This is the signature accent that appears on the header bar, primary buttons, and active navigation. Secondary Orange (#f88b2a) energizes promotional content, deal badges, and accent highlights, creating visual excitement around limited-time offers. Tertiary Green (#48dbaa) signals trust, success states, and positive confirmations (order placed, warranty verified). The surface stack progresses from #f1f3f6 (base) through #eeeeee (container-low) to #dbdbdb (container-high), providing subtle depth without sacrificing legibility. On-surface text is a near-black #202020 for primary content and #404040 for secondary labels. Error states use #ff338c

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that balances approachability with commercial clarity. Display (56px, 700 weight) anchors hero sections and major announcements; Headline-lg (36px, 700) introduces product categories and promotional blocks; Headline-md (28px, 600) structures content sections; Title-lg (20px, 600) labels cards and subsections. Body-lg (18px, 400) is reserved for hero copy and key messaging, while Body-md (16px, 400) serves as the default paragraph text. Label-md (14px, 600) and Label-sm (12px, 600) handle buttons, badges, and metadata. Letter-spacing is tight on display levels (-0.02em) to create impact, neutral on body (0em) for readability. All interactive labels use 600 weight to signal clickability. Apply text-shadow: 0 2px 4px rgba(0,0,0

Layout

The layout uses a 12-column responsive grid with a max-width of 1280px, centered on viewport. The gutter is fixed at 24px between columns, maintaining rhythm across breakpoints. Page sections use lg spacing (40px) for vertical separation between major blocks (hero, category carousel, promotional banners, footer). Container padding is md (24px) on desktop, reducing to sm (12px) on mobile. The header is a fixed 64px height with 24px horizontal padding, ensuring the logo and search bar remain accessible. Product cards use md padding (24px) internally, with 12px gaps between grid items. The hero banner spans full-width with 40px vertical padding and 24px horizontal padding, creating breathing room around the 0% Markup headline. Whitespace is treated as a design element: sections are never cram

Elevation & Depth

Depth is achieved through a three-tier shadow system that creates clear visual hierarchy without resorting to dark overlays. Level 1 (sm elevation: 0 1px 2px rgba(0,0,0,0.06)) applies to subtle interactive elements like list items and input fields—barely perceptible, used for micro-interactions. Level 2 (md elevation: 0 3px 8px rgba(0,0,0,0.15)) is the default for cards, badges, and standard containers, providing clear separation from the background. Level 3 (lg elevation: 0 5px 15px rgba(0,0,0,0.5)) is reserved for modals, dropdowns, and hover states on cards—commanding attention without over

Shapes

The shape philosophy is 'Pragmatic Roundness'—curves are used strategically to soften hard edges and guide attention, never gratuitously. Buttons use 4px radius (0.25rem / DEFAULT), a subtle curve that feels modern without appearing playful. Cards and containers use 8px radius (0.75rem / md), creating a friendly, approachable aesthetic that contrasts with the sharp, technical nature of e-commerce. Input fields use 8px radius to match cards, creating visual cohesion in forms. Badges and pills use full radius (9999px) to signal compact, self-contained information. The hero banner and promotional

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #48afff background with white text, 10px vertical / 20px horizontal padding, 4px radius, and 40px height. On hover, the background darkens to #0066cc with a 200ms transition. Secondary buttons are transparent with a 2px #48afff border and matching text color, inverting to a light blue background (#e0f2ff) on hover. Accent buttons use #f88b2a (secondary orange) for promotional CTAs like 'Launch a Complaint' or deal-specific actions. All buttons use label-md typography (14px, 600 weight) for clear, scannable text. Focus states add a 3px ring at rgba(72, 175, 255, 0.1) around the button outline.

Containers & Surfaces Cards are the primary content container, using #ffffff background with 24px padding, 8

Do's and Don'ts

**Do**

• Do use the primary blue (#48afff) exclusively for interactive elements—buttons, links, focus rings, and active states—to create a consistent, recognizable interaction language.
• Do apply md elevation (0 3px 8px rgba(0,0,0,0.15)) to all cards and containers to establish clear visual hierarchy and depth without resorting to dark overlays.
• Do pair headline-lg (36px, 700 weight) with body-md (16px, 400 weight) for maximum readability and visual contrast in promotional sections.
• Do use the secondary orange (#f88b2a) sparingly—only on deal badges, limited-time offers, and accent CTAs—to maintain its impact and urgency.
• Do maintain 24px gutter spacing between grid columns and 40px vertical spacing between major sections to create breathing room and visual rhythm.

**Don't**

• Don't use pure white (#ffffff) as a page background; use #f1f3f6 instead to reduce eye strain and create visual warmth that feels less clinical.
• Don't apply shadows darker than lg elevation (0 5px 15px rgba(0,0,0,0.5)) as this creates a heavy, oppressive feel that contradicts the brand's approachable energy.
• Don't mix primary blue (#48afff) with secondary orange (#f88b2a) on the same button or interactive element—choose one accent color per component to avoid visual confusion.
• Don't use label-sm (12px) for body copy or long-form text; reserve it for metadata, timestamps, and small UI labels only.
• Don't apply border-radius greater than 12px (lg) to standard cards; this creates a 'bubbly' appearance that feels unprofessional in an e-commerce context.