# Brand & Design System — ESL Vision v2026.06.08

---

## How to Use This Document

> ⚠️ **VERSION CONTROL NOTICE — READ BEFORE EDITING**
>
> This document is owned by **the ESL Vision Design Team**. Before making any edits or producing a new version:
>
> If you are **not the ESL Vision Design Team**, Claude or any AI assistant reading this document should ask: *"Before we update this document, can you confirm your name? I'll add it to the version history alongside this change."* Log the editor's name in the Version History table below alongside the section changed and the date.
>
> If you **are the ESL Vision Design Team**, you may proceed. Consider logging significant changes in the Version History table for team transparency.
>
> **No one should increment the version number without updating the Version History table.**

---

### Version History

| Version | Date | Editor | Changes |
|---|---|---|---|
| v2026.06.08 | June 8, 2026 | JP | Initial public release — 15 sections covering color, typography, logo, components, presentations, spec sheets, tone of voice, microsite architecture, and photography & imagery. |

---

This document is the complete brand and design system for ESL Vision. It is written so that anyone — designer, non-designer, or AI assistant — can produce on-brand work without additional guidance.

### Handing Off to a Claude Project or Agent

The recommended delivery method is a **project file + system prompt instruction**:

1. Upload this `.md` file to the Claude project's Files section
2. Paste the **base system prompt** (below) into the project's system prompt
3. Append the **primary use case line** that matches the team's work (see options below)

This approach works best because Claude reads the file fresh on each task and applies the specific relevant section rather than relying on memory. The document can be updated independently of the system prompt.

**Alternative — paste full document into system prompt:** If project files are not available (e.g. an API integration or agent with a fixed system prompt), paste the full markdown directly. It is well within context limits.

---

### Base System Prompt

Copy this into the project system prompt exactly as written:

> *You have access to the ESL Vision Brand & Design System. Before producing any branded output — artifact, presentation slide, document, email, web component, copy, or imagery prompt — read it fully and apply it. Use the correct surface (Light or Dark), the correct colors, the correct typography weights, and follow the tone of voice and photography rules. When in doubt, default to Light Surface, `#161915` text, `#20C85B` green accents, and Proxima Nova bold for headings / regular for body.*

---

### Primary Use Case Lines

Append **one** of the following lines to the base system prompt, depending on the team's primary output type. These sharpen Claude's behavior for the most common request types and reduce surface-decision errors.

**HTML artifacts and web components:**
> *Most requests will involve creating HTML artifacts or web components. Check the surface decision rule in Section 2 first. Default to Light Surface unless the request explicitly involves a CleanBeam™ or Stadia™ microsite or partner marketing page.*

**Presentations and slide decks:**
> *Most requests will involve creating presentations or slide decks. Always use Light Surface: `#F2F2F2` slide background, white cards, `#161915` text, `#20C85B` accents. Follow the nine slide layout patterns in Section 8. Red is for competitor comparisons only — never ESL Vision content.*

**Spec sheets and product documents:**
> *Most requests will involve spec sheets, product data sheets, or technical documents. Always use Light Surface. Follow print typography rules in Section 9. Never approximate a technical value — if a spec is not provided, flag it rather than invent it.*

**Copy and marketing content:**
> *Most requests will involve writing copy, product descriptions, or marketing content. Apply the tone of voice rules in Section 10. Always use trademark symbols on first reference (AquaDome™, CleanBeam™, ESL Core™). State outcomes first, then prove with specs.*

**Photography and imagery:**
> *Most requests will involve selecting stock imagery, art directing photography, or generating AI image prompts. Apply Section 15 in full. Identify the product family and image role first — these determine every subsequent decision about environment, atmosphere, lighting, and people.*

**Mixed / general team use:**
> *Requests may involve any output type — artifacts, slides, documents, copy, emails, or imagery. Before starting any task, identify the output type, then apply the correct surface and rules from the relevant section. When the output type is ambiguous, ask before proceeding.*

---

### What Claude Will and Will Not Invent

This document explicitly marks deferred items in Section 14 (What Is Not Yet Defined). Claude should not invent rules for: the icon library, Stadia™ microsite architecture, or the reversed/white-on-dark logo variant. If a task requires any of these, Claude should flag the gap rather than improvise.

---

## 1. Brand Identity

| Field | Value |
|---|---|
| Company name | ESL Vision |
| Tagline | Cutting-Edge LED Technology & Design |
| Phone | 888.493.5559 |
| Email | info@eslvision.com |
| Website | www.eslvision.com |
| Headquarters | 1957 S 4800 W, Salt Lake City, UT 84104 |
| Secondary office | 6371 Corley Road, Norcross, GA 30071 |
| Copyright line | © 2026 ESL Vision, LLC. All rights reserved. |
| Social channels | LinkedIn, YouTube |

---

## 2. Brand Architecture

ESL Vision has three product families at the same level. Understanding the architecture is required before producing any branded output — it determines which surface to use and how to write about products.

```
ESL Vision
  │
  ├── ESL Core™
  │     Commodity commercial/industrial LED products
  │     Flood Lights, High Bays, Wall Packs, Downlights,
  │     Retrofits, Flat Panels, Sensors, Controls, etc.
  │
  ├── CleanBeam™
  │     Washdown-rated fixtures for food processing
  │     and industrial wet environments
  │     ├── AquaDome™  (High Bay, IP69K)
  │     ├── AquaBeam™  (Linear, IP69K)
  │     ├── Strata™ VaporTight
  │     ├── Helios™  (High Temperature)
  │     └── Phase 2: Strata LHB, HazLoc (not yet released)
  │
  └── Stadia™
        Sports lighting family (upcoming)
        Sub-families TBD
```

### The Two Surfaces

ESL Vision uses two design surfaces. Every piece of work belongs to one of them.

| Surface | Used on | Visual character |
|---|---|---|
| **Light Surface** | ESLvision.com web catalog · All ESL Core™ pages · Spec sheets · Forms · Surveys · All CleanBeam™ and Stadia™ catalog/spec pages | White/`#FAFAFA` base. Clean, professional, B2B reference. |
| **Dark Surface** | CleanBeam™ marketing microsites · Stadia™ marketing microsites · Partner-facing storytelling pages | `#161915` base. Cinematic, immersive, partner-facing. |

**The surface decision rule — apply this before starting any work:**

- ESL Core™ content → **always Light Surface**
- CleanBeam™ or Stadia™ microsite, partner page, or overview → **Dark Surface**
- CleanBeam™ or Stadia™ spec sheet, catalog page, form, or survey → **Light Surface**
- Presentations → **Light Surface** (slide background `#F2F2F2`, cards white)

The Dark Surface is a marketing layer above the catalog. The same product family can have Dark Surface microsites and Light Surface spec pages — this is intentional.

---

## 3. Color

### Brand Green — Universal

Used on both surfaces, in print, and in presentations. The single most important brand color.

| Role | Hex |
|---|---|
| **Brand Green** | `#20C85B` |
| Hover | `#22B356` |
| Active / pressed | `#158A40` |
| Focus ring / glow | `rgba(32, 200, 91, 0.35)` |
| Focus-visible outline | `rgba(32, 200, 91, 0.45)` |

**Green is used purposefully — never decoratively.** Its roles: primary buttons, active nav states, section headings (print and presentations), card accent borders, banners, badges, checkmarks, positive stat callouts, and the logo background. If green appears somewhere and you cannot explain its function, remove it.

### Light Surface

