OLX AI Assistant

Overview

OLX AI Assistant is a conversational marketplace interface designed for rapid product discovery and commerce acceleration. Built on a foundation of deep teal authority (#002f34) paired with electric lime accents (#ceff2e), the design language embodies 'Kinetic Minimalism'—a movement that combines austere, high-contrast surfaces with energetic micro-interactions and glassmorphic depth. The aesthetic evokes speed, clarity, and trustworthiness: a professional marketplace that moves at the pace of human thought. The UI prioritizes signal over noise, using generous whitespace (surface: #ffffff, background: #f2f4f5) as a canvas for the brand's two signature accent colors to command attention without visual chaos.

The brand voice is direct, conversational, and action-oriented. Vocabulary favors imperative verbs ('Find', 'Connect', 'Discover') and avoids corporate hedging. Tone is confident but approachable—think of a knowledgeable marketplace guide rather than a salesperson. Example: 'What are you looking for?' (not 'Please describe your desired product category'). The design system reinforces this voice through typography choices: Inter's geometric neutrality at 400–700 weights supports clarity, while 800-weight display text commands attention on hero sections. Micro-interactions (pulse-glow animations on CTAs, 0.3s hover lifts on cards) create a sense of responsiveness that mirrors the conversational AI's immediacy.

Colors

The color system operates on a three-tier hierarchy: deep teal (#002f34) as the structural anchor, turquoise (#23e5db) as the primary interactive accent, and lime (#ceff2e) as the secondary energy signal. Primary (turquoise #23e5db) is reserved exclusively for CTAs, focus states, active navigation, and the AI assistant's speech bubbles—it is the 'clickable' color. On-primary text is always deep teal (#002f34) for maximum contrast (WCAG AAA compliant at 11.2:1 ratio). Secondary (lime #ceff2e) appears on accent buttons, badges, and status indicators; it commands attention through saturation rather than frequency, appearing in ~5% of interactive elements. Tertiary (deep teal #002f34) serves as the text anchor and structural frame. The surface stack progresses from pure white (#ffffff) for pri

Typography

The type system follows a 'Clarity-First' hierarchy: display (60px, 800-weight) commands hero sections with -0.04em letter-spacing to tighten the visual mass; headline-lg (40px, 700-weight) anchors major sections; headline-md (28px, 700-weight) structures subsections; title-lg (20px, 600-weight) labels cards and modals; body-lg (18px, 400-weight) and body-md (16px, 400-weight) carry conversational content with -0.01em letter-spacing for optical tightness; label-md (14px, 600-weight) and label-sm (12px, 500-weight) handle UI labels and metadata. Inter is used exclusively for UI and body text, chosen for its geometric neutrality and superior readability at small sizes (12px label-sm maintains clarity without hinting artifacts). JetBrains Mono (14px, 500-weight) is reserved for code snippets,

Layout

The layout operates on a 12-column grid with a max-width of 1280px, using fluid margins that scale from 24px (gutter) on mobile to 40px (lg spacing) on desktop. The spacing scale is semantic: xs (4px) for micro-adjustments within components, sm (12px) for input padding and tight grouping, md (24px) for card padding and section separation, lg (40px) for major section breaks, and xl (64px) for page-level rhythm. Whitespace is treated as a first-class design element—the background (#f2f4f5) is never fully occupied, with cards and panels floating in generous negative space to reduce cognitive load. Container max-width (1280px) prevents line-length from exceeding 75 characters at body-md (16px), supporting reading comprehension. The page-transition animation (slideUpFade: 0.5s cubic-bezier(0.2,

Elevation & Depth

Depth is conveyed through a three-level shadow system combined with glassmorphic layering. Level 1 (Base): the background (#f2f4f5) with subtle SVG noise texture (opacity: 0.03, baseFrequency: 0.65) provides tactile grounding without visual noise. Level 2 (Standard Cards): box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) with 1px solid border at rgba(255, 255, 255, 0.5) creates a floating effect; cards lift on hover with transform: translateY(-4px) and box-shadow: 0 12px 24px -10px rgba(0, 47, 52, 0.1) over 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). Level 3 (Glass Panels & Modals): backdrop-filter: blu

Shapes

The shape language is 'Geometric Precision'—a philosophy that pairs sharp, functional corners with carefully calibrated border-radius values to signal both professionalism and approachability. Buttons and inputs use rounded: lg (1rem / 16px) to soften the geometric edge without introducing organic curves; this radius is large enough to feel modern but small enough to maintain structural clarity. Cards use rounded: lg (16px) for consistency with buttons, creating a cohesive component family. Glass panels and modals use rounded: lg (16px) to align with the card system. Chips and badges use round

Components

Action Elements Buttons are the primary interaction mechanism and receive the most careful treatment. button-primary uses background: {colors.primary} (#23e5db) with on-primary text (#002f34), padding: 12px 24px, height: 48px, and rounded: lg (16px). On hover, the button transitions to background: {colors.primary-fixed-dim} (#7ee8e3) with transform: translateY(-2px) and box-shadow: 0 8px 30px rgba(35, 229, 219, 0.2) over 0.2s cubic-bezier(0.2, 0, 0, 1). Active state returns to primary with transform: translateY(0). button-secondary uses a 2px solid border at {colors.primary} with transparent background, inverting on hover to background: {colors.primary-container} (#b3f9f5). button-accent uses background: {colors.secondary} (#ceff2e) with bold 700-weight text and a continuous pulse-glow

Do's and Don'ts

**Do**

• Do use primary turquoise (#23e5db) exclusively for interactive elements—CTAs, focus states, active navigation—to create a consistent 'clickable' signal across the interface.
• Do apply the hover-lift transform (translateY(-4px)) and shadow elevation (0 12px 24px -10px rgba(0, 47, 52, 0.1)) to all interactive cards and buttons to reinforce the kinetic, responsive brand personality.
• Do maintain the 12-column grid with 24px gutters and enforce container-max-width: 1280px to preserve readability and prevent line-length from exceeding 75 characters.
• Do use Inter 400–700 weights for all UI and body text, reserving JetBrains Mono (500-weight) exclusively for code, IDs, and technical metadata to signal machine-readability.
• Do apply text-shadow: 0 2px 4px rgba(0, 47, 52, 0.08) to all text rendered over cards or complex backgrounds to ensure WCAG AAA contrast compliance.
• Do use the pulse-glow animation (2.5s infinite) on high-priority CTAs like 'Start Conversation' to draw attention without jarring the user.
• Do implement all transitions with explicit timing functions (0.2s cubic-bezier(0.2, 0, 0, 1) for state changes, 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) for hover lifts) to create intentional, responsive motion.
• Do treat whitespace as a first-class design element—never fully occupy the background (#f2f4f5), allowing cards and panels to float in generous negative space.

**Don't**

• Don't use secondary lime (#ceff2e) as a primary interactive color—it is reserved for accent buttons, badges, and status indicators appearing in ~5% of interactive elements.
• Don't apply rounded: full (9999px) to buttons or cards—use rounded: lg (16px) for buttons and cards, reserving full radius exclusively for chips and badges to signal 'dismissible' status.
• Don't hardcode color values inside component styles—always reference {colors.x} tokens to maintain system coherence and enable future theme variations.
• Don't use system-ui or generic sans-serif font-family declarations—always specify Inter or JetBrains Mono with explicit @font-face or Google Fonts imports.
• Don't apply box-shadow values exceeding 0 12px 24px -10px rgba(0, 47, 52, 0.1)—deeper shadows undermine the minimalist aesthetic and create visual clutter.
• Don't introduce new accent colors mid-interaction—all hover states must use the primary turquoise (#23e5db) or its fixed variants to maintain visual consistency.
• Don't disable the page-transition animation (slideUpFade: 0.5s) on major content blocks—it reinforces the kinetic brand personality and creates continuity.
• Don't use backdrop-filter: blur() values exceeding 12px on glass panels—higher blur values reduce readability and create a sense of visual separation that contradicts the 'unified interface' principle.