Illustration Isometric Mono

Illustration: Isometric mono

A small world on a slab: seven to ten developer or design objects arranged on one rounded platform, drawn in true isometric with a single green ramp, every edge inked and every face shaded by its orientation. It reads as a precise, technical, calm product illustration, and suits infrastructure, tooling and workflow subjects: dev stacks, pipelines, studios, data centres.

Boundary: there are no people here. For a character acting out a tech moment use illustration-flat-with-black or illustration-outlined-cartoon; for one hero object with a hard offset shadow and floating extras use illustration-teal-spot; for chunky navy-extruded pop geometry use illustration-bold-pop.

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. Design Studio and CI Pipeline both scored 8.5 on their first judged round; both were built on the kit that ships in scripts/iso.mjs.

The look in one sentence

Every surface is a flat face of a true-isometric solid, filled from one green ramp by the direction it faces and outlined in 0.9 deep green, standing on a single bevelled off-white slab with soft green light pooled around it.

Palette

• Faces get colour from shade(normal, material), which blends top/left/right colours by the face normal. Curved and rotated faces therefore produce in-between hexes (50–140 per card). They are correct; check them with scripts/ramp-check.mjs, not by eye. lint.mjs --palette lists them all as warnings by design.
• Materials (top / left / right): M.light off-white / mint / mid (default objects), M.pale off-white / pale / mint (plugs, coasters), M.mid off-white / mid / deep (racks, monitors, pots, cabinets), M.deep very deep / mid / deep (flat dark cards), M.dark deep / deep / very deep.
• Opacity only on floor decals (shadows, glows, the slab's under-shadow), screen sheens (#5cc58a 0.16–0.22) and highlight bands. No other hue ever: no greys, no accent colour, no text colour outside the ramp.

Line and fill

Numbers in SVG units at 480 wide (the kit already scales plan units by K = 0.91).

• Outline 0.9 #0f3d30 on every visible edge of every solid, drawn once per edge (poly3, prismZ and platform do this). Round joins and caps.
• Face fills carry a 0.35 stroke in their own colour so neighbouring faces don't show hairline gaps. Do the same whenever you fillP a face yourself.
• Panels and insets 0.5–0.55 (door insets at stroke-opacity 0.7, plinth lines at 0.6). Tiny parts (plugs, corner castings, swatches) 0.35–0.45.
• Detail lines in ramp greens: ribs and vents 0.45–0.6 in #2f9e6c or #0b4a3a (opacity 0.55–0.75 on the right faces), container ribs every 2.6, vents every 2.2, rack units every 6.4 with LEDs r 0.7–0.8, book page lines every 1.15, code lines 1.0–1.2 in pale/mint/mid on very deep screens, a >_ prompt at 2.4.
• Platform: inner rim #5cc58a 0.6 at opacity 0.75, 6.5 inside the edge; bevel seams 0.5 at opacity 0.55; a soft under-shadow #5cc58a at 0.2 offset 4 and blurred 4.
• Cables: three strokes along one Catmull-Rom curve: outline 3.0, mid green 1.55, a 0.5 mint highlight offset (−0.35, −0.45). A thinner gauge: 2.46 and 1.09.

Characters

This style draws no people. The hero-object rules take their place:

• One hero, usually at the slab centre (plan x and y within ±30): a laptop with code, a monitor with a design tool, a conveyor. It carries the most detail and gets a mid-green glow in front of it (glow(..., 0.5) about 52 x 30). A hero that is a tall row (a rack row) runs along an upper edge instead, with its glow on the floor in front of it.
• Supporting objects are 40–70% of the hero's footprint and each tells one part of the subject. Build every one from boxes, rounded prisms, cylinders and extrusions; nothing is a flat icon stuck on the slab except deliberate flat cards (z ≤ 3).
• Every object has one face of fine repeated detail (units, ribs, keys, pages, slats) and at least one glyph that names it (</>, a tick, an upload arrow, a >_).
• Heights vary in four bands: flat 2–3 (cards, sketchbooks), low 18–30 (mugs, books, containers), mid 40–60 (cabinets, gates), tall 68–90 (racks, shelves, towers, monitors). Tall pieces stand only along the upper edges; a row of identical racks counts as one piece.

Decor and props

• Kit props (scripts/iso.mjs): rack, database, laptop, container, mug, card (terminal), cloudBadge, books/book, plant, tower (status lights), cable with cableShadow. Primitives: box, rbox (rotated), prismZ over rring/circle (rounded slabs, cylinders), poly3 (any convex solid), extrude (standing badges and icons), textOn. Detail helpers: hatch, dotGrid, fan.
• Example-only props worth copying from the generators' structure: monitor with design UI, shelf, drawing tablet, sketchbook, pen cup, swatches, mood board (Design Studio); conveyor, gates, robot arm, pallet stack, dashboard card, rocket badge (CI Pipeline). Read them in examples/*.svg for layout and detail density.
• Reuse with care: take at most three kit props straight from any one example; build the rest for the subject from primitives (a cooling unit is a box with fan and hatch, a drive crate is an open box with thin boxes inside, gas cylinders are prismZ cylinders with a label band).
• Floor light: a cast shadow for every object; a dark contact pool (#2f9e6c at 0.3–0.34) under every small object; one to four mid-green glows (0.46–0.6) in front of screens, LEDs and lit panels; halo() for lamps and stack lights.
• Text: none, or at most two monospace labels laid on a face with textOn() (ui-monospace 5.6, weight 700, pale mint on very deep). Draw glyphs as lines.
• Never: people, sky, background shapes, a second slab, floating objects off the slab, sparkles, confetti, any non-green hue, perspective.

Composition

• One slab: platform() with half size 122 and corner radius 26 in plan units. It projects to x 55.5–424 (77% of the card width), its bottom edge at y 330.5. With objects the ink box is 368.5 x 287–297: margins left and right 56, bottom 30, top 34–44.
• Card ink coverage 22–24%. Seven to ten objects (a flat floor element such as tiles or a card counts) with 12–25 plan units between footprints; keep every footprint within ±110 so it stays clear of the rim line.
• Where plan points land on the card: screen x = 240 + 0.788·(x − y), screen y = 204 + 0.455·(x + y) − 0.91·z.

• Depth runs from the back corner (small x + y) to the front corner (large x + y). Put tall pieces along the two upper edges, flat cards and small items toward the left, right and front corners. Fill all four quadrants of the slab.
• The slab centre (plan 0, 0; card 240, 204) always holds an object. Usually that is the hero. When the subject is itself a tall row (racks, shelves), the row runs along an upper edge and a low object takes the centre; an empty centre reads as a hole.
• Spread objects in screen x, not just in plan. Objects with similar x − y stack in one column on the card and overlap each other; give neighbours in depth different x − y.
• Leave at least 4 px on the card between neighbouring silhouettes, or overlap them clearly; a cylinder top just kissing a base plate reads as a tangent.
• One or two cables tie the hero to back objects and lie on the slab (z 1.1), climbing into ports at the ends.
• Light comes from −x (upper left): every shadow falls toward +x (lower right).

Techniques

1. The projection and the shading come from the kit. Plan coordinates (x, y, z) map with P(x, y, z) = [240 + (x − y)·cos30°·0.91, 204 + ((x + y)/2 − z)·0.91]. Build solids and let the kit pick each face's fill:

import * as I from '/abs/path/illustration-isometric-mono/scripts/iso.mjs';
I.init('dc-'); I.floorDefs(); I.platform();
// ...every castShadow / glow / cableShadow, then I.flushFloor() (technique 3)...
I.box(-20, 20, -30, 30, 0, 40, I.M.mid);                                   // a cabinet
I.prismZ(I.rring(60, 60, 18, 12, 3, 0, 3), 0, 3, I.M.deep);                 // a rounded flat card
I.prismZ(I.circle(-60, 60, 12, 12), 0, 24, I.M.light);                      // a cylinder

2. Draw on faces with face mappers. onLeft(y) maps (x, z) onto the +y face, onRight(x) maps (y, z) onto the +x face, onTop(z) maps (x, y). Combine with quad() and line():

const F = I.onLeft(30);                                                    // front (+y) face of the cabinet
I.both(I.D(I.quad(F, -16, 4, 16, 36)), I.VD, I.OUT, 0.5);                  // dark door panel
let ribs = ''; for (let x = -13; x <= 13; x += 2) ribs += I.line(F, [[x, 8], [x, 32]]);
I.strokeP(ribs, I.DG, 0.5);                                                // fine repeated detail

3. Floor first, then objects back to front. All castShadow, glow and cableShadow calls go before flushFloor(), which clips them to the slab and blurs them by 1.6. Shadow length is h · 0.62 plan units toward +x; for very tall objects pass h · 0.35–0.45 so the shadow doesn't run off the slab.

I.castShadow(I.rectFoot(-20, 20, -30, 30), 40, 0.62, 0.24);                // footprint, height, length k, alpha
I.glow(60, 60, 26, 20, I.DG, 0.32);                                        // contact pool under a small object
I.glow(0, 50, 52, 30, I.MG, 0.5);                                          // screen spill in front of the hero
I.flushFloor();

Then draw objects in ascending x + y of their footprint centres. When one object reaches both behind and in front of another (a conveyor through gates, a robot arm over a belt), split it into back and front calls, as the CI Pipeline card does.

4. Fine repeated detail has helpers. hatch(F, u0, u1, w0, w1, step, dir, colour, width) draws ribs, slats, vents, bays and louvres inside a face rectangle (dir 'w' lines run along w, 'u' along u); dotGrid(F, ...) draws perforations and cork; fan(F, uc, wc, r) draws a round fan grille. Put each feature on a face that has open slab in front of it: a +x face needs clear slab toward +x, a +y face toward +y. A fan drawn on a +x face six units from a taller rack was hidden entirely. Reserve a clear strip on a face for a cable socket; a socket drawn over a battery panel looks like a mistake.

const R = I.onRight(-90);                                                  // +x face of a cooling unit at x = -90
I.fan(R, -46, 34, 13);                                                     // fan centred at y -46, z 34
I.hatch(R, -62, -30, 7, 18, 2.2, 'u', I.DG, 0.5);                          // louvres under it
I.dotGrid(I.onTop(1.2), -82, -70, -64, -54, 2.4, I.DG, 0.7, 0.7);          // perforated floor tile

5. Standing shapes are extrusions. For a badge, logo or icon standing on the slab, describe its outline in (u, w) and pass a front-face mapper to extrude() (or copy cloudBadge()): side walls are sorted and shaded automatically, concave notches get crease lines.

A full worked card: scripts/dev-stack.gen.mjs rebuilds examples/dev-stack.svg from a layout table (identical to within anti-aliasing). Start every new card by copying it.