| Role | Hex |
|---|---|
| Page background | `#FAFAFA` |
| Card / panel / header background | `#ffffff` |
| Footer background | `#161915` |
| Footer text / headings | `#ffffff` |
| Banner background | `#161915` |
| Banner text | `#ffffff` |
| Body text | `#161915` |
| Heading text | `#161915` |
| Link default | `#161915` |
| Link hover | `#20C85B` |
| Border / divider | `#D2D2D2` |
| Input border | `#D2D2D2` |
| Input border active | `#161915` |
| Disabled background | `#D2D2D2` |

### Dark Surface

| Role | Hex |
|---|---|
| Page / bar background | `#161915` |
| Tile / video background | `#000000` |
| All text on dark | `#ffffff` |
| Company bar background | `#ffffff` (always white, regardless of surface) |
| Company bar body text | `#333333` |
| Company bar strong text | `#111111` |
| FAB / tooltip bubble background | `#ffffff` |
| FAB / tooltip bubble border | `#161915` |

### Full Neutral Scale

| Hex | Name | Primary role |
|---|---|---|
| `#161915` | Near-black | Text base, dark surfaces, footer, table headers, print body |
| `#333333` | Dark grey | Checkbox/radio icon color, strong text on white |
| `#666666` | Mid-dark | Captions, descriptors, page numbers, muted labels |
| `#757575` | Mid grey | Nav sub-items |
| `#959595` | Grey | Placeholder text |
| `#9B9B9E` | Info grey | Info alert text |
| `#D2D2D2` | Border grey | All borders, dividers, disabled backgrounds |
| `#e5e5e5` | Hairline | Very subtle dividers |
| `#FAFAFA` | Off-white | Page background |
| `#ffffff` | White | Cards, panels, inputs, text on dark |

### Buttons — All States

#### Primary Button
| State | Background | Text | Border |
|---|---|---|---|
| Default | `#20C85B` | `#FAFAFA` | `#20C85B` |
| Hover | `#22B356` | `#FAFAFA` | `#22B356` |
| Active | `#158A40` | `#FAFAFA` | `#158A40` |
| Disabled | `#D2D2D2` | `#ffffff` | none |

#### Secondary Button
| State | Background | Text | Border |
|---|---|---|---|
| Default | `#ffffff` | `#161915` | `#161915` |
| Hover | `#ffffff` | `#20C85B` | `#20C85B` |
| Active | `#ffffff` | `#158A40` | `#158A40` |

> **Orange buttons (`#F1A500` / `#F9C300`) are suppressed and not part of the ESL Vision design system.** They exist in the BigCommerce theme but are never used. Do not reference these colors in any ESL Vision work.

### Semantic / Alert Colors

| Role | Text | Background |
|---|---|---|
| Info | `#9B9B9E` | `#D2D2D2` |
| Error | `#CC4749` | `#FFDDDD` |
| Success | `#008A06` | `#D5FFD8` |
| Warning | `#F1A500` | `#FFFDEA` |
| In-stock | `#00A651` | — |
| Out-of-stock / sale | `#ED1C24` | — |

> **Red (`#ED1C24`) in presentations is reserved for competitor or negative comparisons only** — it is never used for ESL Vision content.

### Forms & Inputs

| Element | Hex |
|---|---|
| Label text | `#161915` |
| Input text | `#161915` |
| Input background | `#ffffff` |
| Input border | `#D2D2D2` |
| Input border active | `#161915` |
| Input disabled background | `#D2D2D2` |
| Checkbox/radio icon | `#333333` |
| Checkbox/radio background | `#ffffff` |
| Checkbox/radio border | `#D2D2D2` |
| Error state | `#CC4749` |

---

## 4. Typography

### Font

**Proxima Nova** is the only typeface used across all ESL Vision surfaces, including digital, presentations, and print.

- **Web:** Loaded via Adobe Fonts, Typekit kit `uxz6fvk`. Applied via CSS with `!important` override on all elements.
- **Print (spec sheets):** `ProximaNova-Regular` embedded in InDesign PDFs.
- **Presentations:** Proxima Nova set as the theme font in PowerPoint.
- **Fallback stack:** `system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`
- **Exception:** Partner company bar welcome text uses `"Source Sans 3", "Source Sans Pro"` — this is a one-off exception for a specific component, not a general brand font.

> **Do not enable Google Fonts** in the BigCommerce theme. The system font setting is intentional. Proxima Nova loads via Adobe Fonts and overrides the system font setting.

### Weights

Three weights in active use:

| Weight | Value | Where used |
|---|---|---|
| **Bold** | 700 | All headings H1–H6, card titles, feature titles, section labels, button text, table headers, banner text, slide titles, attribution lines, green section headings in print |
| **Regular** | 400 | All body copy, descriptors, captions, footnotes, form labels, spec sheet bullets, slide body text |
| **Italic** | 400i | Pull quotes, hero taglines only — never for body copy or regular labels |
| **Medium** | 500 | Back-to-top pill text, FAB bubble text, co-bar welcome (microsite only) |

**Bold is the primary hierarchy signal** — not size alone. When in doubt about weight, Bold for labels/headings, Regular for body.

### Web Type Scale

| Level | Size |
|---|---|
| Body / root | 14px |
| H1 | 28px |
| H2 | 25px |
| H3 | 22px |
| H4 | 20px |
| H5 | 15px |
| H6 | 13px |

### Presentation Type Scale (approximate pt sizes)

| Level | Size | Weight |
|---|---|---|
| Slide title | 32–36pt | Bold 700 |
| Card / feature heading | 16–18pt | Bold 700 |
| Section eyebrow | 11pt | Bold 700, ALL CAPS, wide tracking |
| Body copy | 12–14pt | Regular 400 |
| Descriptor / caption | 11–12pt | Regular 400 |
| Pull quote | 20–24pt | Italic 400i |
| Stat callout | 72–96pt | Bold 700 |
| Footnote | 9–10pt | Regular 400 |
| Green banner text | 12–13pt | Bold 700 |

### Capitalization Rules

| Context | Rule |
|---|---|
| Web navigation (main nav, dropdowns) | Title Case |
| Web page headers / H1 | Title Case |
| Spec sheet sub-headers (Optics, Electrical, etc.) | Title Case |
| Button label text | Title Case |
| Presentation slide titles | Title Case |
| Presentation card / feature headings | Title Case |
| SKUs | UPPERCASE — `ESL-CB-AQD-160200W-150` |
| Dark Surface nav tile labels | ALL CAPS (set via `text-transform: uppercase` in CSS) |
| Presentation section eyebrow labels | ALL CAPS — "BUILT WITH PURPOSE", "WHAT'S IN THE BOX" |
| Body copy | Sentence case |
| Hero taglines (Dark Surface) | Sentence case — "Built for the toughest environments." |

---

## 5. Logo

### Primary Logo

The ESL Vision logo is a green square with "ESL" in large white bold letterforms and "VISION" in smaller tracked white caps below.

| Property | Value |
|---|---|
| Format | SVG (vector) — preferred for all uses |
| SVG file | `ESL_logo_svg.txt` (rename to `.svg`) |
| PNG file | Use only when SVG is not supported |
| Aspect ratio | 1:1 square — always |
| Colors | `#20C85B` background · `#ffffff` letterforms only |
| Effects | None — no gradients, shadows, or filters |

### SVG Structure

The SVG contains exactly two layers:
- `Background` — a `#20c85b` filled `1000×1000` rect
- `Text` — all white vector paths (not live text — font matching not required for reproduction)

