Lipia

Overview

Lipia is a Chrome extension that democratizes global e-commerce for Kenyan shoppers by bridging the gap between international retailers and local payment methods. The brand embodies 'Warm Pragmatism'—a design philosophy that combines the approachability of warm earth tones (terracotta, cream, soft gold) with the clarity and directness of functional design. The interface evokes trust and accessibility: a shopper in Nairobi should feel as confident buying from Amazon as they would from a local market. The emotional response is one of empowerment and possibility—the UI whispers, 'The world is closer than you think.'

Lipia's voice is conversational yet authoritative, grounded in Kenyan context without condescension. The copy is direct and benefit-focused: 'No credit card needed' not 'We accept alternative payment methods.' Vocabulary leans into action verbs (Shop, Pay, Deliver) and removes friction language. Example sentence in brand voice: 'Your M-Pesa checkout is live—order from Nike right now, delivered to your door in 7 days.'

Colors

The color system is anchored in a warm, earthy palette that reflects both the optimism of emerging markets and the reliability of established commerce. Primary (#cf5840, a burnt-orange-red) is the signature accent used exclusively on call-to-action buttons, links, and interactive states—it commands attention without aggression, evoking both the energy of African markets and the trust of established brands. Secondary (#f0bd6e, a soft gold) appears in supporting highlights, badges, and secondary CTAs, reinforcing warmth and approachability. Tertiary (#064e3b, a deep forest green) is reserved for success states, confirmations, and trust indicators, signaling completion and security.

The surface stack uses a warm cream (#f3ede2) as the primary background, with progressively lighter tints for

Typography

The type system pairs Playfair Display (serif, elegant, editorial) for headlines with Manrope (sans-serif, geometric, modern) for body and UI text. This pairing communicates 'established yet accessible'—Playfair lends prestige and editorial authority to hero messaging ('Buy Amazon, locally'), while Manrope ensures clarity and scannability in product lists and CTAs. Display (84px, 600 weight, -0.02em tracking) is reserved for the hero headline only, commanding the viewport with confidence. Headline-lg (48px, 600 weight) is used for section titles and major page divisions. Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions, form labels, and supporting copy—the 24px line-height ensures 1.5x spacing for comfortable reading on mobile. Label-md (14px, 600 weig

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with 80px vertical padding and 40px horizontal padding, creating breathing room around the headline. The header uses fixed positioning with 64px horizontal padding and 116px total height (including top padding), with a semi-transparent backdrop-filter: blur(8px) to maintain visual hierarchy while allowing content to scroll beneath. Container sections use the lg spacing token (40px) for vertical separation between major sections, and md spacing (24px) for internal card padding. The gutter (24px) is applied between grid columns on desktop, reducing to 12px (sm spacing) on tablets and 8px (unit) on mobile. White-space is generous: the brand philosophy treats negative

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the heavy drop-shadows of skeuomorphism. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and focus rings, md (0 4px 12px rgba(0, 0, 0, 0.1)) for cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers. Cards use md elevation with a 1px solid border at #cccccc (outline-variant) to define edges without harsh shadows. The header uses sm elevation with a semi-transparent background (rgba(243, 238, 226, 0.9)) and backdrop-filter: blur(8px) to cr

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the utilitarian nature of e-commerce interfaces while maintaining clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel approachable and clickable; this is the most prominent shape on the page, appearing on both primary and secondary buttons. Cards use lg (1rem / 16px) border-radius to create subtle rounding that distinguishes them from the background without feeling playful or childish. Input fields use md (0.75rem / 12px) border-radius, slightly less rounded than cards, t

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the primary color (#cf5840) with white text (#fdf7ef), full border-radius (9999px), and 16px padding horizontally with 48px height. On hover (button-primary-hover), the background darkens to #b84a34 with a 200ms ease-out transition and a subtle md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.1)). Secondary buttons (button-secondary) use a transparent background with a 2px solid primary border, same padding and height, and on hover shift to the primary-container background (#ecb4a5) with on-primary-container text (#5c2415). All buttons use Manrope 700 weight at 16px for label-md typography, with 0.01em letter-spacing for subtle emphasis.

Containers & Surfaces Cards (card) use surface-c

Do's and Don'ts

**Do**

• Do use the primary color (#cf5840) exclusively on CTAs, links, and interactive focus states—never on backgrounds or body text.
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) to cards and modals to create clear visual hierarchy without heaviness.
• Do pair Playfair Display headlines with Manrope body text to communicate 'established yet accessible'—never mix serif and sans-serif within the same text block.
• Do use full border-radius (9999px) on all buttons to signal clickability and approachability.
• Do maintain 24px line-height on body-md (16px) text for comfortable reading on mobile devices.
• Do apply 200ms ease-out transitions to all hover and focus state changes for responsive but not twitchy feedback.

**Don't**

• Don't use the primary color (#cf5840) for backgrounds, disabled states, or non-interactive elements—reserve it for CTAs only.
• Don't apply shadows heavier than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) as they create visual clutter on warm backgrounds.
• Don't mix rounded and sharp corners on related components (e.g., buttons and inputs)—maintain consistency across the rounded scale.
• Don't use system fonts (system-ui, -apple-system) for body text—always load Manrope from Google Fonts to maintain brand consistency.
• Don't apply letter-spacing greater than 0.1em on body text as it reduces legibility; reserve tight tracking (-0.02em) for large headlines only.
• Don't use the error color (#ef4444) for non-critical messaging—reserve it for validation errors and destructive actions only.