# Budou no Onepiece — Style Reference

> A harvest story in plum ink, warm beige, and generous white space.

**Original URL:** [budou-no-onepiece.com](https://budou-no-onepiece.com/)
**Final URL:** [budou-no-onepiece.com](https://budou-no-onepiece.com/)
**Theme:** light, with a beige opening, white editorial content, a pale gray news section, and a plum footer.
**Inspected:** September 12, 2026, from the supplied browser evidence captured at `2026-09-12T14:41:54.235Z` — 23:41:54 JST.
**Viewports:** desktop `1440 × 1000`; mobile `390 × 844`, in CSS pixels.
**Scope:** the current shop home page: opening illustration, brand story, three products, About, production process, features, news, six member profiles, and footer. Product destinations, account, cart, external sites, and the opened mobile menu were not inspected.

Budou no Onepiece presents a food brand built around the reuse of grape skins from winemaking. Its home page combines a long editorial story with product links and a directory of the people involved. Plum text connects the identity, navigation, illustrations, and footer. White space and carefully paced Japanese text give the story room, while food photography and outdoor portraits bring natural color into the restrained interface.

The opening desktop view is dominated by three illustrated harvest figures on beige. A tall brand lockup remains at the upper left, with small shopping utilities at the upper right. Further down, the layout becomes a white editorial canvas with centered English section headings, wide images, narrow passages of Japanese copy, and understated text links. Desktop product and member sections use three columns, but their mobile transformations differ: products become full-width vertical entries, while member profiles become compact portrait-and-text rows.

## How to Read This Reference

- **Measured values** come from the supplied rendered DOM, computed styles, and element rectangles. Measurements are rounded where subpixel precision would not help implementation.
- **Visual observations** come from the five supplied original-page captures: three desktop views and two mobile views. These directly show the opening, part of About, and the lower member/footer regions.
- **Estimates** are explicitly marked. The beige hero color, tan rules, and some icon dimensions were visually estimated; their exact computed colors or geometry were not supplied.
- **Recommendations** describe a new implementation. The CSS breakpoint, mobile artwork fallback, focus treatments, and mobile logo adjustment below are recommendations rather than recovered source behavior.
- **DOM presence does not establish visibility.** Several navigation links have measured boxes but are absent from the screenshots or positioned offscreen.
- **Named tokens** are implementation aliases unless identified as source custom properties. The original root is `10px`; the Quick Start uses explicit pixel measurements without changing the application's root size.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Plum Ink | `#69285A` | `--color-ink` | Measured `rgb(105, 40, 90)`. Body text, headings, links, and footer background; visually also the identity and illustration ink. |
| Harvest Beige | approximately `#D7C7AD` | `--color-paper` | Visual estimate from the current opening captures. Full opening background and negative space within the desktop illustration. |
| White Canvas | `#FFFFFF` | `--color-canvas` | Measured body background. Product, About, process, and member sections sit on this white canvas. |
| Footer Cream | `#F4EBCE` | `--color-reverse` | Measured footer navigation color, `rgb(244, 235, 206)`. The visible social marks use a similar light treatment. |
| News Mist | `#F9F9F9` | `--color-muted-surface` | Measured background of the full-width news section. |
| Fine Tan Rule | approximately `#D9BE9B` | `--color-rule` | Visual estimate for the thin rules beneath member links and across the About area. |
| Muted Footer Text | `rgba(244, 235, 206, 0.6)` | `--color-reverse-muted` | Measured copyright color over the plum footer. |

The main brand color is also exposed through source properties such as `--color-button: 105,40,90`, `--color-secondary-button-text: 105,40,90`, and `--jdgm-primary-color: #69285A`. These reinforce the measured plum value, but the presence of commerce and review variables does not prove that their corresponding widgets appear on this home page.

Keep the beige opening distinct from the white reading sections. The photographic reds, greens, and skin tones belong to the images; they do not form a second interface accent system.

### Color Application

| Context | Surface | Foreground | Treatment |
| --- | --- | --- | --- |
| Opening | Estimated beige | Plum | Large illustration, vertical identity, small outline utilities |
| Story and About | White | Plum | Long lines of Japanese text and restrained separators |
| Products and members | White | Plum | Open layouts without filled card backgrounds |
| News | `#F9F9F9` | Plum | A subtle full-width change in surface |
| Footer | Plum | Cream | A single strong inversion at the bottom of the document |

## Tokens — Typography

### Japanese Editorial Text

**Measured family:** `YakuHanMP, ryo-text-plusn, serif`.

This stack appears on Japanese paragraphs, product names, process headings, and member names. Most content uses weight `500`, despite the body's inherited weight being `400`. The visual result is a fine Mincho-style texture with generous leading, suitable for the agricultural story and the quiet product presentation.

YakuHanMP is part of the declared punctuation stack; it should not be treated as the principal text face. The computed family is stronger evidence than the raw `--font-body-family` custom-property string, which includes an extra `font-family:` prefix in the supplied dump.

### English Display Labels

**Measured family:** `YakuHanJP, tenez, sans-serif`.

Used for `PRODUCTS`, `ABOUT`, `NEWS`, `MEMBER`, `SCROLL`, `VIEW MORE`, `WEB SITE`, and primary footer navigation. The visible lettering is delicate and serif-like, with uppercase forms and modest tracking. Preserve the observed family distinction even though the source's final fallback is `sans-serif`.

### Member Metadata

**Measured family:** `ryo-gothic-plusn, sans-serif`.

Organization names and project roles use smaller Gothic text below the Mincho member names. This is a deliberate hierarchy: expressive names, practical affiliation and role labels, then an English display link.

### Utility Text

**Measured family:** `mr-eaves-modern, sans-serif`.

Used for secondary footer navigation, copyright, and the offscreen `LOGIN` label. Keep utility text subordinate to the display navigation.

### Graphic Lettering

The brand lockup contains a plum symbol above two vertical columns spelling `ぶどうのワンピース`. Its sampled `H1` has no text content, so the ordinary `10px` heading style does not describe the visible lettering. Treat the lockup as supplied artwork unless an independently verified text implementation is available.

The About screenshot also shows the vertical title `ぶどうのワンピースとは？`. Its visual scale can be estimated, but no corresponding live-text font measurement was supplied.

### Type Scale

Values below are measured computed styles unless marked as estimates. Size and line height are in pixels.

| Role | Desktop size / leading | Mobile size / leading | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Root | `10 / 10` | `10 / 10` | `400` | Normal |
| Main English section heading | `40 / 52` | `28 / 36.4` | `400` | `1px` / `0.7px` |
| Introductory story | `18 / 40.5` | `14 / 28` | `500` | `0.45px` / `0.35px` |
| About paragraph | `18 / 40` | `16 / 32` | `500` | `0.45px` / `0.16px` |
| Product title | `20 / 35` | `22 / 38` | `500` | `0.5px` / `0.66px` |
| Product description | `14 / 28` | `13 / 26` | `500` | `0.35px` / `0.13px` |
| Product `VIEW MORE` | `20 / 40` | `20 / 30` | `400` | `0.5px` |
| Process step heading | `22 / 38.5` | `20 / 38` | `500` | `0.55px` / `0.5px` |
| Process paragraph | `16 / 32` | `14 / 28` | `500` | `0.48px` / `0.14px` |
| News title | `20 / 36` | `18 / 32.4` | `500` | `0.5px` / `0.45px` |
| News `VIEW MORE` | `18 / 36` | `16 / 24` | `400` | `0.45px` / `0.4px` |
| Member name | `22.5 / 39.375` | `16 / 24` | `500` | `0.5625px` / `0.16px` |
| Member organization and role | `13 / 26` | `12 / 24` | `400` | `1.3px` / `0.6px` |
| Member `WEB SITE` | `18 / 36` | `16 / 24` | `400` | `0.9px` / `0.8px` |
| Primary footer navigation | `20 / 40` | `18 / 30.6` | `400` | `0.5px` / `0.45px` |
| Secondary footer navigation | `16 / 32` | `14 / 23.8` | `400` | `0.4px` / `0.35px` |
| Copyright | `14 / 28` | `12 / 24` | `400` | Normal |
| `SCROLL` | `24 / 24` | `20 / 20` | `400` | `1.2px` / `1px` |
| Vertical About title | Approximately `36–40px` | Not visually established | Unverified | Unverified |

The mobile product title grows from `20px` to `22px`, even while its description becomes smaller. A blanket proportional reduction would miss this hierarchy.

Font-family declarations were supplied, but individual font files and glyph-level fallback behavior were not independently verified.

## Tokens — Spacing & Shapes

**Density:** broad section spacing around relatively small text and controls.
**Structural language:** square media, circular portraits, fine rules, and open white space.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `10029px` | Approximately `9383px` | Rendered document measurement |
| Main content width | `1100px`, starting at `x = 170` | `340px`, starting at `x = 25` | Repeated content rectangles |
| Narrow news/content width | `910px`, starting at `x = 265` | `340px`, starting at `x = 25` | News text and section geometry |
| Introductory paragraph box | Approximately `585px`, including `43.2px` left padding | `260px`, with `65px` outer margins | Computed paragraph rectangle |
| About paragraph box | Approximately `579px`, including `72px` left padding | `340px`, no left padding | Computed paragraph rectangle |
| Product media link | Approximately `339.63 × 340.63px` | `340 × 340px` | Link boxes; intrinsic image dimensions were not supplied |
| Product column gap | `40px` | Single column | Calculated from neighboring boxes |
| Member column width | Approximately `339.63px` | Full `340px` row | Measured content boxes |
| Member portrait link | Approximately `298.86 × 298.86px` | Approximately `113.89 × 113.89px` | Measured links; circular crop visible in captures |
| Mobile portrait-to-text gap | Not applicable | Approximately `15.31px` | Calculated from image and text positions |
| Mobile member text width | Not applicable | Approximately `210.80px` | Measured rectangle |
| Brand lockup box | `165.75 × 389.88px`, at approximately `(38, 36)` | `85 × 199.92px`, at approximately `(17, 17)` | Measured `H1` rectangle |
| Footer height | `254px` | `332px` | Measured footer rectangle |

The source exposes `--page-width: 120rem`, equal to `1200px` at its measured root size. The visible custom home-page content repeatedly measures `1100px`. Use the actual content geometry for this page instead of applying the generic theme width everywhere.

### Spacing Scale

| Use | Desktop | Mobile |
| --- | --- | --- |
| Products and About top padding | `160px` | `100px` |
| Products heading box to first media box | Approximately `82px` | `48px` |
| Product media to title | Approximately `26.6px` | Approximately `15.4px` |
| Product title box to description | `18px` | `11px` |
| Product description to link | `25px` | `25px` |
| Product link bottom to next product image | Not applicable | `64px` |
| News vertical padding | `96px` | `80px` |
| Member section top / bottom padding | `120px / 160px` | `96px / 100px` |
| Member heading box to first portrait | `106px` | `48px` |
| Member portrait to name | Approximately `20px` | Text starts beside the portrait |
| Member role to website link | `10px` | `5px` |
| Successive member portrait start positions | Approximately `547.36px` between grid rows | Approximately `181.89px` between list rows |
| Footer top / bottom padding | `30px / 40px` | `30px / 32px` |

These measurements do not establish a universal spacing formula. The site mixes explicit section padding, typographic leading, and component-specific gaps.

### Border Radius and Rules

| Element | Treatment | Status |
| --- | --- | --- |
| Product media links and content boxes | Square, `0px` radius on sampled elements | Measured |
| Member portraits | Circular crop | Visually observed |
| Link arrow badges | Small filled plum circles with light chevrons | Visually observed; approximately `16–18px` |
| Scroll arrow | Fine outlined circle | Visually observed; approximately `30px` desktop and `24px` mobile |
| Mobile member separators | Fine plum dotted rules across the row | Visually observed |
| About divider and member-link underline | Fine tan line, approximately `1px` | Visual estimate |
| General shadows | No visible card elevation in supplied views | Visual observation; multiple source shadow opacities also equal zero |

Generic source variables include `6px` button/input radii and a `7px` skip-link radius. They should not be applied to every home-page component: the visible product and member layouts do not use rounded card shells.

## Components

### Persistent Brand Lockup

**Role:** a recognizable identity anchor throughout the page.

The mark combines a radial cluster of curved grape- or petal-like shapes with two slender vertical columns of Japanese lettering below. On desktop, the symbol is approximately as wide as the `165.75px` lockup, while the lettering occupies a much narrower central area. The complete measured box is nearly `390px` tall.

The mobile lockup is about half the desktop scale: `85px` wide and `200px` tall. The symbol begins `17px` from both top and left.

The lockup remains in the same upper-left region in the opening and lower-page captures, strongly indicating persistent positioning. The supplied computed-style fields do not include `position`, so the exact positioning rule is not directly measured.

**Observed limitation:** in the mobile member capture, the persistent lettering overlaps a portrait and nearby content. Document this collision as part of the current state. A new implementation should reserve space, shorten the persistent lockup, or make it scroll away on narrow screens.

### Header Utilities and Navigation

**Role:** quiet access to shopping and page navigation.

Desktop captures show small plum outline account and shopping-bag symbols at the upper right. Mobile shows the bag and a three-line menu icon. There is no filled header bar behind them in the supplied opening views.

The DOM confirms `/account` and `/cart` links. Their measured inline anchor rectangles include `44px` widths but only `10px` line-box heights; this is not a reliable measurement of the complete icon or touch target.

Desktop navigation labels exist in the DOM at `20px / 20px`, but they are not visibly presented across the supplied desktop screenshots. Do not automatically render a prominent horizontal navigation bar from their text presence alone.

The mobile navigation content is positioned offscreen in the supplied state. Its links measure `24px / 48px`, with a `350px` width, and include `TOP`, `PRODUCTS`, `ABOUT`, `NEWS`, and `MEMBER`. An offscreen `LOGIN` link is also present. Menu opening, closing, focus handling, and animation were not tested.

### Opening Illustration

**Role:** communicates the brand's agricultural and handmade character before the product catalog.

The desktop opening fills the `1440 × 1000` capture with warm beige. Three large harvest figures occupy most of the central width. They carry baskets of grapes and wear voluminous plum garments with pale sleeves. Fine irregular outlines, woven basket detail, grain within the clothing, and circular hair forms give the artwork its character.

The figures read as a broad composition with generous beige negative space. Preserve their full bodies and the differences between their poses when recreating this desktop arrangement. Avoid replacing the composition with isolated stock icons.

The supplied mobile opening shows beige, the brand lockup, bag/menu controls, and the scroll cue, but no visible hero figures. The evidence does not establish whether this is intentional responsive behavior, delayed rendering, a hidden asset, or another runtime condition. It also does not establish a hero animation sequence.

**Recommended addition:** provide a stable mobile poster or static illustration fallback, with reserved image dimensions and visible content available independently of animation startup.

### Scroll Cue

**Role:** invites movement from the opening to the brand story.

The `SCROLL` link targets `#unk_message`. On desktop it appears vertically near the lower-right edge, with an outlined circular down arrow below. Its text measures `24px` with `1.2px` tracking; the sampled text box begins at approximately `x = 1370`, `y = 819`.

On mobile the label becomes horizontal and centered near the bottom. Its measured text box is approximately `79.25 × 20px`, at `x = 155.38`, `y = 757.6`. The small circle sits below it in the screenshot.

Keep this as a light typographic cue rather than a large filled CTA. The anchor destination is verified; a particular scrolling animation is not.

### Introductory Story

**Role:** introduces the place, the discarded grape skins, and the people connected by the product.

The DOM records a substantial Japanese narrative before `PRODUCTS`. Desktop text uses `18px` type with `40.5px` leading. Its paragraph box contains left padding and leaves a separate area for a heading graphic.

Mobile uses a narrower `260px` paragraph inside the otherwise `340px` content system. Text is `14px / 28px` and breaks into shorter phrases. The opening heading occupies a wider, shorter box on mobile than on desktop, but its visual content was not included in the supplied screenshots.

Preserve the paced narrative rhythm and distinct narrow measure. Do not impose the same width and typography as the product descriptions.

### Product Entry

**Role:** connects the brand story to three purchasable or related products.

The observed entries are `塩山グラノーラ`, `ぶどうのワンピース`, and `おつまみレーズンサンド`.

Each entry contains:

1. A linked, approximately square media area.
2. A Japanese product title.
3. A short Japanese description.
4. A separate `VIEW MORE` link.

Desktop uses three approximately `340px` columns with `40px` gaps. All three description boxes measure `112px` tall, aligning the link row despite different amounts of text. The exact source rule producing that alignment was not supplied.

Mobile stacks the entries while retaining `340px` square media. Titles increase to `22px`; descriptions become `13px / 26px`. Description heights become content-dependent, and there is a measured `64px` interval between a link's bottom and the next product image.

The first two entries link to product pages on this domain. The third links to a related external product site. No prices, variant selectors, ratings, or inline add-to-cart controls appear in the supplied home-page text.

### Text Link with Circular Arrow

**Role:** a reusable low-emphasis navigation action.

The member screenshots show uppercase `WEB SITE` in the English display face, followed by a small filled plum circle containing a light right-pointing chevron. A thin tan rule runs under the combined label and icon.

Desktop member links measure approximately `111.5 × 37px`, with `18px / 36px` text. Mobile links measure approximately `99.1 × 25px`, with `16px / 24px` text.

The DOM confirms related `VIEW MORE` link typography for products and news, but their complete visual arrow treatment is not separately shown in the supplied captures. Reusing the observed member-link anatomy for those links is a reasonable implementation recommendation, not an independently verified visual detail.

### About Image and Text Composition

**Role:** explains the material through an appetizing photograph and a clear editorial passage.

The desktop capture shows a large centered photograph extending from approximately `x = 170` to `x = 1270`. It contains candied grape material on a white plate, a spoon, pale cloth, strong sunlight, and distinct shadows. The photograph's upper portion is outside the capture, so the visible `523px` height is not its complete displayed height or native aspect ratio.

Below the image, the vertical title `ぶどうのワンピースとは？` begins above the photo's lower edge and extends into the white section. The paragraph sits to its right. Its measured box begins at approximately `x = 478`, includes `72px` left padding, and therefore starts painting text at approximately `x = 550`.

The paragraph uses `18px / 40px`. A fine tan rule spans a narrower approximately `910px` region below the composition.

Mobile DOM measurements show the paragraph expanding to the full `340px` content width, with no left padding and `16px / 32px` text. The mobile image crop and title arrangement were not visually supplied.

### Production Process

**Role:** makes the transformation from grapes to food understandable.

The DOM records `HOW IT'S MADE` and four numbered steps:

1. Grape harvesting.
2. Winemaking.
3. Purchasing and processing wine pomace.
4. Candying it in sugar.

Desktop step headings and paragraphs occupy a consistent right-side text column, starting near `x = 693` and measuring about `434px` wide. Headings use `22px` type; paragraphs use `16px / 32px`.

On mobile, each text block starts at `x = 25` and spans `340px`. Successive step headings are approximately `402px` apart. The geometry indicates a substantial presentation area around each step, but the supplied evidence does not reveal the associated media assets or exact arrangement.

**Recommended implementation:** use an ordered list with a media region and text region per step. A desktop media/text pair that stacks on mobile is compatible with the measured text placement, but the media treatment must be chosen or verified separately.

### Features

**Role:** summarizes three product characteristics after the process explanation.

The supplied text records three statements concerning the source material, manual production, and polyphenol intake. The `FEATURES` heading is paired with a Japanese subtitle. On mobile, the first and third statements include shorter line breaks.

The visual presentation of these statements was not captured, and their individual rectangles were not supplied. Do not claim icons, illustrated badges, cards, or a specific column count. For a new implementation, a restrained three-item list would fit the established hierarchy.

### News Section

**Role:** provides a dated update within the brand page.

A full-width `#F9F9F9` surface separates this section from the surrounding white page. Desktop padding is `96px` above and below; mobile uses `80px`.

The centered `NEWS` heading precedes a single recorded item dated `2024.05.11`, a Japanese title, a brief description, and `VIEW MORE`. Desktop content occupies a `910px` inner width; mobile uses `340px`. The mobile title wraps into two lines at `18px / 32.4px`.

Use typography and spacing for hierarchy. The supplied DOM does not establish a card border or an accompanying news image. The publication date is content, not the inspection date.

### Member Profile

**Role:** makes the network behind the product visible.

Six profiles cover brand planning and operation, material supply, manufacturing, recipe development, and branding design. Each combines a portrait, name, organization, role, and external `WEB SITE` link.

On desktop, profiles form two rows of three. Portraits are circular and approximately `299px` in diameter, centered within `340px` columns. Names sit about `20px` below the portraits. Organization and role lines use `13px / 26px` Gothic text with noticeably generous tracking. Text and links are centered.

On mobile, each profile becomes a horizontal row. The portrait is approximately `114px` wide at `x = 25`; text begins around `x = 154`, leaving a `15px` gap. Names use `16px / 24px`, and metadata uses `12px / 24px`. Fine dotted plum separators divide the rows. The last profile has generous white space before the footer.

The original member content explicitly labels アレンス株式会社 with branding design. This establishes a project branding role; it does not establish website implementation or illustration authorship.

### Footer

**Role:** closes the page with shopping, support, company, and social navigation.

The footer is a flat plum field with cream text and no separate card surfaces. Desktop height is `254px`; mobile height is `332px`.

Its anatomy is:

1. Primary navigation: `HOME`, `PRODUCTS`, `NEWS`, `CONTACT`.
2. Smaller utility navigation: `FAQ`, `SHIPPING`, `PRIVACY POLICY`, `TERMS OF SALE`, `COMPANY`.
3. Instagram and X marks.
4. Muted copyright text.

Desktop primary navigation runs horizontally, followed by a second horizontal utility row. Mobile primary links stack vertically; utility links wrap into two centered rows. The social marks remain centered and approximately `32px` in their layout width.

The footer `PRODUCTS` link opens the collection page, while the upper-page `PRODUCTS` navigation targets an in-page section. Preserve this distinction when connecting the interface.

## Tokens — Motion & Interaction

The supplied evidence contains transition declarations and settled screenshots, not a recorded animation sequence.

| Element or token | Supplied value | What it establishes |
| --- | --- | --- |
| Brand `H1` | `opacity 0.5s` | An opacity transition is declared; its trigger and visible progression are unverified. |
| Desktop `SCROLL` | Transition reported as `1s` | A duration is present; changed property and behavior were not established. |
| Mobile `SCROLL` | Transition reported as `1.5s` | A different mobile duration is present; no motion path was supplied. |
| Mobile story heading and paragraph | Transition reported as `0.8s` | A transition is declared; entrance direction and trigger are unverified. |
| Mobile About paragraph | Transition reported as `0.8s` | Same limitation as the story elements. |
| Shared fade token | `fadeIn .6s cubic-bezier(0, 0, .3, 1)` | Source custom-property value only; application to this page's visible elements is not established. |
| Shared duration tokens | `.2s`, `.5s`, `3s` | Available theme durations, not proof of particular interactions. |
| Most sampled elements | `animation: none` | No active CSS animation was reported on those sampled elements at that moment. |
| Section navigation | Hash links to named sections | Destinations are confirmed; smooth scrolling and offset behavior were not tested. |
| Mobile menu | Visible trigger and offscreen links | Closed-state evidence only; opened state and keyboard behavior are unverified. |

Do not infer parallax, pose cycling, a carousel, or a particular hero reveal from the artwork alone. JavaScript animation, pseudo-element behavior, and media animation cannot be ruled in or out from the sampled `animation` fields.

**Recommended motion:** brief opacity feedback for links and an optional restrained content reveal. Keep essential artwork and text visible without waiting for a reveal script. Respect reduced-motion preferences and avoid making the mobile opening depend on a long entrance sequence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Flat warm beige, visually estimated | Unifies the harvest illustration and identity |
| Main reading canvas | Measured white | Supports copy, products, photography, and member profiles |
| News band | Measured `#F9F9F9` | Creates a subtle change in pace |
| Footer | Measured plum with cream lettering | Provides a clear endpoint and grouped navigation |
| Product grouping | Transparent over white | Relies on image and text alignment rather than a card shell |
| Member grouping | Transparent over white | Circular portrait and typographic hierarchy; dotted separators on mobile |

No general elevation system is visible. Distinction comes from surface changes, large spacing, circular crops, and thin rules.

## Imagery

### Illustration

The opening artwork uses hand-drawn outlines and textured fills. Baskets, grape clusters, hands, oversized sleeves, and rounded garments are individually detailed. Beige shows through the drawing as a shared ground rather than as a separate rectangle behind every figure.

Preserve this organic texture at normal image rendering quality. It is not a pixel-art interface, and `image-rendering: pixelated` would introduce a different visual language.

### Food Photography

The About photograph is bright and tactile: translucent red-brown candied grape material, visible sugar, white tableware, pale fabric, and directional sunlight. The warm food colors work against the otherwise limited interface palette.

Keep enough detail to communicate texture. Avoid applying a plum duotone over the photograph, since the current capture preserves natural color.

### Portrait Photography

The visible portraits use outdoor greenery and relaxed expressions. Several subjects wear white or neutral clothing. Circular crops provide consistency without framing the people inside filled cards.

Set crop positions per portrait, especially for paired subjects. A single automatic face-centered crop can cut one person out of a two-person image.

### Observed Asset References

Individual image URLs, intrinsic image dimensions, and complete alternative-text attributes were not supplied. The following references identify evidence roles, not downloadable filenames.

| Asset role | Evidence | Reuse guidance |
| --- | --- | --- |
| Brand symbol and vertical lockup | Original desktop and mobile captures | Preserve proportions and clear space; use authorized brand artwork. |
| Three-figure harvest composition | Original desktop opening capture | Preserve texture, complete figures, baskets, and the broad composition. |
| Candied grape photograph | Original desktop About capture | Use a large rectangular presentation; do not infer its native ratio from the cropped viewport. |
| Member portraits | Original lower-page desktop and mobile captures | Use circular crops with individual focal-point adjustment. |
| Product media | DOM records three nearly square linked regions | The actual imagery was not visually supplied; obtain suitable product assets separately. |
| Process media | Text placement and vertical intervals only | Subject matter, file format, and crop remain unverified. |
| Utility and social symbols | Original opening and footer captures | Small line icons in plum or cream; exact source asset paths are unknown. |

CSS can reproduce the layout and typography system. It cannot supply the specific identity carried by the original illustration, logo, and photography.

## Layout & Responsive Behavior

### Desktop

The document is approximately `10029px` tall. A viewport-sized opening leads into a long story, then products, About, the production process, features, news, members, and the footer.

The main content width is `1100px`, producing `170px` outer margins at the inspected width. Several editorial passages use a narrower measure. The brand lockup occupies the left edge independently of those centered content regions.

Products form three nearly equal columns. Members also form three columns, but their circular portraits are smaller than the column width and their text is centered. The About composition uses a wide photograph followed by an offset vertical title and paragraph.

### Mobile

The document is approximately `9383px` tall. Most content uses `25px` horizontal margins, while the introductory story narrows to `65px` margins.

The opening retains its full-height beige field. The illustration is absent from the supplied mobile state. The scroll cue moves to the bottom center, and the header utilities become bag plus menu.

Products stack into a single column without shrinking the `340px` media width. Member portraits instead shrink to approximately `114px` and move beside their text. This keeps the six-member directory compact even though the product section becomes much taller.

The footer changes from horizontal navigation to a vertical primary list with wrapped utility links. The current persistent logo overlaps the lower member content; the Quick Start intentionally adjusts this on mobile.

### Breakpoint Limits

Only `1440px` and `390px` widths were supplied. Exact source media-query thresholds, tablet layouts, landscape behavior, browser toolbar resizing, and safe-area handling are not established.

The Quick Start uses `900px` as a recommended adaptation breakpoint. It should be tested with actual assets and text before production use; it is not a recovered source value.

## Do’s and Don’ts

### Do

- Use measured plum `#69285A` for the main interface ink and footer.
- Preserve the difference between the beige opening and the white reading sections.
- Pair Japanese Mincho text with delicate uppercase English display labels.
- Keep the vertical brand lockup proportional to its original artwork.
- Use broad desktop margins and generous section spacing.
- Keep product media approximately square and product entries visually unboxed.
- Preserve the different mobile strategies for products and member profiles.
- Use circular portraits, small role labels, and fine dotted mobile separators.
- Retain natural color in food and portrait photography.
- Keep navigation actions small, typographic, and close to their related content.
- Treat unseen imagery, menu states, and motion as unresolved evidence rather than filling them with assumptions.

### Don’t

- Don't turn every content group into a rounded, shadowed card.
- Don't make the entire page beige; the observed editorial canvas is white.
- Don't use a single sans-serif family for all Japanese and English text.
- Don't infer visible navigation from offscreen or otherwise unpainted DOM links.
- Don't reproduce the mobile logo collision as a desirable layout rule.
- Don't interpret the blank mobile opening as proof that mobile artwork is intentionally disabled.
- Don't invent parallax, carousel controls, automatic pose changes, or animation timings.
- Don't use generic theme radii and shadow variables as evidence of visible home-page styling.
- Don't recolor the photography into a uniform plum filter.
- Don't invent asset paths, font files, or website production credits.

## Recommended Implementation Additions

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

- Retain the observed skip-to-content link and verify its keyboard-focus visibility.
- Give bag, account, menu, and social links accessible names. Use real buttons for menu toggles and expose the expanded state.
- Provide at least `44 × 44px` interactive areas around small utility icons; the supplied inline link boxes do not establish their current target size.
- Prevent the full vertical logo from covering mobile content. A scrolling lockup or a shorter persistent symbol would preserve identity.
- Show a static mobile hero image or poster while any enhanced artwork initializes. Keep the poster independent of animation readiness.
- Preserve usable text and links when motion is reduced or enhancement scripts fail.
- Load the named fonts only through an authorized source. If they are unavailable, choose deliberate serif and Gothic fallbacks and recheck wrapping.
- Allow longer member names and translated role descriptions to wrap without overlapping the portrait or link.
- Add descriptive accessible names to repeated `VIEW MORE` and `WEB SITE` links, using the associated product or member name.
- Test at intermediate widths with the real logo, paired portraits, Japanese copy, and product titles.

## Agent Prompt Guide

### Quick Color Reference

- Main ink and footer: `#69285A`, measured.
- Main reading surface: `#FFFFFF`, measured.
- Opening beige: approximately `#D7C7AD`, visually estimated.
- Footer text: `#F4EBCE`, measured.
- News background: `#F9F9F9`, measured.
- Fine tan rule: approximately `#D9BE9B`, visually estimated.
- Natural red and green accents come from photography, not additional UI colors.

### Overall Prompt

“Create a Japanese food-brand shop home page inspired by Budou no Onepiece. Use plum ink `#69285A`, a warm beige illustrated opening, white editorial sections, and a plum footer with cream text. Place a tall graphic brand lockup at the upper left and small shopping utilities at the upper right. On desktop, use a broad composition of three hand-drawn grape harvest figures with textured clothing and baskets. Build the content around a centered 1100px width, Japanese Mincho paragraphs with generous leading, and delicate uppercase English section headings. Present three unboxed products with square images, then a wide food photograph, an editorial explanation, a four-step process, news, and six circular member portraits. On mobile, stack products but make member profiles portrait-and-text rows. Preserve restrained text links and thin rules. Treat a visible mobile hero poster and collision-free mobile logo behavior as implementation improvements.”

### Example Component Prompts

1. **Product entry:** “A white, unboxed product entry with a roughly 340px square image, a plum Japanese Mincho title, a small description at twice its font-size leading, and an understated VIEW MORE link. Use three columns with 40px gaps on desktop and one column with generous vertical separation on mobile.”
2. **About composition:** “A large photograph of candied grape material on white tableware in strong natural light. Below it, position a vertical Japanese title to the left of an 18px plum paragraph with 40px leading. Let the title overlap the photograph's lower boundary slightly. End the composition with a fine tan rule.”
3. **Member profile:** “A circular outdoor portrait with a Mincho name, small Gothic organization and role labels, and an uppercase WEB SITE link with a tiny filled circular arrow. Use a centered 299px portrait in a desktop grid; switch to a 114px portrait beside left-aligned text on mobile, with dotted separators between rows.”
4. **Footer:** “A full-width plum footer with cream lettering. Center a row of primary display links, a smaller utility row, Instagram and X marks, and subdued copyright. Stack the primary navigation on mobile and wrap utilities into two compact rows.”
5. **Mobile opening improvement:** “Preserve the beige opening, 85px brand lockup, small bag/menu controls, and bottom-centered SCROLL cue. Add an authorized static illustration poster as a reliable fallback, and allow the tall lockup to scroll away before it overlaps the page content.”

## Quick Start

### CSS Custom Properties

This CSS is an adaptation of the measured geometry, not extracted source code. It leaves the application's root size unchanged. Use authorized assets in the image elements and load the measured font families separately.

The `900px` breakpoint, mobile static-art layout, mobile scrolling logo, accessible targets, and hover feedback are recommended additions. The beige and tan values remain visual approximations. The process media layout is a suggested structure because its artwork was not supplied.

Expected component structure: product entries contain media, title, description, and link; member entries contain a portrait and a `.member-info` wrapper; the footer has separate primary, secondary, social, and copyright groups. A `.scroll-disc` element contains the decorative down chevron.

```css
:root {
  /* Measured colors, except the two visual estimates. */
  --color-ink: #69285a;
  --color-canvas: #ffffff;
  --color-reverse: #f4ebce;
  --color-reverse-muted: rgb(244 235 206 / 60%);
  --color-muted-surface: #f9f9f9;
  --color-paper: #d7c7ad; /* Visual estimate. */
  --color-rule: #d9be9b; /* Visual estimate. */

  /* Computed source family stacks; font files are not bundled. */
  --font-japanese: YakuHanMP, 'ryo-text-plusn', serif;
  --font-display: YakuHanJP, tenez, sans-serif;
  --font-profile: 'ryo-gothic-plusn', sans-serif;
  --font-utility: 'mr-eaves-modern', sans-serif;

  --content-width: 1100px;
  --reading-width: 910px;
  --page-gutter: 25px;
  --column-gap: 40px;
  --section-space: 160px;
  --text-section: 40px;
  --rule-width: 1px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-japanese);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.container,
.reading-container {
  width: calc(100% - 2 * var(--page-gutter));
  margin-inline: auto;
}

.container { max-width: var(--content-width); }
.reading-container { max-width: var(--reading-width); }

.section {
  padding-block-start: var(--section-space);
  scroll-margin-top: 80px;
}

.section-title {
  margin: 0 0 82px;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.025em;
  text-align: center;
}

/* Persistent desktop identity, inferred from the captures. */
.brand-mark {
  position: fixed;
  z-index: 30;
  top: 36px;
  left: 38px;
  width: 165.75px;
  margin: 0;
}

.brand-mark img { width: 100%; height: auto; }

.header-tools {
  position: fixed;
  z-index: 40;
  top: 24px;
  right: 29px;
  display: flex;
}

/* Recommended target size; source hit areas were not established. */
.icon-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.icon-control svg { width: 24px; height: 24px; }
.menu-control { display: none; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-paper);
}

/* Supply a composed illustration; these bounds are an approximation. */
.hero-art {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(92%, 1320px);
  height: 82%;
  object-fit: contain;
  transform: translateX(-50%);
}

.scroll-cue {
  position: absolute;
  right: 40px;
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 20px;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.scroll-disc {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  writing-mode: horizontal-tb;
}

.intro-copy {
  max-width: 542px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 2.25;
  letter-spacing: 0.025em;
}

.product-grid,
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px var(--column-gap);
}

.product-card { min-width: 0; }

.product-media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-title {
  margin: 26px 0 18px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

.product-description {
  min-height: 112px;
  margin: 0;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.025em;
}

/* Arrow anatomy is observed on member links; reuse elsewhere is optional. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 25px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.025em;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.text-link::after {
  content: '›';
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--color-canvas);
  background: var(--color-ink);
  font-family: serif;
  font-size: 14px;
  line-height: 1;
}

.about-photo { width: 100%; height: auto; }

/* Approximation of the captured desktop title-and-copy composition. */
.about-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 508px);
  gap: 70px;
  width: min(720px, 100%);
  margin-inline: auto;
  padding-block: 80px 60px;
}

/* Live-text alternative to supplied graphic lettering. */
.about-title {
  margin: -150px 0 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.9;
}

.about-copy {
  margin: 0;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: 0.025em;
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
}

/* Suggested process structure; media details were not captured. */
.process-list { padding: 0; list-style: none; }
.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-block: 48px;
}
.process-step h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; }
.process-step p { margin: 0; font-size: 16px; line-height: 2; }

.news {
  padding-block: 96px;
  background: var(--color-muted-surface);
}
.news-title { font-size: 20px; font-weight: 500; line-height: 1.8; }
.news-copy { font-size: 14px; line-height: 2; }
.news .text-link { font-size: 18px; }

.members { padding-block: 120px 160px; }
.members .section-title { margin-bottom: 106px; }
.member-card { min-width: 0; text-align: center; }

.member-photo {
  width: 88%;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
}

.member-name {
  margin: 20px 0 9px;
  font-size: 22.5px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

.member-meta {
  margin: 0;
  font-family: var(--font-profile);
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.1em;
}

.member-card .text-link {
  margin-top: 10px;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: 0.05em;
}

.site-footer {
  padding: 30px 25px 40px;
  color: var(--color-reverse);
  background: var(--color-ink);
  text-align: center;
}

.footer-primary,
.footer-secondary,
.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.site-footer a { text-decoration: none; }
.footer-primary {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0.025em;
}

.footer-secondary {
  flex-wrap: wrap;
  font-family: var(--font-utility);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.025em;
}

.footer-socials { margin: 28px auto 24px; }
.footer-socials a,
.footer-socials svg { display: block; width: 32px; height: 32px; }

.copyright {
  margin: 0;
  color: var(--color-reverse-muted);
  font-family: var(--font-utility);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

/* Recommended keyboard and pointer feedback. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover) {
  .text-link:hover { opacity: 0.75; }
}

/* Recommended threshold; the original breakpoint is unknown. */
@media (max-width: 900px) {
  :root {
    --section-space: 100px;
    --text-section: 28px;
  }

  /* Intentional improvement: the tall logo scrolls away on mobile. */
  .brand-mark { position: absolute; top: 17px; left: 17px; width: 85px; }
  .header-tools { top: 15px; right: 10px; }
  .account-control { display: none; }
  .menu-control { display: grid; }

  /* Recommended visible poster; absent in the supplied mobile state. */
  .hero-art {
    top: 220px;
    width: calc(100% - 50px);
    height: calc(100% - 340px);
  }

  .scroll-cue {
    right: auto;
    bottom: 29px;
    left: 50%;
    flex-direction: column;
    gap: 13px;
    writing-mode: horizontal-tb;
    font-size: 20px;
    transform: translateX(-50%);
  }
  .scroll-disc { width: 24px; height: 24px; }

  .section-title { margin-bottom: 48px; }
  .intro-copy { max-width: 260px; font-size: 14px; line-height: 28px; }

  .product-grid { grid-template-columns: 1fr; gap: 64px; }
  .product-title { margin: 15px 0 11px; font-size: 22px; line-height: 38px; }
  .product-description {
    min-height: 0;
    font-size: 13px;
    line-height: 26px;
    letter-spacing: 0.01em;
  }
  .product-card .text-link { line-height: 30px; }

  /* Recommended title reflow; its source mobile appearance is unverified. */
  .about-layout { display: block; padding-block: 40px; }
  .about-title { margin: 0 0 28px; writing-mode: horizontal-tb; font-size: 28px; }
  .about-copy { font-size: 16px; line-height: 32px; letter-spacing: 0.01em; }

  .process-step { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .process-step h3 { font-size: 20px; line-height: 38px; }
  .process-step p { font-size: 14px; line-height: 28px; }

  .news { padding-block: 80px; }
  .news-title { font-size: 18px; line-height: 32.4px; }
  .news-copy { font-size: 13px; line-height: 26px; }
  .news .text-link { font-size: 16px; line-height: 24px; }

  .members { padding-block: 96px 100px; }
  .members .section-title { margin-bottom: 48px; }
  .member-grid { grid-template-columns: 1fr; gap: 0; }
  .member-card {
    display: grid;
    grid-template-columns: 33.5% minmax(0, 1fr);
    align-items: start;
    gap: 4.5%;
    padding-block: 34px;
    border-bottom: 1px dotted var(--color-ink);
    text-align: left;
  }
  .member-card:first-child { padding-top: 0; }
  .member-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .member-photo { width: 100%; margin: 0; }
  .member-info { min-width: 0; padding-top: 2.75px; }
  .member-name {
    margin: 0 0 6.4px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
  }
  .member-meta { font-size: 12px; line-height: 24px; letter-spacing: 0.05em; }
  .member-card .text-link { margin-top: 5px; font-size: 16px; line-height: 24px; }
  .member-card .text-link::after { width: 16px; height: 16px; }

  .site-footer { padding-block: 30px 32px; }
  .footer-primary { flex-direction: column; gap: 0; font-size: 18px; line-height: 30.6px; }
  .footer-secondary {
    max-width: 240px;
    margin: 17px auto 0;
    gap: 0 8px;
    font-size: 14px;
    line-height: 23.8px;
  }
  .footer-socials { margin-block: 18px 9px; }
  .copyright { font-size: 12px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .text-link { transition: none; }
}
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This mapping does not imply that the original site uses Tailwind.

```css
@theme inline {
  --color-grape: var(--color-ink);
  --color-harvest: var(--color-paper);
  --color-page: var(--color-canvas);
  --color-footer-text: var(--color-reverse);
  --color-news: var(--color-muted-surface);
  --color-fine-rule: var(--color-rule);

  --font-editorial: var(--font-japanese);
  --font-latin-display: var(--font-display);
  --font-member-detail: var(--font-profile);
  --font-small-utility: var(--font-utility);

  --text-section-heading: var(--text-section);
  --spacing-page-gutter: var(--page-gutter);
  --spacing-content-column: var(--column-gap);
  --spacing-major-section: var(--section-space);
}
```

## Sources & Evidence

| Evidence | Scope |
| --- | --- |
| [Original home page](https://budou-no-onepiece.com/) | Original and final URL are identical; supplied HTTP status is `200`. |
| Capture timestamp | `2026-09-12T14:41:54.235Z`, September 12, 2026. |
| Desktop capture set | `1440 × 1000` viewport; opening illustration, partial About composition, and lower members/footer. Document height `10029px`. |
| Mobile capture set | `390 × 844` viewport; opening and lower members/footer. Document height approximately `9383px`. |
| Rendered DOM and computed styles | Page text, destinations, font-family strings, font sizes, leading, tracking, colors, padding, element boxes, and selected transition/custom-property values. |
| [Products section](https://budou-no-onepiece.com/#unk_products) | Three entries, measured media-link boxes, titles, descriptions, and product destinations. |
| [About section](https://budou-no-onepiece.com/#unk_about) | Explanatory text and the supplied desktop image/text composition. |
| [Member section](https://budou-no-onepiece.com/#unk_member) | Six profiles, organizations, project roles, external links, and desktop/mobile geometry. |

The supplied browser process waited for document loading, sampled layout and text stability, finite motion, and visible image decoding within bounded time limits. It also traversed intermediate scroll positions. These readiness checks do not establish that every delayed asset or interaction completed semantically.

No independent browsing or file inspection was performed for this reference. The provided evidence contains no opened-menu result, cart/account flow, hover/focus test, complete image inventory, or timed animation trace. The absent mobile hero artwork and the mobile logo overlap remain observations with unverified causes.

This document describes the current page represented by the supplied original-site evidence. Exact computed values, visual estimates, and recommended implementation choices are identified separately throughout.