The first time I tried to illustrate Microapp, I bought the wrong vector pack.
It was a "modern SaaS illustration kit" — flat purple-and-blue characters, geometric shapes, the same pack that powers about half of the developer-tool websites on the internet. The illustrations were technically fine. They were also the visual equivalent of an airline customer-service script. The moment I dropped one onto the homepage, the brand stopped looking like Microapp and started looking like every other SaaS landing page from 2022. The illustration was doing recognition work — for the wrong brand.
Most companies treat illustrations as decoration. The label on the box reads "adds visual interest." The role they actually play is recognition: a member who sees a Microapp hero illustration on a tweet should know it's a Microapp tweet before they read the caption. Patagonia's photography does that work. The Stripe gradient does that work. The Casio-watch / Penguin-paperback aesthetic Microapp keeps reaching for is the visual asset that has to do it here — and stock vectors actively undo it.
Illustrations are recognition. Not decoration.
The version I commissioned in place of the vector pack is hand-drawn — every shape has a slight imperfection, every line has a small wobble. The aesthetic is closer to a riso print or a band poster than to a SaaS illustration kit. The cost was real (drawing takes longer than picking from a pack). The payoff is that a member who's seen any one Microapp hero illustration recognizes the next one as also-Microapp, by visual fingerprint alone.
The transferable why: illustrations are felt before they're read. They do brand recognition work the headline can't, because the eye reads the picture half a second before it reads the words. Stock vector kits give you decoration; they don't give you recognition. Pick a visual posture distinct enough to be yours, and invest the time to keep every illustration inside it.
Locked 2026-05-06 · hand-drawn aesthetic · stock vector kits explicitly rejected
The second decision was the set of rules every illustration on the site has to honor. Six of them. Short enough to remember; strict enough to keep the aesthetic intact.
Dark outlines on every shape. Every shape, every figure, every accent — wrapped in a 3-to-4-pixel --color-brand-ink stroke. The outline is the single most load-bearing rule. Without it, the brand drifts toward flat-design SaaS within a quarter. With it, even a six-line SVG icon reads as a Microapp icon.
Rounded corners, rounded everything. No sharp angles. Buildings have rounded roofs. Calculators have rounded keys. Even text glyphs in custom illustrations get a slight radius. The roundness is the warmth — angular illustrations read as serious, rounded illustrations read as approachable.
Brand palette only. The same twenty-two colors that live in global.css are the only colors illustrations are allowed to use. No accent purples picked from a moodboard. No mid-tone grays. The palette stays whole; illustrations participate in it, never extend it.
People look like the world looks. Every illustration with humans includes diverse representation by default — skin tones, ages, body shapes, abilities. Single-tone scenes ("five identical bros around a whiteboard") are explicitly banned. The brand says "for everyone" in its mission; the illustrations are the place that claim is most visible.
A small hand-drawn imperfection. A wobble in the line, a slightly off-center shape, a stroke that doesn't quite close. The imperfection is intentional. Perfect lines read as machine-generated; imperfect ones read as made by a person with an opinion.
No gradients, no shadows, no glow. Solid fills only. No 3D rendering. No photorealism. No drop shadows on shapes (the hard offset shadow from the colophon belongs to cards and buttons, not to illustration shapes themselves). The flat-with-outline aesthetic is the whole point; gradients and glows fight it.
Six rules. Every illustration passes all six. Five-of-six is not "almost."
The transferable why: a small, strict set of visual rules produces a consistent aesthetic across illustrations made by different hands at different times. Loose rules — "use the brand palette mostly," "rounded corners where it makes sense" — drift the second a deadline arrives and a different artist is involved. Strict rules carry the aesthetic across collaborators and across years. Pick rules tight enough that an illustration either passes or doesn't; let the rules do the consistency work.
Locked 2026-05-06 · the six illustration rules · checked before merge
The third decision was about the relationship between the editorial library and the rest of the visual system.
The site has seven editorial illustrations — full-page WebP heroes commissioned for specific pages. The farm scene. The movement scene. The cool-nerd scene. The membership scene. The agent-team scene. The colors scene. The voice scene. Each one is heavy — 30 to 90 kilobytes. Each one is specific — it illustrates a particular page's argument, not a generic concept. Each one has a job, the way Patagonia's "Don't buy this jacket" ad has a job.
The mistake to avoid is treating the editorial library as decoration to scatter across the site. An editorial hero belongs on the page it was made for. Reusing the farm scene on the colophon page would dilute both pages — the colophon's argument doesn't need the farm, and the farm's argument doesn't carry into the colophon. The rule is: an editorial illustration earns its place by having a specific job on a specific page. If you can't name the job in one sentence, the illustration isn't pulling its weight.
Each illustration has a job. If you can't name it, don't ship it.
The visual system below the editorial library is a set of inline SVG primitives — calculator, app icon, shield, color wheel, code brackets, cartoon face. Hand-authored, palette-token only, no raw hex. These do the lighter visual work — category cards, agent avatars, feature accents — and they share the same six rules with the editorial heroes. The system has one visual language; the editorial heroes and the SVG primitives are the loud and the quiet ends of the same scale.
The transferable why: a hero illustration that gets reused as decoration loses its weight on the page it was made for and dilutes the brand on the pages it shows up on by accident. Treat the editorial library as a set of named tools with specific jobs. The inline primitives carry the light visual work everywhere else. Don't conflate the two; they do different work and need different review.
Locked 2026-05-06 · 7 editorial heroes · 6 inline primitives · one visual language
The last decision is the one that lets the aesthetic outlive any one collaborator. The how-to.
Two paths, depending on what you're making. For an editorial hero — a full-page picture — generate with the same model and prompt family used for the existing seven. The prompt template lives with the brand assets; the final WebP gets uploaded to the CDN and dropped into the relevant page. Always include an alt attribute that names what's in the picture so the page is readable without the image.
For an inline SVG primitive — a category card icon, an agent avatar, a feature accent — hand-author the SVG. Default canvas is viewBox="0 0 120 120" for icons or 80 80 for avatars. Apply the six rules. Fill with var(--color-brand-*) tokens — never raw hex, because the palette test will fail the build. Stroke is always var(--color-brand-ink). Save the file next to the consuming component; promote to a shared file if it's reused three or more times.
Two paths. Both end at the same six rules.
Before merge, walk through the six rules one by one against the illustration. Are there dark outlines on every shape? Are corners rounded everywhere? Is the palette pure? Are the people diverse? Is there a small hand-drawn imperfection? No gradients or shadows? If the answer to any of these is "almost yes," the answer is no — and the illustration goes back for revision. The rules don't have a grade of B-minus.
The transferable why: the only way an aesthetic survives multiple collaborators is by writing down the checklist that defines pass-or-fail. Verbal alignment fades; written rules survive. An illustrator joining the project six months from now reads this chapter and produces work that fits the system on the first try — because the system is legible, not implicit.
Locked 2026-05-06 · editorial WebP + inline SVG paths · both checked against the six rules
That's the visual system. Hand-drawn, six rules, editorial heroes with jobs, inline primitives sharing the language. The brand is what the brand looks like — and the look is what the rules above produce, every time, on every surface.