Flat Vector Illustration Style

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.

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

• 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"/>