# BLUE POND — Style Reference

> Glossy caramel and crisp biscuits against patterned paper and Hokkaido blue.

**Website:** [BLUE POND](https://www.bluepond.jp/)
**Original URL:** https://www.bluepond.jp/
**Final URL:** https://www.bluepond.jp/
**Theme:** predominantly light product presentation, with textured blue story and closing surfaces.
**Inspected:** September 12, 2026, at 22:49 JST / 13:49 UTC, according to the supplied browser capture record.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current brand homepage: opening composition, story, news, quality statements, product lineup, specialist introductions, store information, contact details, company information, footer, and persistent cookie notice. Five original-page screenshots show desktop opening/product/footer states and mobile opening/footer states. Other sections are documented through supplied rendered DOM and computed styles.

BLUE POND presents a confectionery brand through strong material contrasts. Crisp, embossed biscuits and a cut sandwich reveal white filling and glossy caramel. A large caramel spill enters from beyond the opening frame, while lightly textured white paper carries broad, slanted semicircular patterns. A wide black wordmark completes the composition. The imagery communicates texture and appetite before explanatory copy appears.

The remaining page has the pace of an extended product catalog. Large serif English headings, narrow Japanese captions, generous vertical intervals, package photographs, small status labels, and restrained links give each product its own chapter. Cool blue connects the brand story and company information; warm orange identifies availability and store actions. Seasonal coral appears in product imagery and packaging.

This is a brand website with product, retail, and corporate information. Its structure should support browsing between those purposes, including ingredient information and external store or reservation destinations.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Values are rounded where excessive precision would not help implementation.
- **Visual estimate** means a proportion, color approximation, or shape read from an original-page screenshot. Estimated hexadecimal colors were not independently sampled.
- **DOM-backed** sections have text, links, and layout evidence but no corresponding detailed screenshot in the supplied set.
- **Recommendation** describes a practical implementation choice, including the CSS scaffold below. It does not establish the original implementation.
- All named custom properties are reference aliases. The supplied custom-property collection was empty.
- Computed font-family declarations identify the requested families; they do not independently prove which font file rendered every glyph.

## Tokens — Colors

### Default Palette

| Name | Value | Evidence | Suggested token | Role |
| --- | --- | --- | --- | --- |
| White | `#ffffff` | Measured | `--bp-white` | Body base, light badges, cookie button, reversed footer details |
| Black | `#000000` | Measured | `--bp-ink` | Body copy, large headings, opening wordmark appearance, mobile reservation button |
| Navigation Blue | `#008cbd` | Measured | `--bp-blue` | Desktop navigation on pale content |
| Caramel Orange | `#cd7511` | Measured | `--bp-orange` | Limited-product badges, availability text, filled mobile store actions |
| Pale Product Canvas | Approximately `#f4f4f4` | Visual estimate | `--bp-paper` | Broad neutral field behind the photographed package and product information |
| Pond Blue | Approximately `#299ac2` | Visual estimate | `--bp-pond-base` | Base approximation for the mottled blue story/footer artwork |
| Light Blue Pattern | Approximately `#7dcdf0` | Visual estimate | `--bp-wave` | Large semicircular footer pattern |
| Seasonal Coral | Approximately `#e77b73` | Visual estimate | `--bp-seasonal` | Apple product backdrop and package artwork |
| Translucent White | `rgba(255,255,255,0.4)` | Measured | `--bp-soft-white` | Small quality-section detail link surface |
| Cookie Veil | Approximately `rgb(0 0 0 / 55%)` | Visual estimate | `--bp-cookie-veil` | Persistent bottom notice over both pale and blue sections |

The orange UI color and the caramel photography serve different purposes. The photograph contains a broad range of red-brown, amber, and orange tones, specular highlights, and deep shadows. A flat `#cd7511` fill cannot reproduce that material.

The visible pond surface is textured artwork. Its base approximation is useful as a loading fallback, but it should not replace the texture in a faithful implementation. Likewise, transparent computed backgrounds on individual paragraphs do not describe the surface beneath them.

### Theme Presets

No user-selectable color themes were documented. Palette changes belong to sections and responsive treatments:

- The compact desktop identity and navigation appear blue over pale product content and white over the blue closing section.
- Desktop store buttons have black text and a thin orange outline in the supplied product screenshot. Their sampled mobile counterparts have orange fills and white text.
- The mobile reservation action has a black fill with white text.
- The cookie notice looks gray over pale content and dark blue over the footer because its background is translucent.

## Tokens — Typography

### Japanese Body — `zen-kaku-gothic-new`

The measured source stack is `zen-kaku-gothic-new, 'Yu Gothic', 游ゴシック, YuGothic, 游ゴシック体, 'ヒラギノ角ゴ Pro W3', メイリオ, sans-serif`.

Most Japanese copy uses weight `400`. The opening story statement uses `700`. The general body is 16px on desktop and 15px on mobile, with a 1.65 line-height and slight negative tracking. Product descriptions and story paragraphs deliberately use more generous leading.

### English Display — `aviano, serif`

Large English section labels and product names declare `aviano, serif`, weight `700`, line-height `1.2`, and tracking `0.05em`. The main scale is 72px on desktop and 38px on mobile. Multiword product names are arranged across explicit lines, producing substantial editorial blocks.

The specialist heading uses the same family at a smaller scale. Do not assign Aviano to the brand logo merely because both have serifs: the wordmark appears as graphic content, and its underlying asset or lettering construction was not supplied.

### Navigation and Repeated English Copy — `new-atten, sans-serif`

Desktop navigation declares `new-atten, sans-serif`, at 14px and weight `500`. The repeated English text tracks use this family at approximately 24.69px desktop and 20.8px mobile. Mobile utility text includes a measured 14.56px size.

### Cookie Utility — `Helvetica, Calibri, Arial, sans-serif`

The cookie privacy link and acceptance control use a separate system-oriented sans-serif stack. The acceptance label is 16px and bold. Its smaller Japanese qualifier is visible, but the child text size was not separately supplied.

### Type Scale

Values below are measured unless explicitly marked otherwise. Sizes and line-heights are in pixels.

| Role | Desktop size / leading | Mobile size / leading | Weight and tracking |
| --- | --- | --- | --- |
| General body | `16 / 26.4` | `15 / 24.75` | 400; `-0.16px` / `-0.15px` |
| Main English heading | `72 / 86.4` | `38 / 45.6` | 700; `3.6px` / `1.9px` |
| Specialist English heading | `40 / 48` | `26 / 31.2` | 700; `2px` / `1.3px` |
| Narrow Japanese section caption | `16 / 26.4` | `12 / 19.8` | 400; source tracking `-6.4px` / `-4.8px` |
| Story statement | `24.69 / 53.49` | `18.72 / 46.28` | 700 |
| Story paragraph | `16.46 / 53.49` | `14.56 / 46.28` | 400 |
| Quality statement | `18 / 36` | `17 / 34` | 400 |
| Product introduction | `20 / 36` | `18.72 / 37.44` | 400 |
| Product description | `16 / 36` | `14.56 / 29.12` | 400 |
| Product notes and ingredient link | `14 / 23.1` | `14 / 23.1` | 400 |
| Small availability badge | `12 / 12` | `12 / 12` | 400 |
| Store action | `14 / 14` | `14 / 14` | 400 |
| Company subsection title | `20 / 52` | `20 / 52` | 400 |
| Contact action label | `20 / 20` | `16 / 16` | 400 |
| Copyright | `16 / 16` | `12 / 12` | 400 |
| Cookie privacy link | `14 / 25.2` | `13 / 22.1` | 400 |
| Cookie acceptance label | `16 / 22.4` | `16 / 22.4` | 700 |

The product quantity and price numerals look approximately 28px in the desktop package screenshot. That is a visual estimate: their individual child styles and font family were not captured.

The Japanese heading captions occupy narrow, tall rectangles consistent with vertical composition. Their computed writing-mode was not supplied. Do not apply their unusually negative tracking to ordinary horizontal Japanese text. The Quick Start uses a recommended vertical-writing adaptation with normal tracking.

## Tokens — Spacing & Shapes

**Density:** large photographic and decorative areas, spacious product chapters, compact navigation and metadata.

**Scaling:** mixed fixed and viewport-dependent measurements. No universal spacing unit or complete responsive formula can be recovered from the two snapshots.

### Responsive Unit

The HTML root measures 10px at both inspected widths, but the body measures 16px desktop and 15px mobile. Several fractional values suggest viewport-dependent rules; their original formulas were not provided.

For reuse, keep a conventional root size and express the measured dimensions through explicit tokens. Do not assume that every recorded value can be scaled by the same desktop-to-mobile ratio.

### Spacing Scale

| Use | Measured value | Practical interpretation |
| --- | --- | --- |
| Desktop navigation horizontal padding | `7px` each side | Very compact label enclosure |
| Navigation row interval | `34px` | A 26px label box with an 8px interval |
| Small badge padding | `5px 6px` | Dense rectangular metadata |
| Adjacent product badge separation | Approximately `12px`, calculated from rectangles | Keeps availability labels distinct |
| Product action padding | `20px 0` | Consistent 56px total button height |
| News section vertical padding | `150px` desktop; `80px` mobile | Broad section separation |
| Quality section padding | `220px 0 360px` desktop; `100px 0 140px` mobile | Especially generous transition into the lineup |
| Product introduction-to-description gap | `48px` desktop; `36px` mobile, calculated from rectangles | Separates the short promise from explanatory copy |
| Mobile primary content inset | `19.5px` | 5% of the inspected 390px viewport |
| Footer internal top padding | `110px` desktop; `60px` mobile | Separates contact/company information from closing utilities |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Small product badges | `0` | Measured |
| Large availability seal | `50%` | Measured; circular |
| Store and detail buttons | `50px` | Measured |
| Contact panels | `6.508px` | Measured |
| Cookie acceptance button | `8px` | Measured |
| Active navigation enclosure | Visually pill-shaped, approximately half the 26px height | Screenshot estimate; the sampled link node itself reports zero radius |

The active navigation enclosure may be drawn by a nested element or pseudo-element. Its exact construction was not captured.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `18,021.45px` | `15,677.11px` | Measured |
| Opening composition height | `1000px` | `618.80px` | Measured from story start |
| Opening wordmark bounds | `698.39 × 59.66px`, x `370.80`, y `840.34` | `333.31 × 28.59px`, x `28.34`, y `525.19` | Measured |
| Main heading/content width | `806px`, x `317` | `351px`, x `19.5` | Measured |
| Specialist content width | `814px` | `351px` | Measured |
| Contact content width | `840px` | `351px` | Measured |
| Company information column | `378px` | `351px` | Measured |
| Product descriptive text | `434.61px` | `331.5px` | Measured |
| Standard product notes column | `339.27px` | `233.41px` | Measured |
| Store action | `270 × 56px` | `260 × 56px` | Measured |
| Large availability circle | `100 × 100px` | `67.59 × 67.59px` | Measured |
| Contact panel | `195 × 136px` | `164.97 × 113.36px` | Measured |
| Cookie acceptance control | `140.73 × 48.39px` | `331.63 × 48.39px` | Measured |
| Cookie notice height | Approximately `76px` | Approximately `155px` | Screenshot estimate |

## Components

### Opening Brand Composition

**Role:** establish the product's physical texture and the brand's visual identity.

The desktop opening fills the first 1000px of the document. Caramel enters from the top and right edges, with rounded drips reaching toward the lower portion of the frame. Two biscuit sandwiches sit near the center: one whole and one cut to expose its layers. Their embossed lettering, baked edges, filling, and shadows remain sharply legible.

A large black wordmark sits near the bottom, clear of the main food cluster. Behind it, white semicircular forms and slanted bands appear against a subtly gray paper texture. The composition has no visible opening headline paragraph or large purchase button in the supplied settled screenshot.

On mobile, the opening ends at about 619px, revealing blue below within the 844px viewport. The biscuit cluster remains large: approximately 300px wide by visual estimate, compared with roughly 500px on desktop. This is a recomposed or differently cropped image presentation, not uniform reduction of the desktop frame.

**Implementation recommendation:** use an art-directed picture element or separately composed mobile artwork, and preserve the wordmark as its own accessible identity element. The supplied evidence does not establish the original image layering or asset paths.

### Desktop Identity and Section Navigation

**Role:** orient visitors throughout the long page.

In the scrolled captures, a compact wordmark sits near the upper-left corner. Six uppercase links form a persistent left rail: `STORY`, `NEWS`, `QUALITY`, `LINEUP`, `SHOP`, and `CONTACT`.

The measured link boxes start at x 28.80px. Their vertical positions run from y 402px through y 572px in 34px steps, keeping the group near the viewport's vertical center. Labels use 14px New Atten with 26px line boxes.

The current section has a fine rounded outline. `LINEUP` is outlined in the product capture and `CONTACT` in the footer capture. The rail and compact logo change from blue on pale content to white on blue.

The compact navigation is not visibly present in the initial hero screenshots, although header elements have layout rectangles in the DOM record. Those rectangles should not be treated as reliable positions for the later visible header. The precise reveal threshold and active-section logic remain unverified.

### Mobile Utility Header

**Role:** retain quick lineup access and an entry to navigation without consuming a side column.

The scrolled mobile screenshot shows a small white wordmark at the upper left and a joined control at the upper right. A white `LINEUP` segment with orange lettering adjoins an orange `MENU` segment with white lettering and a four-dot icon.

The combined visible control is approximately 177px wide and 37px high. Its right edge sits about 15px from the viewport edge. The regular desktop section rail is absent from this mobile capture.

`MENU` and `CLOSE` occur in the DOM text, but no expanded menu screenshot or activation result was supplied. Do not invent its panel layout, overlay, transition, or focus behavior.

### Story Section

**Role:** connect the product philosophy with Hokkaido's blue landscape association.

This section begins immediately after the opening, with white story text recorded in the DOM. Blue texture is visible at that transition in the mobile screenshot. The complete text composition is DOM-backed rather than visually documented in the supplied captures.

The lead statement has exceptionally generous line-height: approximately 53.49px desktop and 46.28px mobile. The story paragraph retains similarly open leading despite its smaller font size. The lead also has substantial top padding: about 272.57px desktop and 230.88px mobile.

Preserve this quiet, spacious reading interval. In an adaptation, select deliberate line breaks and allow Japanese text to reflow without turning the entire statement into an image.

### Bilingual Section Heading

**Role:** provide an unmistakable chapter marker while retaining Japanese context.

The primary English label uses large, tracked Aviano capitals. Product names span two or three lines. A much smaller Japanese caption occupies a narrow column toward the right of the heading region.

The main measured scale changes from 72px desktop to 38px mobile. The Japanese caption changes from 16px to 12px. On mobile, the caption remains narrow rather than becoming a conventional full-width subtitle below the English title.

The DOM uses English display paragraphs alongside Japanese `H2` elements. A new implementation can preserve the appearance while creating one clear semantic heading per section and preventing redundant screen-reader announcements.

### News Entries

**Role:** announce current products and practical updates.

The leading news entry links to the apple product anchor. Its desktop link container is an 806px-wide flex row; its text column is 440px wide and starts 366px after the row's left edge. The exact preceding image dimensions were not supplied.

On mobile, that entry changes to block layout with a 351px-wide text column. Its content comprises a short announcement, explanatory paragraph, a detail cue, and a date/category line. The second update retains a narrower, offset text region in the mobile DOM, so not every news entry follows an identical full-width template.

No detailed news screenshot was supplied. Preserve the measured hierarchy and responsive grouping without inventing a card surface, image subject, or hover transformation.

### Three Quality Statements

**Role:** explain the product through three numbered commitments.

The three recorded statements address caramel made with Hokkaido milk, crisp pastry texture, and specialist supervision. Desktop text is arranged across three positions within the main 806px content region. Mobile statements use the full 351px content width and are vertically stacked, with approximately 70px between their measured text boxes.

The typography remains modest: 18px/36px desktop and 17px/34px mobile. The detail link is a small rounded control, measuring 170 × 34px desktop and 182 × 40px mobile, with a translucent white background.

The detail destination is the specialist anchor. Its link semantics are documented; the actual scrolling behavior was not exercised.

### Repeated English Tracks

**Role:** create a transitional band between quality and products.

The DOM contains repeated instances of two English phrases, distributed across horizontal positions extending outside the viewport. Their type uses New Atten at approximately 24.69px desktop and 20.8px mobile.

This establishes a repeated horizontal-track structure. It suggests a ticker treatment, but the parent animation, direction, speed, and continuous movement were not verified. Individual sampled paragraph nodes report no animation.

If implementing a moving version, keep duplicated phrases out of the accessibility tree and provide a static reduced-motion presentation.

### Product Narrative Block

**Role:** explain each product's flavor, construction, and availability before the purchase information.

The lineup includes the standard crispy sandwich, the apple variation, a gift assortment, and the fromage product. Large English product headings introduce each chapter. The narrative blocks combine a prominent product visual, availability markers, a short Japanese introduction, and a longer description.

In the supplied desktop apple capture, the tail of a wide image-and-copy composition is visible above the package area. Its overall width is approximately 1060px, with two roughly equal halves. A coral patterned background extends beyond that composition toward the right edge of the viewport, producing an offset decorative field rather than an enclosing card.

Measured desktop copy is approximately 435px wide, with a 20px introduction and 16px description, both at 36px leading. On mobile, the copy follows the product visual and uses a 331.5px-wide region, 18.72px introductory text, and 14.56px body text.

### Package, Price, and Availability Group

**Role:** turn the product chapter into practical retail information.

The desktop apple package group shows a closed carton beside an open tray. Coral wrappers, a blue tray rim, white bird artwork, and the brand's curved pattern are visible. Small cast shadows belong to the photographed packages; the surrounding information has no raised card treatment.

The package pair occupies approximately 320 × 230px by visual estimate. Notes sit below in a 339px-wide column. To the right, small availability badges precede a quantity-and-price row. The captured example displays `4個入` and `1,166円(税込)`.

An ingredient link appears above a 270 × 56px store button. The content floats within a much larger pale area: preserve the whitespace around it rather than expanding the package to fill every available column.

The mobile DOM places package/price information, notes, the ingredient link, and the store button in sequence. Notes remain narrower than the general page text at approximately 233px. Standard product store actions measure 260px wide.

### Availability Labels and Action Hierarchy

**Role:** distinguish product status from navigation.

There are two badge scales:

- Large circular seals, 100px desktop and approximately 67.6px mobile, identify seasonal or time-limited availability.
- Small rectangular labels, usually 24px high, identify availability and storage requirements next to retail information.

The labels `秋冬限定`, `常温商品`, and `要冷蔵` are actual source UI. Orange-filled seasonal labels use white text; storage labels use orange text on white.

Ingredient links remain small text links with a right-pointing chevron. Store links are larger pills. Mobile gives store pills orange fill and reserves black fill for the separate `EC予約はこちら` action. These links lead to external store and reservation services; an on-page cart was not documented.

### Specialist Introductions

**Role:** support the product story through named food-production specialists.

The DOM identifies two entries, `町村農場` and `カーム角山`, each with a name, short description, and `MORE` cue. They occupy two approximately 366px-wide columns on desktop and stacked 351px-wide entries on mobile.

The English section heading is smaller than the principal product headings: 40px desktop and 26px mobile. The supplied screenshots do not establish the associated image subjects or crops. The `MORE` text is sampled as a paragraph; its activation mechanism and resulting content remain unverified.

These are product-specialist references, not website production credits.

### Store Information

**Role:** help visitors find the physical retail location and available products.

The recorded store entry contains a store name, postal address, telephone link, `Google Map`, and `お取扱い商品一覧`. Desktop address copy occupies approximately 307px; mobile expands it to the primary 351px content width.

The store name remains 24px at both widths. Address leading changes from 36px desktop to 30px mobile. The product-list action follows the same outlined-desktop and filled-mobile store-button system.

Only link destinations and DOM layout were inspected. No map, external stockist interface, or reservation flow was opened.

### Company Information, Contact, and Footer

**Role:** close the brand experience with practical contact and corporate information.

The closing screenshots show a full-width, mottled blue surface with white company text, thin horizontal rules, white contact icons, and a large light-blue curved pattern near the bottom.

The company table identifies `株式会社BLUE POND` and records its address, officer, business, and capital. Desktop places the 378px-wide company block beside explanatory notes. The mobile company block is 351px wide; its rows appear approximately 46px high, compared with approximately 52px on desktop.

Desktop contact panels sit below the information. Each is 195 × 136px with a fine white outline and a radius of approximately 6.5px. A phone icon or envelope appears above the text. The Instagram icon and copyright follow, centered with substantial separation.

On mobile, the two contact panels move above the company information and remain side by side at approximately 165 × 113px each. They are consequently outside the supplied bottom screenshot, but their earlier positions are measured in the DOM. The footer then contains the Instagram icon and smaller copyright text.

The company text and contact controls are verified as white. Some offscreen section-heading nodes were sampled with black computed text, so the closing screenshot does not establish a blanket white-text rule for every element in the entire contact section.

### Persistent Cookie Notice

**Role:** communicate cookie use and provide a consent control.

A translucent dark bar stays at the bottom in all supplied captures. Desktop places the notice and underlined privacy link on the left, with a compact white acceptance button on the right. The bar is approximately 76px high.

Mobile wraps the notice into several lines and places a much wider button below it, increasing the bar to approximately 155px. The button remains about 48.4px high with an 8px radius. Its main label is `OK`, followed by the smaller `同意する` qualifier.

The source acceptance element is recorded as an anchor with an empty destination. Its dismissal behavior, storage, and persistence across visits were not tested. A new implementation should use a semantic button and connect it to the actual consent state.

## Tokens — Motion & Interaction

| Treatment | Recorded evidence | What is established | Limitation |
| --- | --- | --- | --- |
| Page entry | `1s forwards fade` on body | A named 1-second animation is assigned | Keyframes were not supplied |
| Opening wordmark | `0.8s 0.3s forwards fv01` | 800ms animation with 300ms delay | Transform, opacity sequence, and exact effect are unknown |
| Header visibility | `opacity 0.3s` | Opacity transition is declared | Reveal threshold was not tested |
| Navigation links | `0.3s` transition | Short transition duration | Changed properties and hover appearance are incomplete |
| General links | `0.35s cubic-bezier(0.75, 0, 0.35, 1)` | Shared duration and easing | No before/after hover capture |
| Rounded actions | `0.4s` transition | Consistent action timing | Exact desktop hover result is unverified |
| Story text | `0.8s ease-in` transition | Slower text transition timing | Trigger and changed properties are unknown |
| Mobile quality section | `0.8s forwards fadeUpAnime` | Named reveal animation assigned | Travel distance and keyframes are unknown |
| Repeated English tracks | Repeated phrases at offscreen horizontal positions | Ticker-like layout exists | Motion direction, speed, and looping are unverified |
| Active section and chrome contrast | Different settled product/footer screenshots | Current-section outline and color changes are visible | Implementation mechanism was not supplied |

A ripple-related class appears in the supplied HTML text, but that alone does not establish a visible water simulation or pointer interaction. Do not specify ripple parameters from this evidence.

The browser collection traversed the page and waited for readiness. It did not provide an interaction recording of menu opening, consent acceptance, profile expansion, or external navigation. Treat these as untested.

**Recommended adaptation:** use restrained opacity or short positional reveals in the documented 300–800ms range. Keep essential content visible without animation, and avoid adding simulated liquid movement merely because the photography contains caramel.

## Surfaces

| Surface | Appearance | Structural role |
| --- | --- | --- |
| Opening paper | Pale texture with crisp white curved geometry | Frames the food composition and wordmark |
| Product canvas | Broad, almost-white field | Gives packages, prices, and explanatory text room |
| Seasonal backdrop | Coral-toned pattern offset behind a wide composition | Connects product imagery with package identity |
| Pond section | Mottled blue artwork | Connects brand story and closing information |
| Availability marker | Flat orange or white | Small, functional contrast |
| Store action | Orange outline desktop; orange fill mobile | Main retail navigation |
| Contact panel | Transparent blue-backed box with white outline | Groups an icon and contact method |
| Cookie notice | Dark translucent overlay | Persistent utility layer |

There is no general elevated-card system in the supplied screenshots. Separation comes from spacing, color fields, photographic edges, thin rules, and selected outlines. Retain shadows that are part of product photography without extending them into a global UI shadow token.

## Imagery

The opening relies on food photography with enough resolution to show embossed biscuit lettering, porous baked edges, the white filling, and reflected light along caramel edges. The cut product explains its construction visually. Preserve this detail at mobile sizes.

The background pattern consists of broad semicircular lobes connected by slanted bands, with staggered arrangements. Its geometry is crisp while the underlying substrate is softly mottled. The same family of forms appears in white, seasonal coral packaging, and light blue footer decoration. Reusing that shape language matters more than adding unrelated decorative illustrations.

The apple package photograph provides a second image scale: small, complete retail objects with legible overall graphics. It shows both the exterior carton and the interior tray. Preserve their proportions and native shadows; do not crop packaging as aggressively as the opening scene.

### Observed Asset References

No original image URLs or filenames were supplied. The references below identify visible subjects without inventing asset paths.

| Asset or artwork | Original-page evidence | Use |
| --- | --- | --- |
| Biscuit and caramel opening scene | Desktop and mobile opening screenshots | Primary product impression |
| Large black wordmark | Opening screenshots and measured H1 bounds | Main identity |
| Compact blue/white wordmark | Scrolled product and footer screenshots | Persistent identity |
| Pale semicircular paper pattern | Opening screenshots | Background texture and geometry |
| Apple carton and open tray | Desktop product screenshot | Retail package presentation |
| Coral curved pattern | Desktop product screenshot | Seasonal product backdrop |
| Mottled blue surface and pale-blue curves | Desktop/mobile closing screenshots | Brand atmosphere and closing decoration |
| Phone, envelope, Instagram, chevrons, four-dot menu | Relevant scrolled screenshots | Utility identification |

Asset format, intrinsic resolution, source filenames, and image-layer structure remain unknown. Specialist and store imagery should not be inferred from the product copy or vacant areas in element measurements.

## Layout & Responsive Behavior

The site retains a long document at both inspected widths. Desktop composition leaves room for a fixed navigation rail while centering most headings and editorial content. Product visual panels can exceed that central width, and decorative backgrounds can extend farther still.

Mobile changes composition and ordering rather than applying a single scale factor.

| Behavior | Desktop observation | Mobile observation |
| --- | --- | --- |
| Opening | Matches the 1000px viewport height | Approximately 619px high, revealing the next blue section |
| Compact navigation | Left rail with six section links | Joined `LINEUP` / `MENU` control at upper right |
| Main content | Common 806px central region | 351px region with 19.5px side insets |
| Main English type | 72px | 38px |
| Leading news entry | Flex layout with 440px text column | Block layout with 351px text column |
| Quality statements | Three horizontal positions | Three vertically stacked statements |
| Product narrative | Image and descriptive copy alongside one another | Copy follows the visual |
| Retail information | Package/notes and price/actions in separate columns | Sequential content with narrower centered utility groups |
| Store actions | 270px outlined pill | 260px orange-filled pill |
| Contact methods | Below company information | Above company information; two panels remain side by side |
| Cookie notice | Text and button in one row | Wrapped text above a wide button |

The mobile opening wordmark occupies approximately 85.5% of the viewport width, compared with 48.5% on desktop. This preserves brand presence while the surrounding image crop changes substantially.

The mobile cookie notice occupies approximately 18.4% of the viewport height and visibly overlays the lower footer, including part of the copyright area. In a new implementation, reserve enough end-of-document clearance for persistent controls and safe areas.

Only 1440px and 390px widths were inspected. The original breakpoint, tablet composition, landscape behavior, zoom response, and viewport-height formulas were not supplied. The 960px breakpoint in the Quick Start is a recommendation, not a recovered source value.

## Do’s and Don’ts

### Do

- Preserve the contrast between glossy caramel, crisp biscuit texture, and matte patterned paper.
- Keep the opening wordmark large, isolated, and clear of the main food detail.
- Use Aviano for the measured English display role and restrained Japanese sans-serif copy.
- Retain generous product spacing and the relatively small package-and-price groups.
- Reuse the semicircular pattern family across paper, seasonal packaging, and blue decoration.
- Keep availability labels distinct from navigational actions.
- Preserve the mobile changes in button fill, content stacking, and contact order.
- Use thin rules and outlines for company information and contact panels.

### Don’t

- Don’t replace the photographed caramel with a flat orange blob or a generic gradient.
- Don’t shrink the whole desktop opening to fit a phone.
- Don’t turn every product, news item, and company row into a rounded shadow card.
- Don’t assign the wordmark a font name based solely on its appearance.
- Don’t spread the narrow Japanese caption tracking into body paragraphs.
- Don’t interpret a transition declaration as proof of a particular hover effect.
- Don’t invent an expanded menu, ripple effect, profile modal, or cart flow.
- Don’t remove useful ingredient, storage, quantity, and store information to make the page resemble a single-action campaign.

## Recommended Implementation Additions

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

- Build section navigation as real anchors, expose the active section with `aria-current`, and account for fixed controls when positioning anchor targets.
- Give the menu button an accessible name and expanded state. Define keyboard behavior only when the actual menu design is available.
- Use semantic headings, a definition list or accessible table for company details, and a button for cookie acceptance.
- Check small white text on orange and small blue navigation text for contrast. Where necessary, use a darker action variant while retaining the palette relationship.
- Keep full product and price information available as text. Provide meaningful alternatives for the opening product image and package photographs.
- Make decorative repeated text and background geometry nonessential to assistive technology.
- Respect reduced motion and preserve content visibility if animation or JavaScript is unavailable.
- Avoid obscuring the final links and copyright beneath the cookie notice; update reserved space when the notice wraps or is dismissed.

## Agent Prompt Guide

### Quick Color Reference

- Measured text and contrast pair: black `#000000`, white `#ffffff`.
- Measured desktop navigation: blue `#008cbd`.
- Measured availability and mobile store action: orange `#cd7511`.
- Estimated neutral product surface: `#f4f4f4`.
- Estimated pond fallback: `#299ac2`, with a supplied mottled texture.
- Estimated light-blue geometry: `#7dcdf0`.
- Seasonal coral belongs primarily to the apple artwork and packaging.

### Overall Prompt

“Create a Japanese confectionery brand website inspired by BLUE POND's documented current homepage. Open with detailed biscuit-sandwich photography, a cut filling, a large glossy caramel spill, pale textured paper, broad slanted semicircular patterns, and a wide black graphic wordmark near the bottom. Follow with spacious brand and product chapters. Use Aviano-style serif English headings at 72px desktop and 38px mobile, small narrow Japanese captions, and calm Japanese sans-serif descriptions. Keep a compact desktop section rail, blue textured story/footer surfaces, small orange availability badges, complete package photographs, and restrained store links. On mobile, recompose the hero, stack product information, fill store buttons orange, and move the two contact panels above company information. Do not invent undocumented menu or animation behavior.”

### Example Component Prompts

1. **Opening:** “Compose an edge-to-edge confectionery opening with oversized caramel entering from the upper right, one whole embossed biscuit sandwich and one cut sandwich, a pale semicircular paper pattern, and an independent black wordmark near the bottom. Produce a dedicated tall-phone composition that keeps the product large.”
2. **Product information:** “Place a closed seasonal carton and an open tray on a broad pale-gray field. Keep their photographic shadows. Put small orange/white status labels, quantity, price, an ingredient link, and a thin orange store pill to the right. Use generous whitespace and no enclosing card.”
3. **Section heading:** “Use a large tracked serif English heading over two or three lines, paired with a narrow Japanese caption near the right edge. Scale from 72px to 38px and preserve the small caption's separate reading direction on mobile.”
4. **Navigation:** “Create a compact blue desktop wordmark and six small uppercase links in a left rail. Mark the active section with a fine rounded outline. Over blue content, use white chrome. On mobile, show a small wordmark and joined white/orange lineup-and-menu control; leave the expanded menu unspecified.”
5. **Closing section:** “Use a mottled pond-blue background, white company text, thin horizontal table rules, and two outlined icon-over-label contact panels. Finish with a centered Instagram symbol, small copyright, and large pale-blue semicircular geometry. Place the contact panels before company information on mobile.”

## Quick Start

### CSS Custom Properties

This is a practical reconstruction scaffold, not extracted source CSS. It preserves measured colors, type scales, control sizes, and important relationships. The 960px breakpoint, layout formulas, mobile hero aspect ratio, and focus treatment are recommendations. Estimated colors are marked in comments.

Supply authorized photography and wordmark artwork in the matching image elements. Set `--bp-pond-texture` to an available texture image if desired; no original asset paths were provided. Declaring the observed font-family names does not load their font files.

```css
:root {
  /* Measured colors */
  --bp-white: #fff;
  --bp-ink: #000;
  --bp-blue: #008cbd;
  --bp-orange: #cd7511;
  --bp-soft-white: rgb(255 255 255 / 40%);

  /* Visual approximations */
  --bp-paper: #f4f4f4;
  --bp-pond-base: #299ac2;
  --bp-wave: #7dcdf0;
  --bp-seasonal: #e77b73;
  --bp-cookie-veil: rgb(0 0 0 / 55%);
  --bp-pond-texture: none;

  /* Observed family declarations with practical fallbacks */
  --bp-font-body: 'zen-kaku-gothic-new', 'Yu Gothic', YuGothic, sans-serif;
  --bp-font-display: 'aviano', serif;
  --bp-font-utility: 'new-atten', sans-serif;
  --bp-font-cookie: Helvetica, Calibri, Arial, sans-serif;

  --bp-title-size: 72px;
  --bp-specialist-size: 40px;
  --bp-body-size: 16px;
  --bp-content-width: 806px;
  --bp-contact-width: 840px;
  --bp-action-width: 270px;
  --bp-action-height: 56px;
  --bp-radius-action: 50px;
  --bp-radius-contact: 6.508px;
  --bp-radius-cookie: 8px;
  --bp-link-easing: cubic-bezier(0.75, 0, 0.35, 1);

  /* Recommended clearance while the cookie notice is visible */
  --bp-cookie-clearance: 80px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--bp-ink);
  background: var(--bp-white);
  font-family: var(--bp-font-body);
  font-size: var(--bp-body-size);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

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

.bp-page { background: var(--bp-paper); }
.bp-container {
  width: min(90%, var(--bp-content-width));
  margin-inline: auto;
}

/* Recommended target offset for persistent navigation */
section[id] { scroll-margin-top: 80px; }

.bp-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--bp-white);
}
.bp-hero__art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.bp-hero__wordmark {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: min(48.5%, 698.4px);
  height: auto;
  transform: translateX(-50%);
}

/* Visibility and section state require application integration. */
.bp-chrome { --bp-chrome-color: var(--bp-blue); }
.bp-chrome.is-on-pond { --bp-chrome-color: var(--bp-white); }
.bp-chrome[hidden] { display: none; }
.bp-brand {
  position: fixed;
  z-index: 30;
  top: 30px;
  left: 2vw;
  width: 187px;
  color: var(--bp-chrome-color);
}
.bp-desktop-nav {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: 2vw;
  display: grid;
  justify-items: start;
  gap: 8px;
  transform: translateY(-50%);
  color: var(--bp-chrome-color);
}
.bp-desktop-nav a {
  padding-inline: 7px;
  border-radius: 999px;
  font: 500 14px/26px var(--bp-font-utility);
  text-decoration: none;
  transition: color 300ms, opacity 300ms;
}
.bp-desktop-nav a[aria-current='location'] {
  outline: 1px solid currentColor;
  outline-offset: -1px;
}
.bp-mobile-controls { display: none; }

.bp-section-heading { position: relative; }
.bp-section-title {
  margin: 0;
  color: var(--bp-ink);
  font-family: var(--bp-font-display);
  font-size: var(--bp-title-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.bp-section-title--small { font-size: var(--bp-specialist-size); }
.bp-section-caption {
  position: absolute;
  top: 13px;
  right: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  /* Recommended vertical composition, not recovered source CSS */
  writing-mode: vertical-rl;
  letter-spacing: normal;
}

.bp-news { padding-block: 150px; }
.bp-quality { padding-block: 220px 360px; }
.bp-quality-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  margin-top: 100px;
  font-size: 18px;
  line-height: 2;
}

.bp-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 1060px);
  margin-inline: auto;
}
.bp-feature__image { width: 100%; height: auto; }
.bp-feature__copy {
  padding: 53px;
  background: var(--bp-paper);
}
.bp-feature__lead {
  margin: 0 0 48px;
  font-size: 20px;
  line-height: 36px;
}
.bp-feature__description {
  margin: 0;
  font-size: 16px;
  line-height: 36px;
}

/* Approximate two-column grouping; original grid rules are unknown. */
.bp-offer {
  display: grid;
  grid-template-columns: minmax(0, 339px) minmax(0, 270px);
  justify-content: center;
  align-items: center;
  gap: 96px;
  width: min(90%, var(--bp-content-width));
  margin: 220px auto 0;
}
.bp-offer__package { width: 100%; height: auto; object-fit: contain; }
.bp-notes { margin-top: 40px; font-size: 14px; line-height: 23.1px; }
.bp-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.bp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 6px;
  border: 1px solid transparent;
  color: var(--bp-orange);
  background: var(--bp-white);
  font-size: 12px;
  line-height: 12px;
}
.bp-badge--limited { color: var(--bp-white); background: var(--bp-orange); }
.bp-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 10px;
}
.bp-price-row strong {
  /* Screenshot-based estimate; child typography was not measured */
  font-size: 28px;
  font-weight: 400;
  white-space: nowrap;
}
.bp-price-row small { font-size: 14px; }
.bp-ingredient-link {
  display: block;
  width: fit-content;
  margin: 76px 0 26px auto;
  font-size: 14px;
  line-height: 23.1px;
  text-decoration: none;
}
.bp-action {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, var(--bp-action-width));
  min-height: var(--bp-action-height);
  padding: 20px 30px;
  border: 1px solid var(--bp-orange);
  border-radius: var(--bp-radius-action);
  color: var(--bp-ink);
  background: transparent;
  font-size: 14px;
  line-height: 14px;
  text-decoration: none;
  transition: color 400ms, background-color 400ms;
}
.bp-action::after {
  content: '';
  position: absolute;
  right: 16px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.bp-pond {
  color: var(--bp-white);
  background-color: var(--bp-pond-base);
  background-image: var(--bp-pond-texture);
  background-size: cover;
}
.bp-contact {
  padding-block: 185px 267px;
  padding-bottom: max(267px, var(--bp-cookie-clearance));
}
.bp-contact__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'company notes' 'actions actions' 'social social';
  gap: 84px;
  width: min(90%, var(--bp-contact-width));
  margin-inline: auto;
}
.bp-company { grid-area: company; }
.bp-company__title { margin: 0; font-size: 20px; line-height: 52px; }
.bp-company dl { margin: 0; }
.bp-company__row {
  display: grid;
  grid-template-columns: 35% minmax(0, 1fr);
  min-height: 52px;
  padding-block: 14px;
  border-top: 1px solid rgb(255 255 255 / 65%);
  font-size: 14px;
  line-height: 23.1px;
}
.bp-company dd { margin: 0; overflow-wrap: anywhere; }
.bp-contact__notes { grid-area: notes; font-size: 14px; line-height: 1.8; }
.bp-contact__actions {
  grid-area: actions;
  display: flex;
  justify-content: center;
  gap: 66px;
}
.bp-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 195px;
  min-height: 136px;
  padding: 18px 8px;
  border: 1px solid currentColor;
  border-radius: var(--bp-radius-contact);
  color: var(--bp-white);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.bp-contact-card small { display: block; margin-top: 7px; font-size: 12px; }
.bp-contact-card svg { width: 28px; height: 28px; }
.bp-contact__social { grid-area: social; text-align: center; }
.bp-copyright { margin-top: 30px; font-size: 16px; line-height: 1; }

.bp-cookie {
  position: fixed;
  z-index: 100;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 14px 25.2px calc(14px + env(safe-area-inset-bottom, 0px));
  color: var(--bp-white);
  background: var(--bp-cookie-veil);
  font-family: var(--bp-font-cookie);
}
.bp-cookie[hidden] { display: none; }
.bp-cookie p { margin: 0; font-size: 14px; line-height: 1.8; }
.bp-cookie a { text-decoration: underline; }
.bp-cookie button {
  min-height: 48.4px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--bp-radius-cookie);
  color: var(--bp-ink);
  background: var(--bp-white);
  font: 700 16px/1.4 var(--bp-font-cookie);
  cursor: pointer;
}

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

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (max-width: 960px) {
  :root {
    --bp-title-size: 38px;
    --bp-specialist-size: 26px;
    --bp-body-size: 15px;
    --bp-action-width: 260px;
    --bp-cookie-clearance: 180px;
  }
  .bp-hero { height: auto; aspect-ratio: 390 / 619; }
  .bp-hero__art { position: absolute; inset: 0; }
  .bp-hero__wordmark { width: 85.465%; bottom: 10.5%; }
  .bp-brand { top: 30px; left: 16px; width: 132.6px; }
  .bp-desktop-nav { display: none; }
  .bp-mobile-controls {
    position: fixed;
    z-index: 30;
    top: 17px;
    right: 15px;
    display: flex;
    align-items: center;
    border: 1px solid var(--bp-orange);
    border-radius: 50px;
    color: var(--bp-orange);
    background: var(--bp-white);
    font: 400 14.56px/37.44px var(--bp-font-utility);
  }
  .bp-mobile-controls a { padding-inline: 16px; text-decoration: none; }
  .bp-mobile-controls button {
    min-height: 36px;
    padding-inline: 17px;
    border: 0;
    border-radius: 50px;
    color: var(--bp-white);
    background: var(--bp-orange);
    cursor: pointer;
  }
  .bp-section-caption { top: 10px; font-size: 12px; }
  .bp-news { padding-block: 80px; }
  .bp-quality { padding-block: 100px 140px; }
  .bp-quality-list {
    grid-template-columns: 1fr;
    gap: 70px;
    margin-top: 70px;
    font-size: 17px;
  }
  .bp-feature { grid-template-columns: 1fr; }
  .bp-feature__copy { padding: 80px 10% 0 5%; }
  .bp-feature__lead { margin-bottom: 36px; font-size: 18.72px; line-height: 37.44px; }
  .bp-feature__description { font-size: 14.56px; line-height: 29.12px; }
  .bp-offer { grid-template-columns: 1fr; gap: 40px; margin-top: 100px; }
  .bp-offer__package { width: min(100%, 300px); margin-inline: auto; }
  .bp-offer__details { width: min(100%, 260px); margin-inline: auto; }
  .bp-notes { width: min(100%, 233.4px); margin-inline: auto; }
  .bp-ingredient-link { margin: 30px auto 26px; }
  .bp-action { margin-inline: auto; color: var(--bp-white); background: var(--bp-orange); }
  .bp-action--reservation { border-color: var(--bp-ink); background: var(--bp-ink); }
  .bp-contact { padding-top: 93.6px; padding-bottom: max(135.2px, var(--bp-cookie-clearance)); }
  .bp-contact__layout {
    grid-template-columns: 1fr;
    grid-template-areas: 'actions' 'company' 'notes' 'social';
    gap: 60px;
  }
  .bp-contact__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6%; }
  .bp-contact-card { width: 100%; min-height: 113.36px; font-size: 16px; }
  .bp-company__row { min-height: 46px; padding-block: 11px; }
  .bp-copyright { font-size: 12px; }
  .bp-cookie { grid-template-columns: 1fr; gap: 14px; }
  .bp-cookie p { font-size: 13px; line-height: 1.7; }
  .bp-cookie button { width: 100%; }
}

/* Recommended fallback for any subsequently added motion */
@media (prefers-reduced-motion: reduce) {
  .bp-page *, .bp-chrome *, .bp-cookie * {
    animation: none !important;
    transition: none !important;
  }
}
```

The CSS supplies presentation hooks. Active-section tracking, header visibility, menu opening, and consent state require separate implementation and testing. Use one accessible set of contact links and the grid areas above to reorder it across widths. Place decorative footer artwork separately from the company text so its cropping cannot disrupt reading.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not establish that the original website uses Tailwind. Define the preceding custom properties first.

```css
@theme inline {
  --color-brand-blue: var(--bp-blue);
  --color-brand-orange: var(--bp-orange);
  --color-brand-ink: var(--bp-ink);
  --color-brand-paper: var(--bp-paper);
  --color-pond: var(--bp-pond-base);
  --color-wave: var(--bp-wave);

  --font-brand-body: var(--bp-font-body);
  --font-brand-display: var(--bp-font-display);
  --font-brand-utility: var(--bp-font-utility);

  --text-brand-title: var(--bp-title-size);
  --text-brand-specialist: var(--bp-specialist-size);
  --text-brand-body: var(--bp-body-size);

  --radius-brand-action: var(--bp-radius-action);
  --radius-brand-contact: var(--bp-radius-contact);
  --radius-brand-cookie: var(--bp-radius-cookie);
}
```

## Sources & Evidence

- [BLUE POND homepage](https://www.bluepond.jp/): original and final inspected URL, reported HTTP 200, page title `ブルーポンド | BLUE POND`, rendered homepage text, link destinations, element bounds, and computed styles.
- **Capture record:** September 12, 2026, `2026-09-12T13:49:43.337Z`, equivalent to 22:49:43 JST. Desktop viewport: 1440 × 1000. Mobile viewport: 390 × 844.
- **Original-page visual evidence:** three desktop screenshots covering the opening, apple package information, and closing section; two mobile screenshots covering the opening and company/footer region.
- **Company evidence:** the homepage's [contact section](https://www.bluepond.jp/#anc_contact) identifies `株式会社BLUE POND`. No website production credit was established by the inspected original-page evidence.
- **Observed navigation scope:** the capture process traversed intermediate scroll positions. Section links, ingredient links, store links, telephone links, the map destination, reservation destination, and inquiry destination were available as rendered href evidence. Their destination interfaces were not inspected.
- **Readiness limitations:** the supplied process waited for loading, visible image decoding, finite animations, and sampled layout/text stability within stated time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This does not establish every delayed state or provide a continuous motion record. SharedWorkers and service workers were disabled during collection.

This reference describes the current page represented by the supplied inspection. Menu expansion, consent results, specialist activation, hover states, intermediate breakpoints, animation keyframes, asset URLs, and individual font-file loading remain unverified. Visual estimates and implementation recommendations are identified separately from measured source values.