Grainy Gouache Illustration

Illustration: Grainy gouache

A warm editorial style: one cute animal doing a design or coding thing, painted in flat, outline-free shapes that are softly shaded and dusted with fine dark grain, on a saturated hot-pink card with cream sparkles and falling autumn leaves. Use it where a product wants warmth and charm: empty states, onboarding, seasonal blog headers, "we're working on it" pages.

Boundary: for clean flat vector with no texture and no animals, use illustration-flat. For a hand-inked critter with hatching and googly eyes on white, use illustration-ink-sketch. For people with inked outlines, use illustration-outlined-cartoon. This style has no human cards; if a brief needs a person, use one of those instead.

Extracted from a set of 42 original design-and-coding cards in 14 styles; the three cards in examples/ are this style's shipped cards.

The look in one sentence

Outline-free shapes, each filled with a soft light-to-dark gradient and then speckled with a fine dark grain that thickens toward the shape's edges and into its shadows, sitting on hot pink #FF81BE with a chalky purple pool beneath.

Remove the edge-gathered grain and it becomes plain flat vector; change the pink and it stops belonging to the set.

Palette

Measured from the examples. Every large form uses a ramp, never one flat colour. style.json lists every legitimate value.

Never: an outline around a shape; blue, teal, purple or grey anywhere except the pool; pure white except the lamp-light cone; any background but #FF81BE; a large shape in one flat colour; glows or rim lights. Cream decor never sits on cream fur, and a vermilion head never sits on pink alone: put it in front of a dark plane.

Line and fill

At 480 wide:

