Graphics

---
name: graphics
description: "Invent imagery, iconography, illustration, and generative visual languages. Use for expressive possibilities before choosing DOM, SVG, Canvas, or GPU implementation."
argument-hint: "[the UI / component / page where icons, imagery, or canvas/GPU rendering lives]"
metadata:
  kind: heuristic
---

<!--
Copyright 2026 IamK77 — Licensed under the Apache License, Version 2.0.
See ./LICENSE and ./NOTICE · https://www.apache.org/licenses/LICENSE-2.0
-->

# graphics

Invent imagery, iconography, illustration, and generative visual languages. Use for expressive possibilities before choosing DOM, SVG, Canvas, or GPU implementation.

## Starting point

A graphic can explain a relationship, establish a world, or invite interpretation. Start from what it lets someone perceive, not from the rendering technology available.

Bring a question, fragment, reference, or tension. Follow whichever association becomes useful; these invitations are not a sequence to complete. Speculation should remain distinguishable from an observed fact.

## Thought experiments

### Change the representational distance

Try literal depiction, diagram, symbol, and abstraction for the same subject. Notice which meanings become clearer and which new associations emerge.

### Invent a visual grammar

Choose a small set of marks and transformations. Could repetition, variation, collision, or growth create a family rather than a pile of unrelated illustrations?

### Borrow a process

Translate weaving, erosion, notation, or mapmaking into image construction. A process can produce a more distinctive family than a list of style adjectives.

## A possible turn

A network-security product might show shields, but could instead depict changing trust relationships as partitions, paths, or woven boundaries. The shift from object to relation opens an illustrative language that an icon search would miss.

## Leave the space open

Offer a few genuinely different possibilities, a sketch, an analogy, or a sharper question when useful. Do not turn every prompt into a scored diagnostic, a completion gate, or a demand for an action plan. The human may choose a direction, combine them, or leave the question open.

Once a direction is wanted, choose the least complex suitable renderer and provide useful nonvisual/fallback content. Creative exploration is not permission to ship inaccessible or unbounded rendering.

## Optional references

Read selectively when a thread needs another perspective or a concrete technique. The notes supply possibilities, examples, and limits; none is a prerequisite or a requirement to close the exploration.

- [Develop a visual process before a renderer](references/canvas-webgl-gpu.md)
- [Choose a medium for the relationship](references/dom-vs-canvas-vs-webgl-and-fallback.md)
- [Marks, labels, and a coherent family](references/icon-system.md)
- [A visual family from a construction process](references/imagery-and-illustration.md)