---

name: illustration-two-colour-brush description: Draws original design and coding scenes as hand-authored SVG cards (480x360) in a two-colour brush-marker style. Identifying traits: thick wobbly black marker lines with blobby ends, built as filled ribbons; one second ink, mint green, in flat blocks that slip 2-10 px off the line like a misregistered print; solid black hair, trousers and shoes with mint highlight dashes; and a crinkly squiggle camo on cream areas, all on warm cream paper. Characters are chunky, with profile heads, big noses, dot eyes, big hands and feet. It covers people coding, thinking, carrying and resting with laptops, mugs, chairs and rubber ducks. Use when someone asks for brush, marker, felt-tip, two-colour, duotone, riso-print, zine, mint-and-black or doodle illustrations, or for empty states, onboarding, 404 pages, blog headers, feature spots or marketing cards with a bold hand-made look.

Illustration: Two-colour brush

Loose, confident marker drawings in two inks, black and mint, on cream paper. A chunky character does one readable thing, drawn with fat wobbly lines; mint sits in flat blocks that never quite line up with the black. It suits playful product moments that want energy and a human hand: empty states, onboarding, error pages, editorial headers.

Boundary: for a wobbly brush line with hatching and full colour, use illustration-ink-sketch. For a single continuous line with off-register colour, use illustration-one-line. For thin black line with halftone dot shading, use illustration-halftone-line. For flat colour with solid black shapes and no marker texture, use illustration-flat-with-black.

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

Every line is a fat, wobbling, blob-ended black marker ribbon, and the only other ink is flat mint green laid as a second plate that slips a few pixels off those lines, on cream paper.

If the lines go even-width or the mint registers exactly inside the outlines, it stops being this style.

Palette

Four colours, measured from the examples. Nothing else is ever drawn.

| Role | Hex | Where it goes | |---|---|---| | Paper | #f1ede3 | full-bleed card, skin (faces, hands, necks), knockout halos behind front objects | | Ink | #141412 | every line; solid hair, beards, trousers, hoodies, shoes, laptop lids, mugs, night panes | | Mint | #4fd592 | offset plates on bodies and props, highlight dashes on black, floor bands, screen glow, stickers | | Off-white | #f7f4ec | shirts and chair upholstery under camo, toe caps, glints on black, bubbles, beaks, laptop shells | | (clip only) | #000 | fill of <clipPath> shapes; never visible |

Never: a third hue, grey, tints or opacity, gradients, filters, drop shadows, or stroke= lines (the only stroked paths are paper halos). Skin is paper, not a skin tone. Mint never touches mint: separate two mint areas with a black line or paper.

Line and fill

• Every line is a filled ribbon from scripts/brush.mjs, never an SVG stroke. On the 480 card the nominal width w renders at w x 1.42 (w >= 4), w x 1.28 (3.3-3.9) or w x 1.1 (below 3.3), whatever the fit scale.
• Widths in use (card px): floor line w 5.2-5.8 (7.4-8.2); big silhouettes (duck, armchair, hair) w 4.4-4.8 (6.2-6.8); standard outlines (body, limbs, props) w 4.0-4.2 (5.7-6.0); hands, mugs, small props w 3.0-3.8 (3.3-4.9); inner lines, glyphs, creases, tread w 2.0-2.8 (2.2-3.1); camo w 2.5-2.8.
• Wobble: width varies ±34% along a stroke, the start blob swells 38-78% and the end 26-66%, long strokes get 1-3 swells, and the centre-line wanders 0.95 px. Keep the defaults; pass v: 0.05-0.15 only for small glyphs and clock hands.
• Outlines of closed shapes are ONE loop() stroke that starts somewhere (start 0-1) and overlaps its own start by 4%. A visible overlap blob is correct. part: 0.93 leaves a deliberate gap.
• Solid black shapes (hair, trousers, shoes, hoodie): fillShape(ink) then a loop() outline round them, so the edge is lumpy.
• The mint plate: fill the shape with paper or off-white, then the SAME shape in mint shifted by (dx, dy), then the black outline. Offsets on the examples run from 2 to 10 px, mostly up-left (-3..-7, -2..-6), a few down-right. On black shapes, put the shifted mint BEFORE the black fill so mint peeks out along one edge.
• Halos: where a front object crosses a black shape, lay halo(shape, 3-12) first: a paper fill plus paper stroke that cuts a clean gap. Shoes 10-11, a front leg 8.5, a laptop lid 6-8, hair 9, arms 6, palms 5, thumbs 3.
• Highlights: 2-4 mint dashes (w 2.4-3.0, 8-16 long) along the inside edge of each black shape, 4-5 in from the outline; off-white dashes (w 2.4-3.0) for glints on shoes, mugs and lids.
• Squiggle camo on off-white areas only: 3-7 crinkled wandering lines, 1-3 closed puddles and 1-4 small o-rings (r 3.4-4.2) per area, w 2.5-2.8, clipped to the shape with clipped(), drawn before the outline.
• Stipple: clusters of 3-5 dots r 1.0-1.5 in ink or mint beside a form (a cushion, a cheek, a belly).

