Illustration: Flat

Flat, unshaded colour shapes on white: one slim person in a dynamic pose working on, fighting with or presenting one hero prop, with a ring of tiny confetti around them. It suits product moments (errors, empty states, launches, onboarding) where a figure should feel lively but light.

Boundary: if hair, trousers and shoes should be solid black masses with a ground line, use illustration-flat-with-black. If every shape needs a thin ink outline, use illustration-outlined-cartoon (big heads) or illustration-line-interior (white fills, rooms). For a single object with no person, use illustration-teal-spot.

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

Big shapes carry no outline at all: form is described only by thin white fold strokes laid on flat fills, plus a handful of navy hairlines, so the figure reads as cut paper with chalk creases.

Palette

Measured from the three examples. No gradients, no opacity, no filters, no textures, no shadows.

Role	Hex	Where it goes
Card background	#FFFFFF (none drawn)	The page's white card shows through. Don't draw a background rect.
Navy	#011B5C	Hair, sneaker outline and heel tab, hairline contours, laptops, motion marks, burst ticks, prop outlines
Lavender	#9E91E1	Sweaters, browser title bars, decor
Indigo-violet	#6A6CEB	Trousers, tags, screens
Sunshine yellow	#FEC600	Tops, hero props (chain, desk), decor dots
Skin	#FD9999	The one skin tone: face, neck, forearms, hands
Coral pink	#FF7F91	Socks, trousers, decor rings and squiggles, UI pills, window dots
Mint	#93D7D5	Tees, ladders, image placeholders, decor triangles
White	#FFFFFF	Sneakers, fold strokes, keylines, window bodies
Pale lavender	#CDC6EF	Smoke, clouds, soft secondary masses
Palest lavender	#E4E0F7	Front puffs over pale-lavender smoke
Tape yellow	#FFE58A	Masking tape, pale highlight props (one-off)
Warning red	#FF6378	One alert prop per card at most (one-off)

• Each garment is one palette colour. Top and trousers always differ (lavender over indigo, mint over indigo, yellow over coral). Socks contrast with the trousers (coral under indigo, lavender under coral).
• The hero prop takes a colour the clothes don't use, so figure and prop separate without outlines.
• Never navy clothing, never navy skin details beyond the listed features, never a second skin tone in one card.

Line and fill

Numbers at 480 wide. Every stroke has stroke-linecap="round" stroke-linejoin="round".

Element	Treatment
Body, clothes, limbs, hair, props	Filled shapes, no stroke
Fold strokes on clothes	White, 1.4; 2 to 4 per garment (hem, elbow, knee, waist); 10 to 25 px long, gently curved
Folds on sleeve hems, cuffs, smoke	White, 1.2 to 1.3
Hair highlight	A bob gets one white 1.1 curve on the crown; the quiff gets a navy 2.4 flick instead; the bun gets none
Navy contours	1.2 to 1.4: the near arm crossing the torso, a crotch or knee crease, the collar line (1.2)
Sneakers	White fill, navy 1.17 outline (at shoe scale 1.12 to 1.2), navy heel tab, sole line, two lace ticks
Finger separations	Navy 0.77 to 0.85, three short lines between four fingers
Face	Eye dot r 1.35 to 1.4; brow 1.05 to 1.1; mouth 1.05; ear curve 0.8
Light props (windows, tags)	White fill, navy 1 to 1.2 outline, coloured title bar
Confetti	1.4 strokes, or filled with no stroke
Motion arcs, burst ticks	Navy 1.3 to 1.4

• Fattening a shape (a cuff, a laptop lid): stroke it in its own fill colour, 1.6 to 3 wide, instead of redrawing it bigger.
• Separating two overlapping shapes of one colour: a white keyline. Draw the front piece once stroked white and 3 px wider, then again in its colour. The chain links use white 11 under yellow 8; the ladder rails use white 3 under mint.
• Shading: none. Depth comes from overlap order, white folds and the occasional navy contour.

Characters

