Charte Graphique
Guide de style et design system de Kammi. Référence pour maintenir la cohérence visuelle sur l'ensemble du site.
Couleurs de marque
Couleurs principales
Indigo 600
#4F46E5
indigo-600
CTA principaux, liens
Purple 600
#9333EA
purple-600
Gradients, accents
Pink 500
#EC4899
pink-500
Gradients, highlights
Gray 900
#111827
gray-900
Textes principaux
Green 500
#22C55E
green-500
Succès, validations
Couleurs secondaires
Gray 600
#4B5563
gray-600
Textes secondaires
Gray 100
#F3F4F6
gray-100
Fonds clairs, badges
Gray 50
#F9FAFB
gray-50
Fonds de sections
Yellow 400
#FACC15
yellow-400
Etoiles, notes
Gradient principal
Gradient CTA
from-indigo-600 via-purple-600 to-pink-600
Boutons principaux, titres accentués
Couleurs par catégorie
Chaque catégorie de produit a sa propre identité visuelle avec un gradient et des couleurs associées.
Gestion administrative RH
Gradient
#3B82F6 → #22D3EE
Fond clair
bg-blue-50
Bordure
border-blue-200
Exemple badge :
AdministrationGestion des talents
Gradient
#8B5CF6 → #A855F7
Fond clair
bg-violet-50
Bordure
border-violet-200
Exemple badge :
TalentsGestion de la paie
Gradient
#F59E0B → #FB923C
Fond clair
bg-amber-50
Bordure
border-amber-200
Exemple badge :
PaieTypographie
Police principale : Manrope - Une police moderne et lisible.
Boutons
Boutons principaux
Boutons par catégorie
Boutons sur fond sombre/gradient
Boutons pages Package (par categorie)
Administration (gestion-rh)
Talents (gestion-des-talents)
Paie (gestion-de-la-paie)
Cartes
Administration
Gestion administrative RH
Talents
Gestion des talents
Paie
Gestion de la paie
Icônes
Utilisation de Heroicons (outline, strokeWidth 1.5) pour une apparence moderne et cohérente.
Animations et composants interactifs
Composants animés pour enrichir l'expérience utilisateur.
Hero Carousel - Effet dossiers
3 images empilées avec effet de survol "dossier qui sort". Utilisé sur la page d'accueil.
<HeroCarousel />Compteurs animés
Animation de comptage au scroll avec easing smooth. Se déclenche une seule fois.
<AnimatedCounter value={1000} suffix="+" duration={2000} />Transitions et effets
Fade In au scroll
translateY(24px) → 0 + opacity
transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1)Hover cards
translateY(-4px) + shadow-xl
transition-all duration-300Hover boutons
translateY(-2px) + shadow-lg
hover:-translate-y-0.5Espacements et arrondis
Utilisation cohérente des espacements et des border-radius pour un design harmonieux.