# Fichiers et règles de marque
Téléchargez le logotype, le symbole et l'icône startupkit, copiez les couleurs et les réglages typographiques exacts, et découvrez comment les utiliser. Également disponible en Markdown pour les agents.
Téléchargez le logotype, copiez une couleur et ne changez rien. Fichiers, couleurs et réglages typographiques pour toute personne qui présente Kit sur une page : article de partenaire, diapositive de conférence, dossier de presse ou consigne destinée à un agent.
## 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é.
- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-454577a0.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-ffa3d255.png
- PNG sur fond blanc: https://startupkit.app/assets/brand/startupkit-wordmark-ink-on-white-d8cc7a7f.png
### Logotype blanc
Sur fond sombre et sur les photographies. Même tracé, en blanc.
- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-14002263.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-92cc5bff.png
- PNG sur fond sombre: https://startupkit.app/assets/brand/startupkit-wordmark-white-on-ink-4b3b0d48.png
### Symbole
La seule version vectorielle à plat du symbole : lettres #fafafc sur fond prune. Utilisez-le lorsque le logotype serait trop petit.
- SVG: https://startupkit.app/assets/brand/startupkit-mark-2eff5e07.svg
- PNG: https://startupkit.app/assets/brand/startupkit-mark-95ae2aac.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: https://startupkit.app/assets/brand/startupkit-app-icon-040ff0d0.png
### Avatar
Le symbole entouré d'une marge pour que les lettres restent lisibles après un recadrage circulaire. Pour les photos de profil.
- PNG: https://startupkit.app/assets/brand/startupkit-avatar-dd9d3658.png
### Tout télécharger
Tous les fichiers de cette page dans une archive ZIP. https://startupkit.app/assets/brand/startupkit-brand-assets-6ba93399.zip
### Préserver sa lisibilité
- Laissez de chaque côté un espace libre égal à la moitié de la hauteur du logotype.
- Largeur minimale : 96 px à l'écran, 24 mm à l'impression. En dessous, utilisez le symbole.
- Sombre sur fond clair, blanc sur fond sombre. Aucune autre couleur.
- Jamais: Changer les couleurs
- Jamais: Étirer ou faire pivoter
- Jamais: Ajouter un contour, une ombre, un halo ou un dégradé
- Jamais: Recomposer avec Inter ou une autre police
- Jamais: Placer dans un cadre autre que le carré propre au symbole
## 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.
| Mode clair | Hex | Mode sombre | Role |
|---|---|---|---|
| Encre | `#0c090c` | `#f8f6f8` | Texte, bouton principal et logotype sur fond clair |
| Papier | `#fafafa` | `#0c090c` | Fond de page |
| Brume | `#f3f1f3` | `#1d161e` | Navigation et surfaces en relief |
| Atténué | `#594c5b` | `#a89ea9` | Texte secondaire et deuxième ligne de l'en-tête |
| Prune | `#3b0f46` | `#3b0f46` | Symbole, avatar et touches de couleur dans les e-mails de la plateforme |
| Surligneur | `#fde68a` | `#f7b93b` | Mise en évidence de l'idée forte d'un titre |
| Stylo | `#b45309` | `#f7b93b` | Soulignement manuscrit sous une action |
### 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.
- mauve-50: `#fafafa`
- mauve-100: `#f3f1f3`
- mauve-200: `#e7e4e7`
- mauve-300: `#d7d0d7`
- mauve-400: `#a89ea9`
- mauve-500: `#79697b`
- mauve-600: `#594c5b`
- mauve-700: `#463947`
- mauve-800: `#2a212c`
- mauve-900: `#1d161e`
- mauve-950: `#0c090c`
### 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.
### Fraunces (100–900 variable, optical size 9–144)
Affichage. Titre principal et titres de section, graisse 480, taille optique 144, WONK activé.
```css
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;
```
- GitHub: https://github.com/undercasetype/Fraunces
- Google Fonts: https://fonts.google.com/specimen/Fraunces
### 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.
```css
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: https://rsms.me/inter/
Le code et les valeurs hexadécimales utilisent les polices à chasse fixe du système. `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
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 ».
- Arrondi: 9999px
- Marge intérieure: 12px 20px
- Police: Inter 15px / 500 / 24px
- Écart avec l'icône: 8px
- Sur fond clair: fond `#0c090c`, texte `#ffffff`, au survol `#2a212c`
- Sur fond sombre: fond `#d7d0d7`, texte `#0c090c`, au survol `#f3f1f3`
## 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.
```html
Jordan envoie un CV et suit sa candidature. Votre équipe voit à qui revient la prochaine action.
```
- 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.
- https://startupkit.app/assets/opengraph/hiring-20ba841b.png
- https://startupkit.app/assets/opengraph/home-4cb8c4db.png
- https://startupkit.app/assets/opengraph/trust-925ce79b.png
### 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.
- https://startupkit.app/fr/blog-images/founder-led-hiring-without-recruiter/cover.jpg
- https://startupkit.app/fr/blog-images/hire-specialists-not-generalists-lean-teams-2026/cover.jpg
- À faire: Des mains en manches de maille prune qui accomplissent une vraie tâche
- À faire: Du papier couleur avoine, des couches de mauve poudré et de prune profond, un grain fin
- À faire: Le logotype noir en haut à gauche, sans autre texte
- À éviter: Des mains flottantes décoratives ou une poignée de main
- À éviter: Du texte d'interface inventé ou de fausses captures d'écran
- À éviter: 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
- Écrire: startupkit lorsqu'un seul mot doit nous rendre trouvables (startupkit.app, @StartupKit_app)
- Écrire: startupkit en minuscules dans le logotype
- Jamais: Startup Kit
- Jamais: KIT
- Jamais: Kit.app
- Jamais: StartupKit dans une phrase
## Pour les agents
La même page en Markdown, avec chaque code hexadécimal et chaque réglage typographique. Donnez son adresse à un agent au lieu de décrire la marque vous-même. https://startupkit.app/fr/brand/llms.txt renvoie le même fichier.
Le logotype et le symbole startupkit identifient Kit. Utilisez-les pour faire référence à Kit, sans laisser entendre que Kit recommande votre produit.
[Marque](https://startupkit.app/fr/brand)