krichtof/app.kluk.fr

Christophe Robillard ad251e7558 use charte from www

2026-09-29 06:34:43 +02:00

15 KiB

Raw Permalink Blame History

Charte graphique Kluk

Charte extraite du site kluk.fr (assets/css/style.scss, _layouts/, _includes/). Tout ce qu'il faut pour la réutiliser ailleurs se trouve dans le dossier charte/ :

charte/
├── css/kluk.css          Feuille de style complète, en CSS pur (sans Sass)
├── fonts/                Young Serif, Atkinson Hyperlegible Next (woff2) + licence OFL
├── img/
│   ├── favicon.svg              Icône du site (tasse verte)
│   ├── illustration-tasses.svg  Illustration « table et tasses », autonome (styles intégrés)
│   ├── tasse-{gris,orange,vert,rouge}.svg  Une tasse seule, dans chaque couleur d'humeur
│   └── photo-attente.svg        Pictogramme de l'emplacement de photo
└── exemple.html          Page de démonstration de tous les composants

Pour démarrer : copier charte/ dans le projet, puis dans le <head> :

<meta name="theme-color" content="#F5F6F0">
<link rel="preload" href="charte/fonts/young-serif-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="charte/fonts/atkinson-hyperlegible-next-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="charte/css/kluk.css">
<link rel="icon" href="charte/img/favicon.svg" type="image/svg+xml">

Les chemins des polices dans kluk.css sont relatifs (../fonts/) : garder la structure css/ + fonts/ côte à côte.

1. Esprit

Un univers de petit-déjeuner, calme et chaleureux : la porcelaine du matin (fond), l'encre du thé (texte), le chêne de la table (pied de page, illustration), et les quatre couleurs des tasses (gris, orange, vert, rouge) comme accents, qui sont aussi les quatre « humeurs ».

Principes :

une seule colonne de lecture étroite (36 rem), beaucoup d'air ;
des titres en serif ronde et amicale, un texte courant très lisible ;
des formes arrondies (boutons en pilule, cartes arrondies), des traits d'encre épais façon dessin ;
l'accessibilité d'abord : contrastes élevés, focus très visible, lien d'évitement, animations coupées si l'utilisateur le demande.

2. Couleurs

Toutes les couleurs sont des variables CSS déclarées sur :root.

Fonds et texte

Variable	Valeur	Rôle
`--porcelaine`	`#F5F6F0`	Fond de page, texte sur fond encre, `theme-color`
`--porcelaine-fonce`	`#E9ECE2`	Fond de `code`, emplacement de photo, liseré des cartes
`--encre`	`#2E2A26`	Texte, bordures, fond des boutons
`--encre-douce`	`#5A534C`	Texte secondaire : chapeau, notes, légendes, précisions
`--chene`	`#D9BC94`	Pied de page, plateau de la table (illustration)
`--chene-fonce`	`#B48D5F`	Socle de la Kluk, pointillés et picto de l'emplacement photo

Humeurs (accents)

Variable	Valeur	Rôle
`--gris`	`#8D97A8`	Humeur grise
`--orange`	`#EDA33D`	Humeur orange, trait de l'exergue
`--vert`	`#5F9B59`	Humeur verte, soulignement des liens, focus des champs, favicon
`--rouge`	`#D8573F`	Humeur rouge, trait des messages d'erreur
`--vert-lien`	`#3F7A3B`	Vert foncé pour les cases à cocher (`accent-color`)

Teintes utilitaires

Écrites en dur dans le site d'origine ; kluk.css les expose en variables, avec les mêmes valeurs.

Variable	Valeur	Rôle
`--encre-survol`	`#45403A`	Fond des boutons au survol
`--surface`	`#FBFCF8`	Fond des cartes (formulaire, calendrier)
`--bordure-champ`	`#8A8279`	Bordure des champs de saisie
`--erreur-fond`	`#FBE9E5`	Fond des messages d'erreur
`--blanc`	`#fff`	Fond des champs, reflet des tasses, fond à l'impression

Contrastes (WCAG)

