# Komoro Honjin Omoya — Style Reference

> Warm architectural photography, a bold serif menu, and the quiet precision of restaurant stationery.

**Website:** [komorohonjin.com](https://www.komorohonjin.com/)
**Original URL:** https://www.komorohonjin.com/
**Final URL:** https://www.komorohonjin.com/
**Theme:** white canvas, black typography, a restrained orange accent, and distinct charcoal and pale-gray editorial sections.
**Inspected:** September 23, 2026, Japan Standard Time. Supplied retrieval timestamp: September 22, 2026, 18:11:16.894 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current Japanese restaurant homepage, assessed from five original-page captures and supplied rendered DOM/computed-style records. The captures show the desktop opening, Party feature, terminal brand photograph, mobile opening, and mobile footer/terminal photograph. DOM evidence additionally covers News, dining availability, service features, Story, and footer links. Linked destination pages and open-menu states were not inspected.

Komoro Honjin Omoya presents a restaurant through its rooms, food, and history. Large photographs provide warmth and material detail; the interface around them stays white, flat, and sharply typeset. Bold English serif labels identify the main services, while smaller Japanese sans-serif copy supplies practical information. A calligraphic logo and a small orange seal connect the composition to the venue's identity.

The opening is an asymmetric directory into the website. On desktop, an interior photograph occupies the broad left column, with reservation links and a compact story introduction beneath it. A large, right-aligned service menu and the restaurant logo occupy the narrower right column. Mobile deliberately rearranges this composition: a full-width photograph leads into a logo-and-menu pairing, followed by the two practical links and the story introduction. The long homepage continues through News, six service features, historical context, contact links, and a closing architectural photograph.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or rendered element bounds. Measurements belong to the two inspected viewports.
- **Calculated** means arithmetic applied to those measurements, such as a column gap or image-container ratio. It does not establish the original CSS formula.
- **Visual estimate** means a feature is visible in a capture but lacks a corresponding computed measurement.
- **Recommended** means guidance for a new implementation. Breakpoints, accessibility improvements, and the Quick Start CSS are adaptations.
- **Named tokens** are descriptive aliases introduced here. The supplied custom-property list does not expose a dedicated restaurant design-token system.
- **Evidence limits:** font-family declarations are known; successful loading of every named font and per-glyph font selection were not independently verified. Asset URLs, hover states, menu behavior, and slideshow timing are unavailable.

The supplied WordPress presets and Swiper variables include numerous colors, shadows, and gradients. Their presence does not mean those treatments appear in the interface. The tokens below prioritize rendered elements and visible captures.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White Canvas | `#ffffff` | `--kh-paper` | Measured main background; visible opening, service sections, and footer surface |
| Black Ink | `#000000` | `--kh-ink` | Measured primary text, navigation, and body copy; visually echoed by the logo |
| Reservation Orange | `#e95504` | `--kh-accent` | Measured `rgb(233, 85, 4)` on the opening reservation link at both viewports |
| News Charcoal | `#1d2026` | `--kh-news` | Measured News section background at both viewports |
| Story Gray | `#f2f2f2` | `--kh-story` | Measured Story section background at both viewports |
| Quiet Gray | `#aaaaaa` | `--kh-muted` | Measured Privacy Policy text; small footer labels also appear muted in the mobile capture |
| Fine Divider | Approximately `#d0d0d0` | `--kh-rule` | Visual estimate for the thin separators between white service sections |

Orange is a selective text accent. The reservation link is orange, including its surrounding parentheses. The adjacent access link remains black. Preserve that small difference rather than introducing large orange-filled buttons throughout the page.

The logo's seal appears orange in the captures, but its asset color was not measured separately. Its exact fill should come from the authorized artwork.

### Scoped Color Cautions

The desktop News anchor containers report `#585858`, while the mobile anchors report white. Desktop descendant text colors were not included in the sample, and no News screenshot was supplied. Treat `#585858` as a scoped container measurement, not a verified color for every visible headline. The News heading and its View more link are explicitly measured as white.

Brown, amber, burgundy, green, and slate blue come mainly from photography. They are part of the visual atmosphere, not additional UI theme colors. No selectable theme system was evidenced.

## Tokens — Typography

### English Display and Navigation

**Measured family:** `p22-mackinac-pro, serif`.

**Measured weight:** `700` for primary navigation, English section headings, language links, the opening story introduction, View more links, and the closing brand link.

The type has substantial serif forms and a compact, confident silhouette. It gives short labels such as Lunch, Dinner, and Party the presence of a printed restaurant menu. Long English labels remain prominent; they are allowed to wrap on mobile.

Use the declared family when it is available and appropriately licensed. A generic serif fallback is supported by the observed stack, but it will change word widths and line breaks. The font files and loading configuration were not supplied.

### Japanese Body and Practical Information

**Measured primary family:** `dnp-shuei-gothic-gin-std`.

The supplied stack continues through Yu Gothic, YuGothic, Hiragino Kaku Gothic Pro, Meiryo UI, Meiryo, MS PGothic, and sans-serif fallbacks, including Japanese family-name variants.

**Measured weight:** `500` for sampled body text, practical links, and service descriptions.

**Measured tracking:** `0.7936px` on desktop body text and `0.66275px` on mobile, equivalent to `0.05em` at the corresponding body sizes.

English display typography and Japanese practical typography have distinct jobs. Keep the English categories bold and concise; give Japanese descriptions enough line spacing to read comfortably beside detailed photographs.

### Identity Artwork and Closing Slogan

The calligraphic restaurant mark is artwork, not a substitute font treatment. Its curves, surrounding flourishes, Japanese wordmark, English signature, and seal should remain together.

The closing slogan, “幸せなときを、もっと幸せに。”, appears in fine white Japanese lettering over the exterior photograph. Its exact font and whether it is live text or artwork were not established by the supplied DOM sample.

### Type Scale

All sizes below are computed CSS pixels. The original interpolation rules were not supplied.

| Role | Desktop size / line height | Mobile size / line height | Weight | Notes |
| --- | --- | --- | --- | --- |
| Body default | `15.872 / 27.776px` | `13.255 / 23.1963px` | 500 | Approximately `1.75` line height |
| Service paragraph | `15.804 / 31.608px` | `13.255 / 23.1963px` | 500 | Desktop uses `2`; mobile uses approximately `1.75` |
| Main service navigation | `38.528 / 38.528px` | `26.768 / 26.768px` | 700 | Normal tracking; right aligned |
| English section heading | `54.348 / 43.4784px` | `31.563 / 25.2504px` | 700 | Computed heading line height is `0.8` |
| Language links | `21.068 / 36.869px` | `13.508 / 23.639px` | 700 | Active JP is visibly underlined |
| Opening story introduction | `19.216 / 28.824px` | `12.496 / 18.744px` | 700 | Main text of the linked identity block |
| View more | `15.656 / 27.398px` | `13.136 / 22.988px` | 700 | English display family |
| Opening practical links | `15.656 / 27.398px` | `13.136 / 22.988px` | 500 | Japanese body family |
| Footer links | `13.804 / 27.608px` | `13.255 / 26.51px` | 500 | Compact, underlined navigation |
| Privacy Policy | `11.736 / 20.538px` | `10 / 17.5px` | 700 | Muted serif text |
| Closing brand link | `19.264 / 50.0864px` | `13.384 / 34.7984px` | 700 | Tracking: `3.7604px` desktop, `2px` mobile |

The measured bilingual heading block is approximately `81.77px` tall on desktop and `46.25px` on mobile. Those dimensions include more than the English line. Japanese subtitle metrics were not separately extracted, so do not apply the English heading's large size to the entire bilingual block.

**Recommended:** preserve the compact appearance, but use a safer line height around `1` for reusable display headings that may wrap. The Quick Start follows this recommendation instead of applying `0.8` to arbitrary multiline content.

## Tokens — Spacing & Shapes

The system combines viewport-related spacing with fixed internal intervals. A universal spacing unit cannot be established from the evidence.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Main horizontal inset | `46.8px` | `29.25px` | Measured; equivalent to `3.25vw` and `7.5vw` respectively |
| Header utility edge inset | Approximately `46.8px` | Approximately `12.675px` | Measured positions; mobile equals `3.25vw` |
| Standard service vertical padding | `108px` | `29.25px` | Measured |
| Desktop column gap | `65.25px` | Columns stack in service sections | Calculated from element bounds |
| Gap between opening practical links | `16px` | `16px` | Calculated from link bounds |
| Standard View more padding | `16px 40px` | `16px 40px` | Measured |
| Opening practical-link padding | `16px 40px` | `0 16px` | Measured |
| Desktop navigation row gap | Approximately `15.86px` | — | Calculated between link rectangles |
| Mobile navigation top padding after first link | — | `20.076px` | Measured |
| Service image-to-copy gap | Separate columns | `16px` | Calculated from mobile bounds |
| Party heading-block-to-paragraph gap | `48px` | `80px` | Calculated from measured bounds |
| Opening actions-to-story gap | `80px` | `32px` | Calculated from measured bounds |
| Opening story bottom padding | `16px` | `16px` | Measured |

The mobile service layout retains a surprisingly generous pause between the bilingual heading and its explanatory paragraph. Compact screen width does not eliminate all editorial whitespace.

### Border Radius and Depth

| Element | Treatment | Evidence |
| --- | --- | --- |
| Photographs | Square corners | Visible captures |
| Sampled links, buttons, sections | `0px` radius | Computed styles |
| Story introduction divider | Fine black horizontal rule | Visible opening captures |
| Service section separators | Fine pale-gray rules | Visible Party capture |
| Parenthesis links | Transparent, unboxed | Visible captures and computed backgrounds |
| General elevation | No visible card-shadow system | Captured opening, service, and footer regions |

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Opening section | `1062.19px` high, beginning at document y=0 | `822.77px` high, beginning at y=`58.5px` |
| Broad desktop opening column | `849.16px` | Becomes full-width photograph plus rearranged content |
| Narrow desktop opening column | `432px` | Logo and navigation share the row below the photo |
| Opening photograph | Approximately `849 × 549px`, visual estimate | Approximately `390 × 252px`, visual estimate |
| Service text column | `432px` | `331.5px` |
| Service image container | `849.16 × 548.20px` | `331.5 × 214.02px` |
| Service image ratio | Approximately `1.549:1`, calculated | Approximately `1.549:1`, calculated |
| Party section | `765.20px` high | `540.31px` high |
| Opening story link | `849.16 × 103.48px` | `331.5 × 73.25px` |
| News section | `896.47px` high | `1247.16px` high |
| Story section | `1289.13px` high | `928.92px` high |
| Footer element | `662.84px` high | `1118.77px` high |
| Document scroll height | Approximately `9502px` | Approximately `7855px` |

These heights describe captured content, including the current navigation and news entries. They should not become rigid heights for translated or updated content.

## Components

### Utility Header

**Role:** language selection and access to the global menu.

On desktop, JP and EN sit near the upper-right corner, followed by a small black, hand-drawn menu symbol. A slash separates the languages. JP has a thin underline indicating the current language.

The measured menu-button rectangle is approximately `32.39 × 32.39px`, positioned at x=`1360.81`, y=`46.80`. The header element itself has zero measured height on desktop; it does not create a full-width horizontal header band in the opening layout.

On mobile, the opening header occupies approximately `59.34px`. The language links move to the upper-left, and the menu artwork remains at the upper-right with a `29.25px` button rectangle. The initial header is white.

The menu symbol stays visible in the supplied scrolled captures. Desktop scrolled captures also retain the language links; the mobile footer capture shows only the menu symbol. Exact positioning and visibility logic were not supplied. No open-menu anatomy or animation can be established.

### Opening Photograph and Pagination

**Role:** introduce the venue through its interior.

The desktop photograph begins at approximately x=`47`, y=`47` and fills the broad left column. Its square-edged frame shows warm wood, illuminated shelves, dark seating, and a burgundy patterned carpet. The mobile capture shows a different interior view with an open kitchen and warm overhead illumination.

Three fine horizontal pagination marks appear below the desktop photograph, aligned toward its right edge. One mark is dark, and the others are pale. Their appearance suggests a multi-image presentation, but the evidence does not establish autoplay, transition type, timing, swipe support, or whether the different mobile photograph results from a different frame or responsive asset selection.

Keep interface elements outside the photographic area. The opening photograph has no overlaid promotional heading or filled action button.

### Primary Service Menu

**Role:** provide prominent direct access to restaurant services.

Desktop labels are Lunch, Dinner, Beverage, Party, Private Room, Wedding Photo, and Fine Treats. They form a right-aligned vertical list in a `432px` column. The first link begins around y=`205.52`; the last begins around y=`531.86`.

Each desktop link uses bold `38.528px` serif type with a one-line line height. The list has no enclosing panel, bullets, icons, or dividers.

On mobile, the list moves below the photograph, beside the logo. Its measured width is approximately `186.91px`, with a right edge at x=`360.75`. Type reduces to `26.768px`. Private Room becomes Room, and Fine Treats becomes Treats, while both links retain their original destination. Wedding Photo wraps onto two lines.

Preserve all seven destinations. The smaller screen changes composition and labels without collapsing the visible service directory into the menu button.

### Restaurant Identity Artwork

**Role:** provide a recognizable visual signature independently of the navigation.

The mark combines black calligraphy, flowing decorative strokes, a small orange seal, the Japanese restaurant name, and an English signature. On desktop it sits low in the right column, visually balancing the story introduction on the left. Its captured footprint is approximately `274 × 257px`, a visual estimate.

On mobile it moves to the left of the service menu immediately below the photograph. Its footprint is approximately `145 × 138px`, also a visual estimate. It leaves substantial white space below itself while the longer navigation continues downward.

Use the supplied brand artwork when authorized. Recreating it with a generic calligraphy font would lose the proportions and relationship between its parts.

### Parenthesis Links

**Role:** practical actions and understated onward navigation.

The recurring action consists of an opening parenthesis, a short label, and a closing parenthesis. The parentheses sit near the outer edges of the click area, with generous space around the text. This treatment appears in the reservation link, access link, and View more links.

Desktop View more measures approximately `169.97 × 59.39px`, with `16px 40px` padding. Its mobile counterpart measures approximately `155.45 × 54.98px` using the same padding and smaller typography.

The two opening practical links use different mobile treatment: each is approximately `157.75 × 22.98px`, with no vertical padding and `16px` horizontal padding. Their labels are “ご予約・営業案内” and “アクセス・駐車場”.

**Recommended:** increase the mobile practical links' interactive height while retaining the lightweight appearance. Treat the parentheses as decorative and keep the link's accessible name focused on its action.

### Opening Story Introduction

**Role:** connect the restaurant name, location history, and brand relationship to the Story page.

The entire block is one link. It contains two prominent English lines, a smaller “by THE FUJIYA GOHONJIN” line, and a small Story label with a distinctive arrow-like mark toward the lower-right. A thin black rule spans the block's bottom edge.

The main copy reads “Hokkokukaidou Komorojyuku” and “Italian Restaurant KOMORO HONJIN OMOYA”. Preserve these as source wording when reproducing the reference.

Desktop leaves an `80px` gap after the practical-link rectangles. Mobile reduces that gap to `32px` and confines the block to the `331.5px` inner width. The small Story cue remains secondary to the identity text.

### News Section

**Role:** present current notices and event information.

The measured section uses a full-width charcoal background and a large white serif News heading. On desktop, its content is split into a `432px` left region containing an image link and an `849.16px` right region containing three dated text links. The heading-to-content gap is approximately `48px`.

The current entries include an October operating-calendar notice, a wine-dinner notice, and a September operating-calendar notice. Each entry links to a separate page. View more points to the news index and sits toward the lower-right.

Mobile uses a single `331.5px` content column. The three links have much taller measured rectangles, approximately `316px`, `360px`, and `316px`. Their complete internal media arrangement is not present in the sampled elements, so these heights alone should not be used to invent a specific news-card composition.

This section is supported by DOM geometry and computed colors. Its complete visual treatment was not supplied as a screenshot.

### Service Feature

**Role:** introduce one restaurant offering through a large image and concise information.

Six homepage features are evidenced: Lunch, Dinner, Beverage, Party, Private Room, and Fine Treats. Wedding Photo is present in primary navigation, but no separate homepage feature for it appears in the supplied section sequence.

Desktop anatomy:

1. A full-width white section with `108px` vertical and `46.8px` horizontal padding.
2. A `432px` text column on the left.
3. A calculated `65.25px` column gap.
4. An `849.16 × 548.20px` image region on the right.
5. A bilingual heading, short practical or descriptive text, and a parenthesis View more link.
6. A fine horizontal separator between successive white sections, visible in the Party capture.

The text group sits toward the lower portion of the image rather than starting at its top. In the Party capture, the large photograph shows a plated meat dish, wine bottle, wine glasses, and cutlery. The heading and two-line description occupy the quieter left side.

The Party heading is followed by the actual Japanese subtitle “ご宴会・会議”. Its description explains meals for groups of eleven or more and drink-package use. The feature's link points to `/party`.

Mobile reorders each feature to image first, then copy. The measured image width is `331.5px`, with the same approximate `1.549:1` ratio. Copy begins `16px` below the image. These mobile placements are established by DOM bounds even though a mobile service screenshot was not supplied.

### Dining Availability Block

**Role:** provide time-sensitive operational information inside Lunch and Dinner features.

Both dining sections include the date, opening and closing times, last-order information, and a Japanese availability sentence before View more. The inspected content displays September 23, 2026. Lunch shows `11:30–15:00` with a `13:30` last order; Dinner shows `17:30–21:30` with a `19:30` last order.

These are captured content values, not permanent design tokens. A new implementation should keep the same compact hierarchy while sourcing dates, hours, and availability from maintained content.

The availability paragraph has a measured `20px` left inset. The supplied sample does not establish the decoration, if any, occupying that inset. Avoid inventing a status icon solely from the padding.

### Story Section

**Role:** give the restaurant's historical context a distinct editorial setting.

The section switches to `#f2f2f2`. It includes a Story label, a Japanese heading connecting the two historic establishments, a short introduction, a longer paragraph, and View more.

Desktop padding is `116.8px 46.8px`. The sampled long paragraph sits in the right portion of the section at x=`753.67`, with a width of `639.53px`. Its line height is `31.608px`. View more is aligned toward the right edge below the paragraph.

On mobile, horizontal padding becomes `29.25px`. The paragraph takes the full `331.5px` inner width, and View more begins at the left inset. The source sample does not fully expose the Story section's image and heading arrangement; retain the evidenced surface and copy hierarchy without fabricating its missing composition.

### Information Footer

**Role:** make access, reservations, social profiles, help, and recruitment available as ordinary links.

The footer contains Access & Parking, Reserve & Info, Social Media, Help, and Careers groups. Practical content includes the venue address, a telephone link, map access, and reservation guidance. The original page also directly links to THE FUJIYA GOHONJIN and its recruitment destinations.

On desktop, sampled groups occupy several columns in the right half of the page. On mobile, the groups form a single vertical sequence beginning around x=`46.98`, noticeably farther inward than the main `29.25px` content gutter.

The mobile capture shows small gray group labels, black underlined links, substantial space between groups, and a pale copyright/privacy line near the bottom. Keep link underlines close to the text width rather than drawing full-width separators for every item.

### Closing Brand Photograph

**Role:** end the page with the venue's architecture and its broader brand connection.

A wide exterior view shows the tiled roof, surrounding town, trees, and distant mountains. White Japanese lettering is centered over the image, with the tracked THE FUJIYA GOHONJIN link beneath it. The photograph appears darkened enough to support the white text, but the exact overlay color, opacity, and processing method are unknown.

The desktop closing capture fills the `1440 × 1000px` viewport. The mobile footer capture reveals the photograph in its lower `390 × 422px` region.

The measured document exceeds the body height by exactly `1000px` on desktop and `422px` on mobile. These calculated differences support the visible full-viewport versus half-viewport ending proportions. They do not independently prove a fixed background, sticky layer, or parallax effect.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be claimed |
| --- | --- | --- |
| Header transition | Computed `0.3s ease-out` | A 300ms eased transition is declared; its trigger and affected property are not established |
| Opening image pagination | Three thin marks in the desktop capture | A pagination-like indicator is visible; timing and input behavior remain unverified |
| Interior-image variation | Different original-page desktop and mobile photographs | Multiple image states or responsive asset choices exist; autoplay is not proven |
| Service navigation | Rendered destination links | Links lead to dedicated service URLs; destinations were not opened |
| Language navigation | JP points to `/`; EN points to `/en` | Language destinations are evidenced; the English page was not inspected |
| Menu control | Button geometry and visible hand-drawn symbol | A menu control is present; open state, focus management, and animation are unknown |
| Persistent corner controls | Repeated positions across captures | The menu remains visible while scrolled; exact CSS positioning is unknown |
| Closing image reveal | End-of-page captures and scroll-height difference | Closing composition is evidenced; reveal mechanics are unknown |
| Sampled CSS animations | Most records report `animation: none` | No named animation is reported on those sampled elements at that instant |
| Generic transitions | Many records serialize as `all` | This alone does not establish a nonzero duration or visible motion |

The capture process waited for document load, image decoding, and sampled layout stability. It temporarily paused perpetual animations during readiness checks and resumed them afterward. Static captures cannot characterize those animations or exclude delayed behavior.

**Recommended motion direction:** use restrained opacity or color changes for links, retain the small handmade menu artwork, and keep any image changes quiet. If a slideshow is implemented, provide explicit controls and reduced-motion behavior. No carousel interval or crossfade duration should be presented as an observed value.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening and services | White, square image edges, black typography | Establish clarity around warm photography |
| News | Full-width charcoal field | Separate time-sensitive notices from service introductions |
| Story | Pale-gray field | Distinguish historical narrative |
| Footer | White with small gray labels and underlined links | Provide practical navigation with low visual density |
| Practical actions | Transparent text with parentheses | Identify actions without heavy button surfaces |
| Closing scene | Full-bleed photograph with white lettering | Create a final architectural and emotional impression |

Structure comes from proportion, alignment, typography, and changes of section background. The observed interface does not need a general raised-card or rounded-panel system.

## Imagery

Photography carries most of the page's color and texture. The opening interior has deep shadows, amber lighting, timber partitions, illuminated shelving, and patterned flooring. The mobile interior frame emphasizes the kitchen and its warm reflective surfaces. The Party photograph places food and wine in a carefully composed, low-lit dining setting. The closing image expands the scale from intimate rooms to the building and its landscape.

Maintain these distinct photographic roles:

- **Interior introduction:** show spatial depth and architectural materials in a broad landscape frame.
- **Service image:** use one substantial photograph per feature, with a clear focal subject and enough context to suggest dining atmosphere.
- **Closing exterior:** retain the roof, town, and mountain relationship; use responsive cropping that keeps the building recognizable.
- **Identity artwork:** preserve the calligraphic mark and seal as a complete supplied asset.

Use high-resolution, naturally rendered photographs with square edges. Their warmth should come from the image content and lighting. A universal orange tint or decorative paper texture would change the observed white interface.

### Observed Asset References

| Asset role | Evidence | Asset-path status |
| --- | --- | --- |
| Opening interior photograph | Desktop opening capture | No image URL or filename supplied |
| Alternate kitchen interior | Mobile opening capture | No image URL or filename supplied |
| Party food-and-wine photograph | Desktop Party capture | No image URL or filename supplied |
| Restaurant logo and seal | Desktop and mobile opening captures | No image URL or filename supplied |
| Hand-drawn menu symbol | Opening and scrolled captures | Asset format and source path unknown |
| Closing exterior photograph | Desktop ending and mobile footer captures | No image URL or filename supplied |
| News image-link region | Desktop rendered DOM | Image content and source path unavailable |

No native image dimensions, `srcset` values, font URLs, or original artwork files were included. Measured image-region dimensions describe layout containers rather than source-file resolution.

## Layout & Responsive Behavior

### Desktop Composition

At 1440px width, the main horizontal inset is `46.8px`, leaving approximately `1346.4px` of inner width. The service layout resolves to:

`432px text + 65.25px gap + 849.16px photograph`.

The opening reverses the emphasis: the broad image/content column is on the left, while the narrow navigation/identity column is on the right. The service features consistently keep text left and photography right in the supplied bounds; alternating image sides were not evidenced.

The opening extends beyond the first 1000px viewport. News begins at document y=`1062.19`. Avoid compressing the introduction merely to fit every element above the fold.

### Mobile Composition

At 390px width:

1. A roughly `59px` header precedes the image.
2. The opening photograph spans the full viewport width.
3. The logo and right-aligned service menu share the next row, inside `29.25px` side insets.
4. The practical links form a two-column row.
5. The linked story introduction spans the inner width.
6. News begins at document y=`881.27`.
7. Service sections stack their image above their text.
8. Footer groups form a single vertical sequence.
9. The closing photograph occupies a half-viewport-height ending region in the supplied capture.

The opening is therefore reorganized rather than proportionally shrunk. Its image is full bleed, while later service images stay inside the mobile content gutter.

Mobile changes also affect wording and density: Room and Treats replace their longer desktop labels, Wedding Photo wraps, and the practical links use substantially smaller click rectangles. Body text is approximately `13.26px`, while prominent navigation remains approximately `26.77px`.

### Unverified Widths and Implementation Boundaries

Only the two stated viewports were inspected. The breakpoint, tablet composition, ultrawide maximum width, landscape-phone behavior, browser zoom behavior, and safe-area handling are unknown.

The Quick Start uses a recommended `48rem` breakpoint and scales desktop geometry with viewport width. Those are implementation choices derived from the two samples, not recovered source rules. Test intermediary widths with the actual licensed fonts and complete labels.

## Do’s and Don’ts

### Do

- Keep the main interface white and black, reserving `#e95504` for selective practical emphasis.
- Pair bold English serif categories with smaller Japanese sans-serif information.
- Preserve the right alignment and large scale of the opening service menu.
- Recompose the mobile opening around the logo-and-menu pairing.
- Keep interior and service photographs broad, square-cornered, and visually substantial.
- Use parenthesis links with generous horizontal space.
- Retain the thin rule beneath the opening story introduction.
- Preserve the charcoal News and pale-gray Story section changes.
- Keep dates, dining hours, and availability visibly connected to their relevant service.
- Allow the closing exterior photograph to provide a large final pause.
- Use the actual brand artwork and preserve its small seal.

### Don’t

- Don’t replace the visible service directory with a single generic reservation button.
- Don’t turn the service features into a rounded-card grid.
- Don’t add shadows, glass effects, or decorative gradients to the white sections.
- Don’t distribute the reservation orange across every heading and link.
- Don’t crop every photograph to a conventional `16:9` ratio; measured service containers are approximately `1.549:1`.
- Don’t reduce the mobile page to a scaled desktop screenshot.
- Don’t remove service destinations when shortening mobile labels.
- Don’t use the root Times declaration to identify the rendered display font; the relevant elements declare `p22-mackinac-pro`.
- Don’t treat bundled CMS or slider presets as the visible design palette.
- Don’t invent slideshow timing, menu animation, or parallax behavior from still captures.
- Don’t hardcode the inspected availability sentences as permanently current information.

## Recommended Implementation Additions

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

- Expand the menu, language controls, and compact mobile practical links to approximately `44px` interactive targets while preserving their visible proportions.
- Give the menu button an accessible name and expose its expanded state. If it opens a modal navigation layer, implement focus management and Escape handling.
- Give repeated View more links contextual accessible names, such as View more about Party.
- Keep decorative parentheses and arrow artwork out of accessible link names.
- Add visible keyboard focus using black on light surfaces and white on the charcoal section.
- Reassess the observed 10px privacy text and pale-gray utility text for readability. A darker utility gray can retain the quiet appearance with stronger contrast.
- Test Japanese body text at browser zoom and consider a larger mobile minimum if the implementation serves longer descriptions.
- Preserve reading and keyboard order when changing desktop and mobile layouts; avoid duplicating focusable navigation unnecessarily.
- Provide useful image alternatives, including a restaurant-name alternative for the logo. Decorative flourishes should have empty alternatives.
- Supply responsive image sources, reserve image dimensions, and defer lower-page image loading without delaying the opening photograph.
- Make dining availability explicitly date-dependent and keep hours in structured, maintainable content.
- Respect reduced-motion preferences and keep any rotating imagery usable when paused.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#ffffff`.
- Main typography and linework: `#000000`.
- Reservation emphasis: `#e95504`.
- News background: `#1d2026`, with verified white heading and View more text.
- Story background: `#f2f2f2`.
- Observed privacy text: `#aaaaaa`.
- Service divider approximation: `#d0d0d0`.
- Warm brown and amber: photographic content, not general component fills.

### Overall Prompt

“Build a Japanese restaurant homepage inspired by Komoro Honjin Omoya. Use a white canvas, black typography, bold P22 Mackinac Pro-style English serif categories, and restrained Japanese sans-serif body text. On desktop, place a large warm interior photograph in a broad left column, practical parenthesis links and a ruled story introduction below it, and a right-aligned vertical service menu with calligraphic identity artwork in a narrower right column. Use orange only for the reservation action. Continue with a charcoal News section, six spacious image-and-copy service features, a pale-gray Story section, a practical underlined-link footer, and a large exterior photograph with centered white lettering. On mobile, make the opening photograph full width, place the logo beside the visible service menu, and stack later service images above their descriptions. Keep corners square and avoid card shadows.”

### Example Component Prompts

1. **Opening composition:** “At 1440px width, use approximately 47px outside margins, an 849px left image column, a 65px gap, and a 432px right menu column. Keep the service menu right aligned in bold 38.5px serif type. Place the identity artwork low in the right column and the compact ruled Story link beneath the left-side actions.”
2. **Parenthesis action:** “Create a transparent text link with a large opening parenthesis at its left edge and a closing parenthesis at its right edge. Use about 16px vertical and 40px horizontal padding, bold 15.7px serif type for View more, and no enclosing border. Use orange text only for the Japanese reservation action.”
3. **Party feature:** “Build a white two-column restaurant feature with a 432px copy column and an approximately 849 × 548px photograph. Set Party in bold 54px serif type above the source subtitle ご宴会・会議. Place a short Japanese description and a parenthesis View more link below. Align the copy toward the lower part of the image and separate the section with a fine gray rule.”
4. **Mobile introduction:** “At 390px width, use a roughly 59px header and full-width interior photograph. Below it, place the restaurant logo on the left and a right-aligned, seven-link serif menu on the right. Use Room and Treats as compact labels and allow Wedding Photo to wrap. Follow with paired reservation/access links and a 331.5px-wide ruled Story introduction.”
5. **Closing scene:** “Use a full-bleed exterior photograph showing tiled roofs, town, and distant mountains. Center the source slogan 幸せなときを、もっと幸せに。 in white, with a small tracked THE FUJIYA GOHONJIN link below. Preserve image detail while ensuring readable contrast. Treat overlay strength and reveal mechanics as implementation choices.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered production CSS. It reproduces the main palette, typographic roles, desktop column dimensions, parenthesis actions, and mobile rearrangement. It assumes authorized image assets and separately configured font loading.

The `48rem` breakpoint is recommended. The divider color is estimated. Heading line height, enlarged controls, and the normal-flow closing scene are deliberate implementation choices. In particular, larger mobile touch targets can move the opening Story block lower than in the captured page.

Suggested opening structure: `.opening` contains `.opening-main` and `.opening-aside`. The main group contains `.opening-media`, `.opening-actions`, and `.opening-story`; the aside contains `.service-nav` and `.opening-logo`. On mobile, the two wrappers use `display: contents` so their children can occupy the recomposed grid.

```css
:root {
  /* Measured palette; the divider is a visual approximation. */
  --kh-paper: #ffffff;
  --kh-ink: #000000;
  --kh-accent: #e95504;
  --kh-news: #1d2026;
  --kh-story: #f2f2f2;
  --kh-muted: #aaaaaa;
  --kh-rule: #d0d0d0;

  /* Observed primary families with a shortened fallback stack. */
  --kh-font-display: 'p22-mackinac-pro', serif;
  --kh-font-body: 'dnp-shuei-gothic-gin-std', 'Yu Gothic',
    YuGothic, 'Hiragino Kaku Gothic Pro', 'Meiryo UI',
    Meiryo, 'MS PGothic', sans-serif;

  /* Desktop values reproduce the 1440px sample. */
  --kh-body: 15.872px;
  --kh-copy: 15.804px;
  --kh-nav: 38.528px;
  --kh-heading: 54.348px;
  --kh-action: 15.656px;
  --kh-brand: 19.216px;
  --kh-language: 21.068px;
  --kh-copy-leading: 2;
  --kh-tracking: 0.05em;

  /* Viewport formulas are an adaptation of measured geometry. */
  --kh-gutter: 3.25vw;
  --kh-column-gap: 4.53125vw;
  --kh-narrow: 30vw;
  --kh-section-space: 7.5vw;
  --kh-image-ratio: 1.549;
  --kh-menu-art: 32.39px;
  --kh-utility-inset: 3.25vw;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--kh-ink);
  background: var(--kh-paper);
  font-family: var(--kh-font-body);
  font-size: var(--kh-body);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: var(--kh-tracking);
}

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

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.language-switch {
  position: fixed;
  top: 3.6vw;
  right: 8.58vw;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 700 var(--kh-language)/1.75 var(--kh-font-display);
}

.language-switch a { text-decoration: none; }
.language-switch [aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.menu-button {
  position: fixed;
  top: calc(var(--kh-utility-inset) - (44px - var(--kh-menu-art)) / 2);
  right: calc(var(--kh-utility-inset) - (44px - var(--kh-menu-art)) / 2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--kh-ink);
  background: transparent;
  cursor: pointer;
}

.menu-button img,
.menu-button svg {
  width: var(--kh-menu-art);
  height: var(--kh-menu-art);
}

.opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kh-narrow);
  column-gap: var(--kh-column-gap);
  padding: var(--kh-gutter) var(--kh-gutter) var(--kh-section-space);
}

.opening-main,
.opening-aside { min-width: 0; }

.opening-media { margin: 0; }
.opening-media img {
  width: 100%;
  aspect-ratio: var(--kh-image-ratio);
  object-fit: cover;
}

.opening-aside {
  display: flex;
  flex-direction: column;
}

.service-nav {
  display: flex;
  flex-direction: column;
  gap: 15.864px;
  margin-top: 11.022vw;
  text-align: right;
}

.service-nav a {
  display: block;
  font: 700 var(--kh-nav)/1 var(--kh-font-display);
  letter-spacing: normal;
  text-decoration: none;
}

.nav-label-mobile { display: none; }

.opening-logo {
  align-self: flex-end;
  width: min(100%, 274px);
  margin-top: 126px;
}

.opening-logo img { width: 100%; height: auto; }

.opening-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.bracket-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  color: inherit;
  background: transparent;
  font: 700 var(--kh-action)/1.75 var(--kh-font-display);
  letter-spacing: var(--kh-tracking);
  text-decoration: none;
}

/* Use real spans with aria-hidden='true' for these ornaments. */
.bracket-link .bracket {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.5em/1 var(--kh-font-display);
}

.bracket-link .bracket:first-child { left: 0; }
.bracket-link .bracket:last-child { right: 0; }

.opening-actions .bracket-link {
  font-family: var(--kh-font-body);
  font-weight: 500;
}

.bracket-link--reserve { color: var(--kh-accent); }

.opening-story {
  position: relative;
  display: block;
  margin-top: 80px;
  padding-bottom: 16px;
  border-bottom: 1px solid currentColor;
  font: 700 var(--kh-brand)/1.5 var(--kh-font-display);
  text-decoration: none;
}

.opening-story .brand-line { display: block; }
.opening-story small {
  display: block;
  margin-top: 4px;
  font-size: 0.75em;
  line-height: 1.75;
}

.opening-story .story-cue {
  position: absolute;
  right: 0;
  bottom: 16px;
  font-size: 0.75em;
}

.service-block {
  display: grid;
  grid-template-columns: var(--kh-narrow) minmax(0, 1fr);
  gap: var(--kh-column-gap);
  padding: var(--kh-section-space) var(--kh-gutter);
  border-bottom: 1px solid var(--kh-rule);
}

.service-copy {
  min-width: 0;
  align-self: end;
  padding-bottom: 16px;
}

.service-heading {
  margin: 0 0 48px;
  font: 700 var(--kh-heading)/1 var(--kh-font-display);
}

/* Subtitle metrics are recommended, not separately measured. */
.service-heading small {
  display: block;
  margin-top: 12px;
  font: 500 16px/1.5 var(--kh-font-body);
}

.service-copy p {
  margin: 0 0 16px;
  font-size: var(--kh-copy);
  line-height: var(--kh-copy-leading);
}

.service-media {
  margin: 0;
  aspect-ratio: var(--kh-image-ratio);
}

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

.news-section {
  padding: var(--kh-section-space) var(--kh-gutter);
  color: var(--kh-paper);
  background: var(--kh-news);
}

.news-section h2 {
  margin: 0 0 48px;
  font: 700 var(--kh-heading)/1 var(--kh-font-display);
}

.news-layout {
  display: grid;
  grid-template-columns: var(--kh-narrow) minmax(0, 1fr);
  gap: var(--kh-column-gap);
}

/* A readable text treatment; full desktop descendants were unavailable. */
.news-item {
  display: block;
  padding: 32px 0;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
  color: inherit;
  text-decoration: none;
}

.story-section {
  padding: calc(var(--kh-gutter) + 70px) var(--kh-gutter);
  background: var(--kh-story);
}

.story-copy {
  width: 47.5%;
  margin-left: auto;
  font-size: var(--kh-copy);
  line-height: var(--kh-copy-leading);
}

.site-footer { padding: 80px var(--kh-gutter); }
.footer-groups {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 32px 16px;
  margin-left: 50%;
}

.footer-group h2 {
  margin: 0 0 8px;
  color: #6b6b6b;
  font: 700 12px/1.5 var(--kh-font-display);
}

.footer-group a {
  display: table;
  font-size: 13.804px;
  line-height: 2;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* Normal-flow ending; the original reveal mechanism is unverified. */
.closing-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  color: var(--kh-paper);
  text-align: center;
}

.closing-scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tune this recommended scrim against the actual photograph. */
.closing-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 30%);
}

.closing-copy {
  position: relative;
  z-index: 1;
  width: 80%;
}

.closing-copy p {
  margin: 0;
  font-family: serif;
  font-size: clamp(22px, 2.65vw, 38px);
}

.closing-copy a {
  font: 700 19.264px/2.6 var(--kh-font-display);
  letter-spacing: 3.7604px;
  text-underline-offset: 5px;
}

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

@media (hover: hover) {
  .service-nav a:hover,
  .bracket-link:hover { text-decoration: underline; }
}

@media (max-width: 47.999rem) {
  :root {
    --kh-body: 13.255px;
    --kh-copy: 13.255px;
    --kh-nav: 26.768px;
    --kh-heading: 31.563px;
    --kh-action: 13.136px;
    --kh-brand: 12.496px;
    --kh-language: 13.508px;
    --kh-copy-leading: 1.75;
    --kh-gutter: 7.5vw;
    --kh-section-space: 7.5vw;
    --kh-menu-art: 29.25px;
  }

  .site-header {
    height: 58.5px;
    background: var(--kh-paper);
  }

  .language-switch {
    position: absolute;
    top: 17.84px;
    right: auto;
    left: var(--kh-utility-inset);
    gap: 8px;
  }

  main { padding-top: 58.5px; }

  .opening {
    grid-template-columns:
      var(--kh-gutter) minmax(0, 0.4362fr)
      minmax(0, 0.5638fr) var(--kh-gutter);
    grid-template-areas:
      'media media media media'
      '. logo nav .'
      '. actions actions .'
      '. story story .';
    gap: 29.25px 0;
    padding: 0 0 39px;
  }

  .opening-main,
  .opening-aside { display: contents; }
  .opening-media { grid-area: media; }

  .service-nav {
    grid-area: nav;
    gap: 20.076px;
    margin: 0;
  }

  .nav-label-desktop { display: none; }
  .nav-label-mobile { display: inline; }

  .opening-logo {
    grid-area: logo;
    align-self: start;
    width: 100%;
    margin: 0;
  }

  .opening-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 9.75px 0 0;
  }

  .opening-actions .bracket-link {
    min-height: 44px;
    padding: 8px 16px;
    text-align: center;
  }

  .opening-story {
    grid-area: story;
    margin: 2.75px 0 0;
  }

  .service-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .service-media { order: -1; }
  .service-copy { align-self: stretch; padding: 0; }
  .service-heading { margin-bottom: 80px; }

  .news-section { padding-top: 58.5px; padding-bottom: 39px; }
  .news-layout { display: block; }
  .news-layout > * + * { margin-top: 24px; }

  .story-section { padding: 50px var(--kh-gutter); }
  .story-copy { width: auto; margin: 0; }

  .site-footer { padding: 60px 12.05vw; }
  .footer-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin: 0;
  }
  .footer-group a { font-size: 13.255px; }

  .closing-scene { min-height: 50svh; }
  .closing-copy { width: 90%; }
  .closing-copy a { font-size: 13.384px; letter-spacing: 2px; }
}

/* Recommended policy for any motion added to this adaptation. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .opening-media,
  .service-nav a,
  .bracket-link {
    animation: none;
    transition: none;
  }
}
```

A parenthesis link can use this semantic pattern. The destination below is present in the inspected homepage; no destination-page design is implied.

```html
<a class='bracket-link' href='/party' aria-label='View more about Party'>
  <span class='bracket' aria-hidden='true'>(</span>
  <span>View more</span>
  <span class='bracket' aria-hidden='true'>)</span>
</a>
```

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--kh-paper);
  --color-ink: var(--kh-ink);
  --color-reservation: var(--kh-accent);
  --color-news: var(--kh-news);
  --color-story: var(--kh-story);
  --color-divider: var(--kh-rule);

  --font-editorial: var(--kh-font-display);
  --font-body: var(--kh-font-body);

  --text-body: var(--kh-body);
  --text-service-nav: var(--kh-nav);
  --text-section-heading: var(--kh-heading);
  --text-action: var(--kh-action);

  --spacing-page-gutter: var(--kh-gutter);
  --spacing-section: var(--kh-section-space);
  --spacing-column-gap: var(--kh-column-gap);
}
```

## Sources & Evidence

- **Original and final page:** [Komoro Honjin Omoya](https://www.komorohonjin.com/). The supplied browser record reports HTTP `200` and the same original/final URL.
- **Capture time:** `2026-09-22T18:11:16.894Z`, equivalent to September 23, 2026, 03:11:16.894 JST.
- **Desktop evidence:** three original-page captures at `1440 × 1000`, showing the opening composition, Party feature, and closing exterior scene; rendered DOM and computed styles covering the homepage section sequence.
- **Mobile evidence:** two original-page captures at `390 × 844`, showing the opening and the lower footer/closing scene; rendered DOM and computed styles establishing mobile text sizes, labels, section order, and geometry.
- **Computed evidence:** element rectangles, colors, backgrounds, font-family stacks, sizes, weights, line heights, letter spacing, padding, radius, and sampled transition/animation values. The full production stylesheet was not supplied.
- **Navigation evidence:** rendered homepage anchors establish the service, language, reservation, access, news, story, footer, and external brand destinations. Those linked pages were not independently inspected.
- **Interaction limits:** supplied scrolling captures show different page regions. There is no recording of menu opening, hovering, language switching, clicking pagination, or completing a reservation. Carousel behavior, closing-image reveal mechanics, focus behavior, and intermediate breakpoints remain unverified.
- **Capture limits:** readiness checks waited for load, image decoding, finite motion, and sampled layout stability, within the stated time limits. They do not establish semantic completeness or exclude delayed content. SharedWorkers and service workers were disabled during the supplied inspection.

All design observations in this reference come from the supplied current original-page captures and rendered evidence. Calculated proportions, visual estimates, and recommended implementation choices are identified separately.