Illustrations

Microapp pictures look like nothing else. They're warm, hand-drawn, faintly editorial — closer to a Penguin paperback than to corporate-stock vector clip-art. This chapter is the canonical reference: the style, the rules, the existing library, and how to make a new illustration that lands in the same family.

The rules

Every Microapp illustration — whether a WebP scene or an inline SVG primitive — follows the same six rules. They are non-negotiable. Drift on any one and the picture stops looking like Microapp.

1. Bold dark outline.

   Every shape carries a #1B3A1B stroke. Thickness 3–4px for hero shapes, 2–2.5px for inner detail, 1.5px for fine work. Outlines are the brand's signature — they read as confidence, not delicacy.

2. Rounded corners, rounded everything.

   Hard 90° corners are forbidden. Cards round at rx 8–22. Buttons and pills go to 9999px. Even speech bubbles round. The brand has soft edges by design — premium without being sharp.

3. The palette is locked.

   Forest green (--color-brand-forest) and gold (--color-brand-gold) lead. Lime green (--color-brand-lime) is the accent. Cream (--color-brand-paper) is the background. Coral (--color-brand-coral) appears only as a small spark of warmth. Skin tones use natural ranges (#FFDBB5 warm, plus deeper tones — never one tone for all characters).

4. Hand-drawn, not vector-perfect.

   Slight imperfection is the look. Slopes wobble a degree, weights vary slightly between strokes, characters have asymmetric pupils. Pictures should look made-by-a-human, even when they're not. Avoid Adobe Illustrator's "precision" defaults — they read corporate.

5. People are diverse and real.

   Every scene featuring people includes a range of races, ages, and body types — without exception. No one ethnicity, age, or gender carries a scene alone. Speech bubbles use first-person ("I belong here!"), never third-person.

6. Speech bubbles do the talking.

   Brand pictures speak. Bubbles + clouds carry single-sentence lines in the brand voice (§6 Voice). Bubbles are always pointing to a face. Clouds float above and carry abstract truths ("Everything is possible.", "Built different."). Type inside bubbles is sans-serif bold — Plus Jakarta Sans 700+ or hand-lettered look.

The editorial library

Seven hero illustrations form the brand's editorial vocabulary. Each one has a specific job — the same way Patagonia's "Don't buy this jacket" ad has a job. Use them where they fit; don't use them as decoration where they don't.

SVG primitives

Inline SVGs used as decorative accents — for category cards, feature blocks, /agent-os and /system-design illustrations. Same rule set as editorial: dark outline, rounded shapes, brand palette only.

How to make a new one

Two paths. Pick by use case.

1. Editorial hero (WebP) — for a full-page picture.

   Generate with the same model and prompt family used for the existing seven. Prompt template lives with brand assets (see Daniel for the WebP source). Final asset uploaded to d2xsxph8kpxj0f.cloudfront.net and dropped into the relevant page. Always include an alt attribute that names what's in the picture (the existing seven model this).

2. Inline SVG primitive — for a category card, agent avatar, or feature accent.

   Hand-author the SVG. Use viewBox="0 0 120 120" as the default canvas (or 80 80 for avatars). Apply the six rules above. Fill via var(--color-brand-*) tokens — never raw hex (the tests/brand-palette.test.ts guardrail will fail the build). Stroke is always #1B3A1B. Save next to the consuming component; if it's reused 3+ times, promote to a shared file.

3. Test the result against the rules before merging.

   Read the six rules above. Walk through them one by one against the new illustration. If you can't honestly answer "yes" to all six, the picture isn't done yet — go back. Specifically: are there dark outlines on every shape? Are corners rounded everywhere? Is the palette pure? Are the people diverse?