• Proportions: 205 to 235 px tall standing (57 to 65% of card height). The head is 28 wide and 35 tall, crown to chin: 1:6.5 to 1:7. Legs are long (hip to heel about 50% of height). Hands and feet run large: a hand is about the face's length, a sneaker is 46 px long (1.3 head lengths).
• Head: a profile or 3/4 profile facing the action. The nose is a bump in the face silhouette, not a separate mark. Eye: one navy dot. Brow: one short arc above it. Mouth: a short smile arc, a filled navy oval for shock, or a flat tick. Ear: a skin ellipse 2.5 x 3.5 with a navy 0.8 inner curve. No blush, no nose line, no pupils or eye whites.
• Hair: solid navy shapes: a short quiff (with a navy 2.4 flick), a bob with a blunt fringe (one white 1.1 highlight), a bun as a circle r 6. Glasses: a navy 1.0 ring r 3.6 and an arm to the ear.
• Neck: a slim skin quad from the collar to under the jaw, behind the chin, with a navy 1.2 collar arc.
• Torso: a smooth blob about 85 tall and 40 wide, leaning 12 to 30 degrees from the pelvis (30 for a hard push), sometimes arched; white hem fold plus two body folds.
• Arms: cuff, then a tapered forearm (9 px below the elbow to 5.6 to 6.2 px at the wrist), then a wrist narrower than the palm. Sleeves: a short tee sleeve 17 px long with a white hem fold, a 3/4 sleeve with a flared cuff and a white cuff fold, or a long sleeve to the wrist.
• Hands in this style: skin palm shape plus four fingers drawn as round-capped skin strokes 3.45 wide (lengths 9.0, 10.2, 9.4, 7.4: the middle is longest, the little finger shortest), a thumb stroke 3.6 to 3.7 angled out about 45 degrees, and three navy 0.8 separation lines. Fists: four finger bumps wrapping the bar with navy 0.8 knuckle ticks, the thumb crossing over with a navy 0.9 crease. Put the thumb on the side the handedness table in references/craft.md gives (the kit's openHand takes hand and side and does it for you). Palms pressed onto anything flat in the picture plane (a poster, a wall, a big UI knob) show their BACK to the viewer.
• Legs: tapered tubes, hip 29 to 32, knee 22 to 23.5, hem 19 to 20.5; a coloured sock band 10 px tall between hem and shoe. Knees bend; one leg usually carries the weight.
• Feet: white low-top sneakers, toe toward the direction of travel. A lifted heel (tiptoe) or lifted toe (weight rocking back) gives the pose life.
• Poses that work: kneeling with one knee up while pulling; recoiling with arms up and the torso arched back; stepping up on tiptoe to press something onto a wall; lunging into a push, front knee bent, back leg straight on tiptoe. Twist the torso against the action. Never front-facing and symmetric.

Decor and props

• Confetti, 6 or 7 per card: a filled mint triangle (14 wide), an outline lavender triangle (12), an outline coral ring r 5, a filled yellow dot r 3.6, a filled lavender square 8, an outline mint square 11 to 13, a coral squiggle of four waves (24 wide). One of each kind at most; scatter them round the group's outer edge, 20 px or more from any figure part.
• Expression marks: paired navy motion arcs )) beside a moving limb or head; 2 to 4 short navy burst ticks for surprise or a snap; small coloured shards (triangles 4 to 6 px) flying off a break.
• Props: browser windows (white body, navy 1.2 outline, rx 5, title bar 14 tall with pink, yellow and white dots), laptops (navy lid, indigo screen, white and pink code lines 2 wide), chip tags with 10 px bold text, a yellow desk, a mint step ladder, lavender smoke billows. Keep text to one short word or code (404, 0x0F, SOON).
• Never: ground lines, cast shadows, plants, backgrounds or rooms, logos, more than one hero prop.

Composition

• No background rect. Nothing touches the card edge: the drawing spans about x 70 to 430 and y 44 to 318.
• Figure plus hero prop make one group, about 75% of the card width and 70% of its height. The figure is on one side, the prop on the other, and their contact point (hands on the chain, palms on the poster) is the focal point near the centre.
• No ground line. Every shoe, table leg and ladder foot ends on one implicit floor at y 312 to 330.
• Density is sparse: one figure, one prop, 6 or 7 confetti, at most two expression marks.
• Fit the margins with one group transform round the whole drawing: <g transform="translate(240 181) scale(0.93) translate(-243 -183)"> (0.93 to 0.94), or a plain translate(-12 5) when it already fits.

Techniques

The examples were generated, not hand-typed: a script places tapered tubes, smooth blobs and stock parts (sneaker, hand, fist, head) and writes the SVG. scripts/flat-kit.mjs is that parts library, ported to dependency-free Node. Its sneaker, open hand, torso, head and arm output is byte-identical to the shipped cards.

// card.mjs, next to a copy of flat-kit.mjs
import fs from 'node:fs';
import * as K from './flat-kit.mjs';
const { PAL } = K, B = [], FY = 282;                  // FY: the floor the shoes stand on
B.push(K.decor([['tri', 386, 70, PAL.mint], ['ring', 408, 150, PAL.pink], ['dot', 184, 46, PAL.yel],
  ['sq', 64, 318, PAL.lav], ['squig', 398, 236, PAL.pink], ['sqO', 196, 270, PAL.mint]]));
