# B SUPERMARKET / JACKSON MATISSE! × BAYFLOW — Style Reference > A warm gift editorial with a broad heart-shaped media window, rainbow lettering, and orange retail stamps. **Original URL:** [bayflow.jp/topics/2202bsuper/](https://www.bayflow.jp/topics/2202bsuper/) **Final URL:** [bayflow.jp/topics/2202bsuper/](https://www.bayflow.jp/topics/2202bsuper/) — unchanged; supplied HTTP status: 200. **Theme:** light, with a muted beige campaign canvas and a white brand footer. **Inspected:** October 2, 2026, at 05:34 JST; supplied retrieval timestamp: October 1, 2026, at 20:34:19.147 UTC. **Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. **Scope:** the currently served campaign topic page: opening composition, introduction, full-movie section, five episode links, photographic strip, merchandise links, café and novelty information, closing campaign mark, and BAYFLOW footer. Episode destinations, checkout flows, and movie playback were not inspected. This is a campaign editorial inside the BAYFLOW website. It connects a story about giving gifts to filmed moments, episode pages, merchandise, and café information. Its defining relationship is between quiet beige space and bright, tactile accents: multicolored display lettering, orange labels, warm photographs, and black framing rules. The opening media occupies a wide, shallow heart-like silhouette with a central upper notch and a rounded lower edge. The shape feels soft and informal rather than like a conventional pointed heart icon. Centered Japanese copy slows the pace below it. Further down, poster-like episode entries and a full-width photographic strip introduce more visual density before product and promotion information. The white footer returns to BAYFLOW's broader brand system. This reference describes what is currently served. Dates, prices, and offers printed in the campaign are observed content, not confirmation of current commercial availability. ## How to Read This Reference - **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Decimal measurements are rounded where useful. - **Visual estimate** means a proportion, color, or dimension was estimated from the five original-page captures. No pixel-sampling tool was used. - **Calculated** means arithmetic derived from supplied measurements, such as spacing between two rectangles. - **Recommended** means an implementation choice for a reusable adaptation. It is not a claim about the original source code. - Token names in this document are descriptive aliases, not recovered site variables. - The DOM sample does not include every image, wrapper, pseudo-element, or stylesheet rule. A measured parent rectangle must not automatically be treated as the visible artwork boundary. - Desktop captures cover the opening, final episode and photo strip, and lower promotion/footer. Mobile captures cover the opening and footer. Intermediate sections have DOM evidence but incomplete visual coverage. ## Tokens — Colors ### Default Palette | Name | Value | Suggested token | Role and evidence | | --- | --- | --- | --- | | Campaign Beige | Approximately `#D1C1B6` | `--surface-campaign` | Main campaign canvas; visual estimate | | Information Taupe | Approximately `#BFAEA2` | `--surface-information` | Darker lower promotional surface; visual estimate | | Stamp Orange | Approximately `#F17B2C` | `--accent-orange` | Scroll seal, episode action label, small promotional badge; visual estimate | | Sign Orange | Approximately `#FF5100` | `--accent-sign` | Closing B SUPERMARKET logo field; visual estimate, distinct from the softer orange seal | | Letter Pink | Approximately `#EF7DB5` | `--accent-pink` | Individual hero headline letters; visual estimate | | Letter Green | Approximately `#22AF7B` | `--accent-green` | Individual hero headline letters; visual estimate | | Letter Cyan | Approximately `#1AAAC4` | `--accent-cyan` | Individual hero headline letters; visual estimate | | Letter Yellow | Approximately `#EFE300` | `--accent-yellow` | Individual hero headline letters and terminal dot; visual estimate | | Black Ink | `#000000` | `--color-ink` | Measured text color; also visually used for rules and icons | | Note Gray | `#5B5B5B` | `--color-muted` | Measured novelty-condition paragraph color | | Footer White | `#FFFFFF` | `--surface-footer` | Measured body background and visibly white footer | | Footer Rule | Approximately `#D8D8D8` | `--color-rule` | Fine footer separators; visual estimate | The campaign beige is not established by the sampled BODY background: BODY computes to white, while the campaign visibly sits on beige. The colored surface therefore belongs to another layer not identified in the supplied element sample. ### Theme Behavior Only one visual theme is evidenced. There are no observed theme switches or alternate palettes. Rainbow color is concentrated in the hero lettering and photographed branded objects. Body text, utility navigation, product captions, and social icons remain restrained. Orange identifies selected graphic accents rather than forming a uniform button system across every link. The supplied custom properties include `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px`. These are library-related values. The evidence does not establish a visible blue navigation control, so neither belongs in the campaign's visual palette. ## Tokens — Typography ### Japanese Editorial Copy **Measured family:** `'Zen Kaku Gothic Antique', sans-serif`. The introductory heading uses weight `700`; narrative and information paragraphs use `500`. The result is approachable and firm, with enough weight to remain legible over the muted beige canvas. Body paragraphs are modest in size and depend on deliberate line breaks and generous paragraph separation. The introduction is centered. Longer drink descriptions use narrower text columns and a more conventional paragraph layout. Do not apply the opening's short, centered lines to every informational paragraph. ### Product Captions **Measured family:** `Poppins, sans-serif`. Product names and tax-inclusive prices use regular weight `400`. They remain small and economical, for example `T-SHIRT ¥6,490(tax-in)`. Poppins is supported for these captions; it is not established as the font used for all English display lettering. ### Shared Site Utilities The body fallback stack is measured as: ```css -apple-system, 'system-ui', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif ``` Desktop footer utility links declare `Helvetica, neue-haas-unica, sans-serif`. A computed family list identifies the requested stack, not which installed or downloaded face actually rendered. ### Display Lettering and Brand Marks The hero headline reads `GIFTS ARE BEAUTIFUL.` and uses wide, distinctive letterforms with individual flat colors. The campaign identity, episode graphics, and closing supermarket sign should be treated as graphic assets where authorized artwork is available. Their exact typeface is not established. The campaign H1 has an empty text sample and a measured artwork-sized rectangle; its inherited 14px font size does not describe the visible logo lettering. Likewise, do not derive the BAYFLOW wordmark from the surrounding footer's font stack. ### Type Scale | Role | Desktop measured value | Mobile measured value | Weight / tracking | | --- | --- | --- | --- | | Root element | `10px / 15px` | `10.4px / 15.6px` | `400` | | Shared body fallback | `14px / 21px` | `14.56px / 21.84px` | `400` | | Introductory Japanese heading | `22px / 29.92px` | `19.76px / 26.87px` | `700`; normal tracking | | Introductory narrative | `14px / 25.06px` | `13.52px / 22.85px` | `500`; normal tracking | | Information paragraphs | `14px / 22.96px` | `14.56px / 23.88px` | `500`; normal tracking | | Product name and price | `12px / 18px` | `12.48px / 18.72px` | `400`; normal tracking | | All-items link | `18px / 25.02px` | `18.72px / 26.02px` | `700`; tracking `-0.72px` / `-0.7488px` | | Footer utility navigation | `12px / 18px` | Not displayed in the supplied mobile capture or link list | `400`; tracking `0.6px` | | Desktop PAGE TOP label | `11px / 16.5px` | Text label not visible in the mobile capture | `400`; tracking `0.22px` | The mobile root and several text sizes are 1.04 times their desktop equivalents, consistent with a 390-to-375 scaling ratio. That is a numerical observation, not proof of the complete responsive formula. The introductory heading and narrative also change their underlying sizes, so uniformly multiplying all desktop typography by 1.04 would be incorrect. ## Tokens — Spacing & Shapes The campaign combines broad empty areas with tightly composed photographic graphics. It does not use a regular grid of rounded cards. Its strongest shapes are the organic media mask, serrated orange seal, square photographic borders, and curved lower section edge. ### Spacing Scale | Relationship | Desktop | Mobile | Evidence | | --- | --- | --- | --- | | Intro heading box to narrative box | `28px` | `16.63px` | Calculated from measured rectangles | | Introduction end to FULL MOVIE section | `45px` | `79.03px` | Calculated | | Episode section top padding | `83px` | `68.64px` | Measured | | Episode column gap | `78px` | Single column | Calculated from link rectangles | | Episode vertical gap between measured link boxes | `70px` | Approximately `52–54px` | Calculated; visible artwork may extend beyond a link box | | Merchandise section end to INFORMATION | `100px` | `78px` | Calculated | | Main element bottom padding | `50px` | `20.8px` | Measured | | Mobile long-form information inset | — | Approximately `20.8px` each side | Measured | ### Border Radius and Graphic Shapes | Element | Observed treatment | Implementation guidance | | --- | --- | --- | | Hero media | Broad two-lobed organic mask; rounded lower edge | Use a custom SVG mask or clip path; a circle or standard heart glyph is insufficient | | Scroll seal | Orange serrated disc | Use supplied artwork or a many-point polygon, approximately 76px desktop and 54px mobile | | Episode artwork | Sharp black frame | Approximately 1–2px visually; preserve square corners | | VIEW MORE label | Orange strip with subtly irregular edges | Prefer approved artwork; a nearly square rectangle is an acceptable approximation | | Promotional badge | Small slanted orange oval | Keep it subordinate to the heading | | Information surface ending | Very broad, shallow curve | Treat as a section silhouette, not a large rounded card | | Footer separators | Fine straight gray rules | No decorative corner treatment | ### Layout Measurements | Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 | | --- | --- | --- | | Document height | `6894.58px` measured; reported rounded height 6895px | `8307.23px` measured; reported rounded height 8307px | | Campaign identity wrapper | `252 × 48.28px`, at approximately `(33, 27)` | `209.03 × 40.05px`, centered at approximately `(90.47, 21.94)` | | Visible hero media | Approximately `1326 × 665px`; visual estimate | Approximately 220px tall, starting near y=80px; sides reach beyond the viewport | | Introduction start | y=`772.69px` | y=`468.97px` | | FULL MOVIE section | `1440 × 500.14px` | `390 × 238.83px` | | Episode link width | `397px` | `330.72px`, with approximately `29.64px` side margins | | Information description column | Approximately `400–410px` | `348.39px` for detailed paragraphs | | Footer element | `304px` high | `614.75px` high | **Geometry limitation:** the first SECTION measures 787.5px tall on desktop but only 219.38px on mobile, while the complete visible mobile opening extends to the introduction at approximately y=469px. Its positioned artwork and lettering are not represented by that wrapper height alone. Reproduce the complete composition, not merely the first SECTION rectangle. ## Components ### Campaign Identity and Hero **Role:** establish the collaboration and its gift theme before presenting merchandise. On desktop, a white `B SUPERMARKET` identity and smaller collaboration line sit near the upper-left corner. The media mask begins approximately 30px from the top and leaves about 4% of viewport width at either side. The multicolored headline crosses the middle of the media in one line. On mobile, the identity becomes black and centered above the media. The media begins near y=80px and is cropped by the viewport at its sides. The headline moves toward the lower edge of the imagery and breaks into two prominent lines: `GIFTS ARE` and `BEAUTIFUL.` This is a recomposition, not a proportional miniature of desktop. The supplied desktop and mobile frames depict different moments involving people and café surroundings. The evidence supports a media-led opening but does not expose its resource URL, playback attributes, audio state, or control implementation. ### Orange Scroll Seal **Role:** visually connect the hero to the story below. A serrated orange disc contains a small white downward mark with a branching, curved end. On desktop it overlaps the bottom-center edge of the media mask. On mobile it sits below the headline, with generous beige space around it. Its estimated size changes from approximately 76px to 54px. A click destination for this particular graphic was not supplied. Preserve it as a visual cue unless implementing and labeling an explicit navigation action. ### Centered Gift Introduction **Role:** explain the emotional premise of the campaign. A bold Japanese heading, `ギフトを贈るっていいよね！`, is accompanied by a small thumbs-up symbol. Below it, medium-weight Japanese prose is arranged in short, centered passages with intentional blank lines. Desktop allows longer phrases per line. Mobile uses additional line breaks, while keeping the text close to its original size. The mobile introduction therefore becomes taller without becoming visually crowded. Use phrase-aware line breaks rather than arbitrarily narrowing the text until it wraps. Keep the heading, emoji, narrative rhythm, and surrounding beige space as a single editorial component. ### Full Movie Section **Role:** offer a fuller media experience after the introduction. The rendered DOM confirms `FULL MOVIE` and `PLAY`, with a section height of approximately 500px on desktop and 239px on mobile. The supplied original-page screenshots do not show the complete movie component. Its exact preview geometry, play-icon design, player controls, destination, and any modal behavior are unverified. A new implementation should use an explicit, keyboard-operable play control and reserve media dimensions before loading; those are recommendations, not observed interaction details. ### Episode Poster Links **Role:** send visitors into five individual campaign stories. The links run from episode 5 to episode 1. Desktop places the first four entries in two columns and centers the fifth beneath them. Their measured x coordinates are 284px and 759px; the final link begins at x=521.5px. Mobile presents all five in one column. The visible final desktop poster combines: 1. A warm, full-height photograph of two people outside a small shop. 2. A compact white episode number near the upper-left corner. 3. Vertical Japanese copy on narrow white strips near the upper-right edge. 4. A sharp dark border around the photograph. 5. An orange `VIEW MORE +` label overlapping the lower-right corner. The action label is approximately 178 × 44px in the supplied capture. It acts as a graphic tab attached to the image, not as a separate padded card footer. **Important measurement distinction:** desktop anchor rectangles are reported as 397 × 397px, but the visible final poster is approximately 397 × 502px. Mobile anchor rectangles are approximately 330.72 × 418.19px. The discrepancy may involve descendant artwork or layout overflow; its cause is not available. Do not force all desktop artwork into a square crop. For a new implementation, allow natural image proportions and make the complete visible poster part of the link target. ### Full-Width Photographic Strip **Role:** connect the personal stories to the physical B SUPERMARKET environment. The desktop capture shows an approximately 300px-tall, edge-to-edge photographic band. Visible subjects include colorful branded packaging, the shop exterior, window graphics, and stocked shelves. Thin black rules separate the pictures. The visible segments have unequal widths, and the outer images are cropped by the viewport. Reproduce the feeling of a continuous photographic strip rather than four equally padded cards. Horizontal movement, dragging, looping, and mobile behavior were not demonstrated. The presence of Swiper-related custom properties alone does not establish any of those behaviors. ### Special Item Lineup **Role:** connect campaign interest to shopping destinations. The section identifies `B SUPERMARKET` and `SPECIAL ITEM LINE UP`. Measured caption positions indicate two desktop columns: T-shirt and vest captions share the upper row; the PC/mask case group and tumbler occupy the lower row. Mobile presents the groups in this order: T-shirt, vest, cases, tumbler. The PC case and mask case retain adjacent caption links where space allows. The section concludes with the larger, bold Japanese link `全てのアイテムをチェック`. Keep names and prices visually compact. These are editorial merchandise references leading to external shopping pages, not evidence of an inline cart interface. The supplied captures do not expose the complete merchandise artwork. Product-image dimensions, backgrounds, and crop styles must not be treated as verified. The two-column description is derived from caption coordinates; the underlying CSS layout mechanism is unknown. ### Information and Novelty Promotion **Role:** explain café drinks and a purchase-related plate promotion. The first information block includes limited-quantity messaging, an original shake introduction, separate descriptions for two flavors, pricing, and store information. Desktop descriptive text sits in a roughly 400–410px right-hand column. Mobile introduces more centered line breaks in the overview, followed by detailed paragraphs inset approximately 20.8px from either edge. The visible novelty block places centered copy on the left and large orange and black plate imagery on the right. A small orange oval badge sits beside the heading. Hand-drawn arrows and angled `ORANGE` and `BLACK` labels identify the plate variants. The plates overlap and carry strong directional shadows as part of their visual treatment. The conditions below the main copy use measured gray `#5B5B5B`. Their size remains comparable to the body text rather than collapsing into tiny legal print. The lower taupe field ends with a wide curved boundary. Preserve the contrast between this darker information surface and the lighter beige closing area. ### Closing Campaign Sign **Role:** close the campaign content before the shared brand footer. A compact B SUPERMARKET sign is centered within a generous beige band. It has a dark outline, a white B inside an orange square, and contrasting black/white supermarket lettering on an orange field. Its visible width is approximately 215px on desktop and 223px on mobile. It is not proportionally reduced to the mobile viewport. No destination for this sign was included in the supplied link evidence. ### BAYFLOW Brand Footer **Role:** reconnect the topic page to the brand's stores, social accounts, and utility pages. Desktop uses a white field with BAYFLOW, HEREIAM, and bijorie identity marks toward the left. Store links and compact brand-specific social rows occupy the right. Utility navigation appears below the left brand area, and a thin rule separates the copyright line near the bottom. A vertical `PAGE TOP` treatment sits at the far right. Mobile becomes a centered stack: upward arrow, brand marks, a store-link band between fine rules, BAYFLOW social links, HEREIAM, bijorie, and copyright. The desktop utility navigation is absent from the supplied mobile capture and link list. Do not invent a mobile drawer to account for it. Measured social-link boxes are 25 × 25px. Those are observed dimensions, not recommended touch-target sizes. The original footer displays `Copyright © Adastria Co., Ltd. All rights reserved.` and links to the corporate privacy page. No production-credit names are supplied by the inspected original-page evidence. ## Tokens — Motion & Interaction | Element | Supplied evidence | What remains unverified | | --- | --- | --- | | Introductory heading and narrative | `0.7s cubic-bezier(0, 0, 0.25, 1) forwards jsUpShow` | Keyframes, travel distance, opacity endpoints, trigger, and repeat behavior | | Desktop episode and product links | `opacity 0.2s linear` transition | Hover opacity endpoint and exercised hover appearance | | Desktop footer links | `0.25s cubic-bezier(0, 0, 0.25, 1)` transition | Animated property and state endpoints | | Mobile links | Computed transition sample reads `all` | No meaningful duration or visible state change is established | | Hero media | Different captured scenes; media-focused presentation | Autoplay, looping, muting, playback controls, resource type, and timing | | FULL MOVIE / PLAY | Labels present in rendered DOM | Playback result and player or modal behavior | | Episode navigation | Five concrete episode URLs | Destination-page layout and loading behavior | | PAGE TOP | Anchor points to the same page's `#TOP` fragment | Smooth scrolling and duration | | Photographic strip | Cropped horizontal image band | Automatic motion, dragging, snapping, or carousel controls | The named reveal animation suggests an upward reveal, but its name is not a substitute for measured keyframes. If adapting it, the measured 700ms easing can be reused; any chosen translation distance must be identified as a new implementation value. The inspection procedure waited for finite animations and sampled layout stability, temporarily pausing perpetual animations during readiness checks. This helps explain why the captures show settled compositions, but it does not verify the complete animation experience or every interactive state. ## Surfaces | Layer | Appearance | Purpose | | --- | --- | --- | | Campaign canvas | Flat muted beige | Unifies the story, episodes, and closing identity | | Hero window | Organic clipped photographic media | Primary visual impact | | Episode poster | Photography with a sharp dark frame | Story navigation | | Action stamp | Flat orange with white lettering | Small, recognizable directional accent | | Information field | Slightly darker taupe with a curved lower edge | Groups café and novelty details | | Product artwork | Image-led content; complete treatment not captured | Merchandise presentation | | Shared footer | White, black marks, fine gray rules | Brand and utility navigation | There is no general elevated-card system in the visible design. Plate shadows are localized image styling; they should not become a global CSS shadow token. ## Imagery Use warm lifestyle photography with real people, café interiors, shopfronts, food, shelves, and branded objects. The observed grading favors amber highlights, subdued neutral clothing, deep interior shadows, and occasional saturated packaging. The imagery alternates between cinematic scenes and printed-poster compositions. Episode graphics integrate photographs with overlaid numbering and vertical text strips. The photographic band emphasizes texture and place. The novelty block uses large, overlapping product cutouts with hand-drawn annotation. Keep faces and featured objects clear of the hero's central notch. Mobile requires a deliberate crop, because the media extends beyond the viewport and the headline overlaps its lower region. Do not stretch photography to fit the mask. ### Observed Asset References No image, video, SVG, or font-file resource URLs were supplied. The following identifies visual assets without inventing source paths. | Asset | Evidence | Reuse requirement | | --- | --- | --- | | Campaign identity | Desktop and mobile opening captures | White desktop and black mobile treatments | | Hero media and organic mask | Desktop and mobile opening captures | Responsive subject placement and separate graphic clipping | | Multicolored headline | Desktop and mobile opening captures | Single-line desktop and two-line mobile compositions | | Orange seal and white downward mark | Opening captures | Preserve the serrated silhouette | | Final episode poster | Desktop middle capture | Preserve numbering, vertical copy, border, and attached action strip | | Shop image strip | Desktop middle capture | Maintain photographic continuity and sharp separators | | Orange and black plates | Desktop lower capture | Preserve overlapping composition and annotations | | Closing campaign sign and footer marks | Desktop and mobile lower captures | Use authorized brand artwork rather than approximated text | The CSS shell can reproduce spacing and composition. It cannot replace the identity carried by the campaign's photography, custom lettering, and brand graphics. ## Layout & Responsive Behavior ### Page Structure The measured document follows a continuous vertical flow: hero, gift introduction, full movie, episodes, photographic strip, merchandise, information, closing campaign identity, and footer. The content is not a fixed-height application shell. | Section start | Desktop document y | Mobile document y | | --- | --- | --- | | Gift introduction | `772.69px` | `468.97px` | | FULL MOVIE | `1129.81px` | `936.72px` | | EPISODE section | `1629.95px` | `1175.55px` | | Merchandise | `3631.95px` | `3975.02px` | | INFORMATION | `4972.13px` | `5354.55px` | | FOOTER element | `6590.58px` | `7692.48px` | These coordinates document the inspected state; they should not become hardcoded page offsets. Text wrapping, asset dimensions, and animation state can change downstream positions. ### Desktop The opening is nearly full width, while the story copy stays compact and centered. Episode link columns span 872px in total: 397px + 78px + 397px. The final entry is centered on the page rather than aligned with the first column. The photo strip breaks out of the centered content rhythm and reaches both viewport edges. Merchandise and information return to centered, narrower compositions. Footer identity and utility groups spread horizontally within broad outer margins. ### Mobile The hero changes hierarchy: centered black identity, oversized clipped media, two-line rainbow headline, then an independent orange seal. The introduction begins within the first viewport, but its prose continues beyond the bottom edge. Episode links use approximately 84.8% of viewport width and form one column. Merchandise groups stack while maintaining compact product captions. Detailed information paragraphs use approximately 89.3% of viewport width. The footer becomes a much taller, centered brand directory. The document grows from about 6895px on desktop to 8307px on mobile despite the smaller hero. Stacked episodes and information account for much of that increase. ### Breakpoint and Measurement Limits Only two viewport widths were supplied. The actual breakpoint, tablet layout, intermediate interpolation, orientation behavior, and maximum desktop content width are unverified. The CSS Quick Start uses a recommended 767px breakpoint and adapts the measured endpoint layouts. It is not a recovered source breakpoint. Some DOM wrapper bounds differ from visible descendant artwork, particularly in the hero and final episode poster; retain natural asset dimensions and verify the rendered composition. ## Do’s and Don’ts ### Do - Build the campaign around a quiet beige field with black editorial copy. - Concentrate the rainbow treatment in the display headline and branded imagery. - Preserve the broad, rounded heart-like mask and its shallow upper notch. - Recompose the mobile hero with centered identity and a two-line headline. - Keep Japanese narrative passages short, centered, and intentionally broken. - Use sharp photographic frames and small orange overlapping action tabs. - Center the fifth episode beneath the desktop pair of columns. - Let the photographic strip reach the viewport edges. - Separate the taupe information region from the white brand footer. - Preserve source artwork proportions and allow visible poster dimensions to govern link targets. ### Don't - Don't replace the opening silhouette with a circle, capsule, or pointed heart icon. - Don't apply multicolored letters to ordinary paragraphs or utility navigation. - Don't force every episode into a square based only on the desktop anchor rectangles. - Don't turn product captions into oversized purchase cards. - Don't infer a carousel from library variables or an autoplay policy from a screenshot. - Don't assign a guessed display font to the custom campaign lettering. - Don't introduce soft elevation shadows across the interface because the plate artwork has shadows. - Don't scale the entire desktop composition uniformly for mobile. - Don't assume that campaign offers or external product URLs remain commercially active. ## Recommended Implementation Additions These are recommendations for a new implementation, not verified features of the original: - Provide readable text alternatives for the graphic campaign identity and headline. Keep essential Japanese copy as real text where practical. - Give movie controls, social icons, and any clickable scroll cue explicit accessible names. - Use complete poster links with a visible keyboard focus ring; avoid nested interactive controls inside them. - Expand small social-link hit areas to at least 44 × 44px while retaining the compact visible icons. - Offer pause controls for continuously moving media and a static poster for reduced-motion preferences. - Keep body text black on beige. Do not rely on yellow or pale pink lettering for small functional text. - Preserve image aspect ratios, reserve loading space, and lazy-load below-the-fold imagery without hiding already available content behind reveal effects. - Test intended mobile line breaks with larger text settings and translated copy. - Validate product destinations and time-limited offer copy before publishing an adaptation. ## Agent Prompt Guide ### Quick Color Reference - Main campaign surface: approximately `#D1C1B6`. - Lower information surface: approximately `#BFAEA2`. - Text and rules: measured black `#000000`. - Secondary conditions: measured `#5B5B5B`. - Seal and episode action: approximately `#F17B2C`. - Hero lettering: separate pink, green, cyan, yellow, and orange fills. - Shared footer: white with black marks and thin gray separators. All chromatic values above are visual approximations. Match approved artwork or sampled source assets before treating them as production-exact colors. ### Overall Prompt “Create a responsive fashion and lifestyle campaign editorial for a gift collaboration. Use a muted beige canvas, black Japanese copy in Zen Kaku Gothic Antique, compact Poppins merchandise captions, and orange graphic stamps. Open with a broad, shallow heart-shaped media window with a rounded bottom, a small collaboration identity, and a multicolored custom headline. Follow with centered, phrase-broken introductory prose, a movie section, five photographic episode links, a full-width shop photo strip, merchandise references, and café information. Use two episode columns with the final entry centered on desktop, then one column on mobile. Recompose the mobile hero with black centered identity, oversized cropped media, and a two-line headline. Finish with a curved taupe section edge, a centered supermarket sign, and a white BAYFLOW-style brand footer. Keep artwork square-edged and avoid a general card-shadow system.” ### Example Component Prompts 1. **Hero:** “A warm beige opening with a near-full-width photographic window clipped into a broad organic heart. Place a white collaboration mark at the upper left and a single line of colorful custom lettering across the image. Overlap the lower edge with a small orange serrated disc containing a white downward mark. On mobile, center a black mark above the media and break the display headline into two lines.” 2. **Episode poster:** “A warm portrait photograph framed by a fine black border, a small white episode number in the upper left, and narrow white strips of vertical Japanese copy near the upper right. Attach a compact orange VIEW MORE + tab across the lower-right boundary. Use one complete link target and preserve the artwork's natural ratio.” 3. **Information promotion:** “A darker taupe field containing centered Japanese promotional copy beside overlapping orange and black plate cutouts. Add a small tilted orange badge, hand-drawn arrows, and angled color labels. Keep conditions readable in medium gray and end the section with a shallow, broad curve.” 4. **Mobile footer:** “A white centered footer with generous vertical spacing: upward arrow, the main brand and two sub-brand marks, a store-link row between thin gray rules, then separate social groups for each brand. Use small black icon artwork inside accessible touch areas and a centered copyright line.” ## Quick Start ### CSS Custom Properties This is a recommended implementation scaffold, not recovered source CSS. It uses measured typography at the two inspected widths, estimated palette colors, an approximate SVG clip path, and a conventional document root. Load authorized fonts and replace the placeholder artwork before evaluating visual fidelity. The episode styles deliberately retain natural image height rather than copying the questionable desktop square anchor bounds. The hero's 469px mobile composition approximates the measured introduction start at the inspected 390px width; test other widths and text settings separately. ```css :root { /* Visual estimates; replace with approved production colors. */ --surface-campaign: #d1c1b6; --surface-information: #bfaea2; --accent-orange: #f17b2c; --accent-sign: #ff5100; --accent-pink: #ef7db5; --accent-green: #22af7b; --accent-cyan: #1aaac4; --accent-yellow: #efe300; --color-rule: #d8d8d8; /* Measured rendered colors. */ --color-ink: #000; --color-muted: #5b5b5b; --surface-footer: #fff; /* Measured family declarations. */ --font-jp: 'Zen Kaku Gothic Antique', sans-serif; --font-product: Poppins, sans-serif; --font-utility: Helvetica, neue-haas-unica, sans-serif; --font-system: -apple-system, system-ui, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; --text-intro-title: 22px; --text-story: 14px; --leading-story: 1.79; --text-information: 14px; --text-product: 12px; --text-shop-link: 18px; --episode-width: 397px; --episode-column-gap: 78px; --episode-row-gap: 70px; --motion-link: 200ms linear; --motion-reveal: 700ms cubic-bezier(0, 0, 0.25, 1); } * { box-sizing: border-box; } body { margin: 0; } img, video { display: block; max-width: 100%; } .campaign { overflow-x: clip; color: var(--color-ink); background: var(--surface-campaign); font-family: var(--font-jp); } .campaign a { color: inherit; } .gift-hero { position: relative; height: 53.66vw; min-height: 520px; max-height: 850px; } .gift-brand { position: absolute; z-index: 2; top: 27px; left: 33px; width: 252px; margin: 0; } .gift-brand img, .hero-headline img { width: 100%; height: auto; } .hero-media { position: absolute; top: 30px; left: 4%; width: 92%; aspect-ratio: 2 / 1; overflow: hidden; clip-path: url(#gift-heart); } .hero-media > img, .hero-media > video { width: 100%; height: 100%; object-fit: cover; } .hero-headline { position: absolute; z-index: 1; top: 44%; left: 50%; width: 62.6%; margin: 0; transform: translate(-50%, -50%); } .scroll-seal { position: absolute; top: 45.1vw; left: 50%; display: grid; place-items: center; width: 76px; height: 76px; color: #fff; background: var(--accent-orange); transform: translateX(-50%); clip-path: polygon( 50% 0%, 58% 7%, 68% 3%, 72% 13%, 82% 12%, 84% 23%, 94% 26%, 91% 37%, 100% 44%, 94% 53%, 98% 64%, 88% 69%, 88% 80%, 77% 82%, 72% 93%, 61% 91%, 53% 100%, 44% 94%, 33% 98%, 28% 88%, 17% 88%, 15% 77%, 5% 72%, 8% 61%, 0% 52%, 7% 43%, 3% 32%, 13% 27%, 12% 16%, 23% 14%, 28% 4%, 39% 7% ); } .scroll-seal svg { width: 48%; height: 48%; } .story { text-align: center; } .story-title { margin: 0; font-size: var(--text-intro-title); font-weight: 700; line-height: 1.36; } .story-copy { max-width: 34em; margin: 28px auto 0; font-size: var(--text-story); font-weight: 500; line-height: var(--leading-story); } .story-copy p { margin: 0; } .story-copy p + p { margin-top: 1em; } .mobile-break { display: none; } .movie-section { margin-top: 45px; } .episode-section { padding-top: 83px; } .episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--episode-row-gap) var(--episode-column-gap); width: min(calc(100% - 60px), 872px); margin: 60px auto 0; } .episode-card { position: relative; display: block; min-width: 0; text-decoration: none; transition: opacity var(--motion-link); } .episode-card > img { width: 100%; height: auto; border: 2px solid var(--color-ink); } .episode-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--episode-column-gap)) / 2); } .episode-cta { position: absolute; right: -11px; bottom: -6px; display: grid; place-items: center; width: 178px; min-height: 44px; color: #fff; background: var(--accent-orange); font: 16px/1.2 sans-serif; } /* A static strip; carousel behavior was not verified. */ .photo-strip { display: flex; overflow: hidden; margin-block: 90px; border-block: 2px solid var(--color-ink); } .photo-strip img { flex: 0 0 auto; width: auto; max-width: none; height: 300px; border-right: 2px solid var(--color-ink); } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 50px; width: min(calc(100% - 42px), 850px); margin-inline: auto; } .product-caption { margin-top: 18px; text-align: center; font: 400 var(--text-product)/1.5 var(--font-product); } .shop-all { display: table; margin: 70px auto 0; font-size: var(--text-shop-link); font-weight: 700; line-height: 1.39; letter-spacing: -0.04em; } /* Approximate section silhouette and recommended grid. */ .information { margin-top: 100px; padding: 70px 24px 100px; background: var(--surface-information); border-radius: 0 0 48% 28% / 0 0 5% 3%; } .info-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 70px; max-width: 948px; margin-inline: auto; } .info-row + .info-row { margin-top: 90px; } .info-copy { font-size: var(--text-information); font-weight: 500; line-height: 1.64; } .info-note { color: var(--color-muted); } .campaign-sign { width: 215px; margin: 85px auto 80px; } .brand-footer { padding: 40px max(24px, calc((100vw - 1200px) / 2)) 24px; color: var(--color-ink); background: var(--surface-footer); font-family: var(--font-utility); } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; } .footer-rule { border-top: 1px solid var(--color-rule); } .footer-copyright { text-align: right; font-size: 12px; } /* Recommended states; the original opacity endpoint is unknown. */ @media (hover: hover) { .episode-card:hover { opacity: 0.8; } } .campaign :focus-visible, .brand-footer :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 5px; } /* Optional adaptation: 16px travel is not a measured source value. */ @keyframes gift-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .reveal.is-entering { animation: gift-reveal var(--motion-reveal) both; } /* Recommended breakpoint, not recovered from the source. */ @media (max-width: 767px) { :root { --text-intro-title: 19.76px; --text-story: 13.52px; --leading-story: 1.69; --text-information: 14.56px; --text-product: 12.48px; --text-shop-link: 18.72px; } .gift-hero { height: 469px; min-height: 0; max-height: none; } .gift-brand { top: 22px; left: 50%; width: 209px; transform: translateX(-50%); } .hero-media { top: 80px; left: 50%; width: 112.8%; transform: translateX(-50%); } .hero-headline { top: 272px; width: calc(100% - 44px); transform: translateX(-50%); } .scroll-seal { top: 387px; width: 54px; height: 54px; } .story-copy { max-width: calc(100% - 42px); margin-top: 16.63px; } .mobile-break { display: inline; } .movie-section { margin-top: 79px; } .episode-section { padding-top: 68.64px; } .episode-grid { grid-template-columns: 1fr; gap: 53px; width: 84.8%; } .episode-card:last-child:nth-child(odd) { grid-column: auto; width: 100%; } .product-grid { grid-template-columns: 1fr; } .information { margin-top: 78px; padding-inline: 20.8px; } .info-row { grid-template-columns: 1fr; gap: 35px; } .campaign-sign { width: 223px; margin-block: 48px 55px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-copyright { text-align: center; } } @media (prefers-reduced-motion: reduce) { .reveal.is-entering { animation: none; } .episode-card { transition: none; } } ``` ### Minimal Hero Markup The filenames below are replacement placeholders, not observed website asset paths. The SVG curve is an approximation of the captured silhouette. This example starts with a still poster; adding moving media requires separate playback and pause behavior. ```html

