# 04 — SCENE DESIGN SYSTEM

## Purpose

SCENE answers:

> **How does this moment feel?**

It is built from:
- objects
- traces
- fragments
- time
- movement
- fatigue
- sound
- weather
- small human details

It is not a product moodboard.

## Technical rule

Build SCENE as:

> **live HTML/CSS + separate visual assets**

Do not use one flattened page image as the production format.

## Module rule

Default:

> **6–8 TOTAL editorial modules**
>
> usually **3–4 visual + 3–4 text/graphic**

6 = restrained  
7 = default  
8 = dense / maximal

Do not add an object just to fill space.

## Balance

Typical:
- 30–45% visual fragments
- 55–70% typography / negative space

## Visual assets

Useful SCENE assets:
- transparent cutout object
- real detail photograph
- map / route fragment
- document / paper fragment
- abstract graphic
- generative motion still

## Branded products

Generally keep branded fashion-product specificity out of SCENE.

Use branded products on STYLE pages.

## Layout rhythm

Across six chapters, intentionally vary density.

An Issue 01 example:

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

Do not make six copies of one template.

## Generation workflow

1. define page modules
2. generate/source each object separately
3. validate the object
4. assemble in HTML/CSS
5. preview at low resolution
6. approve
7. create final production assets at actual placed size

Do not generate final print-resolution assets before the layout is approved.

---

## SCENE PERSONALIZATION — TEMPLATE V3

A SCENE remains **one editorial page and one layout**. Personalization happens inside object slots.

Use a shared/default object when everyone sees the same thing:

```json
{
  "slot": 1,
  "variants": {
    "default": {
      "image": "scenes/nyfw/shared/coffee.png",
      "caption": "Coffee before the first show"
    }
  }
}
```

Add `male` / `female` only when the object genuinely benefits from a different presentation:

```json
{
  "slot": 4,
  "variants": {
    "default": {
      "caption": "The small detail that finishes it"
    },
    "male": {
      "image": "scenes/nyfw/male/watch.png",
      "scale": 0.92
    },
    "female": {
      "image": "scenes/nyfw/female/lipstick.png",
      "scale": 0.84,
      "y_offset": -4
    }
  }
}
```

### Fallback

For each property the renderer uses:

```text
requested male/female value
→ default value
→ normal fallback
```

So a female variant may override only `image` and inherit the default `caption`.

If the reader has no presentation variant, `default` is used. If there is no resolvable object, the slot stays visually empty; never show a broken image.

### Optional visual corrections

Every variant may contain:

```text
scale     default 1
x_offset  default 0 px
y_offset  default 0 px
```

The slot geometry stays unchanged. Only the object inside it moves/scales. Use transparent PNG/WebP where possible and preserve the whole object (`object-fit: contain`).

### Asset convention

Preferred human-readable structure:

```text
assets/scenes/nyfw/shared/
assets/scenes/nyfw/male/
assets/scenes/nyfw/female/
```

The renderer uses the JSON path; it does not infer behavior from folder names.

### Admin QA

The page editor exposes `DEFAULT / MALE / FEMALE` preview links. Check all variants before approving the shared issue.

### Compatibility

Package `format_version: 3` supports variants. Legacy v2 packages and legacy objects such as:

```json
{"slot": 1, "image": "coffee.png", "caption": "Coffee"}
```

remain valid and are normalized internally.