Image Library

VoxelSite ships with 132 curated images — 60 backgrounds and 72 gallery images — all generated with a consistent editorial photography aesthetic. When the AI builds your site, it selects from this library based on the site's mood, color scheme, and business type.

No placeholder services, no external CDN, no broken links. Every generated site has real images from day one.

What's included

The library lives in assets/library/ and contains two collections:

Backgrounds (60 images)

Full-width hero and section backgrounds. 16:9 aspect ratio, 1920×1080 pixels, PNG format.

Four categories:

Gallery images (72 images)

Content and portfolio images for sections, grids, and cards. 1:1 square aspect ratio, 800×800 pixels, PNG format.

Categories span common business types:

How the AI selects images

The AI doesn't pick images by business type alone. It matches images to the site's visual personality:

1. Tone matching — A warm-toned site gets warm images. A dark, premium site gets dark images with light text overlays.
2. Mood matching — An earthy brand gets textures and natural tones. A bold brand gets high-contrast abstracts.
3. Contrast awareness — Each image specifies whether it works best with dark text or light text on top. The AI checks this before using an image as a background.
4. Category relevance — Gallery images are tagged with use-case categories. A bakery site gets food photography; an architecture firm gets building shots.

Selection rules the AI follows

• Match image tone to site color scheme (warm site → warm images, dark → dark)
• dark tone images → use light/white text overlay
• light tone images → use dark text
• Textures as backgrounds always get a gradient overlay for legibility
• Never reuse the same image on one page
• Maximum 3–4 library images per page — less is more
• User-uploaded images always override library images
• Alt text is generated from the image's subject metadata

The filename convention

Every filename encodes metadata that the AI engine reads directly — no separate database or JSON index needed. The convention uses underscores to separate fields and hyphens to join words within a field.

Background filenames

vs-bg_{subject}_{type}_{mood}_{tone}_{contrast}.png

Example: vs-bg_amber-bokeh_atmosphere_warm_dark_light-text.png → An atmospheric background with warm amber bokeh, dark overall tone, best with light text on top.

Gallery filenames

vs-gal_{subject}_{categories}_{tone}_{contrast}.png

Example: vs-gal_crusty-loaf_food-bakery_dark_light-text.png → A square photo of a crusty loaf, categorized as food/bakery, dark tones, light text safe.

How parsing works

The engine splits filenames on underscores. The segment count determines the type:

• 6 segments → background (vs-bg)
• 5 segments → gallery (vs-gal)

This means you can add new images simply by dropping correctly named PNG files into the right directory. No configuration files to update, no database entries — the engine discovers them automatically on the next AI interaction.

Adding your own images

You can expand the library with your own images. There are two approaches:

Option 1: Upload as regular assets

Upload images through the Assets tab in VoxelSite Studio. These go to assets/images/ and the AI will use them in your site. This is the simplest approach for site-specific images like your own photos, logos, or product shots.

Option 2: Add to the library

For images you want available to every site you generate, add them directly to the library:

1. Create your image at the correct dimensions:

   • Backgrounds: 1920×1080 (16:9), PNG
   • Gallery: 800×800 (1:1), PNG

2. Name the file following the convention:

   • Background: vs-bg_{subject}_{type}_{mood}_{tone}_{contrast}.png
   • Gallery: vs-gal_{subject}_{categories}_{tone}_{contrast}.png

3. Drop the file into the correct directory:

   • Backgrounds: assets/library/backgrounds/
   • Gallery: assets/library/gallery/

4. The AI will discover it automatically on the next interaction — no restart or rebuild needed.

Tip: Keep the same visual aesthetic — muted, desaturated editorial photography with soft natural lighting. Images that clash with the library's consistent style will make generated sites look inconsistent.

Creating images with MidJourney

The entire library was generated using MidJourney. Below are the exact prompt templates used, so you can create images that perfectly match the existing aesthetic.

Backgrounds

All background prompts end with these standard parameters:

--ar 16:9 --v 7 --s {stylize}

Use --s 100 for textures and gradients, --s 180 for abstracts and atmosphere.

Textures

Flat surface photographs, shot from directly above. Best for subtle hero backgrounds with text overlay.

