Design system

Styleguide

Tokens, typographie et composants d'In Pulse. Utilisez le bouton lune / soleil ci-dessus pour vérifier chaque composant dans les deux thèmes : tout le nuancier ci-dessous se met à jour en direct.

Palette

Les aplats reflètent le thème actif. Basculez le thème pour contrôler le rendu sombre.

Fonds, surfaces, encre & filets

--couleur-fond

--couleur-fond-2

--couleur-surface

--couleur-surface-2

--couleur-encre

--couleur-texte-secondaire

--couleur-texte-discret

--couleur-filet

--couleur-filet-fort

Accent or

--couleur-accent

--couleur-accent-hover

--couleur-accent-texte

--couleur-accent-fond

États

--couleur-succes

--couleur-attention

--couleur-danger

--couleur-info

Profils dirigeant

--profil-pilote

--profil-visionnaire

--profil-batisseur

--profil-stratege

Typographie

Titres en Fraunces (--police-titre), texte en Inter (--police-texte).

Piloter, décider, avancer

h1 · --taille-3xl

Un panel d'experts à vos côtés

h2 · --taille-2xl

Quatre sessions par an

h3 · --taille-xl

Confidentialité absolue

h4 · --taille-lg

Chapeau d'introduction : In Pulse réunit autour de vous les expertises qui manquent à votre comité de direction.

--taille-md

Texte courant : vos décisions engagent votre entreprise. In Pulse vous apporte le recul, la méthode et les expertises pour les prendre sereinement.

--taille-base

Texte d'appui : recommandations collégiales, suivi des chantiers, alertes en 48 heures.

--taille-sm

Mention : données hébergées en France, circuit fermé.--taille-xs

Espacements

Échelle unique, du plus serré au plus aéré.

--espace-2xs · 4px

--espace-xs · 8px

--espace-sm · 12px

--espace-md · 16px

--espace-lg · 24px

--espace-xl · 32px

--espace-2xl · 48px

--espace-3xl · 72px

--espace-4xl · 96px

Boutons

.bouton et ses variantes.

Cartes

.carte, .carte--reliee (survol), .carte--or, .carte--teintee.

Carte simple

En cours

Fond surface, filet fin, ombre douce. La structure de base de tous les panneaux de l'app.

Pied de carte - mise à jour le 10 juin 2026

Carte reliée

Variante interactive : survolez-la pour voir l'élévation discrète.

Carte soulignée d'or

Un filet or en tête pour les contenus mis en avant.

Carte teintée

Surface légèrement teintée pour les encadrés secondaires.

Badges, pastilles, tags & étiquettes

.badge (états + profils), .pastille, .tag, .etiquette.

Badges d'état

Neutre Appliquée En cours Critique À lancer Premium

Badges de codification d'urgence (U1 → U4)

Échelle canonique des problématiques : .badge--u1 (critique, < 7 j) → .badge--u4 (structurel, > 3 mois). Réutilisent les paires de tokens d'état (contraste AA validé en clair et sombre).

U1 · Critique U2 · Élevé U3 · Modéré U4 · Structurel

Badges de profil dirigeant

Pilote Visionnaire Bâtisseur Stratège

Pastilles seules

Tags & étiquette

Trésorerie
Recrutement
Croissance
Digital

Étiquette de section

Filets & séparateurs

.filet, .filet--or, .separateur-orne.

Formulaires

.formulaire, .champ, .champ__saisie, .case, .carte-option, messages d'aide et d'erreur.

Votre nom

Tel qu'il apparaîtra sur votre espace.

Adresse e-mail (professionnelle)

Téléphone

Veuillez saisir un numéro complet.

Effectif de l'entreprise

Votre situation

Votre priorité du semestre

Sécuriser la trésorerie Recruter et fidéliser Développer le chiffre d'affaires

J'accepte d'être recontacté par In Pulse.

Carte-option (questionnaire)

Je tranche vite, quitte à ajuster ensuite. Je consulte mon entourage avant de décider. Je repousse tant que je n'ai pas tous les chiffres.

Tableau de prix

.tableau-prix, .carte-prix, .carte-prix--mise-en-avant.

Optimum

4 800 € / an

4 sessions stratégiques par an
Panel de 2 experts attitrés
Diagnostic dirigeant annuel
Accès à la plateforme

Choisir Optimum

Recommandée

Premium

7 200 € / an

4 sessions stratégiques par an
Panel de 3 à 4 experts attitrés
Diagnostic dirigeant + suivi des chantiers
Alertes : CODIR d'urgence sous 48 h
Accès complet à la plateforme

Choisir Premium

Client CODIR

4 800 € / an

Vous siégez comme expert au CODIR d'un autre dirigeant d'In Pulse
Vous bénéficiez de votre propre CODIR en retour
La réciprocité d'In Pulse : chacun donne, chacun reçoit
Tous les avantages de l'offre Premium inclus

Choisir Client CODIR

Mission ponctuelle

Booster

Sur mesure selon la mission

Accompagnement ciblé sur un besoin urgent et sensible
Mobilisation rapide des experts pertinents
Format court et intensif, hors adhésion annuelle
Chiffrage sur mesure selon la charge de travail

Demander un chiffrage

Progression & jauges

.barre-progression (+ variantes de couleur), .jauge.

Projet de seconde boutique 35 %

Recrutement du second de fournil 60 %

Étapes numérotées

.etapes, .etapes--horizontales : le déroulé d'un CODIR en 3 temps.

Préparation

Vous partagez vos enjeux ; le panel prépare l'ordre du jour et les éléments de pilotage.
Session

1 h 30 à 2 h de travail collégial avec vos experts, en visioconférence sécurisée.
Recommandations

Des décisions claires, des actions datées, un suivi dans votre espace.

Timeline

.timeline avec points colorés par état.

12 juin 2026

Alerte trésorerie levée

Tension liée à l'investissement du nouveau four. CODIR d'urgence planifié le 14 juin.
14 avril 2026

CODIR trimestriel

Quatre recommandations collégiales, trois chantiers ouverts.
Janvier 2026

Entrée chez In Pulse

Diagnostic dirigeant initial et constitution du panel attitré.

Stats & chiffres clés

.stat, .grille-stats.

73 %

des dirigeants de PME se disent seuls face à leurs décisions

4

sessions stratégiques par an avec votre panel

48 h

pour réunir un CODIR d'urgence après une alerte

12

experts au service de votre pilotage

Avatars

.avatar, .avatar--or, .avatar--grand, .rangee-avatars.

Bascule de thème

.bascule-theme + attribut data-bascule-theme : main.js gère le clic, l'aria-label et la mémorisation (localStorage, clé cdd-theme).

Apparition au défilement

Classe .reveler : opacité et translation douces à l'entrée dans l'écran (respecte prefers-reduced-motion).

Cette carte est apparue en douceur

main.js lui a ajouté la classe .visible à son entrée dans la zone visible.