> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colismove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Outils Design System

> Accédez au design system complet de ColisMove via MCP — brand guidelines, tokens, composants et style visuel.

Les outils du design system donnent aux designers, développeurs et créateurs de contenu un accès instantané à l'identité visuelle et à la bibliothèque de composants ColisMove.

## Vue d'ensemble des outils

<CardGroup cols={2}>
  <Card title="get_brand_guidelines" icon="palette">
    Identité de marque, traits de personnalité, ton de voix et registre de communication par contexte.
  </Card>

  <Card title="get_design_tokens" icon="swatchbook">
    Système de couleurs OKLCH, typographie (Inter/Geist), échelle de border radius et animations CSS.
  </Card>

  <Card title="get_component_catalog" icon="grid-2">
    63 composants répartis sur 6 catégories — filtrables par catégorie (base, form, navigation, feedback, data, business).
  </Card>

  <Card title="get_visual_style" icon="sparkles">
    Philosophie des coins arrondis, ombres, glassmorphism, effets de glow et micro-interactions.
  </Card>

  <Card title="get_color_palette" icon="droplet">
    Palette complète hex + OKLCH pour les modes clair et sombre, tokens de sidebar et couleurs de statut.
  </Card>
</CardGroup>

## Exemples de conversations

<AccordionGroup>
  <Accordion title="Créer un email marketing">
    **Vous demandez :**

    > Je conçois un email marketing pour ColisMove. Quelles couleurs et quel ton dois-je utiliser ?

    L'IA appelle `get_brand_guidelines` et `get_color_palette` pour vous donner :

    * L'orange primaire `#E85A2A` pour les CTAs
    * La personnalité de marque : accessible, fiable, moderne
    * Le ton : chaleureux et rassurant, éviter le jargon
    * Des exemples « dit » vs « ne dit pas »
  </Accordion>

  <Accordion title="Construire une nouvelle page">
    **Vous demandez :**

    > Je dois construire une page de comparaison de tarifs. Quels composants utiliser ?

    L'IA appelle `get_component_catalog` avec les catégories « data » et « base » pour recommander :

    * Cards pour les paliers de tarif
    * Badges pour les libellés de plan
    * Boutons avec variantes primary/secondary
    * Animations disponibles pour les effets de hover
  </Accordion>

  <Accordion title="Vérifier les couleurs dark mode">
    **Vous demandez :**

    > Quelle est la couleur de fond en dark mode ?

    L'IA appelle `get_color_palette` et renvoie les valeurs OKLCH et hex exactes pour les tokens du mode sombre.
  </Accordion>
</AccordionGroup>

## Catégories de composants

| Catégorie      | Nombre | Exemples                                                |
| -------------- | ------ | ------------------------------------------------------- |
| **Base**       | 14     | Button, Card, Badge, Avatar, Separator                  |
| **Form**       | 17     | Input, Select, Checkbox, DatePicker, Slider             |
| **Navigation** | 9      | Sidebar, Tabs, Breadcrumb, Pagination                   |
| **Feedback**   | 7      | Alert, Toast, Dialog, Progress, Skeleton                |
| **Data**       | 5      | Table, Chart, Calendar, DataTable, Timeline             |
| **Business**   | 10     | AnnouncementCard, BookingTimeline, KYCBadge, WalletCard |

<Tip>
  Appelez `get_component_catalog` avec une catégorie précise pour obtenir les specs détaillées des composants, y compris les variantes, tailles et états.
</Tip>