MANERUBETA

日本のWebデザインを、AIの制作リファレンスに。

PAQUET MONTÉ（パケモンテ）｜フラン・パティシエ専門店のWebサイトプレビュー

DESIGN REFERENCE

PAQUET MONTÉ（パケモンテ）｜フラン・パティシエ専門店

ブランドサイト洋菓子店舗サイト写真中心明朝体セリフ体非対称レイアウト余白ダークセクション日仏併記レスポンシブ

シルバーグレーと深い青黒の背景に、明朝体と欧文セリフ、余白を生かした写真を組み合わせた洋菓子店サイト。菓子づくりから三角包み、店舗、予約案内までを6章で紹介します。

オリジナルサイトを見る
ジャンル
食品・飲料
元の業種
飲食・洋菓子
デザイン分析日
2026/9/23

design.md

ダウンロード

PAQUET MONTÉ — Style Reference

A French pastry house expressed through silver-gray paper, blue-black chapters, fine serif lettering, and carefully spaced photographs.

Original URL: paquetmonte.suzu-pr.com Final URL: paquetmonte.suzu-pr.com — unchanged; supplied response status: HTTP 200. Inspected: September 22, 2026, at 17:32:12.968 UTC / September 23, 2026, at 02:32:12.968 JST. Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. Theme: silver-gray main canvas, blue-black editorial sections, and a white footer. Scope: the current homepage, including the opening identity state, mobile hero, six numbered chapters, desktop craft and packaging composition, access information, and desktop/mobile footers. All six chapters have supplied DOM measurements; only the attached portions have direct screenshot coverage. The separate menu page, reservation destination, and opened mobile navigation were not inspected.

PAQUET MONTÉ presents its products and physical shop through a long editorial sequence: ABOUT, MENU, CONCEPT, SHOP, RESERVE, and ACCESS. Japanese explanations sit alongside smaller French translations. Tall pastry photographs, workshop scenes, and triangular paper packaging carry the identity, while compact navigation and simple text links provide practical routes to menus, reservations, and location information.

The main contrast is structural. Pale gray gives way to deep blue-black for the craft and reservation chapters, then returns before a white footer. Photography introduces caramel, chocolate, green, and cool window light without turning those colors into interface accents. Text remains restrained: a 24px Japanese heading, a narrow paragraph column, and generous vertical separation do more work than oversized headlines or decorative cards.

全文を表示閉じる

PAQUET MONTÉ — Style Reference

A French pastry house expressed through silver-gray paper, blue-black chapters, fine serif lettering, and carefully spaced photographs.

Original URL: paquetmonte.suzu-pr.com Final URL: paquetmonte.suzu-pr.com — unchanged; supplied response status: HTTP 200. Inspected: September 22, 2026, at 17:32:12.968 UTC / September 23, 2026, at 02:32:12.968 JST. Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. Theme: silver-gray main canvas, blue-black editorial sections, and a white footer. Scope: the current homepage, including the opening identity state, mobile hero, six numbered chapters, desktop craft and packaging composition, access information, and desktop/mobile footers. All six chapters have supplied DOM measurements; only the attached portions have direct screenshot coverage. The separate menu page, reservation destination, and opened mobile navigation were not inspected.

PAQUET MONTÉ presents its products and physical shop through a long editorial sequence: ABOUT, MENU, CONCEPT, SHOP, RESERVE, and ACCESS. Japanese explanations sit alongside smaller French translations. Tall pastry photographs, workshop scenes, and triangular paper packaging carry the identity, while compact navigation and simple text links provide practical routes to menus, reservations, and location information.

The main contrast is structural. Pale gray gives way to deep blue-black for the craft and reservation chapters, then returns before a white footer. Photography introduces caramel, chocolate, green, and cool window light without turning those colors into interface accents. Text remains restrained: a 24px Japanese heading, a narrow paragraph column, and generous vertical separation do more work than oversized headlines or decorative cards.

How to Read This Reference

  • Measured values come from the supplied rendered DOM, computed styles, and element rectangles. They describe these two inspected viewports, not every possible screen size.
  • Visual estimates describe screenshot geometry or details for which no corresponding element measurements were supplied.
  • Calculated values are simple relationships between measured rectangles, such as gutters and distances between text blocks.
  • Recommendations and the Quick Start are adaptations for implementation. Their class names, breakpoints, and layout formulas are not recovered source code.
  • Font names below are supported by computed family declarations. Font-file URLs and successful resolution of every individual font face were not separately documented.
  • The desktop opening capture shows a brand-only screen. Underlying hero measurements exist, but its fully revealed desktop photograph and final crop were not visually captured.

Tokens — Colors

Default Palette

The aliases below are proposed implementation names, not original CSS variables.

