# THIS YOU — SCENE SYSTEM
## v3 — Text-Led Modular Editorial Grid

---

# 1. CORE IDEA

SCENE pages should not be built as one large AI-generated collage image.

Instead:

> **SCENE = a text-led modular editorial composition built from 6–8 total modules.**

A module may be:
- headline,
- short editorial paragraph,
- micro-copy,
- isolated visual object,
- small photo fragment,
- texture,
- map / route graphic,
- number / timestamp,
- quote,
- label.

The page should feel like:
- a magazine spread,
- a visual diary,
- an editorial object board,
- a loose grid with strong typography,
- a composed moment rather than an illustration.

The SCENE should be read as **editorial design first**.

---

# 2. MODULE COUNT

Preferred total:

> **6–8 modules per SCENE**

Recommended:
- **6 = clean / restrained**
- **7 = default**
- **8 = maximum / intentionally dense**

Important:

> **6–8 means total editorial modules, not 6–8 images.**

Typical balance:

- **3–4 visual modules**
- **3–4 text / graphic modules**

Some scenes may use only 3 images.

Do not add an image only to fill the grid.

---

# 3. TEXT SHOULD DOMINATE

SCENE is not primarily an image page.

Its role is to make the reader **feel the moment**.

Therefore:
- headline can be one of the largest modules,
- text can occupy more physical space than any single image,
- negative space is part of the composition,
- visual objects act as punctuation,
- micro-copy can connect directly to specific objects.

Recommended balance:

> **55–70% typography / negative space**
> **30–45% visual objects / fragments**

This can vary by chapter.

---

# 4. DEFAULT MODULE FORMULA

A strong 7-module SCENE might use:

1. large headline / opening statement
2. short editorial paragraph
3. hero visual object
4. secondary visual object
5. third visual / fragment
6. micro-copy block
7. accent number / quote / label

Example:

```text
3 visual modules
4 text / graphic modules

= 7 total modules
```

A denser SCENE may use:

```text
4 visual modules
4 text / graphic modules

= 8 total modules
```

---

# 5. GRID SHOULD NOT FEEL LIKE A TEMPLATE

Use CSS Grid as structure, not as visible boxes.

Allowed:
- mixed module sizes,
- asymmetry,
- overlaps,
- transparent PNG cutouts,
- rotated objects,
- modules extending across grid boundaries,
- intentional empty cells,
- oversized type,
- thin rules / lines,
- small captions.

Example:

```text
┌──────────────────────┬───────────┐
│ HEADLINE             │ object    │
│                      │           │
├───────────────┬──────┴───────────┤
│ paragraph     │        object     │
│               │                   │
├───────────────┴──────────┬────────┤
│ micro-copy               │ accent │
└──────────────────────────┴────────┘
```

The grid should be felt, not seen.

---

# 6. VISUAL ASSETS

Preferred visual assets:

- transparent PNG cutouts,
- isolated generic objects,
- cropped documentary fragments,
- paper / texture fragments,
- map fragments,
- tickets / receipts,
- silhouettes,
- small sourced photographs,
- coded graphics.

Assets can be:

- **G — Generated**
- **S — Sourced**
- **C — Coded / Graphic**
- **L — Layout-created**

Use AI mainly for generic isolated objects or textures.

Use real sourced imagery for factual / documentary context.

---

# 7. TEXT + IMAGE RELATIONSHIP

Readable text should live in HTML/CSS layout.

Do not rely on image generation for:
- event names,
- dates,
- schedules,
- artist names,
- logos,
- captions,
- paragraphs,
- tickets with factual details.

Examples of layout-created text:

**19%**  
*Enough for one more address.*

**COFFEE**  
*Already cold.*

**WATER**  
*The most important thing after aisle four.*

This is stronger than asking AI to bake text into objects.

---

# 8. SCENE VS STYLE

This distinction is critical.

## SCENE
> **How the moment feels.**

Uses:
- objects,
- traces,
- fragments,
- atmosphere,
- time,
- movement,
- fatigue,
- sound,
- small human details.

