# allée — Style Reference

> A quiet patisserie visit told through roasted browns, fine lettering, and photographs with room to breathe.

**Website:** [alleeomotesando.jp](https://alleeomotesando.jp/)
**Original URL:** https://alleeomotesando.jp/
**Final URL:** https://alleeomotesando.jp/
**Theme:** dark brown canvas with warm gradient fields and white typography
**Inspected:** October 2, 2026, at 06:08:35 JST; supplied retrieval timestamp: October 1, 2026, at 21:08:35.328 UTC
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current single-page patisserie and café website, including its opening composition, Story, Sweets, Drink, Space / Service, Shop, persistent navigation, social link, and footer. Visual evidence includes three desktop captures and two mobile captures; supplied DOM measurements cover the longer document at both widths. External shopping, map, and social destinations were not inspected.

allée presents its products and physical space as a continuous editorial story. Deep cocoa brown supplies the main surface. Broad areas of rust and muted ochre add warmth, while fine white lettering and a delicate contour emblem keep the interface restrained. Large photographs introduce the sensory detail: directional light, glazed ceramics, dark wood, cake, a book, and a softly illuminated storefront.

The characteristic layout is spacious and asymmetric. Images touch a viewport edge, text occupies narrow regions elsewhere, and English section labels remain small. The opening Japanese copy runs vertically across the boundary between a gradient field and a photograph. On mobile, the page preserves this overlap while reorganizing the navigation and stacking most editorial content. Shopping remains available through an external store link; the inspected page primarily introduces the brand, products, and place.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed-style records. Coordinates describe those captured layouts, not universal positioning rules.
- **Visual estimates** describe screenshot geometry or colors that were not supplied as computed values. Approximate hexadecimal colors below are implementation starting points, not pixel samples.
- **Derived** values are calculations from measured coordinates or colors. Their basis is stated where relevant.
- **Recommendations** describe an adaptation or improvement. The CSS Quick Start is an implementation scaffold, not extracted production CSS.
- Token names are descriptive aliases. Only explicitly identified source custom properties were present in the evidence.
- Static captures establish composition. Transition declarations establish timing configuration, but do not establish animation triggers, movement paths, hover results, or menu behavior.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Cocoa canvas | `#41342b` | `--allee-cocoa` | Measured `rgb(65, 52, 43)` on the body, Sweets, Drink, Shop, and footer |
| Primary white | `#ffffff` | `--allee-white` | Measured on section labels, product headings, introductory copy, and the footer wordmark |
| Secondary white | `rgba(255, 255, 255, 0.7)` | `--allee-muted` | Measured on product descriptions, address details, link captions, and copyright |
| Icon white | `rgba(255, 255, 255, 0.8)` | `--allee-icon` | Measured on the desktop Instagram navigation icon |
| Deep black | `#000000` | `--allee-black` | Measured background of the Space / Service section; photographs and other layers may cover it |
| Warm rust | Approximately `#6f311d` | `--allee-rust` | Visual estimate for the reddish region of the opening gradient |
| Muted ochre | Approximately `#64492b` | `--allee-ochre` | Visual estimate for the golden brown portion of gradient fields |
| Fine outline | Suggested `rgba(255, 255, 255, 0.5)` | `--allee-line` | Recommended approximation of the pale button outlines and short section rules; exact border color was not supplied |

Secondary white composited over the measured cocoa canvas produces approximately `#c6c2bf`. This is a **derived flat-background equivalent**, not a separate source color. Preserve alpha where text crosses different surfaces.

### Gradient Treatment

The opening capture has a broad rust region on the left, muted ochre toward the middle, and darker brown toward the right. The Drink introduction uses the same warm family with a different distribution, placing a stronger reddish region toward the right. These gradients act as atmospheric fields across large areas.

The supplied custom-property list contains gradient-related properties, but its recorded color stops are transparent. It does not reveal a complete recipe for the visible gradients. Their exact stops, layering, and possible animation remain unverified.

**Recommended approximation:** combine a cocoa base with broad radial or linear gradients. Keep transitions diffuse, with no sharp bands or luminous highlights. Use separate gradient arrangements for the opening and section introductions instead of repeating one identical background everywhere.

Raw wrapper colors such as `#333333`, and the browser-level Times font, do not describe the visible brand typography. Several anchors contain independently styled text children; use the child values when reproducing their appearance.

## Tokens — Typography

### Latin Text — Inter

**Measured family:** `Inter`, also exposed by source custom property `--s-font-1f9e35e7`.

Most measured English headings and identity text use weight `200`. Their light strokes and generous tracking are essential to the page's quiet character. Section labels stay at 16px on both inspected widths. Larger product names use 24–28px depending on the component and viewport.

The captions inside the outlined Online shop and Instagram links use weight `400`, giving these actions slightly more substance without making them visually loud.

### Japanese Text — Koburina Gothic

Two named source families are confirmed:

- `'こぶりなゴシック W1 JIS2004'`, exposed by `--s-font-e5ae5867`, appears throughout Japanese body copy, section statements, and mobile opening copy.
- `'こぶりなゴシック W3 JIS2004'`, exposed by `--s-font-6fb9e6fb`, appears on the desktop opening statement.

The W1/W3 distinction is part of the family name. Most sampled elements report CSS `font-weight: 400`; do not translate the family suffixes into invented CSS weights.

Despite its literary spacing, the Japanese copy uses a Gothic family. A serif substitution would materially change the letterforms. Any fallback stack in the Quick Start is a recommendation, not a verified source fallback.

### Icons and Brand Mark

The desktop Instagram icon reports `FontAwesome`, 20px, weight `400`. The captures also show small outline shopping-bag and menu symbols, but their implementation families were not included in the sampled records.

The brand emblem is a very fine organic contour. Its exact asset format and path were not supplied. Preserve an authorized original asset when available; do not substitute a generic leaf or draw an assumed symbol from its outline.

### Type Scale

Values below are measured unless explicitly marked as estimates. Sizes, line heights, and tracking are in pixels.

| Role | Desktop | Mobile | Family / weight | Tracking |
| --- | --- | --- | --- | --- |
| Section label, such as Drink | `16 / 22.4` | `16 / 22.4` | Inter / 200 | `1.6` at both widths |
| Opening vertical statement | `20 / 50` | `18 / 39.6` | W3 / 400 desktop; W1 / 400 mobile | `8` → `5.4` |
| Story introduction in Japanese | `20 / 44` | `18 / 36` | W1 / 400 | `8` → `7.2` |
| Section statement in Japanese | `20 / 20` | `18 / 36` | W1 / 400 | `8` → `7.2` |
| Sweeten the moments. | `20 / 40` | `13 / 26` | Inter / 200 | `2` → `1.3` |
| Crepe and Coffee headings | `28 / 39.2` | `24 / 33.6` | Inter / 200 | `5.6` → `4.8` |
| Basque cheesecake and Tea headings | `26 / 36.4` | `28 / 39.2` | Inter / 200 | `5.2` → `5.6` |
| Fruit tart label | `20 / 28` | `18 / 25.2` | Inter / 200 | `2` → `1.8` |
| Milk brew and Cafe space labels | `20 / 28` | `20 / 28` | Inter / 200 | `2` |
| Main product descriptions | `15 / 36` | `15 / 36` | W1 / 400 | Often `3` → `2.25`; some remain `3` |
| Smaller sweets descriptions | `15 / 30` | `15 / 30` | W1 / 400 | `1.5` |
| Address and contact values | `15 / 27` | `15 / 27` | W1 / 400 | `1.5` |
| Shop identity | `24 / 33.6` | `24 / 33.6` | Inter / 200 | `2.4` |
| Instagram introduction | `18 / 32.4` | `18 / 32.4` | W1 / 400 | `1.8` |
| Outlined-link caption | `16 / 28.8` | `16 / 28.8` | Inter / 400 | `1.6` |
| Mobile Menu caption | — | `11 / 15.4` | Inter / 200 | `1.1` |
| Mobile Online shop caption | — | `11 / 12.1` | Inter / 200 | `0.88` |
| Footer wordmark | `16 / 22.4` | `16 / 22.4` | Inter / 200 | `1.6` |
| Copyright | `12 / 16.8` | `12 / 16.8` | Inter / 200 | `1.2` |

The larger mobile Basque cheesecake heading occupies a measured two-line box approximately 78.4px high. Responsive typography is therefore component-specific: it does not uniformly shrink on phones.

The desktop navigation appears to use similarly fine, tracked lettering at approximately 16px. Its text-child styles were not included separately, so its exact visible family and weight should not be inferred from the generic anchor wrapper.

### Text Rhythm

Product copy uses short, deliberate lines with substantial vertical space: `15px / 36px` gives a line-height ratio of `2.4`. Japanese statements use unusually wide tracking, often `0.4em`. Latin labels generally use `0.1em`, increasing to `0.2em` for featured product names.

Apply these values by role. Extending `0.4em` tracking to ordinary paragraphs would produce a different reading rhythm and unnecessary wrapping.

## Tokens — Spacing & Shapes

**Density:** sparse editorial composition, with compact navigation details and large intervals between content groups.

**Layout basis:** repeated viewport proportions rather than a single centered maximum-width container. A 10% inset appears in numerous section labels and mobile text blocks.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Footer emblem-to-wordmark gap | About `12px` | Derived from measured footer geometry and visible emblem size |
| Outlined-link padding | `16px` | Measured on Online shop and Instagram anchors |
| Small product title-to-copy gap | `24px` desktop; `20px` mobile | Derived from Fruit tart title and paragraph bounds |
| Desktop navigation gaps | Generally `28px` | Derived from adjacent link rectangles |
| Footer vertical padding | `30px` | Measured at both widths |
| Social heading-to-button gap | `48px` desktop; `36px` mobile | Derived from measured rectangles |
| Mobile contact-value indentation | `40px` beyond the main inset | Values begin at x=79, compared with the x=39 content inset |
| Sweets bottom padding | `200px` desktop; `60px` mobile | Measured section padding |
| Sweets and Drink label offset | About `188.3px` desktop; `80px` mobile | Derived from section and heading top coordinates |
| Shop label offset | `160px` desktop; `100px` mobile | Derived from section and heading top coordinates |
| Story label offset | About `330.1px` desktop; `120px` mobile | Derived from section and heading top coordinates |
| Main section inset | `144px` desktop; `39px` mobile | Measured; both equal 10% of viewport width |

These values do not form a strict universal spacing scale. The page uses different amounts of space to stage individual photographs and passages.

### Border Radius and Rules

| Element | Treatment | Evidence |
| --- | --- | --- |
| Major photographs | Square corners | Visible in supplied captures |
| Main content sections | No rounded container treatment | Measured section radius `0px` |
| Instagram and Online shop links | `4px` radius | Measured |
| Outlined social button | Approximately `1px` pale border | Visual estimate; border width was not included in computed evidence |
| Short section rule | Approximately `16 × 1px` | Visual estimate from Drink and mobile Story captures |

### Layout Measurements

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header box | `1440 × 114.66px` | `390 × 101.33px` | Measured |
| Header padding | `24px 56px` | `24px` | Measured |
| Header emblem link | `40 × 66.66px`, x=56, y=24 | `32 × 53.33px`, x=179, y=24 | Measured |
| Opening section height | `1300px` | `675.19px` | Measured |
| Opening photograph | About `1296px` wide, beginning at y=400 | About `390 × 380px`, beginning at y=295 | Screenshot estimates |
| Vertical-copy box | x=194.41, y=280; `100 × 252px` | x=78, y=225.39; `79.19 × 210.61px` | Measured |
| Secondary sweets text columns | Three columns, each about `369.59px` | One column, `312px` wide | Measured text rectangles |
| Instagram button | `300 × 62.80px` | `280 × 62.80px` | Measured |
| Inline Online shop button | `172.63 × 62.80px` | Same | Measured |
| Storefront photograph width | About `432px`, or 30% | About `312px`, or 80% | Screenshot estimates |
| Footer | About `197.84px` high | Same | Measured |

## Components

### Persistent Header

**Role:** identity, section navigation, and direct access to the external store.

On desktop, the thin emblem sits at the far left. A single navigation row occupies the right side, beginning around x=685 in the 1440px layout. The labels are Top, Story, Sweets, Drink, Space / Service, shop, and Online shop, followed by an Instagram icon. Online shop includes a small bag symbol.

The header has a transparent background. Its position remains consistent across the supplied opening, middle, and ending captures, supporting a persistent overlay treatment. The actual CSS positioning property was not included in the evidence.

On mobile, the header becomes three separate anchors in the composition: a menu control on the left, the emblem centered, and a shopping control on the right. The Menu caption sits beneath a small outline symbol; Online shop wraps onto two lines beneath the bag icon. The center emblem is smaller than its desktop counterpart.

**Observed limitation:** content can remain visible behind the header, including text near the top of scrolled desktop captures. The open mobile menu, active navigation states, and hover appearance were not supplied. Do not invent a full-screen menu design as an original-site observation.

### Opening Composition

**Role:** establish the café's mood before introducing individual products.

The opening uses three layers:

1. A warm gradient field occupying the upper area and exposed right margin.
2. A large photograph aligned to the left edge, beginning approximately 400px below the desktop viewport top.
3. Two vertical columns of Japanese copy crossing the gradient-to-photo boundary.

The observed statement is “上質を愉しむ、大人のとっておき。” The right column begins the sentence. A vertical writing mode is an appropriate implementation method; the exact source declaration was not supplied.

The photograph shows a book, coffee, and cheesecake in directional light. The opening desktop image occupies approximately 90% of the viewport width, leaving a brown strip at the right. On mobile it fills the width, with a much tighter crop. The copy begins approximately 70px above the image boundary on mobile, compared with about 120px on desktop.

There is no separate large hero button in the supplied opening view. The persistent shopping link remains the available commercial action.

### Story Sequence

**Role:** communicate the brand's pace and approach to sweets.

The story begins with a small Inter label, The story of allée’s, and a short rule. Below it is a widely tracked Japanese statement. The section continues through the English line Sweeten the moments. and a longer Japanese passage.

Desktop text moves across the page: the introductory heading begins at x=144, the English line is centered, and the longer passage begins around x=835. The measured narrative paragraph uses 15px W1 text, 36px leading, and 3px tracking in a box about 461px wide.

On mobile, the first label begins at x=39, 120px after the section starts. The main Japanese introduction becomes 18px. The later narrative retains its 15px size and generous 36px leading rather than becoming dense phone copy.

The mobile Sweeten the moments. element has a 390 × 422px layout box despite a 26px text line height. Its element dimensions describe a staged content region, not a 422px-tall line of text. The captures do not show enough of this region to establish its exact image relationship.

### Section Introduction

**Role:** mark the transition into Sweets, Drink, or Space / Service.

The desktop introduction places the English section label at 10% of the viewport width and the Japanese statement at 30%. In the Drink capture, these elements sit within a large warm gradient field. A short horizontal rule beneath the English label supplies a small structural accent.

The Drink field is approximately 460px tall in the screenshot. The coffee photograph begins about 40px before the field's lower edge, creating a layered boundary. These dimensions are visual estimates.

On mobile, the section label and Japanese statement share the x=39 inset and stack vertically. Sweets and Drink labels begin 80px after their sections start; their statements begin about 159px after the section start. Preserve the spacious separation between these two text roles.

### Featured Product Spread

**Role:** give selected products the scale and pacing of an editorial feature.

Crepe and Coffee headings appear in the right region on desktop, centered around x=1152, or 80% of the viewport. Their descriptions continue lower in the left region, around x=262. Basque cheesecake places its heading in the left region, centered around x=288, while its description appears later on the right, around x=843.

This is a staggered composition: title, photography, and descriptive text do not form a compact card with a shared top edge. The Coffee capture directly shows a large left-aligned photograph with the product title entering the right region near the bottom of the viewport.

Use narrow paragraphs, large image regions, and substantial vertical separation. Major titles are light Inter with `0.2em` tracking. Descriptions use muted white, 15px Japanese text, and 36px leading.

On mobile, Crepe and Coffee headings become centered 24px text. Basque cheesecake becomes 28px and wraps across two lines. Descriptions move to the main 39px inset. The supplied product entries are editorial content; the link inventory does not show product-detail or add-to-cart links for them.

### Secondary Sweets Group

**Role:** introduce Chou à la crème, Fruit tart, and Demi sec / Fours secs with a smaller content scale.

The desktop text layout has three columns beginning at x=60, x=535.20, and x=1010.41. Each description is about 369.59px wide. The calculated gap between columns is about 105.61px. The visible tail of this group appears above Drink in the middle desktop capture.

Fruit tart supplies a measured example of the group hierarchy: a 20px Inter label, then a 24px gap before a 15px Japanese paragraph with 30px leading. Text sits directly on the cocoa surface, with no visible card enclosure.

At 390px, the text groups stack into 312px columns with 39px side insets. The Fruit tart title becomes 18px, and the title-to-description gap becomes 20px. The supplied evidence does not establish a mobile carousel or image-switching control.

### Drink Subfeatures

**Role:** vary the editorial scale within the beverage section.

Coffee and Tea receive prominent headings. Milk brew and Herb tea use smaller labels with short descriptions. Herb tea includes the Japanese name “睡蓮” beside its English label.

Desktop positioning varies deliberately: Milk brew begins at x=720, while Herb tea begins around x=835. On mobile both return to the main x=39 inset. Milk brew remains 20px; Herb tea changes from 20px to 18px. Preserve these local differences rather than forcing every beverage through one typography preset.

### Space / Service Sequence

**Role:** move from product detail to the experience of visiting and gifting.

The section reports a black background and contains Cafe space and Takeout / Online shop passages. Desktop copy occupies narrow, widely separated regions: the first café description begins at x=1008, a later passage at x=288, and takeout information at x=864.

Mobile retains some asymmetry. Most passages begin at x=39, but the later café passage begins at x=117, or 30% of the viewport. This is evidence that the phone design does more than stack every element against one common edge.

The Online shop action measures approximately 172.63 × 62.80px, has 16px padding and a 4px radius, and links to `https://alleeonline.base.shop/`. Its caption is muted white Inter at 16px and weight 400. The destination and button geometry are verified; checkout behavior and destination styling are outside scope.

### Shop Information

**Role:** provide practical visiting and contact details without introducing a separate interface style.

On desktop, the Shop label starts at x=144 and the business name at x=576. Address and Contact Us labels occupy the left side of the information group, while values begin at x=726, a 150px offset from that group's left edge.

The information consists of the shop name, address, map link, telephone/fax text, and email link. The map and email are visibly underlined. The telephone appears as paragraph text in the sampled DOM, not a confirmed telephone link.

A storefront photograph sits at the left edge. The desktop capture shows an approximately 432 × 648px portrait region with a warm circular sign, dark window framing, and a person inside. On mobile, the visible photograph is about 312px wide, leaving an exposed cocoa strip on the right. Its full mobile height cannot be measured from the supplied cropped view.

The mobile information moves above the ending photograph and social block. The shop name starts at x=39; address and contact values start at x=79. Preserve this small internal indentation while keeping the text readable.

### Instagram Invitation

**Role:** close the main content with a restrained social action.

The desktop invitation begins at x=576. Its Japanese heading occupies one line at 18px with 32.4px leading. A 300px-wide outlined button follows after 48px.

On mobile, the heading becomes a centered two-line block approximately 243px wide. A 280px-wide button follows after 36px. The button contains an Instagram outline icon and a tracked 16px caption, centered as a group.

The measured 62.8px height is consistent with a 28.8px caption line, 16px vertical padding on each side, and an approximately 1px border. Border thickness is visually estimated; the other values are measured.

### Footer Signature

**Role:** finish with identity and quiet visual closure.

The footer has the same cocoa background and approximately 197.84px height at both widths. Its contents are centered: the contour emblem, the allée wordmark, then copyright.

The wordmark is 16px Inter, weight 200, with 1.6px tracking. Copyright is 12px Inter at the same weight, using muted white and 1.2px tracking. Vertical padding is 30px. The visible copyright reads © 2024 allée; that text is not evidence of the capture date or a redesign date.

### DOM-Only Identity Text

The supplied DOM also includes a centered 24px allée label and the lines Patisserie in Omotesando and Since 2022. The smaller text measures 12px on desktop and 10px on mobile.

These elements are absent from the settled opening screenshots. Their state and purpose are unresolved; they may belong to an introductory state, but a loading or splash sequence was not verified. Do not add them as a permanent masthead based only on their presence in the DOM.

## Tokens — Motion & Interaction

### Recorded Transition Configuration

| Element or group | Desktop declaration | Mobile declaration | What the evidence establishes |
| --- | --- | --- | --- |
| Body background | `0.5s cubic-bezier(0.4, 0.4, 0, 1)` | Same | A background transition is configured; its trigger is unknown |
| Many text and layout elements | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | Same | General transition configuration |
| Desktop navigation anchors | `0.8s cubic-bezier(0, 0.7, 0.22, 1)` | Desktop navigation not visible | Timing only; hover result was not exercised |
| Sweeten the moments. | `2s` with `0.3s` delay and the soft curve | `0.3s` without recorded delay | A viewport-specific transition difference |
| Long Story paragraph | `2s` with `0.6s` delay and the soft curve | `0.3s` without recorded delay | A longer desktop stagger is configured |
| Smaller sweets group heading | `2s` with `0.3s` delay | `0.3s` | Timing configuration |
| Social heading and action | `2s` with `0.3s` delay | `0.3s` | Timing configuration; entrance effect itself is unverified |

The records repeat transition entries for gradient angle, colors, and positions. Their presence does not prove that the visible background continuously animates. Sampled elements report `animation: none`; that does not rule out transitions, ancestor effects, pseudo-element effects, or script-driven behavior.

### Confirmed Navigation and Unverified Behavior

| Control | Confirmed destination or state | Limitation |
| --- | --- | --- |
| Logo and Top | `#top` | Scroll duration and offset were not measured |
| Story, Sweets, Drink, Space / Service, shop | `#story`, `#sweets`, `#drink`, `#space`, `#shop` | Active-section highlighting was not verified |
| Online shop | External store link | Destination flow not inspected |
| Map | External Google Maps link | Destination not opened |
| Email | `mailto:` link | No contact-form behavior implied |
| Instagram | External profile link | Destination not opened |
| Mobile Menu | Visible closed-state affordance | Open state, focus management, and dismissal behavior unverified |

**Recommended motion language:** use restrained opacity or short positional transitions if an adaptation needs entrances. Keep navigation feedback prompt, allow reduced motion, and leave content visible when scripts fail. Parallax, scroll hijacking, continuous zooms, and animated gradients are not established by this evidence.

## Surfaces

| Layer | Appearance | Role |
| --- | --- | --- |
| Main canvas | Solid `#41342b` | Connects products, shop details, social block, and footer |
| Atmospheric field | Broad rust and ochre gradients | Warms the opening and visible section transition |
| Space / Service backing | Measured black | Supports the darker spatial sequence |
| Photography | Large, square-edged image regions | Supplies texture, depth, and product emphasis |
| Header | Transparent overlay | Keeps identity and navigation present |
| Editorial text group | Unboxed text directly on the page | Maintains an open, continuous composition |
| External action | Transparent fill, fine pale outline, 4px radius | Provides an action without a bright accent color |

No general elevated-card or drop-shadow system is visible in the supplied captures. Depth comes primarily from photography and the contrast between image edges and broad background fields.

## Imagery

The photographic treatment is intimate and tactile. The opening image combines cool blue daylight with dark tabletop shadows and warm food tones. The book creates a human context without becoming a posed portrait. Coffee appears in a textured ceramic vessel, and the cheesecake has a dark baked surface with a pale interior.

The Drink photograph emphasizes the cup against visible wood grain. The storefront photograph brings warmer illumination: a circular sign glows above dark architectural framing, with activity visible through the window. Together these images connect product, pause, and place.

Preserve deep shadows and selective highlights. Avoid lifting every image into a bright, evenly lit catalog treatment. Crop around the relationship between objects, not just the main food item. On phones, inspect the actual crop so that coffee, cake, and reading context remain legible.

### Observed Asset References

| Asset or region | Evidence | Reuse guidance |
| --- | --- | --- |
| Opening book, coffee, and cheesecake photograph | Desktop and mobile opening captures; partial pseudo-element image rule | Use an authorized original or a composition with comparable light and subject placement |
| Coffee on wood photograph | Desktop Drink capture; partial image rule in the Drink section | Preserve the large left-aligned image and tactile materials |
| Storefront photograph | Desktop and mobile ending captures | Keep the dark window structure, warm sign, and asymmetric placement |
| Contour emblem | Header, footer, and photographed storefront sign | Use the actual authorized mark; no complete asset path was supplied |
| Other product and interior images | Partial background-image references within section DOM | Exact subjects, crops, and complete file paths are not established by the supplied screenshots |

Inline rules reference assets under `storage.googleapis.com/studio-design-asset-files/projects/v7qG3XdrqL/`. The supplied filenames are truncated, so they are not usable download references. Do not reconstruct missing filenames. Several photographs are referenced through pseudo-element background rules; an accessible adaptation may instead use semantic images with suitable alternative text.

## Layout & Responsive Behavior

### Page Structure

The anchor sequence is Top → Story → Sweets → Drink → Space / Service → Shop. The footer follows the social invitation. This is a long scrolling document with persistent navigation, rather than a fixed-height application shell.

Measured document height is approximately 16,656px on desktop and 13,541px on mobile. The shorter phone document reflects changes in staging and spacing; the supplied text includes the same principal sections and products.

| Section | Desktop height | Mobile height |
| --- | --- | --- |
| Opening | `1300px` | `675.19px` |
| Story | `2975.09px` | `2144.84px` |
| Sweets | `3815.59px` | `3723.70px` |
| Drink | `3414.80px` | `2734.34px` |
| Space / Service | `3753.95px` | `2685.66px` |
| Shop | `1039.59px` | `1340.56px` |

These are observed bounding-box heights, not recommended fixed section heights. Content changes, font loading, and viewport dimensions can alter them.

### Desktop Composition

The design repeatedly uses 10%, 20%, 30%, 40%, 60%, and 80% alignments. Examples include section labels at x=144, featured heading centers at x=288 and x=1152, section statements at x=432, and the shop information group at x=576.

The secondary sweets group uses a different grid: 60px outside margins and three widely separated columns. Maintain this change in rhythm instead of constraining the entire document to one identical grid.

The opening section's bounds end at y=1300, while Story begins at y=1240, producing a measured 60px overlap between section rectangles. Other areas include explicit gaps. These bounds support layered staging, but do not establish the exact positioning technique of every child.

### Mobile Recomposition

- Navigation becomes a left utility control, centered emblem, and right shopping control.
- The opening image changes from approximately 90% width to full width.
- The vertical statement remains vertical, becomes smaller, changes from W3 to W1, and shifts to x=78.
- Main section labels remain 16px; introductory Japanese statements become 18px.
- Section labels and statements stack at the 39px inset.
- The three secondary sweets text columns become a single 312px column.
- Main body text generally remains 15px with 36px leading; selected tracking values reduce from 3px to 2.25px.
- Some product headings grow on mobile, particularly Basque cheesecake and Tea.
- The storefront photo remains asymmetric at approximately 80% width.
- The social invitation becomes centered and wraps to two lines; its button narrows from 300px to 280px.

### Breakpoint Evidence

A source fragment includes a `max-width: 1140px` media query for conditional line breaks. That establishes a text-wrapping breakpoint, not the exact breakpoint for the entire navigation or layout system.

Only 1440px and 390px widths were supplied. Tablet states, landscape phones, zoom behavior, and intermediate header fit remain unverified. The Quick Start uses a recommended 64rem layout breakpoint and must be adjusted after testing those conditions.

## Do’s and Don’ts

### Do

- Preserve the measured cocoa canvas, white text hierarchy, and sparse use of outlines.
- Give photographs substantial width and let some touch a viewport edge.
- Keep the opening Japanese copy vertical and overlapping the gradient-to-image boundary.
- Use Inter at weight 200 for measured English heading roles and the confirmed Japanese families when available.
- Retain small section labels, wide tracking, and generous Japanese line spacing.
- Alternate editorial positions across the desktop width.
- Keep ordinary product text unboxed.
- Preserve the three-part mobile header and its centered emblem.
- Treat mobile crops and local type changes as deliberate composition decisions.
- Keep shopping, map, email, and social actions identifiable as links.

### Don't

- Don't replace the opening with a huge bold headline and a filled promotional button.
- Don't turn the product sequence into a uniform grid of rounded sales cards.
- Don't add pastel dessert colors, metallic gold controls, or glossy gradients without a new design rationale.
- Don't replace the measured Japanese Gothic lettering with a serif because the layout feels literary.
- Don't apply the same tracking or font-size reduction to every text role.
- Don't center all desktop content or remove every asymmetric mobile inset.
- Don't infer a carousel, parallax effect, open menu, or hover animation from static screenshots.
- Don't interpret a generic anchor wrapper's dark text color as the visible caption color.
- Don't use the footer copyright year as the inspection date.
- Don't hardcode the entire document to its captured height.

## Recommended Implementation Additions

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

- Use a meaningful page heading and semantic section headings while preserving the modest visual scale.
- Give the emblem link and icon controls accessible names. Keep decorative icon artwork hidden from assistive technology where a text label already exists.
- Implement the mobile menu with an explicit expanded state, keyboard support, predictable dismissal, and appropriate focus management.
- Enlarge mobile utility hit areas to at least 44 × 44px without enlarging the visible icons.
- Provide a visible focus outline and sufficient anchor offset beneath the persistent header.
- Check the thin lettering over photographs and every gradient region. An optional restrained header backing after scrolling can improve legibility; this would be an adaptation of the transparent original appearance.
- Preserve readable copy under text zoom. Avoid fixed text-box heights and test the wider tracked Japanese statements for overflow.
- Make the telephone number a telephone link if direct calling is desired.
- Supply responsive image variants and explicit image dimensions. Prioritize the opening photograph and defer lower-page images.
- Respect reduced-motion preferences and keep content available without reveal scripts.

## Agent Prompt Guide

### Quick Color Reference

- Main surface: measured `#41342b`.
- Primary text: measured `#ffffff`.
- Descriptions and secondary captions: measured `rgba(255,255,255,0.7)`.
- Space / Service backing: measured `#000000`.
- Warm gradient approximations: `#6f311d` rust and `#64492b` ochre.
- Action treatment: transparent fill, fine pale border, 4px radius.
- Imagery supplies most additional color; no bright interface accent is needed.

### Overall Prompt

“Create a long-form Japanese patisserie and café website inspired by allée's current composition. Use a deep cocoa canvas #41342b, broad muted rust and ochre gradient fields, fine white typography, and large square-edged photographs with directional light. Keep English section labels small and light in Inter, and give Japanese copy generous tracking and line spacing. Place two vertical columns of Japanese opening copy across the boundary between a warm field and a left-aligned café photograph. Arrange product imagery, names, and narrow descriptions in staggered desktop regions. On mobile, retain the vertical opening copy, use a centered emblem between Menu and Online shop controls, stack product text, and preserve selected asymmetric image widths. End with shop information, a storefront photograph, a restrained outlined Instagram link, and a centered brand signature. Mark any invented menu or animation behavior as a recommendation.”

### Example Component Prompts

1. **Opening:** “At a 1440px desktop width, place a delicate contour emblem at x=56 and a fine navigation row on the right. Begin a large left-aligned image near y=400, approximately 90% of viewport width. Position two columns of vertical Japanese copy around x=194 and y=280, spanning the warm gradient and photograph. Use an authorized image of coffee, cheesecake, and a book with directional light.”
2. **Section introduction:** “Create a spacious Drink introduction with a warm brown gradient. Place a 16px light Inter label at the 10% inset, a short pale rule beneath it, and a 20px widely tracked Japanese statement beginning at 30%. On mobile, stack both roles at a 10% inset and use an 18px statement.”
3. **Product spread:** “Build an unboxed editorial coffee feature with a large photograph on the left and a light, widely tracked product name in the right region. Continue with a narrow muted-white Japanese description lower in the sequence. Use 15px text and 36px leading. Recompose for a phone with a centered product heading and inset paragraph.”
4. **Mobile header:** “Create a transparent persistent header with 24px outer padding. Center a 32 × 53px contour emblem. Place an outline menu symbol with an 11px caption on the left and a shopping-bag symbol with a two-line 11px Online shop caption on the right. Give the controls larger accessible hit areas while keeping their visible artwork delicate.”
5. **Social ending:** “On cocoa brown, center an 18px Japanese invitation in two lines above a 280 × 63px outlined Instagram link. Use a 36px gap, a fine pale border, 4px corners, and a 16px tracked caption. Follow with ample space and a centered emblem, 16px wordmark, and 12px copyright.”

## Quick Start

### CSS Custom Properties

This scaffold combines measured typography and control geometry with recommended layout rules. Gradient recipes, the 64rem breakpoint, hover feedback, and simplified feature layouts are adaptations. The desktop image height is chosen to complete the measured 1300px opening section; the photograph's full desktop bounds were not separately measured.

Supply authorized image and emblem assets, and load the quoted font families where available. These declarations do not bundle fonts, photographs, or mobile-menu behavior. Use the listed class relationships as component anatomy; this CSS has not been executed or visually tested in this analysis.

```css
:root {
  /* Measured colors */
  --allee-cocoa: #41342b;
  --allee-white: #fff;
  --allee-muted: rgb(255 255 255 / 0.7);
  --allee-icon: rgb(255 255 255 / 0.8);
  --allee-black: #000;

  /* Visual approximations */
  --allee-rust: #6f311d;
  --allee-ochre: #64492b;
  --allee-line: rgb(255 255 255 / 0.5);
  --allee-gradient: linear-gradient(
    110deg,
    var(--allee-rust) 0%,
    var(--allee-ochre) 60%,
    var(--allee-cocoa) 100%
  );

  /* Source families with recommended generic fallbacks */
  --font-latin: Inter, sans-serif;
  --font-ja: 'こぶりなゴシック W1 JIS2004', sans-serif;
  --font-ja-hero: 'こぶりなゴシック W3 JIS2004', sans-serif;
  --weight-light: 200;
  --weight-regular: 400;
  --text-body: 15px;
  --text-section: 16px;
  --text-caption: 12px;
  --leading-body: 2.4;
  --tracking-body: 0.2em;
  --tracking-label: 0.1em;
  --tracking-feature: 0.2em;
  --tracking-statement: 0.4em;

  /* Geometry */
  --content-inset: 10vw;
  --radius-action: 4px;
  --action-height: 62.8px;
  --header-offset: 130px;

  /* Measured timing configurations */
  --ease-soft: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-nav: cubic-bezier(0, 0.7, 0.22, 1);
  --motion-ui: 300ms var(--ease-soft);
  --motion-background: 500ms var(--ease-soft);
  --motion-nav: 800ms var(--ease-nav);
  --motion-reveal: 2s var(--ease-soft);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--allee-white);
  background: var(--allee-cocoa);
  font-family: var(--font-ja);
  font-weight: var(--weight-regular);
}

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

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

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

section[id] {
  scroll-margin-top: var(--header-offset);
}

:focus-visible {
  outline: 2px solid var(--allee-white);
  outline-offset: 5px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 56px;
  background: transparent;
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 66.66px;
}

.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__nav a {
  /* Recommended visible-label approximation */
  font: 200 16px / 1.4 var(--font-latin);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: opacity var(--motion-nav);
}

.mobile-control {
  display: none;
}

.hero {
  position: relative;
  padding-top: 400px;
  background: var(--allee-gradient);
}

.hero__image {
  width: 90%;
  height: 900px;
  object-fit: cover;
  object-position: center;
}

.hero__tagline {
  position: absolute;
  z-index: 1;
  top: 280px;
  left: 13.5%;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 400 20px / 2.5 var(--font-ja-hero);
  letter-spacing: 0.4em;
}

.story-intro {
  padding: 120px var(--content-inset);
}

.section-heading {
  display: grid;
  grid-template-columns: 20vw minmax(0, 1fr);
  align-content: start;
  min-height: 460px;
  padding: 188px var(--content-inset) 180px;
  background: linear-gradient(
    110deg,
    var(--allee-cocoa),
    var(--allee-ochre),
    var(--allee-rust)
  );
}

.section-label {
  margin: 0;
  font: 200 16px / 1.4 var(--font-latin);
  letter-spacing: 0.1em;
}

.section-label::after {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  margin-top: 18px;
  background: var(--allee-line);
}

.section-heading__statement {
  margin: 23.4px 0 0;
  font: 400 20px / 1 var(--font-ja);
  letter-spacing: 0.4em;
}

.editorial-copy {
  margin: 0;
  color: var(--allee-muted);
  font: 400 15px / 2.4 var(--font-ja);
  letter-spacing: 0.2em;
}

.feature {
  position: relative;
}

.feature--overlap {
  margin-top: -40px;
}

.feature__lead {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
}

.feature__image {
  width: 100%;
  aspect-ratio: 1.68;
  object-fit: cover;
  border-radius: 0;
}

.feature__title {
  margin: 0;
  padding: 32px;
  text-align: center;
  font: 200 28px / 1.4 var(--font-latin);
  letter-spacing: 0.2em;
}

.feature__copy {
  max-width: 340px;
  margin: 80px 0 160px 18.2%;
}

.feature--reverse .feature__lead {
  grid-template-columns: 40% 60%;
}

.feature--reverse .feature__image {
  grid-column: 2;
  grid-row: 1;
}

.feature--reverse .feature__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 26px;
}

.feature--reverse .feature__copy {
  margin-left: 58.6%;
}

.secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8%;
  margin-inline: 60px;
}

.secondary-title {
  margin: 0 0 24px;
  font: 200 20px / 1.4 var(--font-latin);
  letter-spacing: 0.1em;
}

.secondary-grid .editorial-copy {
  line-height: 2;
  letter-spacing: 0.1em;
}

.space-section {
  background: var(--allee-black);
}

.outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--action-height);
  max-width: 100%;
  padding: 16px;
  border: 1px solid var(--allee-line);
  border-radius: var(--radius-action);
  color: var(--allee-muted);
  background: transparent;
  font: 400 16px / 1.8 var(--font-latin);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color var(--motion-ui), border-color var(--motion-ui);
}

.outline-link__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.shop-layout {
  display: grid;
  grid-template-columns: 30% 10% minmax(0, 1fr);
  align-items: start;
}

.shop-layout__image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.shop-layout__info {
  grid-column: 3;
  grid-row: 1;
  padding-right: 10vw;
}

.shop-details {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  row-gap: 28px;
}

.shop-details dt,
.shop-details dd {
  margin: 0;
}

.shop-details dd {
  color: var(--allee-muted);
  font: 400 15px / 1.8 var(--font-ja);
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.social {
  margin-left: 40%;
  margin-right: 10%;
  padding-block: 80px;
}

.social__heading {
  margin: 0;
  font: 400 18px / 1.8 var(--font-ja);
  letter-spacing: 0.1em;
}

.social .outline-link {
  width: 300px;
  margin-top: 48px;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  background: var(--allee-cocoa);
}

.site-footer__mark {
  width: 40px;
  height: 66.66px;
  object-fit: contain;
}

.site-footer__name {
  margin: 12px 0 0;
  font: 200 16px / 1.4 var(--font-latin);
  letter-spacing: 0.1em;
}

.site-footer__copyright {
  margin: 20px 0 0;
  color: var(--allee-muted);
  font: 200 12px / 1.4 var(--font-latin);
  letter-spacing: 0.1em;
}

@media (hover: hover) {
  /* Recommended feedback; original hover appearance is unverified */
  .site-header__nav a:hover {
    opacity: 0.7;
  }

  .outline-link:hover {
    color: var(--allee-white);
    border-color: var(--allee-icon);
  }
}

@media (max-width: 64rem) {
  /* Recommended layout breakpoint, not a recovered source rule */
  :root {
    --header-offset: 116px;
  }

  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    padding: 24px;
  }

  .site-header__logo {
    grid-column: 2;
    grid-row: 1;
    width: 32px;
    height: 53.33px;
  }

  .site-header__nav {
    display: none;
  }

  .mobile-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    color: var(--allee-white);
    background: transparent;
    font: 200 11px / 1.4 var(--font-latin);
    letter-spacing: 0.1em;
    text-decoration: none;
  }

  .mobile-control--menu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .mobile-control--shop {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    line-height: 1.1;
    letter-spacing: 0.08em;
  }

  .hero {
    padding-top: 295.2px;
  }

  .hero__image {
    width: 100%;
    height: 380px;
    object-position: center;
  }

  .hero__tagline {
    top: 225.4px;
    left: 20%;
    font-family: var(--font-ja);
    font-size: 18px;
    line-height: 2.2;
    letter-spacing: 0.3em;
  }

  .section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    min-height: 0;
    padding: 80px 10vw 60px;
  }

  .section-heading__statement {
    margin: 0;
    font-size: 18px;
    line-height: 2;
  }

  .feature--overlap {
    margin-top: 0;
  }

  .feature__lead,
  .feature--reverse .feature__lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature__image,
  .feature--reverse .feature__image {
    grid-column: 1;
    grid-row: 1;
  }

  .feature__title,
  .feature--reverse .feature__title {
    grid-column: 1;
    grid-row: 2;
    padding: 40px 10vw;
    font-size: 24px;
  }

  .feature--reverse .feature__title {
    font-size: 28px;
  }

  .feature__copy,
  .feature--reverse .feature__copy {
    max-width: none;
    margin: 40px 10vw 120px;
    letter-spacing: 0.15em;
  }

  .secondary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 96px;
    margin-inline: 10vw;
  }

  .secondary-title {
    margin-bottom: 20px;
    font-size: 18px;
  }

  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }

  .shop-layout__info {
    grid-column: 1;
    grid-row: 1;
    padding-inline: 10vw;
  }

  .shop-layout__image {
    grid-column: 1;
    grid-row: 2;
    width: 80%;
  }

  .shop-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .shop-details dd {
    margin-left: 40px;
  }

  .social {
    margin: 0;
    padding: 60px 10vw;
    text-align: center;
  }

  .social__heading {
    max-width: 243px;
    margin-inline: auto;
  }

  .social .outline-link {
    width: 280px;
    margin-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav a,
  .outline-link {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}
```

The feature scaffold intentionally simplifies the observed staggered sequences. Add supporting image regions and tune their offsets against the relevant content rather than applying absolute document coordinates. Keep any optional entrance animation as a progressive enhancement; the base CSS leaves all content visible.

### Tailwind v4 Token Mapping

Optional mapping for an implementation already using Tailwind v4. This does not identify the original site's CSS framework. Define the custom properties above first.

```css
@theme inline {
  --color-cocoa: var(--allee-cocoa);
  --color-patisserie-white: var(--allee-white);
  --color-patisserie-muted: var(--allee-muted);
  --color-rust: var(--allee-rust);
  --color-ochre: var(--allee-ochre);
  --color-fine-line: var(--allee-line);

  --font-editorial: var(--font-latin);
  --font-japanese: var(--font-ja);

  --text-section: 16px;
  --text-copy: 15px;
  --text-product: 28px;
  --text-signature: 12px;

  --spacing-editorial-inset: 10vw;
  --radius-action: 4px;
}
```

## Sources & Evidence

- **Inspected website:** [https://alleeomotesando.jp/](https://alleeomotesando.jp/). Original and final URLs are identical; the supplied response status is HTTP 200.
- **Capture timestamp:** `2026-10-01T21:08:35.328Z`, equivalent to October 2, 2026, at 06:08:35.328 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; opening, Drink-transition, and ending captures; rendered DOM, link inventory, element rectangles, computed typography, colors, padding, radii, and transition declarations. Document height is approximately 16,656px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; opening and ending captures; corresponding rendered DOM and computed-style records. Document height is approximately 13,541px.
- **Readiness procedure reported with the captures:** document-load and layout/text-stability checks, waits for relevant finite animation and image decoding, and traversal through intermediate scroll positions. Perpetual animation was temporarily paused during readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Interaction scope:** scrolled page states and rendered link destinations are available. No supplied result establishes a clicked mobile menu, hover appearance, focus behavior, active-section state, external destination flow, or exact animation trigger.
- **Limitations:** screenshots cover selected regions rather than every section visually. Complete image URLs, full gradient definitions, intermediate viewport states, and any delayed content beyond the reported readiness limits are unavailable. Computed styles may include elements not visibly present in settled screenshots.

This reference describes the current page represented by the supplied evidence. No additional browsing, command execution, or file inspection was performed.