Brand imagery pipeline — seven cinematic images, one design system

The problem with most developer-tool websites is that they look exactly like every other developer-tool website. Clean typography, monochrome cards, a single accent colour, and zero atmosphere. We needed AudioLab.tools to feel like a brand with depth — and we needed it without commissioning a photoshoot.

This is the build log of how we did that with Higgsfield generation, Astro’s image pipeline, and a strict design discipline.

The brief

Seven images:

1. Hero — atmospheric ribbon of cyan light, audio-waveform metaphor.
2. MixLab — abstract sculpture, cyan, with the VU-meter / analyser energy.
3. VoiceLab — abstract violet ribbons, organic, voice resonance.
4. HearLab — pale green spiral, calm, accessibility-conscious.
5. SignalLab — amber data sculpture, spectrogram-like.
6. CueLab — copper / red routing matrix.
7. SkillLab — pink concentric rings, tiered progression.

Each one needed to:

• Feel cinematic, not stock.
• Use the same lighting and depth-of-field language as the others.
• Avoid the AI-generation tells (extra fingers, mangled text, generic stock-photo composition).
• Map clearly to its lab’s identity colour.

Generation: getting the prompt right

The prompt template that consistently produced usable output:

[Composition direction]: an abstract sculptural representation of
[concept] suspended in pitch-black void, [shape direction] of [colour],
intertwining like [domain metaphor]. Misty atmosphere with subtle
particle dust catching the light. Cinematic depth of field, Hasselblad
medium-format look, premium minimalist editorial aesthetic. Soft
volumetric glow. No text, no logos, no faces, no [obvious cliché].
Pure abstract light sculpture.

Three things matter in this template:

1. “Pitch-black void” framing. Gives the model permission to commit to high contrast and ignore busy backgrounds.
2. “Hasselblad medium-format look.” Triggers shallow depth of field, larger sensor cinematic compression.
3. Explicit negative list. “No text, no logos, no faces, no microphones” prevented the model from defaulting to literal-object imagery.

For each cluster we substituted the appropriate colour and domain metaphor:

• MixLab: cyan / blue, “audio waveform”
• VoiceLab: violet / lavender, “vocal harmonics”
• HearLab: pale green / aquamarine, “inner ear curvature”
• SignalLab: amber / honey-gold, “spectrogram frequency bins”
• CueLab: copper / red-orange, “routing matrix”
• SkillLab: pink-magenta / rose, “tiered progression rings”

Hit rate: ~80 % on first generation, 100 % within two attempts. Cost: ~14 credits total for the set.

Optimisation: from 9 MB PNG to 50 KB WebP

Each raw output was a 2k PNG (3168×1344 for the hero, 2752×1536 for clusters). File sizes:

Source	PNG	After WebP at 2k	At 1280w	At 720w
hero	5.4 MB	56 KB	45 KB	32 KB
mixlab	9.5 MB	382 KB	75 KB	12 KB
voicelab	6.9 MB	73 KB	41 KB	4 KB
hearlab	6.4 MB	101 KB	56 KB	3 KB
signallab	5.2 MB	4 KB	7 KB	6 KB
cuelab	8.4 MB	275 KB	71 KB	14 KB
skilllab	5.5 MB	84 KB	32 KB	5 KB

Astro’s built-in <Image> component (powered by sharp) does this automatically when you import the asset. The whole optimisation step is one declaration per image:

---
import { Image } from 'astro:assets';
import heroImg from '@/assets/brand/hero.png';
---

<Image
  src={heroImg}
  alt="A coiled ribbon of cyan light…"
  widths={[720, 1280, 1920, 2560]}
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

This produces:

• A WebP variant at each of the declared widths.
• A proper srcset so the browser picks the right size.
• sizes for responsive selection.
• Auto-injected width/height to prevent layout shift.

We lose nothing perceptually. We gain a 95 % average reduction in bytes delivered. That’s the boring infrastructure win that compounds across every page.

Integration: where each image earns its place

Six placement patterns, deliberately consistent:

1. Cluster cards (homepage + /labs) — 16:8 aspect strip at the top of each card, image scales up on hover. Establishes per-cluster identity immediately on the grid.
2. Cluster page hero — image fills the right-side aside, metadata grid overlaid at the bottom. Replaces what was a plain “at a glance” panel.
3. Homepage atmospheric section — the hero image full-bleed at 60vh, with a quote overlay (“Audio is craft. AI is leverage.”). Adds editorial rhythm between the cluster grid and the principles.
4. Page heroes (about, labs index, roadmap, press) — hero image at 25 % opacity with a left-to-right gradient mask, anchoring the typography.
5. Hero video on homepage — see the hero motion build log.
6. Press kit page — used as proof-of-system, not decoration. The image is part of the brand kit.

What broke (briefly)

One small footgun worth flagging: when generating with a square reference and asking for a 21:9 output, the model occasionally produces output that looks padded rather than recomposed. Solution: regenerate without the reference image and just lean on the prompt.

Also: Higgsfield’s default aspect mapping doesn’t always handle 21:9 the way you’d expect. We had to explicitly verify the output dimensions matched what the prompt was asking for.

Outcome

The site went from “polished developer landing page” to “this is a real brand” in a single batch of work. Visual identity is now consistent across every page, every cluster has its own colour-coded mood, and the typography sits on top of imagery that earns its place rather than fills a hole.

Total cost: 14 credits for generation, ~10 minutes of integration work per image, zero ongoing maintenance.

Related

• Press / brand kit
• Hero motion loop — production pipeline
• Six demos in one platform — architecture