# Système visuel | Catalyseur Numérique
> Le système visuel de la famille Catalyseur : couleurs, typographie, composants réutilisables et déclinaisons pour Catalyseur Numérique et Catalyseur IA.
Source : https://design.catalyseurnumerique.com/
Système de design · Grégory Borelli
# Plusieurs univers. Un langage commun.
Couleurs, typographies, composants et règles d’usage : découvrez les fondations communes à mes marques, mes sites et mes contenus. Un système partagé que chaque univers décline avec sa propre personnalité.
Explorer les fondationsVoir les applications
**Par Gregory** Formateur · coach · architecte logiciel
GREGORY CATALYSEUR CATALYSEUR NUMÉRIQUE DESIGN SYSTEM UNE IMAGE UNIQUE Explorer Modules Aa Oswald · Roboto Roboto Mono · Caveat un seul symbole 4 polices 5 couleurs composants réutilisables
01 · Fondations
## Le socle partagé
Les valeurs de marque proviennent du document CATALYSEUR IA v1.1. Les rôles sémantiques peuvent changer selon le contexte du site.
**Nuit** #00051A Fonds sombres
**Bleu profond** #050032 Titres sur clair
**Encre** #1A1F36 Texte courant
**Étincelle** #F98510 Action et accent
**Blanc** #FFFFFF Surfaces et texte sur nuit
Affichage et titres Aa Écouter
**Oswald**
Lecture et interface Aa Écouter
**Roboto**
Repères et données Aa Écouter
**Roboto Mono**
Annotation humaine ponctuelle Aa Écouter
**Caveat**
02 · Hors Web
## Couleurs du thème
Pour les présentations, les documents et les graphiques : dix couleurs rangées comme dans le sélecteur de PowerPoint. Quatre couleurs de base pour les fonds et les textes, puis six accents tirés des couleurs les plus utilisées sur les sites : trois orangés et trois bleus, alternés pour garder des séries de graphiques distinctes.
- Arrière-plan 1 : Blanc
- Texte 1 : Encre
- Arrière-plan 2 : Papier
- Texte 2 : Nuit
- Accentuation 1 : Étincelle
- Accentuation 2 : Bleu profond
- Accentuation 3 : Brume foncée
- Accentuation 4 : Étincelle claire
- Accentuation 5 : Brume
- Accentuation 6 : Étincelle foncée
### Fonds et textes
Arrière-plan 1 **Blanc** #FFFFFF Surfaces, texte sur nuit
Texte 1 **Encre** #1A1F36 Texte courant
Arrière-plan 2 **Papier** #F3EFE8 Fonds alternés, encadrés
Texte 2 **Nuit** #00051A Fonds sombres, bandeaux
### Accentuations
Accentuation 1 **Étincelle** #F98510 Action, mise en avant, série principale
Accentuation 2 **Bleu profond** #050032 Titres et formes sur clair
Accentuation 3 **Brume foncée** #6A7BA3 Contours marqués, série secondaire
Accentuation 4 **Étincelle claire** #FFB570 Annotations et repères sur nuit
Accentuation 5 **Brume** #A9B6D0 Texte secondaire sur nuit
Accentuation 6 **Étincelle foncée** #A34800 Texte orange sur clair
Lien hypertexte : Bleu profond #050032 Lien hypertexte visité : Gris encre #5C6276
### Créer le thème dans PowerPoint
- Ouvrir l’onglet Création, puis Variantes, Couleurs et Personnaliser les couleurs
- Saisir les valeurs, Foncé correspondant à Texte et Clair à Arrière-plan
- Nommer le thème « Catalyseur », puis l’enregistrer
- Choisir ensuite les couleurs dans la rangée « Couleurs du thème », jamais en valeur libre
03 · Modules
## Des briques à composer
Les composants Astro acceptent du contenu et des variantes. Leurs styles utilisent les variables sémantiques, modifiables par site ou par section.
Action principaleAction secondaireLien textuel
Templates : [frise verticale](https://design.catalyseurnumerique.com/templates/vertical-history) , [image Open Graph](https://design.catalyseurnumerique.com/templates/image-og) . Atelier : [images de partage](https://design.catalyseurnumerique.com/og/)
Exemple 01
### Une carte claire
Une structure avec un titre et une description, utilisable pour un service, une ressource ou un projet.
Exemple 02
### Une autre histoire
Le contenu appartient au site qui utilise le module. Le composant garde seulement sa présentation.
Exemple 03
### Un accent mesuré
L’orange attire le regard vers l’action essentielle et les petits repères.
import Button from '../../shared/design-system/components/Button.astro';
import Card from '../../shared/design-system/components/Card.astro';
import '../../shared/design-system/tokens.css';
import '../../shared/design-system/components.css';
Une description propre au site.
04 · Applications
## Une base, des expressions
Les signes narratifs du document IA restent propres à cette marque. Catalyseur Numérique emploie la même famille visuelle pour présenter ses activités et ses contenus.
Site principal
### Catalyseur Numérique
Expression éditoriale plus large : chaînes, produit et conférences. Fonds nuit et cartes claires servent à organiser l’offre.
Expression spécialisée
### Catalyseur IA
Atelier pédagogique, nuit quadrillée, annotation manuscrite et étiquettes d’expérience. Ces signes ne sont pas imposés aux autres sites.
Nouvelle expression
### Votre prochain site
Commencer par les tokens communs, puis définir des couleurs de surface, des modules et un ton adaptés à son public.
[Voir Catalyseur Numérique](https://catalyseurnumerique.com/)
05 · En-tête global
## En-tête global : nom du site
Chaque site affiche son symbole suivi de son nom, avec la même typographie, les mêmes tailles et les mêmes espacements. Seul le nom et le symbole changent.
Police Oswald, graisse 600
Casse Majuscules (text-transform), accents conservés
Taille 24 px ordinateur · 22 px tablette (≤ 1023 px) · 20 px mobile (≤ 640 px)
Interligne 1,1
Espacement des lettres 0,02 em
Couleur var(--color-heading), blanc sur fond nuit
Lignes Une seule, sans troncature ni points de suspension
Symbole 40 px (32 px mobile), logo officiel inchangé, aligné verticalement avec le titre
Espace symbole / titre 14 px (12 px mobile)
Hauteur d’en-tête 72 px ordinateur · 64 px mobile (hors bordure)
### Les six noms
Catalyseur Numérique
Catalyseur IA
Catalyseur Biz
Catalyseur Dev
Gregory Borelli
Loribel
### Règles responsive
- La navigation passe en menu mobile avant que le titre soit comprimé : le titre ne change jamais de ligne et n’est jamais tronqué.
- La navigation est alignée à droite, juste avant les outils (thème et menu). Sur mobile, elle devient un panneau pleine largeur ouvert par le bouton de menu.
- Le nom le plus long, « CATALYSEUR NUMÉRIQUE », doit tenir à 375 px avec le thème et le menu.
- Le nom propre au site est conservé : aucun slogan ni sous-titre dans la marque.
### Exemple réutilisable
---
import SiteBrand from '../../shared/design-system/components/SiteBrand.astro';
---
/* feuille de style du site */
@import "../../shared/design-system/site-brand.css";
.header-inner { min-height: var(--ds-header-h); }