Name Value Suggested token Evidence and role
Silver Gray #d2d2d2 --pm-paper Measured body background; inherited by the pale editorial chapters and access area
Blue Black #151f25 --pm-night Measured CONCEPT and RESERVE backgrounds; visually similar to the opening identity field
Charcoal #333333 --pm-ink Measured main text, navigation, and headings on light surfaces
Cool Gray #72797c --pm-muted Measured French translations; also the mobile footer company and copyright text
White #ffffff --pm-white Measured footer background, dark-section text, and hero caption text
Navigation Off White #f7f7f7 --pm-menu-ink Measured mobile navigation link color; the opened navigation surface was not visually inspected
Fine Rule Approximately translucent gray --pm-rule Hairlines are visible; their exact CSS color was not supplied. rgb(51 51 51 / 35%) is a recommended approximation on light surfaces

The opening screen's exact background declaration was not supplied. Reusing the measured #151f25 section color is a reasonable implementation choice, not an independent measurement of that screen.

The mobile header has a fine, uneven pale texture. This is a visual observation; neither a texture asset nor its compositing method was identified. Keep the solid base color distinct from that texture treatment.

Theme Presets

No selectable themes were demonstrated. The light and dark treatments belong to different chapters of the same page. Preserve this sequence rather than implementing a theme switch on the strength of these captures.

The supplied CSS custom properties also include administrative and editor palette values. Those do not establish additional visible brand colors.

Tokens — Typography

Japanese Editorial Text

Measured stack: "Shippori Mincho", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif.

The body, Japanese headings, explanatory paragraphs, chapter translations, and many utility links use this stack. The usual weight is 500. Japanese headings are moderately sized and closely tracked; body paragraphs use unusually generous leading.

French chapter translations also inherit this Mincho stack. Do not automatically assign every Latin-language element to the display serif.

Latin Chapter Titles and Navigation

Measured family: "Cormorant Garamond".

Uppercase chapter titles use weight 600; numbered navigation uses 700. The top desktop ALL MENU link uses 400. The hero caption container uses 700.

The narrow, high-contrast serif forms let relatively small navigation remain distinctive. Chapter labels have 0.05em tracking rather than extreme letter spacing.

Brand Artwork

The triangle, internal looping line, wordmark, and small pastry descriptor form a supplied brand lockup. Treat this as artwork. Ordinary text in either observed font should not be presented as an exact reconstruction of the logo.

Type Scale

Mobile values below are rounded where the source reports small fractional differences.

Role Desktop Mobile Weight Leading / tracking
Chapter title 42px 32.019px 600 1; tracking 2.1px desktop, 1.601px mobile
Japanese heading 24px 23.985px 500 1.7; tracking approximately -0.05em
Main paragraph 14px 14.001px 500 Approximately 29.96px, or 2.14
French chapter translation 12px 12.012px 500 Approximately 18px, or 1.5; tracking 0.05em
Numbered navigation label 14px 14.001px 700 Approximately 14px; tracking 0.05em
Main text action 16px 15.99px 500 Approximately 16px
Reservation body 14px 15.99px 500 Desktop 29.96px; mobile 25.584px, or 1.6
Access information 14px 14.001px 500 Approximately 29.4px, or 2.1
Access update link 12px 12.012px 500 Approximately 25.2px
Mobile hero rail Not present in the sampled desktop layout 9.984px 500 Approximately 10px; vertical presentation
Footer company 14px 12.012px 500 1.7
Footer copyright 12px 12.012px 500 1

Navigation indices appear approximately 8px in the screenshots; their individual computed size was not included. The hero caption parent is measured at approximately 14px / 21px, but its individual title and ingredient-text children visibly vary in size and were not separately measured.

The source root font size is 10px at both viewports. The Quick Start uses explicit pixel-based tokens so it can coexist with a conventional application root without copying unknown source rem formulas.

Tokens — Spacing & Shapes

Density: small controls and narrow text columns inside large, image-led chapter compositions.

There is no demonstrated universal spacing scale. The most reusable observed intervals are 20, 25, 30–31, 38, 40, 50, 60, 100, and 120px. Their roles matter more than forcing every value into a strict increment system.

Spacing Scale
Use Desktop Mobile Status
Header logo inset 30px Approximately 20px Measured
Standard content gutter 100px 37.984px Measured
Japanese heading to translation 25px Approximately 25px Calculated from rectangles
Translation bottom padding 60px Approximately 50px Measured, except the compact reservation subtitle
Translation box to following body 50px Approximately 50px Calculated
Body to MENU action 50px Approximately 50px Calculated
Footer navigation row pitch 31px 34px Calculated
Footer navigation column gap 56px Approximately 24px Calculated
Footer top padding 115px Approximately 120px Measured
Footer bottom padding 105px Approximately 40px Measured
Mobile footer logo to navigation — Approximately 100px Calculated

The large translation-to-body separation is intentional. A two-line French translation occupies approximately 36px of text, followed by 60px of internal space and another 50px before the body on desktop. A short rule visually punctuates this interval in the packaging capture.

Border Radius

Sampled elements report 0px radius. Photographs have square corners, text groups sit directly on the page, and the footer uses rules rather than enclosed cards. No general rounded-card or shadow-elevation system appears in the supplied evidence.

The short prose divider is approximately 40px wide and 1px high by visual estimation. Navigation and access dividers are similarly fine.

