Une marque douce. Un produit qui tranche.
Fond crème, cartes blanches, une seule couleur d'accent. Les chiffres clés parlent en Cabinet Grotesk, le reste en Inter. Tout ce qui est sur cette page vient de packages/tokens.
1 248
clics attribués à l'équipe cette semaine. Exemple de chiffre clé.
Couleurs
Aucune couleur Tailwind par défaut n'existe dans l'application. Les contrastes des paires réellement utilisées sont testés dans packages/tokens.
Fonds et texte
Fond de page (crème). Jamais de blanc pur en fond.
Surface des cartes et panneaux.
Zones neutres, lignes de tableau alternées.
Filet de séparation.
Bordure des champs de saisie.
Texte principal.
contraste sur crème : 16,72:1
Texte secondaire.
contraste sur crème : 5,45:1
Texte tertiaire : indices, placeholders. Jamais une information seule.
contraste sur crème : 2,61:1
Accent framboise
Accent framboise : indicateurs, états actifs, chiffres clés, icônes.
contraste sur crème : 3,37:1
Remplissage des boutons principaux et liens (AA avec texte blanc).
contraste sur crème : 4,54:1
Bouton principal au survol.
Bouton principal enfoncé.
Texte framboise sur fond rose.
Rose guimauve : fond d'accent, survol doux, badge de marque.
Rose très pâle : sélection, fond du dégradé.
Anneau de focus clavier.
Sémantique
Indicateur de succès (paiement reçu, appel tenu).
Fond d'un badge de succès.
Texte d'un badge de succès.
Indicateur d'alerte (fenêtre 24 h qui se ferme).
Fond d'un badge d'alerte.
Texte d'un badge d'alerte.
Indicateur d'erreur ou d'action irréversible.
Fond d'un badge ou bouton destructif.
Texte d'un badge ou bouton destructif.
Indicateur d'information.
Fond d'un badge d'information.
Texte d'un badge d'information.
Typographie
Cabinet Grotesk pour les titres et les chiffres, interlettrage serré. Inter pour le corps. JetBrains Mono pour les identifiants et les codes.
3 812 €
Ce que rapportent tes DM
Entonnoir de la semaine
Liens envoyés par setter
Conversation avec un prospect
Un setter envoie un lien, le prospect clique, visite la page, remplit le formulaire, réserve un appel, paie. Guimauve relie ces événements au même lead et montre à l'équipe ce qui rapporte vraiment.
guimauve('consent', true) exemple d'extrait
Rayons et ombres
Trois rayons, deux ombres. Les cartes utilisent le grand rayon. Les ombres sont teintées dans la couleur du texte, jamais grises.
Composants de base
Boutons en pilule avec poussée physique au clic. Badges sémantiques : fond doux, texte profond, point de couleur pleine. Étiquette au-dessus du champ, erreur en dessous.
Boutons
Badges
Mascotte
Un rendu 3D détouré, pas un SVG. Cinq humeurs et quatre poses, une seule référence de personnage. Elle respire en permanence, cligne des yeux au format logo, penche au survol et s'écrase au clic. Tout s'arrête si le système demande moins de mouvement.
