Draws original cosy animal scenes as hand-authored SVG cards (480x360) in a grainy gouache, risograph-like style. Identifying traits are flat shapes with no outlines on a hot-pink card; soft 3-4 stop gradient shading on every rounded form, darker toward edges and base; a fine dark multiply grain that gathers at each shape's edges; a chalky purple-pink shadow pooled under the group; and big glossy eyes with cream star highlights, framed by grained autumn leaves and sparse cream sparkles. It covers design and coding moments with one cute animal at a laptop, monitor, desk, window, mug or book stack. Use when someone asks for grainy, gouache, riso, risograph, textured, cosy, cozy, autumn, hygge, storybook or children's-book style animal art, or for an empty state, onboarding step, 404 page, blog header, feature spot or marketing card with a warm handmade feel.
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.
Role
Hex
Where it goes
Card background
#FF81BE
full-bleed rect, every card, including night and rain scenes
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.
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.
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.
Techniques
scripts/gouache.mjs prints the shared defs with your prefix and has the repeated builders. Run from the skill folder:
node scripts/gouache.mjs defs wk- # filters, leaves, sparkles, common ramps, knit patterns
node scripts/gouache.mjs --demo /tmp/g.svg # a test card using every builder
import fs from 'node:fs';
import * as G from '/abs/path/to/illustration-grainy-gouache/scripts/gouache.mjs'; // relative to THIS file, not the cwd
const p = 'wk-';
const extraDefs = ''; // your fur ramps, clothing gradients and clipPaths
const body = [
G.background(p, { seed: 3 }), // pink + bursts, stars, dots
G.leaves(p, [['ivy', 40, 112, -20, 1.15], ['oak', 436, 60, 22, 0.95]]),
G.shadow(p, 70, 410, 312, { core: [90, 330] }), // chalky pool
G.grained(p, `<path d="${G.tube([[201, 260], [200, 271], [198, 281]], [19, 16, 13])}" fill="url(#${p}gMaroon)"/>`),
G.eye(p, 197, 143, 10.8, [1, 0.3]), // glossy eye, looking right
].join('\n');
fs.writeFileSync('card.svg', G.card(p, G.defs(p) + extraDefs, body, 'Title, Grainy gouache style'));
G.defs(p) defines these ids (all prefixed): filters grain, grainL, chalk, speck, soft; symbols ivy, oak, olv, star, burst, drop; gradients gBlack, gMaroon, gOchre, gTop (wood top), gEnds, gBase, gScreen, gDeck, gCream, gVerm, gOliveCyl, gCreamCyl, gCone, plus the leaf ramps; patterns pKnit, pKnitD, pRib. Put the animal's fur ramps, clothing gradients and any clipPaths in your own extraDefs string. Builders: background, leaves, shadow, grained(p, svg, 'grain' | 'grainL'), tube, smooth, eye, blush, use, card.
1. The edge grain. Fractal noise (base frequency 2.1) becomes dark brown-violet specks; the mask 2.0 x alpha - 1.8 x blur(alpha, 3.2) is a band just inside each edge; a second term weights it by how dark the fill is; the specks multiply onto the shape. grainFilter() in the helper holds it. Change dens (1.0-1.08) for density, never baseFrequency.
2. A shaded form. Base gradient, then overlays in the same clip, then grain on the group:
3. Limbs and tails are G.tube(points, widths): filled tapered tubes along a smooth centre-line with round caps (cap0/cap1: false where a limb enters a sleeve).
4. The pool shadow is two blobs through the chalk filter (displaced, mottled alpha): #B95A93, then a #A04A80 core at 0.8.
Failure modes
The set breaks when the background changes. Night Shift and Rainy Refactor were first drawn on indigo and teal; judges scored both 7. Back on #FF81BE they scored 8.5 and 9. Put night, rain and weather inside windows and screens only.
Grain reads as dirty TV static. The first draft used uniform grain over everything. Gather it at edges and into dark tones (the filter above); use grainL on big light planes; keep cream fur, faces' details and decor crisp.
Glows look digital. Radial glow and rim-light gradients were removed from the night scene. Light is a white cone at 0.5 opacity through the speck filter, plus a speckled pool.
The hero disappears. Orange fur on hot pink has little contrast. Stage the head over a dark screen, pane or frame.
Mitten paws. A dark blob for a paw reads as a glove. Build palm + finger tubes + thumb tube + 0.7 creases, with the fingers in front of the object and the thumb closing over it.
The lap reads as a skirt. In the self-test a lap shape wider than the hips, with thin shins set inside it, read as a green tutu. Keep the lap within the hip width and make the shins nearly as wide as the knees.
Floating animal. A sitter that stops at the ledge edge hovers. Overlap the hips 4-6 px onto the surface, hang the feet in front of the face, and put the pool shadow under the whole group.
An outline creeps in. A 1 px stroke around a prop turns it into a different style. Use a value step.
Clutter. More than 8 leaves or decor inside the scene box crowds the card. Keep leaves in the margins.
Text. Wordmarks or labels break the painterly read. At most a 7 px monospace clock on a screen.
Examples
examples/cozy-commit.svg (Cozy Commit): a fox curled on an open laptop on a book stack, scarf with a { } pattern, cocoa mug. Shows a lying pose, resting paws, sleepy lidded eyes, the scarf pattern, book shading with gEnds, a commit graph on screen.
examples/rainy-refactor.svg (Rainy Refactor): an otter in a knit sweater on a rainy window sill, holding a tea mug in both paws. Shows the gripping paw build, knit/rib/Fair-Isle patterns, sleeve cast shadows, a seated pose with feet over the ledge, rain clipped to the pane, a diff on a small laptop.
examples/night-shift.svg (Night Shift): an owl in a beanie perched on a desk-lamp arm, watching a monitor at 02:14. Shows perching toes, a feather-tier wing, the speckled lamp cone, a round night window, sticky notes, a desk with legs and contact shadows.
Workflow
Run commands from the skill folder (the one holding this file). Pick a prefix such as wk-.
Brief: name the subject in 3 words and the one action that shows it ("rabbit ships a side project": pressing deploy, a tiny rocket sticker). Pick the animal and one dark backdrop for its head.
Pose and hero: choose one of the working poses or a close variant; decide every paw's job (grip, rest, perch) and, for each gripping paw, left or right and where the thumb goes (references/craft.md).
Block: write a generator (gen.mjs in your own work folder) that imports scripts/gouache.mjs by absolute path (an ES import resolves against the generator file, not the cwd); place the furniture, pool shadow and the animal's big shapes with flat colours first; render.
Draw: replace flat fills with ramps and overlays, add patterns, the face, paws, props; add decor and leaves last, in the margins.
Zoom:node scripts/render.mjs card.svg z-face.png --zoom x,y,w,h --scale 8 on the face, every paw, the feet and each contact (hips on ledge, mug on surface).
Critique on the five criteria in references/craft.md, harshly; fix; re-render. Expect 4 rounds.
Lint:node scripts/lint.mjs card.svg --prefix wk- --palette style.json. Fix every ERROR; each WARN must be a deliberate fur or tint ramp.
Verify
Background is one full-bleed #FF81BE rect with no rx.
No shape has a stroke outline; the only strokes are detail lines at 0.6-1.3, cream decor lines and code lines.
Every large shape has a gradient and sits inside a grain or grainL group; at 8x the specks thicken at its edges.
Face details, whiskers, code and cream decor are crisp (outside the grain groups).
Eyes: cream ring, offset pupil, star highlight on the look side, small dot opposite, both pupils looking the same way.
Blush at 0.6, whiskers present on mammals, nose with a shine.
Each paw is built from finger or toe tubes, and every thumb sits on the side its handedness requires.
The animal's head sits in front of a dark plane.
A chalky #B95A93 pool sits under the whole group; nothing floats; contacts overlap by a few px.
7-8 leaves, 2 bursts, 6-7 stars, 18-21 dots, all in the margins, none touching the scene or the card edge.
Scene 330-360 px wide, centred on x 240 within 10 px, pool bottom at y 310-330.
No text beyond a tiny monospace screen label; no blue, grey or pure white outside the lamp cone.
Head at least as wide as the torso, head height at least 0.8 x torso height (measure the paths).
Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.
Build recognizable falling leaves in world space using instanced geometry, independent tumble, coupled sideways drift, shared wind, scene occlusion, and camera-aware recycling. Use for 3D autumn leaves or drifting foliage in Three.js and similar scenes; use falling-leaves for a 2D canvas overlay.
Add coordinated spring, summer, fall, and winter states to a 3D scene, blending foliage, sunlight, sky, ground materials, snow, and particles without rebuilding the world. Use for seasonal controls, architectural walkthroughs, and outdoor scenes with four-season transitions.
Create or integrate highly detailed 3D models with smooth silhouettes, shaped surfaces, believable bevels, and close-up geometry, then prepare suitable runtime LODs and loading. Use when a user requests high polygon counts, ultra-realistic models, detailed architectural assets, or removal of visibly faceted geometry.
Build sharp, physically coherent high-resolution materials for 3D rendering with appropriate PBR maps, texel density, UV direction, mipmaps, anisotropic filtering, and progressive asset delivery. Use for detailed wood, stone, fabric, foliage, and architectural close-ups without excessive download or GPU memory costs.
Build hyperrealistic PBR metal in Three.js: steel, brass, gold, copper and iron as true conductors (metalness 1, measured F0 tint, no albedo) with roughness-varied finishes (polished, brushed anisotropic, aged with patina and worn edges) lit by a dark HDR studio of real bright window cards prefiltered with PMREM. Use when metal looks like grey plastic, a dull blur, or a black hole; when blades, tools, rings, ingots, hardware or product metal need reflections with edges and structure; or when a finish needs scratches, streaks, fingerprints and bevels that catch light.