visual-lab — bibliothèque de patterns visuels HTML/CSS

card-01-ghost-icon

Carte-argument à icône fantôme

Asséner UN seul argument sur toute une largeur, avec une icône énorme mais presque invisible qui donne du volume sans voler l'attention au titre.

card 1164×420

card-02-notched-brief

Carte chanfreinée de second rang

Porter une catégorie nommée et son explication sur un aplat neutre, en rangée, sans jamais rivaliser avec la vignette d'accent posée à côté.

card 430×340 10 bench

card-03-stat-accent

Vignette statistique sur accent

Faire porter UN chiffre par un aplat d'accent chanfreiné, avec son cadrage (micro-libellé au-dessus) et son commentaire (corps collé en bas), de façon à ce que le chiffre se lise avant le texte.

card 430×340 12 bench

card-04-stat-barchart

Carte statistique à barres empilées

Porter UN KPI de premier rang (un total et sa tendance) sur un aplat noir, en-tête calé en haut et chiffre + mini-histogramme collés en bas, de façon à ce que le nombre se lise avant tout.

card 776×330 10 bench

card-05-balance-gauge

Carte solde à jauge compteur

Montrer un solde et sa progression dans un grand panneau menthe : une jauge « compteur » (part acquise en plein, part restante en hachures) surmonte un chiffre héros posé en bas, la tendance en regard.

card 776×494 10 bench

card-06-forecast-timeline

Carte prévision — timeline + sous-cartes

Raconter une trajectoire dans une carte : une timeline verticale de jalons datés à gauche, et à droite deux sous-cartes teintées qui opposent la valeur constatée (menthe, présent) à la projection (lilas, futur).

card 748×616 10 bench

card-07-transactions

Carte transaction — identité + ligne de valeur

Poser un intitulé de flux (badge + titre + acteurs) en haut d'une carte blanche et sa ligne de valeur unique sur aplat doux collée en bas, sans jamais faire de la carte un tableau.

card 748×208 8 bench

card-08-orb-chain-total

Solde total en chaîne d'orbes

Poser un total en chiffre héros et le décomposer juste en dessous en une chaîne de disques tangents dont un seul — le plus gros et le seul coloré — porte le support principal, les actions empilées à l'opposé.

card 1512×276 10 bench

card-09-gradient-metric-curve

KPI sur aplat coloré à courbe annotée

Faire de la seule carte colorée d'un écran le porteur d'un indicateur unique : la pile libellé / chiffre / cadrage en haut-gauche, une courbe sans axe qui traverse la carte derrière elle, annotée à ses deux extrémités seulement.

card 790×238 10 bench

card-10-kpi-notch-tile

Vignette de preuve chiffrée à double chanfrein

Poser UNE preuve chiffrée dans une vignette presque carrée à silhouette de ticket — tuile d'icône en haut, chiffre et son suffixe sur la même ligne de base, libellé collé dessous, commentaire relégué en bas à droite — et n'en accentuer qu'une seule dans la rangée, par le fond et rien d'autre.

card 420×450 20 bench

card-11-corner-arrow-tile

Vignette d'entrée à flèche de coin

Faire d'un module une ENTRÉE cliquable sans bouton ni liseré : le titre en haut à gauche, une flèche oblique ancrée au coin opposé — jamais alignée sur le titre — et l'illustration qui occupe tout le bas de la vignette au lieu d'être centrée dedans.

card 466×302 17 bench

card-12-inverted-kpi-row

Rangée de KPI dont un seul est inversé — et plus large

Ouvrir un tableau de bord par trois indicateurs de même nature dont UN SEUL est de premier rang, en lui appliquant deux fois le même geste de hiérarchie : l'aplat inversé ET une colonne 5 % plus large. Chaque carte range ses quatre informations dans le même ordre — libellé en haut, pastille de renvoi ancrée au coin opposé, chiffre poussé en bas, note collée dessous.

card 1286×219 16 bench

card-13-email-figure-band

