La source de vérité de notre identité : clinique, fiable et moderne. Une base neutre en niveaux de gris, un accent orange affirmé et une famille violette pour les données. Chaque écran du produit doit sembler faire partie de ce même système.
Un produit SaaS premium pour les professionnels de santé. L'énergie vient du contraste, pas de la saturation.
La base en niveaux de gris garde les données médicales lisibles et calmes. Rien de tapageur, rien de stérile.
L'orange signale l'action : CTA, badges et highlights. Utilisé avec parcimonie pour créer du contraste.
La famille froide violet/lilas porte la visualisation de données et les accents secondaires, toujours avec intention.
Un produit précis et premium pour la santé. Raffiné — jamais bruyant ni fantaisiste.
Archivo pour toute l'UI ; Erode (serif) réservée au h1 éditorial. Les titres sont en graisse medium, tracking serré et équilibrés — jamais criards.
Archivo (body et UI) · Erode (display h1). N'importe jamais de Google Fonts et n'ajoute pas de nouvelles familles.
Une intelligence médicale digne de confiance
Conçu pour les équipes cliniques
Des réponses médicales vérifiées avec sources, prêtes pour le flux de travail réel.
98.6%
Mis à jour avec les dernières données probantes
Des tokens sémantiques pour tout (le dark mode fonctionne automatiquement). La palette de marque est réservée aux CTA, badges, highlights et à la visualisation de données.
brand-warm-100brand-warm-200brand-warm-300brand-warm-400brand-warm-500brand-cool-100brand-cool-200brand-cool-300brand-resolutebrand-accentbrand-darkbrand-lightbg-backgroundtext-foregroundbg-primarybg-secondarybg-mutedbg-accentbg-cardborder-borderbg-successbg-warningbg-destructivering-ringCompose sur components/ui/* avant de construire du sur-mesure. Un seul RainbowButton comme CTA principal par vue ; tout le reste reste calme.
Dépense le budget d'animation sur un reveal de chargement orchestré et un seul élément focal. Tout le reste reste calme et respecte prefers-reduced-motion.
| Usage | Durée | Easing |
|---|---|---|
| Hover couleur/transform | 150–200ms | ease-in-out |
| Reveal / crossfade | 300–400ms | ease-out / easeInOut |
| Panneaux glissants | 300ms | cubic-bezier(0.87,0,0.13,1) |
| Boucles d'ambiance | 2s–50s | linear infinite |
En cas de doute, imite la landing page. Tokens sémantiques plutôt que hex, deux polices, dark mode obligatoire et motion mesuré. Ce document prime sur toute esthétique générée.
Retour au produit