Flat Illustration With Black

Illustration: Flat with black

Flat-colour scenes of one or two lanky, expressive people acting out a design or coding moment: running from a pile of messages, hovering over a deploy button, a stand-up at a sticky-note board. Colour areas carry the drawing with no outline; solid black does the heavy lifting as hair, trousers, shoes and devices, and as thin detail lines. It suits product empty states, onboarding, error pages and marketing cards that need a person with some personality.

Boundary: use illustration-flat for the outline-free style with a navy-and-lavender palette and floating confetti; use illustration-outlined-cartoon when every shape should carry an inked outline and the heads are big; use illustration-line-interior for thin indigo outlines on white fills. This skill is the one where black is a fill colour.

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

Flat, outline-free colour shapes in four saturated mid-tones, anchored by large solid black masses (20–40% of all painted area), with black reused as thin 0.75–1.6 detail lines and white reused as thin seams on the black.

Palette

• Use at least three of the four mid-tones (denim, green, yellow, tomato) plus black; the deploy card has no green at all. Give the figure's top one hue, the trousers black or denim, and let the props carry the rest.
• Shades are the same hue one step darker, never grey or a gradient. Never use opacity, gradients, filters, patterns or shadows.
• Don't put tomato shoes next to a tomato hero prop: a red shoe pair pulled the eye off the deploy button in an early round. Black shoes are the default.

Line and fill

Numbers at 480 wide, before the scene group's 0.94–0.95 scale.