Layout Measurements
Element Desktop at 1440 × 1000 Mobile at 390 × 844
Document height 11692.86px 13364.19px
Main content container 1240px, starting at x = 100px 314.03px, starting at x = 37.98px
Standard prose width 360px 314.03px
Header symbol 47 × 41px 40 × 34.89px
Hero section 1440 × 1000px 390 × 844px
Hero top padding 205px 84.981px
Main text action 200 × 35px Approximately 314 × 35px
Access paragraph width 424px per column 293.03px after the left rule and inset
Footer logo link 148 × 133px Approximately 148 × 133px
Footer height 482px 722.31px

The mobile gutter occupies approximately 9.74% of the viewport width. This is a calculated proportion at 390px, not proof that the source uses a percentage-based gutter formula.

Components

Opening Identity State

The desktop opening capture is a full dark field with a small white brand lockup close to the exact viewport center. Its visible footprint is approximately 166 × 148px, estimated from the screenshot. The fine triangle and looping internal drawing require plenty of uninterrupted surrounding space.

No progress percentage, loading bar, or explanatory message is visible. Treat this as a captured opening identity state. Its dismissal condition, duration, and relationship to image loading were not established, even though the underlying document contains the complete homepage.

Header and Numbered Navigation

On desktop, a small standalone triangle sits at (30, 30). Navigation begins at x = 240px, arranged as two columns: ABOUT, MENU, CONCEPT on the left; SHOP, RESERVE, ACCESS on the right. The second column begins at approximately x = 415.59px; Instagram begins at approximately x = 584.97px. ALL MENU sits near the right edge at x = 1304px.

Each chapter link consists of a tiny two-digit index, a short horizontal line, and an uppercase serif label. The label supplies the readable target; the number and rule establish the editorial rhythm. The navigation is unboxed and shares the page surface.

On mobile, the visible header contains the 40px triangle at a 20px inset and a thin three-line menu control at the upper right. Its visible line width is approximately 32px. The control appears in both the hero and footer captures, consistent with a persistent control; its exact positioning rule was not included.

The mobile navigation has sampled link rectangles and off-white text, but it was not opened in the supplied screenshots. Do not claim a verified drawer animation, backdrop, close state, or focus behavior. The mobile header ABOUT link points to #aboutSP; the footer ABOUT link points to #about.

Hero Photograph and Brand Lockup

The mobile hero is directly visible. A tall photograph begins around y = 85px, extends from the left edge to approximately x = 353px, and ends around y = 754px. These screenshot estimates imply a 37px right rail and a visible photo area of approximately 353 × 669px.

Three cylindrical pastries sit on a dark wooden board over a pale stone surface. Their dark chocolate, green, and golden fillings form the main chromatic accents. A large area of warm brown background above them provides space for the white brand lockup, positioned close to the viewport's horizontal center.

ALL MENU and INSTAGRAM run vertically along the pale right rail. The French caption begins near the lower-left edge of the photograph and continues over the gray area below it. Its measured container begins at approximately (20, 738.17) and is 191.89px wide.

For desktop, the hero section and caption are measured, but the opening screenshot obscures the photograph. The caption container is approximately 235.27 × 137px at (1139.73, 717). Preserve the known full-viewport section and right-side caption relationship; treat any exact desktop image crop as unverified.

Numbered Chapter Heading

Each chapter begins with a small number and a centered uppercase title. The desktop title uses 42px Cormorant Garamond, weight 600, 2.1px tracking, and 40px top padding. Its resulting box is 82px tall.

On mobile, the title decreases to approximately 32px, but retains approximately 40px top padding. The chapter header additionally has approximately 52px top padding, producing a 124px measured header box.

The distinction is important: the large measured header height is spacing plus typography, not a 124px display headline. Keep the chapter title centered independently of the asymmetric photographs and prose beneath it.

Bilingual Prose Block

The recurring anatomy is:

  1. A Japanese heading at approximately 24px / 1.7, weight 500, with slightly negative tracking.
  2. A smaller French translation, normally separated by 25px.
  3. A long quiet interval, punctuated by a short rule where visible.
  4. Japanese body copy at approximately 14px / 2.14.
  5. An optional text action after another generous gap.

The desktop column is 360px wide. At the inspected mobile width it expands to the available 314px content column rather than shrinking the type substantially. This maintains the deliberate line-by-line reading pace.

The reservation subtitle is an exception: the short French word under its heading has no measured 50–60px bottom padding. Do not force the full prose template onto this compact heading group.

ABOUT and SHOP Chapters

Both chapters place a 360px text column centrally on desktop, starting at x = 540px. Their Japanese headings, French translations, and body paragraphs share the same typographic system.

The content has distinct purposes: ABOUT introduces the pastry specialty and traditional wrapping; SHOP describes the house and its two different dining environments. These are narrative sections, not feature-card grids.

Both sections have substantial measured image-related or compositional space around their text. The supplied selected-element records do not include all media bounds, so the precise photographic arrangement in these chapters should not be reconstructed from the text rectangles alone.

MENU Teaser and Text Action

The desktop MENU prose begins at x = 793px, contrasting with the centered ABOUT and SHOP text. On mobile it returns to the standard x = 37.98px column.