Bande de trois chiffres pour un mail — colonnes en cellules, filets d'un pixel

Poser trois indicateurs de même nature en une bande dans un mail, sans aplat de carte ni encadrement : les colonnes sont des cellules à largeur en pourcentage sur une table à disposition fixe — la seule répartition en parts égales qu'Outlook respecte — et les séparateurs sont des filets de cellule, pas des colonnes intercalaires. La couleur ne fait qu'une chose : elle porte les chiffres.

card 520×88 17 bench

card-14-numbered-steps

Rangée d'étapes numérotées, un seul accent

Poser une méthode en quatre temps sur une seule rangée, en tenant DEUX rails : le chiffre de chaque étape pend du même plafond, son texte pousse depuis le même plancher — donc une phrase de deux lignes et une de quatre ne décalent rien. Une seule carte est accentuée, et elle l'est par le FOND et rien d'autre ; la dernière est noire parce qu'elle est une fin, pas un second accent.

card 1456×440 19 bench

card-15-notched-float-statement

Vignette éditoriale chanfreinée, flottante et contourée

Porter un ENGAGEMENT — un titre affirmatif et son développement de plusieurs lignes — dans une vignette à silhouette de ticket qui flotte au-dessus d'un fond sombre : contour clair épais, ombre portée qui suit le chanfrein, texte justifié et coupé qui remplit la vignette jusqu'au dernier pixel.

card 426×454 22 bench

card-16-paper-grid-poster

Affiche papier quadrillé à deux blocs

Tenir un post social 4:5 entier avec DEUX blocs de texte et rien d'autre — une accroche monumentale qui remplit la largeur, une chute deux fois plus petite en dessous — posés sur un papier quadrillé qui sert de repère d'alignement, et une bande basse réservée d'avance au repère de marque.

card 1080×1350 15 bench

chart-01-stadium-bars

Barres à sommet arrondi

Un histogramme réduit à l'essentiel : des barres à sommet en demi-cercle, aucune ligne d'axe, des légendes en pilules.

chart 348×312

chart-02-isotype

Isotype à taux de remplissage

Raconter une proportion en unités comptables (24 pictogrammes sur 40) au lieu d'un pourcentage abstrait.

chart 349×146

chart-03-accent-column-callout

Histogramme à colonne accentuée et info-bulle

Donner la forme d'une série en quelques colonnes flottantes sans axe ni graduation, et n'en chiffrer qu'une seule — la courante — par une info-bulle sombre ancrée à sa colonne.

chart 700×238 11 bench

chart-04-unit-textured-bar

Barre à unité déclarée

Donner à un histogramme une UNITÉ visible sans lui faire porter le comptage : la hauteur de la barre est exactement proportionnelle à la valeur, la texture qui la remplit est un peigne dont la période vaut une unité déclarée, et le montant exact est écrit au-dessus — la texture donne l'échelle, elle ne compte jamais à la place du chiffre.

chart 704×620 9 bench

chart-05-tile-heatmap

Heatmap en tuiles arrondies, rampe achromatique + marque de catégorie

Lire une matrice canal × période d'un seul coup d'œil, en faisant cohabiter DEUX échelles dans la même grille sans qu'elles se mélangent : une rampe de gris qui encode l'intensité (le noir est le maximum), et une couleur d'accent qui n'est PAS un cran de cette rampe mais une marque de catégorie posée par-dessus. Les cellules sont des tuiles arrondies largement espacées — jamais un damier jointif.

chart 605×431 16 bench

diagram-01-layer-stack

Pile de couches isométriques légendées

Montrer qu'un objet — un produit, une marque, un système logiciel — se décompose en couches ORDONNÉES dont le rang est l'information : des losanges isométriques empilés, d'opacité décroissante, chacun relié par un filet au nom de sa couche et à une ligne d'explication.

diagram 1040×420 15 bench

diagram-02-branch-timeline

Timeline à branches en équerre