The SVG can be embedded directly inline in HTML artifacts:

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="80" height="80" aria-label="ESL Vision"><g id="Background"><rect width="1000" height="1000" fill="#20c85b"/></g><g id="Text"><path d="M100.99,382.41h252.45v83h-153.42v67.55h132.81v82.43h-132.81v69.84h153.42v83.58H100.99v-386.41Z" fill="#fff"/><path d="M384.37,685.23h144.83c4.01,0,6.3-2.29,6.3-5.15v-56.1c0-2.86-2.29-5.15-6.3-5.15h-99.6c-26.91,0-45.23-18.32-45.23-45.22v-145.98c0-26.9,18.32-45.22,45.23-45.22h199.78v83h-139.68c-3.43,0-5.72,2.86-5.72,6.3v56.67c0,2.29,2.29,5.15,5.72,5.15h99.61c26.91,0,45.22,18.32,45.22,45.22v144.83c0,26.9-18.32,45.22-45.22,45.22h-204.94v-83.58Z" fill="#fff"/><path d="M676.89,382.41h99.04v302.83h123.08v83.58h-222.12v-386.41Z" fill="#fff"/><path d="M127.87,887.68l-26.02-66.24c-.48-1.23.42-2.56,1.75-2.56h10.12c.78,0,1.48.49,1.76,1.22l21.06,56.2,21.1-56.31c.25-.67.89-1.11,1.6-1.11h10.46c1.21,0,2.04,1.22,1.6,2.34l-26.11,66.47c-.53,1.36-1.84,2.25-3.3,2.25h-10.72c-1.46,0-2.77-.89-3.3-2.25Z" fill="#fff"/><path d="M271.44,887.92v-67.04c0-1.11.9-2.01,2.01-2.01h8.45c1.11,0,2.01.9,2.01,2.01v67.04c0,1.11-.9,2.01-2.01,2.01h-8.45c-1.11,0-2.01-.9-2.01-2.01Z" fill="#fff"/><path d="M387.09,878.4l4.46-6.15c.74-1.02,2.22-1.21,3.14-.35,4.84,4.51,11.98,8.23,20.81,8.23,10.23,0,14.17-5.01,14.17-9.8,0-14.91-41.33-5.65-41.33-31.74,0-11.82,10.22-20.88,25.88-20.88,10.09,0,18.55,3.06,24.9,8.52.95.82,1.05,2.26.29,3.26l-4.1,5.41c-.86,1.13-2.45,1.23-3.54.33-5.38-4.42-12.09-6.44-18.72-6.44-7.24,0-11.93,3.62-11.93,8.84,0,13.31,41.33,5.11,41.33,31.53,0,11.83-8.42,22.05-27.48,22.05-12.22,0-21.29-4.08-27.64-9.98-.79-.73-.86-1.96-.23-2.83Z" fill="#fff"/><path d="M545.4,887.03v-65.27c0-1.6,1.3-2.89,2.89-2.89h6.67c1.6,0,2.89,1.3,2.89,2.89v65.27c0,1.6-1.3,2.89-2.89,2.89h-6.67c-1.6,0-2.89-1.3-2.89-2.89Z" fill="#fff"/><path d="M661.44,854.46c0-21.2,15.02-36.75,36.33-36.75s36.32,15.56,36.32,36.75-15.13,36.75-36.32,36.75-36.33-15.55-36.33-36.75ZM721.31,854.46c0-14.7-9.27-25.68-23.54-25.68s-23.54,10.97-23.54,25.68,9.16,25.67,23.54,25.67,23.54-11.08,23.54-25.67Z" fill="#fff"/><path d="M885.92,888.29l-35.87-49.17v48.11c0,1.49-1.21,2.7-2.7,2.7h-7.06c-1.49,0-2.7-1.21-2.7-2.7v-66.16c0-1.21.98-2.19,2.19-2.19h9.49c.7,0,1.35.33,1.76.89l35.67,48.33v-46.71c0-1.39,1.12-2.51,2.51-2.51h7.44c1.39,0,2.51,1.12,2.51,2.51v64.54c0,2.21-1.79,4-4,4h-6.01c-1.28,0-2.48-.61-3.23-1.64Z" fill="#fff"/></g></svg>
```

---

### Minimum Size

The "VISION" text occupies only 7.2% of the total logo height. At very small sizes this text becomes illegible, which is the limiting factor for minimum size — not the "ESL" letterforms.

| Context | Minimum size | Notes |
|---|---|---|
| **Digital — full lockup** | **48×48px** | "VISION" text is ~3.5px tall — borderline legible. Do not go smaller. |
| **Digital — comfortable** | 64×64px | Reliable legibility for "VISION" at standard screen densities |
| **Retina / high-DPI screens** | 48×48px CSS · 96×96px physical | Same CSS minimum — the device pixel ratio handles rendering |
| **Print — full lockup** | **0.5" × 0.5"** (36pt) | Minimum for offset print. Below this "VISION" drops below ~1pt — omit or substitute mark only. |
| **Print — recommended** | 0.75"+ | Comfortable reading at arm's length |
| **Favicon / app icon** | 32×32px | Legacy technical exception only. The full lockup (ESL + VISION) is not legible at this size — do not create new favicon-style usages. |
| **Presentations** | 40×40px | The smallest context where both "ESL" and "VISION" appear together in practice (confirmed from deck). |

> **The 32px favicon is the only approved below-minimum usage.** Below 48px digital or 0.5" print, the full lockup should not be used. The favicon is a legacy technical exception — it is not a standalone mark variant. The full ESL Vision lockup (ESL + VISION) is always required in all other contexts.

---

### Clear Space

Clear space is the minimum breathing room required around the logo on all four sides. Nothing — text, images, other logos, borders, or slide edges — should appear within this zone.

**Rule: Clear space = 10% of the logo's rendered width on every side.**

This is derived directly from the SVG source geometry: the designer built 101 units of left margin and 101 units of right margin into the 1000-unit square — exactly 10.1% each side. The bottom margin is 11%. The rule rounds to 10% for simplicity and applies to all four sides.

| Logo size | Minimum clear space (all sides) |
|---|---|
| 40px | 4px |
| 48px | 5px |
| 64px | 6px |
| 80px | 8px |
| 100px | 10px |
| 120px | 12px |
| 200px | 20px |
| 0.5" print | 0.05" |
| 1.0" print | 0.1" |
| 2.0" print | 0.2" |

**Practical application by context:**

| Context | Logo size | Clear space |
|---|---|---|
| Slide top-left (presentations) | ~40px | 4px — slide edge acts as natural boundary on two sides |
| Web catalog header (centered) | ~100px | 10px |
| Spec sheet header | ~0.6" | 0.06" |
| Microsite (desktop) | up to 720px | 72px — but container padding typically handles this |
| Email signature | 64–80px | 6–8px |

---

### Placement Rules

| Context | Position |
|---|---|
| Web catalog header | Centered horizontally |
| Presentation slides | Top-left corner, every content slide |
| Spec sheet | Top-left, all pages |
| Microsite / partner page | Top-left on desktop, centered on mobile |
| Optimized checkout | Left-aligned |
| Email / documents | Typically top-left or top-center |

---

### Background Contexts

| Background | Rule |
|---|---|
| White / `#ffffff` | ✅ Standard use — green square reads clearly |
| Light grey / `#FAFAFA` / `#F2F2F2` | ✅ Standard use — green square reads clearly |
| `#20C85B` green | ❌ Logo disappears — do not place on its own brand green |
| Dark / `#161915` or black | ⚠️ Not yet resolved — a white/reversed version is needed and not currently in project files. Flag this before placing the logo on dark backgrounds. |
| Photography / complex imagery | ⚠️ Use a solid colour lockup zone (white or green rectangle) behind the logo — do not float over busy images |

---

### Do Not

