---

name: illustration-bold-pop description: Draws hand-authored SVG spot illustrations in a bold pop-geometric style for design and coding scenes. Identifying traits: a thick navy outline on every shape, solid navy extrusions that always step down-right, saturated flat fills (hot pink, lemon, aqua, violet, mint, lime) textured with navy hatching and dots, and a dense overlapping cluster of chunky props (browser windows, pinwheel tiles, iso cubes, lightning bolts) around one slim cartoon character. Covers palette, line weights, extrusion and union-outline techniques, a JS helper for the repeated marks, characters and hands, composition and a render-and-critique loop. Use when someone asks for bold pop, pop geometric, retro pop, memphis-style, navy-outline, chunky outlined or loud colourful illustrations, or for empty states, onboarding, 404 or error pages, blog headers, feature spots and marketing cards in that look.

Illustration: Bold pop

A loud, graphic spot style: every shape outlined in one navy, pushed forward by a solid navy extrusion, filled with saturated flat colour and textured with hatching, dots, grids and stripes. One slim, simply drawn character works inside a tight cluster of props that overlap each other. It suits playful product moments: errors, launches, security, builds, onboarding.

Boundary: for thin near-black outlines, big heads and no extrusions use illustration-outlined-cartoon; for a single hero object with a hard drop shadow and no people use illustration-teal-spot; for true 30° isometric scenes on a platform use illustration-isometric-mono. If the brief says "flat, no outlines", this is the wrong skill (illustration-flat).

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 shape wears the same thick navy outline and sits on a solid navy extrusion stepped down-right, so the whole cluster reads as chunky pop-art blocks stacked toward the viewer.

Palette

Measured from the three examples. The card has no background rect: it stays transparent on the page's white card.

| Role | Hex | Where it goes | |---|---|---| | Navy (ink) | #1f1c4d | every outline, every extrusion, iso shadow faces, hatching, dots, eyes, mouths, curly hair | | White | #ffffff | window bodies, pinwheel facets, sneakers, teeth, washers, inner holes, white stripes on tees | | Hot pink | #ff5fa8 | hero blocks, buttons, cones, hair, tee stripes, tongue, progress stripes | | Lemon | #ffe36e | bolts, hard hats, padlocks, caution boards, highlighted code lines, smileys, ponytail | | Orange | #ffb547 | crane steel, keys, arrows, flames, shoe uppers | | Cream | #fff4d8 | dotted footers, gutters, cube tops, pinwheel facets, shoe soles, code digit tiles | | Violet | #8f5cff | title bars, phones, tees, leggings, pinwheel blade | | Periwinkle | #7d7ff7 | title bars, wireframe text lines, sleeves, grid pattern lines | | Mint | #34e2c4 | overalls, shields, pinwheel blade, traffic dots | | Lime | #b9f14d | tees, plates, gears, landscape hills, confirm buttons | | Aqua | #4fe3ec | title bars, giant arrow bands, hairbands, cab glass | | Sky | #5bb8f7 | wrenches, jeans, image placeholders, iso cube left faces | | Skin light | #ffd0b0 | faces, arms, hands | | Skin shade | #f4a385 | the shadowed half of a fist only | | Skin deep | #c68660 | an alternative skin tone (face, arms, hands) | | Blush | #ff9cc8 | one cheek circle per face |

• Flat fills only. No gradients, no blur, no filters, no grey, no pure black. The one opacity in the set is a white glasses lens at fill-opacity="0.55".
• Neighbouring faces never share a hue family: aqua never touches mint, orange never touches lemon on the same object, two pinks never abut. Put white, cream or navy between them.
• About 35–40% of the non-navy fills are white or cream. Saturated colour is for objects; the large calm areas are white with wireframe detail.

Line and fill

Numbers are author units; the card group scales by 0.78 (one card uses 0.8), so multiply by 0.78 for px at 480 wide.