The source copy introduces the pastry range and baked goods, followed by an ALL MENU link to /menu/. Its measured link box is 200 × 35px on desktop and approximately 314 × 35px on mobile. The type remains approximately 16px.

This is a quiet typographic action rather than a prominent filled button. Arrow details are visible on some utility links, but the complete MENU action border and hover treatment were not directly captured. The Quick Start's consistent arrow treatment is an adaptation.

CONCEPT Photography and Packaging Story

CONCEPT uses the measured #151f25 background and white Japanese text. Its first desktop prose column begins at x = 980px; the later packaging story begins at x = 100px. This shift creates a change in reading direction within one chapter.

The supplied desktop crop shows an intentionally irregular arrangement of workshop photography. Visible screenshot bounds include:

Visible region Approximate screenshot bounds Reading
Left pastry photograph x = 0–198px, y = 0–405px Cropped by the left/top capture boundaries
Wide workshop photograph x = 228–888px, y = 0–277px A worker and baking tray; top is outside the crop
Smaller pastry photograph x = 932–1239px, y = 130–433px Lower than the wide image, leaving dark space above
Packaging photograph x = 640–1440px, starting near y = 591px Large right-side image extending beyond the capture bottom

These are visible crop bounds, not complete asset dimensions or measured CSS placements.

The packaging block pairs a left text column with a much larger right photograph. Its subject is the triangular paper package and fine ribbon, shown against cool window light. The title and top of the large image align approximately across the spread. Broad negative space separates the upper workshop photographs from this second story.

Avoid equalizing these images into a tidy card grid. Unequal sizes, staggered vertical positions, and occasional edge cropping are central to this observed composition. No carousel or drag interaction was demonstrated.

RESERVE Chapter

The reservation chapter returns to the dark surface. On desktop, a left heading/action region begins at x = 296px, while a 450px explanatory column begins at approximately x = 726.56px. The RESERVE action remains in the left region near the bottom of the text composition.

Mobile changes both layout and typography. The heading, subtitle, explanatory groups, and action form a single column. Reservation paragraphs increase to approximately 16px / 1.6; this is a deliberate exception to the ordinary 14px / 2.14 body style. The RESERVE link follows the final paragraph.

The content distinguishes the private room, standing area, and takeout. Preserve these as readable text groups, not decorative pricing cards. The observed reservation href is http://bit.ly/3HwMf7h; its destination and booking flow were not opened or verified.

ACCESS Map and Information

The desktop capture shows a pale, desaturated map area above the information. Only part of the map is visible, including a central labeled tile. This does not establish whether all map tiles loaded, which provider behavior is available, or whether the map can be manipulated.

Below it, two information groups sit behind fine left rules. The desktop address paragraph begins at x = 296px; opening hours and the Instagram update link begin at x = 751px. Both paragraph regions are 424px wide. The rules appear approximately 31px to the left of the text.

On mobile, these groups stack. The text starts at approximately x = 59px, leaving about 21px between the standard gutter and the content. Address and opening-hours text retain approximately 14px / 2.1 typography. The Instagram update line uses approximately 12px text and an outline icon.

The desktop footer is a white 482px closing panel. Numbered navigation sits at the upper left, the full 148 × 133px logo is centered, Instagram sits near the lower left, and company/copyright text sits near the lower right.

Mobile reorders the composition into a 722px panel:

  1. Centered full logo after approximately 120px top padding.
  2. Approximately 100px of space before the two-column chapter navigation.
  3. A fine horizontal divider.
  4. ALL MENU with a slender arrow, then Instagram with an outline icon.
  5. Company and copyright aligned left near the bottom.

The footer prints 株式会社FLAN and © FLAN, independently supporting the operator identification. No production credits are visible in the supplied original-page evidence.

Tokens — Motion & Interaction

Treatment Supplied evidence What can be concluded
Main header entrance transform, opacity, and filter: 1.4s, delay 1.8s A delayed transition is declared; transform endpoints and filter values are not supplied
Chapter heading reveal Same properties: 1.4s, delay 0.2s The headings share a slower reveal vocabulary; the triggering mechanism is unverified
Navigation and several brand/utility links Transition shorthand of 0.4s A duration is declared; the visual hover outcome is not documented
Opening identity state Dark logo-only desktop capture State is visible; lifetime and exit sequence are unknown
Mobile menu control Visible in top and bottom mobile captures A menu affordance exists; opening, closing, keyboard handling, and animation were not exercised
Chapter links Six anchor destinations; mobile header ABOUT uses #aboutSP Destinations are known; scrolling speed, easing, and offset behavior are unverified
Menu and social links Rendered hrefs are supplied Link targets are known; destination experiences were not inspected
Sampled animation fields animation: none on listed elements This does not rule out animation on images, pseudo-elements, other nodes, or through JavaScript

The supplied capture process waited for visible finite motion and sampled layout stability, with an overall readiness limit. A settled capture does not establish that every delayed reveal completed or that all interaction states were exercised.

Do not infer parallax, scroll snapping, image zoom, smooth anchor scrolling, or a timed splash dismissal from the page's visual style. For an adaptation, restrained opacity and position transitions would fit; their exact endpoints remain implementation choices.

