Catalyseur NumériqueDesign System
Template · Partage

Image Open Graph

La carte qui accompagne chaque lien partagé : une promesse en deux lignes, un mot en accent et le symbole de la marque. Extrait de Catalyseur IA.

01 · Aperçu

Votre expertise, amplifiée

Exemple tiré de catalyseuria.com, reproduit en HTML et CSS à partir de l’image d’origine.

02 · Règles

Composition

Format

1200 × 630 px, la taille attendue par Open Graph et les cartes sociales

Fond

Nuit #00051A avec un quadrillage discret, sans dégradé ni image

Marque

Trait orange puis nom en capitales Oswald, en haut à gauche

Titre

Deux lignes en Oswald grasse, un seul mot en orange marqué par des astérisques

Annotation

Caveat orange clair, légèrement inclinée, reliée au titre par une flèche courbe

Publics

Liste en Roboto séparée par des points médians, sous le titre, sans domaine

Symbole

Logo de la marque à droite, centré sur le titre, sans cadre

Échelle

Mesures en unités de la carte : rendu identique à toute largeur

Découpe

Repères facultatifs (cropMarks) dans la marge, hors de l’image capturée

03 · Utilisation

Exemple réutilisable

Le composant charge lui-même sa feuille de style. Pour un site, déclarer l’image dans src/config/og.ts : elle apparaît dans la galerie et pnpm og la capture en PNG.

---
import OgImage from '../../shared/design-system/components/OgImage.astro';
---
<OgImage
  brand="Catalyseur IA"
  title={['Votre expertise,', '*amplifiée* par l’IA.']}
  note="vous, aux commandes"
  audiences={['Formateurs', 'Coachs', 'Enseignants', 'Solopreneurs']}
  logo="/marques/catalyseur-ia.svg"
/>