Couple	Ratio	Usage autorisé
encre / porcelaine	13,1 : 1	tout texte
encre-douce / porcelaine	7,0 : 1	tout texte
encre / chêne	7,8 : 1	tout texte (pied de page)
porcelaine / encre-survol	9,4 : 1	texte des boutons au survol
vert-lien / porcelaine	4,8 : 1	texte possible
vert / porcelaine	3,1 : 1	éléments graphiques seulement (soulignés, contours)
rouge / porcelaine	3,6 : 1	éléments graphiques seulement
gris / porcelaine	2,7 : 1	décoratif seulement
orange / porcelaine	2,0 : 1	décoratif seulement

Règle : le texte est toujours en encre ou encre douce. Les couleurs d'humeur ne servent qu'aux traits, soulignés, pastilles et illustrations, jamais au texte.

3. Typographies

Variable	Pile	Usage
`--serif`	`"Young Serif", Georgia, serif`	Titres `h1`–`h3`, exergue, phrase du pied de page
`--sans`	`"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif`	Tout le reste, y compris le logo

Fichiers fournis (charte/fonts/, licence SIL OFL 1.1 dans OFL.txt) :

young-serif-400.woff2 : Young Serif, une seule graisse (400) ;
atkinson-hyperlegible-next-400.woff2 : Atkinson Hyperlegible Next variable, graisses 200 à 800 ;
atkinson-hyperlegible-next-400-italic.woff2 : italique 400.

Graisses utilisées : 400 (texte), 700 (boutons, libellés, strong), 800 (logo). Les titres restent en 400 : c'est la serif qui porte le caractère.

Échelle

Élément	Taille	Interlignage	Remarques
Corps (`body`)	`1.1875rem` (19 px)	1.65	`font-kerning: normal`
`h1`	`clamp(2.35rem, 1.6rem + 3.6vw, 3.75rem)`	1.15	serif, `text-wrap: balance`
`h2`	`clamp(1.6rem, 1.35rem + 1vw, 2rem)`	1.15	serif
Chapeau	`1.3rem`	1.55	italique, encre douce
Exergue	`1.45rem`	1.4	serif
Logo	`1.35rem`	1.2	sans 800, `letter-spacing: 0.01em`
Phrase du pied	`1.15rem`	—	serif
Note	`1.0625rem`	—	encre douce
Navigation, petit bouton, pied, formulaire (erreur, secours), emplacement photo	`1rem`	—
Légende de photo	`0.95rem`	—	encre douce
`code`	`0.9em`	—

Titres : letter-spacing: -0.005em.

Typographie française

Le site applique automatiquement (plugin Jekyll _plugins/typographie.rb) une espace fine insécable avant ; ! ? et une espace insécable avant : et » et après «. Dans un autre projet, taper ces espaces directement (  fine,   insécable) ou reprendre ce plugin. Apostrophe typographique ’ et guillemets « ».

4. Espacements et mise en page

Variable	Valeur	Rôle
`--colonne`	`36rem`	Largeur de la colonne de texte (~ 65 caractères)
`--gouttiere`	`1.25rem`	Marge latérale sur mobile, padding horizontal des conteneurs
`--largeur-entete`	`64rem`	Largeur maximale de l'en-tête
`--arrondi-petit`	`0.5rem`	Logo, champs de saisie
`--arrondi`	`0.75rem`	Photos, cartes (formulaire, calendrier, emplacement photo)
`--arrondi-pilule`	`999px`	Boutons

Rythme vertical (marges) :

Élément	Marge
Paragraphe	`0 0 1.15rem`
`h1`	`1.5rem 0`
`h2`	`4.5rem 0 1.25rem` (grande respiration avant chaque section)
Paragraphe contenant seulement un bouton	`2rem 0`
Photo	`2rem 0`
Exergue, calendrier	`2.25rem 0` (calendrier : `2.25rem 0 1rem`)
Formulaire	`2.5rem 0 1rem`
Note	`margin-top: 2.5rem`
Colonne `.texte`	padding `2rem` en haut, `5rem` en bas

