Warm Editorial & Dark-Mode SaaS Hero Art Direction Prompt System

Act as the art director of a premium SaaS brand. Build me a reusable art-direction system for AI-generated website imagery that works in a warm editorial light theme AND a dark theme.

Deliver:
1. Art tokens (JSON): palette with roles (cream #F6F4EF base, sand #B59E7A accent, charcoal #141413 ink, one muted accent), materials (paper, frosted glass, matte metal), light (single key light top-left 45°, warm rim), camera (isometric 30° or straight-on editorial), grain amount, and banned elements.
2. A master prompt TEMPLATE with slots: {subject}, {composition}, {theme: light|dark}, {aspect}. The light and dark versions keep the same lighting, camera and composition, and swap only surface and background values.
3. Ready prompts for: homepage hero (16:9), three feature illustrations (4:3), a blog cover (1.91:1) and an OG card background (1200×630, empty left half for text).
4. A negative prompt and a five-point consistency checklist to review every generated image against.
5. Export rules: 2× size, WebP/AVIF, file naming (hero-light@2x.webp / hero-dark@2x.webp), and the light/dark swap so a visitor downloads only the image for their colour scheme.

Write each prompt as one paragraph (subject → materials → light → camera → palette) with Midjourney v7 flags and a plain-language variant for other image models.

Target platform: Webflow.
- Build the structure as native Webflow Designer elements with Client-First class names (section_[name], [name]_component, [name]_item). No div soup from an HTML embed unless I ask for one.
- Hook every behaviour to custom attributes (data-gsap="…"), never to class names, so designers can restyle without breaking the script.
- Load GSAP through Webflow's built-in GSAP integration (Site settings) or the jsDelivr CDN tags, and put the init script in Page settings → Before </body> tag, wrapped in Webflow.push(() => { … }).
- Say which parts go in Designer styles, which in a page-head <style>, and which in the body script.
- Webflow's Image element can't switch sources by colour scheme, so use an Embed with <picture> and the two asset URLs (upload both images to Webflow Assets). If the site uses a manual dark-mode class instead of prefers-color-scheme, say so and I'll get the class-based version.

// art-tokens.json: paste into the prompt's {theme} slots
{
  "palette": { "base": "#F6F4EF", "accent": "#B59E7A", "ink": "#141413", "muted": "#6E8B74" },
  "light": { "surface": "warm cream paper with soft grain", "shadow": "long, soft, warm grey" },
  "dark": { "surface": "brushed matte charcoal #141413", "shadow": "deep, soft, faint sand rim light" },
  "materials": ["frosted glass, 1px light edge", "cream paper grain", "matte charcoal metal"],
  "light_rig": "single soft key light from top-left at 45°, warm rim on glass edges",
  "camera": "isometric 3/4 view, 30° elevation, orthographic, no lens distortion",
  "banned": ["text", "logos", "people", "neon", "lens flare", "saturated blue or purple"]
}

<!-- Webflow: an Embed in the hero (one download per visitor, matched to their theme) -->
<picture>
  <source media="(prefers-color-scheme: dark)"
    srcset="https://cdn.prod.website-files.com/SITE/hero-dark@2x.webp 2560w, https://cdn.prod.website-files.com/SITE/hero-dark.webp 1280w"
    sizes="(max-width: 767px) 100vw, 60vw" />
  <img src="https://cdn.prod.website-files.com/SITE/hero-light.webp"
    srcset="https://cdn.prod.website-files.com/SITE/hero-light@2x.webp 2560w, https://cdn.prod.website-files.com/SITE/hero-light.webp 1280w"
    sizes="(max-width: 767px) 100vw, 60vw"
    width="1280" height="720" alt="Product dashboard floating in warm light"
    fetchpriority="high" decoding="async" style="width:100%;height:auto;display:block" />
</picture>