| Element | Author width | At 480 px | |---|---|---| | Outline of every shape | 3.0 | 2.34 | | Inner parts (window dots, pills, hook, nut, small plates) | 2.2–2.6 | 1.7–2.0 | | Wireframe text pills | 1.8–2.0 | 1.4–1.6 | | #, // marks | 1.8 | 1.4 | | Hair strands, folds, hems, finger contours, laces | 1.3–1.6 | 1.0–1.25 | | Hatch pattern lines | 1.25 at 5 spacing | 0.98 at 3.9 |

• Caps and joins round everywhere (stroke-linecap="round" stroke-linejoin="round"). One outline colour: navy.
• Outlines are strokes on filled paths. Draw order per object: extrusion → fill → pattern → outline.
• Limbs, hands and any blob made of overlapping parts use a union outline: the whole shape filled navy with a navy stroke of 2 × 3.0, then the fill on top. The overlaps vanish and one 3.0 outline wraps the union.
• Cables, handles, braces and hooks are tubes: a navy stroke w + 6 wide under a colour stroke w wide.
• Shading is never a tone step. It is one of: hatching on the shadow band (the right 20–30% of an object; on a figure facing right, the back (left) band of the tee and the whole far leg); a solid navy face (the right face of an iso cube); or the extrusion itself. Light always comes from the top-left.
• Texture vocabulary, all navy on a flat fill: hatch 45° lines, dots (r 1.15 on a 7 grid, on cream), dots2 (r 0.75 on 4.6, on clothes and key heads), grid (periwinkle 1.2 lines on 9, empty slots), stripe (navy 7 on 14 at 45°, caution boards on lemon), pstripe (pink progress fill), check (4.5 checker bands). Every large fill except white window bodies carries one texture or one inner detail.

Characters

