Refonte landing et app pour Callimac, IA managériale B2B. L'app, repensée d'un chat générique vers une interface de pilotage et de discussion sur une seule page. Quatre LLM orchestrés sous le capot, design-in-code direct sur le repo Vite + React, en moins d'un mois.
Organiser un entretien de recadrage avec un collaborateur
Callimac démocratise l'accompagnement managérial pour 100% des managers. Une IA contextualisée à l'entreprise, adossée à la recherche, qui porte cinq rôles dans une seule plateforme : Assistant, Coach, Formateur, Baromètre, Relai. Sous le capot, quatre LLM orchestrés — Claude, GPT, Gemini, Perplexity — chacun mobilisé selon ce qu'il fait de mieux.
À l'arrivée, l'interface ressemblait à un LLM générique : un chat, et c'est tout. La demande : refondre la landing (convaincre CHRO et direction) et l'app (le manager qui ouvre l'interface à 9h02 entre deux réunions). Identité, architecture, système, composants — l'ensemble, en moins d'un mois, en solo.
La méthode a rendu le calendrier tenable. Figma pour poser l'intention en quelques écrans, tout le reste directement dans le repo Vite + React. Claude Code en copilote pour générer du code propre et itérer vite, données fictives pour prototyper sans attendre l'API, Vercel pour rendre chaque branche observable dès le commit. Le design est commité, pas livré en image.
Avant d'ouvrir Figma, lecture du corpus Callimac : études internes, baromètres du management, littérature académique mobilisée par le produit. Constat factuel : la fonction de manager est devenue structurellement intenable.
Le design doit répondre à ça. Pas vendre du coaching, mais donner de la prise à quelqu'un qui n'en a plus — sur une seule page, en quelques secondes d'attention.
Donne accès aux managers à la bonne information RH et aux bonnes pratiques, adaptées à chaque situation et à votre entreprise.
Soutien quotidien sur chaque situation managériale. Aide vos managers à se développer pas à pas.
Micro-apprentissages et débriefings contextualisés à votre entreprise et au manager.
Insights sur les tendances managériales pour les RH et la direction générale.
Déployez de nouvelles pratiques ou réglementations auprès de tous vos managers, à grande échelle.
Au départ, l'app ressemblait à un LLM générique : une zone de chat, et c'est tout. Le problème : un manager qui ouvre l'interface à 9h02 entre deux réunions n'a pas le temps de relancer une conversation pour savoir ce qu'il doit faire aujourd'hui.
L'app a été restructurée en interface de pilotage et de discussion, sur une seule page. La conversation reste centrale — mais elle est désormais entourée des objets qui donnent prise au quotidien : actions, rituels, planning hebdo, historique. Tout ce qui ne sert pas l'usage normal a été retiré, pas masqué.
Sous le capot, quatre moteurs. Callimac orchestre Claude, GPT, Gemini et Perplexity, chacun mobilisé selon ce qu'il fait de mieux. L'UI devait rendre cette puissance lisible sans la mettre en avant : le manager pose sa question, le bon modèle répond.
Réflexes empruntés à Notion et Linear : actions et rituels comme objets-pivots, navigation explicite entre les cinq rôles, distinctions de page nettes, lecture en une seule vue.
La couleur est du feedback, pas de la décoration. Sky pour la voix de Callimac, une couleur par rôle (emerald · Coach, violet · Formateur, amber · Baromètre, rose · Relai), et l'urgence qui remonte avant d'être lue — un rituel en retard se voit. Fonds chauds, Inter en famille unique, hiérarchie portée par les graisses.
Comment puis-je vous aider aujourd'hui ?
Landing. Hero 3D (chat, rituels, action), bento des cinq rôles, sections problème, solution, stats, features, team, FAQ. Deux audiences servies par une même page : la décision (CHRO, direction) et l'usage (managers).
App, refondue en cockpit. Accueil conversationnel au centre ; actions et rituels comme objets-pivots à la Notion / Linear ; planning hebdo intégré, historique, navigation explicite entre les cinq rôles. Tout ce qui ne sert pas l'usage normal a été retiré. Sous le capot, le routing entre Claude, GPT, Gemini et Perplexity reste invisible : le manager pose sa question, le bon modèle répond.
Design system from scratch. Palette chaude, Inter en famille unique, cinq couleurs sémantiques (une par rôle) doublées d'un signal d'urgence — un rituel en retard se voit avant d'être lu. Coins arrondis généreux, ombres chaudes. Documenté dans /design-system de la landing.
Workflow design-in-code. Figma pour l'intention, Claude Code pour le code propre, Vercel preview sur chaque branche, mock data pour prototyper. La boucle design → commit → preview tient en quelques minutes.
Tokens, atoms, molecules, organisms — la grammaire visuelle du cockpit managérial. Inter en famille unique, sky en voix principale, cinq couleurs sémantiques (une par rôle).
La voix Callimac. Sky pour les CTA principaux, les liens, les cards interactives. Bg subtle pour les surfaces "on l'écoute".
Indigo en accent secondaire (chat assistant, gradients). Vert/orange/rouge réservés au feedback fonctionnel — jamais à la déco.
Une seule famille. La hiérarchie se fait sur le poids, jamais sur la fonte. Tabular nums sur les KPI et stats.
Inputs 10, boutons 12, cards 16, dialogs / hero 18. Pills full.
Empilement subtle pour les cards, plus marqué pour le elevated et les dialogs. Glow accent réservé aux états focus / sélection.
Stroke 1.8, couleur primary par défaut. 4 tailles : 16 inline, 20 nav, 24 cards, 32 empty / hero.
Primary sky pour les CTA principaux. Secondary indigo pour le second niveau. Outline / ghost / link pour les actions secondaires.
3 tailles + variante icon (carrée 38×38). Les icônes inline gardent un gap de 6px avec le label.
Statut, tag, compteur. Les couleurs reprennent les sémantiques (info / success / warning / destructive).
Border 1px, radius 10. Focus = border primary + glow accent 3px. Placeholder text-mute. Disabled grisé.
Votre nom d'affichage côté manager.
Checkbox 18×18 carrée, switch 36×20 pill. Les deux passent en primary à l'activation.
Trigger style input avec chevron à droite. Le contenu déroulant ouvre une popover.
Spinner border-top primary, 3 tailles. Skeleton avec shimmer subtil sur les surfaces blanches.
Tooltip dark, 5px de padding vertical. Apparaît avec un fade-in 150ms au hover.
Conteneur générique radius 16. Standard / cliquable (hover ombre marquée) / avec footer d'actions.
Card avec border accent au hover. Une couleur par rôle Callimac. Sky pour Assistant, emerald pour Coach, violet pour Formateur, amber pour Baromètre, rose pour Relai.
Stat tile compacte. Label uppercase mute, valeur Inter 26pt tabular-nums, icône inline en accent.
Bordure 1px tinted, fond clair. Icône d'angle en haut-gauche, titre + description en colonne.
Tabs avec indicator cream animé sur fond muted. Breadcrumb chevron + dernier item gras.
Track muted, fill couleur sémantique. Animation transition 500ms cubic-bezier(0.16, 1, 0.3, 1).
Stepper horizontal pour les parcours de coaching. Done = success, active = primary, idle = muted.
Fond blanc, icône carrée 48px sur primary-bg, titre bold, description soft, CTA optionnel.
En-tête de section avec eyebrow primary uppercase + titre 22pt + description optionnelle. Centré.
Grid bento principal de la landing. Une carte par rôle, une couleur sémantique par carte. Le moteur orchestre 4 LLM derrière, l'UI ne montre que la voix.
Sidebar 280px. Brand block en haut sur primary-bg-subtle, items en colonne, active marqué en gras avec fond bg-subtle.
Card chat complète. Header avec status pulsing emerald, thread asymétrique, suggestions chips, input bar.
Table dans une card. Header uppercase mute, lignes 12px padding, dernière ligne sans border.
| Nom | Rôle | Statut |
|---|---|---|
| Marie Lambert | Manager | Actif |
| Hugo Bernard | Team Lead | En attente |
| Claire Moreau | Manager | Inactif |
Liste de details collapsibles. Le + tourne en × à l'ouverture. Une seule section ouverte à la fois optionnellement.
Liste de cards notif compactes. Icône carrée colorée + titre + timestamp.