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
-transparentfiles 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 (
bgNight) 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
inkpoints, 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.
- Dark. Low key, deep shadows. The image should meet
bgwithout a seam. - Desaturated. Pull colour back until only a cool, green-grey tone is left. Mint stays the only bright thing.
- 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.
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.