BlaBlaCar

Overview

BlaBlaCar is a mobility marketplace that democratizes travel across Latin America by connecting drivers and passengers for carpools, buses, and trains. The design system embodies a philosophy of **Confident Pragmatism**—a visual language that prioritizes clarity, trust, and smart decision-making over decorative flourish. The brand personality is direct, reassuring, and action-oriented: users come to BlaBlaCar to solve a travel problem quickly, and the interface must reflect that urgency without sacrificing accessibility or safety. The emotional response is one of empowerment—"I found the best option, and I trust this platform to deliver it."

The voice is conversational yet authoritative, using active language and concrete details. Tone examples: "Temos as melhores ofertas de ônibus" (We have the best bus offers) and "Viaje inteligente: ônibus ou carona, sempre com economia" (Travel smart: bus or carpool, always with savings). The vocabulary avoids jargon; instead, it uses everyday Portuguese with a focus on outcomes (savings, convenience, trust) rather than features. Personality traits: helpful, no-nonsense, locally aware, and optimistic about mobility.

Colors

The color system is built on a foundation of **trust and clarity**. Primary (#0071EB) is a confident, saturated blue used exclusively for call-to-action buttons, active states, and primary navigation—it signals "click here to move forward." Secondary (#00AFF5) is a brighter cyan that supports the primary in secondary CTAs and highlights, creating visual rhythm without competing for attention. Tertiary (#9AED66) is a fresh green reserved for positive reinforcement, success states, and sustainability messaging (reflecting BlaBlaCar's eco-friendly positioning). The surface stack ranges from pure white (#ffffff) for primary content areas down to #e9ecf0 for subtle container differentiation, with on-surface text locked at #001536 (near-black navy) for maximum legibility at 16px body size. Error

Typography

The type system uses GT Eesti Pro Display as the primary family, a geometric sans-serif that conveys modernity and efficiency while remaining warm and approachable. Display (54px, 800 weight, -0.02em letter-spacing) anchors hero sections and major headings, commanding attention without aggression. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure page sections with clear hierarchy. Body text (16px, 400 weight, 24px line-height) is set at a comfortable measure for mobile-first reading; the 0.005em letter-spacing adds subtle breathing room. Labels (14px, 500 weight) are used for button text, form labels, and metadata, with tighter tracking (0.01em) to reinforce their secondary role. On small labels over busy backgrounds (e.g., badges on search results), apply text-s

Layout

The layout system uses a fluid 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The gutter is consistently 24px (3 units), applied between columns and as the outer margin on medium+ screens. Container sections use lg spacing (40px) for vertical separation between major blocks (hero, search form, results, footer), creating a rhythm that guides the eye downward. The search form sits in a prominent container with 24px padding, using md spacing internally between input fields. White-space is treated as a first-class design element: the hero section pairs a bold headline (54px) with 40px of breathing room below, and result cards are separated by 12px (sm spacing) to avoid visual clutter. On mobile, the layout collapses to a

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the flat-design trap while staying true to BlaBlaCar's pragmatic aesthetic. Level 1 (Base/Surface) has no shadow—the white background is the foundation. Level 2 (Cards, Input Fields) uses a soft, subtle shadow: 0 1px 2px rgba(0, 21, 54, 0.04), 0 1px 2px rgba(0, 21, 54, 0.02)—barely perceptible but enough to separate the element from the background. Level 3 (Modals, Elevated Cards, Hover States) escalates to 0 2px 4px rgba(0, 21, 54, 0.06), 0 4px 12px rgba(0, 21, 54, 0.08), creating a clear visual hierarchy. Interactive hover stat

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 (12px), creating a friendly, approachable feel that invites interaction. Input fields and search bars use DEFAULT radius (4px), a subtle rounding that maintains their functional, data-entry nature. Cards and containers use lg radius (12px) to match buttons, creating visual cohesion. Modals and full-screen overlays use xl radius (16px) at the top corners, emphasizing their prominence. The full radius (9999px) is reserved for b

Components

Action Elements Buttons are the primary drivers of user intent. The primary button (48px height, 12px vertical padding, 24px horizontal padding, 12px border-radius) uses the brand blue (#0071EB) with white text at 500 weight. On hover, the background darkens to #0056b3 with a 240ms transition and a soft blue shadow (0 2px 8px rgba(0, 113, 235, 0.24)). Active state uses #004499. The secondary button mirrors the primary in size and padding but uses a transparent background with a 2px primary-blue border and primary-blue text; on hover, it fills with the primary-container color (#e3f2ff) while maintaining the border. Disabled buttons across both variants use #e9ecf0 background with #576680 text at 60% opacity and no shadow or border color change on interaction.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use primary blue (#0071EB) exclusively for primary CTAs and active states—it's the brand's most recognizable signal.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room and guide the eye through content hierarchy.
• Do apply 240ms ease-out transitions to all interactive state changes (hover, focus, active) for a responsive, polished feel.
• Do use GT Eesti Pro Display at 16px body size with 24px line-height for optimal readability on mobile and desktop.
• Do reserve tertiary green (#9AED66) for positive reinforcement, success states, and sustainability messaging only.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs—they dilute the brand signal and confuse user intent.
• Don't apply shadows heavier than lg (0 3px 8px rgba(0, 0, 0, 0.15)) or use pure black in shadows; the brand navy maintains warmth.
• Don't mix border-radius values arbitrarily; stick to the defined scale (3px, 4px, 8px, 12px, 16px, 9999px) to maintain visual consistency.
• Don't use font weights outside the defined set (400, 500, 600, 700, 800); additional weights fragment the type system.
• Don't disable interactive elements without clear visual feedback—always use the disabled state (60% opacity, #e9ecf0 background) rather than hiding them.