La charte de bertiaux.fr.

Le concept en 7 slides

Une idée par slide, chacune avec sa preuve sur le site. En 16:9 (1920 × 1080) pour une présentation, en 4:5 (1080 × 1350) pour un carrousel LinkedIn.

1. 
   01 Un site, huit liens 16:9 LinkedIn
2. 
   02 Le cadrage d'abord 16:9 LinkedIn
3. 
   03 Montrer, pas dire 16:9 LinkedIn
4. 
   04 Rapide avant joli 16:9 LinkedIn
5. 
   05 Animé, pas imposé 16:9 LinkedIn
6. 
   06 Un ton, pas un jargon 16:9 LinkedIn
7. 
   07 Lisible par les IA 16:9 LinkedIn

Monogramme et favicons

FB en Big Shoulders 900, vectorisé, et le point citron du site. Le même dessin sert à l'onglet du navigateur, à l'écran d'accueil du téléphone et à l'application.

• SVG (vectoriel)
• favicon.ico (16 à 48 px)
• iPhone (180 px)
• Application (512 px)

Couleurs

Noir et blanc pour la structure, un seul fluo pour l'action. La pastille de droite donne la valeur du mode sombre.

• Paper

  Fond de page.

  Clair #ffffff Sombre #0a0a0a

• Ink

  Texte, filets, aplats sombres.

  Clair #0a0a0a Sombre #f5f5f2

• Ink soft

  Texte secondaire, libellés.

  Clair #54565c Sombre #b5b7bd

• Line

  Bordures de 1 px.

  Clair #d8d8d8 Sombre #2a2a2a

• Tag

  Fond des encadrés.

  Clair #f0f0f0 Sombre #1a1a1a

• Accent

  Citron : boutons, surlignages, ce sur quoi on agit.

  Clair #d6ff3f Sombre #e2ff5c

Typographies

Trois familles libres (licence OFL), une par rôle, hébergées sur le site.

• Big Shoulders Display

  100 – 900

  Titres, chiffres, animations de graisse. Police variable de 100 à 900.

  Google Fonts

  Le cadrage, si.

  Graisse

  900

• Public Sans

  400 – 600

  Texte courant.

  Google Fonts

  L'outil ne fait pas le projet. Le cadrage, si.

• IBM Plex Mono

  400

  Libellés, navigation, boutons.

  Google Fonts

  Consultant innovation · Lille

Règles d'usage

1. 01

   Le citron est un aplat, jamais du texte sur fond blanc : derrière du noir, en soulignement ou en forme.

2. 02

   Titres en Big Shoulders majuscules, souvent sur deux lignes : la seconde en contour.

3. 03

   Libellés en IBM Plex Mono majuscules, espacés. Texte courant en Public Sans.

4. 04

   Une animation déplace ou épaissit. Elle ne cache jamais le contenu au chargement.

5. 05

   Quand la graisse change, chaque lettre garde sa largeur : rien ne bouge autour.

6. 06

   Moins d'animations demandées ? Tout s'affiche à plat. Le contour de focus clavier reste toujours visible.

7. 07

   Pas d'ombres, pas d'arrondis sauf les boutons ronds de contact. Des filets de 1 px et des aplats.

Icônes

Grille de 24, trait de 2,25, extrémités carrées. Elles prennent la couleur du texte et sa taille.

• Aller
• Lien externe
• Défiler
• Éclat
• Point

Composants

Les briques que l'on retrouve sur chaque page.

Images de partage

Ce qu'affichent LinkedIn, Slack ou WhatsApp quand on partage une page. 1200 × 630 px.

• 
  Accueil PNG
• 
  Accueil (anglais) PNG
• 
  Manifeste PNG
• 
  Manifeste (anglais) PNG