Editorial Glassmorphic Bento Grid & Isometric Lighting Prompt

Act as an art director for a premium SaaS brand. Write me a set of image-generation prompts for hero and bento graphics that all look like one family, plus the layout they'll sit in.

Brand system (use exactly):
- Palette: warm cream #F6F4EF, warm sand #B59E7A, deep charcoal #141413, one muted sage accent #6E8B74. No saturated blues or purples.
- Materials: frosted glass panels with 1px light edges, soft paper-grain on cream surfaces, brushed matte charcoal.
- Lighting: a single soft key light from the top-left at 45°, long gentle shadows to the bottom-right, a faint warm rim light on glass edges. Same direction in every image.
- Camera: isometric 3/4 view, 30° elevation, orthographic feel, no lens distortion.
- Composition: a bento of 4–6 floating glass UI cards (chart, toggle, avatar stack, progress ring, code line) with generous negative space on the left third for headline copy.

Produce:
1. A master prompt for the cream (light) hero, 16:9.
2. The same prompt adapted for a charcoal (dark) hero, keeping lighting and composition identical, only swapping surface values.
3. Three square (1:1) bento-tile prompts reusing the materials, one UI element each.
4. A negative prompt: no text, no logos, no people, no neon, no lens flare, no clutter.
5. Export sizes for each image and how to place them in the bento grid without layout shift.

Write each prompt as one paragraph, front-loading subject, then materials, lighting, camera and palette. End with --ar and quality flags for Midjourney v7 and a plain-language variant for other 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.
- Bento shell as Designer elements: section_bento > bento_grid > bento_tile (combo classes is-hero / is-wide). Images as Webflow Image elements with explicit width/height; export 2× PNG and let Webflow serve WebP/AVIF.

<!-- Designer: section_bento > bento_grid > bento_tile (+ is-hero / is-wide combo classes) -->
<!-- Styles below can be rebuilt as Designer styles; or paste into Page settings > Inside <head>. -->
<style>
  .bento_grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 220px;
  }
  .bento_tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(181, 158, 122, 0.35);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
  /* The key light: top-left, matching the generated art. */
  .bento_tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 60%);
    pointer-events: none;
  }
  .bento_tile.is-hero { grid-column: span 2; grid-row: span 2; background: #141413; color: #f6f4ef; }
  .bento_tile.is-wide { grid-column: span 2; }
  .bento_tile img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 767px) {
    .bento_grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .bento_tile.is-hero, .bento_tile.is-wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  }
</style>