const W = K.frame([342, 176], -23);                   // pelvis at (342,176), torso leaning 23 deg
B.push(K.arm(W([10, -74]), [292, 150], [257, 156], { sleeve: 'cuffed', top: PAL.yel }));     // far arm first
B.push(K.openHand([257, 156], 182, { hand: 'R', side: 'back', spread: 4, narrow: false }));  // faces left: far = RIGHT hand
const tip = { a: -26, s: 1.12 }, t = K.shoePt([0, 0], tip, [-40, 0]);   // tiptoe: put the TOE on the floor
const heel = [345 - t[0], FY - t[1]];
B.push(K.leg({ hip: W([4, 3]), knee: [355, 220], heel, ...tip, trouser: PAL.pink, sock: PAL.lav, hipW: 31, kneeW: 22, hemW: 19, hipCap: true }));
B.push(K.leg({ hip: W([-5, 3]), knee: [320, 222], heel: [340, FY], s: 1.12, trouser: PAL.pink, sock: PAL.lav, hipW: 32, kneeW: 22.5, hemW: 19.5, hipCap: true }));
B.push(K.torso(W, { top: PAL.yel }));
const hc = W([-2, -105.5]);                           // head centre; tilt -37 = looking up at the hand
B.push(K.neck(W([-4.6, -79.5]), W([4.6, -80.5]), hc, -37), K.head(hc, -37, { hair: 'bob' }));
B.push(K.arm(W([-9, -72]), [273, 122], [250, 101], { sleeve: 'cuffed', top: PAL.yel }));   // near arm last
B.push(K.openHand([250, 101], K.ang([273, 122], [250, 101]) - 12, { hand: 'L', side: 'back', spread: 4, narrow: false }));
fs.writeFileSync(new URL('./card.svg', import.meta.url), K.card(B, { label: 'Title, Flat style', fit: [240, 181, 0.93] }));   // next to card.mjs

Draw order: decor, hero prop (or its back half), far arm and hand, far leg, near leg, seat and crease, torso, neck, head, near arm, near hand, then anything that wraps in front (fist fronts, tape).

• Facing right: the parts face left by default. Pass flip: true to torso, head, neck and every leg (toe right), and swap the shoulders: near W([9, -72]), far W([-10, -74]). With flip, a positive shoe angle is the tiptoe.
• Stride or lunge: two leg tubes leave a white notch under the hem. Add a seat blob in the trouser colour, K.P(K.smooth([W([-15, -6]), W([15, -6]), K.lerp(hipF, kneeF, 0.3), W([0, 14]), K.lerp(hipN, kneeN, 0.3)]), trouser), then a navy 1.3 crease along the near thigh's inner edge.
• Trouser folds: leg() draws none. Add one white fold at each knee bend and one along a shin or thigh.
• Arm over a same-colour torso: a navy 1.3 contour 7 px off the upper arm's centreline on the torso side, from 30% of the way to the elbow, round the elbow: const n = K.perp(K.norm(K.sub(el, sh))), points K.add(K.lerp(sh, el, t), K.mul(n, 7.2)).
• Margins: card(B, { fit: [cx, cy, s], move: [dx, dy] }) scales about a point, then shifts. Other parts: tube([[x,y,w],...]) for any tapered shape, fold(pts) and contour(pts) for white and navy lines, fist(c, a) returning {back, front} to sandwich a bar, windowOpen(...), motion(p), ticks(c, angles), smooth(pts), shoePt(...) to put a tiptoe's toe on the floor.

node scripts/flat-kit.mjs --demo $W/parts.svg writes a labelled sheet of every part (prints wrote <path>): the seven confetti kinds, the three heads, open hands in all four handedness cases, a fist round a bar, short and cuffed arms, a planted and a tiptoe leg, a tube with folds, motion arcs and ticks.

White keyline, hand-written (from the chain card):

<path d="M146 222.6 V246.6 A10 10 0 0 0 166 246.6 V222.6 A10 10 0 0 0 146 222.6 Z" fill="none" stroke="#FFFFFF" stroke-width="11"/>
<path d="M146 222.6 V246.6 A10 10 0 0 0 166 246.6 V222.6 A10 10 0 0 0 146 222.6 Z" fill="none" stroke="#FEC600" stroke-width="8"/>

Failure modes

