xpeditis2.0/apps/frontend/DESIGN_QUICK_START.md

Xpeditis Design System - Guide Rapide

🎨 Couleurs à utiliser

// Couleurs principales
className="bg-brand-navy"        // Navy Blue (#10183A) - Headers
className="bg-brand-turquoise"   // Turquoise (#34CCCD) - CTAs
className="bg-brand-green"       // Green (#067224) - Success
className="bg-brand-gray"        // Light Gray (#F2F2F2) - Backgrounds
className="bg-white"             // White (#FFFFFF) - Cards

// Texte
className="text-brand-navy"      // Texte principal foncé
className="text-accent"          // Liens et highlights (turquoise)
className="text-success"         // Messages de succès
className="text-neutral-600"     // Texte secondaire

🔤 Typographies

// Titres (Manrope)
<h1>Titre Principal</h1>              // 40px, font-heading
<h2>Titre Section</h2>                // 32px, font-heading
<h3>Titre Carte</h3>                  // 24px, font-heading

// Corps de texte (Montserrat)
<p className="text-body-lg">...</p>   // 18px, paragraphe large
<p className="text-body">...</p>      // 16px, paragraphe normal
<p className="text-body-sm">...</p>   // 14px, texte secondaire

// Labels
<span className="label">STATUT</span> // 12px, uppercase, bold

🎯 Composants Pré-stylés

Boutons

<button className="btn-primary">Rechercher</button>
<button className="btn-secondary">Annuler</button>
<button className="btn-success">Confirmer</button>
<button className="btn-outline">En savoir plus</button>

Cards

<div className="card">
  <h3 className="card-header">Titre de la carte</h3>
  <p>Contenu...</p>
</div>

Badges

<span className="badge-success">CONFIRMÉ</span>
<span className="badge-info">EN COURS</span>
<span className="badge-warning">EN ATTENTE</span>
<span className="badge-error">ANNULÉ</span>

Formulaires

<label className="label">Port d'origine</label>
<input className="input" placeholder="FRFOS - Le Havre" />

Liens

<a href="#" className="link">Documentation</a>

📋 Exemples Complets

Card de Booking

<div className="card">
  <h3 className="card-header">Réservation WCM-2024-ABC123</h3>

  <div className="space-y-3">
    <div>
      <span className="label">STATUT</span>
      <span className="badge-success ml-2">CONFIRMÉ</span>
    </div>

    <div>
      <span className="label">ROUTE</span>
      <p className="text-body mt-1">Le Havre → Shanghai</p>
    </div>

    <div>
      <span className="label">PRIX TOTAL</span>
      <p className="text-h3 text-accent mt-1">1 245 USD</p>
    </div>

    <button className="btn-primary w-full mt-4">
      Voir les détails
    </button>
  </div>
</div>

Formulaire de Recherche

<div className="bg-white rounded-lg p-8 shadow-md">
  <h2 className="mb-6">Rechercher un tarif</h2>

  <form className="space-y-4">
    <div>
      <label className="label">Port d'origine</label>
      <input
        className="input w-full"
        placeholder="Ex: FRFOS - Le Havre"
      />
    </div>

    <div>
      <label className="label">Port de destination</label>
      <input
        className="input w-full"
        placeholder="Ex: CNSHA - Shanghai"
      />
    </div>

    <div className="grid grid-cols-2 gap-4">
      <div>
        <label className="label">Volume (CBM)</label>
        <input className="input w-full" type="number" />
      </div>
      <div>
        <label className="label">Poids (KG)</label>
        <input className="input w-full" type="number" />
      </div>
    </div>

    <button type="submit" className="btn-primary w-full">
      Rechercher
    </button>
  </form>
</div>

Section Hero

<section className="section-navy">
  <div className="container mx-auto px-8 text-center">
    <h1 className="text-white mb-6">
      Fret Maritime Simplifié
    </h1>

    <p className="text-body-lg text-neutral-200 max-w-2xl mx-auto mb-8">
      Réservez, suivez et gérez vos expéditions LCL avec des tarifs
      en temps réel des principales compagnies maritimes.
    </p>

    <div className="flex gap-4 justify-center">
      <button className="bg-brand-turquoise text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-turquoise/90">
        Commencer
      </button>
      <button className="bg-white text-brand-navy font-heading font-semibold px-8 py-4 rounded-lg hover:bg-neutral-100">
        Voir la démo
      </button>
    </div>
  </div>
</section>

Dashboard KPI Card

<div className="card">
  <div className="flex items-center justify-between mb-2">
    <span className="label">RÉSERVATIONS ACTIVES</span>
    <span className="badge-info">+12%</span>
  </div>

  <p className="text-display-sm text-brand-navy">247</p>

  <p className="text-body-sm text-neutral-600 mt-2">
    32 en attente de confirmation
  </p>
</div>

Table Row

<tr className="border-b hover:bg-brand-gray transition-colors">
  <td className="py-3 px-4">
    <span className="font-heading font-semibold text-brand-navy">
      WCM-2024-ABC123
    </span>
  </td>
  <td className="py-3 px-4">
    <span className="text-body">FRFOS → CNSHA</span>
  </td>
  <td className="py-3 px-4">
    <span className="badge-success">CONFIRMÉ</span>
  </td>
  <td className="py-3 px-4">
    <span className="text-body font-semibold">1 245 USD</span>
  </td>
  <td className="py-3 px-4">
    <button className="link text-sm">Détails →</button>
  </td>
</tr>

🎨 Palette de couleurs complète

Couleurs de marque

• Navy: bg-brand-navy / text-brand-navy (#10183A)
• Turquoise: bg-brand-turquoise / text-brand-turquoise (#34CCCD)
• Green: bg-brand-green / text-brand-green (#067224)
• Gray: bg-brand-gray (#F2F2F2)

Échelle de gris (neutre)

• bg-neutral-50 à bg-neutral-900
• text-neutral-50 à text-neutral-900

Couleurs sémantiques

• Success: bg-success / text-success (#067224)
• Accent: bg-accent / text-accent (#34CCCD)
• Primary: bg-primary / text-primary (#10183A)

📱 Responsive Design

// Mobile first
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards */}
</div>

// Texte responsive
<h1 className="text-h2 md:text-h1 lg:text-display-sm">
  Titre responsive
</h1>

// Padding responsive
<section className="py-8 md:py-12 lg:py-16 px-4 md:px-8">
  {/* Contenu */}
</section>

🚀 Voir la démo

Pour voir tous les composants en action:

import { DesignSystemShowcase } from '@/components/examples/DesignSystemShowcase';

export default function DemoPage() {
  return <DesignSystemShowcase />;
}

📚 Documentation complète

Voir DESIGN_SYSTEM.md pour:

• Guidelines d'accessibilité
• Configuration Tailwind complète
• Exemples avancés
• Best practices