B SUPERMARKET — JACKSON MATISSE! × BAYFLOW

A shared moment in the campaign café

GIFTS ARE BEAUTIFUL.

ギフトを贈るっていいよね！ 👍

相手に何かを贈る時。

それはギフトを選ぶ時点で、
相手の顔や口癖や、
趣味嗜好が浮かんできて、
ひとりニヤリとしてしまう。

``` Supply the remaining campaign sections using the component anatomy above. The minimal markup demonstrates the opening only; it does not implement movie playback, external destinations, or the complete footer. ### Tailwind v4 Token Mapping Optional aliases for projects already using Tailwind v4. This does not imply that the original site uses Tailwind. Define the CSS custom properties above first. ```css @theme inline { --color-campaign: var(--surface-campaign); --color-information: var(--surface-information); --color-stamp: var(--accent-orange); --color-ink: #000; --color-note: #5b5b5b; --color-footer: #fff; --font-editorial: var(--font-jp); --font-merchandise: var(--font-product); --font-navigation: var(--font-utility); --text-intro: var(--text-intro-title); --text-narrative: var(--text-story); --text-detail: var(--text-information); --text-merchandise: var(--text-product); --spacing-episode: var(--episode-width); --spacing-episode-gap: var(--episode-column-gap); } ``` ## Sources & Evidence - [Original and final campaign page](https://www.bayflow.jp/topics/2202bsuper/): supplied HTTP 200 inspection, rendered text, link destinations, computed styles, element rectangles, and original-page captures. Retrieval timestamp: `2026-10-01T20:34:19.147Z`, equivalent to October 2, 2026, 05:34 JST. - **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; opening, final episode/photo strip, and lower promotion/footer captures. Measured document height: approximately 6894.58px. - **Mobile evidence:** 390 × 844 CSS-pixel viewport; opening and footer captures. Measured document height: approximately 8307.23px. - **Original-page navigation evidence:** episode links from [episode 5](https://www.bayflow.jp/topics/2202bsuper/episode5/) through [episode 1](https://www.bayflow.jp/topics/2202bsuper/episode1/), external product/store anchors, and the same-page `#TOP` destination. Destinations were recorded, not independently opened. - **Footer identity evidence:** the campaign's rendered copyright names Adastria Co., Ltd.; its privacy link points to [the corporate privacy page](https://www.adastria.co.jp/privacy/). No independently supported production credits were present. - **Inspection limits:** analysis used only the supplied evidence. No additional browsing, file access, pixel sampling, hover/click testing, video playback testing, or asset retrieval was performed. Full stylesheet rules, animation keyframes, media attributes, precise chromatic values, and intermediate responsive states were not supplied. Measured tokens, visual approximations, and recommended implementation choices are separated throughout. This document describes the current response at the inspected URL and does not reconstruct an earlier design.