Accrocher des objets de niveaux différents à une chronologie sans jamais tracer une diagonale : un rail horizontal daté, des jalons ronds accentués posés DESSUS, et des dérivations en équerre arrondie — descente verticale puis départ horizontal — qui mènent aux objets de la période. La diagonale dirait « transition » ; l'équerre dit « appartenance », et c'est la seule chose que ce diagramme a à dire.

diagram 1330×300 18 bench

diagram-03-time-scrubber

Ruban temporel à fenêtre de sélection

Donner à un écran sa position de lecture dans un axe plus long que lui : l'année entière tient dans une pilule claire — mois écrits, événements en pastilles rondes, comptage en exposant acide —, et une FENÊTRE SOMBRE À POIGNÉES posée dessus marque l'intervalle affiché au-dessus. La fenêtre reprend les mêmes pastilles en inverse : c'est ce qui dit qu'on regarde le même axe, et pas un second objet.

diagram 1330×74 18 bench

diagram-04-serpentine-milestones

Chronologie serpentine à ronds

Dérouler une chronologie sur une colonne aussi longue qu'on veut : un fil continu qui descend en serpentant, des ronds d'étape posés alternativement de part et d'autre de l'axe, et le texte toujours du côté opposé au rond. Le fil ne relie pas les étapes par le plus court chemin — il fait une ÉPINGLE au-delà de chaque rond avant de le traverser, et c'est ce demi-tour qui donne au temps sa longueur ressentie. Fond transparent : le module se pose sur ce qu'on veut.

diagram 1080×2446 19 bench

layout-01-nested-bento

Bento à cartes imbriquées

Structurer une slide dense en trois niveaux (carte → sous-carte → tuile) sans une seule bordure ni ombre, en ne faisant décroître que le rayon et le padding.

layout 652×300

layout-02-swiss-frame

Cadre suisse header / footer

Poser le cadre d'une slide de deck : une marge unique, deux barres de micro-typo à trois zones et un filet d'un pixel — de quoi rendre une suite de slides reconnaissable sans y ajouter le moindre ornement.

layout 621×703

layout-03-glass-board

Écran en verre dépoli — fond dégradé + modules

Emboîter les surfaces d'un écran dense en DEUX couches seulement, sans un trait ni une couleur de séparation : un fond en dégradé qui accueille, et des modules de blanc translucide posés dessus, flou d'arrière-plan compris.

layout 1600×900 11 bench

layout-04-graph-paper-cells

Papier millimétré et ses cases

Faire d'une trame de papier millimétré le TON du fond, puis y poser des objets qui sont des cases de cette trame — pas de la matière posée dessus : le pas de la grille de cellules et la marge qui la centre sont des multiples entiers du pas de la trame, si bien que le contenu paraît découpé dans le papier.

layout 704×600 9 bench

layout-05-nav-pill-bar

Barre de menu en pilule flottante

Poser la navigation d'une page comme un OBJET posé dans la marge — un aplat arrondi qui flotte au lieu d'un bandeau collé au bord — et n'y employer qu'une seule ressource de hiérarchie : le rang de blanc, le badge de marque et le bouton d'action étant plus CLAIRS que la barre qui les porte.

layout 1326×69 16 bench

layout-06-bento-l-span

Bento 3 × 3 à deux enjambements en L

Tenir cinq modules de tailles très différentes sur une VRAIE grille 3 × 3, en n'employant que deux enjambements — un vertical à gauche, un horizontal à droite — qui se CROISENT sans jamais se chevaucher : c'est ce croisement qui supprime toute frontière horizontale continue et fait qu'un écran dense cesse de se lire comme un tableau.

layout 1326×830 17 bench

layout-07-icon-rail-shell

Coque d'application à rail d'icônes

Poser le cadre d'un tableau de bord en ne dépensant AUCUNE couleur pour la navigation : un rail d'icônes étroit du même blanc que l'application — séparé par un filet d'un pixel et jamais par un aplat —, un en-tête à recherche en pilule, et un titre de page qui est le seul très grand corps de l'écran. Tout le budget de couleur reste disponible pour les données.