Characters

• Proportions: chunky. The head with hair is about 1/3.5 of a seated figure's height; limbs are fat tubes (legs 38 → 23 wide, arms 30 → 24, in scene units before fit); hands about as long as the face; shoes about as long as the head is wide.
• Head: profile or 3/4, facing the action. Paper fill; the outline runs only down the face side as two open strokes (forehead → big bulbous nose → upper lip, then chin → jaw), w 4.0. The nose sticks out about 15 units and is the largest feature. profileHead(x, y, { deg, scale, facing, hair, eye, mouth }) in scripts/brush.mjs draws the set's head with a neck block: hair curly | bun | ponytail, eye open | shut (straining) | tired, mouth smile | talk | teeth | flat; facing: -1 mirrors it. Scale 1.1-1.3.
• Hair: a lumpy black blob of 20-26 control points with a loop() outline (w 4.0) and 2-4 short mint dashes inside. Curly hair, buns and beards are all solid black.
• Face: a dot eye r 3.6-3.9 (ink) with an off-white glint r 1.0 up and toward the nose; a brow arc w 3.0-3.2 above; an ear (paper fill, C-stroke w 3.4, inner curl w 2.8); a smile or flat mouth w 3.0-3.4. Tired: a heavy lid stroke plus a bag line w 2.4.
• Neck: a paper block with one side line w 3.2-3.4.
• Clothing: off-white shirts and sweaters carry camo; trousers and hoodies are solid black with mint dashes; cuffs are mint tubes or a single stroke across the wrist.
• Hands, open: openHand() with five tapered fingers of different lengths, from local angles thumb -58°, index -14°, middle -3° (longest, 23), ring 9-10°, little 24-25° (shortest, 15); a paper fill plus one open outline w 3.2-4.0; a short tapered palm crease w 2.6. The thumb leaves the palm near the wrist at about 45°.
• Hands, gripping: a paper palm block (loop w 3.0-3.2), separate finger tubes 7.4 → 6.6 wide and 14-18 long with round ends, about 7.5 apart, laid across the object (each its own loop() w 2.6), and a thumb tube 9 → 7 closing over from the other face, with a 3 px halo. A block hand can instead show three finger-separation dashes (w 2.0) from the edge inward. fist(x, y, deg, { thumb: 'top' | 'bottom' }) draws the back-of-hand fist round a bar or rope (knuckles along deg, the forearm direction). A far hand behind the bar shows only a palm block plus three fingertip tubes curling over the bar's front. Put every thumb where references/craft.md handedness says, and run the thumb proof.
• Feet: big shoes: black upper, off-white toe cap, a mint sole plate offset 1.5-2.5, three tread strokes (w 2.4), two off-white lace dashes. Cross-legged figures show the soles. Slippers are mint with an off-white rim. shoe(ankle, deg, scale, facing) draws the shoe; a negative deg (-25 to -30) tips the toe up for a heel dug into the floor.
• Poses that work: sitting cross-legged on a cushion talking with one big open hand (Rubber Ducking); striding in profile with a lean, one arm steadying a load (Coffee-Driven); slumped in an armchair with a laptop on the lap and a mug raised (Night Owl). Hauling (the self-test's Deadline): the body is one straight line from the front heel to the head at about 35° off vertical, both heels dug in with the toes up, arms straight to two fists at waist height on a taut rope, the far fist at least 15 units in front of the chest line so its forearm shows.

Decor and props

• Emphasis ticks: 4 marker strokes (w 4.0-4.2, 9-14 long) fanned from -150° to -55° round the head, 44-62 units from its centre. Over a black shape, lay a paper underlay first.
• Accents: a speech bubble (off-white, loop w 4.2) with {…} or !; ?! marks; 3 speed lines (w 3.6-4.0, 40-54 long); 2 steam squiggles (w 3.0, 4 points); 4-point stars (off-white or mint) only inside a night window.
• Props: laptop (off-white or black lid, mint </> sticker, key dashes), mugs and takeaway cups (black or off-white with mint), rubber duck, floor cushion, armchair with camo upholstery, window with a mint moon, wall clock, plug and coiled cable.
• Per card: one figure, 1-3 big props, 2-4 small accents. Never a background shape, a frame, confetti, logos, or text beyond code glyphs (</>, {…}, !, ?).

Composition

• Card: <rect id="p-paper" width="480" height="360" fill="#f1ede3"/>, then one <g id="p-art"> holding the fitted scene.
• Size: build() fits the control-point bounding box into 392 x 278 centred on (240, 184): the art spans about x 44-436 and y 45-323, so margins are about 44 px left and right, 45 top, 37 bottom. build() prints the fit scale S: the figure should land 200-250 px tall on the card (its height in scene units x S). A prop parked at the far edge widens the box and shrinks everything; in the self-test a laptop on the floor pushed S to 0.91 and the figure went small. Move or drop it.
• Ground: one or two black floor strokes (w 5.2-5.8) under the feet, often with a mint band (w 8.5) or a mint rug plate under them. Every foot, chair leg and object touches it.
• Focal point: the face and the gesturing hand, in the upper-middle third; the joke or prop sits beside it, never behind it.
• Density: sparse. Leave the paper open around the group; one cluster of marks, not an all-over pattern.

Techniques

scripts/brush.mjs is the marker engine from the shipped cards (seeded, no dependencies). Check it from the skill folder:

node scripts/brush.mjs --demo /tmp/brush-demo.svg && node scripts/render.mjs /tmp/brush-demo.svg /tmp/brush-demo.png

A card generator (keep it in your own work folder and import the helper by absolute path; an ES import resolves against the generator file, not the cwd):

import { createBrush } from '/abs/path/to/illustration-two-colour-brush/scripts/brush.mjs';
const B = createBrush({ prefix: 'dl-', seed: 11 });
const { INK, MINT, PAPER, OFF, stroke, loop, fillShape, halo, dot, tube, xf, openHand, camo, clipped, ticks, rr,
        profileHead, shoe, fist, add, sub, mul, lerp } = B;
B.build(() => {
  const L = [], P = s => L.push(s);
  P(stroke([[60, 330], [200, 331], [340, 329]], { w: 5.6, v: 0.15, nobb: true }));    // floor
  const torso = [[150, 138], [120, 170], [114, 236], [165, 262], [210, 238], [190, 154]];
  P(fillShape(torso, OFF));                                                             // off-white shirt
  P(clipped(torso, camo([[[114, 176], [146, 178], [178, 176], [210, 182]]], [], [[140, 220, 4]])));
  P(loop(torso, { w: 4.2, start: 0.55 }));                                              // one-stroke outline
  const leg = tube([[234, 250], [220, 272], [208, 298], [200, 322]], [38, 34, 27, 23]);
  P(halo(leg, 8)); P(fillShape(leg, MINT, -4, -3)); P(fillShape(leg, INK)); P(loop(leg, { w: 4.2 }));
  P