SCENE should not become a product selection page.

Avoid turning it into:
- branded fashion picks,
- shopping recommendations,
- product catalogue,
- outfit breakdown.

Generic fashion objects are fine when they serve the moment.

---

## STYLE
> **What this reader wears, and why.**

STYLE is where:
- brands,
- products,
- price,
- color,
- fit,
- recommendations,
- shopping links,
- personalization

belong.

This protects the narrative role of SCENE.

---

# 9. SCENE TYPES

## A. CLEAN / GRID-LED
Best for:
- NYFW
- Armory
- NYFF

Typical:
- 3 visual modules
- 3–4 text modules
- more white space

---

## B. HYBRID
Best for:
- New York After Dark
- Marathon

Typical:
- 3–4 visual modules
- 3 text / graphic modules
- one atmosphere or coded element

---

## C. LOOSE / CHAOTIC
Best for:
- CBGB

Typical:
- 4 visual modules
- 4 short text / graphic modules
- overlaps and rotation allowed

---

# 10. HTML / CSS IMPLEMENTATION

SCENE pages should be assembled as live layout, not flattened images.

Recommended structure:

```html
<section class="scene scene-nyfw">

  <div class="scene-headline">
    <h2>47 MINUTES<br>BETWEEN SHOWS</h2>
  </div>

  <div class="scene-copy">
    <p>Fashion Week happens in transit...</p>
  </div>

  <figure class="scene-object scene-coffee">
    <img src="coffee.png" alt="">
  </figure>

  <div class="scene-note scene-note-coffee">
    <strong>COFFEE</strong>
    <p>Already cold.</p>
  </div>

  <figure class="scene-object scene-phone">
    <img src="phone.png" alt="">
    <span class="scene-number">19%</span>
  </figure>

</section>
```

CSS Grid can control the print composition:

```css
.scene {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  position: relative;
}

.scene-headline {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
}

.scene-coffee {
  grid-column: 8 / 12;
  grid-row: 1 / 6;
}
```

Transparent objects may extend outside their nominal cell.

For print:
- typography remains sharp,
- object assets retain transparency,
- physical dimensions can be controlled,
- page can be exported from HTML to PDF.

For digital:
- the same modules can reflow responsively,
- text remains selectable,
- links / QR continuation can remain functional.

---

# 11. PRODUCTION WORKFLOW

For every SCENE:

## STEP A — LOCK TOTAL MODULES
Define:
- 6–8 total modules,
- visual vs text split,
- hero element,
- hierarchy.

## STEP B — WRITE TEXT MODULES FIRST
Before generating objects:
- headline,
- body,
- micro-copy,
- numbers,
- labels.

This ensures the page is editorially driven.

## STEP C — GENERATE / SOURCE LOW-RES VISUALS
Usually only 3–4 visual assets.

## STEP D — CHECK EACH ASSET
Check:
- physical logic,
- no malformed object,
- no accidental logo,
- no fake date,
- no gibberish text,
- no wrong chapter cue.

## STEP E — BUILD LOW-RES HTML MOCKUP
Test:
- hierarchy,
- spacing,
- density,
- text/image balance.

## STEP F — APPROVE / REPLACE
Only replace weak modules.

## STEP G — CREATE PRINT MASTERS
Only approved visual assets get final print treatment.

---

# 12. PRINT QUALITY RULE

Preferred workflow:

> **low-res object → page mockup → approve → print master**

Do not create large final assets before the composition is approved.

Final resolution should be based on actual placed size on the page.

---

# 13. ISSUE-WIDE SIGNATURE

The six SCENE pages should feel related but not templated.

Target rhythm:

> **clean → spacious → chaotic → atmospheric → graphic → elegant**

The reader should perceive:

> **objects, traces, fragments and words collected from a moment.**

Not:

> “AI made a collage.”

---

# 14. FINAL RULE

> **6–8 TOTAL editorial modules per SCENE. Usually 3–4 visuals + 3–4 text/graphic modules.**

Text and negative space should normally dominate.