Generative Shaders as Brand Assets

A brand library is usually a folder of exported images that begin ageing the moment they are approved. A shader is a description of how the image is made, which means it resizes without loss, recolours from tokens, and never needs re-exporting for a new aspect ratio.

1. Parameterise the Brand, Not the Output

Expose palette, grain, flow speed and contrast as uniforms wired to design tokens. When the brand shifts, you change the token and every surface follows — instead of commissioning forty new renders and missing six of them.

uniform vec3 uBrandPrimary;   // token: color.brand.primary
uniform vec3 uBrandSurface;   // token: color.surface.base
uniform float uGrain;
uniform float uTime;

float noise(vec2 p) {
  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = gl_FragCoord.xy / 1024.0;
  float flow = sin(uv.x * 3.0 + uTime * 0.2) * 0.5 + 0.5;
  vec3 color = mix(uBrandSurface, uBrandPrimary, flow);
  color += (noise(uv) - 0.5) * uGrain;
  gl_FragColor = vec4(color, 1.0);
}

2. Always Ship a Static Fallback

Email clients, print, and low-power devices will never run your shader. Render a still from it at build time and treat that file as a derived artefact rather than a source of truth — the shader stays canonical, the PNG stays disposable.

3. Who Owns the Source

The awkward part is organisational. A shader lives in a repository, not a design file, which means the brand asset now has a code owner and a review process. Teams that sort this out early ship consistently; the rest end up with four forks of the same gradient.