Illustration Line Interior

Illustration: Line interior

A calm, editorial line style: a whole room at small scale, people at about one seventh head-to-height, every shape outlined once in thin indigo and filled white, with a few flat accents. It suits product marketing that wants "people at work" without loud colour. Use illustration-outlined-cartoon for big-headed characters with a near-black ~2.4 px ink line and bold fills. Use illustration-framed-panel when the scene should sit inside a coloured panel on a pastel card. Use illustration-flat when there should be no outlines at all.

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

One thin, uniform indigo outline (1.4 px) around white-filled shapes in a wide, airy room, with flat colour on under 7% of the card.

Palette

Measured from the three examples (fills and strokes, 1x renders). White and the card make up about 85% of the pixels, indigo line about 2%, accents 4–7%.

• Never: gradients, opacity, drop shadows, hatching, black, grey fills, the wall-line colour as a fill, a coloured background rect.

• One accent per object. A person wears at most two accents plus white: top, trousers, and sneakers where either the upper or the sole is white.

• No two large accent shapes of the same hue touch (a coral shoe on a coral rug). Keep the big shapes (shelf, board, desk, hammock) white or peach.

Line and fill

• Two layers. Background: <g id="xx-bg" fill="none" stroke="#cfc9e0" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">. Foreground: <g id="xx-fg" stroke="#3a2d66" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">. Shapes inherit the stroke; each sets its own fill.

• Outlines are strokes on filled shapes, never filled outline shapes. Every foreground shape gets a fill (white if nothing else), so overlap hides what is behind. Depth comes only from overlap order: draw back to front, far limbs before the torso.

• Weights at 480 wide: 1.4 for every outline; 1 for detail lines (fabric folds, leaf veins, book bands, lace ticks, ear inner, brows, nose, mouth, steam, x marks, hair shine); 0.9 for finger separations; 1.2 for whiteboard diagram strokes; 1.7–1.8 coloured dashes for code on screens; 2.2 for bullet dots (M190 146h0.1).

• Shading: none. No tone steps, no hatching, no highlights. A fold is one 1 px curve, 4–8 px long, 2–3 per garment.

• Texture: tiny x marks (xm(), 3 px, stroke 1), 2–4 per pot or box. Never on clothing.

• Lettering: font-family="ui-monospace, monospace" font-weight="700", 4.4–5.2 px, 2–5 letters (JS, CSS, UX, API, CACHE) on a small label rect, stroke="none".

• Rounded corners: rx 0.6–1 on books and bricks, 1.5–2.5 on furniture tops and frames.

Characters

• Proportions: a standing figure is 229–235 px from crown to sole; the head (chin to crown) is 33–36 px, so 1:7. Slim: shoulders about 30 wide, legs with hip half-width 9.6–11 tapering to 5.6–5.8 at the hem.

• Head: build it with head() from the toolkit. It draws a 3/4 profile facing left or right: one face path with the nose and chin in the contour, an ear on the back side, a near eye dot (r 1.15) and a far eye dot (r 1.0) 4.9 apart, two 1 px brows, a nostril tick and a short mouth arc. No cheek colour, no pupils, no open mouths. Calm, slightly smiling.

• Hair: one flat shape in indigo #3a2d66 (1–4 shine arcs in purple #7f6cc4) or brown #7b4b3a (shine in orange #f6a85e). Presets: afro, bun, side, crop (+ beard, glasses, earring). The afro's back mass returns as behind: draw it before the torso.

• head(x, y, rot, opts) rotates in screen degrees (+ = clockwise). That nods a right-facing head DOWN and a left-facing head UP. Tilt 4–9° toward what the person looks at.

• Neck and torso: torso(hx, hy, { style: 'tee' | 'top', facing, fill, skin }) draws the neck, a soft shirt shape 30–34 wide (crew-neck tee or fitted top with a small V collar) and two 1 px folds, all placed from the head centre. TORSO_ANCHORS[style] gives the shoulder, hip and waistband points relative to the head centre. Mirror their x for a left-facing figure. Tops are white or one accent.