Surfaces

Surface Appearance Purpose
Main page Solid silver gray Quiet field for narrative text and photographs
Mobile header / hero surround Pale gray with visible fine texture Material character around the opening image
Craft chapter Deep blue-black with white text Emphasizes process, ingredients, and packaging
Reservation chapter Same deep blue-black Gives practical reservation information a distinct chapter
Photography Square edges; no visible card containers Carries texture, color, and atmosphere
Access area Gray surface and subdued map Practical information within the editorial palette
Footer Pure white with fine gray details A clear ending and repeated navigation

Separation comes from large color fields, image boundaries, spacing, and hairlines. The evidence does not support a general system of raised panels, glossy gradients, or floating rounded controls.

Imagery

Photography is the principal expressive material. The mobile hero combines crisp laminated pastry edges, glossy fillings, dark wood, and pale stone. Its warm brown background gives the small white line-art logo room to remain legible.

The craft photographs alternate warm oven light with cool blue window reflections. People are shown through the activity of making and handling food. The packaging image shifts attention from edible texture to folded paper, printed marks, translucent ribbon, and daylight.

Keep tonal depth and material detail. Broadly brightening every image, replacing the settings with a seamless white product background, or saturating the food into a UI accent palette would change the observed character.

Observed Asset References

No image source URLs, logo filenames, font-file URLs, or texture asset paths were supplied. The following are identifiable visual roles, not downloadable asset references.

Asset role Directly observed use Implementation guidance
Small triangle symbol Desktop/mobile header Use an authorized original mark; retain its delicate stroke
Full brand lockup Opening state, mobile hero, both footers Preserve the triangle, wordmark, and descriptor as one composition
Three-pastry still life Mobile hero Prepare a portrait crop that preserves the pastries and upper negative space
Workshop / oven photography Desktop CONCEPT crop Retain warm light, deep shadows, and human activity
Pastry tray detail Desktop CONCEPT crop Use as a smaller offset image, not an equal-sized card
Triangular paper packaging Desktop packaging story Give the paper and ribbon enough scale to read as material
Pale grain Mobile header and hero surround If recreated, use a subtle static texture; the original method is unknown
Instagram, arrow, menu lines Navigation and footer Preserve a restrained outline vocabulary; asset format is unknown

Other chapters have content and layout records but incomplete visual media evidence. Do not invent their exact imagery or asset ordering.

Layout & Responsive Behavior

The page remains a long scrolling shop website at both widths. Mobile is approximately 1671px taller in the supplied measurements, despite reduced horizontal space and smaller chapter titles.

Region Desktop height Mobile height Evidence-based change
Hero 1000px 844px Matches the inspected viewport height
ABOUT 1672.20px 2395.98px Prose becomes the standard mobile column; surrounding composition is substantially taller
MENU 1084px 1687.84px Right-positioned prose returns to the mobile content gutter
CONCEPT 2396.81px 2648.64px Two desktop prose alignments become one mobile column
SHOP 1600.27px 1819.17px Centered desktop prose becomes inset mobile prose
RESERVE 1588.61px 1680.28px Desktop text regions stack; body type increases; action follows the copy
ACCESS 968.97px 1066.02px Information groups stack
Footer 482px 722.31px Logo moves ahead of navigation; utilities and legal text stack

These are section rectangles, not recommended fixed heights. They do not sum directly to document height because additional intervals occur between some measured sections. For example, approximately 450px separates the desktop ABOUT endpoint from MENU, compared with approximately 220px on mobile. The selected records do not identify every intervening media element.

Desktop compositions repeatedly alternate among three text positions: centered at x = 540px, right-positioned at x = 793px or 980px, and left-positioned at x = 100px. Mobile normalizes those positions to x = approximately 38px while retaining the overall chapter order.

The supplied --vh and --dvh properties are 10px on desktop and 8.44px on mobile, matching one hundredth of the respective viewport heights. Their complete source usage is unavailable. A new implementation can use modern viewport units, but should test browser chrome and orientation changes separately.

Only two viewport sizes were supplied. Exact breakpoints, tablet behavior, landscape crops, maximum-width rules, and mobile font-scaling formulas remain unknown. The Quick Start's 760px breakpoint is a recommendation.

Do’s and Don’ts

Do
  • Preserve the sequence of six named chapters and their practical links.
  • Use #d2d2d2, #151f25, #333333, #72797c, and white as the main interface palette.
  • Pair Shippori Mincho with Cormorant Garamond according to the measured roles.
  • Keep Japanese headings near 24px and body columns narrow, even on a large screen.
  • Preserve the small French translation, long interval, short rule, and Japanese paragraph relationship.
  • Make dark chapters full-width color changes, with photographs placed directly on the surface.
  • Keep photographs rectangular, varied in scale, and deliberately offset.
  • Preserve the mobile hero's narrow right utility rail and tall pastry crop.
  • Reorder the footer for mobile instead of merely shrinking the desktop arrangement.
  • Retain the larger mobile reservation text as a distinct practical reading treatment.