Seamless flat texture photograph shot from directly above, perfectly
orthographic perspective with no angle or distortion, studio lighting
with soft even diffusion. {DESCRIPTION} filling the entire frame edge
to edge, {SURFACE DETAIL}, no objects, no context, texture only
--ar 16:9 --v 7 --s 100
--no text, words, letters, logos, watermarks, people, faces, hands,
    objects, furniture, room, depth of field, bokeh, angle, perspective

Example: Replace {DESCRIPTION} with "warm sandstone surface with fine grain" and {SURFACE DETAIL} with "natural weathering patterns, soft yellow-ochre tones."

Gradients

Smooth color transitions with no shapes or objects. Pure abstract color fields.

Editorial photography style, minimal composition, premium aesthetic,
no people. Soft gradient transitioning from {COLOR A} to {COLOR B}
to {COLOR C}, smooth continuous color flow, no shapes, no objects,
pure abstract {warm|cool} color field, {FEELING}
--ar 16:9 --v 7 --s 100
--no text, words, letters, logos, watermarks, people, faces, hands,
    objects, furniture, landscape

Example: "...from deep amber to soft ochre to warm cream, smooth continuous color flow, no shapes, no objects, pure abstract warm color field, luxurious and calm."

Abstracts

Artistic shapes and organic forms. More visual interest than gradients, but still work as backgrounds.

Editorial photography style, soft lighting, minimal composition,
premium aesthetic, no people. {DESCRIPTION}, {TONES AND COLOURS},
{TEXTURE/MOVEMENT}, no context, isolated against soft {light|dark}
background
--ar 16:9 --v 7 --s 180
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, furniture, room

Example: "...flowing silk fabric caught mid-motion, deep burgundy and bronze tones, liquid rippling texture with soft highlights, no context, isolated against soft dark background."

Atmosphere

Environmental mood shots — light, weather, space. The most "photographic" background type.

Editorial photography style, soft lighting, minimal composition,
premium aesthetic, no people. {DESCRIPTION}, {LIGHTING AND MOOD},
{COLOUR PALETTE}, {FEELING}
--ar 16:9 --v 7 --s 180
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, furniture, room

Example: "...early morning fog over still water, golden hour side lighting with long shadows, muted amber and grey palette, contemplative and serene."

Gallery images

All gallery images share the same preamble and parameters:

Editorial photography, soft natural lighting, muted desaturated tones
with slightly warm color grade, minimal composition, no people.
{SPECIFIC SUBJECT DESCRIPTION}, {LIGHTING DETAIL}, {MOOD/FEELING},
editorial {CATEGORY} photography
--ar 1:1 --v 7 --s 150
--no text, words, letters, logos, watermarks, people, faces, hands,
    UI elements, clutter

Additional negative prompts by category:

• Product shots (skincare, tools): add , branding to negatives
• Drink shots: add , bottles if focusing on glassware

Example (food/bakery): "Editorial photography, soft natural lighting, muted desaturated tones with slightly warm color grade, minimal composition, no people. Freshly baked sourdough loaf on a wooden board, warm side lighting casting gentle shadows, rustic and inviting, editorial food photography --ar 1:1 --v 7 --s 150 --no text, words, letters, logos, watermarks, people, faces, hands, UI elements, clutter"

Post-processing

After generating in MidJourney:

1. Upscale to the target resolution (1920×1080 for backgrounds, 800×800 for gallery)
2. Desaturate slightly — the library uses muted tones, not vivid colors
3. Export as PNG — no JPEG compression artifacts
4. Name the file following the convention described above

Consistency tips

The secret to a cohesive library is restraint:

• No people, faces, or hands — ever. This keeps images universally usable.
• Muted color grading — slightly desaturated, slightly warm. Think editorial magazine photography, not stock photos.
• Soft natural lighting — no harsh flash, no dramatic studio lighting
• Minimal composition — one subject, clean framing, no clutter
• No text, logos, or branding — the AI adds text via HTML; images stay clean

Overriding with your own images

Library images are always treated as defaults. When you upload your own images through the Assets tab, the AI preferentially uses those instead. This means:

1. Generate your site → AI uses library images as placeholders
2. Upload your real photos → Ask the AI to "use my uploaded images"
3. The AI replaces library images with your actual content

This gives you a polished-looking site immediately, with a clear upgrade path to real imagery.