Accueil / Blog / Design

Quatre styles d'illustration, un seul livré

29 août 2026 · 9 min de lecture · Dimesum Engineering

Dimesum a dessiné les quatre styles candidats avant d'en choisir un, et la propriété décisive n'était pas la beauté mais la capacité à faire de chaque couleur un token.

Quatre styles d'illustration. Un seul pouvait être thémé. Dimesum a choisi sa direction artistique de marque sur un seul test mécanique : chaque couleur du dessin peut-elle être remplacée par un token ? Trois candidats ont échoué, et le plus joli a échoué le plus lourdement.

Les quatre archétypes se trouvent dans docs/design/brand/ART-STYLES.md, un par référence rassemblée par le fondateur. Nous les avons tous les quatre dessinés plutôt que d'en débattre : les trois sujets qui appartiennent à Dimesum, rendus une fois dans le trait et la palette propres à chaque archétype. make ui-art-styles écrit la planche contact 4x3.

Pour l'illustration produit, la générabilité prime sur la beauté

L'illustration produit est régénérée ; l'illustration marketing n'est dessinée qu'une fois. Dimesum livre 18 palettes de couleurs, et le même dumpling doit tenir à 24px dans une ligne de liste comme à 200px sur un écran d'accueil. Un style qui réclame un illustrateur pour chaque nouvelle palette ne peut remplir ni l'un ni l'autre de ces rôles.

Le critère est donc la générabilité. Un trait uniforme à extrémités arrondies posé sur un aplat compte exactement deux couleurs par forme, et chacune est nommée par un token. Modifiez les valeurs des tokens et chaque dessin du produit se re-thème d'un coup, sans redessin et sans second asset.

Trois des quatre archétypes se cassent, chacun pour une raison différente

Le Casting relève de la peinture chaleureuse : un panier tressé avec une vraie texture, un fond ambré, et des dumplings à bras et jambes qui grimpent sur le pot à baguettes. C'est le plus charmant des quatre. Il ne peut malgré tout pas partir en production. Un reflet peint est un dégradé avec deux arrêts et une position centrale, pas un hex que l'on peut échanger, et l'ombrage vire à la bouillie à 24px.

L'Affiche est géométrique à plat, olive et or sur un set tressé. Elle ne porte aucun contour : les formes sont séparées par la seule couleur. Superbe, et structurellement fatale, car un changement de thème déplace les aplats et emporte les frontières avec eux. Ses visages occupent environ 8% de la largeur du corps, si bien qu'aux tailles de 24px à 48px utilisées par Dimesum, ils apparaissent vides.

La Double Page est de style éditorial moderne et la plus proche de notre propre trait : un contour sombre fin et uniforme sur un aplat, le détail porté par de petites marques répétées plutôt que par l'ombrage. La différence tient au sujet, pas au trait. Elle dessine toute une table vue de dessus, et une table n'offre aucune unité à placer dans une ligne de liste. Dimesum a besoin d'un style de personnage, pas d'un style de scène.

L'Autocollant est du vecteur kawaii épuré, et c'est celui que nous livrons. Contour fin uniforme, aplats, yeux en points, grandes rougeurs corail, pas d'ombrage. Chaque couleur y est un token, donc les 18 palettes le thèment gratuitement, il tient à 24px comme à 200px, et il partage le trait de nos icônes Lucide à 24px avec des traits arrondis de 2px.

La question décisive : une couleur peut-elle être un token ?

C'est l'aplat qui rend une couleur nommable, et c'est le fait de la nommer qui rend les 18 palettes gratuites. Le dumpling de L'Autocollant, c'est un token d'aplat plus un token de trait. La rougeur est rust-600 à 0.42 d'opacité plutôt qu'un pastel plat, si bien qu'elle emprunte la teinte chaude que porte le thème au lieu de nommer une couleur propre. Le panier vapeur en bambou est une seule échelle tonale mélangée à partir du gold-600 de chaque thème, si bien que son bord éclairé est cet or plus 22% de papier et son fond cet or plus 38% d'encre, dans chaque thème.

Aucun des deux styles écartés ne survit à cette modification. Le reflet du Casting est cuit dans un arrêt de dégradé, si bien que re-thémer le corps laisse une tache crème posée par-dessus. L'Affiche n'a aucune ligne qui tient le dessin ensemble, si bien que dès que deux aplats se rapprochent, la bordure entre eux cesse d'exister.

Trois corrections que seule la comparaison côte à côte a révélées

Un dessin paraît toujours correct seul. Chaque correction ci-dessous a été trouvée de la même façon : rendre le candidat en PNG, recadrer la référence à la même taille en pixels, puis coller les deux dans une seule image.

La bouche était dessinée à 20u de large et se lisait comme un smiley dès qu'elle était posée à côté de la référence. Elle est descendue à 10u, un tiers de l'écart de 28u entre les yeux, et le personnage est redevenu un dumpling. Les disques des yeux ont été réduits en même temps, de r5 à des ovales de 3.4u plus hauts que larges.

Un contour ajusté au masque de référence par IoU a obtenu 0.880, contre 0.781 pour la meilleure tentative dessinée à la main. Celui qui était ajusté ressemblait à une couronne hérissée. Le recouvrement de surface ne voit pas la douceur des courbes, si bien que le meilleur score était le moins bon dessin. Ce qui part en production, ce sont des proportions mesurées avec des courbes dessinées : un rapport de 1.041 contre 1.039 pour la référence, chaque segment une cubique, aucun angle nulle part.

La fronce doit briser le contour. Notre premier dumpling était un dôme lisse avec trois fins traits peints sur le dessus, et le retour est revenu en un mot : cheveux. Des lignes tracées sur une courbe continue ne peuvent se lire que comme des cheveux, car rien dans la forme ne dit que la pâte a été froncée. Les lobes ne se séparent que dans les 8% supérieurs de la hauteur ; coupez plus profond et vous obtenez des oreilles de lapin, ce qui est parti en production deux fois avant d'être repéré.

Ce que nous avons gardé des trois styles écartés

Écarter un style, ce n'est pas le supprimer. Le Casting garde son instinct de mise en scène : accessoires, débordements, personnages qui interagissent avec des objets, employés là où un illustrateur est dans la boucle et où rien ne se re-thème. La Double Page garde l'assurance du fond rouge pour le site et la liberté de donner un visage à un objet qui n'est pas un personnage. L'Affiche garde la discipline des quatre couleurs par composition.

Les études elles-mêmes ne partent jamais en production. ui/dumplings/styles/ a le même statut que refs/ : une citation, pas une source, et la couche produit ne doit pas l'importer. Le générateur lit la liste des archétypes à partir des titres du document, si bien qu'un cinquième archétype ajouté à ART-STYLES.md apparaît sur la planche au build suivant, et un titre qu'il ne sait pas dessiner fait échouer le build.