• Sleeves: sleeve(S, arm.u, 13, 5.8) caps the upper arm; drawn after the arm. A flatter sleeve (half-width under 6) avoids a shoulder-pad look.

• Arms: bentArm() with half-widths 4.4–5 shoulder, 4–4.4 elbow, 3.2–3.4 wrist. It gives a pointed outer elbow; add the 3 px crease line from arm.I. Upper arm 27–40, forearm 24–33. Use solveElbow(S, wrist, 35, 30, flip) and try both flip values: the right one hangs the elbow below the shoulder-to-wrist line. Keep the wrist 45–60 px from the shoulder. Closer, and the arm folds into a chicken wing.

• Put a fingertip on a target with wristFor(HANDS[name].tip, target, angle, scale, flip). It returns the wrist point to solve the arm to.

• The far arm in a profile view: show it. Swing it back behind the hip (or forward behind a held object), drawn before the torso, so a forearm and a rest hand show below the torso. A figure with one arm reads as "an arm is missing".

• Hands (toolkit HANDS): 17 local units at scale 1.05–1.15, so 18–20 px long, about the face from chin to brow. Fingers are 3–4 rounded bands with 0.9 separation lines; the middle finger is longest, the little finger shortest. Shapes: type (palm down on keys), cup (wrapped round a mug, thumb over the rim), wrap (same, thumb hidden behind the object), marker (fist round a pen, with HANDS.marker.pen()), point (index out, thumb tucked), rest (relaxed).

• Every hand shape has its thumb on local −y. Decide LEFT or RIGHT and PALM or BACK with the table in references/craft.md, then pass flip = true when the thumb belongs on +y.

• Legs and feet: trouserLeg() for standing legs (tapered, flat hem, 5.2 px rolled cuff band, 4–10 px of ankle skin); bentLeg() + cuffAndAnkle() for sitting or stepping. sneaker() is 25 × 10.6 with a 3 px sole band and two lace ticks; heel at the floor point, mirrored with scale(-1 1). End each trouser leg at the shoe's shoeOpening(heel, rot, mirror).