layout 1440×640 16 bench

layout-08-sheet-handle-tab

Feuille modale à poignée soudée par congés concaves

Ouvrir un dossier par-dessus une application sans que la modale se lise comme « une carte de plus » : un voile sombre qui PORTE de l'interface (onglets, fermeture), une feuille claire qui saigne à quelques pixels des bords, et un onglet-poignée titré soudé à cette feuille par DEUX congés concaves — la seule courbe inversée du corpus, et ce qui fait que la poignée appartient à la feuille au lieu de flotter au-dessus d'elle.

layout 1440×929 17 bench

layout-09-email-envelope

Enveloppe de mailing — garde, colonne de 600, trois aplats pleins

Poser la coquille d'un mailing avec ce que le moteur Word d'Outlook sait réellement rendre : une table de garde pleine largeur qui porte le fond, une colonne de 600 px centrée qui porte tout le contenu, et l'espacement entièrement délégué au padding des cellules — jamais à une gouttière, une position ou un calcul. Les trois zones (bandeau, corps, pied) sont trois aplats PLEINS et différents, ce qui est à la fois la signature de la charte et le seul modèle de hiérarchie qu'un client mail rende à l'identique partout.

layout 600×611 18 bench

layout-10-bleed-column-inset

Lit d'images à fond perdu et incrustation

Faire porter une slide entière par les IMAGES, sans marge ni carte : deux photos à fond perdu qui touchent les quatre bords de la scène, séparées par une COUTURE unique de la couleur de page — jamais une gouttière symétrique —, et une troisième image beaucoup plus petite posée par-dessus l'une d'elles, sans partager une seule arête avec le lit. C'est cette incrustation flottante, et elle seule, qui donne de la profondeur à une composition entièrement plate.

layout 1600×900 16 bench

layout-11-hero-card-on-photo

Carte de hero incrustée sur un sol photographique

Poser la coque d'un hero de page en DEUX couches seulement : une photo pleine page qui est le sol de la page — pas un décor de maquette, pas une mise en scène —, et une carte unie qui y est INCRUSTÉE, marges de sol strictement égales à gauche et à droite, rayon discret et ombre descendante qui la fait flotter. Le sol reste une photo : posée sur un aplat de sa propre couleur, la carte perd son bord et le hero n'a plus de sol du tout.

layout 1440×900 14 bench

layout-12-nav-three-zone

Nav en trois zones, nom centré sur le conteneur

Poser une navigation en trois zones — liens à gauche, nom de marque au centre, bouton d'action à droite — dont le nom est calé sur l'axe du CONTENEUR et non entre ses deux voisins. Les zones latérales n'ont jamais la même largeur : un centrage entre elles fait dériver le nom de plusieurs dizaines de pixels, et rien ne le signale tant qu'on ne le mesure pas. La zone centrale sort donc du flux, ce qui est la seule construction où l'axe du nom ne dépend pas de ce qu'on écrit à ses côtés.

layout 1036×40 12 bench

layout-13-image-triptych

Triptyque d'images en bande

Poser trois images de façon qu'elles se lisent comme UN bloc et non comme trois objets : une hauteur COMMUNE, une gouttière constante et petite devant une cellule, une bande remplie exactement d'un bord à l'autre. La hauteur, les trois poids de largeur et — quand la hauteur est laissée libre — le ratio qui la déduit sont les seuls paramètres : c'est par eux que la même bande donne un triptyque portrait à poids égaux dans un coin, ou une frise à cellules inégales sur toute une largeur.

layout 472×199 15 bench

layout-14-statement-first

Page qui parle avant de se nommer

Inverser l'ordre de lecture d'un hero : la phrase parle en premier dans un petit corps, la navigation lui fait face à la même hauteur, et le nom de marque n'arrive qu'ensuite — mais il prend alors toute la largeur utile, sans qu'AUCUNE taille intermédiaire n'existe entre les deux. C'est ce saut sans palier, et le blanc plus large qui le précède, qui font qu'un nom devient un événement au lieu d'être le plus gros d'une série.

