# 中華そば 七八 / Shichi Hachi — Style Reference

> A neighborhood ramen shop expressed through brush lettering, editorial serif type, oversized food cutouts, and bold red and yellow fields.

**Original URL:** [shichi-hachi.theday-inc.jp](https://shichi-hachi.theday-inc.jp/)
**Final URL:** [shichi-hachi.theday-inc.jp](https://shichi-hachi.theday-inc.jp/) — unchanged, HTTP 200.
**Theme:** a light canvas with contrasting section colors; no theme-switching interface is evidenced.
**Inspected:** September 23, 2026 at 06:42 JST; supplied retrieval timestamp: September 22, 2026 at 21:42:03.811 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current restaurant website, including its opening composition, concept, menu, Instagram invitation, ingredient commitments, recruitment content, store information, and footer. Visual captures cover the desktop opening, Instagram-to-commitment transition, and footer, plus the mobile opening and footer. Other sections are documented through supplied rendered text and computed element measurements.

Shichi Hachi combines the visual confidence of a restaurant sign with the typography of an independent magazine. A large black brush wordmark anchors the opening. A photograph of a diner in a red jacket sits inside a thin rectangular frame, while isolated ramen and pork photographs cross its boundaries. Narrow, delicate English serif lettering balances the heavy Japanese artwork. Small sans-serif labels keep practical information readable without competing with the imagery.

The page is a long restaurant website with several purposes: introducing the shop, explaining its food, directing visitors to current information, recruiting staff, and providing access details. Its organizing device is a sequence of broad color fields. Warm off-white carries the introduction and editorial content, deep red contains the menu and social invitation, and vivid yellow makes the final store-information area unmistakable. A compact, ornamented navigation frame remains in the same screen position across the supplied scroll captures.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Decimal values below are rounded for readability.
- **Visual estimate** means a dimension, color, or arrangement was judged from the original-page screenshots. Border widths and the yellow background fall into this category.
- **Derived** means a calculation from measured values, such as a line-height ratio or content-width percentage.
- **Recommended** means an implementation choice for a new build. It does not establish the behavior of the original website.
- Token names are descriptive implementation aliases. The supplied custom-property collections were empty; no original variable names were established.
- Measurements describe two captured widths. They do not establish the original breakpoint, fluid-scaling formula, or behavior between those widths.
- Font-family names are copied from computed styles. Individual font-file URLs and successful rendering of every glyph in every declared family were not supplied.
- Static screenshots and sampled styles do not establish animation timing, hover states, navigation-button behavior, or the appearance of uncaptured image regions.

## Tokens — Colors

### Core Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Warm Paper | `#f5f4f0` | `--paper` | **Measured:** body background and reversed text in the red menu field. Also visually matches the navigation surface and lower footer. |
| Black Ink | `#000000` | `--ink` | **Measured:** primary text and sampled controls. Visually used for wordmarks, image frames, corner ornaments, and outline buttons. |
| Menu Red | `#ba1c22` | `--red` | **Measured:** menu-section background and recruitment-link background. The Instagram invitation occupies the same red field. |
| Store Yellow | approximately `#e6d719` | `--yellow` | **Visual estimate:** large store-information field and the commitment badge. Their exact computed colors were not supplied. |
| Ticker Neutral | approximately `#dfddce` | `--ticker-paper` | **Visual estimate:** muted warm gray behind the recruitment sentence above the yellow footer. |

The small opening stamps and closed-day badge belong to the red accent family. Their individual colors were not measured, so Menu Red should be treated as a reusable approximation for those details rather than a verified exact match.

### Color Distribution

The large surfaces matter more than a conventional primary/secondary button hierarchy:

- **Opening and concept:** paper, black lettering, and natural photographic color. Red appears in the jacket and small graphic accents.
- **Menu and social invitation:** a continuous red background with paper-colored copy, editorial lettering, and fine light rules.
- **Commitment:** paper returns, with a yellow badge offset toward the right of the desktop introduction.
- **Recruitment:** sampled section wrappers are transparent over the paper canvas; its oval link computes to a red fill.
- **Store information:** yellow with black text and black outlined controls.
- **Final footer:** paper with the producer wordmark, Instagram link, and copyright.

Avoid applying red and yellow indiscriminately to every component. Their strongest function is identifying different stretches of the document.

## Tokens — Typography

### Editorial Display

**Recorded stack:** `EditorialNew, ryo-gothic-plusn, system-ui, sans-serif`.
**Recorded weight:** `300`.

This family is measured on the Instagram heading, repeated menu-heading wrappers, footer title wrapper, and the large `By The Day inc.` signature. In the screenshots, the English display lettering has strong thick-to-thin contrast and a narrow, elegant rhythm. It creates a deliberate counterweight to the dense black brush artwork.

The Instagram and producer-signature font sizes were captured directly. The menu and footer-title wrappers inherit much smaller sizes while containing visibly larger material. Do not use those wrapper font sizes as measurements of every visible descendant.

### Utility and Body Copy

**Regular stack:** `SuisseIntl-Regular, ryo-gothic-plusn, system-ui, sans-serif`.
**Medium stack:** `SuisseIntl-Medium, ryo-gothic-plusn, system-ui, sans-serif`.
**Recorded weights:** `400` and `500`, respectively.

The regular stack supplies paragraphs, address information, links, and small labels. The medium stack supplies the two navigation labels and Japanese section headlines. Most body copy uses a line-height ratio of approximately `1.65`. Navigation and selected labels use approximately `0.06em` tracking; ordinary paragraphs generally have normal tracking.

### Brush Lettering and Wordmarks

The large `七八` identity, vertical Japanese lettering, and white `中華そば` plaque should be treated as distinctive lettering artwork. Their actual asset formats and font origins were not supplied. A standard Japanese text font would not reproduce their brush shapes.

The tall condensed `THE DAY INC.` mark in the bottom band is also visually distinct from the surrounding text. Its exact production method is unverified. Preserve an authorized wordmark rather than guessing a condensed font.

### Type Scale

All values in this table are **measured**, except the explicitly identified visual estimate.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Root sizing reference | `10.286 / 10.286px` | `10.4 / 10.4px` | `400`; not the visible body-copy size |
| Navigation labels | `13.371 / 13.371px` | `13.52 / 13.52px` | `500`; `0.06em` |
| Concept paragraphs | `13.371 / 22.063px` | `11.44 / 18.876px` | `400`; normal tracking |
| Menu descriptions | `13.371 / 22.063px` | `12.48 / 20.592px` | `400`; normal tracking |
| Commitment descriptions | `13.371 / 22.063px` | `12.48 / 20.592px` | `400`; normal tracking |
| Japanese section headline | `24.686 / 40.731px` | `18.72 / 30.888px` | `500`; `0.06em` |
| Instagram display heading | `123.429 / 123.429px` | `72.8 / 72.8px` | Editorial, `300` |
| Instagram oval label | `13.371 / 22.063px` | `11.44 / 18.876px` | `400`; `0.06em` |
| Recruitment paragraph | `18.514 / 37.029px` | `14.56 / 29.12px` | `400`; line height `2` |
| Store-information copy | `15.429 / 25.457px` | `13.52 / 22.308px` | `400` |
| Map and footer social labels | `13.371 / 22.063px` | `11.44 / 18.876px` | `400`; `0.06em` |
| Producer signature | `67.886 / 67.886px` | `52 / 52px` | Editorial, `300` |
| English opening side captions | approximately `28–32px` visually | Not visible | **Visual estimate**; descendant styles unavailable |

The sampled `HTML` and `BODY` elements declare `Times`, but the visible content elements above override that family. This is not evidence that the main interface is typeset in Times.

### Scaling Interpretation

At the desktop capture, navigation text is approximately `1.3` times the measured root size and section headlines are approximately `2.4` times it. On mobile, navigation remains approximately `1.3` times the root, while headlines become approximately `1.8` times it. These are calculated relationships, not recovered stylesheet declarations.

The mobile design therefore does more than uniformly shrink the desktop page: it preserves navigation size while reducing selected text roles and changing the composition.

## Tokens — Spacing & Shapes

### Spacing Measurements

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header padding | `41.14px` vertical, `49.37px` horizontal | `6.24px` | Computed padding; internal arrangements differ |
| Opening H1 top padding | `49.37px` | `36.4px` | Computed on the H1 container |
| Menu-section top padding | `123.43px` | `62.4px` | Computed |
| Commitment-section top padding | `123.43px` | `89.44px` | Computed |
| Recruitment-section top padding | `123.43px` | `89.44px` | Computed |
| Store-content left inset | `56.56px` | `18.72px` | Measured element coordinates |
| Instagram oval vertical padding | `25.71px` | `18.72px` | Computed |
| Recruitment oval vertical padding | `51.43px` | `36.4px` | Computed |
| Map-link vertical padding | `15.43px` | `15.6px` | Computed |

There is no evidence of a single conventional 8px spacing system. A practical adaptation can consolidate close values, but should preserve the contrast between compact utility controls and generous section introductions.

### Geometry

| Element | Shape | Status |
| --- | --- | --- |
| Navigation frame | Square rectangle with small outlined corner ornaments | Visible; approximately `3px` main outline |
| Hero photograph | Square-cornered image frame | Visible; approximately `2px` black border |
| Map and footer Instagram links | Wide square-cornered outlined rectangles | Visible; approximately `2px` border |
| Instagram account link | Wide ellipse with a fine paper-colored outline | `50%` radius measured; outline approximately `1px` visually |
| Recruitment link | Wide red ellipse | `50%` radius and red background measured |
| Hero subtitle plaque | Black capsule with white lettering and fine light detailing | Visible; approximately `244px` wide in both opening captures |
| Commitment badge | Yellow burst with pointed tips and concave edges | Visible; approximately `190px` across on desktop |
| Small opening stamps | Red circular line-art emblems | Visible; approximately `38–40px` across on desktop |

Most surfaces remain flat and square. The ellipse, capsule, circular stamp, and burst are specific graphic accents, not a general rounded-component system.

### Layout Measurements

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Document height | approximately `9897px` | approximately `10620px` | Supplied document measurements |
| Header height | `106.95px` | `108.14px` | Measured |
| Opening section height | `1137.5px` | `605.09px` | Measured; excludes header |
| Navigation frame | approximately `344 × 50px`, top `31px` | approximately `377 × 50px`, top `6px` | Screenshot estimate |
| Hero photo frame | approximately `864px` wide, left `288px`, top `376px` | approximately `366 × 369px`, left `12px`, top `344px` | Screenshot estimate; desktop lower edge is outside the opening crop |
| Concept paragraph region | `860px` wide | `335.39px` wide | Measured |
| Menu paragraph region | `358.98px` per entry | `312px` per entry | Measured |
| Commitment paragraph region | approximately `411–413px` per entry | `288.59px` | Measured |
| Instagram oval | `228.28 × 82.20px` | `168.39 × 64.39px` | Measured |
| Recruitment oval | `261.14 × 125.36px` | `201.59 × 91.34px` | Measured |
| Map link | `384.56 × 56.91px` | `352.56 × 54.05px` | Measured |
| Footer Instagram link | `384.56 × 57.47px` | `352.56 × 58.06px` | Measured |

## Components

### Persistent Navigation Frame

**Role:** compact access to the menu and store information throughout a long page.

A paper-filled rectangle sits near the top center of the viewport. A heavy black outline and four small square corner loops give it a restaurant-sign or printed-frame character. The labels `メニュー` and `店舗案内` sit at opposite ends, with substantial empty space between them. There is no central logo inside this control.

At desktop size, the frame is only about one quarter of the viewport width. On mobile, it stretches nearly edge to edge. Its height remains approximately 50px, and the navigation label size remains near 13.5px.

The frame appears at the same screen position in opening, middle, and footer captures. This supports persistent viewport placement. The exact `position` declaration was not included. Both labels are recorded as buttons; clicks were not exercised, so an anchor jump, scripted scroll, or another response cannot be asserted.

**Reusable anatomy:** outer paper surface → black rectangular rule → four decorative corner loops → two independently operable text controls. Keep the corner graphics outside the accessible label.

### Opening Utility Strip

**Role:** communicate practical visit information before the main imagery.

Desktop places a calendar icon, a small red `日・祝定休` badge, a vertical divider, and repeated opening-hour text at the left. The center is occupied by the navigation frame. An address link with a location icon and an Instagram link with an outline icon occupy the right.

The address points to the supplied Google Maps destination; the update link points to the shop's Instagram account. These are recorded link destinations, not tested external-page experiences.

Mobile retains the calendar, closure badge, divider, and narrow hours rail beneath the navigation frame. The desktop address and update links are not present in the mobile rendered-link list. The hours text is clipped horizontally in the mobile image; repeated DOM content suggests a ticker implementation, but its speed and direction are unverified.

### Opening Brand Composition

**Role:** establish the shop's identity through a large photographic poster.

The desktop masthead balances three elements: spaced English naming at left, a large black `七八` mark in the middle, and `Produced By The Day inc.` at right. The central brush mark is approximately 310px wide visually. The English captions act as delicate horizontal counterweights rather than the main headline.

Below, the centered photograph occupies approximately 60% of the viewport width. A black capsule reading `中華そば` overlaps its top edge. Large vertical brush lettering flanks the photograph. Two red circular stamps sit above the left lettering.

The food cutouts intentionally break the rectangular composition. A ramen bowl overlaps the lower-left region, while a slice of pork held by chopsticks enters from the upper right and runs beyond the viewport edge. Keep the clean cutout edges and the large scale differences between utility icons, lettering, food, and person.

Mobile removes the English side captions and the large side lettering from the visible opening. The wordmark remains large, approximately 265–270px wide, above a nearly full-width, almost square photograph. The ramen cutout remains and overlaps the transition into the concept section. The upper-right pork cutout is not visible in the supplied mobile opening.

### Concept Section

**Role:** explain the everyday, welcoming positioning of the shop.

The concept follows directly after the opening imagery. Its text includes the headline `炭焼焼豚、ラーメン、酒場。結局、いつもの七八で。` and three paragraphs about charcoal-roasted pork, the intended atmosphere, and the food.

The desktop paragraph region is 860px wide; mobile narrows it to approximately 335px. The headline remains two lines in the supplied DOM geometry, with a measured height of approximately 81px on desktop and 62px on mobile. Body paragraphs use smaller, quieter typography beneath it.

The mobile image reveals the `CONCEPT` label just below the photograph while the bowl cutout overlaps its left area. This is a layered transition, not a separate rounded card. The rest of the concept section is supported by DOM evidence rather than a complete visual capture.

### Menu Field and Entries

**Role:** introduce the shop's principal dishes and preparation details.

A full-width red section begins with repeated `Oshinagaki` content in the editorial family. Repeated heading boxes extend beyond both sides of the viewport, which supports a horizontally repeated heading treatment. Their visible descendant font sizes and motion timing were not captured.

The desktop descriptions form three aligned columns. The first-row paragraphs begin at approximately `x = 59.83`, `540.50`, and `1021.17px`, each about 359px wide. Subsequent measured paragraph rows begin near document positions `3435.58px` and `4139.44px`. These measurements establish a spacious multi-row menu layout, but do not expose the exact image or price anatomy above each paragraph.

Mobile stacks seven descriptions in one column. Each paragraph is 312px wide with 39px side margins. The content covers the signature ramen, charcoal-roasted pork, wonton, chicken chashu, salt-based ramen, chicken rice bowl, and a bowl intended to be enjoyed with soup.

Desktop text includes two `Coming soon...` entries; those strings are absent from the mobile rendered-text evidence. Their precise visual treatment was not captured.

Use the verified red field, column rhythm, and descriptive hierarchy. Product photography, item-name artwork, prices, and any unobserved controls require additional evidence before exact reconstruction.

### Instagram Invitation

**Role:** direct visitors to current menu and shop information.

The menu's red field ends with a centered social composition. A small `FOLLOW US ON` label sits above the large editorial `Instagram` heading. Beneath it, a thin outlined ellipse contains repeated `@78_noodle` text in two clipped rows.

Desktop uses a 123.43px display heading and a 228.28 × 82.20px ellipse. Mobile reduces these to 72.8px and 168.39 × 64.39px. The ellipse is a single link to the shop's account. Repeated handle text is decorative duplication within that link, not evidence of multiple destinations.

In the desktop middle capture, the red field ends sharply against the paper-colored commitment section. Keep this direct color boundary; there is no gradient transition.

### Commitment Introduction and Ingredient Content

**Role:** connect the restaurant's identity to its local ingredients and preparation.

The opening is spacious: a small centered `COMMITMENT` label, a substantial vertical gap, and a two-line Japanese headline. A yellow burst badge sits toward the upper-right side of the desktop section with the English wording `Shichi Hachi no Kodawari` arranged inside it.

The DOM identifies three topics: original noodles, a soup using local vegetables and Niigata soy sauce, and charcoal-finished domestic pork. On desktop, their descriptions align in three columns, each approximately 411–413px wide. On mobile, the descriptions stack in a narrower 288.59px region, about 74% of the viewport width.

The screenshots establish the introduction and badge, while the DOM establishes the three content groups. The intermediate imagery and its exact framing are not visually documented here.

### Recruitment Section

**Role:** extend the site's hospitality message into staff recruitment.

The rendered section contains a small `RECRUIT` label, a two-line Japanese headline, the sentence `Good Times, Good People, Good Day.`, a repeated-label recruitment link, and a larger body paragraph. The paragraph has twice-the-font-size line height, giving it a slower and more open reading rhythm than menu copy.

The sampled recruitment link is an ellipse with a red background: approximately 261 × 125px on desktop and 202 × 91px on mobile. Its destination is a specific Instagram post. The sampled anchor computes black text, but descendant colors were not supplied; its complete visual appearance should not be inferred from the parent alone.

A repeated bilingual recruitment sentence appears above the final yellow store section. The desktop footer capture shows this as a single-line strip with large English text and an emoji. Continuous movement is plausible from the duplicated content, but remains unmeasured.

### Yellow Store-Information Section

**Role:** make the final practical details and identity easy to locate.

Desktop uses a broad two-part composition. On the left, a large editorial `Chuka-Soba / Shichi Hachi` title includes circled initials. Beneath a large vertical interval are hours, closure information, address, parking information, the Instagram handle, and an outlined `Google Map` link. On the right, a large brush wordmark sits high in the yellow field and the editorial `By The Day inc.` signature sits low, aligned right.

The information is compact and deliberately plain. The source text states Monday–Saturday opening hours of 11:00–15:00, service ending when soup runs out, and Sunday/holiday closures with other irregular closures. Treat these as captured source content rather than a guarantee of future opening hours.

The desktop map link is approximately 385px wide. Mobile expands it to the available content width of approximately 353px. The mobile layout places the large brush identity and producer signature after the store information, preserving a generous yellow interval instead of compressing the footer into a small contact card.

### Final Footer Band

**Role:** close the page with the producer mark, update link, and copyright.

Desktop arranges three items across a paper band: a `produced by` link and tall `THE DAY INC.` mark at left, a wide outlined Instagram link in the center, and copyright at right. The producer link points to `https://theday-inc.jp/`.

Mobile stacks these items. The small producer label sits above the centered wordmark, followed by the full-width outlined Instagram link and a centered copyright line. The white band occupies approximately the bottom 298px of the supplied mobile footer capture.

The original page independently supports this visible producer relationship. It does not specify web-design, development, photography, or art-direction responsibilities.

## Tokens — Motion & Interaction

### Evidence and Limits

| Treatment | What the evidence establishes | What remains unverified |
| --- | --- | --- |
| Persistent navigation | Same top-screen placement across multiple scroll captures | Exact positioning CSS and behavior near other states |
| Hours rail | Repeated text and horizontal clipping | Whether it moves continuously, its direction, speed, or pause behavior |
| Menu heading repetition | Multiple heading boxes positioned beyond the viewport | Animation mechanism, duration, and easing |
| Instagram oval | Repeated handles inside a clipped ellipse | Movement direction, hover response, and timing |
| Recruitment oval and strip | Repeated labels and repeated bilingual sentence | Loop timing and interaction response |
| Navigation buttons | Two button elements labeled for menu and store information | Scroll destination, modal behavior, focus movement, and easing |
| External links | Recorded Instagram, map, parking, and producer URLs | Click outcomes, new-tab behavior, or external content state |
| Possible loading material | DOM text includes number words, `100`, and `%` | Whether it belongs to a visible loader, its sequence, or duration |

The sampled elements report `animation: none` and a transition summary of `all`. Those records do not provide a nonzero transition duration, and they do not cover every descendant, pseudo-element, or script-driven transform. Do not conclude that the complete site has no animation, or invent an animation library from the repeated content.

The supplied inspection waited at least five seconds initially, performed bounded settling checks, and temporarily paused perpetual animations during readiness checks before resuming them. This reduces the likelihood of a partially decoded capture, but does not verify every reveal or delayed state.

### Recommended Motion for an Adaptation

These are design recommendations, not recovered source timings:

- Keep repeated text at constant speed if adding marquee motion. Approximately `20–35px` per second is a restrained starting point; test it at the real text length.
- Give moving informational text a stable equivalent elsewhere, as the store-information area already provides for opening hours.
- Pause decorative loops for reduced-motion preferences and avoid repeating their content in the accessibility tree.
- Use a simple `120–180ms` color or underline transition for optional link feedback. Avoid making the photograph and all food cutouts float continuously.
- If navigation jumps to page sections, account for the persistent frame and preserve a clear keyboard focus destination. Smooth scrolling is optional and was not verified on the source.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Main paper canvas | Solid warm off-white | Quiet foundation for black artwork and natural photography |
| Navigation plate | Paper fill, heavy black outline, corner loops | Persistent wayfinding above every section color |
| Photographic frame | Thin black rectangle | Establishes order inside the layered opening composition |
| Menu field | Solid deep red with paper-colored copy | Groups dishes and the Instagram invitation |
| Instagram link | Transparent red interior, thin light ellipse | A distinctive social action without a conventional filled button |
| Commitment badge | Flat yellow burst with black lettering | A small graphic interruption in a spacious paper section |
| Store field | Solid yellow with black copy | Makes access information visually prominent |
| Final footer | Paper with black marks and outlined social link | A quieter ending after the yellow field |

The supplied captures do not show a general shadow or elevation system. Depth comes from overlap, cropping, changes in photographic scale, and clear color boundaries. Avoid adding shadows to every menu entry or softening the strong rectangles into rounded cards.

## Imagery

The opening depends on the relationship between a lived-in dining photograph and isolated food objects. The person is caught mid-bite rather than posing for a formal portrait. The red jacket brings the menu palette into the photograph, while the pale bowl, daylight, and dark hair fit naturally with the paper-and-ink setting.

The ramen cutout is large enough to function as a compositional object, not a small product thumbnail. Its bowl edge, broth, noodles, green vegetables, pork, and pink-and-white garnish remain recognizable at a glance. The pork-and-chopsticks cutout creates another directional gesture at the opposite corner. Preserve natural food color, realistic texture, and clean silhouettes.

Typography also acts as imagery. The brush logo, vertical characters, small red stamps, narrow English captions, and curved lettering plaque carry much of the identity. Do not replace all of them with ordinary HTML headings simply because the surrounding page is typographic.

### Observed Asset References

No original image filenames, image URLs, intrinsic dimensions, or font-file URLs were supplied. The following are visual asset requirements, not invented paths.

| Asset role | Observed treatment | Implementation guidance |
| --- | --- | --- |
| Main dining photograph | Diner in a red jacket eating noodles in a bright interior | Preserve the face, eating gesture, and bowl when choosing responsive crops |
| Ramen cutout | Large isolated bowl overlapping the lower-left composition | Use an image with clean transparency; retain its irregular silhouette |
| Pork cutout | Pork slice held by chopsticks entering from the upper right | Keep the directional diagonal; desktop visibility is verified |
| Main `七八` identity | Heavy black brush lettering | Use authorized artwork; do not invent a matching font name |
| `中華そば` plaque | White brush lettering inside a black capsule | Preserve the lettering and slender surrounding details |
| Side lettering and red stamps | Large vertical black characters and small circular red emblems | Keep their scale contrast; mobile simplification is part of the composition |
| Commitment burst | Yellow concave-edged starburst with editorial lettering | Use a suitable vector or supplied asset rather than a generic five-point star |
| Producer mark | Tall condensed black `THE DAY INC.` wordmark | Preserve the mark independently of the editorial signature |
| Utility icons | Small outline calendar, location, and Instagram symbols | Match stroke density and optical size; no icon-library identity is established |

Specific menu-item images, commitment images, and recruitment imagery are outside the supplied visual crops. Their content, crop ratios, and effects should remain unspecified until inspected.

## Layout & Responsive Behavior

### Document Structure

Measured section positions show that this is a continuous scrolling website, not a fixed-height application.

| Region | Desktop top / height | Mobile top / height |
| --- | --- | --- |
| Opening section | `106.95 / 1137.50px` | `108.14 / 605.09px` |
| Concept | `1244.45 / 655.80px` | `713.23 / 505.22px` |
| Menu, including social invitation | `1900.25 / 3038.89px` | `1218.45 / 4353.52px` |
| Commitment | `4939.14 / 1314.30px` | `5571.97 / 1921.80px` |
| Recruitment | `7181.14 / 1780.39px` | `8015.77 / 1342.33px` |
| Footer, including store information | `8961.53 / 935.53px` | `9358.09 / 1261.58px` |

The element sample is selective. There is approximately 928px of desktop content and 522px of mobile content between the sampled commitment and recruitment sections that is not characterized by these section records. Do not label that interval as a specific gallery or feature without further evidence.

### Desktop Composition

The site mixes several width systems rather than placing everything inside one centered maximum-width container:

- The utility header uses roughly 49px side padding.
- The opening masthead spans approximately 1275px, with a narrower central photo occupying about 60% of the viewport.
- Concept paragraphs align to an approximately 860px central region.
- Menu and commitment content spread into thirds across the page.
- Store information uses approximately 57px outer margins and a left information column paired with a much broader identity area.

Large empty areas are intentional, especially around the commitment introduction and within the yellow store panel. Preserve those proportions instead of filling every gap with an extra card or call to action.

### Mobile Changes

At 390px, the layout is recomposed:

- Navigation becomes nearly full width while retaining approximately the same height and label size.
- The hours rail moves beneath the navigation; desktop address and social utility links disappear from the rendered mobile header.
- The English masthead side captions are not visible, while the brush logo retains strong scale.
- The photo expands from about 60% of viewport width to about 94%.
- The ramen cutout continues across the photo-to-concept boundary; side lettering and the upper-right pork cutout are not visible in the supplied opening.
- Menu entries change from three columns to one, increasing the red section from approximately 3039px to 4354px tall.
- Commitment descriptions also stack, with a deliberately narrow 74%-width text region.
- Store details, wordmark, and producer signature follow a vertical sequence.
- The final footer changes from a horizontal arrangement to a centered stack.

The source breakpoint is unknown. A `767px` breakpoint in the Quick Start is a recommended starting point, not a recovered value. Test intermediate widths, especially the header utilities and the transition from three menu columns to one.

## Do’s and Don’ts

### Do

- Keep the measured paper `#f5f4f0`, black `#000000`, and menu red `#ba1c22` consistent.
- Treat yellow as a major store-information field and a selective badge accent; confirm its exact value before pixel-accurate production.
- Preserve the contrast between brush lettering, light editorial serif display, and restrained sans-serif copy.
- Build the opening as overlapping layers with a crisp rectangular photo frame.
- Keep the navigation's small square corner ornaments and opposing label alignment.
- Preserve generous vertical intervals around section introductions.
- Use three-column menu and commitment rhythms on desktop and deliberate single-column mobile layouts.
- Let the footer retain large identity artwork instead of reducing it to a dense utility strip.
- Keep practical information available as real text, even when decorative lettering is supplied as artwork.
- Separate measured source behavior from motion or accessibility improvements introduced in an adaptation.

### Don’t

- Do not assume the site is a dedicated conversion landing page or impose a hero–features–testimonials template.
- Do not replace the brush identity with a guessed typeface.
- Do not interpret a 13px heading-wrapper style as the visible size of all lettering inside it.
- Do not shrink the entire desktop composition uniformly for mobile.
- Do not put every menu entry in a floating white card with a shadow.
- Do not use the ellipse treatment for every button; it belongs to specific social and recruitment moments.
- Do not add gradients, glass panels, or a generalized rounded-card system to the observed flat surfaces.
- Do not infer animation durations or a JavaScript library from duplicated marquee text.
- Do not invent menu prices, image paths, ordering controls, or untested navigation responses.
- Do not present visible brand-production wording as proof of specific website-design responsibilities.

## Recommended Implementation Additions

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

- Preserve the measured proportions while testing a larger minimum reading size for mobile paragraphs. The observed 11.44–12.48px copy is small; approximately 14px is a useful alternative to evaluate with real content.
- Give each navigation control a generous hit region within the 50px frame. The sampled button text boxes alone do not establish the source hit-target dimensions.
- If the controls navigate to document sections, use links with stable section IDs and a scroll offset. If they open panels, use appropriate button state and focus handling instead.
- Provide one accessible label for each repeated-text link. Hide purely decorative duplicates from assistive technology.
- Offer a paused or static form of any continuous ticker and respect reduced-motion preferences.
- Keep a visible focus indicator on paper, red, and yellow backgrounds.
- Check the actual descendant text color in the recruitment ellipse. The sampled parent computes black on red; paper-colored small text on the red field is a stronger starting point for an adaptation.
- Give the shop wordmark a meaningful accessible name. Mark purely decorative duplicate logos, stamps, and cutouts as decorative when adjacent text already supplies their meaning.
- Prevent decorative horizontal overflow while allowing the food cutout to overlap the next section vertically.
- Reserve image dimensions to protect the carefully aligned opening from layout shifts during loading.

## Agent Prompt Guide

### Quick Color Reference

- Main paper and reversed menu copy: `#f5f4f0`, measured.
- Text, frames, and lettering: `#000000`, measured.
- Menu and social field: `#ba1c22`, measured.
- Store-information field and commitment burst: approximately `#e6d719`, visually estimated.
- Primary surface separation: hard color boundaries and thin rules.
- Action vocabulary: ornamental navigation rectangle, outlined rectangular access links, and selected elliptical social links.

### Overall Prompt

“Create a restaurant website inspired by Shichi Hachi's current visual system. Use warm paper `#f5f4f0`, black ink, a large deep-red menu field `#ba1c22`, and a vivid yellow store-information ending. Combine authorized Japanese brush lettering with light editorial serif display and compact sans-serif Japanese copy. Build an opening poster around a framed dining photograph, a large overlapping ramen cutout at lower left, and a pork-and-chopsticks cutout at upper right. Keep a small paper navigation frame with square corner ornaments at the top of the viewport. Use spacious section introductions, three-column desktop menu descriptions, a large Instagram heading above an outlined account ellipse, and a generous two-part store footer. Recompose the mobile opening around a large wordmark and nearly full-width photograph, stack the content, and retain the bowl overlap. Treat motion and unobserved interactions as separate implementation decisions.”

### Example Component Prompts

1. **Navigation frame:** “A paper rectangle approximately 344 × 50px on desktop, with a strong black outline and four small square corner loops. Place `メニュー` at left and `店舗案内` at right in medium-weight sans-serif text near 13.5px. On a 390px phone, expand the frame almost edge to edge. Keep the controls independently accessible.”
2. **Opening composition:** “Center a black brush wordmark above a thinly framed dining photograph. Use delicate English serif captions to its left and right on desktop. Overlap a ramen bowl at the lower-left photo edge and a pork slice held by chopsticks at upper right. Add a black capsule with white `中華そば` lettering across the photo's top border. Preserve large paper margins.”
3. **Instagram invitation:** “Create a flat deep-red section with paper-colored text. Center a small `FOLLOW US ON` label, a light editorial `Instagram` heading around 123px on desktop, and a thin outlined ellipse around repeated account text. Reduce the heading to about 73px on mobile. The ellipse is one accessible link.”
4. **Commitment introduction:** “On warm paper, place a small centered uppercase section label above a two-line Japanese headline. Leave generous vertical space. Offset a yellow concave-edged burst badge to the upper right on desktop. Follow with three ingredient descriptions that stack into narrow centered text regions on mobile.”
5. **Store footer:** “Use a broad yellow field with an editorial restaurant title and compact access details at left, an outlined map link below, and a large brush wordmark plus right-aligned producer signature at right. On mobile, stack the information before the identity artwork. End with a paper band containing the producer mark, outlined Instagram link, and copyright.”

## Quick Start

### CSS Custom Properties

This is a **recommended implementation scaffold**, not extracted source CSS. It uses measured typography at the two supplied viewport classes, approximates screenshot geometry, and preserves a conventional root font size. The breakpoint, focus treatment, and fallback serif are adaptation choices. The yellow remains an estimate.

The recorded source display stack falls back through Japanese and system sans-serif families. The scaffold deliberately uses Georgia and generic serif after `EditorialNew` to retain an editorial appearance when the original font is unavailable. Load licensed fonts and authorized image assets separately; no asset URLs were established by the evidence.

```css
:root {
  /* Measured colors, except the visually estimated yellow. */
  --paper: #f5f4f0;
  --ink: #000000;
  --red: #ba1c22;
  --yellow: #e6d719;

  --font-copy: 'SuisseIntl-Regular', 'ryo-gothic-plusn', system-ui, sans-serif;
  --font-medium: 'SuisseIntl-Medium', 'ryo-gothic-plusn', system-ui, sans-serif;
  --font-editorial: 'EditorialNew', Georgia, serif;

  --text-body: 13.3714px;
  --text-menu: 13.3714px;
  --text-nav: 13.3714px;
  --text-label: 13.3714px;
  --text-heading: 24.6857px;
  --text-social: 123.429px;
  --text-recruit: 18.5143px;
  --text-store: 15.4286px;
  --text-signature: 67.8857px;
  --leading-copy: 1.65;
  --tracking-label: 0.06em;

  --section-pad: 123.429px;
  --page-inset: 3.928vw;
  --rule: 2px;
  --nav-rule: 3px;
  --nav-top: 31px;
  --nav-width: 344px;
  --nav-height: 50px;
  --social-width: 228.28px;
  --social-height: 82.2px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-copy);
  font-size: var(--text-body);
  line-height: var(--leading-copy);
}

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

/* Keep decorative cutouts from creating horizontal page scrolling. */
.site-page { overflow-x: clip; }

/* Recommended offset for an anchor-based adaptation. */
section[id], footer[id] { scroll-margin-top: 100px; }

.nav-frame {
  position: fixed;
  z-index: 50;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--nav-width);
  height: var(--nav-height);
  padding-inline: 22px;
  border: var(--nav-rule) solid var(--ink);
  background: var(--paper);
}

.nav-frame > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-medium);
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
}

.nav-frame .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  pointer-events: none;
}

.corner.is-tl { top: 3px; left: -5px; }
.corner.is-tr { top: 3px; right: -5px; }
.corner.is-bl { bottom: 3px; left: -5px; }
.corner.is-br { bottom: 3px; right: -5px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 107px;
  padding: 41.14px 49.37px;
  gap: 32px;
}

.header-hours {
  display: flex;
  align-items: center;
  max-width: 430px;
  gap: 14px;
  overflow: hidden;
  white-space: nowrap;
}

.closed-badge {
  flex: none;
  padding: 2px 5px;
  color: var(--paper);
  background: var(--red);
}

.header-utilities { display: flex; gap: 44px; }

.hero { position: relative; }

.hero-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px minmax(0, 1fr);
  align-items: center;
  width: 88.57%;
  margin-inline: auto;
  padding-top: 49.37px;
  gap: 32px;
}

.hero-caption {
  font-family: var(--font-editorial);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.hero-caption:last-child { text-align: right; }
.hero-wordmark { width: 100%; }

.hero-figure {
  position: relative;
  width: 60%;
  margin: 62px auto 0;
  border: var(--rule) solid var(--ink);
}

/* Square framing is a scaffold choice based on the mobile capture. */
.hero-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero-plaque {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 244px;
  max-width: 80%;
  transform: translate(-50%, -50%);
}

.hero-cutout {
  position: absolute;
  z-index: 3;
  max-width: none;
  pointer-events: none;
}

.hero-cutout.is-bowl { top: 36%; left: -16%; width: 56%; }
.hero-cutout.is-pork { top: -10%; right: -34%; width: 40%; }

.hero-side-art {
  position: absolute;
  top: 18%;
  width: 16%;
}

.hero-side-art.is-left { left: -25%; }
.hero-side-art.is-right { right: -25%; }

.section-label {
  margin: 0;
  text-align: center;
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
}

.section-heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: var(--text-heading);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.06em;
  text-align: center;
}

.concept-copy {
  width: calc(60% - 4px);
  margin-inline: auto;
  text-align: center;
}

.menu-section {
  padding-top: var(--section-pad);
  color: var(--paper);
  background: var(--red);
}

.menu-grid, .commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.menu-entry .copy {
  width: 75%;
  margin-inline: auto;
  font-size: var(--text-menu);
}

/* Supply actual content and media above each description. */
.commitment-entry .copy {
  width: 86%;
  margin-inline: auto;
  font-size: var(--text-menu);
}

.social-panel {
  padding: 100px 20px 64px;
  text-align: center;
}

.social-title {
  margin: 20px 0 25px;
  font-family: var(--font-editorial);
  font-size: var(--text-social);
  font-weight: 300;
  line-height: 1;
}

.social-oval {
  display: grid;
  place-items: center;
  width: var(--social-width);
  height: var(--social-height);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
}

/* Repetition can remain static until motion is specified. */
.repeated-track {
  display: flex;
  width: max-content;
  gap: 14px;
  white-space: nowrap;
}

.commitment-section, .recruit-section {
  position: relative;
  padding-top: var(--section-pad);
}

.commitment-section .section-heading {
  margin-top: 120px;
}

.commitment-badge {
  position: absolute;
  top: 76px;
  right: 8.5%;
  width: 190px;
}

.recruit-copy {
  font-size: var(--text-recruit);
  line-height: 2;
  text-align: center;
}

.store-panel {
  padding: 185px var(--page-inset) 62px;
  background: var(--yellow);
}

.store-layout {
  display: grid;
  grid-template-columns: minmax(0, 401px) minmax(0, 1fr);
}

.store-title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 68px;
  font-weight: 300;
  line-height: 1;
}

.store-details {
  margin-block: 154px 31px;
  font-size: var(--text-store);
  line-height: 1.65;
}

.outline-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 384.56px);
  min-height: 57px;
  padding: 15px 18px;
  border: var(--rule) solid currentColor;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-align: center;
  text-decoration: none;
}

.store-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.store-wordmark { width: 280px; }

.producer-signature {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-signature);
  font-weight: 300;
  line-height: 1;
  text-align: right;
}

.footer-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 49px var(--page-inset);
  gap: 36px;
  background: var(--paper);
}

.producer-link { display: flex; align-items: center; gap: 36px; }
.footer-band .outline-link { width: 384.56px; }
.footer-copyright { text-align: right; }

/* Recommended keyboard treatment. */
a:focus-visible, button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint; the original threshold is unknown. */
@media (max-width: 767px) {
  :root {
    --text-body: 11.44px;
    --text-menu: 12.48px;
    --text-nav: 13.52px;
    --text-label: 11.44px;
    --text-heading: 18.72px;
    --text-social: 72.8px;
    --text-recruit: 14.56px;
    --text-store: 13.52px;
    --text-signature: 52px;
    --section-pad: 89.44px;
    --page-inset: 4.8vw;
    --nav-top: 6.24px;
    --nav-width: calc(100% - 12.48px);
    --social-width: 168.39px;
    --social-height: 64.39px;
  }

  .site-header {
    min-height: 108px;
    padding: 78px 14px 6px;
  }

  .header-hours { max-width: 100%; }
  .header-utilities { display: none; }

  .hero-masthead {
    display: block;
    width: 78%;
    padding-top: 36.4px;
  }

  .hero-wordmark { width: 88%; margin-inline: auto; }
  .hero-caption, .hero-side-art { display: none; }
  .hero-figure { width: 94%; margin-top: 62px; }
  .hero-cutout.is-pork { display: none; }
  .hero-cutout.is-bowl { top: 80%; left: -11%; width: 60%; }
  .concept-copy { width: 86%; }

  .menu-section { padding-top: 62.4px; }
  .menu-grid, .commitment-grid { grid-template-columns: 1fr; }
  .menu-entry .copy { width: 80%; }
  .commitment-entry .copy { width: 74%; }
  .social-panel { padding: 64px 18px; }

  /* Mobile badge placement was not captured; this is an adaptation. */
  .commitment-badge {
    position: static;
    width: 120px;
    margin: 32px 6% 32px auto;
  }

  .commitment-section .section-heading { margin-top: 64px; }
  .store-panel { padding-block: 100px 36px; }
  .store-layout { grid-template-columns: 1fr; }
  .store-title { font-size: 52px; }
  .store-details { margin-block: 75px 31px; }
  .outline-link { width: 100%; min-height: 54px; }
  .store-signature { gap: 78px; margin-top: 150px; }
  .store-wordmark { width: 220px; }

  .footer-band {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-block: 50px 24px;
    gap: 36px;
  }

  .producer-link { flex-direction: column; gap: 32px; }
  .footer-band .outline-link { width: 100%; min-height: 58px; }
  .footer-copyright { text-align: center; }
}

/* Optional readability variant; this changes the measured type scale. */
.readable-copy { font-size: max(14px, var(--text-body)); }

@media (prefers-reduced-motion: reduce) {
  .repeated-track { animation: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}
```

The navigation CSS expects four decorative corner elements. This example uses section links as a recommended adaptation; the original inspected controls were buttons with untested behavior. Add real `menu` and `store` IDs to the intended sections.

```html
<nav class='nav-frame' aria-label='Primary navigation'>
  <a href='#menu'>メニュー</a>
  <a href='#store'>店舗案内</a>
  <span class='corner is-tl' aria-hidden='true'></span>
  <span class='corner is-tr' aria-hidden='true'></span>
  <span class='corner is-bl' aria-hidden='true'></span>
  <span class='corner is-br' aria-hidden='true'></span>
</nav>
```

The scaffold intentionally leaves image selection, lettering artwork, complete menu-entry media, and behavior wiring to the implementation. Its desktop photo ratio and several decorative offsets are approximations; compare them against authorized assets rather than treating them as recovered source geometry.

### Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. Define the properties above first. This is not evidence that the source website uses Tailwind.

```css
@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-menu-red: var(--red);
  --color-store-yellow: var(--yellow);

  --font-sans: var(--font-copy);
  --font-display: var(--font-editorial);

  --text-copy: var(--text-body);
  --text-menu-copy: var(--text-menu);
  --text-navigation: var(--text-nav);
  --text-section: var(--text-heading);
  --text-instagram: var(--text-social);
  --text-producer: var(--text-signature);

  --spacing-section: var(--section-pad);
  --spacing-page-inset: var(--page-inset);
}
```

## Sources & Evidence

- **Original and final website:** [中華そば 七八](https://shichi-hachi.theday-inc.jp/). The supplied observation records the same original and final URL with HTTP 200.
- **Capture timestamp:** `2026-09-22T21:42:03.811Z`, equivalent to September 23, 2026 at 06:42:03.811 JST. This document analyzes those supplied captures; it does not claim a separate later browser visit.
- **Desktop evidence:** 1440 × 1000 viewport; three original-page screenshots covering the opening, social-to-commitment transition, and footer; rendered text, links, computed styles, and element bounds across a document approximately 9897px tall.
- **Mobile evidence:** 390 × 844 viewport; two original-page screenshots covering the opening and footer; rendered text, links, computed styles, and element bounds across a document approximately 10620px tall.
- **Interaction scope:** scrolling was part of the supplied capture procedure. Link destinations were recorded. Navigation clicks, hover states, focus behavior, and external destinations were not exercised in the supplied evidence.
- **Measurement limits:** original stylesheet rules, responsive breakpoints, complete descendant styles, asset URLs, font files, and animation timelines were not provided. Yellow and several decorative dimensions are visual estimates. Sampled element styles do not characterize every graphic or animated layer.
- **Capture readiness:** bounded checks covered document load, image decoding, and sampled visual stability. Perpetual animations were paused during readiness checks and resumed. Delayed content and unexercised states remain unverified; service workers and SharedWorkers were disabled during inspection.

This reference describes the current restaurant website represented by the supplied original-page evidence. Its CSS, accessibility additions, and suggested motion are implementation guidance, with estimates and recommendations separated from measured source values.