- Do not use "ESL" without "VISION" — the full lockup is always required
- Do not stretch or distort the aspect ratio — always 1:1
- Do not recolour the background or letterforms
- Do not add drop shadows, outlines, or glows
- Do not place on the brand green background
- Do not rotate
- Do not use a rasterised version below 2× resolution
- Do not reconstruct the letterforms in live type — always use the SVG paths

---

## 6. Spacing & Shape

### Base Unit

**8px** is the base unit for all spacing. All gaps, padding, and margins should be multiples of 8: 8 / 16 / 24 / 32 / 48 / 64.

### Web Spacing

| Property | Value |
|---|---|
| Max page width | `1600px` |
| Column gutter | `21px` total (10.5px each side) |
| Slide margin (presentations) | `0.4–0.5"` all edges |

### Border Radius

| Context | Radius |
|---|---|
| **All standard buttons** | **4px** — applies to both Light and Dark Surface CTAs |
| **All form inputs** | **4px** |
| Dark Surface nav tiles | `1em` |
| Dark Surface scrollclip card | `12px` outer / `14px` media inner |
| Back-to-top pill | `5px` |
| FAB tooltip bubble | `8px` |
| FAB button | `50%` (circle) |

> **4px is the universal button and input radius.** Microsite CTA buttons (`button--primary`, `button--secondary`) do not override this — they inherit the theme default. The larger radii apply only to Dark Surface UI components, not to buttons.

### Presentation Spacing Scale

| Gap | Value | Used between |
|---|---|---|
| Slide margin | `0.4–0.5"` | Content and slide edge |
| Header to content | `0.3–0.4"` | Slide title row and first content block |
| Content blocks | `0.2–0.3"` | Card-to-card, row-to-row |
| Card internal padding | `0.15–0.2"` | Text inside cards |
| Feature title to body | `0.05–0.1"` | Tight heading/body pairs |
| Column gap | `0.2"` | Between 2 or 4 columns |

---

## 7. Components

### Buttons

All standard CTAs use one of three variants. All use `4px` border-radius. No exceptions.

| Variant | Classes | Role | Example |
|---|---|---|---|
| Primary | `button button--primary` | Transactional action | "Request Sample", "Submit", "Register" |
| Secondary | `button button--secondary` | Navigation or information | "Learn More", "View Spec", "Back" |
| SpecDrop | `button button--secondary cb-spec-drop__trigger` | Spec sheet dropdown trigger | "Spec Sheets" |

**Button pairing rule:** Primary on the left, secondary on the right. Gap: `14px` desktop, `10px` mobile. On narrow mobile (≤480px), each button is 60% width, stacked vertically.

**Primary button visibility gating:** The primary CTA can be hidden when a page or link is not ready. This is a launch-gating toggle — it does not change the button's class or style.

### Forms (Light Surface)

| Property | Value |
|---|---|
| Input border-radius | `4px` |
| Input border | `#D2D2D2` |
| Input border (active/focus) | `#161915` |
| Label color | `#161915` |
| Error color | `#CC4749` |
| Max form width | `760px` |
| Section numbering style | `01`, `02` — zero-padded prefix |

### Product Cards (Light Surface — Web Catalog)

| Property | Value |
|---|---|
| Background | `#ffffff` |
| Title color | `#161915`, hover `#20C85B` |
| Image aspect ratio | 500×659px portrait |
| SKU position | Above title |
| Standard custom fields | Beam Angle, Selectable Wattage, Selectable Kelvin, Finish, Dimensions, Default Accessories, Energy Rebate |

### Navigation Tile Bar (Dark Surface)

| Property | Value |
|---|---|
| Bar background | `#161915` |
| Tile background | `#000000` |
| Label | White, ALL CAPS, Bold 700, `letter-spacing: 0.04em` |
| Tile border-radius | `1em` |
| Active tile | `box-shadow: 0 0 0 2px rgba(255,255,255,0.95)` |
| Featured tile | `border: 3px solid #20C85B` + `box-shadow: 0 0 10px 2px rgba(32,200,91,0.35)` |
| Image hover | `transform: scale(1.02)` |

### Company Bar (Dark Surface Partner Pages)

| Property | Value |
|---|---|
| Background | `#ffffff` — always white, regardless of surface |
| Position | `relative` — scrolls with page |
| Logo height | `80px` desktop, `56px` mobile |
| Back button | Desktop: chevron + text label; mobile: chevron only |

### Floating Action Button / FAB (Dark Surface)

| Property | Value |
|---|---|
| Size | `52×52px`, `border-radius: 50%` |
| Background | `#20C85B` |
| Icon stroke | `#ffffff` |
| Hover | `filter: brightness(0.92)` |
| Active | `transform: scale(0.95)` |
| Focus ring | `3px solid rgba(32,200,91,0.45)`, offset `3px` |
| Entrance animation | `translateY(120px)→0`, `cubic-bezier(0.22,1,0.36,1)`, `420ms` |

### SpecDrop Dropdown

Accessible spec sheet dropdown used on product pages. The trigger is always a `<button>`, never an `<a>`. Menu styles are JS-injected into `<head>` — never in the CSS bundle.

```html
<div class="cb-spec-drop">
  <button class="button button--secondary cb-spec-drop__trigger"
    aria-haspopup="listbox" aria-expanded="false" type="button">
    Spec Sheets
  </button>
  <div class="cb-spec-drop__menu" role="listbox" hidden>
    <span class="cb-spec-drop__label">Select Spec Sheet</span>
    <a class="cb-spec-drop__item" role="option"
       href="/content/Spec-Sheets/Washdown/{Family}/primary/{SKU}.pdf"
       target="_blank" rel="noopener">
      {SKU}
    </a>
  </div>
</div>
```

---

## 8. Presentations

This section defines ESL Vision presentation standards. Apply these rules when creating any branded PowerPoint, Google Slides, or HTML slide artifact.

### Slide Setup

| Property | Value |
|---|---|
| Aspect ratio | 16:9 widescreen |
| Slide background | `#F2F2F2` (light grey — not pure white) |
| Card / content block background | `#ffffff` |
| Content margin | `0.4–0.5"` all edges |
| Logo | Top-left corner of every content slide |

### Consistent Slide Header

Every content slide uses this structure:

```
[Logo ~40×40px]  [Slide Title — Bold, #161915, ~32–36pt]    [Descriptor — Regular, #666666, ~11pt]
```

Title is left-aligned next to the logo. Descriptor (e.g., "IP69K • NSF Certified • Tyson Specified") is right-aligned. This anchor is consistent across every slide.

### Nine Slide Layout Patterns

**1. Cover / Title slide**
Logo large, left-center. Headline large bold right of logo. Tagline italic below. Light grey background.

**2. Quote / Callout slide**
Full-width green header bar, ALL CAPS label. Large italic block quote below. Bold green attribution. Three equal-width stat cards at bottom with green top-border accents.

**3. Product grid slide**
4-column card grid. Each card: green header bar (product name bold white, type regular white below), product photo on black background, body description, green certification badge strip at bottom.

**4. Feature detail slide (2-column)**
Left (~55%): product photo on black background. Right: stacked feature rows, each with green left-border accent, bold title, regular body. Full-width green banner footer.

**5. Exploded / callout view slide**
Full-bleed dark background image. White bold callout labels with green dot-leaders. No card containers.

**6. Comparison slide**
Two equal cards. Left (competitor): red large stat, red ✗ bullets. Right (ESL): green large stat, green ✓ bullets. Green banner footer.

**7. Support / list slide**
Stacked rows, each with green ✓, bold title, regular body. Green left-border on each row. Generous spacing.