layout 1140×848 14 bench

layout-15-primitive-mosaic

Planche de primitives, cellule carrée

Composer une couverture qui ne dit rien et se lit quand même : une planche de formes pleines posées sur une grille dont toutes les cellules sont le MÊME carré, une gouttière unique et petite, et un seul creux placé exprès. Aucune taille n'est choisie objet par objet — une primitive ne se distingue que par son RAYON, ce qui fait que la planche entière se reparamètre d'une seule variable. Et parce que 4 colonnes × 3 rangées de carrés plafonnent arithmétiquement à un aspect de 3/2, elle se cale sur la HAUTEUR de sa scène et se centre : la loi d'aspect fait partie du pattern, elle n'est pas une contrainte qu'on subit.

layout 985×734 16 bench

layout-16-header-tripartite

Header tri-parti à filet, centre sur l'axe

Poser le bandeau d'appareil qui court en tête de chaque page d'un document — émetteur à gauche, mention centrale, pile et jeton de bord à droite, un filet sous les trois — de façon que la zone centrale soit sur l'AXE du conteneur et n'en bouge plus, quels que soient les libellés de ses voisines. Deux rails `minmax(0, 1fr)` qui se font face l'y tiennent par construction. Et parce qu'un appareil n'est pas un titre, il n'a qu'UN corps et DEUX niveaux d'encre : la hiérarchie s'y lit à l'encre et à la position, jamais à la taille.

layout 1456×55 20 bench

layout-17-quadrant-epicentre

Quadrant à épicentre

Poser quatre modules de VOLUMES très inégaux sans que la grille impose leurs tailles : chaque vignette n'est ancrée que par son coin vif, qui pointe le centre du bloc, et ses deux autres bords sont libres — donc sa largeur ET sa hauteur lui appartiennent. Les quatre coins vifs convergent sur un point unique, l'épicentre, où se serrent aussi les quatre numéros. C'est ce point qui tient la composition à la place des alignements de bord, et c'est pour ça que quatre tailles différentes ne s'y lisent pas comme un défaut de calage.

layout 1320×1498 13 bench

layout-18-barre-deux-volumes

Barre de fin à deux volumes

Fermer une section par un objet qu'on voit encore après un long bloc : une barre pleine à bords ronds dont le bouton occupe la moitié droite, avec son propre arrondi et son propre aplat. Les deux se lisent comme deux volumes superposés — là où un filet horizontal surmonté d'une phrase grise et d'un lien souligné ne fait que séparer, sans rien porter.

layout 1320×80 8 bench

layout-19-tiles-over-claim

Rangée de tuiles sous énoncé

Ouvrir un écran par une rangée de trois tuiles de largeurs très inégales — une grande visuelle, deux brèves dont UNE SEULE est un aplat d'accent — puis laisser un énoncé prendre toute la parole en dessous, dans le seul très grand corps du bloc. Deux lois tiennent la composition : la grande tuile et le COUPLE de brèves se partagent la largeur presque à parts égales, ce qui interdit à la rangée de se lire comme « une image et deux annexes » ; et le marqueur de marque n'est pas calé sur la marge droite mais centré sur l'AXE de la tuile d'accent, base posée sur la baseline de la dernière ligne. C'est ce second ancrage qui rattache le marqueur à l'accent au lieu d'en faire un objet de coin.

layout 1448×668 13 bench

list-01-giant-numbers

Colonnes à numéro géant

Aligner trois à quatre arguments de même rang en colonnes, chacun ouvert par un numéro ou un chiffre démesuré qui sert à la fois de repère de lecture et de seule tache de couleur du bloc.

list 2380×479

list-02-ruled-index

Sommaire à filets numérotés

Lister les sections d'un document en donnant à chacune son libellé, une ligne d'explication et son numéro à droite, séparées par un filet fin qui appartient à l'entrée qu'il suit.