Points de rupture : 30rem (calendrier resserré), 40rem (formulaire plus aéré), 48rem (l'illustration déborde de 4 rem de chaque côté de la colonne).

Structure de page : body en flex colonne avec min-height: 100vh, main en flex: 1, pour que le pied de page reste en bas.

Traits : encre, 2 à 3 px (boutons actifs 2 px, logo 2,5 px, pied de page 3 px, illustration 3 px, anses 6 px). Trait latéral de 4 px pour l'exergue (orange) et les erreurs (rouge).

5. Composants

La page charte/exemple.html les montre tous.

Squelette de page

<body>
  <a class="evitement" href="#contenu">Aller au contenu</a>
  <header class="entete">…</header>
  <main id="contenu" tabindex="-1">
    <article class="texte">
      …contenu…
    </article>
  </main>
  <footer class="pied">…</footer>
</body>

.evitement est caché au-dessus de l'écran et n'apparaît qu'au focus clavier.

<header class="entete">
  <a class="logo" href="/" aria-label="Kluk, retour à l'accueil">kluk</a>
  <nav class="nav" aria-label="Navigation principale">
    <ul>
      <li><a href="/" aria-current="page">Accueil</a></li>
      <li><a href="/histoire/">Comment est née l'idée</a></li>
      <li><a href="/je-veux-ma-kluk/" class="bouton bouton-petit">Je veux ma Kluk</a></li>
    </ul>
  </nav>
</header>

Le logo est un mot-symbole en minuscules, en Atkinson Hyperlegible Next graisse 800, encadré d'un trait d'encre arrondi.
Les liens de navigation ne sont pas soulignés ; le soulignement vert apparaît au survol et sur la page courante (aria-current="page").
Une seule entrée de navigation est mise en valeur en bouton. Quand c'est la page courante, le bouton s'inverse (fond porcelaine, contour encre).

Liens

Texte en encre, soulignement vert épais (0.12em, décalé de 0.2em) qui passe à l'encre au survol. Dans le pied de page, soulignement encre fin (1 px, 2 px au survol).

Focus

Contour encre de 3 px, décalé de 3 px, coins arrondis à 4 px, sur tous les éléments (:focus-visible). Les champs de formulaire utilisent un contour vert.

Bouton

<p><a class="bouton" href="/je-veux-ma-kluk/">Je veux ma Kluk</a></p>

<a class="bouton bouton-petit" href="…">Petit bouton</a>

<button class="bouton" type="submit">Envoyer</button>

Pilule encre, texte porcelaine en 700. Un bouton seul dans son paragraphe prend une marge de 2 rem. Dans un .formulaire, un <button class="bouton"> perd sa bordure native et passe à opacity: 0.6 quand il est disabled.

Titres, chapeau, texte

<h1>Titre de la page</h1>
<p><em>Le chapeau : une phrase d'accroche en italique.</em></p>
<p>Texte courant…</p>
<h2>Intertitre</h2>

Le chapeau n'a pas de classe : c'est le paragraphe qui suit directement le h1 et ne contient qu'un <em> (sélecteur h1 + p:has(> em:only-child)).

Exergue

<p class="exergue">Une phrase à mettre en valeur.</p>

Note

<p class="note">Une précision discrète, en fin de page.</p>

Code en ligne

<code>exemple</code>

Photo

<figure class="photo">
  <img src="photo.jpg" alt="Description de la photo" width="1200" height="900" loading="lazy" decoding="async">
  <figcaption>Légende facultative.</figcaption>
</figure>

Toujours un alt descriptif, et width/height pour éviter les sauts de mise en page. Format des photos du site : 1200 × 900 (4:3) ; image de partage : 1200 × 630.

Emplacement de photo (en attendant l'image)

<figure class="photo">
  <div class="photo-attente">
    <svg viewBox="0 0 40 32" aria-hidden="true" focusable="false"><path d="M3 3 L6 25 Q6.5 29 10.5 29 L24.5 29 Q28.5 29 29 25 L32 3 Z M31.5 8 C39 8 39.5 21 30 22" /></svg>
    <p><strong>Photo à venir</strong><br>Description de la photo attendue.</p>
  </div>
</figure>

Cadre 3:2 en pointillés chêne foncé. Le pictogramme est aussi fourni seul : img/photo-attente.svg.

Illustration « table et tasses »

Deux façons de l'utiliser :

En image, le plus simple (couleurs et animation intégrées au fichier) :

<figure class="tasses">
  <img src="charte/img/illustration-tasses.svg" alt="Trois tasses de couleur alignées sur la table, et une quatrième posée sur la Kluk, fumante.">
</figure>

En SVG dans la page, pour qu'elle suive les variables CSS : copier le bloc <figure class="tasses"> de charte/exemple.html. La couleur de chaque tasse vient de sa classe d'humeur (humeur-gris, humeur-orange, humeur-rouge, humeur-vert) via currentColor. On peut donc réutiliser le symbole #tasse :
```
<use href="#tasse" x="34" y="114" class="humeur-orange" />
```

La vapeur ondule doucement (5 s, deux volutes décalées de 2,5 s), seulement si prefers-reduced-motion ne le refuse pas. À partir de 48 rem, la figure déborde de 4 rem de part et d'autre de la colonne.

Tasses seules : img/tasse-gris.svg, tasse-orange.svg, tasse-vert.svg, tasse-rouge.svg.

Calendrier d'humeurs (décoratif)

<div class="calendrier" aria-hidden="true">
  <span class="jour jour-v"></span>
  <span class="jour jour-o"></span>
  <span class="jour jour-g"></span>
  <span class="jour jour-r"></span>
  <!-- … une case par jour ; la grille remplit des colonnes de 7 jours (une semaine par colonne) -->
</div>

jour-g gris, jour-o orange, jour-v vert, jour-r rouge. Carte de fond --surface avec liseré intérieur --porcelaine-fonce.

Formulaire

<form class="formulaire">
  <div class="champ">
    <label for="champ-email">Votre adresse mail <span class="precision">(obligatoire)</span></label>
    <input id="champ-email" name="Email" type="email" required autocomplete="email">
  </div>

  <fieldset class="champ">
    <legend>Ce que vous aimeriez faire <span class="precision">(cochez tout ce qui vous ressemble)</span></legend>
    <ul class="choix">
      <li>
        <input id="choix-1" type="checkbox" name="choix[]" value="1">
        <label for="choix-1">Premier choix</label>
      </li>
    </ul>
  </fieldset>

  <div class="champ">
    <label for="champ-message">Un mot, une idée, une question ? <span class="precision">(facultatif)</span></label>
    <textarea id="champ-message" name="Message" rows="5"></textarea>
  </div>

  <!-- Champ piège anti-robots : invisible, laissé vide par les humains -->
  <div class="piege" aria-hidden="true">
    <label for="champ-site">Ne pas remplir</label>
    <input id="champ-site" name="_site" type="text" tabindex="-1" autocomplete="off">
  </div>

  <p class="formulaire-erreur" role="alert" hidden></p>

  <button class="bouton" type="submit">Envoyer</button>

  <noscript><p class="formulaire-secours">Ce formulaire a besoin de JavaScript.</p></noscript>
</form>

Libellés en 700 au-dessus des champs, précisions en 400 encre douce entre parenthèses.
Champs : fond blanc, bordure 2 px --bordure-champ, arrondi 0,5 rem ; au focus, contour vert 3 px et bordure encre.
Les styles ne visent que input[type="email"] et textarea : ajouter les autres types au sélecteur si besoin.
Cases à cocher agrandies (1,35 rem), teintées --vert-lien.
Message d'erreur : trait rouge à gauche sur fond rosé.

Pied de page

<footer class="pied">
  <div class="pied-interieur">
    <p class="pied-phrase">Une petite phrase facultative.</p>
    <ul class="pied-liens">
      <li><a href="/je-veux-ma-kluk/">Je veux ma Kluk</a></li>
      <li><a href="/mentions-legales/">Mentions légales</a></li>
    </ul>
  </div>
</footer>

C'est « la table en bois » : fond chêne, trait d'encre de 3 px en haut, comme le plateau de l'illustration.

6. Impression

La navigation, le pied de page, l'illustration et le calendrier sont masqués ; le fond devient blanc.

7. Icône

img/favicon.svg : une tasse verte (--vert) cernée d'encre. theme-color : #F5F6F0.

15 KiB Raw Permalink Blame History Unescape Escape