Four illustration styles, and the one that ships
Dimesum drew all four candidate styles before choosing one, and the deciding property was not beauty: it was whether every colour in the drawing could be a token.
Four illustration styles. One of them could be themed. Dimesum picked its brand art direction on a single mechanical test: can every colour in the drawing be replaced by a token? Three candidates failed, and the prettiest failed hardest.
The four archetypes live in docs/design/brand/ART-STYLES.md, one per reference the founder collected. We drew all four rather than arguing about them: the three subjects Dimesum owns, rendered once in each archetype's own hand and palette. make ui-art-styles writes the 4x3 contact sheet.
make ui-art-styles into ui/dumplings/styles/: each archetype's dumpling above its steamer. Palettes are pixel-sampled from the references, except the Sticker column, which is theme-derived.For product art, generatability beats beauty
Product art gets regenerated; marketing art gets drawn once. Dimesum ships 18 colour palettes, and the same dumpling has to hold at 24px in a list row and at 200px on an onboarding screen. A style that needs an illustrator for every new palette cannot serve either job.
So the gate is generatability. A uniform round-capped stroke over a flat fill has exactly two colours per shape, and both are named by a token. Change the token values and every drawing in the product re-themes at once, with no redraw and no second asset.
Three of the four archetypes break, each for a different reason
The Cast is warm painterly: a woven steamer with real texture, an amber ground, and dumplings with arms and legs climbing the chopstick jar. It has the most charm of the four. It still cannot ship. A painted highlight is a gradient with two stops and a centre position, not a hex you can swap, and the shading turns to mush at 24px.
The Poster is flat geometric, olive and gold on a woven mat. It carries no outlines at all: forms are separated by colour alone. Beautiful, and structurally fatal, because a theme change moves the fills and takes the boundaries with them. Its faces sit at roughly 8% of body width, so at the 24px to 48px sizes Dimesum uses, they read as blank.
The Spread is modern editorial and the closest to our own hand: a thin uniform dark outline over flat fill, with detail carried by small repeated marks rather than by shading. The difference is subject, not stroke. It draws a whole table from above, and a table has no unit you can put in a list row. Dimesum needs a character style, not a scene style.
The Sticker is clean kawaii vector, and it is the one we ship. Uniform thin outline, flat fills, dot eyes, big coral blush, no shading. Every colour in it is a token, so all 18 palettes theme it for free, it holds at 24px and at 200px, and it is the same hand as our Lucide icons at 24px with 2px round strokes.
| Archetype | How forms separate | Where colour lives | Holds at 24px | Verdict |
|---|---|---|---|---|
| The Cast warm painterly | Warm-grey contour plus painted shading | Gradients and highlights | No, shading goes to mush | Marketing only |
| The Poster flat geometric | Colour contrast only, no outline | Four flat colours plus black | No, faces at 8% go blank | Declined |
| The Spread modern editorial | Thin uniform outline over flat fill | Flat fills, detail by repeated marks | Scene style, no small unit | Marketing site only |
| The Sticker clean kawaii vector | Uniform thin outline over flat fill | Token fills, one token stroke | Yes, body, crown, two eye dots | Ships in the product |
The deciding question: can a colour be a token?
Flat fill is what makes a colour nameable, and naming is what makes 18 palettes free. The Sticker's dumpling is one fill token plus one stroke token. The blush is rust-600 at 0.42 opacity rather than a flat pastel, so it borrows whatever warm hue the scheme carries instead of naming a colour of its own. The bamboo steamer is one tonal ladder mixed off each theme's gold-600, so its lit rim is that gold plus 22% paper and its floor plus 38% ink, in every scheme.
Neither declined style survives that edit. The Cast's highlight is baked into a gradient stop, so re-theming the body leaves a cream blob sitting on top of it. The Poster has no line holding the drawing together, so once two fills move toward each other the edge between them stops existing.
Three corrections that only side-by-side comparison caught
A drawing always looks fine on its own. Every correction below was found the same way: render the candidate to PNG, crop the reference to the same pixel size, then paste both into one image.
The mouth was drawn 20u wide and read as a smiley the moment it sat next to the reference. It came down to 10u, a third of the 28u eye gap, and the character went back to being a dumpling. Eye discs came down at the same time, from r5 to 3.4u ovals that are taller than they are wide.
An outline fitted to the reference mask by IoU scored 0.880, against 0.781 for the best hand-drawn attempt. The fitted one looked like a spiky crown. Area overlap cannot see smoothness, so the better score was the worse drawing. What ships is measured proportions with authored curves: aspect 1.041 against the reference's 1.039, every segment a cubic, no corner anywhere.
Do not optimise a metric that cannot see the thing you care about. Score the work, and look at it too.
The gathered knot has to break the contour. Our first dumpling was a smooth dome with three thin strokes painted on the top, and the review came back in one word: hair. Lines drawn on an unbroken curve can only read as hair, because nothing in the shape says the wrapper was gathered. The lobes separate only in the top 8% of the height; cut deeper and you get rabbit ears, which shipped twice before it was caught.
What we kept from the three we declined
Declining a style is not deleting it. The Cast keeps its staging instinct: props, spilling, characters interacting with objects, used where an illustrator is in the loop and nothing re-themes. The Spread keeps the red-ground confidence for the site and the licence to give a face to a non-character object. The Poster keeps the discipline of four colours per composition.
The studies themselves never ship. ui/dumplings/styles/ has the same standing as refs/: quotation, not source, and the product layer may not import it. The generator parses the archetype list out of the document's own headings, so a fifth archetype added to ART-STYLES.md appears in the sheet on the next build, and a heading it cannot draw fails the build.
The rule this settles
One style ships; the others are quotations. Take your favourite candidate and try to re-colour it by editing token values alone: if a gradient stop, a painted highlight, or a boundary made of colour contrast survives that edit, the style needs an illustrator for every theme you add. Your next step is a contact sheet, not a mood board. Draw every candidate at 24px and at 200px, in one image, and choose the one still legible at both.
Common questions
What decides a product illustration style?
Generatability decides it, not beauty. Product art is redrawn by a generator for every theme and every size, so the question is whether each colour in the drawing is named by a token that can be swapped. Dimesum ships 18 palettes, so a style holding a painted gradient would need an illustrator 18 times over.
Why did Dimesum decline the warm painterly style?
A painted highlight is a gradient with two stops and a centre position, not a hex you can swap. Re-theming the body leaves the cream highlight sitting on top of the new colour, unchanged. The same shading also turns to mush at 24px, which is the size a dumpling appears at in a list row.
Why can a style with no outlines not survive a theme change?
Forms in an outline-free style are separated by colour contrast alone, so the boundary is not drawn anywhere. Move the two fills toward each other for a dark scheme and the edge between them stops existing. A uniform stroke keeps the silhouette regardless of what the fills do, which is why Dimesum requires one.
How do you check an illustration reads at small sizes?
Render every candidate at the sizes the product actually uses and put them in one image. Dimesum checks 24px, 72px and 200px. Faces drawn at roughly 8% of body width read as blank between 24px and 48px, which is what ruled out one of the four archetypes on visual evidence rather than opinion.
Can a fitted score replace looking at the drawing?
No. An outline fitted to the reference mask by IoU scored 0.880, against 0.781 for the best hand-drawn attempt, and the higher-scoring one looked like a spiky crown. Area overlap cannot see smoothness or character. Score the work to catch proportion errors, then compare it beside the reference at the same pixel size.
Popular posts
- The append-only ledger that keeps split-expense balances exact6 min read
- Why editing a shared expense must restate the split5 min read
- Six money bugs in multi-currency expense splitting6 min read
- Settle up: how to clear group expenses in fewer transfers6 min read
- How to split an itemized bill when one dish wasn't shared6 min read