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 fondations Voir les applications

Par GregoryFormateur · coach · architecte logiciel

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#00051AFonds sombres

Bleu profond#050032Titres sur clair

Encre#1A1F36Texte courant

Étincelle#F98510Action et accent

Blanc#FFFFFFSurfaces 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 1Blanc#FFFFFFSurfaces, texte sur nuit

Texte 1Encre#1A1F36Texte courant

Arrière-plan 2Papier#F3EFE8Fonds alternés, encadrés

Texte 2Nuit#00051AFonds sombres, bandeaux

Accentuations

Accentuation 1Étincelle#F98510Action, mise en avant, série principale

Accentuation 2Bleu profond#050032Titres et formes sur clair

Accentuation 3Brume foncée#6A7BA3Contours marqués, série secondaire

Accentuation 4Étincelle claire#FFB570Annotations et repères sur nuit

Accentuation 5Brume#A9B6D0Texte secondaire sur nuit

Accentuation 6Étincelle foncée#A34800Texte orange sur clair

Lien hypertexte : Bleu profond #050032Lien 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 principale Action secondaire Lien textuel

Templates : frise verticale, image Open Graph. Atelier : images de partage

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';

<Button href="/contact">Parlons de votre projet</Button>
<Card title="Votre projet">Une description propre au site.</Card>

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

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

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';
---
<header class="is-night">
  <div class="header-inner">
    <SiteBrand name="Catalyseur Dev" href="/" symbol="/logo-symbole.svg" />
    <nav>...</nav>
  </div>
</header>

/* feuille de style du site */
@import "../../shared/design-system/site-brand.css";
.header-inner { min-height: var(--ds-header-h); }