Illustration Grainy Gouache

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.

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:

<g filter="url(#wk-grain)">
  <path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gMaroon)"/>
  <path d="M74 288 L314 288 C318.5 293 319 309 314 314 L74 314 C69.5 309 69.5 293 74 288 Z" fill="url(#wk-gEnds)"/>
</g>
<path d="M174 299.5 L204 299.5 M174 303 L196 303" stroke="#701001" stroke-width="1.2" stroke-linecap="round"/>

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-.

1. 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.

2. 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).

3. 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.

4. Draw: replace flat fills with ramps and overlays, add patterns, the face, paws, props; add decor and leaves last, in the margins.

5. Render: node scripts/render.mjs card.svg card.png.

6. Sheet: node scripts/render.mjs --sheet sheet.png examples/*.svg card.svg. Ask "same hand, same set?"

7. 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).

8. Critique on the five criteria in references/craft.md, harshly; fix; re-render. Expect 4 rounds.

9. 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).

• [ ] Every id starts with the prefix; lint passes.