# GREEN SPOON / DELI BENTO — Style Reference

> A warm deli counter becomes an immersive food story, with cream lettering, bold menu-like headings, and a monumental brand signature.

**Website:** [GREEN SPOON — DELI BENTO](https://green-spoon.jp/release/deli-bento)
**Original URL:** https://green-spoon.jp/release/deli-bento
**Final URL:** https://green-spoon.jp/release/deli-bento
**Theme:** dark photographic presentation and cream typography, followed by a solid cream footer; no theme selector was evidenced.
**Inspected:** September 12, 2026, at 13:18:10 UTC / 22:18:10 JST, according to the supplied browser record.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current product-release page, including its photographic opening, product story, purchase links, meal-component explanations, past event information, and global footer. Direct visual evidence covers the opening and footer; intermediate sections are documented through rendered text, element bounds, and computed styles.

The design makes prepared food feel inviting through close photographic crops, warm light, glazed ingredients, ceramic dishes, and a substantial wooden counter. Pale cream lettering sits over these scenes. The opening pairs a restrained GREEN SPOON wordmark with a much heavier DELICATESSEN / BENTO graphic whose dotted perimeter recalls decorative shop lettering.

The page has two distinct layout scales. Its photography fills the desktop viewport, while the measured main content occupies a centered 375px column. The global footer expands across the screen, organizing practical links above an enormous wordmark. On mobile, the main column fills the 390px viewport and the footer presents compact disclosure rows.

The current page still displays `2025.12.19 RELEASE`. Its event section explicitly says `イベントは終了しました`. These are current page contents; the ended event does not establish that the product page or business is discontinued.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and element rectangles. They describe the sampled state, including elements that may not be visibly painted.
- **Visual estimates** come from the supplied original-page screenshots. They are approximate and are labeled accordingly.
- **Derived** values are arithmetic relationships between measurements, such as the 1.04 scale difference between many mobile and desktop story tokens.
- **Recommendations** describe a reusable implementation. Proposed breakpoints, missing interaction behavior, accessibility additions, and fallback layouts are not claims about the original code.
- **Named tokens** are implementation aliases unless an original custom property is explicitly identified.
- The screenshots and DOM do not agree on every visible layer. In particular, the mobile screenshot omits a launch lockup that still has measured DOM bounds. Preserve that uncertainty rather than inventing a visibility rule.

## Tokens — Colors

### Core Palette

| Name | Value | Evidence / source token | Role |
| --- | --- | --- | --- |
| Deli Cream | `#e8ddaf` | Measured; `--deli-bento-teaser-color-key`, `--footer-background-color` | Story text, graphic lettering, event panel, and footer background |
| Footer Charcoal | `#252525` | Measured; `--primary-900`, `--footer-foreground-color` | Footer text, circular social backgrounds, and ended-event status fill |
| Action Butter | `#fffad4` | Measured CTA background and foreground | Filled existing-customer action and pale text of the second purchase action |
| Supporting Cream | `#ecdfb6` | Measured meal-description text | Slightly different cream used for the small MAIN, SIDE, and SALAD descriptions |
| Event Green | `#12714b` | Measured event-strip background | A concentrated green band carrying event date and location |
| Footer Hover Green | `#1f8d61` | Declared `--footer-hover-color` | Available footer interaction color; hovered screenshots were not supplied |
| Disclaimer Olive | `#b5ac89` | Measured disclaimer text | Small text over the opening photography |
| Base Off-white | `#fbfbf6` | Measured body background | Underlying site surface, largely covered in the supplied views |
| Story Black | `#000000` | Measured; `--deli-bento-teaser-color-foreground` | Dark text on light product-page elements |
| Base Text | `#1f1f1f` | Measured body color | General site default, distinct from footer charcoal |
| White | `#ffffff` | Measured | Closing tagline and text within the ended-event status |

### Photographic and Estimated Colors

The visible photography contributes amber, toasted brown, terracotta, olive, and nearly black shadows. These are image colors, not evidence of a corresponding set of CSS tokens.

The mobile closing area is a deep green-gray. Its background declaration was not included in the sampled elements. **`#252d28` is a visual approximation used in the Quick Start**, not an extracted source color.

Footer headings and legal text appear muted in the screenshots even where sampled anchor colors remain `#252525`. Ancestor opacity or other compositing was not supplied. Do not label a guessed opacity as an original value.

**Color hierarchy:** cream carries identity, charcoal provides utility contrast, and green is localized. The purchase fill is slightly brighter than the main cream. Keep that distinction when reproducing the actions.

## Tokens — Typography

### Riviera and Japanese Sans-serif — Body and Navigation

The measured desktop body stack is:

```css
Riviera, '游ゴシック体', YuGothic, '游ゴシック Medium',
'Yu Gothic Medium', '游ゴシック', sans-serif
```

The mobile body and footer insert `'Hiragino Kaku Gothic Pro'` after Riviera. The sampled mobile main content retains the other stack without that additional family.

These are declared family names. The evidence does not establish which fallback rendered each glyph or provide the font files. The visible result is a clean sans-serif interface, with heavier Japanese product statements and restrained navigation.

### Futura Display Declaration — English Product Hierarchy

**Measured family:** `futura-pt-bold, sans-serif`.

This family is declared on release dates, NEW PRODUCT, DELI BENTO, MAIN, SIDE, SALAD, and POP-UP EVENT headings. Most measured weights are `700`. The introductory DELI BENTO heading is an exception: its computed weight is `400` despite using the family named `futura-pt-bold`.

English category words are large, compact, and emphatic. Japanese support copy has more generous leading and tracking. Preserve that contrast instead of setting every element in one large display style.

### Wordmarks and Decorative Lettering

The GREEN SPOON wordmark has thin geometric strokes and distinctive connected circular forms. BENTO is a much heavier graphic with a dotted outline around its letter shapes. Neither should be reconstructed merely by applying a named body font.

The sampled H1 has no extracted text and measures `375 × 108px`. Its computed `28px` font size does not describe the visible BENTO lettering. The asset markup and font construction of that graphic were not provided.

### Type Scale

Values below are measured unless noted. Desktop values refer to the narrow story column, not necessarily every graphic visible in the desktop composite.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Hero Japanese introduction | `12 / 13.2px` | `12.48 / 13.728px` | `700` | `0.1em` |
| Hero release date | `18 / 25.2px` | `18.72 / 26.208px` | `700` | `0.1em` |
| NEW PRODUCT | `22 / 38px` | `22.88 / 39.52px` | `700` | `0.1em` |
| Introductory DELI BENTO | `46 / 64.619px` | `47.84 / 67.204px` | `400` | Normal |
| Story paragraphs | `15 / 28px` | `15.6 / 29.12px` | `700` | `1px` at both widths |
| WHAT IS A heading element | `24 / 31.304px` | `24 / 31.304px` | `700` | Normal |
| Main Japanese proposition | `28 / 44.8px` | `29.12 / 46.592px` | `700` | `0.1em` |
| Product-definition description | `15 / 27px` | `15.6 / 28.08px` | `400` | `0.1em` |
| MAIN / SIDE / SALAD | `74 / 81.4px` | `76.96 / 84.656px` | `700` | Normal |
| Meal-component Japanese heading | `24 / 38.4px` | `24.96 / 39.936px` | `700` | `0.04em` |
| Meal-component description | `13 / 26px` | `13.52 / 27.04px` | `400` | `0.06em` |
| POP-UP EVENT heading | `50 / 54px` | `52 / 56.16px` | `700` | Normal |
| Purchase and status labels | `14 / 23px` | `14.56 / 23.92px` | `700` | Normal |
| Closing tagline | `14 / 19.2px` | `14.56 / 19.968px` | `400` | `0.02em` |
| Footer destination links | `14 / 18.2px` | `14 / 18.2px` | `400` | Normal |
| Footer legal links | `11 / 17.6px` | `11 / 17.6px` | `400` | Normal |

A separate release-date element measures `15px` on desktop and `15.6px` on mobile, with `2px` tracking and black text. Its role in the visible sequence is unresolved. Do not assume that both date elements are simultaneously visible.

## Tokens — Spacing & Shapes

### Two Scaling Systems

Many story measurements increase by exactly `390 / 375 = 1.04` on mobile: `64 → 66.56px`, `56 → 58.24px`, and `74 → 76.96px`. The desktop story uses a 375px-wide basis, while the phone story is 390px wide.

This relationship is **derived from the two samples**, not an extracted CSS formula. It also has exceptions: the H1 stays 375px wide, purchase gutters stay 32px, story tracking stays 1px, and footer typography and social circles retain their pixel sizes.

### Spacing Scale

| Use | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Small heading gap | `8px` | `8.32px` | Measured within the product-definition heading |
| Disclaimer right inset | `16px` | `16.64px` | Measured padding |
| Disclaimer bottom inset | `14px` | `14.56px` | Measured padding |
| Definition-stage padding and gap | `32px` | `33.28px` | Measured |
| Story horizontal padding | `56px` | `58.24px` | Measured |
| Story paragraph separation | About `29.86px` | About `29.86px` | Derived from adjacent paragraph rectangles |
| Story section top padding | `64px` | `66.56px` | Measured |
| Purchase-group side inset | `32px` | `32px` | Derived from link bounds |
| Event section side padding | `29px` | `30.16px` | Measured |
| Event panel padding | `40px 24px 32px` | `41.6px 24.96px 33.28px` | Measured |
| Social icon gap | `24px` | `24px` | Derived from 40px circles spaced 64px apart |
| Footer padding | `96px 0 50px` | `48px 32px 64px` | Measured |

### Shapes

| Element | Evidence | Reusable treatment |
| --- | --- | --- |
| Hero and section surfaces | No visible rounded framing | Full-bleed or square-edged surfaces |
| Event information panel | Measured `0px` radius | Square corners |
| Purchase and event-status elements | Extremely large computed radii | Full pills; `9999px` is a practical equivalent |
| Social links | Measured `40 × 40px`, `50%` radius | Compact circles |
| Mobile footer separators | Thin horizontal rules visible | Use a 1px rule as an approximation |
| Closing checker trim | Approximately two rows of 12–13px cells | Crisp, square checks; no softened corners |

The design does not establish a general card-elevation system. Rounded forms are concentrated in actions and social icons; broad content regions remain unboxed.

### Layout Measurements

| Element | Desktop | Mobile | Evidence status |
| --- | --- | --- | --- |
| Main content | `375px`, starting at `x = 532.5px` | `390px`, starting at `x = 0` | Measured |
| Document height | `18,918.92px` | `16,291.55px` | Measured at capture time |
| Opening viewport-height region | `1000px` | `844px` | Measured disclaimer container and visual extent |
| H1 element | `375 × 108px` | `375 × 108px`, at `x = 7.5px` | Measured; not a complete visible-graphic measurement |
| Purchase link | `311 × 56px` | `326 × 58.23px` | Measured |
| Meal-description width | `263px` | About `273.53px` | Measured |
| Product-definition outer stage | `3500px` high | `2954px` high | Measured; both equal 3.5 viewport heights |
| Individual meal stage | `375 × 1000px` | `390 × 844px` | Measured |
| Event panel | `317 × 544px` | About `329.69 × 616.70px` | Measured |
| Footer | `1440 × 746.78px` | `390 × 675.27px` | Measured |
| Desktop footer content span | About `1100px` | — | Derived from outer content edges at x170 and x1270 |
| Mobile footer content width | — | `326px` | Derived from 32px side padding |

The large document heights and overlapping section rectangles indicate a staged presentation. They are not a recommendation to add equivalent empty spacers to a new page.

## Components

### Photographic Opening

**Role:** establish appetite, atmosphere, and product identity before the detailed story.

The visible anatomy is a full-width photographic field, a small centered GREEN SPOON mark near the top, and a cream launch graphic toward the lower center on desktop. The graphic stacks DELICATESSEN, the oversized BENTO lettering, and the release date.

Visual estimates at desktop place the small wordmark about 42px from the top and approximately 180px wide. The decorative BENTO word spans roughly 450px, and the full launch group occupies the lower quarter of the screenshot. These are screenshot estimates, not DOM dimensions.

On mobile, the wordmark is approximately 150px wide and begins about 35px from the top. The image fills the tall viewport with a much tighter crop of the dishes and counter. The disclaimer `※お店はイメージです` appears at the lower right.

The mobile screenshot does not show the launch lockup, even though the DOM contains the H1 and release-date elements within the opening viewport. The available evidence cannot distinguish responsive visibility, layering, or a timing-dependent state. A new implementation should keep essential product identity available without depending on an unverified reveal.

One desktop frame has a narrow black strip along its bottom edge; another does not. Treat this as an unresolved capture-state difference, not an established permanent design element.

### Small Brand Wordmark

**Role:** provide a quiet brand anchor over dominant imagery.

Use the original wordmark artwork when authorized. Its connected circular letterforms matter more than a generic thin sans-serif substitute. Keep the mark cream over the dark or photographic field.

The same centered mark is visible in the dark area above the footer in the desktop end capture. Its positioning mechanism was not supplied, so fixed or sticky behavior should not be asserted.

### Product Story

**Role:** connect the new meal format to the brand's promise of a satisfying everyday meal.

The DOM orders this section as NEW PRODUCT, DELI BENTO, five short Japanese text blocks, a repeated product/date statement, and two purchase routes. The text uses deliberate line breaks rather than long continuous paragraphs.

The paragraph box spans the story column with 56px desktop side padding, leaving 263px for text. Mobile padding becomes 58.24px. Use the measured `15px / 28px`, weight `700`, and `1px` tracking as the desktop basis.

The short paragraphs create pauses through their approximately 30px separation. Preserve the narrow measure and editorial pacing. Paragraph text alignment was not included in the supplied properties; the centered column should not be mistaken for proof of a particular `text-align` declaration.

### Purchase Route Pair

**Role:** distinguish existing customers from first-time purchasers.

Each route consists of an audience label followed by a full-width pill-shaped anchor. The measured links are stacked in the narrow column.

| Audience | Source UI label | Destination | Measured treatment |
| --- | --- | --- | --- |
| Existing account holders | `次回お届けに追加する` | `https://green-spoon.jp/my` | Black text on `#fffad4` |
| First-time customers | `購入する` | `https://green-spoon.jp/questions` | `#fffad4` text on a transparent background |

Desktop links measure `311 × 56px`; mobile links measure `326 × 58.23px`. Both use bold Japanese sans-serif labels. The second link's border properties were not included, so an outline cannot be stated as an observed feature.

The audience labels are supported by rendered text, but their typography was not separately measured. The destinations were extracted, not opened or transaction-tested.

### Product Definition Stage

**Role:** explain that one meal combines a main dish, side dish, and salad.

The hierarchy consists of a compact WHAT IS A / DELI BENTO heading, the larger Japanese proposition `ぜんぶ主役で、ぜんぶ美味しい。`, an intermediate visual area, and a three-line description.

The inner section has a viewport-height rectangle and uses approximately 32px padding and gaps at the desktop basis. The enclosing stage is 3.5 viewport heights in both samples.

The intervening visual content was not supplied as a screenshot or identifiable asset. Do not infer a particular meal illustration, exploded diagram, or product arrangement from the text alone.

### MAIN / SIDE / SALAD Stages

**Role:** give each part of the meal its own moment and explanation.

Each section follows the same measured anatomy:

1. An upper area before the title, whose imagery is not documented here.
2. A large English category word at `74px / 1.1` on desktop.
3. A two-line Japanese heading at `24px / 1.6`.
4. A narrow description at `13px / 2`, with `0.06em` tracking and supporting cream text.

The three categories have identical top coordinates in each DOM sample: approximately y5405 on desktop and y4751 on mobile. Their section transitions affect opacity over 450ms. This supports overlapping stage geometry rather than a simultaneous three-column card layout.

It does not prove the trigger sequence, scroll pinning implementation, or which section was visible at a particular moment. Preserve the repeated typographic anatomy while treating the sequencing implementation as unresolved.

### Event Strip and Information Panel

**Role:** retain information about the product's associated event while clearly communicating its ended status.

A green strip carries `POP-UP EVENT 2025.11.28-30 ＠LIFORK HARAJUKU`. Its measured background is `#12714b`; its English type uses the Futura declaration. Desktop vertical padding is 16px.

Below it, a two-line POP-UP EVENT heading precedes a square cream panel. The desktop outer section uses `64px 29px` padding. The panel uses `40px 24px 32px` padding and contains graphic/text regions whose artwork was not included in the evidence.

The bottom status element reads `イベントは終了しました`, with white text on charcoal and a full-pill shape. It is an anchor with an empty `href` in the supplied DOM. That is evidence of an ended-event label, not proof of a correctly disabled control.

For a new implementation, present this as noninteractive status text unless there is a meaningful destination.

### Closing Tagline and Checker Trim

**Role:** close the product story and introduce the site's practical navigation.

The mobile end capture shows a dark green-gray field with the centered white line `Vegetables by your side, Always.` Below it is a narrow cream-and-dark checker band, followed immediately by the cream footer.

The tagline is measured at `14.56px / 19.968px` on mobile. The checker cells are visually estimated at roughly 12–13px, arranged in two alternating rows. The pattern creates a small decorative boundary without introducing an illustration or a gradient.

The exact pattern implementation and its desktop placement were not provided.

### Desktop Footer

**Role:** provide global product, brand, store, support, and social navigation.

The footer is full width and independent of the 375px story column. Its content occupies an approximately 1100px centered span. Four navigation groups sit beside a social group:

- PRODUCT: six product-category links.
- ABOUT: OUR STORY, GREEN PROMISE, and NEWS.
- STORE: SUBSCRIPTION and GIFT.
- HELP: FAQ and CONTACT.
- FOLLOW US: Instagram, X, and LINE circles.

Measured group starts are x170, x407, x644, x881, and x1102. These establish the visual distribution but do not identify the original grid or flex declaration.

Links use `14px / 18.2px` type. The product-link rows begin 37px apart. The screenshot shows muted group headings, generous empty cream space, and no card containers.

A thin horizontal rule separates navigation from the legal row. Small legal links align left, while `© Greenspoon Inc.` sits at the right. The footer finishes with an almost viewport-wide GREEN SPOON wordmark. Its visible artwork is approximately 1350px wide in the 1440px screenshot; this is a visual estimate rather than a measured asset box.

### Mobile Footer Disclosures

**Role:** compress the same navigation into a readable phone footer.

The screenshot places FOLLOW US and its three circles first. PRODUCT, ABOUT, STORE, and HELP then appear as four collapsed rows, each with a right-aligned plus sign and a thin lower rule.

The rows occupy the 326px inner width and are approximately 59px high. The screenshot shows collapsed content, although the supplied DOM still reports descendant link rectangles. Element bounds alone therefore do not establish visibility, interactivity, or accessibility-tree exposure.

Opening, closing, keyboard behavior, and expansion animation were not exercised. A recommended implementation uses real disclosure buttons with explicit expanded state and controlled panels.

Legal links wrap into two rows. Copyright appears below them. The final wordmark fits the 326px content width, with substantial space above and approximately 64px footer padding below.

### Social Links

**Role:** provide compact, recognizable off-site destinations.

The three social links use charcoal circles measuring `40 × 40px`, spaced by 24px. Their symbols are pale and centered. The X symbol is visually current even though its extracted destination uses the `twitter.com` domain.

The sampled anchors have empty extracted text. Icon-only accessible names were not included in the evidence, so their presence or absence cannot be established from the dump.

## Tokens — Motion & Interaction

### Declared Motion

| Target | Measured declaration | What it establishes |
| --- | --- | --- |
| Hero text and graphic container | Opacity and transform, `0.9s cubic-bezier(.23, 1, .32, 1)` | A slow reveal-capable transition; initial and final transforms were not supplied |
| Hero release date | Same 900ms transition, `0.15s` delay | A delayed date treatment relative to other transitioning elements |
| Definition and event sections | Opacity and transform, `0.9s` with the same ease-out | Shared section transition language |
| MAIN / SIDE / SALAD sections | Opacity, `0.45s` with the same ease-out | Fade-capable overlapping stages |
| Purchase and event-status anchors | Transform, `0.3s` with the same ease-out | Transform feedback is defined; its trigger and amount are unverified |
| Footer destination links | Color, `0.15s linear` | Short color feedback |
| Social circles | Background, `0.15s linear` | Short background-color feedback |
| Footer legal links | Opacity, `0.15s linear` | Short opacity feedback |
| Unnamed event graphic container | Opacity `0.15s`; transform `0.45s cubic-bezier(.175, .885, .32, 1.275)`; both delayed `0.9s` | A delayed decoration transition with an overshooting transform curve |
| Mobile full-viewport section | Opacity, `0.7s ease-in` | A fade declaration; the section's function is unresolved |

The source also declares `--ease-in-out: cubic-bezier(.86, 0, .07, 1)`. A corresponding use was not established in the supplied samples.

### Evidence Limits

The two desktop opening captures show different photographic views while retaining the same graphic hierarchy. This is consistent with changing media, but no video element, media URL, playback duration, autoplay setting, looping rule, or audio behavior was supplied.

The long document and overlapping rectangles support a staged narrative. They do not establish scroll scrubbing, a specific pinning library, parallax distances, or mandatory scroll snapping.

Many sampled elements report `animation: none`; this does not rule out CSS transitions, JavaScript animation, or moving media. Similarly, a bare `transition: all` without a duration is not evidence of visible motion.

For reuse, keep the measured easing and duration hierarchy. Define actual reveal distances and triggers separately, and retain a readable static state when motion is unavailable.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Opening media | Full-bleed warm food photography | Appetite and atmosphere |
| Story presentation | Cream text over a dark or photographic setting | Focused product narrative; not every intermediate background was visually supplied |
| Purchase action | Bright pale fill with black text | Clear existing-customer route |
| Secondary purchase action | Transparent surface with pale text | Separate first-time route |
| Event strip | Saturated green with cream lettering | Date and location emphasis |
| Event panel | Square cream surface | Concentrated event information |
| Closing field | Deep green-gray with white tagline | Quiet transition into navigation |
| Footer | Solid cream, charcoal details, thin rules | Broad and practical navigation |

Depth comes primarily from the photographs. The documented UI does not need glossy gradients, floating cards, glass blur, or a shadow scale.

## Imagery

### Photographic Direction

Use the original-page opening captures as the authority: close views of prepared food on a wooden deli counter, ceramic serving dishes, warm reflections, green vegetables, and shallow depth of field. Some foreground dishes are intentionally soft while the counter and selected ingredients carry detail.

The warmth is photographic. Keep pale interface graphics relatively flat and clean rather than applying the same brown tint to every UI element.

Desktop composition spreads dishes across the width. Mobile uses a tall crop in which portions of bowls and the counter extend beyond the frame. A cover-style crop is a useful implementation recommendation, but the original media-fit declaration was not supplied.

The disclaimer explicitly identifies the shop scene as illustrative. Do not imply that this image documents a permanent retail location.

### Graphic Direction

The identity relies on three different graphic scales: a small fine-line brand wordmark, heavy decorative launch lettering, and an enormous fine-line footer wordmark. The BENTO dots follow the glyph boundaries; a dotted rectangular border around ordinary text would not reproduce the effect.

Use authorized vector or high-resolution assets for these marks. Photography should remain smoothly rendered; pixelated image rendering is inappropriate here.

### Observed Asset References

No original image, video, SVG, or font-file paths were included in the supplied evidence. The following table identifies visual roles without inventing filenames.

| Asset role | Evidence | Implementation implication |
| --- | --- | --- |
| Deli-counter imagery | Desktop and mobile opening screenshots | Supply authorized media and verify crops at both inspected ratios |
| Small GREEN SPOON mark | Opening screenshots and desktop end capture | Preserve the actual letterforms |
| DELICATESSEN / BENTO lockup | Desktop opening screenshots | Use graphic artwork for the dotted lettering |
| Large footer wordmark | Desktop and mobile footer screenshots | Scale artwork responsively without distortion |
| Instagram, X, and LINE symbols | Footer screenshots and extracted destinations | Use recognizable icons with accessible link names |
| Checker boundary | Mobile end screenshot | A small CSS pattern is a reasonable adaptation |
| Intermediate product and event graphics | Empty-text elements and layout gaps only | Their visual content remains unverified |

## Layout & Responsive Behavior

### Desktop: Wide Media, Narrow Narrative

At 1440px wide, the measured main is exactly 375px wide and horizontally centered. The hero photography nevertheless spans the full screenshot. A faithful implementation must distinguish the media stage from the text column rather than constrain both to the same width.

The footer returns to a broad layout. Its approximately 1100px content span and almost screen-wide wordmark are integral to that transition in scale.

### Mobile: Full-width Story, Stable Utilities

At 390px, the main occupies the viewport width. Many story sizes grow by 4% relative to their 375px desktop basis. Footer link sizes, 40px social circles, and 32px horizontal footer padding remain unchanged.

This is not a universal proportional resize: the H1 stays 375px wide and some heading sizes and tracking values are fixed. Model story scaling and global-footer sizing separately.

### Staged Geometry

The definition stage measures 3.5 viewport heights, while individual meal stages have viewport-height rectangles. Several sections overlap in the sampled layout, and a later text-empty section measures 7020px on desktop and approximately 5928.8px on mobile.

Those observations explain the unusually long document, but they do not expose its full choreography. Reconstruct content order and accessible reading behavior before adding pinning or overlapping transitions. A static fallback should place the material in normal document flow.

### Unresolved Responsive Details

- The exact breakpoint between footer columns and disclosure rows is unknown.
- The mobile launch-lockup visibility difference is unresolved.
- Intermediate viewport widths, landscape phones, zoomed text, and safe-area handling were not tested.
- Media focal-point rules and desktop-versus-mobile asset selection were not provided.
- The footer disclosure controls were not opened, and their hidden-state semantics remain unverified.

The Quick Start uses a **recommended 768px breakpoint** and an intermediate-width cap. These reproduce the two supplied endpoints approximately without claiming to recover the original responsive CSS.

## Do’s and Don’ts

### Do

- Separate the full-width photographic stage from the narrow story column.
- Keep `#e8ddaf` as the main identity color and preserve the brighter `#fffad4` action fill.
- Retain the distinction between fine-line brand artwork and heavy product lettering.
- Use large English meal-category words with smaller, generously led Japanese explanations.
- Preserve short story paragraphs, deliberate line breaks, and substantial vertical pauses.
- Keep purchase routes distinct through both audience labels and link text.
- Let the footer expand dramatically on desktop and become compact disclosure rows on mobile.
- Use the original current ended-event wording when reproducing that information.
- Keep media cropping responsive and verify text contrast against the actual frames.
- Label uncertain media, visibility, and scroll behavior explicitly.

### Don’t

- Do not stretch the measured story text across the entire desktop screen.
- Do not constrain the hero photography to the 375px text column.
- Do not replace the BENTO artwork with ordinary text inside a dotted box.
- Do not infer that the launch title should be permanently hidden on phones.
- Do not turn MAIN, SIDE, and SALAD into three simultaneously visible cards and call that the observed layout.
- Do not treat body off-white as the dominant visible page background.
- Do not round every panel or add decorative shadows to the footer.
- Do not invent image paths, video settings, animation libraries, or precise scroll triggers.
- Do not copy the document height into a stack of empty spacers.
- Do not present an ended-event label as an active registration action.

## Recommended Implementation Additions

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

- Provide a meaningful accessible H1 even when the visible title is supplied as artwork.
- Keep the product name and purchase routes available in the initial readable state, including on mobile and when scripts fail.
- Give each social anchor an accessible name and maintain a visible focus indicator.
- Use semantic disclosure buttons with `aria-expanded`, `aria-controls`, and correctly hidden panels. Keep desktop expanded-state semantics consistent with visible content.
- Present the ended event as status text or link to a meaningful archive; avoid an empty-href action.
- If the opening uses video, supply a useful poster and pause control when appropriate. Provide a static alternative for reduced-motion users.
- Review disclaimer and footer legal-text contrast at their small observed sizes, especially over changing media.
- Preserve essential content in ordinary reading order beneath any visually overlapping stages.
- Reserve media dimensions and load distant imagery selectively so the long story does not introduce avoidable layout shifts or excessive initial downloads.

## Agent Prompt Guide

### Quick Color Reference

- Main cream and footer: `#e8ddaf`.
- Footer ink and social-circle fill: `#252525`.
- Bright purchase fill: `#fffad4`.
- Small meal-description text: `#ecdfb6`.
- Event strip: `#12714b`.
- Available footer hover token: `#1f8d61`.
- Dark closing-field approximation: `#252d28`; this value is estimated.

### Overall Prompt

“Create a food-product release page inspired by the documented GREEN SPOON DELI BENTO design. Use warm, shallow-focus deli-counter photography across the viewport, a small centered cream brand mark, and an authorized decorative product lockup near the bottom of the opening. Keep the desktop story in a centered 375px column while allowing imagery and the footer to span the screen. Use Riviera-style declared body typography with Japanese sans-serif fallbacks, Futura-declared English headings, cream text, short Japanese paragraphs, and large MAIN / SIDE / SALAD chapter words. Add two audience-specific pill purchase routes. Finish with a cream footer containing four navigation groups, three charcoal social circles, and a very large brand wordmark. On mobile, use a full-width story and compact footer disclosures. Keep essential content readable without animation; treat unverified scroll choreography as a separate enhancement.”

### Example Component Prompts

1. **Opening:** “Compose a full-viewport food photograph with warm timber, ceramic serving dishes, shallow focus, and generous dark regions for cream lettering. Place a modest brand mark at the top center and supplied decorative launch artwork near the lower center. Use a tight portrait crop on mobile and keep the illustrative-shop disclaimer legible.”
2. **Story and purchase routes:** “Build a narrow product story with short Japanese paragraphs at a 15px / 28px desktop basis, bold weight, 1px tracking, and roughly 30px paragraph gaps. Follow it with audience labels and two stacked 56px-high pills: a bright cream existing-customer action and a pale-text first-time action.”
3. **Meal chapter:** “Create a centered meal-component section with a 74px Futura-declared English category title, a 24px Japanese heading, and a 263px-wide description at 13px / 26px. Keep the cream palette and avoid card framing. Preserve all chapters in readable order before adding any optional staged fades.”
4. **Footer:** “Use a cream full-width footer with a centered 1100px desktop content span, four navigation groups, and three 40px charcoal social circles with 24px gaps. Add a fine legal divider and oversized supplied brand artwork. At a recommended mobile breakpoint, place social links first and replace the columns with 59px disclosure rows inside 32px side padding.”
5. **Past event:** “Place a compact cream-on-green event strip above a two-line English heading and a square cream information panel. Use the confirmed event content and a charcoal pill-shaped ended-status label. Do not invent missing event artwork or offer registration for an ended event.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation, not recovered source CSS. It retains a conventional root font size and uses `--deli-u` to reproduce the measured story scaling at the two supplied widths. The 768px breakpoint, 420px intermediate cap, dark-field color, and rule opacity are recommendations.

Font declarations do not load font files. Supply licensed fonts and authorized media/wordmark assets separately. The CSS provides a readable static layout; it intentionally does not manufacture the unverified scroll sequence.

```css
:root {
  /* Measured colors */
  --deli-cream: #e8ddaf;
  --deli-ink: #252525;
  --deli-action: #fffad4;
  --deli-copy: #ecdfb6;
  --deli-event: #12714b;
  --deli-hover: #1f8d61;
  --deli-disclaimer: #b5ac89;
  --deli-base: #fbfbf6;

  /* Visual approximation and recommended divider */
  --deli-stage: #252d28;
  --deli-rule: rgb(37 37 37 / 28%);

  /* Declared source families; font files are not included */
  --deli-font-body: Riviera, '游ゴシック体', YuGothic,
    '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック',
    sans-serif;
  --deli-font-display: futura-pt-bold, sans-serif;

  /* Recommended interpolation; matches the 390px sample */
  --deli-story-width: min(100vw, 420px);
  --deli-u: min(calc(100vw / 375), 1.12px);
  --deli-story-inset: calc(56 * var(--deli-u));
  --deli-section-space: calc(64 * var(--deli-u));
  --deli-action-height: calc(56 * var(--deli-u));
  --deli-pill: 9999px;

  /* Measured easing and durations */
  --deli-ease-out: cubic-bezier(.23, 1, .32, 1);
  --deli-ease-back: cubic-bezier(.175, .885, .32, 1.275);
  --deli-reveal-duration: 900ms;
  --deli-stage-duration: 450ms;
  --deli-action-duration: 300ms;
  --deli-utility-duration: 150ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--deli-cream);
  background: var(--deli-stage);
  font-family: var(--deli-font-body);
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

/* Full-width visual stage, independent of the story width */
.deli-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--deli-stage);
}

.deli-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.deli-hero__media > :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Wordmark geometry is a screenshot-based approximation */
.deli-hero__brand {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 150px;
  transform: translateX(-50%);
}

.deli-hero__brand img,
.deli-hero__artwork img {
  width: 100%;
  height: auto;
}

/* Recommended readable state, including on mobile */
.deli-hero__lockup {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: min(375px, 100%);
  transform: translateX(-50%);
  text-align: center;
}

.deli-hero__artwork {
  margin: 0;
}

.deli-release {
  margin: calc(16 * var(--deli-u)) 0 0;
  font-family: var(--deli-font-display);
  font-size: calc(18 * var(--deli-u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.deli-hero__disclaimer {
  position: absolute;
  right: calc(16 * var(--deli-u));
  bottom: calc(14 * var(--deli-u));
  margin: 0;
  color: var(--deli-disclaimer);
  font-size: calc(12 * var(--deli-u));
  line-height: 1.8;
}

.deli-story {
  width: var(--deli-story-width);
  max-width: 100%;
  margin-inline: auto;
}

.deli-section {
  padding-block: var(--deli-section-space);
}

.deli-eyebrow {
  margin: 0;
  text-align: center;
  font-family: var(--deli-font-display);
  font-size: calc(22 * var(--deli-u));
  font-weight: 700;
  line-height: calc(38 * var(--deli-u));
  letter-spacing: .1em;
  text-transform: uppercase;
}

.deli-intro-title {
  margin: 0 0 calc(48 * var(--deli-u));
  text-align: center;
  font-family: var(--deli-font-display);
  font-size: calc(46 * var(--deli-u));
  font-weight: 400;
  line-height: 1.405;
}

.deli-story-copy {
  margin: 0 0 30px;
  padding-inline: var(--deli-story-inset);
  font-size: calc(15 * var(--deli-u));
  font-weight: 700;
  line-height: calc(28 * var(--deli-u));
  letter-spacing: 1px;
}

.deli-actions {
  display: grid;
  gap: 32px;
  margin-inline: 32px;
}

/* Audience-label sizing is recommended, not measured */
.deli-action-label {
  margin: 0 0 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.deli-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--deli-action-height);
  padding: 12px 16px;
  border: 0;
  border-radius: var(--deli-pill);
  color: #000;
  background: var(--deli-action);
  font-size: calc(14 * var(--deli-u));
  font-weight: 700;
  line-height: calc(23 * var(--deli-u));
  text-decoration: none;
  text-align: center;
  transition: transform var(--deli-action-duration)
    var(--deli-ease-out);
}

.deli-button--secondary {
  color: var(--deli-action);
  background: transparent;
  /* Recommended outline; original border was not supplied */
  border: 1px solid currentColor;
}

/* Normal-flow baseline for the three meal chapters */
.deli-meal {
  padding: var(--deli-section-space) var(--deli-story-inset);
}

.deli-meal__title {
  margin: 0;
  text-align: center;
  font-family: var(--deli-font-display);
  font-size: calc(74 * var(--deli-u));
  font-weight: 700;
  line-height: 1.1;
}

.deli-meal__heading {
  margin: calc(14 * var(--deli-u)) 0 0;
  text-align: center;
  font-size: calc(24 * var(--deli-u));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.deli-meal__copy {
  margin: calc(24 * var(--deli-u)) 0 0;
  color: var(--deli-copy);
  font-size: calc(13 * var(--deli-u));
  line-height: 2;
  letter-spacing: .06em;
}

.deli-event-strip {
  padding: calc(16 * var(--deli-u)) 0;
  color: var(--deli-cream);
  background: var(--deli-event);
  text-align: center;
  font-family: var(--deli-font-display);
  font-size: calc(14 * var(--deli-u));
  font-weight: 700;
}

.deli-event {
  padding: var(--deli-section-space) calc(29 * var(--deli-u));
}

.deli-event__title {
  margin: 0 0 calc(56 * var(--deli-u));
  font-family: var(--deli-font-display);
  font-size: calc(50 * var(--deli-u));
  font-weight: 700;
  line-height: 1.08;
}

.deli-event__panel {
  padding: calc(40 * var(--deli-u)) calc(24 * var(--deli-u))
    calc(32 * var(--deli-u));
  color: #000;
  background: var(--deli-cream);
}

/* Apply to noninteractive ended-event status text */
.deli-event__status {
  display: grid;
  place-items: center;
  min-height: var(--deli-action-height);
  margin: 24px 0 0;
  padding: 12px;
  border-radius: var(--deli-pill);
  color: #fff;
  background: var(--deli-ink);
  font-size: calc(14 * var(--deli-u));
  font-weight: 700;
  text-align: center;
}

.deli-closing {
  padding: 64px 24px 36px;
  color: #fff;
  background: var(--deli-stage);
  text-align: center;
  font-size: calc(14 * var(--deli-u));
  line-height: 1.3714;
  letter-spacing: .02em;
}

/* Pattern dimensions are visual approximations */
.deli-checker {
  height: 25px;
  background: conic-gradient(
    var(--deli-cream) 25%, var(--deli-stage) 0 50%,
    var(--deli-cream) 0 75%, var(--deli-stage) 0
  ) 0 0 / 25px 25px;
}

.deli-footer {
  padding: 48px 32px 64px;
  color: var(--deli-ink);
  background: var(--deli-cream);
}

.deli-footer__inner {
  max-width: 1100px;
  margin-inline: auto;
}

.deli-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.deli-social {
  order: -1;
  margin-bottom: 32px;
  text-align: center;
}

.deli-social__title {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
}

.deli-social__links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.deli-social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--deli-cream);
  background: var(--deli-ink);
  transition: background var(--deli-utility-duration) linear;
}

.deli-social__link svg {
  width: 24px;
  height: 24px;
}

.deli-footer-group {
  border-bottom: 1px solid var(--deli-rule);
}

.deli-footer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 59.2px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 14px;
}

.deli-footer-toggle::after {
  content: '+';
}

.deli-footer-toggle[aria-expanded='true']::after {
  content: '−';
}

.deli-footer-panel {
  display: grid;
  gap: 14.8px;
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}

.deli-footer-panel[hidden] {
  display: none;
}

.deli-footer-panel a {
  color: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--deli-utility-duration) linear;
}

.deli-footer__meta {
  display: grid;
  gap: 32px;
  margin-top: 24px;
  font-size: 11px;
  line-height: 1.6;
}

.deli-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.deli-footer__legal a {
  color: inherit;
  text-decoration: none;
}

.deli-footer__copyright {
  margin: 0;
}

.deli-footer__mark {
  width: 100%;
  margin: 64px auto 0;
}

.deli-footer__mark img {
  width: 100%;
  height: auto;
}

/* Recommended focus treatment */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  .deli-social__link:hover {
    background: var(--deli-hover);
  }

  .deli-footer-panel a:hover {
    color: var(--deli-hover);
  }
}

/* Recommended breakpoint; original breakpoint is unknown */
@media (min-width: 768px) {
  :root {
    --deli-story-width: 375px;
    --deli-u: 1px;
  }

  .deli-hero__brand {
    top: 42px;
    width: 180px;
  }

  /* Visible-artwork estimate, distinct from the measured H1 */
  .deli-hero__lockup {
    width: 450px;
  }

  .deli-footer {
    padding: 96px 0 50px;
  }

  .deli-footer__inner {
    width: calc(100% - 64px);
  }

  .deli-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 168px;
    gap: 32px;
  }

  .deli-social {
    order: 0;
    margin-bottom: 0;
    text-align: left;
  }

  .deli-social__links {
    justify-content: flex-start;
  }

  .deli-footer-group {
    border: 0;
  }

  .deli-footer-toggle {
    min-height: 0;
    margin-bottom: 32px;
    font-size: 16px;
  }

  .deli-footer-toggle::after {
    content: none;
  }

  .deli-footer-panel {
    gap: 18.8px;
    padding: 0;
  }

  .deli-footer__meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--deli-rule);
  }

  .deli-footer__mark {
    width: calc(100% - 64px);
    margin-top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deli-button,
  .deli-social__link,
  .deli-footer-panel a {
    transition: none;
  }

  /* Recommended contract for any later reveal enhancement */
  [data-deli-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
```

**Markup and behavior contract:** place the hero outside the narrow `.deli-story` container. Supply wordmarks as images or inline SVGs with appropriate accessible text. Place the four footer groups and social group inside `.deli-footer__grid`; place the large footer mark after `.deli-footer__inner`. Each mobile disclosure button should control a uniquely identified panel. Application logic must synchronize `hidden` and `aria-expanded`, opening all groups for the desktop layout. CSS alone does not provide that behavior or pause video playback.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original page uses Tailwind.

```css
@theme inline {
  --color-deli-cream: var(--deli-cream);
  --color-deli-ink: var(--deli-ink);
  --color-deli-action: var(--deli-action);
  --color-deli-copy: var(--deli-copy);
  --color-deli-event: var(--deli-event);
  --color-deli-hover: var(--deli-hover);
  --color-deli-stage: var(--deli-stage);

  --font-deli-body: var(--deli-font-body);
  --font-deli-display: var(--deli-font-display);

  --text-deli-story: calc(15 * var(--deli-u));
  --text-deli-category: calc(74 * var(--deli-u));
  --text-deli-detail: calc(13 * var(--deli-u));

  --spacing-deli-section: var(--deli-section-space);
  --spacing-deli-inset: var(--deli-story-inset);
  --radius-deli-pill: var(--deli-pill);
}
```

## Sources & Evidence

- **Original and final website:** [GREEN SPOON — DELI BENTO](https://green-spoon.jp/release/deli-bento). The supplied browser record reports HTTP 200 and identical original/final URLs.
- **Capture record:** September 12, 2026, `13:18:10.211Z`, with desktop `1440 × 1000` and mobile `390 × 844` CSS-pixel viewports.
- **Original-page visual evidence:** two desktop opening frames, one desktop footer capture, one mobile opening capture, and one mobile footer capture. These support the photographic direction, visible lettering, footer arrangement, and responsive crop observations.
- **Rendered evidence:** page title and text, destination URLs, custom properties, font declarations, element rectangles, colors, padding, radii, and transition declarations at both viewports. Intermediate product and event sections are supported primarily by this evidence rather than direct screenshots.
- **Inspection procedure:** the supplied capture process waited for document readiness, image decoding, sampled layout stability, and finite animations within stated time limits. It traversed intermediate scroll positions. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** the supplied record does not establish complete delayed content, original asset paths, loaded font-file identities, video playback settings, precise scroll choreography, clicked purchase destinations, footer expansion behavior, or keyboard interaction. Some DOM elements have bounds despite not appearing in the corresponding screenshot.

This reference describes the current page as captured. Measured declarations, screenshot estimates, and implementation recommendations remain distinct throughout.