• Coloured fills have no outline. The only outlined shapes are white ones that would vanish on the white card: a calendar or board (#15202f 1.2–1.3), a sneaker sole (1.0), gritted teeth (1.2).
• Ink detail lines: finger separations 0.73–0.85; envelope flaps 1.05; brows 1.3–1.6; glasses rims 1.5; closed eyes 1.3; motion, alarm and nod ticks 1.3; speed lines 1.3; ground line 1.2–1.25.
• White detail lines on black and denim: trouser side seam 0.9, shoe welt 0.85–0.9, laces 1.0, cat whiskers 0.6.
• Fold lines in the garment's shade colour: torso and armpit folds 1.0, knee folds 1.15. Two to four per garment.
• Bars and legs: table legs 2–2.6 (near in ink, far in slate), a board stand 2.4, code lines on a dark screen 2.2 in palette colours.
• Every stroke uses stroke-linecap="round" stroke-linejoin="round". Write the root as <svg ... fill="none"> and give every path its own fill.
• Shading: one flat darker band, never a gradient. Hem bands 3–4 tall in the shade colour; collars and hems in the light colour; the far limb in the shade colour.

Characters

• Proportions: 5.2–5.5 heads tall, head 42–45 units; legs are half the height (hip about 118 above the ground in a 235-tall figure). Thighs 25–32 wide, knees 22–25, ankles 19–22. Upper arm about 30 to the elbow, forearm 25. Upper sleeves 15–21, skin forearms 9–13, wrists about 9.
• Torso: draw it by hand as one closed path, never a tube() (a tube torso reads as a sausage): back hem, up the back, shoulder, neckline, chest, belly, front hem, then a hem curve that bows down 3–5. About 40 wide at the hem, 24 at the neckline. Lay a 4–5 tall hem band in the shade colour over its bottom edge.
• Neck and collar: draw the neck tube (width 11–12) before the torso so its base hides under the neckline (or after it, with its bottom edge cut to the neckline curve as in s5c-a-neck), then the collar (a 2.4 stroke in the shade colour) along the neckline. Drawn after the torso, the collar floats on the neck like a necklace. Keep 8–12 units of neck visible.
• Hips: where the legs part, fill the crotch with a small seat patch in the near trouser colour, tucked under the hem (about 30 x 15). A large one shows below the hem as a bulge, worst over a #26313f far leg.
• Heads: 3/4 view, rounded jaw, a single nose bump on the profile edge, no nose drawn on the face. Ear as a skin oval with one #efc9a0 curve. Eyes are ink dots r 1.6–1.8 (far eye slightly smaller and higher), or closed arcs when laughing. Round glasses: near lens r 6–6.3, far lens r 4.6–5 (perspective), a short bridge and a temple arm to the ear. Open mouth is an ink shape with a tomato tongue. Use head() in scripts/parts.mjs (hair bun, curly, short, beanie; optional beard, glasses, earring). Brows worried sit high and only clear the hairline under curly or beanie; under bun or short they merge into the fringe, so use angry (determined), up or soft. Extra hair such as a ponytail goes in its own group with the head's transform, drawn before the head.
• Hair and beards are solid black masses: buns r 8.5, curly clouds of arcs, beards that swallow the jaw. Black hair is part of the black budget.
• Hands: skin silhouettes with no outline. Separate fingers with short ink ticks 0.73–0.85, 2.4–5 long: in from the fingertip gaps on an open hand, across the curled knuckles on a fist. Never full-length lines. The thumb is its own lobe overlapping the palm, closed with one ink crease. Hand length about 25 units (chin to brow). Every hand ends in a cuff band in the sleeve's shade colour, then a narrower skin wrist. Templates in scripts/parts.mjs, each with its handedness as authored: hand('palm') left, palm visible; hand('point') right, back visible; hand('fist') left, palm side; hand('push') right, back visible, fingers up (pressing a surface). flip: true mirrors to the other hand with the same side showing; proof: true gives the red-thumb, blue-index version of push and fist. The mug grip is in examples/stand-up.svg (s5c-a-cup), the desk brace in examples/friday-deploy.svg (s5b-hand-far). New fingers are easiest as capsules: <rect rx="1.75" width="3.5"> on a palm shape.
• Shoulders: a set-in sleeve (sleeve()) puts a round cap at the shoulder point. Keep the far shoulder point 4 or more units inside the torso outline, or the cap pokes out as a hump.
• Feet: big shoes, 52–62 units long (1.2–1.4 heads). Black loafers or sneakers with white welts, or a coloured loafer with a darker sole band. The sole sits exactly on the ground line; a back foot may lift its heel about the ball (sneakerMap(..., lift) with lift 20–26°; past 26° the laces and stripe distort).
• Clothes: tee, hoodie or jumper with a hem band and 2–4 fold lines; jeans or black trousers with one white side seam curving through the knee, a short knee crease and a rolled cuff (#97c8df on denim, #4b5662 on black).
• Poses that work: a running stride with a glance back; a deep lean over a desk with one arm braced; two people turned 3/4 toward each other, one gesturing with an open palm; a lunge pushing a big object, back leg straight with the heel up, front knee bent, elbows slightly bent. Torsos lean 10–35°, one knee always bent.

Decor and props

• Fixed decor per card: exactly two five-point stars (one #f9db74 r 7–7.5, one #65aacb r 6) and two plus-sparkles (#f9db74, 1.2 stroke, open centre). Put them in empty corners, at least 20 units from any figure.
• Effect marks, only when the subject needs them: sweat drops #97c8df, three alarm ticks over a head, two jitter ticks by a finger, nod arcs, horizontal speed lines. All ink 1.3 except drops.
• Prop vocabulary: envelopes and chat bubbles with slightly bowed edges, a red count badge with a bold white number, a wall clock, a hanging calendar, a desk on stick legs, a big red button, a laptop in black, mugs, a sticky-note board, a black cat with yellow eyes. Props are flat colour with ink detail lines, 30–70 units across.
• Text: at most one short word or number, ui-sans-serif, system-ui, sans-serif, weight 800 (FRI 21, DEPLOY 9.6 with letter-spacing 1.1, a badge number 14).
• Never: background blobs, plants for filler, confetti, drop shadows, floor patches, outlines around coloured shapes, gradients.

Composition

• White card, no background rect. Wrap everything in one group: <g id="xx-scene" transform="translate(240 178) scale(0.95) translate(-cx -cy)">, where (cx, cy) is the centre of what you drew.
• After that scale the ink box is 296–307 wide and 255–261 tall: margins left and right 86–92, top 46–50, bottom 52–54. The ground line is the widest element (300–320 units at authoring scale, centred under the group) and sets the side margins. In every example the topmost mark is a sparkle, bubble or wall prop at authoring y 34–52; without one the top margin drifts to 70.
• Ground: one ink line at authoring y 302–308. No floor fill.
• Ink covers 12–16% of the card. One figure plus one hero prop, or two figures plus one shared prop. Wall props (clock, calendar, bubble) float in the upper third, clear of heads by 20 or more; put one in whichever upper quadrant the figure and hero leave empty.
• Focal point: the hand–prop contact (finger over the button, fist pumping, palm toward the board). Put it within 60 units of the card centre.