list 700×420 9 bench

list-03-two-column-toc

Sommaire numéroté 2 colonnes

Faire tenir un sommaire de dix à quatorze sections sur une seule slide, en deux colonnes numérotées, lisible d'un coup d'œil et refermable aussitôt.

list 886×560

list-04-due-rows

Liste d'échéances à quatre zones

Rendre une liste d'échéances balayable sans un seul filet : quatre zones tenues par une grille commune, une seule ligne surlignée, une seule pilule d'imminence, et le montant en unique colonne alignée à droite.

list 1512×254 12 bench

list-05-vitals-strip

Bandeau de constantes, sans carte ni filet

Aligner cinq mesures hétérogènes sur une seule ligne SANS aucun séparateur : chacune est un couple micro-libellé / valeur, l'unité étant un cran plus petite ET plus claire que le nombre qu'elle suit. C'est ce double affaiblissement de l'unité — taille et encre — qui permet de lire cinq valeurs d'affilée sans filet, sans carte et sans que l'œil confonde un nombre avec l'unité de son voisin.

list 1040×62 14 bench

list-06-email-digest

Digest de newsletter — entrées numérotées séparées par un filet

Aligner les trois à six entrées d'une lettre d'information dans un mail, chacune tenant en rubrique, titre, chapô et lien, sans qu'aucune ne se lise comme un encadré : la colonne du numéro est une CELLULE de largeur fixe et la séparation un filet posé en haut de chaque entrée — retiré sur la première, pour que le filet sépare au lieu d'encadrer.

list 520×594 16 bench

list-07-hairline-spec-table

Tableau libellé/valeur à filets débordants

Poser les caractéristiques d'un lot — livrables, formats, cadence — en couples libellé / valeur séparés par des filets d'un pixel et demi qui DÉBORDENT la marge de texte des deux côtés. Le filet n'est pas la bordure d'un bloc, c'est une règle de la page que le module traverse : il part avant le libellé et finit après la valeur, et c'est ce seul décalage qui distingue une table de spécifications d'un encadré.

list 1120×278 18 bench

shape-02-teardrop-quadrant

Carré arrondi à un seul coin droit

Donner à un aplat une ORIENTATION sans lui ajouter la moindre pointe, flèche ou étiquette : un carré dont trois coins sont arrondis du même rayon et dont le quatrième reste vif. La masse est neutre, le coin droit désigne un quadrant — et deux exemplaires posés sur des coins opposés se lisent comme miroir l'un de l'autre, ce qui pose une diagonale dans une composition qui n'a aucun texte pour la porter.

shape 483×483 8 bench

shape-03-stadium-track

Rail stadium à enfant emboîté

Poser une piste à bouts ronds qui porte un objet EMBOÎTÉ — barre de progression, interrupteur, jauge — sans que le liseré entre les deux s'épaississe dans les courbes. Une seule loi le tient : l'enfant est inset d'une constante sur ses quatre côtés et son rayon vaut celui du rail moins cet inset, ce qui fait tomber les deux centres de courbure au même point. Deux remplissages en découlent, une barre partielle et une pastille, et ce ne sont pas deux objets : c'est le même rail avec deux longueurs d'enfant.

shape 483×483 13 bench

shape-04-asterisk-mark

Astérisque de marque, six branches

Poser l'accent d'une charte « neutre + une couleur » au point de fixation, pour presque rien : un astérisque à six branches — trois traits croisés à 60° — dont l'encre couvre un demi pour cent de la slide là où le plafond d'accent est de 12 %. Un seul dessin, trois emplois (seul dans un carré noir, en fin de titre, en fin de phrase), et une encre qui change avec le sol : jaune sur le noir, encre sur le fond clair.

shape 620×491 15 bench

shape-05-text-selection

Sélection de texte à poignées

Accentuer UN mot dans une phrase en imitant la sélection de texte d'un téléphone — bandeau translucide, barre verticale à chaque bout, pastille en haut à gauche et en bas à droite — pour que l'accent se lise comme un geste du lecteur et non comme un surligneur de bureau.