**8. CTA / Closing slide**
Large bold headline. Italic body paragraph. Callout box with green left border. Contact card: bold name · title · company, icons + details below. Green top and bottom border rules.

**9. End card**
Logo centered large. "Thank you!" bold below. Light grey background only.

### Presentation Components

**Green Banner (full-width footer)**
Background `#20C85B`, text `#ffffff` Bold 700 ~12–13pt. Used as a proof-point or CTA footer strip across slides. Always full slide width.

**Card with Green Accent Border**
Background `#ffffff`. Top or left border: `3–4pt solid #20C85B`. Used for product cards, stat cards, feature rows.

**Green Card Header Bar**
Background `#20C85B`. Product name: Bold white ~16–18pt. Product type: Regular white ~11–12pt.

**Section Eyebrow Label**
`#20C85B`, ALL CAPS, Bold 700, wide letter-spacing. Sits below the slide header, above main content. Examples: "BUILT WITH PURPOSE" · "ONE FIXTURE. EVERY ZONE." · "WHAT'S IN THE BOX"

**Certification Badge Strip**
Green `#20C85B`, Bold ~10–11pt. Items space-separated: `IP69K  NSF  IK08`. No borders or backgrounds.

---

## 9. Spec Sheets (Print / PDF)

All spec sheets are authored in **Adobe InDesign 21.2** and exported to PDF. Font is **Proxima Nova Regular** embedded in the PDF.

### Page Setup

| Property | Value |
|---|---|
| Page size | 8.5" × 11" US Letter, portrait |
| Layout | 2-column on Page 1 (~55% features left / ~45% specs+image right); full-width tables on Pages 2–4 |
| Font | Proxima Nova Regular (embedded) |

### Every Page Header

Logo top-left · Product name large bold · Product type regular · Sub-brand badge top-right · SKU below title · "Page N of 4" top-right · Copyright footer

### Typography in Print

| Level | Treatment |
|---|---|
| Product display name | Very large, Bold — "AQUADOME" |
| Product type | Large, Regular — "HIGH BAY" |
| SKU | Medium, Regular — `ESL-CB-AQD-160200W-150` |
| Section heading | Bold, `#20C85B` — "Optics", "Electrical", "Mechanical" |
| Body copy | Small Regular ~8–9pt |
| Table header | Bold, white on `#161915` background |
| Table body | Regular, alternating white/`#f5f5f5` rows |
| Ordering guide example | Bold, `#20C85B` |
| Footnote | Very small, `#666666` |

### Color in Print

| Element | Hex |
|---|---|
| Section headings | `#20C85B` |
| Table column headers | `#161915` background, `#ffffff` text |
| Body text | `#161915` |
| Footer rule | `#161915` |
| Page number / copyright | `#666666` |

### Footer Contact Strip (all pages)

`☎ 888.493.5559  ✉ info@eslvision.com  🌐 www.eslvision.com`

---

## 10. Tone of Voice

### Audience & Voice

ESL Vision serves two audiences who often appear in the same conversation. Write for both simultaneously.

| Audience | What they need | Voice |
|---|---|---|
| Sales reps & distributors | Benefits — what does this do for me, my customer, my book of business | Lead with outcomes. Clear, confident, direct. |
| Engineers & specifiers | Technical precision — exact wattage, IP rating, beam angle, DLC status | Follow the benefit with the spec that proves it. Never approximate a technical value. |

**The formula:** State the outcome → prove it with the spec.

Example: "Withstands the most aggressive washdown environments — IP69K sealed, rated for 1,450 PSI at 176°F."

### Copy Conventions

| Pattern | Rule | Correct example |
|---|---|---|
| Trademark symbols | Always inline, never omitted on first reference | AquaDome™, CleanBeam™, ESL Core™ |
| Dot separator | Metadata, eyebrows, footers, attribution | `ESL Vision · eslvision.com · Specified by Tyson Foods` |
| Em dash | Clause separator, spaced both sides | `Welcome, Tyson Team — Thank you for evaluating` |
| En dash | Number and value ranges, no spaces | `10W–20W`, `3000K–4000K`, `Page 1–4` |
| Degree + slash | Beam angle combinations | `55°/75°/90°` |
| Slash separator | Product title spec combos | `10–20W / 3CCT / Bronze` |
| Bullet separator (slides) | Spec metadata in headers | `IP69K • NSF Certified • Tyson Specified` |
| Italic emphasis | Pull quotes and hero taglines only | `*Your Light. Your Input.*` |
| Partner greeting | Use partner name, not generic | `Welcome, Tyson Team` (not "Welcome, Partner") |
| Time/effort acknowledgment | Survey and form contexts | `5 Questions · Under 2 Minutes` |

### Vocabulary

**Use these terms:**
fixture, facility, install, light output, selectable wattage, selectable Kelvin, DLC Premium, beam angle, IP-rated, washdown, retrofit, lumen, CCT, Kelvin, footcandle (fc), efficacy (lm/W)

**Avoid these terms:**
lamp → say fixture · cheap → omit or reframe · simple → say straightforward or easy · just → omit · basically → omit

### Hero Copy Pattern (Dark Surface product pages)

| Element | Rule | Example |
|---|---|---|
| H1 headline | Product name only — no tagline attached | "AquaDome" |
| Tagline | One sentence, benefit-led, sentence case, ends with period | "Built for the toughest environments." |
| Body in hero | None — no long copy in the hero zone | — |

---

## 11. Product & Asset Conventions

### SKU Formats

| Family | Format | Example |
|---|---|---|
| ESL Core™ | `ESL-[PRODUCT]-[WATTAGE]-[CCT]-[FINISH]` | `ESL-FLD-1020W-23050-BZ` |
| CleanBeam™ | `ESL-CB-[PRODUCT]-[WATTAGE]-[RATING]` | `ESL-CB-AQD-160200W-150` |

### Product Title Format (web catalog)

`[Product Type] • [Wattage Range] / [CCT] / [Finish]`

Example: `Floodlight • 10–20W / 3CCT / Bronze`

### Spec Sheet URLs

`https://store-bgcsyw1xtz.mybigcommerce.com/content/Spec-Sheets/Washdown/{Family}/primary/{SKU}.pdf`

Always `/content/...` — never `/dav/content/...`

### Video Asset Naming

```
/content/scroll-cards/PRODUCT_NAME/WDpage/card/primary/
{SKU}_WDpage_Card_1920x1080.mp4
{SKU}_WDpage_Card_mobile_1080x1080.mp4
{SKU}_WDpage_Card_1920x1080_start.png
```

Codec: H.264 High Profile · yuv420p · no audio · moov atom front-loaded

---

## 12. Microsite Architecture (Reference)

This section is for developers and Claude projects working on the microsite system.

### Scope Class Naming Convention

All microsite CSS is scoped to prevent theme conflicts. Always use kebab-case — underscores break CSS scoping.

| Layer | Pattern | Example |
|---|---|---|
| Overview | `.ms.ms--{partner}-x-{family}` | `.ms.ms--tyson-x-cleanbeam` |
| Product page | `.ms.ms--{partner}-x-{product}` | `.ms.ms--tyson-x-aquadome` |
| Form / survey | `.ms.ms--{partner}-x-{product}-{type}` | `.ms.ms--tyson-x-aquadome-form` |
| Body class (JS-applied) | `ms-{partner}-x-{product}` | `ms-tyson-x-cleanbeam` |

### Page Hierarchy