• One per card, slim and simple, 140–180 author units tall standing (39–51% of the card height); a seated figure's head top sits at 40–45% from the top of the card. Head (face only) about 37 × 42: the figure is 3.5–4 heads tall, hat or hair included.
• Head in 3/4 view facing right, into the scene. Build it with p.head() in scripts/pop.mjs: oval face, C-shaped ear with a 1.3 inner curl at the back, two navy oval eyes (near 1.6 × 2.2, far 1.4 × 2.1, set high at the face's midline), short straight brows at 1.9, one blush circle r 2.6 on the near cheek, and an open grin (navy mouth, white teeth band, pink tongue). No nose: the face silhouette carries it. Variants: a flat focused mouth with the tongue poking out of the corner, or a one-stroke smile.
• Hair is a flat saturated shape (pink bob, lemon ponytail) with two 1.5 navy strand lines, or navy curls made of r 5.4 arcs with three white 1.4 highlight ticks. Accessories in the palette: hairband, hard hat with a hatched right side and an orange ridge, round glasses.
• Every head sits on a neck block (p.neck()), and the neck sits in a collar. Fault prevented: a judge-flagged missing neck.
• Torso: a tapered tee filled with a colour plus dots2 or white horizontal stripes (4 high every 9), its back band hatched through a clip path, with a 1.5 hem fold line. Raglan seams or straps are 1.6 lines.
• Limbs are union capsules: upper arm r 4.5–4.9 → elbow 4.0–4.4 → wrist 2.7–3.0; thigh 8.2–8.6 → knee 6.6–7.2 → ankle 4.8–6.0. A short sleeve is a second capsule over the upper half of the arm with a 1.5 hem line. Hatch the far leg.
• Hands follow references/craft.md (construction, size, handedness, thumb proof). In this style: one union outline at 2.4–3.0, finger separations as 1.3–1.7 navy contour lines inside the shape (never gaps), fingers grouped, the thumb a separate outlined shape on top. A gripping fist has three short knuckle notches along the curled fingers and its thumb coming over the opposite face; the shaded half of a light-skinned fist is #f4a385. p.fist(), p.openHand() and p.looseFist() build these; scale them so a fist is about 60% of the face height.
• Feet: side-view sneakers (p.sneaker()): a cream sole slab, a white, orange or pink upper, a pink side stripe, a toe-cap line and two lace ticks. Cuffs are short tubes in a contrasting colour at the ankle. Draw each leg first and its sneaker on top, far leg and shoe before near leg and shoe; a leg drawn after its shoe swallows the upper. To lift a heel, wrap the sneaker in rotate(18 x+22 318) (about its toe contact).
• Poses that work: leaning back against a pull with both knees bent; standing beside a big prop, leaning back to steady it, rear heel lifted; running with the torso pitched 20° forward, arms pumping, rear heel up; sitting on an iso cube with the knees 10–16 units above the hips, one hand braced flat on the seat behind her, a foot tapping heel-up with two tick marks.
• Solve elbows and knees with p.ik(S, H, l1, l2, bend) so every hand traces back to a shoulder. bend (+1 / −1) flips the joint to the other side of the line: print the solved elbow and check it hangs below the shoulder-to-wrist line. An elbow solved upward reads as a dislocated arm.

Decor and props

• Hero: almost always a browser window (white body, coloured title bar with three traffic dots and a url pill, a dotted cream footer or gutter, wireframe text pills and one picture block inside). The subject's own object (crane, phone, padlock, refresh arrow) overlaps it.
• Secondary props, 3–5 per card, each extruded and outlined: pinwheel tile (8 facets: pink, lemon, mint, violet blades alternating with white and cream-dotted facets), iso cube (cream dotted top, sky hatched left, navy right), lightning bolt (lemon or pink), striped ring, chunky curved arrow, chat bubble with three white dots, key, gear, cursor arrow, smiley circle, cone, padlock, phone, flame.
• Floating marks, 6–9 per card, unextruded: # hashmarks (2–3), // slashes (1–2), + (1–2), a navy dot r 2.4 (1–2), an outline ring r 4 (1–2), one outline cloud. Scatter them in the margins and gaps, at least 8 author units clear of any prop, or well inside a large face as texture (a # on a cube face or a card corner). Never let one straddle an outline or sit among a window's content.
• Props overlap: tuck a pinwheel behind a window corner, let a bolt cross a window edge, a bubble and key overlap the title bar. Free-floating big props read as stickers.
• Never: drop shadows that are not navy extrusions, gradients, sparkles or 4-point stars (that is the outlined-cartoon vocabulary), ground lines, plants, text longer than a 6-digit code.

Composition

• No background. The cluster's ink bounding box covers 75–81% of the card width and 66–73% of its height; margins 46–61 px on every side (about 100 px on the 2x render), left and right within 5 px of each other. Ink covers 21–25% of the card: if a card looks thin, add an overlapping prop at a window edge (bubble, badge, clock), not more floating marks.
• Draw in author space on the 480 × 360 grid, then wrap everything in translate(240,183) scale(0.78) translate(-240,-169) (p.card() does this). Card position from author position: X = 240 + 0.78 (x − 240), Y = 183 + 0.78 (y − 169).
• The character stands at the left third facing right; the hero window sits centre-right; the subject prop links the two (the wrench on the bolt plate, the phone in both hands, the arrow under the feet).
• Floor-standing things share one implicit floor line (author y ≈ 318): soles, barrier feet, cones, cubes, a phone's base, a padlock. No drawn ground line.
• Density is high but every enclosed gap holds something: a loop or frame with an empty middle reads as sparse.

Techniques

All four are in scripts/pop.mjs (ES module, no dependencies). node scripts/pop.mjs demo /tmp/pop-demo.svg writes a sheet of every mark (put it anywhere outside the skill folder); render it to see the vocabulary.

1. Extrusion, always down-right. Copies of the shape filled and stroked navy, stepped 1 unit at a time, drawn before the face:

   <g fill="#1f1c4d" stroke="#1f1c4d" stroke-widt