shape 860×200 10 bench

shape-notched-corner

Carte à coin chanfreiné

Donner à un aplat coloré une signature de forme reconnaissable — UN coin coupé à 45° — sans rien ajouter au contenu ni recourir à un rayon, une ombre ou un liseré.

shape 208×200 3 bench

tag-01-gooey-capsule

Capsule néon soudée — mot-clé + glyphe

Faire d'un mot-clé un OBJET : un contour continu qui soude un cercle de glyphe à une pilule de texte par deux congés concaves, pour qu'un terme isolé pèse autant qu'un titre sans être plus gros.

tag 372×114 13 bench

tag-02-centered-cloud

Nuage de mots-clés centré rangée par rangée

Poser une dizaine de mots-clés de même rang au bas d'un module sans en faire une liste : chaque RANGÉE est centrée sur elle-même, si bien que les lignes de largeur inégale dessinent une silhouette de nuage — c'est le centrage par rangée, et pas le centrage du bloc, qui produit l'effet.

tag 287×140 13 bench

tag-03-action-pill-bar

Barre d'actions en pilules, une seule pleine

Aligner filtres et action principale sur une même ligne sans hiérarchie typographique : toutes les commandes sont des pilules de MÊME hauteur, les filtres portent un puits d'icône plus clair que la pilule qui le contient, et UNE SEULE pilule — la dernière — est pleine. C'est la position et le remplissage qui disent le rang, jamais la taille.

tag 672×62 16 bench

title-01-leading-rule

Titre à filet d'accent collé

Marquer le titre d'une slide d'un filet vertical d'accent sans ajouter ni couleur au texte ni élément décoratif : le filet est le seul accent du titre, et il est collé au mot.

title 760×160 7 bench

title-02-condensed-overlay-stack

Cadre typographique condensé en overlay

Tenir une slide entière avec du TEXTE SEUL — aucun aplat, aucun trait, aucune boîte — en posant trois blocs sur la scène : un titre condensé noir à l'interligne écrasé, le numéro de section entre parenthèses au MÊME fer que lui mais à l'autre bout de la colonne, et un contrepoids en micro-capitales au coin diagonalement opposé. Le cadre est transparent : il se pose par-dessus des images sans rien leur enlever.

title 1600×900 21 bench

title-03-wordmark-bottom-left

Wordmark en pied, contrepoids diagonal

Fermer une page d'accueil par le nom de la marque plutôt que de l'ouvrir par lui : wordmark de deux lignes, fer à gauche, posé sur la marge BASSE, et une réserve visuelle au coin diagonalement opposé qui l'empêche de faire basculer la page. Les deux blocs ne se croisent jamais en hauteur — c'est la seule chose qui fait lire une diagonale plutôt que deux objets empilés.

title 1036×506 18 bench

title-04-name-fills-measure

Nom réglé à la mesure, ® sous la capitale

Régler un nom de marque à la LARGEUR plutôt qu'à une taille : le corps n'est pas choisi dans l'échelle de la charte, il est déduit de la mesure disponible, et l'encre du mot affleure les deux marges à 99,6 %. Le ® qui le suit est calé sous la hauteur de capitale — un quart du corps, remonté de 55 % de la capitale — pour qu'il signe le nom sans devenir sa douzième lettre.

title 1060×185 14 bench

title-05-hyphen-break

Titre display soudé par un trait d'union

Souder une locution de deux mots en un composé unique de deux lignes, en remplaçant son ESPACE par un trait d'union frappé : « Business Proposal » devient `Business-` / `Proposal`. Le retour n'est pas calculé par la mesure, il est écrit — donc il ne bouge jamais — et le trait d'union, posé en encre la plus à droite du bloc, termine la silhouette au lieu de signaler une coupure oubliée.

title 905×214 13 bench

Des compositions qui marchent, prêtes à coller.

Sources tierces