Bodoni
L’affiche
Le Didot de l’imprimeur parisien, en romain : le grand mot d’un titre, les titres en casse de phrase, les chiffres d’affiche. Jamais d’italique doré : l’emphase passe par la casse et le corps.
La bible · édition 2026
Deco Punk Streamline
L’Art Déco des années 1930 — laiton, gradins, soleils levants, lignes de vitesse des locomotives — rejoué avec la lumière d’un écran. Un vert qui ne s’allume que pour dire « allez-y ».
Ce site en est l’application complète. Cette page en est la règle : sept lois, chacune démontrée en direct par les composants que vous venez de traverser.
Ce qui ne se négocie pas
Les sept lois
Une loi sans implémentation n’est qu’un vœu. Chacune a sa traduction dans le code : un jeton, une classe, une règle.
-
Trois matières, pas une de plus
Le laiton brossé tient la structure, la laque noire porte les surfaces, le verre, celui des boutons, des feux et des écrans, apporte la lumière. Le tube est du laiton allumé, l’écran est du verre allumé : aucune quatrième matière n’entre.
L’Art Déco est un art de matériaux nobles en nombre compté. Une quatrième matière, c’est un décor de plus et une identité de moins. La lumière n’est pas une matière : c’est ce qui sort des trois.
--mat-brass · --lit* (laiton allumé : le tube) · --mat-lacquer · --mat-glass (vert : bouton, feu) · --mat-glass-screen (l’écran) · --light-* (la source) -
Le vert dit allez-y
Le vert dit allez-y. Il n’apparaît que sur une action que l’on peut lancer (bouton et canal de verre du bouton), un feu (3D ou SignalLight), un état validé ou terminé. Tout le reste qui brille est du laiton ; la lumière des écrans est blanc chaud ou laiton, jamais verte.
C’est la grammaire d’un feu de signalisation. Si tout brille en vert, plus rien n’indique la marche à suivre : deux zones vertes animées par écran, pas davantage.
--go* (vert : bouton, feu, état validé) · --lit* (laiton allumé : tubes, focus, liens, station courante) · les noms --tube-* et --dp-neon* désignent le laitonSurvolez-moiLe vert dit allez-y : le feu, le bouton. Le reste qui brille est du laiton.
-
Une démesure par écran
Chaque écran a un seul élément géant, dix fois le corps du texte ou plus. Tout le reste se tait autour.
Les affiches de 1930 se lisaient depuis un tramway. L’échelle hiérarchise mieux que n’importe quel ornement.
--type-colossal : clamp(3rem, 1rem + 11vw, 13rem) · un seul .dp-colossal, mot fantôme ou objet géant par écran -
Orné, puis nu
Toute section ornée est suivie d’une respiration noire où seule la typographie parle.
L’ornement ne se voit que par contraste avec le vide. Un palace a aussi des couloirs.
.dp-bare -
Le mouvement file et freine
On bouge à l’horizontale ou en rayon. On accélère, puis on freine franchement, sans jamais rebondir. Les lignes de vitesse ne suivent que ce qui bouge.
Le Streamline est né des locomotives et des paquebots : de la masse lancée, maîtrisée, qui s’arrête pile.
--ease-streamline · --ease-brake -
Un ornement, une fonction
Le soleil mesure une progression, les gradins hiérarchisent, les lignes de vitesse montrent le mouvement, le feu décide. Un ornement qui ne sert à rien est retiré.
Le Deco Punk n’est pas un filtre vintage : c’est une interface. Chaque motif doit pouvoir se lire comme une information.
Sunburst = progression · Ziggurat = hiérarchie · SpeedLines = mouvement · SignalLight = décision · DecoScreen = preuve · FlapBoard = destination · lumière = où regarder -
L’axe d’abord
Les compositions ornées sont symétriques sur un axe. La lecture se fait en colonnes asymétriques. Jamais de centrage mou.
La symétrie donne la solennité, l’asymétrie donne le rythme de lecture. Le centrage par défaut ne donne rien.
SectionHeading variant="axis" | "split" | "bare"
Typographie
Trois familles, une presse
Jost
La capitale
La voix encore, en capitales très espacées, comme les affiches de 1930 : les lignes d’un titre composé, les sur-titres, les boutons, la suite d’un titre en bas de casse légère.
Jost
La voix
Le Futura, vendu en France en 1930 sous le nom d’Europe : le texte courant et les chapeaux, aérés, avec l’interligne et l’approche de la presse.
Courier
La machine
La machine à écrire de la rédaction : folios, numéros, téléphone, légendes, télégrammes. Jamais un titre.
Composants vivants
Composants
Ce sont les vrais composants du site, pas des images. Survolez-les, passez-les au clavier.
Motion design et vidéo
Faire tenir un message en trente secondes.
- Films d’entreprise et institutionnels
- Motion design explicatif
- Habillages et génériques
Identité visuelle · PAO · 2024
L’identité du symposium Cyb’Air Sud
Une qualité alignée sur les attentes, et des délais tenus scrupuleusement.
Le catalogue complet, avec les props et la règle d’usage de chaque pièce : le design system.
Et ailleurs sur le site : le régulateur en haut à droite, dont l’aiguille suit votre lecture ; le curseur à équerres qui se referme sur ce qui se clique ; le formulaire dont le feu passe au vert à mesure qu’il se remplit.
Mouvement
Filer, freiner, se taire
- Lancer
cubic-bezier(.7, 0, .15, 1)— la masse accélère, file, puis freine franchement.- Freiner
cubic-bezier(.12, .8, .1, 1)— l’arrivée : un départ vif, un arrêt long et précis.- Piloter au défilement
- Épinglages, voies horizontales, signaux et jauges suivent la lecture en CSS pur (
animation-timeline). Aucune bibliothèque d’animation. - Composer et encrer
- Les titres se composent mot à mot, comme des caractères posés dans le composteur, puis le rouleau passe : l’encre monte d’un ton sec au ton plein, de gauche à droite.
- Repérer
- Sous le mot colossal, la plaque de laiton, imprimée hors repère, glisse en repère par six crans au défilement.
- Gaufrer
- Les grands chiffres et les mots fantômes sont pressés sans encre ; la lumière de leur relief suit le pointeur.
- La rotative
- Les bandeaux avancent avec le défilement, dans son sens ; ils ne dérivent seuls qu’au pointeur fin.
- Se taire
- Avec « réduire les animations », tout ce qui n’informe pas s’arrête : les contenus restent lisibles, les signaux restent allumés.
- Budget
- Peu de JavaScript : le récit du hero, sa scène 3D chargée après coup, et quelques gestes que le CSS ne sait pas faire. Le reste est du CSS.
L’ornement qui décide
Le feu
Un feu piéton en laiton, et dans ses lentilles le marcheur du logo. Il ne décore pas : il dit où vous en êtes. Rouge tant qu’il manque quelque chose, vert quand on peut y aller.
-
RougeIl manque quelque chose : un champ du formulaire, une page introuvable.
-
ÉteintLe battement entre deux états : l’envoi en cours.
-
VertTout est prêt : le formulaire part, la finale de chaque page invite à traverser.
Modèle 3D en laiton Art déco, pictogrammes refaits à partir des poses du logo animé, rendu une fois dans Blender en trois états sur fond transparent. Le site ne charge aucun moteur 3D : trois images et des halos en CSS.
Le marcheur
Motion, le mouvement ; Drive, la conduite. Le personnage du logo marche depuis le premier site de Motion Drive. Ici, il marche au rythme de votre lecture : dans l’en-tête, il avance quand vous faites défiler la page et s’arrête quand vous vous arrêtez.
En volume, il devient hologramme : le personnage modélisé en 3D, rendu en verre néon et projeté depuis un socle de laque et de laiton — la troisième matière.
Le fichier d’origine pesait 8,7 mégaoctets d’expressions After Effects. Il a été « cuit » en 24 images et 18 pièces animées en CSS : quelques kilo-octets, aucun lecteur embarqué.
Donnons le feu vert à votre interface
Un site, une identité, un système de design : un premier échange suffit pour savoir ce qu’il faut, dans quel ordre et avec quels moyens.