# 治一郎 Official Online Shop — Style Reference
> Generous confectionery photography, delicate Japanese serif titles, and quiet cream shopping controls.
**Website:** [jiichiro-shop.com](https://www.jiichiro-shop.com/)
**Original URL:** https://www.jiichiro-shop.com/
**Final URL:** https://www.jiichiro-shop.com/
**Theme:** white content surfaces, a pale cream footer, and photographic color in the opening hero.
**Inspected:** September 12, 2026, at 23:28 JST / 14:28 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current shop homepage: assortment hero, pickup failure message, news failure state, three product-category presentations, six customer-support links, persistent navigation, and footer. Menu contents have DOM evidence, but an opened menu was not visually demonstrated. Product listings, account screens, cart, and checkout were not inspected.
The homepage presents an established confectionery shop through the relationship between abundant product photography and restrained interface typography. The captured hero fills the screen with gift boxes and baked sweets arranged against a pink backdrop. A white brush-lettered identity, small utility labels, and a modest category caption sit over that photograph. Below it, pale studio photographs and broad white spaces give individual product families room to breathe.
The typography separates three jobs: calligraphic brand artwork, light Japanese serif headings, and small Gothic text for descriptions and shopping information. Cream appears where the interface needs a dependable surface: mobile navigation tiles, the visible category-link pills, and the substantial footer. This is a browsing storefront with practical customer-service infrastructure, rather than a single campaign page.
## How to Read This Reference
- **Measured** values come from the supplied rendered DOM and computed styles. Decimal dimensions are rounded for readability unless the precision explains a layout relationship.
- **Visually observed** details come from the five current-page captures: three desktop views and two mobile views.
- **Derived** values are calculations from measured rectangles, such as column gaps or spacing between text blocks.
- **Estimates** describe visible details whose owning element or computed property was not supplied. They are not pixel samples.
- **Recommendations** and the Quick Start are implementation guidance. Their responsive breakpoint, image sizing rules, and state-management hooks are not recovered source code.
- Font-family names below are present in computed stacks. The supplied evidence does not independently establish which font file rendered every glyph.
- Pickup and news requests displayed failure messages. The remaining homepage is sufficiently visible for analysis, but successful feed content must not be reconstructed from assumptions.
## Tokens — Colors
### Default Palette
| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-page` | Measured body background; also measured reversed hero text |
| Footer Cream | `#f8f6e7` | `--color-footer` | Measured footer background at both viewports |
| Control Cream | `#efe9c7` | `--color-control` | Measured mobile utility-tile background; visually similar to desktop circular icon surfaces and category pills |
| Black | `#000000` | `--color-ink` | Measured body text, product headings, utility labels, and footer text |
| Warm Heading Ink | `#231815` | `--color-heading` | Measured color of the news and product-information section headings |
| Fine Rule | Approximately `#d4d1c7` | `--color-rule` | Visual estimate for quiet footer dividers; recommended direct-color approximation |
| Icon Tile | Approximately `#f7f7f7` | `--color-icon-surface` | Visual estimate for support-card icon backgrounds; recommended approximation |
The category links visibly have a cream pill silhouette, but their sampled anchor nodes report a transparent background and zero radius. The visible fill and rounding therefore cannot be assigned to that anchor from the evidence alone. Reusing Control Cream for a new pill component is a visual adaptation, not an independently measured pill-fill declaration.
### Photographic Color
The opening photograph contributes coral pink, pale lilac-gray wrapping paper, warm biscuit brown, and golden cake. These colors belong to the image, not to a large interface color system. Preserve the difference between the saturated opening photograph and the quiet white-to-gray studio scenes farther down the page.
No photographic hex values were measured. For a new implementation, choose photography first and keep the interface palette stable around it.
### Source Variables That Are Not the Visible Homepage Palette
The document exposes generic commerce variables, including `--fs-color-button--primary: #bd0000`, `--fs-color-button--standard: #0d318e`, and `--fs-color-font--link: #3572b0`. It also exposes `--swiper-theme-color: #007aff`.
These declarations do not establish red primary CTAs or blue carousel controls on the inspected homepage. Its visible category actions are cream, its utility text is black or white, and its hero indicators are white. Do not substitute generic platform variables for the actual rendered component treatment.
## Tokens — Typography
### Japanese Body and Utility Copy
**Computed stack:** `ryo-gothic-plusn, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif`.
Body and product descriptions use weight `300`, `14px` text, `24.08px` line height, and `0.42px` tracking. These values remain essentially unchanged at 390px width. The spacious line height and light weight support the calm presentation without making the copy oversized.
Delivery guidance and footer group labels use weight `500` to distinguish practical information from surrounding links.
### Japanese Serif Headings
**Computed stack:** `ryo-text-plusn, serif`.
Section and product headings use weight `300`. Support-card titles use weight `500`, giving smaller labels enough presence beside their icons. The source does not use the brush logo as a general heading font: that lettering is separate identity artwork.
### Latin Utility Labels and Telephone
**Computed stack:** `Figtree, ryo-gothic-plusn, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif`.
Figtree leads the stacks for `ITEM`, `CART`, `MYPAGE`, `MENU`, `Scroll`, `PAGETOP`, and the telephone number. Small uppercase labels use conspicuous tracking rather than heavy weight. Desktop hero navigation uses weight `500`; the navigation visible after scrolling uses `300`. Mobile utility labels use `500`.
### Brand Lettering
The logo is vertically arranged brush lettering with a small seal. Three lockup treatments are visible: a centered white hero identity on desktop, a compact white identity at the upper left on mobile, and dark vertical branding in the persistent desktop header and footer.
Use the appropriate authorized artwork. Replacing it with ordinary text in a guessed calligraphy font would lose its proportions and seal placement.
### Type Scale
All sizes below are measured computed values. Mobile rounding such as `24.0001px` is normalized to `24px`.
| Role | Desktop | Mobile | Weight | Line height and tracking |
| --- | --- | --- | --- | --- |
| Base/product copy | `14px` | `14px` | `300` | `24.08px`; `0.42px` tracking |
| Hero category caption | `32px` | `24px` | `300` | `42px` / `31.5px`; `0.42px` tracking |
| Section heading | `32px` | `26px` | `300` | `42px` / approximately `38.01px`; tracking `1.92px` / `1.56px` |
| Product heading | `28px` | `24px` | `300` | `33.6px` / `28.8px`; tracking `0.56px` / `0.48px` |
| Category-link label | `14px` | `14px` | `300` | Inherited approximately `24.08px`; `0.42px` tracking |
| Utility navigation | `13px` | `10px` | State-dependent | `13px` / `10px`; tracking `1.04px` / `0.8px` |
| Support-card title | `18px` | `15.5px` | `500` | Approximately `26.53px` / `44px`; tracking `0.9px` / normal |
| Support-card description | `14px` | `13px` | `300` | `24.08px` / `22.36px`; `0.42px` tracking |
| Footer primary link | `14px` | `13px` | `300` | `21px` / `19.5px`; `1.12px` tracking |
| Footer guide link | `13px` | `12px` | `300` | `19.5px` / `18px`; `1.12px` tracking |
| Footer legal link | `12px` | `11px` | `300` | `18px` / `16.5px`; `1.12px` tracking |
| Telephone number | `17px` | `17px` | `500` | `17px`; `1.12px` tracking |
| Copyright | `10px` | `10px` | `300` | `10px`; `1.12px` tracking |
The mobile support title's `44px` line box belongs to its icon-and-title row. It should not become the default line height for every small heading.
The source root is `10px` at both inspected widths. The Quick Start uses explicit pixel tokens so it can coexist with a conventional application root without copying that global setting.
## Tokens — Spacing & Shapes
### Spacing Scale
There is no demonstrated universal spacing formula. Several repeated distances form a practical working vocabulary.
| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero caption left inset | `40px` | `16px` | Measured |
| Hero caption bottom clearance | `40px` | `58px` | Derived from caption and hero rectangles |
| Product-copy width | `510px` | `330px` | Measured |
| Main mobile content inset | — | `30px` | Measured product, support, and footer alignment |
| Product heading to paragraph | `32px` | `24px` | Derived |
| Product paragraph to link | `32px` | `32px` | Derived |
| Product-section top padding | `160px` | `80px` | Measured |
| Support-card padding | `30px` | `20px` | Measured |
| Support-card horizontal internal gap | `30px` | `14px` | Measured |
| Support-grid column gap | `25px` | Single column | Derived |
| Support-grid row gap | `25px` | `16px` | Derived |
| Support section to first card | `140px` | `80px` | Derived |
| Last support card to footer | `150px` | `80px` | Derived |
| Footer outer horizontal inset | `120px` | `30px` | Measured content placement |
### Border Radius
| Element | Value | Evidence |
| --- | --- | --- |
| Hero and product image fields | Square | Visual observation |
| Mobile utility tiles | `0` | Measured |
| Footer cart/account controls | `4px` | Measured |
| Support cards | `8px` desktop; `6px` mobile | Measured |
| Category-link silhouette | Full pill, approximately half its height | Visual observation; sampled anchor radius is `0` |
| Desktop utility icon surfaces | Circular | Visual observation |
| Hero indicators | Small dot and larger ring | Visual observation |
Fine outlines and dividers appear approximately `1px` thick. Border widths and colors were not included for all relevant nodes, so these remain visual estimates. There is no visible general-purpose shadow elevation system.
### Layout Measurements
| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 |
| --- | --- | --- |
| Document height | Approximately `4620.98px` | Approximately `5001.75px` |
| Opening hero | `1440 × 1000px` | `390 × 844px` |
| Hero brand link | `168 × 162.03px`, at `(636, 36.5)` | `115 × 92.95px`, at `(13, 16.5)` |
| Persistent desktop brand link | `39 × 244px`, at `(11, 16)` | Not visible as a persistent side logo |
| Category link | `145.5 × 50px` | `140.5 × 47px` |
| Support grid | `1060px` wide, beginning at `x = 190` | `330px` wide, beginning at `x = 30` |
| Support-card width | `517.5px` | `330px` |
| Typical support-card height | `166px`; final row `173.75px` | Approximately `143.72px`; varies with copy |
| Footer | Approximately `751.75px` high | Approximately `940.88px` high |
| Footer text region | `980px` wide, beginning at `x = 120` | `330px` wide, beginning at `x = 30` |
| Footer logo link | `91 × 225px`, including `40px` bottom padding | `65 × 172.14px`, including `40px` bottom padding |
The support cards grow with content. In particular, the mobile receipt card is about `121.36px` high, while the brand-site card is about `166.08px`. Treat the measured heights as outcomes, not a mandate for fixed-height cards.
## Components
### Opening Hero
**Role:** introduce the merchandise through a large photographic composition and provide immediate category access.
The captured hero is exactly one inspected viewport high. Its photograph shows gift boxes at several scales, an open assortment, sliced sweets, a whole baumkuchen, and plates against a pink background. Cropped boxes continue beyond the frame, making the arrangement feel abundant rather than isolated on a product card.
A link to `/c/itemlist/set` spans the hero area. Its visible caption is `詰め合わせ`, positioned near the lower left in white, light serif text. The desktop caption is `32px`; mobile reduces it to `24px` and moves it farther above the bottom edge.
Two small indicators appear at the lower right, with a larger white ring marking the visible state. Repeated hero links and captions also occur in the DOM. This supports a multi-item presentation structure, but does not establish the number of distinct images, autoplay timing, or slide-transition style.
The desktop `Scroll` cue is a small vertical label with a fine white line at the left edge. It is absent from the supplied mobile opening capture.
### Hero Identity and Utility Navigation
**Role:** retain recognizable branding and direct access to shopping tools over the photograph.
On desktop, the white brand lockup is centered independently of the navigation. A right-aligned row contains `ITEM`, `CART`, `MYPAGE`, and `MENU`. Icons precede labels; narrow vertical rules separate the controls. The row begins at approximately `x = 887`, `y = 35`. Controls use `30px` horizontal padding, `10px` icon-to-label gaps, and `28px` measured height.
The mobile arrangement changes substantially. The brand sits at the upper left while four opaque cream tiles occupy the top right. Each tile is `60 × 65px`, with approximately `1px` between tiles. The group begins at `x = 147`. Icons move above `10px` labels with a measured `7px` gap.
These are distinct desktop and mobile compositions. Do not merely shrink the desktop row until it fits.
### Persistent Navigation After Scrolling
**Role:** keep shopping tools available while the visitor reads product and support information.
Desktop scrolled captures show a narrow dark vertical logo at the far left and utility controls at the upper right. Here, labels precede pale circular icon surfaces. The utility controls begin at `y = 51`, are `32px` high, and use lighter text than the hero row. The icon circles are visually about `32px` in diameter.
The mobile footer capture shows a persistent `65px` top strip. Delivery guidance occupies the left, and four cream utility tiles begin at `x = 115`. These tiles are `68px` wide, compared with the hero's `60px` tiles.
The captures establish both visual states and their persistence in scrolled views. They do not establish the exact activation threshold, scroll-direction behavior, or source positioning algorithm.
### Delivery Guidance
**Role:** make delivery timing easy to find before a customer begins shopping.
The visible label is `お届け目安の確認はこちら`, linking to `/f/guide/delivery`.
- In the desktop hero, it sits below the pickup area at approximately `(35, 132.23)`, with a circled arrow and white text.
- In the mobile hero, it sits below the utility tiles at approximately `(174.95, 90)`, with a measured `199.05 × 19px` link box.
- In the desktop persistent header, it occupies the upper-right edge above the utility row.
- In the mobile persistent header, it becomes a two-line block at the left, within a measured `110 × 65px` anchor.
Its placement is a distinctive part of the shop's information hierarchy: delivery guidance remains close to the cart and account controls across layouts.
### Pickup and News Failure States
**Role:** display the current state of remote promotional and news content.
The pickup area visibly reports `ピックアップの読み込みに失敗しました。`, followed by a retry-later message and `エラー: Failed to fetch`. On desktop, it sits at the upper left of the hero. On mobile, it appears below the logo and delivery line, over the photograph.
The news section below the hero also reports a failed fetch. Its title and `一覽を見る` link remain available. The desktop section is `271px` high in this state; mobile is approximately `298.23px` high. Mobile places the heading, failed-content area, and list link in a vertical sequence within `30px` side insets.
No successful news rows, dates, badges, or pickup cards were supplied. Keep those unknown. In a new implementation, use a concise reader-facing failure message and preserve a useful navigation path; raw network diagnostics are not a visual motif to reproduce.
### Product Category Presentation
**Role:** introduce each product family with photography, short descriptive copy, and a category link.
The order is baumkuchen, assortments, then biscotte. Desktop alternates the relationship between product and text: the first and third text blocks begin at `x = 210`, while the assortment text begins at `x = 748.8`. All sampled text blocks are `510px` wide.
The photographed scene itself extends across a broad horizontal band. In the visible assortment section, the open box occupies the left, while a soft gray-white field supplies space for text on the right. The next biscotte section reverses the balance. This is not a grid of small product thumbnails.
Each text block contains a light serif heading, a restrained Gothic paragraph, and a cream category link. The assortment paragraph occupies two desktop lines and three mobile lines. Preserve wrapping flexibility rather than baking every line break into the layout.
| Source heading | Observed destination | Presentation role |
| --- | --- | --- |
| `治一郎のバウムクーヘン` | `/c/itemlist/jiichiro` | Introduces the signature cake and its texture |
| `詰め合わせ` | `/c/itemlist/set` | Presents gift assortments and their packaging |
| `ビスコット` | `/c/itemlist/biscotte` | Presents individual baked pieces and their texture |
On mobile, all three headings and descriptions align to `x = 30`, with `330px` width. The large intervals before successive text groups support a stacked presentation, but the supplied mobile screenshots do not show the middle product imagery. Exact mobile image heights, crop rules, and asset switching remain unverified.
### Category-Link Pill
**Role:** provide a compact route into a product family without competing with the photograph.
The visible anatomy is a pale cream capsule containing `商品一覧へ`, followed by a white circular marker with a small dark right-pointing triangle. Desktop link bounds are `145.5 × 50px`; mobile bounds are `140.5 × 47px`.
Measured anchor padding is `13px 15px 14px 19px` on desktop and `12px 15px 12px 17px` on mobile. The internal gap reduces from `15px` to `12px`. The circular marker is visually about `23px` across.
Implement the capsule as a visual layer if following the sampled transparent-anchor structure, or apply the fill and radius directly in an adaptation. Do not interpret the anchor's computed zero radius as evidence for a square visible button.
### Customer-Support Card Grid
**Role:** resolve common purchase questions and provide routes to service information.
Six full-card links cover shopping guidance, bulk orders, undelivered email, receipts, frequently asked questions, and the brand website.
Desktop uses two columns and three rows. A fine rounded outline encloses a pale icon tile at left and a title-and-description group at right. Each card has `30px` padding, a `30px` internal gap, and an `8px` radius. The icon area is approximately `104px` square, inferred from the measured title position and padding; its own rectangle was not supplied.
Mobile uses a single column with `16px` gaps. Its anatomy also changes: a compact icon and title share the first row, then the description starts at the card's left inner inset below them. The title begins at `x = 109`, while the description begins at `x = 50`. These measurements support a roughly `44px` icon row and `14px` icon-to-title gap, rather than a permanently narrow description column beside the icon.
Use simple dark symbols and restrained borders. The visible cards do not use photographic thumbnails, colored category chips, or raised shadows.
### Footer
**Role:** consolidate shopping guidance, contact information, legal navigation, and brand identity.
The footer is a full-width `#f8f6e7` surface. On desktop, its main content begins `120px` from the left. A wide text region and a smaller right identity region create an intentionally uneven composition.
The main groups are compact cart/account controls, primary navigation, shopping-guide links, telephone information, and legal links. Thin horizontal rules separate these groups. The cart/account controls have a dark outline and `4px` radius. The telephone number is a real `tel:` link, visually underlined and set in `17px` Figtree-led text.
A `PAGETOP` anchor points to `#l_header` at the upper right. A large dark brush logo occupies the lower right, with small copyright text beneath the surrounding content. The logo link includes bottom padding, so its measured rectangle is taller than the visible artwork.
On mobile, primary links form a vertical list. Cart and account controls stack toward the right of the upper group. Shopping-guide links become two columns beginning at `x = 30` and `x = 200`. Contact details stack vertically, legal links form a small left-aligned list, and a `65px`-wide logo sits at the lower right. Copyright remains at the lower left.
The footer remains detailed on mobile. It is not reduced to an accordion in the supplied evidence.
### Menu Contents — DOM Evidence Only
**Role:** provide a broader navigation collection behind the visible `MENU` button.
The extracted DOM includes cart/account controls, primary links, login, and legal destinations associated with the menu region. Primary menu links use `ryo-text-plusn`, weight `500`, at `17px` desktop and `16px` mobile. Their sampled rows are approximately `62.8px` and `57.39px` high respectively.
The corresponding links have nonzero rectangles, but no supplied screenshot demonstrates the menu open. These values document menu content and styles, not verified overlay appearance. Panel width, backdrop, opening direction, focus handling, and dismissal behavior remain unknown.
## Tokens — Motion & Interaction
| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| General link transitions | `0.4s cubic-bezier(0.215, 0.61, 0.355, 1)` on border, background, color, and opacity | A short eased transition is declared; specific hover endpoints were not captured |
| Menu-button transitions | `0.4s` with the same curve on color and inset | These properties are declared for the button; this is not evidence for the whole panel's animation |
| Hero presentation | Two visible indicators and repeated linked captions | Multiple presentation items are represented; timing, autoplay, swipe behavior, and transition effect are unverified |
| Header change | Different opening and scrolled header arrangements | The visual states are observed; their trigger threshold and transition are unknown |
| Category navigation | Actual category `href` values | Link destinations are established; destination-page behavior was not tested |
| Telephone | `tel:0120530331` | Telephone-link semantics are present; no call was made |
| Page top | Anchor to `#l_header` | Target is established; smooth scrolling was not tested |
| Sampled node animations | Usually `animation: none` | No named animation was recorded on those nodes; this does not rule out child, pseudo-element, or script-driven motion |
The capture process allowed at least five seconds of initial observation and waited for layout, visible imagery, and finite animation readiness within stated limits. It temporarily paused perpetual animations during readiness checks. Static captures and sampled transition declarations therefore cannot provide a complete motion specification.
For reuse, retain the measured `400ms` easing for modest color and opacity feedback. Introduce any carousel animation only as a clearly new implementation choice. A reduced-motion alternative is recommended.
## Surfaces
| Layer | Appearance | Function |
| --- | --- | --- |
| Opening photograph | Pink photographic field, full viewport | Strongest color and merchandise presence |
| Hero chrome | White lettering and icons over the photograph | Identity and direct navigation |
| Mobile utility tiles | Opaque Control Cream with black icons | Readable shopping controls over changing content |
| Main content | White canvas and pale photographic backgrounds | Calm product presentation |
| Category action | Cream pill with white circular arrow marker | Small, repeatable category entry |
| Support card | Fine outline, pale icon tile, little corner rounding | Practical information grouping |
| Footer | Continuous Footer Cream with thin dividers | Dense but orderly service and legal information |
Soft shadows around cakes, boxes, and plates are part of the photographs. Do not translate them into a general CSS shadow beneath interface components. Surface separation mostly comes from color, whitespace, rules, and composition.
## Imagery
The opening still life is generous and closely cropped. Wrapped boxes repeat pastel circular, ribbon-like, and geometric patterns. Visible sweets add warm golden and brown tones, while pink biscotte echoes the background. Plates and packaging provide scale without introducing people or a busy retail environment.
Product sections use a different photographic rhythm: fewer objects, pale backgrounds, soft directional shadows, and clear space reserved for text. The assortment image shows both an open presentation box and its wrapped counterpart. The biscotte image emphasizes individual pieces, colors, and baked surfaces.
Photography must be composed for its text relationship. Placing an arbitrary centered product image behind a right-aligned paragraph will not recreate the observed balance.
The mobile hero preserves the tall sense of abundance and reveals a different distribution of boxes within the narrow frame. The evidence cannot distinguish a dedicated portrait asset from cropping or other image-layout techniques. Art-directed desktop and mobile sources are a recommendation, not a verified source mechanism.
### Observed Asset References
Image paths, `srcset` values, SVG filenames, and font-file URLs were not included in the evidence. The following is an appearance inventory, not a list of discovered file paths.
| Asset | Current evidence | Reuse requirement |
| --- | --- | --- |
| Pink assortment hero | Visible on desktop and mobile | High-resolution scene with intentional crops and room for navigation |
| White hero brand artwork | Centered desktop lockup and compact mobile lockup | Authorized artwork matching each arrangement |
| Dark vertical brand artwork | Desktop persistent header and both footers | Preserve calligraphy, seal, and aspect ratio |
| Baumkuchen category photography | Partially visible in the desktop middle capture; category confirmed by DOM | Verify the full composition before exact reproduction |
| Assortment category photography | Clearly visible desktop scene | Preserve open packaging and text-side negative space |
| Biscotte category photography | Visible in the lower portion of the desktop middle capture | Preserve distinct pieces and soft studio treatment |
| Utility and support symbols | Visible shopping icons and portions of support-card symbols | Use consistent dark or reversed monochrome artwork; exact source files unknown |
Use available original assets only when authorized. For a new brand, commission equivalent product photography and create its own identity rather than imitating the original wordmark.
## Layout & Responsive Behavior
### Page Sequence
The desktop DOM records this sequence: a `1000px` hero, news region, product-information region, support-card region, a `150px` gap, then the footer. Mobile retains the same order with an `844px` hero and a single-column support list.
Document height grows from approximately `4621px` to `5002px` on mobile despite the shorter hero. Stacked information, additional text wrapping, and the taller footer account for the different overall rhythm.
### Desktop Composition
The layout uses several content widths instead of one container applied everywhere:
- Full viewport width for hero and product image fields.
- `510px` product-copy blocks, beginning at `x = 210` or `x = 748.8`.
- A `1060px` support grid centered between `190px` side margins.
- A broader footer envelope spanning approximately `x = 120` to `x = 1320`, with `980px` reserved for its main text groups.
- A narrow persistent brand rail at the far left.
This difference in widths is part of the design. Product storytelling, service cards, and footer navigation should not all collapse into one identical card container.
### Mobile Composition
Mobile content repeatedly uses `30px` side insets, yielding `330px` text and support-card widths. The hero uses smaller edge insets and remains full bleed. Body product text stays `14px`; headings scale down moderately instead of making every element proportionally tiny.
The navigation changes into icon-over-label tiles. Support cards switch both column count and internal anatomy. Footer shopping guides become two columns while primary and legal navigation stack. The persistent side logo is absent from the mobile scrolled capture.
### Responsive Limits
Only the two supplied viewport sizes were inspected. The source breakpoint, intermediate-width behavior, landscape treatment, browser-chrome sizing, and safe-area handling were not provided. The Quick Start uses `767px` as a recommended breakpoint and `100svh` for a stable mobile hero; neither is claimed as original CSS.
The current mobile hero and footer are visually documented. Middle-page mobile layout is supported by DOM geometry, with image cropping still unverified.
## Do’s and Don’ts
### Do
- Give the opening photograph a full viewport and let products extend beyond its edges.
- Preserve the shift from a pink hero to quiet pale product scenes.
- Use the measured white, Footer Cream, Control Cream, black, and warm heading ink for the interface.
- Keep Japanese headings light and serif, with Gothic descriptions and tracked Latin utility labels.
- Preserve the distinction between the hero header and the header seen after scrolling.
- Use opaque cream navigation tiles on mobile and keep delivery guidance nearby.
- Alternate desktop product compositions while keeping descriptions compact.
- Keep category links modest, with a cream capsule and small circular arrow marker.
- Reflow mobile support cards into an icon/title row followed by a wider description.
- Retain the footer's shopping guidance, contact details, and asymmetric brand placement.
- Treat failed feeds as observed content states and keep successful states unclaimed.
### Don't
- Don't turn the homepage into a generic conversion page with a huge slogan, repeated sales banners, and a single dominant purchase button.
- Don't replace the product presentations with uniformly rounded product cards.
- Don't apply generic red or blue commerce variables to components that visibly use cream.
- Don't make pink the background of every content section; its strongest role comes from the hero photograph.
- Don't replace the brush logo with a guessed font.
- Don't confuse photographic shadows with interface elevation.
- Don't shrink the desktop navigation into a cramped mobile text row.
- Don't force mobile support descriptions into the narrow space beside the icon.
- Don't infer an open menu, autoplay interval, swipe action, hover endpoint, or smooth scroll from static screenshots.
- Don't copy the failed-fetch diagnostic as permanent promotional copy.
## Recommended Implementation Additions
These are recommendations for a new implementation, not verified features of the original page:
- Give the brand links meaningful accessible names and mark decorative duplicate icon content appropriately.
- Keep destination controls as links and use buttons for menu and carousel state changes. Avoid nesting utility controls inside the hero's category link.
- Give a menu button an accurate expanded state, connect it to the panel, and implement keyboard focus and dismissal behavior when that panel is built.
- If the hero advances automatically, provide pause and manual controls, and respect reduced-motion preferences.
- Enlarge small visual indicators and footer controls through their interactive hit areas. Preserve the compact appearance without relying on tiny targets.
- Check white-on-photograph text against every approved crop. A subtle local scrim may be appropriate where imagery does not provide sufficient contrast.
- Provide a useful fallback link and a concise status message when pickup or news content fails. Keep raw diagnostics in developer tooling.
- Reserve space for imagery to avoid layout shifts and load below-the-fold scenes without delaying the hero.
- Add scroll clearance for the persistent mobile header so anchor targets and focused content remain readable.
- Test text enlargement and font fallback. Several footer labels are only `11–12px` on mobile, and the source's light weight requires care.
## Agent Prompt Guide
### Quick Color Reference
- Main content: `#ffffff`.
- Footer: `#f8f6e7`.
- Mobile navigation tiles: `#efe9c7`.
- Category-pill adaptation: reuse `#efe9c7`, with a white circular marker.
- Main text and icons: `#000000`.
- Major section headings: `#231815`.
- Dividers: quiet warm gray; approximately `#d4d1c7` is an implementation estimate.
- Pink, lilac, and cake gold: supplied by photography, not an expanded UI theme.
### Overall Prompt
“Create a Japanese confectionery storefront with a full-screen assortment photograph on a pink backdrop, a centered white brand lockup on desktop, and small tracked shopping utilities at the upper right. Follow it with spacious pale product scenes whose text alternates left and right. Use light Japanese serif headings, 14px Gothic descriptions with approximately 24px line height, and compact cream category pills with white circular arrow markers. Add six restrained customer-support links in a two-column desktop grid and a detailed cream footer. On mobile, use a compact upper-left brand lockup, cream icon-over-label utility tiles, 30px content insets, single-column support cards, and a reorganized footer. Use only authorized brand and product imagery. Treat unverified carousel and menu behavior as implementation decisions.”
### Example Component Prompts
1. **Hero:** “A full-viewport confectionery assortment scene with pink background, pastel wrapped boxes, open gift packaging, and golden baked sweets. Overlay a white authorized brand mark, small utility navigation, a delivery-information link, and a light serif `詰め合わせ` caption near the lower left. Preserve separate desktop and portrait compositions.”
2. **Product presentation:** “A broad pale studio scene showing an open gift box at left and a 510px text block at right. Use a 28px light Japanese serif heading, 14px copy with 24px line height, 32px vertical text gaps, and a small cream `商品一覧へ` capsule.”
3. **Support card:** “A finely outlined white card with 8px corners, a pale square monochrome icon tile, an 18px medium serif title, and small Gothic explanatory copy. On mobile, use 6px corners and place the description across the width below the compact icon/title row.”
4. **Mobile header:** “A persistent 65px top strip with two-line delivery guidance at left and four cream shopping tiles at right. Put black icons above tracked 10px labels. Keep the hero version's narrower tiles distinct from the scrolled version.”
5. **Footer:** “A pale cream service footer with thin warm-gray dividers, small outlined cart/account links, grouped shopping guidance, an underlined telephone link, and a vertical brush logo at the lower right. On mobile, stack primary and legal links while keeping shopping guides in two columns.”
## Quick Start
### CSS Custom Properties
This is a reusable adaptation, not extracted source CSS. Exact tokens are carried over where measured; approximate border colors, pill decoration, image rules, and the breakpoint are recommendations. Desktop product media is assumed to contain intentional negative space behind the text. Mobile media height must be adjusted after the actual assets are available.
The header uses two structures: hero-local branding/navigation and a persistent `.shop-header`. Toggle the latter's `hidden` attribute when appropriate. An IntersectionObserver is a recommended implementation choice; the original trigger logic is unknown. Menu and carousel scripting are outside this CSS.
```css
:root {
/* Measured interface colors */
--color-page: #ffffff;
--color-footer: #f8f6e7;
--color-control: #efe9c7;
--color-ink: #000000;
--color-heading: #231815;
/* Recommended visual approximations */
--color-rule: #d4d1c7;
--color-icon-surface: #f7f7f7;
/* Computed source stacks; supply licensed fonts separately */
--font-body: ryo-gothic-plusn, 'Hiragino Kaku Gothic ProN',
'Hiragino Sans', Meiryo, sans-serif;
--font-heading: ryo-text-plusn, serif;
--font-latin: Figtree, var(--font-body);
--text-body: 14px;
--text-section: 32px;
--text-product: 28px;
--text-support: 18px;
--leading-body: 1.72;
--leading-section: 42px;
--tracking-body: 0.42px;
--content-gutter: 30px;
--support-width: 1060px;
--footer-width: 1200px;
--footer-gutter: max(30px, calc((100vw - 1200px) / 2));
--radius-card: 8px;
--radius-utility: 4px;
--space-copy: 32px;
--motion-duration: 400ms;
--motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.shop,
.shop * {
box-sizing: border-box;
}
body.shop {
margin: 0;
color: var(--color-ink);
background: var(--color-page);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 300;
line-height: var(--leading-body);
letter-spacing: var(--tracking-body);
}
.shop img {
display: block;
max-width: 100%;
}
.shop a {
color: inherit;
text-decoration: none;
}
.shop button {
font: inherit;
color: inherit;
cursor: pointer;
}
.shop a,
.shop button {
transition:
color var(--motion-duration) var(--motion-ease),
background-color var(--motion-duration) var(--motion-ease),
border-color var(--motion-duration) var(--motion-ease),
opacity var(--motion-duration) var(--motion-ease);
}
.hero {
position: relative;
height: 100vh;
height: 100svh;
color: var(--color-page);
isolation: isolate;
}
.hero__slide,
.hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__brand {
position: absolute;
z-index: 2;
top: 36.5px;
left: 50%;
width: 168px;
transform: translateX(-50%);
}
.hero__caption {
position: absolute;
left: 40px;
bottom: 40px;
margin: 0;
font-family: var(--font-heading);
font-size: 32px;
font-weight: 300;
line-height: 42px;
}
.utility {
display: flex;
align-items: center;
}
.utility__item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
font-family: var(--font-latin);
font-size: 13px;
font-weight: 300;
line-height: 1;
letter-spacing: 0.08em;
}
.utility__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
}
.utility__icon svg {
width: 20px;
height: 20px;
}
.hero .utility {
position: absolute;
z-index: 3;
top: 35px;
right: 0;
}
.hero .utility__item {
height: 28px;
padding-inline: 30px;
border-left: 1px solid rgb(255 255 255 / 45%);
font-weight: 500;
}
.hero__delivery {
position: absolute;
z-index: 3;
top: 132px;
left: 35px;
display: flex;
align-items: center;
gap: 7px;
font-size: 15px;
font-weight: 500;
}
.shop-header {
position: fixed;
z-index: 40;
inset: 0 0 auto;
height: 83px;
pointer-events: none;
}
.shop-header a,
.shop-header button {
pointer-events: auto;
}
.shop-header__brand {
position: absolute;
top: 16px;
left: 11px;
width: 39px;
}
.shop-header .utility {
position: absolute;
top: 51px;
right: 16px;
gap: 28px;
}
.shop-header .utility__item {
height: 32px;
}
.shop-header .utility__icon {
order: 1;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-control);
}
.shop-header__delivery {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
min-height: 37px;
padding-inline: 14px;
background: var(--color-footer);
font-weight: 500;
}
.product-section {
padding-top: 160px;
}
.section-title {
margin: 0 0 80px;
color: var(--color-heading);
font-family: var(--font-heading);
font-size: var(--text-section);
font-weight: 300;
line-height: var(--leading-section);
letter-spacing: 0.06em;
text-align: center;
}
.feature {
position: relative;
min-height: 480px;
}
.feature__media {
position: absolute;
inset: 0;
}
.feature__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature__inner {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
width: min(1020px, calc(100% - 60px));
min-height: inherit;
margin-inline: auto;
}
.feature__copy {
grid-column: 1;
min-width: 0;
}
/* Approximation of the observed asymmetric right-hand alignment */
.feature--reverse .feature__copy {
grid-column: 2;
transform: translateX(2vw);
}
.feature__title {
margin: 0 0 var(--space-copy);
font-family: var(--font-heading);
font-size: var(--text-product);
font-weight: 300;
line-height: 1.2;
letter-spacing: 0.02em;
}
.feature__description {
margin: 0 0 32px;
}
.category-link {
display: inline-flex;
align-items: center;
gap: 15px;
min-height: 50px;
padding: 13px 15px 14px 19px;
border-radius: 999px;
background: var(--color-control);
line-height: 23px;
}
.category-link__marker {
display: grid;
place-items: center;
flex: 0 0 23px;
width: 23px;
height: 23px;
border-radius: 50%;
background: var(--color-page);
}
.category-link__marker::before {
content: '';
width: 0;
height: 0;
margin-left: 2px;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 6px solid var(--color-ink);
}
.support {
padding-block: 140px 150px;
}
.support-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px;
width: min(var(--support-width), calc(100% - 60px));
margin-inline: auto;
}
.service-card {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: center;
gap: 30px;
padding: 30px;
border: 1px solid var(--color-rule);
border-radius: var(--radius-card);
}
.service-card__icon {
display: grid;
place-items: center;
width: 104px;
height: 104px;
border-radius: 8px;
background: var(--color-icon-surface);
}
.service-card__title {
margin: 0;
font-family: var(--font-heading);
font-size: var(--text-support);
font-weight: 500;
line-height: 1.4737;
letter-spacing: 0.05em;
}
.service-card__description {
margin: 13px 0 0;
}
.shop-footer {
position: relative;
padding: 120px var(--footer-gutter);
background: var(--color-footer);
letter-spacing: 1.12px;
}
.shop-footer__layout {
display: grid;
grid-template-columns: minmax(0, 980px) minmax(91px, 1fr);
gap: 32px;
}
.shop-footer__group {
padding-block: 36px;
border-bottom: 1px solid var(--color-rule);
}
.shop-footer__actions,
.shop-footer__primary,
.shop-footer__guide {
display: flex;
flex-wrap: wrap;
gap: 14px 28px;
}
.shop-footer__actions {
gap: 10px;
}
.outline-utility {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 33px;
padding: 6px 10px 5px 13px;
border: 1px solid currentColor;
border-radius: var(--radius-utility);
font-family: var(--font-latin);
line-height: 14px;
}
.shop-footer__guide {
font-size: 13px;
line-height: 1.5;
}
.shop-footer__telephone {
font-family: var(--font-latin);
font-size: 17px;
font-weight: 500;
}
.shop-footer a.shop-footer__telephone {
text-decoration: underline;
text-underline-offset: 2px;
}
.shop-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 36px;
font-size: 12px;
line-height: 1.5;
}
.shop-footer__brand {
align-self: end;
justify-self: end;
width: 91px;
}
.shop-footer__copyright {
margin: 32px 0 0;
font-size: 10px;
line-height: 1;
}
/* Recommended keyboard feedback */
.shop :focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
/* Recommended feedback; original hover endpoints were not supplied */
@media (hover: hover) {
.category-link:hover,
.outline-utility:hover {
opacity: 0.75;
}
.service-card:hover {
border-color: var(--color-ink);
}
}
/* Recommended breakpoint, not a measured source breakpoint */
@media (max-width: 767px) {
:root {
--text-section: 26px;
--text-product: 24px;
--text-support: 15.5px;
--leading-section: 38.012px;
--radius-card: 6px;
--space-copy: 24px;
}
html {
scroll-padding-top: 81px;
}
.hero__brand {
top: 16.5px;
left: 13px;
width: 115px;
transform: none;
}
.hero__caption {
left: 16px;
bottom: 58px;
font-size: 24px;
line-height: 31.5px;
}
.hero .utility,
.shop-header .utility {
top: 0;
right: 0;
gap: 1px;
}
.hero .utility__item,
.shop-header .utility__item {
flex-direction: column;
gap: 7px;
width: 60px;
height: 65px;
padding: 0;
border: 0;
color: var(--color-ink);
background: var(--color-control);
font-size: 10px;
font-weight: 500;
}
.shop-header .utility__item {
width: 68px;
}
.shop-header .utility__icon {
order: 0;
width: 20px;
height: 20px;
border-radius: 0;
background: transparent;
}
.hero__delivery {
top: 90px;
right: 16px;
left: auto;
font-size: 14px;
line-height: 19px;
}
.shop-header {
height: 65px;
}
.shop-header__brand {
display: none;
}
.shop-header__delivery {
right: auto;
left: 0;
width: 110px;
height: 65px;
padding-inline: 13px;
background: var(--color-page);
font-size: 12px;
line-height: 1.6;
letter-spacing: 0;
}
.product-section {
padding-top: 80px;
}
.section-title {
margin-bottom: 32px;
}
.feature {
min-height: 0;
padding-bottom: 48px;
}
.feature__media {
position: relative;
display: block;
height: 280px;
}
.feature__inner {
display: block;
min-height: 0;
}
.feature--reverse .feature__copy {
transform: none;
}
.category-link {
gap: 12px;
min-height: 47px;
padding: 12px 15px 12px 17px;
}
.support {
padding-block: 80px;
}
.support-grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.service-card {
grid-template-columns: 44px minmax(0, 1fr);
gap: 13px 14px;
padding: 20px;
}
.service-card__copy {
display: contents;
}
.service-card__icon {
grid-column: 1;
grid-row: 1;
width: 44px;
height: 44px;
}
.service-card__title {
grid-column: 2;
grid-row: 1;
line-height: 44px;
letter-spacing: 0;
}
.service-card__description {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
font-size: 13px;
}
.shop-footer {
padding: 46px 30px 40px;
}
.shop-footer__layout {
display: block;
}
.shop-footer__primary {
flex-direction: column;
align-items: flex-start;
gap: 15px;
font-size: 13px;
}
.shop-footer__guide {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 10px;
font-size: 12px;
}
.shop-footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-right: 80px;
font-size: 11px;
}
.shop-footer__brand {
position: absolute;
right: 30px;
bottom: 40px;
width: 65px;
}
.shop-footer__copyright {
margin-top: 54px;
}
}
.shop-header[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.shop a,
.shop button {
transition: none;
}
}
```
The fixed mobile tile widths reproduce the inspected `390px` viewport. For narrower devices, add a tested fluid-width rule so the delivery block and utilities cannot overlap. The example footer provides the palette and grouping foundation; its top-right utility arrangement and page-top control need positioning within the final content markup.
### Example Component Markup
Asset paths are intentionally omitted because none were supplied. Insert authorized media in the indicated locations.
```html
```
### Tailwind v4 Token Mapping
Optional aliases for an implementation already using Tailwind v4. This does not claim that the original shop uses Tailwind. Load the custom properties above first.
```css
@theme inline {
--color-shop-page: var(--color-page);
--color-shop-footer: var(--color-footer);
--color-shop-control: var(--color-control);
--color-shop-ink: var(--color-ink);
--color-shop-heading: var(--color-heading);
--color-shop-rule: var(--color-rule);
--font-shop-body: var(--font-body);
--font-shop-heading: var(--font-heading);
--font-shop-latin: var(--font-latin);
--text-shop-body: var(--text-body);
--text-shop-section: var(--text-section);
--text-shop-product: var(--text-product);
--text-shop-support: var(--text-support);
--spacing-shop-gutter: var(--content-gutter);
--spacing-shop-copy: var(--space-copy);
--radius-shop-card: var(--radius-card);
--radius-shop-utility: var(--radius-utility);
}
```
## Sources & Evidence
- **Inspected original and final page:** [治一郎 Official Online Shop](https://www.jiichiro-shop.com/). Both supplied URLs are identical, and the recorded HTTP status is `200`.
- **Retrieval timestamp:** `2026-09-12T14:28:01.830Z`, corresponding to September 12, 2026, at 23:28:01.830 JST.
- **Desktop evidence:** three current-page captures at `1440 × 1000`, covering the opening hero, middle product presentations, and lower support/footer area; rendered DOM reports approximately `4620.98px` document height.
- **Mobile evidence:** two current-page captures at `390 × 844`, covering the opening hero and lower footer; rendered DOM reports approximately `5001.75px` document height and provides middle-page component geometry.
- **Measured data:** element rectangles, computed font stacks, font sizes, weights, line heights, tracking, selected backgrounds, padding, gaps, radii, link destinations, and transition declarations supplied with the rendered page.
- **Observation procedure:** the supplied capture process waited for document load, finite animation readiness, sampled layout/text stability, and visible image decoding within bounded time limits. Scrolling traversed intermediate positions. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** pickup and news feeds failed; successful feed content was unavailable. No additional browsing or interaction testing was performed for this reference. Menu opening, carousel progression, hover endpoints, checkout, intermediate breakpoints, mobile middle-page imagery, and original asset URLs remain unverified.
This reference describes the current supplied homepage evidence. Measured values, visual estimates, derived dimensions, and implementation recommendations are identified separately throughout.