Système visuel de la coopérative
Base commune
de design
Une seule feuille de style, réutilisée par tous les outils produits sous la marque TelesCoop.
Un fond,
une encre,
deux accents
Le jaune porte l’action principale, le vert accompagne. Au repos, le texte posé sur un accent reste noir. Au survol d’un bouton, l’accent bascule vers sa version très sombre et le texte passe au blanc, ce qui inverse complètement le rapport de valeurs sans déplacer quoi que ce soit.
Orange, bleu, rose et violet ont été retirés. Un outil qui doit distinguer plus de deux états passe par le remplissage, le filet ou la position, jamais par une couleur de plus.
Survolez pour voir la bascule
Trois familles,
cinq tailles
Anton porte tout ce qui affirme : titres, boutons, étiquettes, en-têtes. Toujours en capitales, interlettrage normal, aucun tracking ajouté. Une seule graisse existe, il ne faut jamais chercher à la simuler.
Barlow Condensed tient le texte de labeur. Étroite, économe en place, très lisible à dix-huit pixels, elle laisse respirer les mises en page denses.
IBM Plex arrive en renfort quand un outil demande un ton plus technique ou plus neutre. La Sans pour le labeur, la Mono pour les chiffres, le code et les tableaux de données.
Anton
Coopérative
Barlow Condensed
Des outils utiles, sobres et accessibles
IBM Plex Sans et Mono
Des outils utiles et sobres
1 234,56 tCO₂e
Cinq tailles, pas une de plus
- geant · 44 à 88pxTrès gros titre
- titre · 28 à 44pxTitre normal
- petit-titre · 24pxPetit titre
- texte · 18pxTexte de labeur, la taille de référence
- sous-titre · 14pxSous-titre, mention, légende, méta
Les deux plus grandes tailles sont fluides, elles se calent sur la largeur de la fenêtre.
Le motif de bandeau
Aplat
pleine largeur
Un aplat d’accent occupe toute la largeur, sans le moindre contour en haut ni en bas. La différence de fond suffit à séparer les plans, une ligne noire de deux pixels ne ferait qu’alourdir la couture.
Carte posée
Fond de page sur l’aplat, avec le halo actif.
Sans couture
Aucun trait ne vient border le bandeau.
Quatre façons
de poser du texte
Une colonne
La mise en page par défaut. Le texte est limité à soixante-six caractères par ligne, la mesure de lecture confortable. C’est la composition à utiliser dès qu’il s’agit d’expliquer quelque chose, pour un mode d’emploi, une note, une page d’aide.
Deux colonnes
Deux colonnes séparées par un filet vertical très fin. Le texte coule de la première vers la seconde, comme dans un journal. Utile pour un texte long qui ne mérite pas une pleine largeur, ou pour donner une allure éditoriale à une page de présentation.
La colonne se replie automatiquement sur les écrans étroits, où une seule colonne reprend la main. Le filet disparaît alors avec elle, sans qu’il y ait rien à prévoir.
Trois colonnes
Trois colonnes pour les textes courts et les listes de brèves. La densité augmente, la mesure descend autour de quarante caractères, ce qui reste lisible pour du texte fractionné.
Au-delà de trois, la lecture devient inconfortable sur un écran. Le système s’arrête donc là, et propose plutôt une grille de cartes quand il faut aligner davantage d’éléments.
Les filets verticaux entre les colonnes reprennent la couleur d’encre du thème, à dix-huit pour cent en clair et vingt-deux en sombre.
Duo, titre et texte
Le titre à gauche
Une colonne étroite et fixe, qui sert de repère.
Le texte à droite, séparé par un filet vertical. C’est la composition de la plupart des sections de cette page. Elle installe une colonne de repère sur la gauche, ce qui aide à parcourir une page longue sans se perdre, et elle laisse beaucoup d’air entre les deux blocs.
Sur un écran étroit, les deux colonnes s’empilent et le filet disparaît.
Une composition tient par ses blancs et par ses filets, pas par ses contours.
Le filet
remplace
le contour
Un contour enferme, un filet organise. Partout où un cadre ne servait qu’à délimiter sans rien dire, il a été remplacé par une ligne, souvent accompagnée d’une étiquette. Les contours ne subsistent que sur ce qui se clique ou se remplit : boutons, champs, étiquettes.
Filet fin, la séparation ordinaire
Filet fort, la coupure de section
Filet double, à l’ancienne
Filet court, l’accroche sous un titre
Rubrique, l’étiquette suivie du filet qui file jusqu’au bord
Liste de définitions séparée par des filets
- Filet finSéparer deux éléments d’une même famille, une ligne de tableau, un item de liste.
- Filet fortMarquer une coupure, sous un titre de section ou en tête de tableau.
- Filet verticalSéparer deux colonnes de texte, ou le titre du corps dans un duo.
- RubriqueNommer une section et la relier au bord de la page.
La carte
suit
la souris
Au repos, une ombre douce et décentrée pose simplement le bloc sur la page. Dès que le pointeur entre, la carte s’incline en trois dimensions et suit le déplacement de la souris, jusqu’à douze degrés sur chaque axe. L’ombre se décale dans le sens inverse, comme si la lumière restait fixe pendant que l’objet bouge.
Un reflet doux suit lui aussi le pointeur, et le contenu de la carte remonte de quelques pixels dans la profondeur. À la sortie du pointeur, tout revient en place en une demi-seconde, avec une courbe très amortie.
Deux variables suffisent : le JS écrit la position du pointeur dans --hx et --hy, le CSS fait le reste.
Promenez le pointeur
La carte s’incline vers l’endroit où se trouve la souris, et l’ombre part du côté opposé.
Sur un accent
Le même effet, sur une carte jaune. Le reflet reste très discret.
Avec un contour
Le halo fonctionne aussi sur une carte à contour, quand le bloc doit être franchement détouré.
.halo{
transform:
perspective(700px)
rotateX(calc(var(--hy) * -12deg))
rotateY(calc(var(--hx) * 12deg))
translateZ(calc(var(--hp) * 16px));
box-shadow:
calc(var(--hx) * -34px) calc(var(--hy) * -34px + 14px) 30px var(--halo-2);
transition:transform 520ms var(--ease-doux);
}
.halo.suit{ transition:transform 90ms linear } /* pendant le survol */
Au clavier, la carte se soulève sans s’incliner. Sur écran tactile, l’effet ne se déclenche pas. Si le système demande moins d’animations, le halo disparaît complètement.
Boutons
Étiquettes
Cartes
Creuse
Sans contour, c’est la carte par défaut.
Contour
Quand le bloc doit être franchement détouré.
Filet
Un simple trait au-dessus, rien d’autre.
Accent
Un aplat de couleur, texte noir.
Formulaire
Tableau
| Jeton | Valeur | Usage |
|---|---|---|
--radius | 4px | tous les blocs |
--trait | 2px | boutons, champs, contours assumés |
--filet | 1px | séparations typographiques |
--section-y | 72 à 144px | respiration entre sections |
Le mouvement
reste discret
Chaque bloc de cette page monte de vingt-deux pixels en apparaissant, avec un décalage de quatre-vingts millisecondes entre les éléments d’une même grille. Les filets se tracent de gauche à droite en neuf dixièmes de seconde. Les liens voient leur soulignement se dessiner au survol. Le grand titre monte à l’ouverture, suivi du filet puis du chapeau.
Tout passe par des transitions, aucune bibliothèque. Si le système d’exploitation demande moins d’animations, tout s’arrête net. Cette page passe outre avec data-anim="on" pour rester démonstrative, le bouton en haut à droite permet de comparer les deux états.
- .apparaitLe bloc monte et se révèle quand il entre dans l’écran.
- .traceLe filet se dessine de gauche à droite.
- data-cascadePosé sur un parent, décale automatiquement ses enfants.
- .anim-ouvertureMontée immédiate au chargement, en trois temps.
- .haloL’inclinaison en trois dimensions qui suit le pointeur.
- .pastilleUn point qui respire, pour signaler un état vivant.
Papier
et lumière
Une image de grain se répète sur toute la page, fixée à la fenêtre, sans jamais intercepter le clic. Trente pour cent d’opacité en thème clair, quatorze en sombre, où le grain doit rester une présence et pas un bruit.
<html lang="fr"> clair, le défaut <html lang="fr" data-theme="sombre"> sombre <html lang="fr" data-theme="auto"> suit le réglage du système <html lang="fr" data-texte="plex"> labeur en IBM Plex <html lang="fr" data-anim="on"> animations imposées
Le clair est le thème par défaut. Le sombre ne s’active que si on le demande, ou si la page choisit de suivre le système avec data-theme="auto".
- Contrastes20,1 pour 1 en clair, 16,4 en sombre. Le pire cas du système est le vert sombre à 10,4 avec du blanc. Tout dépasse le niveau AAA.
- FocusContour de 3px avec un décalage de 3px sur tout élément atteint au clavier, dans la couleur d’encre du thème.
- SurvolLes boutons changent de couleur, jamais de position. Seul le halo bouge, et il se désactive à la demande du système.
- ClavierUne carte à halo se soulève au focus, sans s’incliner. Le retour en haut de page redonne le focus au début du contenu.
- MonochromeUne classe sur le body passe l’interface en niveaux de gris, pour vérifier qu’aucune information ne tient à la seule couleur.
Point de départ
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nom de l’outil</title>
<link rel="stylesheet" href="telescoop-ds.css">
</head>
<body class="grain-texture">
<a href="#contenu" class="skip-to-content">Aller au contenu principal</a>
<main id="contenu" class="section">
<div class="container">
<div class="rubrique"><span class="libelle">Nom de l’outil</span></div>
<h1>Titre</h1>
<hr class="filet-titre trace">
<div class="grid grid-3" data-cascade>
<div class="carte halo apparait">…</div>
</div>
</div>
</main>
<a href="#" class="btn btn-encre btn-sm haut-de-page">
<span class="fleche">↑</span> Haut de page
</a>
<script src="telescoop-ds.js" defer></script>
</body>
</html>
Le dossier contient telescoop-ds.css, telescoop-ds.js, grain.webp et fonts/. Aucun appel à un service tiers.