Landing and app redesign for Callimac, a B2B managerial AI. The app, reframed from a generic chat into a single-page interface for piloting and conversation. Four LLMs orchestrated under the hood, design-in-code straight on the Vite + React repo, in under a month.
Organiser un entretien de recadrage avec un collaborateur
Callimac brings managerial support to 100% of managers. A company-contextualized AI, backed by research, carrying five roles in a single platform : Assistant, Coach, Trainer, Barometer, Relay. Under the hood, four LLMs orchestrated — Claude, GPT, Gemini, Perplexity — each used for what it does best.
When I came in, the interface looked like a generic LLM : a chat, and that was it. The ask : redesign the landing (convince CHROs and exec teams) and the app (the manager opening the interface at 9:02 AM between two meetings). Identity, architecture, system, components — all of it, in under a month, solo.
The method made the timeline workable. Figma to set intent across a few screens, everything else straight in the Vite + React repo. Claude Code as a copilot to generate clean code and iterate fast, fake data to prototype without waiting on the API, Vercel making every branch observable on commit. Design is committed, not handed off as an image.
Before opening Figma, I read the Callimac corpus : internal studies, management barometers, the academic literature the product draws on. Plain finding : the manager job has become structurally unbearable.
The design has to answer that. Not sell coaching — give grip to someone who's lost it. On one page. In a few seconds of attention.
Gives managers access to the right HR information and best practices, adapted to each situation and to your company.
Day-to-day support on every managerial situation. Helps your managers grow, step by step.
Micro-learning and debriefs contextualized to your company and to the manager.
Insights on managerial trends, for HR and exec teams.
Roll out new practices or regulations to all your managers, at scale.
At the start, the app looked like a generic LLM : a chat area, and that was it. The problem : a manager opening the interface at 9:02 AM between two meetings doesn't have time to restart a conversation just to find out what's on for today.
The app was restructured into a single-page interface for piloting and conversation. Conversation stays central — but it's now surrounded by the objects that give grip on the day-to-day : actions, rituals, weekly planning, history. Anything that didn't serve normal use was removed, not hidden.
Four engines under the hood. Callimac orchestrates Claude, GPT, Gemini and Perplexity, each used for what it does best. The UI had to make that power readable without putting it on display : the manager asks, the right model answers.
Reflexes borrowed from Notion and Linear : actions and rituals as pivot objects, explicit navigation between the five roles, clean page distinctions, one-view reading.
Color is feedback, not decoration. Sky for Callimac's voice, one color per role (emerald · Coach, violet · Trainer, amber · Barometer, rose · Relay), and urgency that registers before it's read — an overdue ritual is visible. Warm grounds, Inter as a single family, hierarchy carried by weight.
Comment puis-je vous aider aujourd'hui ?
Landing. 3D hero (chat, rituals, action), bento of the five roles, sections for problem, solution, stats, features, team, FAQ. Two audiences served by one page : the decision (CHRO, exec) and the use (managers).
App, reworked into a cockpit. Conversational home at the center ; actions and rituals as Notion / Linear-style pivot objects ; integrated weekly planning, history, explicit navigation between the five roles. Anything that didn't serve normal use was removed. Under the hood, the routing between Claude, GPT, Gemini and Perplexity stays invisible : the manager asks, the right model answers.
Design system from scratch. Warm palette, Inter as a single family, five semantic colors (one per role) paired with an urgency signal — an overdue ritual is visible before it's read. Generous rounded corners, warm shadows. Documented in /design-system on the landing.
Design-in-code workflow. Figma for intent, Claude Code for clean code, Vercel preview on every branch, mock data for prototyping. The design → commit → preview loop fits in a handful of minutes.
Tokens, atoms, molecules, organisms — the visual grammar of the managerial cockpit. Inter as a single family, sky as primary voice, five fruit colors per role.
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.