---

name: illustration-line-interior description: Draws original hand-written SVG spot scenes in the Line interior style, wide airy rooms or terraces where slim, realistic people do design and coding work. A thin uniform indigo outline (1.4 px at 480 wide) runs around mostly white fills. Sparse flat accents (teal, sage, coral, mustard, lavender, peach wood) cover under 7% of the card. Pale lavender 1 px background decor (brick clusters, pendant lamps, framed posters) sits behind, and a long floor line with end dashes runs under it all. Covers the palette, line weights, heads and hands from a parts toolkit, composition and a render-critique loop. Use when asked for line-art, thin-line or outline illustrations, indigo line art, office, desk, home-workspace, remote-work or team scenes, or interior spot illustrations for empty states, onboarding screens, 404 pages, blog headers, feature spots, landing sections or marketing cards.

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%.

| Role | Hex | Where it goes | |---|---|---| | Indigo ink | #3a2d66 | every outline, the floor line, eye dots, indigo hair (hair is a filled ink shape) | | Wall line | #cfc9e0 | background decor strokes only (bricks, lamps, posters, clouds, birds, skyline, railing). Never a fill | | White | #ffffff | default fill for everything: furniture, shirts, screens, pots, books, sneakers, mugs | | Peach wood | #f9c99a | wood: ladder rails and boards, posts, stool, crate, a striped pot | | Mustard | #f5c35a | one book, a duck, bulbs, sneakers, sticky notes, earring stud, a top | | Orange | #f6a85e | a pot, trousers, a duck beak, shine arcs on brown hair, one code dash | | Coral | #ef5b5b | sneakers or soles, a label, a marker tip, a mug band, one code dash, window dot | | Teal | #3fa58a | a book, a top, a mug band, a hammock stripe, a check mark | | Sage / Leaf | #8cc79b / #5fae7a | light and dark leaves, alternating leaf by leaf | | Lavender | #ab9ee6 | a book, a top, page lines, keyboard lines, a sneaker sole | | Purple | #7f6cc4 | a book, trousers, shine arcs on indigo hair, one code dash | | Denim | #7f9fdc | jeans | | Brown | #7b4b3a | brown hair, coffee in a cup | | Skin | #f3cdb0 #e2a57c #b47852 #7a4b33 | light, medium, deep, dark; two people in a card get two different tones |

• 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 part