---

name: illustration-flat description: Draws flat vector illustrations as SVG cards (480x360): slim, long-limbed people acting out one design or coding moment with one hero prop. Identified by no outlines on big shapes, thin white fold strokes as the only shading, navy only for hair, sneakers and a few hairlines, small heads (about 1:7) with big hands and white sneakers, and sparse floating confetti with no ground line, in lavender, indigo, sunshine yellow, coral and mint. Covers the measured palette, stroke numbers, character construction (tapered limbs, separated fingers, thumb side), poses, props, composition and a tested parts kit. Use when asked for flat illustrations, flat vector people, outline-free or no-outline characters, modern or corporate flat art, empty states, onboarding screens, 404 or error pages, coming-soon pages, blog headers, feature spots or marketing cards.

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, `ne