Startseite / Blog / Design

Vier Illustrationsstile, einer geht in Produktion

29. August 2026 · 8 Min. Lesezeit · Dimesum Engineering

Dimesum hat alle vier Kandidatenstile gezeichnet, bevor es einen wählte, und die entscheidende Eigenschaft war nicht Schönheit, sondern ob jede Farbe der Zeichnung ein Token sein konnte.

Vier Illustrationsstile. Einer davon ließ sich per Theme umfärben. Dimesum wählte seine Bild-Art-Direction anhand eines einzigen mechanischen Tests: Lässt sich jede Farbe der Zeichnung durch ein Token ersetzen? Drei Kandidaten fielen durch, und der schönste fiel am deutlichsten durch.

Die vier Archetypen liegen in docs/design/brand/ART-STYLES.md, einer je Referenz, die der Gründer gesammelt hat. Wir haben alle vier gezeichnet, statt über sie zu streiten: die drei Motive, die Dimesum besitzt, jeweils einmal in Handschrift und Palette jedes Archetyps gerendert. make ui-art-styles schreibt das 4x3-Kontaktblatt.

Bei Produktgrafik schlägt Generierbarkeit die Schönheit

Produktgrafik wird neu generiert, Marketinggrafik wird einmal gezeichnet. Dimesum liefert 18 Farbpaletten, und derselbe Dumpling muss bei 24px in einer Listenzeile und bei 200px auf einem Onboarding-Screen bestehen. Ein Stil, der für jede neue Palette einen Illustrator braucht, taugt für keine der beiden Aufgaben.

Das Kriterium ist also die Generierbarkeit. Eine gleichmäßige Kontur mit runden Enden über einer flachen Füllung hat genau zwei Farben pro Form, und beide sind durch ein Token benannt. Ändere die Token-Werte, und jede Zeichnung im Produkt nimmt sofort das neue Theme an, ohne Neuzeichnen und ohne zweites Asset.

Drei der vier Archetypen scheitern, jeder aus einem anderen Grund

Das Ensemble ist warm malerisch: ein geflochtener Dämpfer mit echter Textur, ein bernsteinfarbener Grund und Dumplings mit Armen und Beinen, die am Stäbchenbecher hochklettern. Es hat den meisten Charme der vier. Ausliefern lässt es sich trotzdem nicht. Ein gemaltes Glanzlicht ist ein Verlauf mit zwei Stopps und einer Mittelposition, kein Hex-Wert, den du tauschen kannst, und die Schattierung zerläuft bei 24px zu Brei.

Das Plakat ist flach geometrisch, oliv und gold auf einer geflochtenen Matte. Es trägt gar keine Konturen: Formen werden allein durch Farbe getrennt. Schön und strukturell fatal, denn ein Theme-Wechsel verschiebt die Füllungen und nimmt die Grenzen mit. Seine Gesichter liegen bei etwa 8% der Körperbreite, sodass sie bei den 24px bis 48px, die Dimesum verwendet, leer wirken.

Die Doppelseite ist modern editorial und unserer eigenen Handschrift am nächsten: eine dünne, gleichmäßige dunkle Kontur über flacher Füllung, deren Details von kleinen wiederholten Zeichen statt von Schattierung getragen werden. Der Unterschied liegt im Motiv, nicht in der Kontur. Sie zeichnet einen ganzen Tisch von oben, und ein Tisch hat keine Einheit, die du in eine Listenzeile setzen kannst. Dimesum braucht einen Figurenstil, keinen Szenenstil.

Der Sticker ist sauberer Kawaii-Vektor, und ihn liefern wir aus. Gleichmäßige dünne Kontur, flache Füllungen, Punktaugen, große korallfarbene Wangen, keine Schattierung. Jede Farbe darin ist ein Token, sodass ihn alle 18 Paletten kostenlos einfärben, er bei 24px und bei 200px besteht und dieselbe Handschrift hat wie unsere Lucide-Icons bei 24px mit 2px runden Konturen.

Die entscheidende Frage: Kann eine Farbe ein Token sein?

