Jantix
Brand Book.
Charte graphique officielle — identité visuelle, couleurs, typographie & guidelines de la marque Jantix.
Identité de Marque
Qui est
Jantix ?
Un partenaire stratégique qui comprend les enjeux métier, identifie les freins et construit des solutions à impact réel.
Positionnement
Jantix n'est pas un simple prestataire technique. Nous comprenons les enjeux métier, identifions les points de friction et construisons des solutions qui génèrent une croissance mesurable.
Mission
Aider les PME et commerces à se digitaliser et automatiser leurs processus avec des solutions concrètes, accessibles et adaptées à leur réalité métier.
Nos Valeurs
Professionnel
Précision, fiabilité et résultats. Nous tenons nos promesses et respectons les délais.
Humain
Empathie et clarté. Nous parlons le langage de nos clients, sans jargon technique.
Innovant
Toujours une étape d'avance. Nous utilisons la technologie pour simplifier.
Promesse de Marque
"Le digital ne devrait pas être un privilège. Chaque PME mérite les meilleures solutions — concrètes, accessibles, et adaptées à sa réalité."
Voix & Ton
Comment on
parle.
La voix de Jantix est celle d'un expert qui s'assoit à la table du client pour résoudre des problèmes, pas pour impressionner.
5 Principes
Direct & Essentiel
Allez droit au but. Chaque mot doit apporter de la valeur.
Concret & Bénéfices
Parlez de résultats métier, pas de fonctionnalités.
Accessible
Le langage technique est réservé à l'interne.
Confiant mais Humble
Nous maîtrisons notre sujet, mais restons à l'écoute.
Chaleureux
Accessible, bienveillant et professionnel en toutes circonstances.
Exemples concrets
Nous développons des solutions digitales innovantes
On digitalise votre activité, concrètement.
Notre stack technologique de pointe garantit la scalabilité
Votre outil grandira avec votre activité.
Nous accompagnons les startups dans leur transformation
On aide les PME à gagner du temps et à vendre plus.
Devis sur demande
Devis gratuit sous 48h — adapté à votre budget.
Verbes de Marque
Palette de Couleurs
Obsidian
Elite.
Une palette conçue pour évoquer profondeur, technologie et haut de gamme. Cliquez sur une couleur pour copier son HEX.
Primaire
Accentuation
Surfaces
Texte
Gradients de Marque
Typographie
Les mots
ont une forme.
Space Grotesk pour l'impact. JetBrains Mono pour la précision. Une hiérarchie claire à chaque niveau.
Display / Titres
Aa
Space Grotesk
Weights : 400 · 500 · 600 · 700 · 800
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Code / Mono
<>
JetBrains Mono
Weights : 400 · 500 · 600 · 700
const brand = "Jantix";
const year = 2025;
export { brand, year };Échelle Typographique
Brand Book
Titre Principal
Titre de Section
Sous-section
Texte d'introduction large pour les sections importantes.
Corps de texte standard pour descriptions et contenus.
Labels, métadonnées, textes secondaires.
letter-spacing: -0.04emSur tous les titres H1–H3 pour un rendu premium compact.
line-height: 1.1–1.2Sur les titres. 1.6–1.75 sur le corps de texte.
UPPERCASE + trackingEyebrows en uppercase avec letter-spacing: 0.2em.
font-weight ≥ 600Dans la navigation et les labels importants.
Composants UI
Effets
signatures.
Glassmorphism, Tilt 3D, Shimmer, Glows animés — les effets visuels qui définissent l'expérience Jantix.
Glassmorphism
Glass Subtil
Fond transparent + flou de fond + bordure subtile.
Glass Gradient
Gradient subtil pour plus de profondeur visuelle.
Glass Teinté
Teinte de couleur primaire pour les éléments clés.
Tilt 3D
Survolez la carte pour voir l'effet de perspective.
Tilt 3D Card
Perspective 3D réactive au mouvement de la souris.
Boutons & Shimmer
Glows & Halos
Glow Primaire
Halo coloré autour de l'élément au hover.
Glow Cyan
Halo coloré autour de l'élément au hover.
Glow Violet
Halo coloré autour de l'élément au hover.
Do & Don'ts
Les règles
à respecter.
Directives pour l'équipe afin de maintenir la cohérence visuelle et éditoriale de la marque Jantix.
À faire
- →Utiliser les gradients de marque sur les mots-clés importants dans les titres
- →Accentuer les chiffres et métriques avec les couleurs primaires ou cyan
- →Maintenir le dark theme sur toutes les pages
- →Conserver une hiérarchie claire : 1 action principale par section
- →Utiliser les eyebrows avant chaque titre de section
- →Espacer généreusement — le silence est un élément de design
À ne pas faire
- ✗Ne jamais utiliser de fond blanc ou clair
- ✗Ne jamais mélanger plus de 2 couleurs d'accent dans un même composant
- ✗Ne jamais déformer ou compresser le logo
- ✗Ne jamais utiliser font-weight inférieur à 400 dans l'interface
- ✗Ne pas surcharger une section de CTAs (maximum 2)
- ✗Ne pas ajouter d'effets décoratifs qui nuisent à la lisibilité
Règles d'Or
Couleurs
- ·Jantix Blue réservé aux actions principales
- ·Mint réservé aux signaux positifs
- ·Cyan réservé aux accents de mise en valeur
- ·Max. 2 couleurs d'accent par section
Typographie
- ·Space Grotesk pour tous les titres
- ·JetBrains Mono pour le code
- ·letter-spacing: -0.04em sur H1–H3
- ·font-weight ≥ 600 en navigation
Espacement
- ·Padding horizontal : 1.5rem mobile
- ·Gap sections : 8rem desktop
- ·Générer de l'espace blanc
- ·Éviter la surcharge visuelle
Effets
- ·Glassmorphism pour les cartes
- ·Tilt 3D au hover des éléments
- ·Glows flous, jamais nets
- ·Animations fluides et subtiles
Logo & Variantes
L'identité
en une image.
Le logo Jantix est la pierre angulaire de la marque. Son usage doit rester cohérent et respectueux des règles ci-dessous.
Fond blanc
Usage principal — documents, présentations, print
Fond sombre — version blanche
Interfaces dark, nav, emails sombres — logo en blanc
← zone de protection →
Zone de protection
Espace minimum autour du logo — jamais enfreint par d'autres éléments
Tailles minimales
120px
Hero / Splash
64px
Desktop nav
40px
Mobile nav
28px
Favicon / App
Téléchargements
Logo SVG
Vectoriel · scalable · fond transparent
Logo PNG — Bleu
Fond transparent · fonds clairs
Logo PNG — Blanc
Fond transparent · fonds sombres
À faire
- →Respecter les proportions originales
- →Laisser un espace de protection égal à la hauteur du "J"
- →Utiliser sur fond blanc ou fond sombre #04040C
- →Maintenir une taille minimale de 120px en digital
À ne pas faire
- ✗Ne pas déformer ou étirer le logo
- ✗Ne pas modifier les couleurs officielles
- ✗Ne pas ajouter d'effets (ombres, dégradés, contours)
- ✗Ne pas placer sur un fond qui réduit le contraste
- ✗Ne pas faire pivoter le logo
- ✗Ne pas recadrer ou masquer une partie du logo
Espacement & Grille
Le silence
est du design.
Une grille cohérente et un espacement généreux sont la base d'une interface premium. Base : 4px.
Échelle d'espacement
Grille — 12 colonnes desktop
Breakpoints
sm640pxMobile paysage / petites tablettesmd768pxTabletteslg1024pxDesktop — layout 2 colonnesxl1280pxLarge desktop — max-width container2xl1536pxUltra-wide (non utilisé)Règles container
max-width: 1280pxLargeur maximale du contenu
px: 1.5rem (mobile)Padding horizontal sur mobile
px: 2rem (desktop)Padding horizontal sur desktop
py: 8rem (sections)Espacement vertical entre sections
Iconographie
Lucide
Icons.
Librairie officielle Jantix — lucide.dev · MIT license · 1500+ icônes · Style outline uniquement.
Exemples — stroke-width 1.75 · 22px
Tailles standard
Spécifications techniques
viewBox0 0 24 24StyleOutline (stroke) — jamais solid/filledstroke-width1.75 (cards, features) · 2 (navigation, actions)stroke-linecaproundstroke-linejoinroundfillnoneCouleurToujours currentColor — jamais hardcodéeRègles d'usage
Usage correct
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <!-- path de l'icône --> </svg>
À ne pas faire
<i class="icon-calendar"></i> <svg fill="#4361EE">...</svg> <img src="icon.svg" />
Exemples d'application
La marque
en action.
Signature email documentée ici. Les autres applications vivent dans le repo jantix-web — référencées ci-dessous.
01 — Signature Email
Documenté iciFormat HTML table-based compatible tous clients email. Deux templates selon le contexte d'envoi.
Template A — Personnelle
Mame Diarra Laye Djite Fondatrice & CEO · Jantix +221 76 230 14 83 |
Cold outreach, partenariats, clients, investisseurs.
Template B — Équipe
L'équipe Jantix On est là pour vous aider. |
Emails automatisés, confirmations, support générique.
Largeur max
520px
Format
HTML table-based
Police
Helvetica Neue (système)
Compatibilité
Gmail · Outlook · Apple Mail
02 — Autres applications
Repo jantix-webCarte OG / Réseaux sociaux
Existescripts/og-image.htmljantix-webEn-têtes de page (Hero)
Livejantix.techjantix-web