```
CleanBeam™ Overview      [/tyson/cleanbeam]          Dark Surface
  ↓ sticky nav bar
Partner Product Pages                                 Dark Surface
  → Tyson × AquaDome     [/tyson-aquadome]
  → Tyson × AquaBeam     [/tyson-aquabeam]
  → Tyson × Strata VP    [/tyson-vaportight-strata]
  ↓
Registration Form        [/tyson/aquadome/request]    Light Surface
Feedback Surveys                                      Light Surface
  → AquaDome             [/tyson/aquadome/feedback]
  → AquaBeam             [/tyson/aquabeam/feedback]
  → Strata VP            [/tyson/strata-vp/feedback]
Spec pages / catalog                                  Light Surface
```

### Animation (Dark Surface)

| Element | Animation | Timing |
|---|---|---|
| FAB entrance | `translateY(120px)→0` + fade | `cubic-bezier(0.22,1,0.36,1)` 420ms |
| Back-to-top entrance | Bounce pop | 800ms ease-out |
| Tile image hover | `scale(1.02)` | 160ms ease |
| FAB hover | `brightness(0.92)` | 160ms ease |
| FAB active | `scale(0.95)` | 120ms ease |
| Reduced motion | All animations off | `@media (prefers-reduced-motion: reduce)` |

---

## 13. Quick Reference

The most commonly needed values, all in one place.

| Token | Value |
|---|---|
| Brand green | `#20C85B` |
| Near-black | `#161915` |
| White | `#ffffff` |
| Page background | `#FAFAFA` |
| Border / divider | `#D2D2D2` |
| Caption / muted | `#666666` |
| Button radius | `4px` |
| Font | Proxima Nova |
| Heading weight | Bold 700 |
| Body weight | Regular 400 |
| Italic | 400i (pull quotes and taglines only) |
| Base spacing unit | 8px |
| Logo background | `#20C85B` |
| Logo text | `#ffffff` |
| Logo aspect ratio | 1:1 square |
| Slide background | `#F2F2F2` |
| Slide card background | `#ffffff` |
| Green in print | section headings, table headers (bg), ordering guide example |
| Red in presentations | competitor comparisons only — never ESL Vision content |

---

## 14. What Is Not Yet Defined

These items are intentionally deferred and will be added in a future version:

- Icon library (beyond BigCommerce built-in sprite)
- Stadia™ microsite architecture (follows CleanBeam™ pattern when launched)
- Logo reversed / white-on-dark version (not currently in project files — required before placing logo on dark backgrounds outside of the existing microsite pattern)

> **Photography & Imagery** has been defined — see Section 15.

---

## 15. Photography & Imagery

---

### 15.1 Overview & Creative North Star

ESL Vision imagery is **lush, vivid, and purposeful**. The standard for quality is set by brands like Apple and DJI — obsessive attention to product detail, cinematic environmental scale, and high production value in every frame. The lighting industry default — flat product shots on grey gradients, generic warehouse stock, overlit and undercomposed — is what ESL Vision imagery actively rejects.

Every image should earn its place. If it could belong to any LED company, it does not belong to ESL Vision.

**The single most important rule before choosing or creating any image:**

> Identify the **product family** and the **image role** first. Every decision that follows — environment, atmosphere, time of day, people, composition — flows from those two answers.

---

### 15.2 Product Families & Their Visual Worlds

Each product family has a distinct visual identity. Never mix the aesthetic registers across families.

| Product Family | Visual World | Atmosphere | Key Reference |
|---|---|---|---|
| **ESL Core™** | Clean, modern, context-matched | Bright and professional for light commercial; raw and functional for industrial | Apple product clarity applied to B2B hardware |
| **CleanBeam™** | Cinematic industrial, wet environments, extreme conditions | Cool blue, misty, high-contrast, dramatic backlighting | The washdown hero — worker from behind, steam-filled processing facility |
| **Stadia™** | Aerial scale, nighttime drama, precision sports infrastructure | Deep night, fields illuminated in crisp white-green light, urban/suburban context | DJI-style aerial perspective over lit sports complexes |

---

### 15.3 Image Roles

Every piece of ESL Vision imagery serves one of four roles. The role determines how prominent the product must be and how much atmospheric license is allowed.

| Role | Definition | Product visibility | Example |
|---|---|---|---|
| **Catalog / product** | The product is the subject. Referenced by specifiers and buyers. | Prominent — product fills frame or dominates composition | White-background 3/4 angle cutout shots |
| **Lifestyle / installation** | Product shown installed in its real-world environment, doing its job | In scene at natural scale — clearly identifiable | AquaBeam fixtures overhead in a processing facility; area light on a pole at blue hour |
| **Feature / detail** | Isolates a specific technical attribute — IP seal, LED array, hardware, beam distribution | Extreme close-up or cropped — product is the only subject | IP69K gasket macro; LED emitter array detail |
| **Supporting / hero atmosphere** | Sets emotional context, opens a section, or backgrounds a composite. Product may recede into the environment but should still be present or implied as the light source. | Present in environment or implied — does not need to be the foreground subject | Washdown hero (fixtures visible overhead as light source); Stadia aerial (fields lit, fixtures implied) |

> **Default rule: the product should be visible in virtually every image.** The "supporting / hero atmosphere" role is the only sanctioned exception, and even then the product or its light output should be traceable in the frame.

---

### 15.4 Catalog & Product Photography

Used on: ESL Core™ product pages, CleanBeam™ and Stadia™ spec/catalog pages (Light Surface). These are the reference images that specifiers, engineers, and contractors use to identify and evaluate products.

**Background**
- Pure white (`#ffffff`) — no gradients, no shadows, no ground planes, no environment
- The product is isolated completely

**Angle & framing**
- Primary: 3/4 perspective showing depth, mounting hardware, and fixture face
- Every product should have a minimum of 3 angles: 3/4 front, 3/4 rear or side, and one detail or alternate view
- Fill the frame — no excessive empty white space around the product

**Lighting**
- Soft, even, neutral — no dramatic shadows
- Warm LED emitters may appear lit on dark-finish fixtures where it aids legibility
- White-finish fixtures are shot "off" (no emitter glow) to preserve finish detail

**Color accuracy**
- Bronze, white, grey, and black finishes must be color-accurate — no warming or cooling the product tones
- Red components (emergency end caps, certain accessories) must read as accurate red

**Consistency**
- All products within a category should be shot at the same scale relative to frame, same angle, and same lighting setup
- Do not mix cutout styles (e.g., some with drop shadow, some without)

---

### 15.5 Lifestyle & Installation Photography

Used on: product feature sections, microsite scroll cards, presentations, marketing collateral. Shows the product doing its job in the real world.

#### Time of Day — Exteriors

For all exterior and architectural imagery, **dusk, blue hour, dawn, and nighttime are required**. Daylight exteriors are off-brand for ESL Core™ outdoor products and Stadia™ — the fixture must be visibly lit and functioning as the light source in the scene. A floodlight photographed in full sun tells no story.

| Time | Character | Used for |
|---|---|---|
| Blue hour / dusk | Dramatic sky, cool ambient, warm-to-neutral fixture glow | Area lights, wall packs, flood lights, Stadia™ |
| Night | Maximum contrast, pure fixture output visible | Stadia™ sports fields, parking lots, large area installations |
| Dawn | Cool, quiet, mist possible | Facility exteriors, perimeter lighting |

#### Environment by Product Context — Interiors

Interior imagery should match the actual installation environment of the specific product. Do not shoot a linear high bay in a clean modern office or a flat panel downlight in a gritty warehouse.

| Product type | Correct interior environment |
|---|---|
| Flat panels, disks, wafers, troffers | Clean modern office, classroom, healthcare facility, multi-family residential common area or unit |
| Linear high bays, round high bays | Warehouse, distribution center, manufacturing floor, large retail |
| VaporTights (Core) | Light industrial, parking structure, covered outdoor |
| CleanBeam™ (all) | Food processing facility, industrial wet environment — cool, wet, misty, stainless steel surfaces |
| Emergency / life safety | Corridor, stairwell, industrial egress — functional, not styled |