• Rear foot on its toes: heel = liftedHeel(toeX, 22–28, mirror), then sneaker(\translate(heel) rotate(deg)`). For a mirrored shoe use rotate(-deg) scale(-1 1)andshoeOpening(heel, -deg, true)`.

• Poses that work: reaching up to a shelf or board, or pressing a button, with the upper body leaning 4–9° (rotate the upper-body group about the hip and the shoulder points with rotAbout()); the rear heel lifted so only the toe touches the floor; lying in a hammock with the laptop on the thighs; sitting on a stool, one foot on the rung, holding a cup.

Decor and props

• Background layer (wall line, unfilled), all of it pale and secondary: 2–3 brick clusters of 3–5 bricks (bricks(), 14 × 6, rows 7 apart), 1–2 pendant lamps hanging from the card's top edge (lampDome(), lampCone()), 1 framed poster on a nail (poster()) with a simple icon inside. Outdoors: 2–3 outline clouds, 2–3 birds, a skyline and a railing instead of bricks.

• Foreground, per card: one hero prop in the middle that carries the subject (ladder shelf 98 × 203, whiteboard on wheels 160 × 256, hammock between posts 260 wide); one tall plant in a pot at one end (60–68 wide, 150–185 tall); one secondary piece at the other end (desk with a monitor and mug, a short snake plant, a stool with a colleague); 2–4 small props (mug with two 1 px steam curls, books with band lines and labels, a rubber duck, sticky notes, a monitor with window dots and coloured code dashes).

• Plants: leaf() (lance leaves with veins), figLeaf() (fiddle-leaf fig), blade() (snake plant), stems as 1.4 px open curves from the pot, leaves alternating sage and leaf green. Pots: pot(), white with x marks, peach with 1 px bands, or orange.

• Never: sparkles, confetti, floating icons, speech bubbles, shadows under objects, rugs, more than two items on the floor beside the hero.

Composition

• No background rect: the card is white (the examples have none). If the host page is not white, add a square full-bleed #ffffff rect first.

• Floor line at y 308: M56 308H424M40 308h10M430 308h10. Every foot, pot, leg and caster stands on it. The band below (y 308–360) stays empty.

• Content spans x 33–445. Only lamp cords touch an edge (the top). Everything else stays at y ≥ 25.

• Left to right: tall plant (x 33–121) | hero prop with the figure acting on it (x 115–335) | secondary furniture or plant (x 330–445). Mirror this freely, but keep the hero central.

• Figures: 94–190 px wide, 235 tall standing. One focal action, at the figure's hands.

• Density: about 10–14 foreground objects including plant leaves; generous white space between groups. Busy is wrong here.

• Group transforms the examples use: translate(-8 0) to nudge a whole figure; rotate(-7 284 180) on the upper-body group (neck, torso, head, sleeve) to lean it over the hips.

Techniques

1. A parts toolkit. scripts/interior.mjs (no dependencies) has every repeated part with the examples' numbers: layers, floor, bricks, lamps, poster, cloud, leaves, pots, limb, bentArm, solveElbow, sleeve, torso, trouserLeg, bentLeg, cuffAndAnkle, sneaker, shoeOpening, liftedHeel, rotAbout, HANDS + hand() + place() + wristFor(), head() and mirrorPath(). Run node scripts/interior.mjs --demo /abs/work/demo.svg from the skill folder (write it into your work folder, not the skill) and render it to see every part. The demo output is a parts sheet: four heads, six hands with thumbs up, two plants, the lamps, the bricks and a standing figure built from the parts.

A complete figure, tested: a woman facing left points at a chart. Save it as card.mjs next to your card, fix the import path, and run node card.mjs.

import fs from 'node:fs';
import * as LI from '/abs/path/to/illustration-line-interior/scripts/interior.mjs';
const { W, C, SKIN, FL, P, f } = LI, id = 'sn-', sk = SKIN.medium;
const HC = [300, 102], A = LI.TORSO_ANCHORS.top, rel = q => [HC[0] - q[0], HC[1] + q[1]];  // facing left: mirror x
const LEAN = -5, PV = [300, 188];                                   // lean toward the left, about the hips
const h = LI.head(HC[0], HC[1], -4, { hair: 'bun', facing: 'left', skin: sk, hairColor: C.brown, earring: true });
const heelB = LI.liftedHeel(300, 24, true);                         // rear heel up, toe on the floor
const legF = LI.trouserLeg([[296, 188], [293, 230], [291, 270], [290, 291]], [10, 8, 6.2, 5.8], LI.shoeOpening([297, FL], 0, true), C.denim, sk);
const legB = LI.trouserLeg([[306, 188], [309, 230], [313, 262], [316, 282]], [10.6, 8.4, 6.4, 5.8], LI.shoeOpening(heelB, -24, true), C.denim, sk);
let fg = LI.floor(id);
fg += `<rect x="150" y="96" width="70" height="54" rx="2" fill="${W}"/><path d="M158 138l14-16 10 9 12-15 16 12" fill="none" stroke="${C.teal}" stroke-width="1.8"/>`;
fg += legB.skin + LI.sneaker(`translate(${P(heelB)}) rotate(-24) scale(-1 1)`, C.coral, W) + legB.leg;
fg += legF.skin + LI.sneaker(`translate(297 ${FL}) scale(-1 1)`, C.coral, W) + legF.leg;
fg += `<rect x="284" y="${HC[1] + A.waistTop}" width="33" height="5" rx="0.8" fill="${C.denim}"/>`;
fg += `<g transform="rotate(${LEAN} ${P(PV)})">${LI.torso(HC[0], HC[1], { style: 'top', facing: 'left', fill: C.lav, skin: sk })}${h.front}</g>`;
// near arm = LEFT (she faces left); back of the hand visible, index pointing left -> thumb UP.
// HANDS.point keeps its thumb on local -y; at 186 deg local -y points DOWN, so flip = true.
const S = LI.rotAbout(rel(A.nearShoulder), LEAN, PV), ang = 186, tip = [221, 124];
const Wr = LI.wristFor(LI.HANDS.point.tip, tip, ang, 1.1, true);
const arm = LI.bentArm(S, LI.solveElbow(S, Wr, 36, 30), Wr, 4.6, 4.2, 3.3);
fg += `<path d="${arm.d}" fill="${sk}"/><path d="M${P(arm.I)}l${f(-arm.u[0] * 3)} ${f(-arm.u[1] * 3)}" fill="none" stroke-width="1"/>`;
fg += `<path d="${LI.sleeve(S, arm.u, 13, 5.8)}" fill="${C.lav}"/>` + LI.place(LI.hand('point', sk), Wr[0], Wr[1], ang, true, id + 'hand', 1.1);
const bg = LI.bgLayer(id, LI.bricks(60, 80, [[0, 0], [15, 0], [7, 7]]) + LI.lampDome(380, 40));
fs.writeFileSync('card.svg', LI.svgWrap(bg + LI.fgLayer(id, fg), 'Snippet test, Line interior style'));

It still needs the far arm, a plant, the hero prop and the room. It shows the order: legs → waistband → leaned torso and head → near arm → sleeve → hand.

2. Hands without a wrist wedge. Draw the hand outline twice: once filled with stroke="none", once as an open path (the Z removed), then the 0.9 finger lines, then the thumb. hand() does this. A closed stroke across the wrist draws a dark wedge where the forearm meets the hand.

3. Lean by group rotation. Put the torso (with its neck), any backpack or strap and the head in one <g transform="rotate(-7 hipX hipY)">. Solve the arms in card coordinates from rotAbout(shoulder, -7, [hipX, hipY]), so the hand still lands on the object, and draw the arm, sleeve and hand outside the group.

4. Screen and board content in colour, not ink. Code on a monitor is 4–6 rows of round-capped dashes, stroke-width="1.8", each dash one accent (purple, teal, coral, lavender, orange), on a white screen with three window dots (coral, mustard, teal, r 0.9). Diagrams are 1.2 px boxes and arrows in ink, one box in coral and one in teal.

Failure modes

• Too much colour. The first Books draft (scored 6) had a mustard top, a brown shelf, an orange pot and x marks on the clothes. The redraw that reached 8 used colour more sparingly. Keep big shapes white or peach, and accents under 7% (white ≥ 83%).

• The subject reads as something else. A developer standing at a desk read as "standing desk", not "Books". The figure must do the subject: pull the book off the shelf, draw on the board.

• Bolt-upright clip-art figure. Lean the upper body 4–9°, put the weight on one leg, lift the rear heel. Front-facing symmetric poses score a point lower.

• Dark wedge at the wrist. A closed outline across the wrist. Use hand() (fill pass plus open outline).

• Thumb on the wrong side. Two shipped hands were copies of a right-hand template on a left arm (Remote Work's far typing hand, Whiteboard's mug hand), and both had to be mirrored. Work out handedness per hand, then flip.

• Mitten or rake hands. Fingers must be grouped bands of different lengths with rounded tips, 18–20 px long. Larger reads as a glove.

• Arm with no elbow. A straight tube from shoulder to object reads as a prosthetic. Use bentArm() and the crease line.

• Chicken-wing arm. The target sat 33 px from the shoulder, so a 66 px arm folded up with the elbow out. Move the prop or the figure until the wrist is 45–60 px from the shoulder, and try the other flip.

• One-armed figure. A profile figure with the far arm hidden reads as missing an arm. Swing the far arm back so its forearm and hand show behind the hip.

• Stray ticks. A 1 px fold line within 4 px of a limb's edge, or a strap end poking 2 px out from under a sleeve, reads as a slip. End a covered shape at least 3 px inside the shape that covers it, and keep folds away from other contours.

• Floating feet or pots. Sneaker heels sit at y 308 exactly. A rotated rear shoe touches the floor with its toe. Check every contact at 8x.

• X marks on clothes. They read as stains. Keep them on pots and boxes.

• Background competing with the figure. Decor drawn in indigo or filled looks like foreground clutter. It is wall-line #cfc9e0, 1 px, unfilled, and sits at least 8 px clear of the figure's head.

• Weight drift. A 2 px outline or a 0.6 px detail breaks the style at once. Use exactly 1.4, 1 and 0.9.

Examples

• examples/books.svg: "Books". A reaching pose with a −7° lean and a bent near arm gripping a book on the shelf (thumb on top). The far hand holds an open book at the hip. Afro back hair is drawn behind the torso. Ladder shelf with labelled books, a duck, a desk with a monitor, lance-leaf plant.

• examples/remote-work.svg: "Remote Work". Lying in a hammock with both hands on a laptop (type hands, mirrored for left and right). Outdoor variant of the background (clouds, birds, skyline, railing), string lights, a crate with a mug, monstera leaves, a snake plant. A clipPath hides the legs behind the hammock rim.

• examples/whiteboard.svg: "Whiteboard". Two people: one reaching up with a marker fist and a wrap hand on a mug, one seated on a stool with a cup hand, beard and glasses. Diagram content in 1.2 px ink and accent strokes, sticky notes, casters on the floor line, fig plant.

Workflow

Run every command from this skill's folder. Card paths can be absolute.

1. Brief. Name the subject in a few words and write the one action that shows it (who does what to which prop). Pick the hero prop and the pose.

2. Plan the layout on the 480 × 360 grid: floor y 308, plant at one end, hero prop centred, secondary piece at the other end. Pick the skin tones, hair presets and the 2 accents each person wears. Choose an id prefix (ob-).

3. Write a generator (card.mjs) that imports scripts/interior.mjs by absolute path and writes card.svg. Start from the Techniques snippet. Look at the --demo parts sheet once. Hand-place the figure and the hero prop; take everything repeated from the toolkit. Print the solved shoulder, elbow and wrist points so you can find them when you zoom.

4. Hands first, on paper. For each hand, write down LEFT or RIGHT, PALM or BACK, and the finger direction, then the thumb side (see references/craft.md). Choose the HANDS shape and flip.

5. Render: node scripts/render.mjs card.svg card.png.

6. Sheet with the examples: node scripts/render.mjs --sheet sheet.png examples/books.svg examples/remote-work.svg examples/whiteboard.svg card.svg. Ask "same hand, same set?": line weight, white share, density, floor, decor.

7. Zoom every hand, face, foot and contact: node scripts/render.mjs card.svg z-hand.png --zoom x,y,w,h --scale 8. Do the thumb proof from references/craft.md for every hand.

8. Critique against the five criteria in references/craft.md and the Verify list below. Fix, re-render, re-sheet. Expect four or more rounds.

9. Lint: node scripts/lint.mjs card.svg --prefix ob- --palette style.json. Fix every ERROR. Each WARN must be a deliberate tint.

Verify

• [ ] Every foreground outline is #3a2d66 at 1.4; details are 1, finger lines 0.9; no other weights apart from code dashes (1.8) and diagram strokes (1.2).

• [ ] Background decor is #cfc9e0, 1 px, unfilled, and never overlaps a head.

• [ ] On the sheet, the colour looks no heavier than the examples (they measure 84–86% white pixels, accents 4–7%). The big shapes are white or peach, and nothing uses a gradient, opacity or shadow.

• [ ] Floor line at y 308 with both end dashes, and every foot, pot, leg and caster touches it.

• [ ] Lamps hang from y 0; nothing else touches a card edge; the y 308–360 band is empty.

• [ ] A standing person is about 230 px tall with a head about 34 px (1:7).

• [ ] Each person wears at most two accents plus white; two people have different skin tones.

• [ ] Every hand is 18–20 px long, has 3–4 grouped fingers with 0.9 separation lines, and its thumb is on the side the craft table gives (thumb proof done).

• [ ] Every arm has a shoulder, a pointed elbow with a crease, and a wrist narrower than the hand. Both arms show, even in profile.

• [ ] The upper body leans or twists; the weight is on one leg or on a seat.

• [ ] The subject reads at 1x from the figure's action alone, without the labels.

• [ ] No x marks on clothing; 2–4 on pots or boxes at most.

• [ ] lint.mjs --palette style.json passes with no unexplained WARN.