• Fists pasted onto sleeves. The judges' main complaint on the first card: no forearm, no wrist. Build cuff, tapered forearm, wrist, then the hand (arm() then openHand()/fist() at the same wrist point).
• Boxy Π trousers. Straight parallel legs read as stiff. Taper hip 30 to knee 22.5 to hem 20 and bend the knee.
• Front-facing symmetric pose. A redraw that faced the viewer squarely dropped from 7 to 6.5. Use profile or 3/4, lean the torso 12 to 30 degrees, twist it against the action.
• Limp pulling or pushing. Lean away from a pull, bend the elbows, brace a knee; lean into a push with the heel lifted.
• Stripe mitten hands. Fingers drawn as parallel bars on a box. Use separate round-capped strokes of different lengths and a 45-degree thumb.
• Thumbs on the wrong side. A designer rejected a whole pass for this. Decide left/right and palm/back for every hand and pass them to openHand; mirror fist from the table, then run the thumb proof in craft.md.
• Outlines creeping in. A navy stroke round a sleeve or leg turns it into a different style. Only the listed hairlines are navy.
• Same-colour parts merging into one blob. Two pink legs or two yellow links overlapping. Separate them with a white keyline or one navy 1.3 contour.
• A drawn floor or shadow. This style has none; align the feet on one y instead.
• Big cartoon heads. A 45 px head on a 230 px body reads as a different set. Keep 35 px.
• Confetti crowding the figure or more than 7 pieces. Keep 20 px clear and one of each kind; check the feet, where a square ended up under a shoe in testing.
• A white notch at the crotch in a stride. Add the seat blob and crease (Techniques).
• A navy slab. A big navy prop (a dark-mode track, a laptop) outweighs the figure. Keep navy props under about 1/6 of the card area and break them with white or lavender detail.

Examples

• broken-link.svg (Broken Link): a kneeling woman with a bun and glasses pulls a snapped yellow chain; shows two fists gripping a bar (back/front sandwich), a white-keyline chain, the arm-over-torso navy contour, a long sleeve, a tiptoe back foot.
• fatal-error.svg (Fatal Error): a man in a mint tee recoils from a warning triangle bursting out of a laptop on a yellow desk; shows short sleeves, two open hands with correct thumbs, an open-mouth shocked face, smoke billows, burst ticks and motion arcs.
• coming-soon.svg (Coming Soon): a woman in a yellow top on a mint step ladder presses a browser-window poster to the wall, with a SOON tag; shows 3/4 cuffed sleeves, palms pressed flat, a tiptoe leg, the bob haircut, a white-keyline ladder, masking tape.

Workflow

Run from this skill folder. render.mjs needs playwright-core (or playwright) installed here, in the current folder or globally, plus a Chromium.

1. Brief. Name the subject and the one action that shows it (who does what to which prop). Write down the joke or gesture that must read at 480 px.
2. Pose and hero. Pick the hero prop and its colour, and a pose with a lean and one weight-bearing leg. Decide the facing; then write down LEFT/RIGHT and PALM/BACK for every hand (craft.md table).
3. Set up: W=/tmp/flat-card; mkdir -p $W; cp scripts/flat-kit.mjs $W/, then write $W/card.mjs from the Techniques skeleton. Use an id prefix (dm-) if you add any ids.
4. Block the figure with frame, torso, leg, arm at the right proportions (Characters), the prop and the floor y. Render and check proportions before details.
5. Draw hands, head, hair, folds, contours, the prop's detail, then 6 or 7 confetti and up to two expression marks.
6. Render: node $W/card.mjs && node scripts/render.mjs $W/card.svg $W/card.png (card.mjs writes card.svg next to itself).
7. Sheet: node scripts/render.mjs --sheet $W/sheet.png examples/*.svg $W/card.svg. Ask "same hand, same set?"
8. Zoom every hand, the face and both feet at 8x: node scripts/render.mjs $W/card.svg $W/hand.png --zoom x,y,w,h --scale 8. Thumb proof: in a copy of card.mjs that writes proof.svg, call K.setProof(true) before drawing (thumbs red, index fingers blue), render each hand at 8x, check it against your notes, delete the copy.
9. Critique on the five criteria in references/craft.md and the Verify list below; fix; repeat. Expect three or four rounds.
10. Lint: node scripts/lint.mjs $W/card.svg --palette style.json (add --prefix dm- if you used ids). Fix every ERROR; every WARN colour must be a deliberate one-off.

Verify

• No shape larger than a finger has a stroke, except white props with a navy 1 to 1.2 outline.
• Fold strokes are white, 1.2 to 1.4, round-capped; 2 to 4 per garment.
• Navy appears only on hair, sneakers, face features, finger and knuckle lines, the listed contours, laptop parts and marks.
• Only palette hexes, one skin tone, no gradient, opacity or filter.
• The figure is 205 to 235 px tall with a 35 px head; legs taper; the torso leans.
• Every hand traces back through a wrist and forearm to a sleeve; fingers differ in length; thumbs match the table.
• White sneakers with navy outline, sock bands under the hems, all feet on one implicit floor; no ground line or shadow.
• Top, trousers, socks and hero prop are four different colours.
• Overlapping same-colour parts are split by a white keyline or a navy contour.
• 6 or 7 confetti, one of each kind, 20 px clear of the figure; at most two expression marks.
• Nothing inside 40 px of the card edge; the contact point between figure and prop sits near the centre.
• The subject reads at 1x without the title.