Codrlabs

Charte graphique

L'identité visuelle officielle, le système de couleurs, la typographie et les lignes directrices de ton de Codrlabs. Utilisez cette page comme référence pour toutes les communications de la marque.

Symbole et logotype

Le logo de Codrlabs est formé de quatre formes géométriques (deux cercles et un arc qui les relie), associées à un logotype sur mesure. Utilisez uniquement les fichiers SVG fournis : ne recréez jamais le logo en texte.

Symbole

Utilisé seul pour les favicônes, les icônes d'application et les avatars.

Fond clair

Fond sombre

Logotype principal

Logotype CODRLABS. Par défaut pour tout le matériel de la marque. À utiliser dans les en-têtes, les pieds de page et les espaces restreints.

Fond clair

Fond sombre

Typographie du logo

Code Next — Thin (100)

La graisse fine crée un contraste élégant avec LABS en gras. Majuscules seulement.

Code Next — ExtraBold (800)

La graisse maximale ancre le logo. C'est l'accent visuel du nom de la marque.

Palette de couleurs

Quatre couleurs de marque qui forment une palette vive et dynamique. Le contraste entre le magenta et le turquoise ancre l'abricot et l'orange brûlé, plus chaleureux, dans un système harmonieux.

MagentaAccent principal

#AC0C90RGB(172, 12, 144)C: 0 M: 93 Y: 17 K: 33PMS 239 C

Énergie, passion et créativité. L'élément le plus audacieux de la palette : pour les appels à l'action forts, les points saillants et les moments clés de l'interface.

TurquoiseConfiance et appels à l'action

#00BFAFRGB(0, 191, 175)C: 100 M: 0 Y: 8 K: 25PMS 3265 C

Calme, confiance et fiabilité. La principale couleur interactive : pour les boutons, les liens et les éléments interactifs.

Orange brûléAccent de profondeur

#E37343RGB(227, 115, 67)C: 0 M: 49 Y: 70 K: 11PMS 716 C

Passion, énergie et intensité. Fait le lien entre le magenta et l'abricot dans les dégradés : ajoute de la profondeur et attire l'attention.

AbricotAccent chaleureux

#F6BD51RGB(246, 189, 81)C: 0 M: 23 Y: 67 K: 4PMS 1225 C

Soleil et optimisme. Apporte chaleur et positivité : pour les compteurs de statistiques, les points saillants et les tons chauds des dégradés.

Dégradé de la marque

CSS (diagonale)

linear-gradient(135deg,
#AC0C90 0%, #E37343 50%, #F6BD51 100%)

CSS (horizontal)

linear-gradient(to right,
#AC0C90 0%, #E37343 50%, #F6BD51 100%)

Utilisation

Bannières, arrière-plans de section et séparateurs décoratifs seulement. Jamais sur les boutons ni sur le texte courant.

Palette neutre

Gris foncé

#282828

Texte principal

Gris clair

#D3D3D3

Texte secondaire, séparateurs

Blanc cassé

#F7F7F7

Arrière-plans, surfaces

Blanc pur

#FFFFFF

Arrière-plan principal

Bleu marine foncé

#14142B

Arrière-plans sombres, pied de page

Palettes des produits

Chaque produit a sa propre identité de couleurs, distincte de la palette de Codrlabs. Elle sert uniquement dans l'interface du produit et dans son matériel de marketing.

Frand

#7D39EDPrincipale

#8B5CF6Secondaire

#10B982Accent

Maestronom

#6B46C1Principale

#A855F7Secondaire

#22F3DFAccent

SpeakshApp

#6366F1Principale

#3B82F6Secondaire

#22F2EEAccent

Système typographique

Deux polices : Plus Jakarta Sans pour les titres et les libellés de l'interface, DM Sans pour le texte courant. Ensemble, elles allient autorité et chaleur.

Affichage / Titres / Interface

Plus Jakarta Sans

Graisses : 400 · 500 · 600 · 700 · 800

H1Marque

4.5rem / 800

H2Nos services

2.5rem / 700

H3Nos services

1.5rem / 700

LabelTITRE DE SECTION

0.65rem / 700
MAJUSCULES · espacement 0,2 em

Texte courant / Interface

DM Sans

Graisses : 300 · 400 · 500

Texte léger : pour les sous-titres d'en-tête et les paragraphes d'introduction.

Texte normal : par défaut pour le contenu descriptif, le texte des cartes et les textes plus longs du site.

Moyen, petit : pour les liens de navigation, les étiquettes, les légendes et les métadonnées.

Règles d'utilisation du logo

Une utilisation cohérente du logo renforce la reconnaissance. Suivez ces règles dans tout le matériel de la marque.

À FAIRE

Utiliser le logo complet uniquement sur fond blanc ou sombre

À FAIRE

Garder autour du logo, des quatre côtés, un espace libre égal à la hauteur du « C »

À FAIRE

Garder le logo à au moins 120 px de large en numérique, ou 30 mm à l'impression

À FAIRE

Utiliser le dégradé de la marque (Magenta → Orange brûlé → Abricot) pour les éléments décoratifs

À FAIRE

Utiliser le turquoise comme couleur principale des appels à l'action sur tous les points de contact numériques

À ÉVITER

Placer le logo sur une photo chargée sans fond de couleur unie

À ÉVITER

Étirer, incliner, faire pivoter le logo ou en modifier les proportions de quelque façon que ce soit

À ÉVITER

Utiliser des couleurs non approuvées ou ajouter des ombres portées, des contours ou des effets au logo

À ÉVITER

Utiliser le dégradé de la marque comme fond de bouton ou couleur de texte courant : il est uniquement décoratif

Ressources de la marque

Téléchargez la trousse complète de la marque : logos, couleurs et lignes directrices.

L'essentielPour commencer : logo, favicône et couleurs Trousse de logosTous les logos, toutes les tailles Trousse complèteTout, en une seule trousse

Besoin de quelque chose de précis ?

Logos · Vectoriels et matriciels

Paquet SVG~40 Ko · 5 fichiers PNG 512 px~160 Ko · 5 fichiers PNG 1024 px~420 Ko · 5 fichiers Médias sociaux~665 Ko · 3 fichiers

Couleurs · Code et outils de design

Variables CSS Variables SCSS Jetons de design (JSON)Nuancier Adobe (.ase)

Favicônes · Navigateur et mobile

Toutes les favicônes~112 Ko · 4 fichiers

Lignes directrices · Identité visuelle

Charte graphique (.md, en anglais)

Charte graphique

Symbole et logotype

Symbole

Logotype principal

Typographie du logo

Palette de couleurs

Dégradé de la marque

Palette neutre

Palettes des produits

Système typographique

Règles d'utilisation du logo

Présence sociale et numérique

Ressources de la marque