• Shapes are fills, never stroked. Separate shapes with a value or hue step plus the grain edge. A stroke around a mug or a head is the first sign of a different style.
• Thin dark detail lines only, round caps, never #000: leaf veins 0.6-0.7, leaf stems 0.9, whiskers 0.75-0.8 (#1A0E0F or #3A1A0C), mouth and lid line 1.05-1.3 (#120A0B), finger creases 0.7 (#1A0A04), feather lines 0.9-1.1.
• Cream lines: steam 1.15-1.35, burst rays 1.3, scarf braces 1.1, rain 1.0 at stroke-opacity 0.22-0.5, ear-fur ticks 1.1.
• Code on screens: stroke 2.2-2.6, round caps, rows 7-8.4 apart, 2-3 segments per row in ochre, cream, coral, olive-green.
• Gradients: radial for round forms (cx 0.42-0.46, cy 0.30-0.34, r 0.72-0.78; stops light 0, mid 0.5, shade 0.82, edge 1). Vertical linear for slabs (light top, dark base). Horizontal 5-stop for cylinders (dark 0, mid 0.22, highlight 0.45, mid 0.75, darkest 1).
• Overlays add depth without new colours: gEnds across a box, gBase (#5A0E02 0→0.5) at a cylinder's foot, a crown band (#7A3510 @0.3) clipped to the top of a head, a radial "sweat" (#5A0E02 0→0.55 at the rim) over a torso, sleeve gradients (dark maroon 0.55 outside → #FF8A50 0.12-0.22 inside).
• Cast shadows inside the figure: the sleeve path filled #4A0901, blurred 2.4 (soft), offset 3.5 px, clipped to the torso, opacity 0.85.
• Grain: wrap every solid shape group in filter="url(#p-grain)"; big light planes (window frames, desk tops) use grainL. Faces' details, code, cream decor, whiskers and veins stay crisp: draw them outside the grain group, after it.
• Patterns (userSpaceOnUse): knit 7x6 chevron, rib 3.2x10 stripes, Fair-Isle band 12x11 (maroon, cream drop, ochre dots), scarf 22x19, feather chevron 8x7.

Characters

Animals only: fox, otter and owl in the examples. A new card brings one new or repeated animal (rabbit, hedgehog, bear cub, raccoon, cat, badger all suit).

• Proportions: head as wide as the torso or wider (84-92 px); head height 0.8-1.0 x torso height (shoulder to seat); head top to seat 110-150 px, plus 30-40 if the legs reach the floor. Short limbs, no visible neck: the chin overlaps the shoulders by 8-10 px. Measure it in the SVG: a 0.6 head-to-torso ratio looks lanky next to the set.
• Head: one smooth closed path in a radial fur gradient; a darker crown band clipped to the top; a cream muzzle (gCream) with a darker copy 1.6 px lower at 0.55 opacity as its shadow; ears with a darker inner shape (#C2300A or #5A2408); fox ear tips black via a clipPath. Tilt the head group 5-9 degrees toward what the animal looks at.
• Eyes (the signature): cream ring #F7D6A6 r 10-12, pupil #0D0809 at 0.81 r shifted 0.22 r toward the look direction, a cream 4-point star (scale 0.52-0.78) on the look side above centre, a cream dot r 1.35-1.6 below on the other side. Centres 29-37 px apart, so the eyes nearly touch. A sleepy variant clips a fur-coloured lid over the top with a 1.3 lid line and a short flick at the outer corner.
• Nose and mouth: a rounded inverted triangle 10-17 px wide in #0D0809, a #6A5A5C shine ellipse, then a 1.05 "w" mouth hanging from it. Muzzle dots #7A4A30 r 0.9 on otters.
• Whiskers: two per side, 0.75-0.8, 28-75 px long, fanning slightly. Blush: #FF7FB0 @0.6, rx 4.4-6.6, ry 2.6-3.4, under each outer eye corner.
• Paws are this style's hands. Gripping (the otter's mug): a fur forearm tube 12 → 9.5 wide leaves a rib cuff 17 → 15.5; a dark paw (#6A3418→#32150A) has a palm block about 9 x 15, three finger tubes 4.6 → 4.2 wide and 5.8-6.8 long laid ACROSS the front of the mug 4.7 apart, a thumb tube 5.6 → 4 arching over from the side, and 0.7 creases between finger rows. Resting: the toe-notched paw (19 px wide, gBlack) flat on the surface. Perching: three toe tubes 4.6 → 3.8 per foot wrapping the bar, each ending in a 1.3 dark claw hook that curls under. The thumb tube follows references/craft.md handedness. Paws take the animal's own fur ramp (or the dark paw ramp); a cream paw on a cream object (a paper rocket, a cream mug) disappears.
• Clothing: knit sweater (torso pKnitD, sleeves pKnit, rib collar, cuffs and hem), optional Fair-Isle band with 1.3 ochre borders; scarf with a 7-8 px gold fringe; beanie (knit dome, rib brim, cream pompom r 8.6 with a #FFF0DC glint). Folds are shading overlays, not lines.
• Sitting: the hips overlap the ledge top by 4-6 px; leg tubes (19 → 13) drop in front of the ledge face to webbed feet (pad plus four #3E1A0A toe ellipses rx 2.35 ry 3.3) turned out 8-20 degrees; a tail tube (17 → 4.6) curls out behind. On a low seat (a pouf, a stool) the thighs come toward the viewer as one lap shape no wider than the hips, with two knee bulges; the shins (30 → 25) drop in front of the seat face and the feet plant on the floor with #7A3A04 contact ellipses.
• Poses that work: curled on a laptop deck with paws forward (fox); sitting on a sill holding a mug in both paws (otter); perched on a lamp arm, head tilted to the screen (owl); sitting on a pouf with one paw raised holding a small prop overhead and the other paw on a laptop's keys (the self-test's rabbit).

Decor and props

• Background decor: 2 cream bursts (8 rays, scale 0.75-0.9, one rotated 12-14 degrees), 6-7 cream 4-point stars (scale 0.55-0.95), 18-21 cream dots r 1.0-1.4. Only in the margins, at least 8 px from the scene.
• Leaves: 7-8 per card, three kinds (ivy, oak, olive), scale 0.55-1.4, grained, in 2-3 loose clusters at x < 80 and x > 400, plus at most one stray near the top. Each leaf is split down the vein into a light and a dark half.
• Props: laptop (bezel #191113 rx 4-8, maroon screen with code, three editor dots r 1.5-1.9), monitor on a black stand (a 7 px monospace 02:14 is the only text ever used), mug (vermilion, olive or cream cylinder, 2-3 cream steam squiggles, a cream motif such as a crescent or ring-and-bar), book stack (maroon, ivy, ochre; gilt rules 1.6 wide; dotted borders r 0.9 every 7 px), window (arched ochre or round maroon frame; rain, moon and stars only inside the pane), desk (ochre top, maroon front, brass pulls), desk lamp (black tube arm, speckled light cone), potted plant (vermilion pot, 5 fanned olive leaves, an ivy vine), sticky notes (ochre or coral, folded corner).
• Per card: one hero animal plus 3-5 props. Never people, UI-kit panels, logos, icons, blue sky, or more than a few characters of text.

Composition

• Card: <rect width="480" height="360" fill="#FF81BE"/>, then decor, then leaves, then the scene group.
• Scene size: 330-360 px wide (70-75% of the card) and 250-290 px tall, horizontal centre within 10 px of x 240. The floor pool's lower edge sits at y 310-330 and runs 10-20 px past the furniture on each side.
• Focal point: the animal's face, in the upper-middle (y 100-190), in front of a dark plane (screen, window pane, round window or a chalkboard in the night-sky ramp) so the orange reads.
• Ground: no floor line; the chalky pool is the ground. Objects on a desk or sill get #7A3A04 @0.38 contact ellipses (ry 1.7-2) and the edge gets a #F6B860 0.9 highlight line.
• Group transform: draw the scene, then centre it with one wrapper: translate(0 -20) or translate(0 10), or translate(240 178) scale(1.07) translate(-240 -178). Never scale the decor or leaves with it.
• Density: medium. Every quadrant has decor; the scene keeps clear pink around it.