Die flache Füllung macht eine Farbe benennbar, und die Benennung macht 18 Paletten kostenlos. Der Dumpling des Stickers ist ein Füllungs-Token plus ein Kontur-Token. Die Wangenröte ist rust-600 mit 0.42 Deckkraft statt eines flachen Pastelltons, sodass sie den warmen Farbton des jeweiligen Schemas übernimmt, statt eine eigene Farbe zu benennen. Der Bambusdämpfer ist eine einzige Tonleiter, aus dem gold-600 jedes Themes gemischt, sodass sein beleuchteter Rand dieses Gold plus 22% Papier und sein Boden plus 38% Tinte ist, in jedem Schema.

Keiner der abgelehnten Stile übersteht diese Änderung. Das Glanzlicht des Ensembles ist in einen Verlaufsstopp eingebrannt, sodass beim Umfärben des Körpers ein cremefarbener Klecks darauf sitzen bleibt. Das Plakat hat keine Linie, die die Zeichnung zusammenhält, sodass die Kante zwischen zwei Füllungen aufhört zu existieren, sobald sie sich aufeinander zubewegen.

Drei Korrekturen, die nur der direkte Vergleich zutage brachte

Eine Zeichnung sieht für sich allein immer in Ordnung aus. Jede Korrektur weiter unten wurde auf dieselbe Weise gefunden: den Kandidaten als PNG rendern, die Referenz auf dieselbe Pixelgröße zuschneiden, dann beide in ein Bild einfügen.

Der Mund war 20u breit gezeichnet und las sich als Smiley, sobald er neben der Referenz stand. Er kam auf 10u herunter, ein Drittel des 28u breiten Augenabstands, und die Figur war wieder ein Dumpling. Die Augenscheiben kamen zugleich herunter, von r5 auf 3.4u Ovale, die höher als breit sind.

Eine per IoU an die Referenzmaske angepasste Kontur erreichte 0.880, gegenüber 0.781 für den besten von Hand gezeichneten Versuch. Die angepasste sah aus wie eine stachelige Krone. Die Flächenüberlappung kann keine Glätte sehen, sodass der bessere Wert die schlechtere Zeichnung war. Ausgeliefert werden gemessene Proportionen mit selbst gezeichneten Kurven: Seitenverhältnis 1.041 gegenüber 1.039 der Referenz, jedes Segment ein kubisches, nirgends eine Ecke.

Der geraffte Knoten muss die Kontur durchbrechen. Unser erster Dumpling war eine glatte Kuppel mit drei dünnen Strichen oben aufgemalt, und das Review kam in einem Wort zurück: Haare. Auf eine ununterbrochene Kurve gezeichnete Linien können sich nur als Haare lesen, weil nichts an der Form sagt, dass der Teig gerafft wurde. Die Wülste trennen sich nur in den oberen 8% der Höhe; schneide tiefer, und du bekommst Hasenohren, die zweimal ausgeliefert wurden, bevor es auffiel.

Was wir aus den drei abgelehnten behalten haben

Einen Stil abzulehnen heißt nicht, ihn zu löschen. Das Ensemble behält seinen Inszenierungsinstinkt: Requisiten, Überlaufendes, Figuren, die mit Objekten interagieren, eingesetzt dort, wo ein Illustrator beteiligt ist und nichts umgefärbt wird. Die Doppelseite behält die Selbstsicherheit des roten Grunds für die Website und die Freiheit, einem figurlosen Objekt ein Gesicht zu geben. Das Plakat behält die Disziplin von vier Farben pro Komposition.

Die Studien selbst werden nie ausgeliefert. ui/dumplings/styles/ hat denselben Status wie refs/: Zitat, nicht Quelle, und die Produktschicht darf es nicht importieren. Der Generator liest die Archetypenliste aus den Überschriften des Dokuments selbst, sodass ein fünfter Archetyp, der ART-STYLES.md hinzugefügt wird, beim nächsten Build im Blatt erscheint, und eine Überschrift, die er nicht zeichnen kann, den Build scheitern lässt.