Don’t
  • Do not convert the homepage into a generic sales funnel with repeated oversized buttons.
  • Do not replace the editorial photographs with identical rounded cards.
  • Do not introduce bright green or caramel UI accents merely because those colors appear in the food.
  • Do not render all French text in Cormorant Garamond; chapter translations use the Mincho stack in the measurements.
  • Do not interpret an 82px or 124px heading box as the actual font size.
  • Do not reproduce the 11,693px or 13,364px document heights with arbitrary empty spacers.
  • Do not assume the opening identity screen is a permanent homepage or a proven timed loader.
  • Do not invent a menu overlay, parallax effect, carousel, or hover response.
  • Do not recreate the logo with approximate typed lettering and a generic triangle.
  • Do not claim a fully observed desktop hero crop when its screenshot remains in the opening identity state.

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

  • Give the menu button an accessible name, expanded state, and controlled-panel relationship. If a modal navigation is implemented, support Escape, focus management, and restoration of focus.
  • Increase interactive hit areas without increasing the visible linework. A 44px menu-button target can still contain a 32px symbol.
  • Check the muted French captions against both gray and dark backgrounds. Increase their contrast where necessary while keeping them visually subordinate.
  • Give anchor destinations sufficient scroll clearance and use a consistent heading hierarchy. The sampled source uses an H1 for each chapter; an adaptation can use one page H1 and chapter H2 elements.
  • Keep content available when JavaScript or a reveal trigger fails. Treat any opening identity layer as optional enhancement and ensure it cannot trap the page.
  • Respect reduced-motion preferences and remove entrance delays in that mode.
  • Preserve readable text alternatives for product and process imagery; use empty alternatives for purely decorative texture.
  • Supply responsive image crops and intrinsic dimensions. Do not lazy-load the initial hero; reserve lazy loading for below-fold media.
  • Provide a readable address independently of an interactive map, and verify the reservation destination before publishing a new implementation.

Agent Prompt Guide

Quick Color Reference
  • Main canvas: #d2d2d2.
  • Dark chapters: #151f25.
  • Main light-surface text: #333333.
  • Secondary translation text: #72797c.
  • Dark-section text and footer surface: #ffffff.
  • Rules: thin, quiet gray; exact original rule color is unknown.
  • Food colors belong to photography, not a new interface accent system.
Overall Prompt

“Create an editorial website for a Japanese French-pastry shop, with six numbered chapters: ABOUT, MENU, CONCEPT, SHOP, RESERVE, and ACCESS. Use silver gray #d2d2d2, deep blue-black #151f25, charcoal text, and a white closing footer. Pair Shippori Mincho Japanese typography with Cormorant Garamond chapter titles and numbered navigation. Use narrow 360px desktop prose columns, 24px Japanese headings, small French translations, fine rules, and generous leading. Let square-cornered pastry, workshop, and paper-packaging photographs carry the color. Alternate centered and offset editorial compositions. On a 390px phone, use approximately 38px content gutters, a tall opening photograph with a narrow vertical utility rail, and a stacked footer with the logo first. Treat unobserved desktop image crops and menu behavior as explicit implementation decisions.”

Example Component Prompts
  1. Bilingual prose: “Build a 360px editorial text block on a blue-black background. Use a white 24px Shippori Mincho heading at 1.7 line height, a muted 12px French translation 25px below it, a 40px hairline divider after generous space, and white 14px body text at approximately 30px leading. Use a 314px column at a 390px viewport.”
  2. Craft composition: “Arrange rectangular workshop photographs on a deep blue-black field with unequal widths and staggered top edges. Leave large areas of uninterrupted background. Follow the upper photographs with a left-aligned packaging explanation and a much larger right-side photograph of triangular paper wrapping and ribbon. Avoid card borders and shadows.”
  3. Mobile hero: “At 390 × 844, place a tall pastry photograph approximately 85px below the top edge, spanning about 353px from the left. Reserve a pale right rail for vertical ALL MENU and INSTAGRAM links. Place the authorized white brand lockup over the upper-middle image and a small French caption near the lower left.”
  4. Footer: “Create a white footer with fine serif navigation, tiny chapter numbers, short horizontal rules, and the original triangular brand lockup. On desktop, place navigation left, logo centrally, and company details lower right. On mobile, order logo, two-column navigation, divider, ALL MENU, Instagram, then muted company details.”
  5. Reservation information: “Use a full-width blue-black chapter with white type. Put a compact heading and text action beside a 450px explanatory column on desktop. Stack the content on mobile and use approximately 16px text with 1.6 line height. Keep the reservation action after the final mobile paragraph.”

Quick Start

CSS Custom Properties

This starter reproduces the measured color and type system, recurring prose anatomy, access columns, and footer relationships. It uses conventional root sizing. The 760px breakpoint, generic chapter padding, arrow treatment, and some grid behavior are recommended adaptations. It does not reconstruct unverified desktop hero media, navigation overlays, reveal endpoints, or an opening-screen dismissal sequence.

Load the authorized font files and brand/image assets separately. No asset URLs were included in the supplied evidence.

