Mover Tunisie – Driver Profile

Overview

Mover Tunisie is a professional transportation marketplace connecting verified drivers with customers seeking reliable moving and logistics services across Tunisia. The design embodies a 'Trust-Forward Minimalism' aesthetic—combining vibrant accent colors (#6F0084 primary, #25D366 secondary) with clean, accessible layouts that prioritize transparency and certification status. The UI evokes confidence and professionalism through generous whitespace, clear hierarchies, and prominent trust signals (verified badges, ratings, document validation). The brand personality is direct, reassuring, and locally grounded: it speaks to both drivers and customers with clarity and respect. Voice: professional yet approachable, never corporate-speak. Example: 'Anis est disponible de 08:00 à 20:00 — réservez maintenant avec assurance GPS 24/7.'

Colors

The color system prioritizes trust and action through a vibrant-yet-professional palette. Primary (#6F0084, a deep purple) is reserved exclusively for CTAs, interactive elements, and brand identity—it appears on the 'Demander un Devis Gratuit' button, header badges, and profile accents. Secondary (#25D366, WhatsApp green) reinforces trust and urgency on sharing/messaging actions, creating a secondary call-to-action layer. Tertiary (#FF8C00, warm orange) highlights premium badges and service tags, adding warmth to the certification system. The surface stack uses cool, neutral grays (surface #f8fafc, surface-container #e2e8f0, on-surface #0f172b) to ensure readability and reduce cognitive load. Error red (#fb2c36) is used sparingly for validation states and warnings. All interactive elements

Typography

The type system uses Geist (a modern, geometric sans-serif) across all weights (400–900) to create a cohesive, tech-forward voice. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and driver names; Headline-lg (40px, 600 weight) frames major sections like 'À PROPOS DU TRANSPORTEUR'; Body-md (16px, 400 weight, 24px line-height) serves as the default reading size for descriptions and service details. Label-md (14px, 600 weight, 0.01em tracking) is applied to badges, buttons, and metadata tags to create visual distinction without size increase. All headings use -0.02em to -0.04em negative letter-spacing to tighten the visual presentation and reinforce hierarchy. Body text maintains 1.5x line-height (24px on 16px base) for accessibility and comfort. On small labels over busy

Layout

The layout uses a 12-column grid with a max-width of 1280px, employing a 3-column left sidebar (driver profile card, QR code, actions) and 9-column main content area on desktop; on mobile, it collapses to a single column. The gutter spacing is consistently 24px (md spacing token), with section separation using lg spacing (40px) to create breathing room between 'À PROPOS', 'Photos & Réalisations', and 'Avis Clients' sections. Container padding is 24px on desktop, 16px on tablet, 12px on mobile. The profile card (left sidebar) uses 20px internal padding and 16px gaps between elements to maintain visual rhythm. White-space is intentional: the hero profile area has 40px vertical margin below it, and each service tag has 8px gaps between them. The grid uses fluid columns on mobile (single stack

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than aggressive layering. Level 1 (Base/Surface): no shadow, 1px border in surface-variant (#cad5e2). Level 2 (Cards/Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 1px border in surface-variant. Level 3 (Elevated Cards/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 1px border in outline (#62748e). The header uses a backdrop-filter: blur(12px) with background: rgba(255, 255, 255, 0.9) to create a frosted-glass effect without heavy shadows. On hover, cards transition to Level 3 shadow (150ms ease) to signal interac

Shapes

The design employs 'Soft-Technical Roundness'—a balance between approachability and professional precision. Buttons and primary CTAs use lg radius (1rem / 16px) for a friendly, inviting appearance; input fields and secondary containers use DEFAULT radius (0.5rem / 8px) for a more structured feel. Cards and profile sections use xl radius (1.5rem / 24px) to create visual softness and reduce visual harshness. The avatar uses full radius (9999px) for a classic circular profile image. Service tags and badges use md radius (0.75rem / 12px) to sit between buttons and inputs, creating a visual hierarc

Components

Action Elements Buttons are the primary interaction pattern. The primary button (bg: #6F0084, text: white, 48px height, 24px horizontal padding, lg radius) uses a 150ms transition on hover to #85009e. On active/click, it scales to 0.98 and darkens to #5a0066, providing tactile feedback. Secondary buttons use a transparent background with a 1px outline in outline-variant (#90a1b9), maintaining the same height and padding. Ghost buttons (no background, no border) are used for tertiary actions like 'Copier Lien' and appear with a subtle hover state (background: surface-container-low). All buttons use label-md typography (14px, 600 weight) and include a 6px gap between icon and text when both are present.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px border i

Do's and Don'ts

**Do**

• Do use primary (#6F0084) exclusively for CTAs, focus states, and brand-critical interactive elements—never use it for backgrounds or body text.
• Do maintain 24px gutter spacing between major sections and 12px gaps between related elements within cards to create visual breathing room.
• Do apply lg radius (16px) to all primary buttons and xl radius (24px) to cards to reinforce the soft-technical aesthetic.
• Do use box-shadow transitions (150ms cubic-bezier(0.4, 0, 0.2, 1)) on hover to signal interactivity without changing color alone.
• Do pair Geist 600 weight with label-md (14px) for all interactive labels and badges to create visual hierarchy without size increase.
• Do include a 3px primary-colored border on avatar images and profile sections to anchor the brand color in the layout.
• Do use secondary (#25D366) for WhatsApp/sharing actions and tertiary (#FF8C00) for premium/certification badges to create a cohesive accent system.

**Don't**

• Don't use primary color for disabled states, backgrounds, or non-interactive text—reserve it for actions and focus indicators only.
• Don't apply shadows larger than md (0 4px 12px rgba(0,0,0,0.08)) on cards; excessive depth flattens the clean, minimal aesthetic.
• Don't mix border-radius values within a single component family (e.g., don't use sm and lg on different buttons in the same section).
• Don't exceed 150ms transition duration on interactive elements; slower transitions feel sluggish and reduce perceived responsiveness.
• Don't use system fonts (system-ui, -apple-system) in final production—always load Geist via @font-face to maintain brand consistency.
• Don't apply text-shadow to body text; reserve it only for small labels (label-sm) over busy backgrounds to maintain readability.
• Don't use more than 3 accent colors (primary, secondary, tertiary) in a single view; additional colors dilute the visual hierarchy and confuse users.