Fichiers et règles de marque

Logotype et symbole

Deux fichiers portent toute l'identité : le logotype en minuscules et le symbole prune. Chaque téléchargement reprend le tracé utilisé dans le produit, sans modification.

Logotype sombre

Sur fond clair. En minuscules, « startup » en graisse normale et « kit » en gras, dans un seul tracé.

Logotype blanc

Sur fond sombre et sur les photographies. Même tracé, en blanc.

Le damier indique la transparence. Il ne figure pas dans les fichiers.

Symbole

La seule version vectorielle à plat du symbole : lettres #fafafc sur fond prune. Utilisez-le lorsque le logotype serait trop petit.

SVG
PNG

Icône de l'application

Icône du navigateur et de l'écran d'accueil. Image matricielle uniquement ; à utiliser dans les annuaires d'applications, pas en impression.

PNG

Carré

Recadrage circulaire

Avatar

Le symbole entouré d'une marge pour que les lettres restent lisibles après un recadrage circulaire. Pour les photos de profil.

PNG

Préserver sa lisibilité

Laissez de chaque côté un espace libre égal à la moitié de la hauteur du logotype.

Sombre sur fond clair, blanc sur fond sombre. Aucune autre couleur.
Largeur minimale : 96 px à l'écran, 24 mm à l'impression. En dessous, utilisez le symbole.

Jamais

Changer les couleurs
Étirer ou faire pivoter
Ajouter un contour, une ombre, un halo ou un dégradé
Recomposer avec Inter ou une autre police
Placer dans un cadre autre que le carré propre au symbole

Tout télécharger Tous les fichiers de cette page dans une archive ZIP.

Couleurs

Sept rôles chromatiques couvrent toute l'interface. Sur le site, rien n'est plus saturé que le symbole prune et les deux couleurs des tracés.

Cliquez sur un échantillon pour copier son code hexadécimal. Le tracé indique la valeur présente dans votre presse-papiers.

La gamme mauve

Chaque gris du site porte une nuance de mauve. Le niveau 50 sert de fond de page, le 100 à la navigation et aux surfaces en relief, le 600 au texte secondaire, le 950 au texte le plus sombre.

Mode sombre

La gamme s'inverse. Le fond devient mauve 950, le texte #f8f6f8, et le bouton principal prend un fond mauve 300 avec un texte sombre. Le surligneur et le soulignement passent tous deux à #f7b93b.

Une couleur à laisser de côté

L'indigo #4f46e5 reste visible sur des vêtements dans d'anciennes photos. Il précède cette palette et ne fait plus partie des couleurs de la marque. Ne le prélevez pas dans une photographie.

Typographie

Deux polices libres. Fraunces pour la ligne qui doit sembler écrite à la main, Inter pour tout ce qui doit se lire vite.

Votre équipe voit à qui revient la prochaine action.

Fraunces

100–900 variable, optical size 9–144

Affichage. Titre principal et titres de section, graisse 480, taille optique 144, WONK activé.

font-family: "Fraunces", ui-serif, Georgia, serif;
font-weight: 480;
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
line-height: 1.08;
letter-spacing: -0.005em;

Jordan consulte l'étape de sa candidature et répond à l'offre dans le portail candidat.

Inter

100–900 variable

Texte et interface. Corps en 400, boutons et libellés en 500, titres des collages en 600 avec −0.03em d'espacement.

font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "liga", "cv02", "cv03", "cv04", "cv11";
font-weight: 400;

rsms.me/inter

Le code et les valeurs hexadécimales utilisent les polices à chasse fixe du système. Les deux polices sont sous licence SIL Open Font License 1.1. Téléchargez-les depuis leurs projets d'origine ; nous ne redistribuons pas les fichiers.

Boutons

Un bouton principal, une seule forme. Sombre sur fond clair, mauve pâle sur fond sombre. Le bouton d'inscription porte toujours le libellé « Essayez gratuitement ».

Essayez gratuitement Sur fond clair

Fond: #0c090c
Texte: #ffffff
Au survol: #2a212c

Essayez gratuitement Sur fond sombre

Fond: #d7d0d7
Texte: #0c090c
Au survol: #f3f1f3

Arrondi: 9999px
Marge intérieure: 12px 20px
Police: Inter 15px / 500 / 24px
Écart avec l'icône: 8px

Tracés

Une signature propre à Kit. Dans un titre, le surlignage fait ressortir l'idée forte et un trait manuscrit souligne chaque action. Les deux sont dessinés en CSS ; le texte reste du texte.

Exemple tiré de la page d'accueil

Jordan envoie un CV et suit sa candidature. Votre équipe voit à qui revient la prochaine action.

Le code HTML

Jordan <em>envoie un CV</em> et <em>suit sa candidature</em>. Votre équipe voit <mark>à qui revient la prochaine action</mark>.

Un seul surlignage par titre, toujours sur l'idée forte
Souligner les verbes, jamais les noms
Réserver ces tracés aux titres. Jamais dans le corps du texte, les boutons ou la navigation
Surligneur #fde68a, soulignement #b45309. Les deux passent à #f7b93b en mode sombre

Images

Deux types d'images, chacun avec sa fonction. Les visuels pour les réseaux sociaux évoquent le papier découpé. Les couvertures du blog sont des photographies.

Visuels pour les réseaux sociaux

Collage de papier découpé sur un fond avoine chaleureux, couches de mauve poudré et de prune profond, logotype noir en haut à gauche. Des mains illustrées accomplissent une tâche concrète : tenir une carte, déplacer une tuile.

Photographies du blog

Photos éditoriales à l'esthétique de la pellicule 35 mm, personnes portant des vêtements startupkit, lumière chaude. Le logo reste discret, sur un vêtement plutôt que sur un mur.

À faire

Des mains en manches de maille prune qui accomplissent une vraie tâche
Du papier couleur avoine, des couches de mauve poudré et de prune profond, un grain fin
Le logotype noir en haut à gauche, sans autre texte

À éviter

Des mains flottantes décoratives ou une poignée de main
Du texte d'interface inventé ou de fausses captures d'écran
Le logo comme sujet principal d'une photo

Ton

Cinq règles pour écrire sur Kit. Le site suit les mêmes règles.

Nommez l'élément concret, pas le bénéfice: Montrez quelque chose qui existe. Un lien, une ligne du grand livre, une colonne CSV, un compteur en cours.
Reconnaissez une vraie limite: Une limite qu'un concurrent préférerait taire rend les autres phrases plus crédibles.
Commencez par les personnes sans compte: Commencez par la personne sans compte : candidat, chercheur, participant ou auditeur.
Évitez les mots de catégorie: Évitez les mots creux comme plateforme, solution, fluide, optimiser, robuste, levier, de bout en bout, puissant ou propulsé par l'IA.
Une phrase, une idée: Coupez la proposition qui répète la précédente. Employez toujours la casse de phrase.

Nom

Écrire

Kit dans une phrase
startupkit lorsqu'un seul mot doit nous rendre trouvables (startupkit.app, @StartupKit_app)
startupkit en minuscules dans le logotype