:root {
  /* Measured colors */
  --pm-paper: #d2d2d2;
  --pm-night: #151f25;
  --pm-ink: #333333;
  --pm-muted: #72797c;
  --pm-white: #ffffff;
  --pm-menu-ink: #f7f7f7;

  /* Recommended approximation for unmeasured rule color */
  --pm-rule: rgb(51 51 51 / 35%);

  /* Measured family declarations, with a recommended Latin fallback */
  --pm-font-jp: 'Shippori Mincho', 游明朝, 'Yu Mincho', YuMincho,
    'Hiragino Mincho Pro', serif;
  --pm-font-latin: 'Cormorant Garamond', serif;

  --pm-section-size: 42px;
  --pm-heading-size: 24px;
  --pm-body-size: 14px;
  --pm-caption-size: 12px;
  --pm-action-size: 16px;
  --pm-body-leading: 2.14;
  --pm-heading-leading: 1.7;
  --pm-tracking: 0.05em;

  --pm-gutter: 100px;
  --pm-prose-width: 360px;
  --pm-translation-space: 60px;
  --pm-link-duration: 400ms;
  --pm-reveal-duration: 1400ms;
  --pm-reveal-delay: 200ms;
}

.pm-page,
.pm-page * {
  box-sizing: border-box;
}

.pm-page {
  margin: 0;
  color: var(--pm-ink);
  background: var(--pm-paper);
  font-family: var(--pm-font-jp);
  font-size: var(--pm-body-size);
  font-weight: 500;
}

.pm-page a {
  color: inherit;
}

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

.pm-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Generic chapter spacing is an adaptation, not a fixed source formula. */
.pm-chapter {
  padding-block: 160px;
}

.pm-chapter--dark {
  color: var(--pm-white);
  background: var(--pm-night);
  --pm-rule: rgb(255 255 255 / 45%);
}

.pm-chapter-heading {
  position: relative;
  text-align: center;
}

.pm-chapter-number {
  position: absolute;
  inset: 0 0 auto;
  font-family: var(--pm-font-latin);
  font-size: 12px; /* Recommended; this individual size was not measured. */
}

.pm-chapter-title {
  margin: 0;
  padding-top: 40px;
  font-family: var(--pm-font-latin);
  font-size: var(--pm-section-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--pm-tracking);
}

.pm-prose {
  width: min(100%, var(--pm-prose-width));
}

.pm-prose--center {
  margin-inline: auto;
}

.pm-prose-title {
  margin: 0;
  font-size: var(--pm-heading-size);
  font-weight: 500;
  line-height: var(--pm-heading-leading);
  letter-spacing: -0.05em;
}

.pm-french {
  position: relative;
  margin: 25px 0 50px;
  padding-bottom: var(--pm-translation-space);
  color: var(--pm-muted);
  font-size: var(--pm-caption-size);
  line-height: 1.5;
  letter-spacing: var(--pm-tracking);
}

.pm-french::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: currentColor;
}

.pm-french--compact {
  margin: 5px 0 0;
  padding: 0;
}

.pm-french--compact::after {
  content: none;
}

.pm-body-copy {
  margin: 0;
  line-height: var(--pm-body-leading);
}

.pm-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 200px;
  min-height: 35px;
  margin-top: 50px;
  font-size: var(--pm-action-size);
  line-height: 1;
  text-decoration: none;
}

/* Consistent arrow treatment is a recommended adaptation. */
.pm-action::after {
  content: '⟶';
  font-family: serif;
}

/* Use outside .pm-container for the observed edge-reaching composition. */
.pm-packaging-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 180px;
  align-items: start;
  padding-left: var(--pm-gutter);
}

.pm-reservation-copy {
  max-width: 450px;
  line-height: var(--pm-body-leading);
}

.pm-reservation-copy p {
  margin: 0 0 40px;
}

.pm-access-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 910px;
  margin-inline: auto;
}

.pm-access-group {
  border-left: 1px solid var(--pm-rule);
  padding-left: 30px;
  line-height: 2.1;
}

.pm-access-group p {
  margin: 0;
}

.pm-nav-columns {
  display: grid;
  grid-template-columns: 120px 114px;
  column-gap: 56px;
}

.pm-nav-list {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-nav-link {
  display: grid;
  grid-template-columns: 8px 22px 1fr;
  column-gap: 10px;
  align-items: center;
  font-family: var(--pm-font-latin);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--pm-tracking);
  text-decoration: none;
}

.pm-nav-index {
  font-size: 8px; /* Visual estimate, not a computed source value. */
}

.pm-nav-rule {
  height: 1px;
  background: var(--pm-rule);
}

.pm-footer {
  padding: 115px var(--pm-gutter) 105px;
  background: var(--pm-white);
}

.pm-footer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 262px;
}

.pm-footer-nav {
  grid-area: 1 / 1;
}

.pm-footer-brand {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  width: 148px;
}

.pm-footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.pm-footer-utilities {
  grid-area: 2 / 1;
  align-self: end;
  display: grid;
  gap: 24px;
}

.pm-footer-utilities a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: var(--pm-tracking);
  text-decoration: none;
}

.pm-footer-utilities .pm-footer-all-menu {
  display: none;
}