#### Atmosphere by Product Family

**ESL Core™ — Light Commercial & Residential contexts**
Clean, modern, well-lit. The space feels professional and current. Neutral to warm ambient. Surfaces are finished — painted drywall, polished concrete, commercial carpet, clean tile. The fixture is present and performing but the space feels livable and functional, not dramatic.

**ESL Core™ — Industrial contexts**
Raw, functional, scale-appropriate. High ceilings, exposed structure, concrete floors, industrial racking or equipment. The fixtures are doing real work in a demanding environment. Not gritty for aesthetic effect — accurate to the actual installation context.

**CleanBeam™**
Cinematic and demanding. Cool blue-toned atmosphere. Wet reflective floors. Steam or mist is appropriate. Stainless steel equipment. The environment communicates that conditions here are extreme — this is where IP69K rating earns its keep. Reference: the washdown hero (worker performing high-pressure washdown from behind, AquaBeam fixtures overhead, mist-filled processing floor).

**Stadia™**
Scale and precision. Aerial or wide-angle perspectives that show the full scope of a lit sports facility. Deep night. Fields read as crisp and evenly lit — no dark spots, no spill. The quality of light is the story, not just its presence.

---

### 15.6 Feature & Detail Photography

Used on: product feature scroll sections (microsite), presentation feature slides, spec sheet inserts.

- **Extreme close-up** — fill the frame with the detail being highlighted
- Subjects: IP69K gasket and seal, LED emitter array, mounting hardware, beam angle visualization, emergency end caps, linkable end connectors, stainless steel hardware
- **Lighting**: dramatic and directional — shadows and specular highlights reveal material and construction quality
- **Background**: black (`#000000`) or very dark neutral for CleanBeam™ and Stadia™ detail shots; clean white or near-white for ESL Core™ detail shots
- **No text or callouts baked into the photo** — labels are added in the design layer, not the image

---

### 15.7 People in Imagery

People appear in lifestyle and supporting imagery across all three product families. The following rules apply universally.

**Anonymity is the standard**
- Subjects are shot from behind, in silhouette, with faces turned away, or framed to exclude the face
- No posed expressions, no eye contact with camera, no clearly identifiable individuals
- The reference: the washdown hero — the worker's identity is completely anonymous; the action and environment carry the entire story

**Demographic equity is a hard requirement**
- Race, gender, and apparent age must be consciously balanced across the ESL Vision image library as a whole
- No single demographic should dominate the library
- This applies to stock selection, art direction of custom shoots, and AI generation prompts
- When selecting stock imagery, actively seek images that represent the actual diversity of the commercial and industrial trades workforce

**Role accuracy**
- People in ESL Vision imagery are always professionals — workers, technicians, installers, operators, engineers
- No consumer/DIY scenarios — the human in the frame reads as someone doing this for a living
- Appropriate PPE for the environment: hard hats, safety vests, rubber boots, gloves where context demands it

**People by product family**
| Family | People types | Notes |
|---|---|---|
| ESL Core™ light commercial | Contractors, facility managers, office workers in background | Workers may be in foreground if installing; end users (teachers, office workers) may appear in background of an occupied space |
| ESL Core™ industrial | Warehouse workers, technicians, installers | Heavy on PPE, realistic work context |
| CleanBeam™ | Food processing workers, sanitation crews, QA/inspection staff | Full sanitation PPE — rubber boots, gloves, aprons, hair nets where appropriate |
| Stadia™ | Groundskeepers, facility operators, athletes in background at distance | Athletes should be small in frame — the field and light are the subject |

---

### 15.8 Composition & Shot Types

All of the following shot types are approved for ESL Vision imagery, applied by product context and image role.

| Shot type | Description | Best used for |
|---|---|---|
| **3/4 product cutout** | White background, angled view, product isolated | Catalog / product role — all families |
| **Wide environmental establishing** | Full scene, product in natural scale, environment dominant | Lifestyle / installation — exteriors |
| **Eye-level facility wide** | Standing height, looking down a lit aisle or across a facility floor | ESL Core™ industrial and CleanBeam™ interiors |
| **Medium action** | Worker or technician at work, mid-distance, anonymous | CleanBeam™ hero, ESL Core™ industrial lifestyle |
| **Aerial / drone** | Bird's-eye view of facility, sports complex, or parking area | Stadia™ primary, ESL Core™ large outdoor installations |
| **Installer POV** | Looking up at fixture being mounted; hands on hardware | ESL Core™ and CleanBeam™ installation context |
| **Close-up / macro detail** | Extreme close-up of hardware, seal, emitter, or material | Feature / detail role — all families |
| **Split / before-after** | Two-panel showing dark vs. lit scene, or old vs. new technology | Comparison slides, marketing collateral |

**Composition principles — apply across all shot types:**
- **Negative space is intentional** — do not fill every corner; let the product or subject breathe
- **Lead with the light** — in environmental shots, the fixture's output should be the most visually compelling element in the frame
- **Avoid centering everything** — off-center compositions with clear subject hierarchy are preferred over static centered frames
- **Horizon lines should be level** — especially critical in aerial and exterior shots

---

### 15.9 Color & Atmosphere

**Exterior and night imagery**
- Ambient: cool blue to neutral grey — `#1a2a3a` range in the deep shadows, `#4a6a8a` range in the mid-tones
- Fixture output: neutral white to slightly warm — the light itself is the warmest element in the frame
- Sky: deep blue-hour gradient or near-black night — never blown out, never overcast flat grey
- Avoid: warm golden-hour tones, heavy HDR processing, artificial lens flare, oversaturated skies

**CleanBeam™ interiors**
- Dominant palette: cool blue-grey (`#b0c8d8` range in mids), wet reflective floors, steam and mist as atmosphere
- The overall tone is cool, clean, and demanding — not warm, not cozy
- Fixture output overhead: neutral white, visible as the source of illumination
- Avoid: warm amber tones, soft lifestyle warmth, anything that reads as inviting rather than industrial

**ESL Core™ light commercial interiors**
- Neutral to slightly warm ambient — the space should feel professional and occupied
- Fixture output: clean neutral white — 4000K–5000K character
- Surfaces: finished, current, well-maintained
- Avoid: overly clinical/cold feel, dated interiors, visibly aging fixtures in frame

**ESL Core™ industrial interiors**
- Raw, functional palette — concrete, steel, high ceilings
- Fixture output: bright, even, high-lumen — the before/after contrast of good industrial lighting
- Avoid: artificially dark or gritty processing — accurate to environment, not stylized for drama

---

### 15.10 What to Avoid

These are disqualifying characteristics for any ESL Vision image — in stock selection, custom photography briefs, and AI generation.

| Avoid | Reason |
|---|---|
| Daylight exteriors with unlit fixtures | Fails to demonstrate product function |
| Faces shown clearly | Conflicts with anonymity and demographic equity principles |
| Overly staged "stock photo obvious" scenes | Feels generic — fake smiles, posed groups, too clean |
| Consumer / DIY scenarios | ESL Vision sells to contractors and specifiers, not end consumers |
| Warm golden-hour tone for CleanBeam™ or industrial | Wrong atmospheric register |
| Lens flare, heavy HDR, over-processed color | Low production quality signal |
| Grey gradient backgrounds on product shots | Industry default — ESL Vision uses pure white only |
| Products that are not ESL Vision fixtures in frame | Never show competitor products in lifestyle shots |
| Dark or silhouetted product on dark background (catalog) | Product must be clearly legible in catalog context |
| Any single demographic dominating across the library | Violates equity requirement |
| Residential DIY context (homeowner installing fixture themselves) | Wrong buyer persona — always show professional installation |

