Brand Book.
Tout en cinq couleurs
et trois polices.

Cinq principes graphiques.

CARNET. Et point carré.

Le wordmark est composé du mot CARNET en capitales, police DM Mono, et d'un point carré Orange Polo qui le suit. Pas de logo iconographique. Pas de symbole. Le wordmark est le logo.

Variantes admises

Règles d'usage

Trois symboles. Une promesse.

Le sceau apparaît en pied de chaque document, page, livrable. Trois symboles séparés par des points carrés Orange Polo. Ce n'est pas une décoration — c'est une signature qui valide l'authenticité d'un document CARNET.

Règles d'usage

Cinq couleurs · pas une de plus.

Chaque couleur a un usage défini. Pas de variations libres. Pas de gradient. Pas de « j'ajoute juste un beige clair ». Si vous avez l'impression qu'il en manque une, c'est que vous n'utilisez pas bien les cinq existantes.

Erreur fréquente · Orange Polo en body text

Bodoni italique · Cormorant Garamond · DM Mono.

Trois polices Google Fonts. Trois rôles précis. Pas de mélange improvisé. Pas de Helvetica. Pas de Inter. Pas de Roboto. Si vous voyez l'une de ces polices dans un livrable CARNET, c'est une erreur à corriger.

Usage Bodoni Moda · règles

Usage Cormorant Garamond · règles

Usage DM Mono · règles

Tableau de répartition rapide

Tout en multiples de 4. Radius 2px partout.

Échelle de spacing en multiples de 4 pixels. Border-radius systématiquement 2 pixels (jamais 0, jamais 4+, jamais 50%). Pas d'ombres portées. Pas de bordures épaisses.

Code · design tokens CSS

/* ═══ CARNET Design Tokens v1.0 ═══ */
:root {
  /* Couleurs */
  --encre: #1a1410;
  --encre-soft: #4a3d33;
  --encre-ghost: #7a6d63;
  --papier: #faf6ef;
  --papier-soft: #f3ede1;
  --papier-deep: #ebe3d3;
  --orange-polo: #E85A1F;
  --orange-polo-text: #9C3A14;
  --vert-anglais: #1F4D2F;
  --vert-light: #7BBA8E;
  --gris: #6b5d4f;

  /* Typographie */
  --bodoni: 'Bodoni Moda', Georgia, serif;
  --editorial: 'Cormorant Garamond', Georgia, serif;
  --mono: 'DM Mono', 'SF Mono', monospace;

  /* Spacing & radius */
  --r: 2px;
}

Sobre dans la forme. Vivante dans le fond.

CARNET parle. C'est une voix construite, identifiable, opposable. Voici comment elle s'écrit, et ce qui n'en fait pas partie.

Personne grammaticale · contexte

Do's et Dont's de la voix

Mots et tournures interdits

• exceptionnel · extraordinaire · incroyable · superlatifs vides. Si quelque chose est exceptionnel, montrer pourquoi en concret, pas en adjectif.
• « dans le cadre de » · « afin de » · « il convient de » · tournures administratives. Préférer « pour », « nous », « voici ».
• révolutionnaire · disruptif · innovant · breakthrough · vocabulaire startup. CARNET ne révolutionne pas, elle construit.
• NFT comme valeur en soi · token comme buzzword · les NFT XLS-20 sont un outil. Pas un argument de vente.
• Émojis dans le texte courant · jamais. Les checkmarks UX (`✓` `×`) sont admis dans les listes, pas les emojis colorés.
• Top Gear post-Clarkson · vocabulaire « track car bro » · pas de « beast », « savage », « insane ». La voix CARNET est rock, pas testostéronée.
• « gentleman driver » · « connoisseur » · vocabulaire poussiéreux UK/CH. CARNET est continental européen, pas un club de country.
• « Veuillez agréer mes salutations distinguées » · formules de politesse mortes. Signer simplement par son prénom dans les mails.

Références éditoriales · ce qu'on lit, ce qu'on regarde

Ce qui ne fera jamais partie de CARNET.

Liste opposable. Si vous voyez l'un de ces éléments dans un livrable estampillé CARNET, c'est un défaut à corriger immédiatement.

• Glassmorphism · surfaces semi-translucides avec blur. Effet daté 2021-2022. CARNET est papier opaque ou surface plate, jamais verre dépoli.
• Neumorphism · ombres internes et externes pour faire « bouton sculpté ». Effet anti-CARNET par excellence.
• Skeuomorphisme · effets « notebook page » avec ombres et coins cornés. Tentation forte pour un projet appelé CARNET. À éviter absolument.
• Emojis colorés dans le texte courant · jamais. Les pictogrammes Unicode mono (`✓ × → ←`) sont admis dans des listes UX, pas dans la prose.
• Iconographie Flaticon générique · stock business · cravate poignée de main · jamais. CARNET utilise du dessin technique, des illustrations originales, ou rien du tout.
• Photos stock corporate · jamais. Si pas de photo réelle disponible, préférer texte ou illustration vectorielle. Pas de « équipe souriante en salle de réunion ».
• Boutons gradients · CTA arc-en-ciel · effets brillance · jamais. CTA = fond plein Orange Polo ou Encre. Hover = changement de luminosité subtil.
• Animations excessives · parallax · scroll-driven flashy · sobriété. Transitions douces, pas de spectacle. La page se laisse lire, pas regarder.
• Couleur supplémentaire (bleu, jaune, rose, etc.) · 5 couleurs, pas une de plus. Si vous avez besoin d'un bleu pour « différencier », c'est une erreur de structure de l'information.
• Police supplémentaire (Inter, Roboto, Helvetica) · 3 polices, pas une de plus. Les polices systèmes ne remplacent jamais les 3 polices CARNET.
• Logo iconique en plus du wordmark · jamais. Pas de monogramme « C », pas d'écusson, pas de roue stylisée. Le wordmark est le logo.
• « Powered by » d'autres marques · co-branding visible sur le site · jamais. Les partenaires sont mentionnés dans la page mécénat, pas en footer permanent.

HTML / CSS · à copier-coller.

Starter HTML/CSS pour démarrer toute page nouvelle au design CARNET. À utiliser tel quel, ou comme base à étendre.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CARNET · [Titre de la page]</title>
  <meta name="carnet" content="ω·28·∞" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@1,6..96,400;1,6..96,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
</head>

/* Reset CARNET minimal */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--editorial);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wordmark */
.wm {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .14em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--encre);
  text-decoration: none;
}
.wm::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--orange-polo);
}

/* Titre H1 */
h1 {
  font-family: var(--bodoni);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--orange-polo-text);
  text-transform: uppercase;
}

/* Sceau footer */
.foot-sceau {
  font-family: var(--mono);
  color: var(--orange-polo);
  font-size: 13px;
  letter-spacing: .2em;
}
/* Usage HTML · <div class="foot-sceau">ω · 28 · ∞</div> */

Si vous produisez pour CARNET.