.pm-footer-legal {
  grid-area: 2 / 3;
  justify-self: end;
  text-align: right;
}

.pm-footer-legal p {
  margin: 0;
  line-height: 1.7;
}

.pm-footer-legal .pm-copyright {
  font-size: 12px;
  line-height: 1;
}

/* Recommended accessible feedback; source hover appearance is unknown. */
.pm-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .pm-nav-link:hover,
  .pm-action:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
}

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 760px) {
  :root {
    --pm-gutter: clamp(20px, 9.74vw, 38px);
    --pm-section-size: 32px;
    --pm-translation-space: 50px;
  }

  .pm-chapter {
    padding-block: 105px;
  }

  .pm-chapter-heading {
    padding-top: 52px;
  }

  .pm-chapter-number {
    top: 52px;
  }

  .pm-prose {
    width: 100%;
  }

  .pm-action {
    width: 100%;
  }

  .pm-packaging-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
    padding-inline: var(--pm-gutter);
  }

  .pm-reservation-copy {
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }

  .pm-reservation-copy p {
    margin-bottom: 20px;
  }

  .pm-access-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 85px;
  }

  .pm-access-group {
    padding-left: 20px;
  }

  .pm-footer {
    padding-block: 120px 40px;
  }

  .pm-footer-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .pm-footer-brand {
    order: 0;
    align-self: center;
  }

  .pm-footer-nav {
    order: 1;
    margin-top: 100px;
  }

  .pm-nav-columns {
    column-gap: 24px;
  }

  .pm-nav-list {
    gap: 20px;
  }

  .pm-footer-utilities {
    order: 2;
    align-self: stretch;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--pm-rule);
  }

  .pm-footer-utilities .pm-footer-all-menu {
    display: flex;
  }

  .pm-footer-legal {
    order: 3;
    margin-top: 90px;
    color: var(--pm-muted);
    font-size: 12px;
    text-align: left;
  }

  .pm-footer-legal .pm-copyright {
    margin-top: 10px;
  }
}

/* No entrance state is hidden by default in this starter. */
@media (prefers-reduced-motion: reduce) {
  .pm-page *,
  .pm-page *::before,
  .pm-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

For a numbered navigation item, use three children inside .pm-nav-link: .pm-nav-index, an aria-hidden .pm-nav-rule, and the label. Group three items in each .pm-nav-list, with both lists inside .pm-nav-columns. Keep the numerical indices decorative if the accessible link label already names the destination.

For the footer grid, .pm-footer-layout contains .pm-footer-nav, .pm-footer-brand, .pm-footer-utilities, and .pm-footer-legal. The mobile order is explicitly defined by CSS. Supply the actual logo asset inside the brand link rather than replacing it with generated text.

The packaging grid reproduces the observed desktop relationship at 1440px: 100px left gutter, 360px prose, 180px gap, then an 800px image region. Its stacked mobile form is a recommendation because the mobile packaging photograph was not captured.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-pm-paper: var(--pm-paper);
  --color-pm-night: var(--pm-night);
  --color-pm-ink: var(--pm-ink);
  --color-pm-muted: var(--pm-muted);
  --color-pm-white: var(--pm-white);

  --font-pm-jp: var(--pm-font-jp);
  --font-pm-latin: var(--pm-font-latin);

  --text-pm-section: var(--pm-section-size);
  --text-pm-heading: var(--pm-heading-size);
  --text-pm-body: var(--pm-body-size);
  --text-pm-caption: var(--pm-caption-size);
  --text-pm-action: var(--pm-action-size);

  --spacing-pm-gutter: var(--pm-gutter);
  --spacing-pm-prose: var(--pm-prose-width);
  --radius-pm-flat: 0px;
}

Sources & Evidence

  • Inspected original and final website: PAQUET MONTÉ. Both URLs are identical in the supplied browser record; HTTP status is 200.
  • Capture timestamp: September 22, 2026, 17:32:12.968 UTC, equivalent to September 23, 2026, 02:32:12.968 JST.
  • Desktop evidence: 1440 × 1000 CSS-pixel viewport; opening identity capture, craft/packaging capture, and access/footer capture. Supplied DOM measurements cover the hero, six chapters, links, and footer.
  • Mobile evidence: 390 × 844 CSS-pixel viewport; hero and footer captures, with corresponding rendered text, element rectangles, computed typography, and section measurements.
  • Observed link destinations: six homepage anchors, the mobile-specific ABOUT anchor, ALL MENU, Instagram, and the rendered reservation short link. Destination contents and click outcomes were not inspected.
  • Inspection limits: captures are selected views rather than a video or complete visual record of every chapter. The browser process included load, image, motion, and layout-readiness checks with finite limits; these do not prove semantic completeness. SharedWorkers and service workers were disabled during inspection. Exact breakpoints, opened navigation, hover appearances, map interaction, reveal endpoints, image asset paths, and the settled desktop hero crop remain unverified.

This reference analyzes only the supplied current-page captures and rendered evidence. No additional pages, files, or assets were opened. Measured values describe the inspected states; recommendations and starter code are explicitly reusable adaptations.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る