---

### 15.11 AI Image Generation

ESL Vision uses AI image generation tools (including Claude, ElevenLabs, Nano-banana, and others) primarily for:
- Atmospheric and supporting hero images
- Environmental backgrounds for product compositing
- Feature shots where product images or 3D assets are available to place on top

Because the product is almost always added as a separate layer (real photo or 3D render), AI prompts should focus on generating the **scene and environment** — not the fixture itself.

#### Prompt Construction Framework

Build every AI image prompt using this structure:

```
[Environment type] · [Time of day / lighting condition] · [Atmosphere / weather / mood] · 
[Surface materials and textures] · [Camera angle and framing] · [People if applicable] · 
[Color temperature and palette] · [Quality and style modifiers]
```

#### Quality & Style Modifiers — Always Include

Append these to every ESL Vision AI image prompt:

> *cinematic quality, lush and vivid, high production value, sharp focus on subject, photorealistic, professional commercial photography, no lens flare, no HDR processing, no watermarks*

#### Prompt Templates by Product Family

---

**ESL Core™ — Exterior / Area Lighting**

```
Wide-angle exterior establishing shot of a [parking lot / commercial building perimeter / 
urban streetscape] at blue hour / dusk. Area lighting fixtures mounted on poles casting 
clean neutral-white light across the scene. Deep blue gradient sky with scattered clouds, 
warm fixture glow contrasting against cool ambient. Wet pavement reflecting light. 
No people. Eye-level perspective. Cinematic quality, lush and vivid, high production value, 
photorealistic, professional architectural photography, no lens flare, no HDR.
```

---

**ESL Core™ — Industrial Interior**

```
Wide interior shot of a large [warehouse / distribution center / manufacturing facility] 
with high ceilings. Rows of linear high bay LED fixtures overhead casting bright even 
neutral-white light across concrete floors and industrial racking. Clean functional 
environment, raw materials and exposed structure visible. [Optional: anonymous worker 
in safety vest and hard hat, shot from behind, mid-distance, walking between aisles.] 
Eye-level perspective looking down main aisle. Cinematic quality, lush and vivid, 
high production value, photorealistic, professional commercial photography, no lens flare.
```

---

**ESL Core™ — Light Commercial / Residential Interior**

```
Interior of a [modern office / classroom / multi-family residential corridor / 
healthcare facility waiting area]. Clean contemporary finishes — [painted drywall / 
polished concrete / commercial carpet]. Recessed LED downlights in ceiling casting 
clean neutral light. Professional, current, well-maintained space. No people [or: 
background occupants, anonymous, not facing camera]. Eye-level perspective. 
Cinematic quality, lush and vivid, photorealistic, professional interior photography, 
no lens flare.
```

---

**CleanBeam™ — Food Processing / Washdown Environment**

```
Interior of an industrial food processing facility during washdown. Wet reflective 
concrete floors, stainless steel equipment and surfaces, mist and steam filling 
the mid-ground. Cool blue-grey color temperature throughout. Linear LED fixtures 
mounted overhead providing the primary light source — fixtures backlit by atmosphere. 
[Optional: anonymous worker from behind in full sanitation PPE — rubber boots, 
safety apron, gloves — operating high-pressure hose wand, mid-distance.] 
Shot from eye level or slightly low angle looking into the scene. 
Cinematic quality, lush and vivid, cool blue industrial atmosphere, 
high production value, photorealistic, no lens flare, no warm tones.
```

---

**Stadia™ — Sports Facility Night**

```
Aerial drone shot looking down at [soccer fields / baseball diamonds / 
multi-sport athletic complex] at night. Multiple fields fully illuminated 
by high-mast sports lighting — crisp, even, shadow-free coverage. 
Deep black sky, surrounding suburban/urban context visible in background. 
Green turf reads vibrant under the light. No people on fields [or: 
small figures of athletes visible at distance — incidental]. 
Wide establishing perspective, slightly angled. 
Cinematic quality, lush and vivid, high production value, 
photorealistic, professional drone photography, sharp focus, no lens flare.
```

---

**Feature / Detail — CleanBeam™ Hardware**

```
Extreme close-up macro photograph of [IP69K gasket seal / stainless steel 
mounting hardware / LED array behind tempered glass lens] on industrial 
LED fixture. Black background. Dramatic directional lighting revealing 
material texture and precision construction — specular highlights on metal, 
depth in seal geometry. No labels or text in frame. 
Cinematic quality, macro photography, sharp focus, high production value, 
photorealistic, studio lighting, black background.
```

---

#### People in AI-Generated Imagery — Equity Checklist

When generating images with people, rotate deliberately across these attributes. Do not default to any single combination:

- **Gender presentation**: masculine / feminine / androgynous — vary across the library
- **Apparent ethnicity**: consciously include Black, Latino/Hispanic, Asian, white, and multiracial presentations — rotate, do not default to white
- **Apparent age**: include younger workers (20s), mid-career (30s–40s), and experienced (50s+)
- **Build**: vary — do not default to a single body type

Add specificity to prompts:

> *anonymous worker from behind, [gender-neutral work clothing / safety vest / sanitation PPE], [build description], no face visible*

Never use terms like "default worker" or leave demographics unspecified — unspecified defaults to majority-group representation in most AI models.

---

### 15.12 Stock Photography Selection Guide

Use this checklist when evaluating stock images for ESL Vision use.

**Mandatory criteria — all must pass:**

- [ ] Environment matches the actual installation context of the specific product
- [ ] Time of day is appropriate — exterior/architectural shots must be dusk, blue hour, dawn, or night
- [ ] No faces clearly visible (or faces are incidental background figures, not subjects)
- [ ] Demographic representation is appropriate — do not select images that skew to a single demographic
- [ ] Production quality is high — sharp, well-composed, professionally lit
- [ ] No competitor product fixtures visible in frame
- [ ] Atmosphere matches the product family register (cool/industrial for CleanBeam™; clean/modern or raw/functional for ESL Core™ depending on context; dramatic/nighttime for Stadia™)

**Disqualifying characteristics — any one fails the image:**

- [ ] Clearly staged / "stock photo obvious" (posed groups, fake smiles, artificial scenarios)
- [ ] Daylight exterior with no visible light source output
- [ ] Consumer / DIY context
- [ ] Heavy HDR, lens flare, or over-processed look
- [ ] Grey gradient or mottled grey background (for product shots)
- [ ] Warm golden-hour tone used for CleanBeam™ or industrial contexts
- [ ] Low resolution or visible compression artifacts

**Preferred stock sources for ESL Vision imagery:**
- Getty Images / iStock — architectural, industrial, and aerial photography
- Shutterstock — industrial and facility interiors
- Unsplash — supplementary atmospheric use only (verify license for commercial use)
- Adobe Stock — broad coverage, good for CleanBeam™ industrial contexts

---

*Brand & Design System — ESL Vision v2026.06.08 · June 2026*
*Initial public release. Built from: BigCommerce theme settings, microsite CSS/JS, spec sheet PDF, PowerPoint deck, SVG logo source, and confirmed owner input across 16 source files. Photography & Imagery section (Section 15) compiled from visual audit of eslvision.com, beta.eslvision.com, and tyson/aquabeam microsite; review of homepage banners (LHB, Stadia™, Canopy series), portal background, washdown hero, and ESL Core™ catalog product photography.*