# Illustration and imagery

## The node graphics pack

One illustration idea, used everywhere: pale points joined by fine threads, with exactly one mint node that everything connects to. It's the brand idea drawn literally: many disciplines, one connected mind. The **Illustration** asset group holds five approved renderings of it. Use these first; the `NodeField` component is for live, animated web heroes and small spaces.

| Graphic | What it says | Reach for it on |
| --- | --- | --- |
| `01-flowing-network` | Layered waves of connection; closest to the LinkedIn banner | Banners, web heroes, wide openers |
| `02-vortex` | Everything turns toward one point | Closing pages and slides, calls to action, "the one thing" moments |
| `03-orbital-sphere` | A whole, connected world with one point lit | Covers of reports and decks, portrait crops (the sphere sits clear of the edges) |
| `04-converging-streams` | Several disciplines meeting at one node | Section openers about integration, strategy, "where it comes together" |
| `05-branching-constellation` | Open, organic growth from one centre | Quotes, people and teams, recommendations |

Rules:

- Use the **original** files for finished work. Use `-transparent` files only to layer on a dark surface; they are not light-theme assets.
- **Night grounds only.** On a Paper page, set the graphic inside a Night panel (`bg` Night) and fade its edges into the panel so there is no seam.
- **Keep the green node in frame** when cropping, and keep it the only bright green on the page. No mint headline word competing with it on the same panel.
- **Weight the graphic away from the words.** Fade it to the ground behind the type (a gradient mask from the text side), and never put small text over the dense mesh.
- **Rhythm, not repetition.** Graphics punctuate a document; they don't decorate every page. Open with one on the cover, close with one, and in between let them land at a natural pace on a few section openers. Roughly one inside graphic every three or four pages, never on two pages in a row, and never on a page that is already full of charts or tables. A short report (up to six pages) needs the cover, at most one inside, and the close. Decks follow the same idea: cover, a few section dividers, closing slide.
- One graphic per page or slide at most.
- These are 1536 × 1024 rasters. Don't scale them beyond 768 × 512 at 2×; commission a larger render for big print.

## The node field (generated)

The `NodeField` component draws the same idea live: pale points joined by hairlines with one mint spark. Use it where the pack can't go: animated web heroes with a pause control, small or odd-shaped spaces, and Paper surfaces, where it renders in `ink`.

It drifts slowly on screen and holds still in print. Motion pauses for anyone who prefers reduced motion, and there's always a pause control.

### Anatomy

Three elements, nothing else.

- **Nodes.** Pale `ink` points, 1.5 to 4px across, at varied opacity so the field has depth.
- **Hairlines.** 1px, fading with distance. Only near neighbours connect.
- **The spark.** One mint (`accent`) node with a soft glow, its links lit mint. The one signal, in the field.

### Density

| Density | Use |
| --- | --- |
| `sparse` | Behind long reading. |
| `balanced` | Heroes, covers, title slides. |
| `dense` | A full-bleed image moment with no type on it. |

### Composition

Weight the field away from the words (`bias="right"` when copy sits left). Nodes gather on the far side and thin out behind the type, so the headline always has calm ground.

### Don't

- Crowd it, or scatter sparks everywhere. One spark; two at most on a wide hero.
- Colour it with the logo spectrum.
- Make it feel like a circuit board. It should feel like a thought.

## Photography

Dark, desaturated and atmospheric. Renders set the mood, portraits put a real person in it. Either way, the image never competes with the words on top of it.

1. **Dark.** Low key, deep shadows. The image should meet `bg` without a seam.
2. **Desaturated.** Pull colour back until only a cool, green-grey tone is left. Mint stays the only bright thing.
3. **Atmospheric.** Light, haze and space over props and detail. Suggest, don't explain.

### Portraits

Real photographs of Keith, never stock faces. Natural expression, low light, room around the head. One soft source from the side; cool shadows, skin kept natural, no filters or heavy retouching. Head and shoulders or wider; leave the lower third clear for type. Text sits on a bottom scrim, never across the face.

### Renders

For ideas without a face: abstract, dark, lit from within. The de-alwis.com role images (business consultant, open source, AI for business, CTO, programme management) are the reference set.

### Places and work

For decks and documents, photographs of the subject's world: sites, operations, materials, the work itself (a port, a warehouse floor, a desk of invoices). Use the client's own, Keith's own, or licensed images (Unsplash or equivalent), credited in the speaker notes. Every one gets the same grade, applied by the engine: greyscale mapped from `bg` in the shadows to a soft `ink` in the highlights, so images from any source read as one shoot and meet the ground without a seam.

- Section dividers, context slides and case examples only. **Never on a cover or a close**: those carry a node graphic.
- One photograph per page at most, and photographs count toward the same rhythm as node graphics: never on consecutive pages.
- No posed people, no handshakes, no AI-generated people. Real portraits stay real.

### The scrim

When type sits on a photograph, a gradient to `bg` carries it: clear from the top to about 45%, reaching 90% `bg` at the bottom edge. Check the text still clears 4.5:1 over the brightest part. Behind images, use `media`.

### Don't

- Brighten or boost saturation.
- Add colour washes or duotones outside the palette.
- Use stock people pointing at screens or shaking hands.