# FOEL / L&PEACE — Large Diversity Songs Style Reference

> A narrow fashion poster surrounded by loud color, oversized lettering, and comic-book energy.

**Website:** [FOEL — Large Diversity Songs](https://foel.jp/contents/foel/promotion/peace/autumn-winter/2022/)
**Original URL:** https://foel.jp/contents/foel/promotion/peace/autumn-winter/2022/
**Final URL:** https://foel.jp/contents/foel/promotion/peace/autumn-winter/2022/
**Theme:** saturated campaign colors around a light gray content strip; no user-selectable theme control was observed.
**Inspected:** October 2, 2026, at 01:51 JST; supplied retrieval timestamp: October 1, 2026, 16:51:06.996 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current page served at the campaign URL, including desktop opening, product-chapter and lower-page captures; mobile opening and lower-page captures; and supplied rendered DOM/computed-style evidence. The 2022 season belongs to the campaign content, not the inspection date.

This FOEL campaign feature combines a song, a performer profile, six clothing-benefit chapters, and product-store links. Its defining composition is a narrow central story with an unusually large surrounding frame. On desktop, persistent branding occupies the left side and a compact chapter index occupies the right. Oversized rotated lettering runs immediately outside the story, with finer outlined lettering near the viewport edges.

Photography supplies the human warmth: a smiling performer in a green coat, an ensemble in a clothing-store setting, cutout figures, and styled outfit photographs. The interface adds black outlines, tilted caption strips, gray photographic mounts, white speech clouds, and cartoon pointing hands. The result feels closer to a music poster and comic collage than a conventional retail catalog. Preserve that relationship between people, typography, and the narrow reading strip.

## How to Read This Reference

- **Measured values** come from the supplied rendered DOM, computed styles, and element rectangles. Decimal values are retained where useful for implementation.
- **Visual observations** come from the five original-page captures. Color estimates, rotation angles, and decorative dimensions are explicitly identified as estimates; they were not sampled programmatically.
- **Derived values** are arithmetic relationships between measured values. They do not prove the original stylesheet used the same formulas.
- **Recommendations** describe a reusable implementation, including accessibility improvements and the CSS below. They are not claims about untested original behavior.
- **Font-family declarations** identify the computed stacks. They do not independently prove which font file rendered every glyph.
- **Coverage is uneven:** the opening composition and one product collage are visually documented in detail. Other sections have DOM evidence but no equally detailed screenshot coverage.
- **No additional browsing or file inspection was performed.** The final comparison thumbnail was excluded from design analysis.

## Tokens — Colors

### Default Palette

The page uses large, flat color areas with black linework. These names are implementation aliases, not source custom-property names.

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Campaign Blue | `#0fa2ff` | Measured on the mobile project-link tile; opening background visually corresponds | Opening surround and a footer destination tile |
| Footer Green | `#00ba29` | Measured on the mobile official-site tile | Footer destination surface |
| Story Paper | `#f4f4f4` | Measured on `MAIN` at both viewports | Long central content surface |
| White | `#ffffff` | Measured on utility-link backgrounds and navigation text | Caption cards, speech clouds, button faces, reversed lettering |
| Black | `#000000` | Measured on body text and mobile menu fill | Outlines, menu control, text, hard shadows |
| Hero Green | Approximately `#00c625` | Visual estimate | Large diagonal introductory panel and small comic accents |
| Coral | Approximately `#ff5f63` | Visual estimate | Left letter rail and a captured product-region background |
| Electric Yellow | Approximately `#ffff00` | Visual estimate | Right letter rail and a captured product-region background |
| Violet | Approximately `#9750ff` | Visual estimate | Lower-page surround and some contrasting rail lettering |
| Photo Mount Gray | Approximately `#d7dbdd` | Visual estimate | Thick rectangular mounts around outfit photographs |
| Product Label Ink | Approximately `#231b18` | Visual estimate | Near-black brand, garment-name, and price strips |

The measured green belongs to a footer tile. The hero appears brighter; its exact fill was not included in the supplied computed styles. Keep these values separately labeled until the original assets or relevant element styles can be inspected.

### Captured Color States

| Capture | Visible treatment | Interpretation limit |
| --- | --- | --- |
| Desktop opening | Blue surround, coral left lettering, yellow right lettering, green introductory panel | Confirms the opening composition |
| Desktop product region | Coral across the upper surround and yellow below, with changing rail contrasts | Confirms a spatial color boundary; does not establish its implementation or timing |
| Desktop lower region | Violet surround and a pale central strip | Confirms a later captured state |
| Mobile opening | Blue edge rails around the photograph and green introduction | Preserves the desktop campaign palette |
| Mobile lower region | Violet edge rails around a pale central strip | Corresponds to the desktop lower-page treatment |

These are captured page states, not selectable theme presets. Do not infer a background slideshow, a specific scroll threshold, or an exact color-transition duration.

## Tokens — Typography

### Japanese Body and Product Information

**Computed source stack:** `"Noto Sans JP", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", Verdana, Meiryo, メイリオ, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif`.

Body copy and product information generally use weight `700`. Product-store links use weight `900`. The typography is dense and emphatic: short line lengths, compact paragraph groups, and little reliance on light-weight text.

The measured root size is `13.3px` on desktop and `8.97px` on mobile. The mobile source property `--font_s: 2.3vw` evaluates to `8.97px` at a 390px viewport. This scaling makes ordinary mobile body text notably small.

### Chapter Navigation

**Computed source family:** `tsunagi, sans-serif`.

The six benefit links use this separate family at weight `700`. Their visible white lettering has dark edging or an offset shadow, allowing it to sit directly on strong background colors. The supplied computed fields do not include the exact outline or shadow declaration.

The navigation contains a narrow numbered marker and a two-line Japanese benefit label. Small italic `STYLE` captions above large two-digit numbers create a compact poster-like hierarchy.

### Graphic Lettering

The campaign title, English song wordmark, seasonal caption, giant side rails, and some section headings have distinct graphic treatments. Several corresponding heading elements have empty extracted text despite visible lettering in the captures. Treat them as graphic-led headings; do not assume their inherited computed font size describes the visible lettering.

The visible wordmark reads `Large Diversity Song`, while the browser title uses `Large Diversity Songs`. Preserve supplied artwork rather than normalizing its wording during recreation.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight | Evidence |
| --- | --- | --- | --- | --- |
| Root | `13.3 / 15.295px` | `8.97 / 10.3155px` | 400 | Computed |
| Body and introduction | `17.29 / 23.3415px` | `11.661 / 15.7423px` | 700 | Computed |
| Utility links | `14.63 / 19.7505px` | `12 / 16.2px` | 700 | Computed |
| Benefit navigation | `17.29 / 23.3415px` | `15.6 / 21.06px` | 700 | Computed; mobile menu visibility unverified |
| Product information | `20.748 / 28.0098px` | `13.9932 / 18.8908px` | 700 | Computed on product containers |
| Store CTA | Not measured in desktop DOM sample | `11.661 / 15.7423px` | 900 | Computed |
| Footer destination label | `15.96 / 21.546px` | `10.764 / 14.5314px` | 700 | Computed; desktop color was transparent in the sampled state |
| `H1` container inheritance | `34.58 / 46.683px` | `23.322 / 31.4847px` | 700 | Does not measure artwork glyphs |
| `H2` container inheritance | `25.935 / 35.0123px` | `17.4915 / 23.6135px` | 700 | Does not measure artwork glyphs |
| Giant rail lettering | Approximately `70–76px` | Approximately `42–48px` | Visually heavy | Visual estimate; family unknown |

The store CTA has measured tracking of `1.1661px` on mobile, equivalent to `0.1em`. Most sampled live text has normal letter spacing. Do not apply the spacious tracking of the decorative outer rails to paragraphs or product names.

## Tokens — Spacing & Shapes

### Responsive Unit

Let **1u** mean the observed root-size unit, without changing the root font size of a new application:

- Desktop: `1u = 13.3px`.
- Mobile at 390px: `1u = 8.97px`.
- Body size: `1.3u`, derived from measurements.
- Product size: `1.56u`, derived from measurements.

The page also uses fixed pixel distances. In particular, the navigation's `12px` column gap and `24px` row separation remain the same in both DOM samples. A single global scale factor will not reproduce the layout.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Main title inset from the story edge | `10px` | `10px` | Measured from rectangles |
| Song-heading inset from the story edge | `19px` | `19px` | Measured from rectangles |
| Introduction text side inset | About `47.69px` | About `33.30px` | Measured from rectangles |
| Benefit marker-to-text gap | `12px` | `12px` | Computed |
| Space between benefit rows | `24px` | `24px` | Derived from row rectangles |
| Space between utility links | `12px` | `12px` | Derived from link rectangles |
| Introduction paragraph separation | About `17.29px` | About `11.66px` | Derived; approximately one body-text em |
| Product-line flex gap | `3.1122px` | `2.09898px` | Computed |
| Mobile menu top/right inset | — | `12px / 12px` | Measured |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Main column, utility tabs, product labels | Square | Computed and visible |
| Store CTA | Pill; mobile radius `34.983px` | Computed |
| Mobile menu | Circle; `50%` radius | Computed |
| Social-link hit regions | Circle; `50%` radius | Computed |
| Speech clouds | Irregular lobed contour and pointed tail | Visible artwork; not a standard rounded rectangle |
| Photo mounts | Square corners despite rotation | Visible |

Fine rectangular outlines appear approximately `1–2px` thick. Speech-cloud contours are visibly heavier, approximately `2–3px`. These are visual estimates, not extracted border declarations.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 |
| --- | --- | --- |
| Main story | `x: 480px`, width `480px` | `x: 32px`, width `326px` |
| Space outside main, per side | `480px` | `32px` |
| Main campaign-title graphic box | `460 × 241.83px` | `306 × 160.88px` |
| Main title box origin | Approximately `(490, 662.69)` | Approximately `(42, 449.70)` |
| Song-heading graphic box | `442 × 78.56px` | `288 × 51.19px` |
| Introduction paragraph width | `384.625px` | `259.391px` |
| Benefit navigation row | `261.484 × 46.688px` | `239.203 × 42.094px` in DOM |
| Benefit marker column | `42px` | `40px` |
| Mobile menu button | Not present in desktop capture | `40 × 40px`, at `(338, 12)` |
| Media trigger rectangle | Not measured in desktop sample | `276 × 155.25px`, exactly 16:9 |
| Store CTA | Approximately `230 × 45px` visually | `153.875 × 31.391px` measured |
| Document height | `11433.75px` | `7940.609px` |

## Components

### Campaign Frame and Letter Rails

**Role:** make the entire page recognizable before any paragraph is read.

The story is framed by two large bands of sideways uppercase lettering. The left band repeats the FOEL/performer identity in coral at the opening; the right repeats the diversity message in yellow. Thin black outlines sharpen both against the colored surround. On desktop, the bands occupy approximately `56px` beside the central column. On mobile, each exposed edge region is `32px` wide and the lettering is cropped tightly within it.

A second, much smaller outlined text treatment runs near the desktop viewport's outer edges. It is decorative framing rather than a content column. It disappears from the supplied mobile composition.

**Implementation recommendation:** separate the story, large letter rails, and outer edge lettering into independent layers. Keep decorative text out of the accessibility reading order and prevent it from intercepting pointer events. The captures do not establish whether the original lettering continuously moves.

### Desktop Brand Panel

**Role:** keep the campaign identity and performer present throughout the long scroll.

The left area stacks a small white English wordmark, a tilted Japanese campaign-title graphic, and a large cutout of the smiling performer. The cutout extends to the viewport bottom. A compact `SCROLL DOWN` label and solid black arrow sit near its lower-right side.

At the opening viewport, the wordmark occupies approximately `240 × 42.66px` at `(124.81, 419.75)`. The title graphic occupies `336 × 176.64px` at `(86.41, 487.36)`. This creates substantial empty color above the branding. The panel is deliberately weighted toward the lower half of the screen.

The same arrangement remains visible in the product and lower-page desktop captures, supporting the observation of persistent framing. The supplied evidence does not expose the original positioning declarations.

### Desktop Section Navigation

**Role:** offer direct access to media and six clothing-benefit chapters.

The top row contains three square white links: `MOVIE`, `MAKING`, and `SINGER`. Each has a thin dark edge and a small hard offset shadow. Their measured desktop heights are about `24.64px`, with `12px` between them.

Below is a six-row benefit index. Each row uses a `42px` marker column, `12px` gap, and a two-line label. Rows begin approximately `70.69px` apart: `46.69px` of content plus `24px` separation. The navigation block is vertically centered in the desktop capture.

The source links target `#movie`, `#making`, `#singer`, and `#style01` through `#style06`. The product-region capture shows the third benefit with a coral/red emphasis. This is a visible state; automatic scroll tracking, click feedback, and hover behavior were not independently tested.

### Mobile Menu Control

**Role:** provide a compact navigation entry point without consuming the narrow story width.

The observed control is a black `40px` circle containing three white horizontal strokes. It sits `12px` from the top and right viewport edges and overlaps the right decorative rail.

Only the closed state is visually documented. The mobile DOM contains all navigation links, but their below-viewport rectangles do not prove an inline menu, an open overlay, or a particular off-canvas direction. Do not infer the menu's opening animation, background, or dismissal behavior from those coordinates.

**Recommendation:** use a real button with an accessible name and expanded state. Define keyboard behavior after choosing the menu presentation for the new implementation.

### Opening Photograph and Diagonal Introduction

**Role:** introduce the performer and turn the campaign into an immediate visual event.

A tall photograph fills the central strip. The green-coated performer is centered in front of other people, clothing racks, and bright overhead lamps. The image retains a cool blue cast that works with the opening surround.

The photograph carries a tilted white seasonal caption near its top. Two narrow white vertical text strips sit to the left of the performer, with black Japanese lettering and dark edges. They read as pasted labels rather than ordinary horizontal subheads.

A green panel cuts across the photograph's lower edge. The dividing line rises toward the right by approximately `95–100px` over the desktop column and about `65px` over the mobile column, suggesting an angle near `11–12°`. These are screenshot estimates.

The Japanese title then spans almost the full story width. White heavy lettering, black outlines, hard offset shadows, and slanted black collaboration strips make the title feel assembled from poster elements. Preserve the graphic's natural proportions and overlap instead of retyping it into an unrelated display font.

### Introductory Copy

**Role:** explain the relationship between customers' clothing concerns, the song, and the featured products.

The green surface continues behind a centered English wordmark and four compact groups of white Japanese text. On desktop, the main paragraph width is about `385px`; on mobile, about `259px`. Copy is bold with a measured line-height ratio of `1.35`.

The small mobile type is part of the observed density, but it should not become an accessibility requirement for an adaptation. A larger text floor can be introduced by allowing the introduction to grow naturally in height.

### Movie, Making, and Singer Sections

**Role:** connect the fashion campaign to its music and performer.

The DOM confirms separate movie, making, and singer sections. At the mobile viewport, each of the two media trigger rectangles measures `276 × 155.25px`, a 16:9 ratio. Their links use `javascript:void(0);`, which establishes a scripted trigger but not its result.

The singer section identifies `ずま（虹色侍）` and includes a compact biography. Graphic headings and the biography carry reveal-related animation or transition declarations.

The supplied captures do not show an opened player. Video provider, modal layout, autoplay, audio state, playback controls, and loading behavior remain unverified. For reuse, reserve the measured media ratio and provide an explicit accessible play action.

### Numbered Style-Chapter Header

**Role:** introduce a clothing benefit through a relatable customer concern.

The visually documented third chapter pairs a large `STYLE 03` marker with a white rectangular quotation panel. A green bird symbol and a small green project hashtag sit above bold black Japanese copy. The panel has a thin black outline and a hard lower/right shadow.

The large chapter marker occupies roughly an `80–90px` visual region on desktop. Its numeral is much larger than the quotation text, while the small `STYLE` caption is outlined and italic. The chapter header is a compact horizontal composition inside the narrow strip, not a full-width colored banner.

The six DOM-confirmed topics cover stretch, size variety, a slimmer-looking silhouette, larger sizes from known brands, oversized styling, and practical fabric/comfort features. Their shared numbering provides continuity even when the individual collages vary.

### Outfit Collage and Benefit Bubble

**Role:** turn a functional benefit into a memorable styling scene.

The third chapter shows a woman wearing a brown dress over a black top. Her photograph sits inside a thick pale gray mount, rotated counterclockwise by approximately `13–15°`. The lower mount is deeper than the side borders, resembling an instant-photo print.

A white cloud-shaped speech bubble overlaps to the right. It contains bold Japanese benefit text, a green musical note, a heavy black contour, and a pointed tail aimed toward the photograph. A halftone shadow extends from the bubble's lower-right side.

The collage can approach or cross the nominal story edge. That controlled overlap creates energy; product text remains organized separately. Only this chapter's full collage is visually documented, so do not assign the same exact photo angle or bubble position to every chapter without further evidence.

### Product Name and Price Strips

**Role:** make commerce information readable within an irregular collage.

Brand, garment name, and price appear as separate near-black strips with bold white text. Their widths follow the text rather than forming one equal-width card. Small gaps separate the strips. Product groups alternate between left and right placement.

The measured product containers use `20.748px` type on desktop and `13.9932px` on mobile, with line-height `1.35`. Their flex gaps are `3.1122px` and `2.09898px`, respectively.

The sampled parent paragraphs inherit black text, while the screenshots show reversed inner labels. The child-level color declarations were not supplied. Reproduce the visible label treatment instead of treating the parent color as the finished appearance.

### Online Store CTA

**Role:** provide a repeated, recognizable exit to individual product pages.

The button face is white, outlined in black, pill-shaped, and supported by a hard black offset shadow. `ONLINE STORE` uses very bold uppercase lettering with `0.1em` tracking. A cartoon pointing hand overlaps a green circular target near the right edge.

Measured mobile padding is `5.8305px 32.6508px 5.8305px 16.3254px`, equivalent to `0.5em 2.8em 0.5em 1.4em`. The larger right inset accommodates the pointing treatment. The visible button measures about `154 × 31px`, excluding artwork extending beyond its box.

The mobile DOM supplies product-detail URLs, confirming real commerce links. Their destination availability and current stock were not inspected. A pointer illustration is not evidence of an animated cursor or a click effect.

### Footer Destinations and Social Links

**Role:** return visitors to the main brand site or the broader project.

Two equal destination tiles sit side by side. The mobile DOM measures each at approximately `161.91 × 116.61px`. The official-site tile uses measured green `#00ba29`; the project tile uses measured blue `#0fa2ff`.

A short project-following message and two circular social links follow. Each social-link box is approximately `44.84px` square. The source links point to the brand's Twitter and Instagram accounts.

Desktop destination elements had transparent sampled colors, while mobile elements exposed colors and named animations. This difference should not be interpreted as proof that the desktop destinations are absent or intentionally invisible.

### Lower-Page Miniature Performer

**Role:** continue the playful performer motif near the end of the page.

Both lower-page captures show a small performer cutout, a pointing-hand graphic with a green target, and a white speech cloud near the bottom of a large pale region. The callout refers to miniature performers in the video.

No click outcome is documented. Do not invent a collectible game, reward state, or hidden navigation action. The large blank area is present in the captures, but its full cause and intended pacing cannot be established from the supplied evidence.

## Tokens — Motion & Interaction

| Treatment | Supplied value or evidence | What can be concluded |
| --- | --- | --- |
| Heading and paragraph reveal | `opacity 0.5s cubic-bezier(0.2, 0.5, 0.7, 1), transform 0.5s cubic-bezier(0.2, 0.5, 0.7, 1)` | Opacity and transform are coordinated over 500ms; starting transforms are unknown |
| Bubble-style entrance | `0.5s cubic-bezier(0.25, 0.5, 0.35, 1.25) both bubbleIn` | A named 500ms animation with an overshooting timing curve is assigned to several mobile headings, media triggers, and store links |
| Green footer entrance | `0.85s cubic-bezier(0.5, 0, 0.5, 1) 0.35s both blindStartGreen` | Duration 850ms, delay 350ms; keyframes not supplied |
| Blue footer entrance | `0.85s cubic-bezier(0.5, 0, 0.5, 1) 0.35s both blindStartCyan` | Matching timing with a different named animation |
| Surround color changes | Different colors and a split-color boundary across captures | Visual states are confirmed; timing and implementation are unknown |
| Section navigation | Fragment URLs in rendered links | Targets are confirmed; smooth scrolling and focus handling are untested |
| Mobile menu and media opening | Visible control or scripted links | Opening behavior was not exercised |
| Generic sampled transition | `all` | Insufficient to establish a meaningful animated duration or hover effect |

The known easing is lively and suits the comic treatment. However, the name `bubbleIn` does not reveal its exact scale, rotation, translation, or opacity keyframes. Do not reconstruct a specific bounce trajectory as an observed fact.

The capture process waited for finite motion and layout stability within bounded time limits and temporarily paused perpetual animation during readiness checks. Static captures still cannot establish all ongoing animation, delayed content, playback behavior, or reduced-motion support.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Outer campaign field | Large flat blue, coral, yellow, or violet areas | Creates the dominant mood and frames desktop controls |
| Central story | Measured `#f4f4f4` with crisp vertical boundaries | Holds the long narrative and product sequence |
| Opening introduction | Bright green with a diagonal top edge | Joins the performer image to the campaign message |
| Product information | White text on separate near-black strips | Keeps details readable over a varied collage |
| Quotation panel | White rectangle, thin black outline, hard shadow | Gives customer concerns a pasted-post appearance |
| Speech bubble | White irregular cloud, black contour, halftone shadow | Carries the musical benefit message |
| Photo mount | Pale gray, square corners, rotation | Makes outfit images feel like physical prints |
| Store CTA | White pill, black outline and hard shadow, green pointer accent | Establishes a consistent shopping action |
| Mobile menu | Black circle with white strokes | Provides a compact high-contrast utility control |

There is no general soft-shadow card system. Depth comes from overlap, hard offsets, outlines, photographic mounts, and halftone dots.

## Imagery

Use human-scale fashion photography with expressive poses and visible garments. The opening photograph includes the retail setting, other people, and lighting fixtures; it is not a seamless studio cutout. The desktop side panel and lower-page detail use isolated performer cutouts, creating a deliberate contrast between photographed scenes and pasted figures.

The third chapter combines an outfit photograph with gray mounting paper and drawn comic elements. Keep this mixture intact. Replacing every image with a uniform product packshot would remove much of the campaign's personality.

The photographic material appears normally rendered, not pixelated or dithered. Halftone is a local graphic treatment around speech bubbles, not a filter to apply across faces and clothing.

### Observed Asset References

No original image URLs, filenames, formats, or intrinsic dimensions were supplied. This inventory identifies observed assets by location; it is not a downloadable asset manifest.

| Asset | Observed location | Use |
| --- | --- | --- |
| Ensemble photograph with green-coated performer | Desktop and mobile opening | Primary emotional focal point |
| Seasonal caption and vertical Japanese labels | Opening photograph | Poster-like layering and campaign context |
| Japanese campaign-title graphic | Desktop brand panel and central introduction | Main identity and collaboration message |
| English song wordmark | Desktop brand panel and central introduction | Secondary identity |
| Large performer cutout | Desktop left panel | Persistent human presence |
| Brown-dress outfit photograph | Desktop third style chapter | Product and silhouette demonstration |
| Gray photo mount | Third style chapter | Physical-print collage treatment |
| Speech clouds, musical note, halftone shading | Product and lower-page captures | Comic and musical expression |
| Pointing hand and green target | Store CTA and lower-page detail | Action cue |
| Miniature performer | Desktop and mobile lower-page captures | Playful continuation of the campaign motif |

Use original assets only when authorized and available. CSS can reproduce the framing and commerce labels, but it cannot replace the distinctive photography and campaign lettering.

## Layout & Responsive Behavior

At 1440px, the measured story is exactly one third of the viewport: `480px` wide, centered at `x = 480px`. The remaining two thirds hold persistent branding, navigation, and decorative lettering. This is a long document with desktop framing, not a full-viewport application with a separately scrolling content pane.

At 390px, the story is `326px` wide with `32px` exposed on either side. The large letter rails remain, while the desktop brand panel and visible right-side navigation are removed from the opening composition. The performer and campaign title already exist within the central story, so the mobile page retains its identity without the duplicate desktop panel.

The closed mobile menu button overlaps the upper-right rail. The central photograph begins at the top of the viewport; there is no conventional horizontal site header above it in the capture.

The column-width ratio between the samples is approximately `0.679`, while the root-type ratio is approximately `0.674`. Some spacing remains fixed, and the title-to-wordmark gap differs. The mobile layout is therefore not simply a scaled screenshot of the desktop page.

The source custom properties include width-like values such as `--non-sp: 640px`, `--tab: 768px`, `--mtab: 840px`, `--ltab: 960px`, `--spc: 1100px`, `--pc: 1200px`, and `--lpc: 1660px`. Their presence does not prove which media queries control this composition. No tablet or intermediate-width capture was supplied.

The measured document heights are about `11434px` desktop and `7941px` mobile. Preserve content order and natural height rather than hardcoding those totals. In particular, do not manufacture a large empty outro merely to match a lower-page screenshot whose complete rendering state is uncertain.

## Do’s and Don’ts

### Do

- Build the composition around a narrow central story and unusually prominent framing.
- Retain the oversized side lettering on mobile, with approximately 32px of exposed framing per side at 390px.
- Use saturated flat colors, black outlines, and deliberate color contrasts between rails and background.
- Preserve the diagonal photo-to-green-panel boundary.
- Combine expressive photography, cutout people, tilted mounts, and comic callouts.
- Keep product names and prices on separate text-sized dark strips.
- Make the white store pill and green pointing accent consistent across products.
- Distinguish live typography from artwork lettering when measuring or recreating headings.
- Use the known 500ms reveal timing as a reference while keeping unknown keyframes explicitly approximate.
- Keep the long page navigable through the six numbered chapters.

### Don’t

- Don’t stretch the story across the desktop viewport or replace it with a three-column product grid.
- Don’t replace the poster composition with evenly spaced rounded cards.
- Don’t make the desktop branding top-aligned; its low placement and empty space above are distinctive.
- Don’t give all typography the same font, tracking, or treatment.
- Don’t infer the title artwork's font from an empty heading element's inherited CSS.
- Don’t add soft elevation shadows, glass blur, or glossy gradients to the main interface.
- Don’t pixelate the fashion photographs because speech bubbles contain halftone shading.
- Don’t treat captured background states as a verified theme switcher or automatic slideshow.
- Don’t invent video playback, menu opening, hover, or miniature-character game behavior.
- Don’t treat the observed small mobile body size as a requirement for accessible reuse.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original features:

- Give graphic headings useful text alternatives, preserving a logical heading hierarchy even when the visible title is artwork.
- Hide decorative rail lettering, duplicate branding, pointer hands, and purely decorative music symbols from assistive technology.
- Give the mobile menu an accessible name, expanded state, and appropriate keyboard behavior. If implemented as a modal, manage focus and support Escape.
- Use semantic buttons for media triggers rather than JavaScript URLs. Keep 16:9 space reserved before media loads.
- Provide visible keyboard focus for utility links, chapter links, store links, and social controls.
- Make touch targets at least 44px tall without requiring the visible 31px store pill to become visually bulky.
- Consider a 14–16px mobile body-text floor. Allow copy regions to grow rather than preserving fixed heights that would clip larger text.
- Honor reduced motion, and show all content when reveal scripts fail or are disabled.
- Pair any active chapter color with an additional indicator and, where appropriate, `aria-current`.
- Keep photographic aspect ratios and explicit image dimensions to reduce movement as assets load.
- Treat product availability as live commerce data; the campaign page's displayed prices are not evidence of current inventory.

## Agent Prompt Guide

### Quick Color Reference

- Central paper: measured `#f4f4f4`.
- Black/white controls: measured `#000000` and `#ffffff`.
- Blue: measured `#0fa2ff` on a footer tile; visually consistent with the opening surround.
- Footer green: measured `#00ba29`.
- Hero green: approximate `#00c625`.
- Coral, yellow, violet: approximate `#ff5f63`, `#ffff00`, and `#9750ff`.
- Depth: black hard shadows and localized halftone, not soft elevation.

### Overall Prompt

“Create a Japanese fashion campaign feature with a 480px centered story at a 1440px desktop viewport. Surround it with saturated blue, coral, yellow, and violet fields, giant sideways outlined lettering, a persistent performer-and-title composition at left, and a six-chapter index at right. Begin with a tall ensemble photograph featuring an expressive performer, narrow vertical caption strips, and a green introduction panel with a diagonal upper edge. Use supplied campaign lettering, tilted black collaboration labels, gray-mounted outfit photographs, white comic speech clouds, musical-note accents, and separate dark product-name strips. Shopping links are white outlined pills with bold tracked lettering and a green pointing cue. At 390px, use a 326px story with 32px side rails and a black circular menu button. Keep unverified menu and media behavior explicitly separate from the visual reference.”

### Example Component Prompts

1. **Desktop index:** “Build a compact centered navigation block with three square white utility links above six numbered rows. Use 42px marker columns, 12px internal gaps, and 24px between rows. Each row has a tiny italic STYLE caption, a large two-digit number, and a bold two-line Japanese benefit label with dark edging.”
2. **Opening scene:** “Frame a tall fashion photograph with huge sideways lettering. Overlay a tilted seasonal caption and two narrow vertical white text strips. Join the image to a vivid green panel along a diagonal rising roughly 12 degrees toward the right. Place authorized campaign-title artwork across that transition.”
3. **Style chapter:** “Pair a large STYLE 03 marker with a white outlined customer-quote panel. Below, rotate a gray-mounted portrait photograph counterclockwise and overlap a white cloud-shaped benefit bubble at its right. Add a green musical note and localized halftone shadow.”
4. **Product information:** “Arrange brand, garment name, and price as separate near-black strips with bold white text and narrow gaps. Alternate groups between left and right positions around the collage. Avoid enclosing everything in a single card.”
5. **Store action:** “Create a white pill with a black outline, a crisp downward shadow, weight-900 ONLINE STORE lettering, and 0.1em tracking. Reserve extra space at the right for a green circular target and an overlapping licensed cartoon pointer.”
6. **Mobile shell:** “Keep 32px colorful letter rails on both sides of a 326px story at 390px viewport width. Remove the duplicate desktop side panels and place a 40px black menu circle 12px from the top and right. Preserve natural document scrolling and readable content growth.”

## Quick Start

### CSS Custom Properties

This is a reusable approximation, not extracted source CSS. It keeps the application's normal root size and uses `--u` for the observed scale. The 1200px desktop switch is a recommendation; its use as the original breakpoint is unverified. Estimated colors and geometric approximations are labeled in comments.

The component classes correspond to the anatomy above. Supply authorized image assets separately. Menu behavior, media playback, reveal triggers, and scroll-linked background logic require their own implementation.

```css
:root {
  /* Measured colors */
  --paper: #f4f4f4;
  --ink: #000;
  --white: #fff;
  --blue: #0fa2ff;
  --footer-green: #00ba29;

  /* Visual estimates */
  --hero-green: #00c625;
  --coral: #ff5f63;
  --yellow: #ffff00;
  --violet: #9750ff;
  --photo-mount: #d7dbdd;
  --label-ink: #231b18;

  --font-body: 'Noto Sans JP', 'Yu Gothic', YuGothic,
    Verdana, Meiryo, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', sans-serif;
  --font-benefit: tsunagi, sans-serif;

  /* Matches both samples; the lower clamp is a recommendation. */
  --u: clamp(8.97px, 2.3vw, 13.3px);
  --text-body: calc(1.3 * var(--u));
  --text-product: calc(1.56 * var(--u));
  --text-utility: 12px;
  --text-benefit: 15.6px;
  --leading: 1.35;

  /* Reproduces the two inspected column widths. */
  --story-width: min(480px, calc(100vw - 64px));
  --rail-width: 32px;
  --rail-type: 46px;
  --marker-width: 40px;
  --scene-color: var(--blue);
  --inset: 10px;
  --nav-gap: 12px;
  --nav-row-gap: 24px;

  /* Measured timing; original keyframes were not supplied. */
  --reveal-time: 500ms;
  --reveal-ease: cubic-bezier(0.2, 0.5, 0.7, 1);
  --bubble-time: 500ms;
  --bubble-ease: cubic-bezier(0.25, 0.5, 0.35, 1.25);
}

* { box-sizing: border-box; }

body.campaign {
  margin: 0;
  color: var(--ink);
  background: var(--scene-color);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  line-height: var(--leading);
}

/* Example state hooks, not a reconstruction of original triggers. */
.campaign[data-scene='coral'] { --scene-color: var(--coral); }
.campaign[data-scene='yellow'] { --scene-color: var(--yellow); }
.campaign[data-scene='violet'] { --scene-color: var(--violet); }

.campaign-story {
  position: relative;
  width: var(--story-width);
  margin-inline: auto;
  background: var(--paper);
  border-inline: 1px solid var(--ink);
}

.campaign-story img {
  display: block;
  max-width: 100%;
  height: auto;
}

.letter-rail {
  position: fixed;
  inset-block: 0;
  z-index: 2;
  width: var(--rail-width);
  overflow: hidden;
  pointer-events: none;
}

.letter-rail span {
  display: block;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 900 var(--rail-type) / 1 sans-serif;
  -webkit-text-stroke: 1px var(--ink);
}

.letter-rail--left {
  right: calc(50% + var(--story-width) / 2);
  color: var(--coral);
}

.letter-rail--left span { transform: rotate(180deg); }

.letter-rail--right {
  left: calc(50% + var(--story-width) / 2);
  color: var(--yellow);
}

.desktop-brand,
.desktop-navigation,
.outer-lettering { display: none; }

.mobile-menu-button {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 20;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  cursor: pointer;
}

.mobile-menu-button span {
  width: 22px;
  height: 2px;
  background: currentColor;
}

.hero-visual { position: relative; }
.hero-visual > img { width: 100%; }

.hero-introduction {
  position: relative;
  isolation: isolate;
  padding: 0 var(--inset) calc(4 * var(--u));
  color: var(--white);
  background: var(--hero-green);
}

/* Approximate diagonal: about 98px rise over a 480px column. */
.hero-introduction::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: calc(var(--story-width) * 0.205);
  background: var(--hero-green);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

.campaign-title-art {
  position: relative;
  width: 100%;
  transform: translateY(calc(var(--story-width) * -0.1));
  margin-bottom: calc(var(--story-width) * -0.1);
}

.song-wordmark {
  width: calc(100% - 18px);
  margin: 40px auto 0;
}

.introduction-copy {
  width: 85%;
  margin: calc(2.92 * var(--u)) auto 0;
}

.introduction-copy p { margin: 0 0 1em; }

/* Optional readability improvement; allow natural height growth. */
.readable-copy {
  font-size: max(14px, var(--text-body));
  line-height: 1.5;
}

.utility-links {
  display: flex;
  justify-content: center;
  gap: var(--nav-gap);
}

.utility-links a {
  display: block;
  padding: 0.1em 1em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: var(--text-utility);
  line-height: 1.35;
  text-decoration: none;
}

.chapter-links {
  display: grid;
  gap: var(--nav-row-gap);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.chapter-link {
  display: grid;
  grid-template-columns: var(--marker-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--nav-gap);
  color: var(--white);
  font-family: var(--font-benefit);
  font-size: var(--text-benefit);
  line-height: 1.35;
  text-decoration: none;
  text-shadow: 1.5px 1.5px 0 var(--ink);
}

.chapter-link small {
  display: block;
  font: italic 10px / 1 serif;
  letter-spacing: 0.12em;
}

.chapter-link strong {
  display: block;
  font: 900 32px / 1 var(--font-body);
}

.style-section {
  position: relative;
  padding: 32px var(--inset) 48px;
  scroll-margin-top: 64px;
}

.style-header {
  display: grid;
  grid-template-columns: 20% minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.customer-quote {
  padding: 8px;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: 2px 3px 0 var(--ink);
}

.customer-quote small {
  display: block;
  color: var(--footer-green);
}

/* Photo angle and mount proportions are visual approximations. */
.outfit-photo {
  width: 72%;
  margin: 40px 0;
  padding: 3.5% 3.5% 14%;
  background: var(--photo-mount);
  transform: rotate(-14deg);
}

.outfit-photo img { width: 100%; }

.product-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  font-size: var(--text-product);
  line-height: 1.35;
}

.product-labels--right { align-items: flex-end; }

.product-labels > span {
  max-width: 100%;
  padding: 0.15em 0.45em;
  color: var(--white);
  background: var(--label-ink);
  overflow-wrap: anywhere;
}

.store-link {
  position: relative;
  display: table;
  max-width: 100%;
  margin-top: 0.5em;
  padding: 0.5em 2.8em 0.5em 1.4em;
  border: 2px solid var(--ink);
  border-radius: 3em;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-decoration: none;
}

/* An authorized pointer image may extend beyond this control. */
.store-link .pointer-art {
  position: absolute;
  width: 3.5em;
  right: -0.8em;
  top: 0.2em;
  pointer-events: none;
}

.media-trigger {
  display: block;
  width: calc(100% - 48px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}

.footer-destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-destinations a {
  display: grid;
  place-content: center;
  min-height: calc(13 * var(--u));
  padding: 12px;
  color: var(--ink);
  text-align: center;
}

.footer-destinations a:first-child { background: var(--footer-green); }
.footer-destinations a:last-child { background: var(--blue); }

/* Content is visible by default; a controller may add reveal states. */
.reveal {
  transition:
    opacity var(--reveal-time) var(--reveal-ease),
    transform var(--reveal-time) var(--reveal-ease);
}

.campaign :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--white);
}

@media (min-width: 1200px) {
  :root {
    --u: 13.3px;
    --rail-width: 56px;
    --rail-type: 74px;
    --text-utility: 14.63px;
    --text-benefit: 17.29px;
    --marker-width: 42px;
  }

  .mobile-menu-button { display: none; }
  .song-wordmark { margin-top: 30px; }

  .desktop-brand {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100vw - var(--story-width)) / 2);
  }

  .desktop-brand .brand-wordmark { width: 50%; margin-bottom: 24px; }
  .desktop-brand .brand-title { width: 70%; }
  .desktop-brand .performer-cutout { width: 88%; align-self: flex-start; }

  .desktop-navigation {
    position: fixed;
    top: 50%;
    left: calc(50% + var(--story-width) / 2 +
      (100vw - var(--story-width)) / 4);
    display: block;
    width: 276.67px;
    transform: translate(-50%, -50%);
  }

  .desktop-navigation .chapter-links {
    width: 261.484px;
    margin-inline: auto;
  }

  .outer-lettering {
    position: fixed;
    inset-block: 0;
    display: block;
    overflow: hidden;
    writing-mode: vertical-rl;
    color: transparent;
    font: 700 24px / 1 sans-serif;
    letter-spacing: 0.7em;
    -webkit-text-stroke: 0.6px var(--ink);
    pointer-events: none;
  }

  .outer-lettering--left { left: 20px; }
  .outer-lettering--right { right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign *,
  .campaign *::before,
  .campaign *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
```

The single-color `data-scene` hooks above do not reproduce the split-color boundary visible in the product capture. Recreating that boundary requires section background layers or separately verified scroll logic. The speech clouds and exact campaign lettering should remain supplied artwork rather than being approximated by generic CSS shapes.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. There is no evidence that the original page uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-campaign-paper: var(--paper);
  --color-campaign-ink: var(--ink);
  --color-campaign-blue: var(--blue);
  --color-campaign-green: var(--hero-green);
  --color-campaign-coral: var(--coral);
  --color-campaign-yellow: var(--yellow);
  --color-campaign-violet: var(--violet);

  --font-campaign: var(--font-body);
  --font-campaign-benefit: var(--font-benefit);

  --text-campaign-body: var(--text-body);
  --text-campaign-product: var(--text-product);
  --text-campaign-utility: var(--text-utility);

  --spacing-story: var(--story-width);
  --spacing-rail: var(--rail-width);
  --spacing-campaign-inset: var(--inset);
  --radius-campaign-pill: 999px;
}
```

## Sources & Evidence

- **Original and final page:** [FOEL — Large Diversity Songs](https://foel.jp/contents/foel/promotion/peace/autumn-winter/2022/). The supplied observation reports HTTP 200 with no URL change.
- **Capture time:** October 1, 2026, 16:51:06.996 UTC, equivalent to October 2, 2026, 01:51:06.996 JST.
- **Visual evidence:** three original desktop captures at 1440 × 1000 and two original mobile captures at 390 × 844. They document the opening, a desktop product chapter, and lower-page states.
- **Rendered evidence:** page title, text, link targets, selected element rectangles, computed font stacks, typography, backgrounds, radii, grid columns, gaps, custom properties, transitions, and named animations at both viewports.
- **Observed navigation targets:** the original page's `#movie`, `#making`, `#singer`, and `#style01`–`#style06` fragments. Click outcomes were not supplied.
- **Capture limitations:** readiness checks used bounded waits for document load, finite motion, layout stability, and visible image decoding. Perpetual animation was paused during readiness checks and then resumed. These checks do not establish complete delayed content or every reveal state.
- **Unverified:** mobile menu opening, video playback, hover and focus states, exact background-transition logic, animation keyframes, tablet layouts, asset filenames, font-file loading, and destination-page availability. No linked media, product pages, or social destinations were independently opened.

This reference describes the currently served campaign page using the supplied original-page evidence. Estimated colors and decorative geometry remain estimates; the reusable CSS and accessibility provisions are implementation recommendations.