# Nakatani Tax Accounting Office — Style Reference

> Fine brown lettering, generous white space, and warm human photography give an accounting practice an approachable editorial presence.

**Website:** [nakatani-tac.jp](https://nakatani-tac.jp/)
**Original URL:** https://nakatani-tac.jp/
**Final URL:** https://nakatani-tac.jp/
**Theme:** predominantly white, with warm brown text and a dark footer; no theme selector was evidenced.
**Inspected:** supplied browser observation recorded October 2, 2026, at 00:17:23 JST — October 1, 2026, at 15:17:23 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, including its service, office, recruitment, article, contact, and footer structures. Visual evidence covers the opening composition, an additional blank desktop state, and the footer/contact ending. Rendered DOM and computed styles provide measurements for the intervening sections. Linked pages, the expanded menu, and interactive controls were not independently exercised.

Nakatani Tax Accounting Office combines an unusually light English display face with restrained Japanese copy. The exact body color is a muted reddish brown, `#523c3c`, on white. Gray links, thin circular outlines, broad image corners, and a pale handwritten accent keep the interface quiet. The visible hero photograph introduces wood tones and people working together, giving the professional subject matter a personal setting.

This is a substantial corporate homepage with several browsing paths. Services establish the practice's offer; customer stories and office information support familiarity; recruitment has its own prominent sequence; articles and contact follow. Its character depends on generous vertical intervals, offset desktop compositions, and a contrast between very large thin headings and small explanatory text.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed-style or element-rectangle evidence. Measurements are CSS pixels unless stated otherwise.
- **Derived** means arithmetic applied to those measurements, such as the 40px gap between desktop service columns.
- **Estimated** means a visual approximation from an original-page capture. Estimated colors are not exact pixel samples.
- **Recommended** means an implementation choice for reuse, not a verified feature of the original website.
- Token names introduced here are descriptive aliases. Only explicitly identified source properties, such as `--primary`, were found in the supplied property inventory.
- Element boxes and painted artwork are different evidence. A parent with `border-radius: 0` can contain a rounded child or pseudo-element. Likewise, an H2 beginning at document y=0 does not mean its visible letters begin at the top of the screen.
- Several captures are incomplete visually. One desktop image shows only the header; the mobile opening omits the hero photograph, handwritten word, and arrow glyph visible on desktop. Their cause is unverified. Do not reproduce these absences as intentional design decisions.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White canvas | `#ffffff` | `--color-canvas` | Measured body background; also the background of services, news, office, and recruitment section elements |
| Warm brown ink | `#523c3c` | `--color-ink` | Measured body, navigation, hero heading, and service text color |
| Quiet gray | `#727171` | `--color-muted` | Measured link color; also the source `--primary` value |
| Footer secondary text | `#a5a5a5` | `--color-footer-muted` | Measured telephone, Instagram, and copyright color |
| Footer subordinate links | `#b5b5b5` | `--color-footer-link` | Measured desktop footer subnavigation color |
| Reversed text | `#ffffff` | `--color-on-dark` | Measured footer primary links and text in customer-story and interview regions |
| Pale peach lettering | Approximately `#e8c9af` | `--color-accent-estimate` | Estimated from the desktop handwritten `each`; decorative, not a general action fill |
| Warm charcoal | Approximately `#282622` | `--color-dark-estimate` | Estimated visible footer field; its painted background was not isolated in the sampled elements |
| Fine warm outline | Approximately `#aa9c98` | `--color-rule-estimate` | Estimated larger circular-control outline; individual border colors were not supplied |

The distinction between brown content text and gray utility links matters. Using the source `--primary: #727171` for every text element would lose the warmer appearance of the page.

The footer's sampled container reports a transparent background, while the screenshots clearly show a dark surface with subtle tonal texture. Its paint therefore cannot be assigned to that container from this evidence alone. The charcoal token above is an implementation approximation.

The property inventory includes many framework and publishing-system colors, gradients, and shadows. Their presence does not establish visible use. Bright blue, purple, orange, and preset gradients do not belong in this reference palette merely because they appear in that inventory.

### Theme Behavior

The available evidence shows a light page and a dark ending, not alternate selectable themes. Customer-story and interview text is computed white, but their full backdrop appearance is not visible in the supplied section captures. Do not assume every reversed section uses the footer's exact charcoal.

## Tokens — Typography

### Outfit and Japanese Sans-Serif Fallbacks

The computed family stack begins with `Outfit`, followed by Japanese Gothic families and aliases including `YuGothic`, `Yu Gothic Medium`, `Yu Gothic`, `Zen Kaku Gothic New`, and `Hiragino Kaku Gothic ProN`, then Verdana, Meiryo, M+ 1p, and sans-serif.

Outfit is directly supported as the first declared family. The evidence does not include font-file requests or per-glyph font resolution, so the exact fallback used for every Japanese character is unverified.

The body uses weight `350`, with display roles reaching down to `100`. Preserve these light weights when the supplied font supports them. A default weight of 400 throughout, or a bold marketing headline, would change the hierarchy substantially.

### English Display Lettering

The opening phrase is arranged as two large lines: `Optimal Solution` and `For each Company`. The main lettering is extremely thin and geometric. A pale, flowing handwritten `each` overlaps the typographic rhythm on desktop.

No font name or asset path was supplied for the handwritten word. Treat it as separately authored lettering whose implementation is unknown. An authorized vector or transparent graphic is a better reproduction strategy than inventing a script-font attribution.

### Japanese Statement and Supporting Copy

The strengths statement, `ともに考え、` / `ともに進む。`, is measured at 90px on desktop and 43px on mobile. Wide tracking gives these short lines a deliberate cadence. Its accompanying paragraph uses much smaller text with a 2.3 line-height ratio, leaving air between lines rather than relying on heavy type.

Service descriptions are smaller still: 13px at both inspected widths. This creates a strong distinction between browsing headings and detailed explanations.

### Wordmark

The visible identity consists of widely spaced Japanese lettering with a tiny uppercase English line below. Its anchor measures 200px wide on desktop and 170px on mobile. The H1's computed 16px size and weight 600 are container-level evidence; they do not establish how the visible wordmark artwork was drawn.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight | Additional evidence |
| --- | --- | --- | --- | --- |
| Root | `16px / 18.4px` | Same | 400 | Ordinary root sizing; no tiny-rem system |
| Body | `16px / 28.8px` | Same | 350 | Normal tracking |
| Header links | `15px / 27px` | Not displayed in the mobile header | 350 | 16px horizontal padding per link |
| Hero H2 | `100px / 100px` | `42.9px / 42.9px` | 100 | Computed parent display type |
| Strengths statement | `90px / 117px` | `43px / 55.9px` | 300 | Tracking 10px desktop, 5px mobile |
| Strengths paragraph | `17px / 39.1px` | `14px / 32.2px` | 350 | Line-height ratio 2.3 |
| Bilingual section-heading parent | `20.8px / 22.88px` | Same | 700 | Inner English/Japanese span styles were not individually sampled |
| Service title | `20.8px / 24.96px` | Same | 300 | Separate from the section-heading parent |
| Service description | `13px / 24.7px` | Same | 350 | Line-height ratio 1.9 |
| Story and blog title | `18px / 25.2px` | Same | 300 | Light rather than bold article titles |
| News title | `15px / 21px` | Same | 400 | Compact information row |
| Recruitment introduction | `14px / 25.2px` | Same | 350 | Two short lines in the recorded desktop layout |
| Interview heading | `67px / 80.4px` | `57px / 68.4px` | 100 | White text |
| Entry banner | `110px / 198px` | `40px / 72px` | 100 | `Join Our Team?` |
| Contact paragraph | `14px / 25.2px` | Same | 350 | Narrower desktop text column |
| Footer primary links | `16px / 20.8px` | Not visible | 300 | White |
| Footer subordinate links | `15px / 20.8px` | Not visible | 300 | Gray |
| Telephone | `14px / 25.2px` | Same | 350 | 1.4px tracking |
| Copyright | `14px / 20px` | Same | 350 | Gray |

**Nested-heading limitation:** the computed 20.8px section-heading parent is not proof that a large English title such as `Our Services` is painted at 20.8px. Its parent contains separately styled children, and its measured overall height exceeds a single line. Preserve bilingual hierarchy without presenting an invented child font size as measured.

## Tokens — Spacing & Shapes

**Density:** sparse page composition, compact supporting text, and large image or visual allocations.

**Spacing system:** the measured layout repeatedly uses 20, 30, 40, 60, 80, 100, and 120px intervals. These are observed dimensions, not evidence of a single declared spacing scale.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Main content gutter | 56px | 20px | Measured |
| Main content width | 1328px | 350px | Measured |
| Header identity left inset | 30px | 20px | Measured |
| Hero photograph side inset | Approximately 40px | Not visually established | Desktop screenshot estimate |
| Header navigation link padding | 16px each side | Navigation absent | Measured |
| Service column gap | 40px | Vertical gap 40px | Derived from card rectangles |
| Service section top to header | 120px | 60px | Derived |
| Strengths section top to statement | 170px | 80px | Derived |
| Strengths heading to paragraph | 60px | 30px | Derived |
| Service title to paragraph | 16px | 16px | Derived |
| Office card trailing allocation | 60px | 0px | Measured right padding |
| Mobile office-card separation | — | 35px | Derived |
| Contact copy to CTA | Side-by-side composition | 46px vertically | Derived |
| Mobile contact CTA to footer | — | 80px | Derived |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero photograph upper corners | Approximately 60px | Desktop visual estimate |
| Hero scroll link | `50%` | Measured on the anchor |
| Menu outline | Circular appearance | Visible; button itself reports radius 0, so the circle is painted elsewhere within its anatomy |
| Customer-story and blog image links | `12px` | Measured |
| Story/blog navigation buttons | `20px` | Measured, producing short capsules |
| Mobile contact outline | Approximately 35px | Visual estimate; sampled parent anchor reports radius 0 |
| Service and office outer links | `0px` | Measured outer elements; child-image radii remain unknown |

Rounded geometry is concentrated in images and selected controls. It is not a universal card treatment.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | Approximately 13610px | Approximately 10274px |
| Header box | 1440 × 90px at y=5 | 390 × 65px at y=0 |
| Menu button | 51 × 51px at x=1359, y=23 | 44 × 44px at x=331, y=15 |
| Hero section | 1545px high | Approximately 888.6px high |
| Hero heading layout box | 1328 × 500px, x=56 | 350 × 337.6px, x=20 |
| Scroll link | 125 × 125px | 75 × 75px |
| Service columns | Three × 416px | One × 350px; 340px inner text width |
| Story/blog image link | 400 × 412px | 300 × 309px |
| Office outer link | 648px wide | 332.5px wide |
| Recruitment directory row | 1140 × 148.2px | 350 × 121.2px |
| Interview link | 500px wide | 340px wide |
| Contact CTA | 644 × 190px | 350 × 110px |
| Footer | 1110px high | 562px high |

These heights describe the captured layout state. They are useful for understanding scale, but are not all suitable as fixed heights in a new implementation.

## Components

### Persistent Header

**Role:** maintain the office identity and access to major site sections.

The desktop header places the wordmark at the far left, five Japanese navigation links toward the right, and a small outlined circular menu control at the far right. The links cover strengths, services, office information, recruitment, and contact. Their text is 15px, weight 350, with 16px horizontal link padding.

The header background is computed transparent. The top chrome remains visible in the supplied scrolled captures, including over the dark desktop footer and over contact copy on mobile. This supports a persistent-header interpretation; the exact positioning property and any scroll-dependent treatment were not supplied.

On mobile, the five-link navigation disappears. The 170px-wide wordmark and 44px menu control remain. The latter visibly contains two short horizontal strokes, not a heavy three-bar icon.

The button has the text label `メニューを開閉する`. A skip link, `本文までスキップする`, targets `#main-content` and is recorded in a 1 × 1px offscreen box. Its focused appearance was not tested.

**Unverified:** menu opening, panel composition, closing behavior, focus management, and header color changes during scrolling.

### Opening Hero

**Role:** express the practice's promise before introducing detailed services.

The desktop composition has substantial space between the header and visible headline. Letterforms begin around y=250 in the screenshot, even though the H2 layout box begins at y=0. The headline is left aligned at the main 56px gutter and uses two lines of 100px, weight-100 text.

The Japanese supporting line is `それぞれの企業に合った最適な解決策を。`. It sits below the large English display. Its individual computed type size was not included; approximately 18px on desktop is a visual estimate.

A broad photograph begins around y=545 with approximately 40px side margins. The image has generously rounded upper corners. In the current desktop capture, two people in white shirts are shown against a warm, bright office interior. The photograph continues below the screenshot edge, so its complete dimensions and crop cannot be measured from that image.

The handwritten `each` is pale peach, lighter than the headline and visually more expressive. It belongs inside the phrase, not in a badge or separate subtitle.

At 390px wide, the headline measures 42.9px and still follows the two-line structure. The screenshot reserves a gap between `For` and `Company`, but does not show the handwritten word or photograph. These missing elements are a capture limitation, not evidence that mobile intentionally removes them.

### Circular Scroll Link

**Role:** provide a visual transition from the hero to the strengths section.

The link targets `#strength`. Its desktop box is 125px square at x=1171, y=482.5, overlapping the photograph's approximate upper boundary. It uses a thin circular outline and a fine downward arrow.

On mobile, the box becomes 75px square at x=295.5, y=345.1. Only the outline is visible in the supplied capture. Preserve the known destination; do not infer a particular scrolling duration or easing from its appearance.

The extracted link text is empty. Whether a separate accessible name exists was not established.

### Strengths Statement

**Role:** introduce the office's relationship with business owners.

The large Japanese heading is followed by a more modest paragraph and a strengths-page link. On desktop, the heading begins at the main gutter, while the paragraph starts at x≈454.4 and occupies approximately 929.6px. That shift produces an asymmetric reading sequence rather than a centered text block.

On mobile, both heading and paragraph occupy the same 350px-wide column. The statement shrinks to 43px with 5px tracking; the paragraph becomes 14px with a 32.2px line height.

The rendered text also contains repeated decorative English words: `Thinking`, `Together`, and `Forwording`. Their repeated structure is evidenced, but their exact painted placement, size, and motion are not. Do not automatically reproduce extracted repetitions as ordinary accessible paragraph text.

### Bilingual Section Header and Utility Link

**Role:** identify a content category and offer a route to its full index.

Services, news, office, recruitment, blog, and contact combine a Japanese label with an English title. The groups use flexible layout rather than a uniformly boxed heading component.

For services on desktop, the heading group begins at x=56 and the `View more` link begins at x≈539.3. The link has 200px of left padding and a 60px measured height. On mobile, it moves below the heading and aligns toward the right, with 110px left padding and the same 60px height.

This unusually long leading allocation is part of the spacious link composition. The sampled evidence does not isolate every line or arrow decoration inside it. A fine leading rule is a reasonable adaptation, but its exact geometry should not be claimed as measured.

Many link labels occur twice in the extracted text. This is compatible with layered text treatments, but their exact hover sequence was not observed. A new implementation should expose one accessible label.

### Staggered Service Links

**Role:** route visitors to three principal service areas.

Each service is one linked unit containing a leading visual allocation, a Japanese title, a paragraph, and a sequence number. The links target:

- `税務・会計` → `/services/#tax`
- `相続・贈与・譲渡所得` → `/services/#inheritance`
- `設立・開業支援` → `/services/#opening`

Desktop cards occupy three 416px columns with 40px gaps. Their top positions are deliberately uneven: the second starts 200px below the first, and the third starts 100px below the first. Preserve this specific rhythm rather than staggering them in a simple descending staircase.

The outer links are transparent and have no measured corner radius. Titles use 20.8px, weight 300; descriptions use 13px with 24.7px line height. The title begins approximately 477.6px below the link's top on desktop and 360px below it on mobile. Those offsets establish a substantial leading visual region, but do not by themselves prove an image's exact height or aspect ratio.

At 390px wide, all three links stack in content order, separated by 40px. Each has 5px inner horizontal padding, producing a 340px text width inside the 350px outer link. The desktop vertical stagger is removed.

### Customer-Story and Blog Modules

**Role:** present individual editorial entries with access to a larger collection.

Both modules share measurable anatomy: a section-heading area, two short capsule controls, an image link, a light article title, metadata, and a `View all` link.

On desktop, the left heading region is 332px wide. The first recorded image begins at x=448 and measures 400 × 412px with a 12px radius. Two controls sit near the lower part of the heading region; each is 80 × 30px, with a 15px gap.

On mobile, the heading moves above the content. The controls sit to its right and measure 60 × 25px with an 8px gap. The image is 300 × 309px, narrower than the 350px content column. This is not a full-width mobile card.

The customer-story module uses white text in the measured elements. The blog module uses brown and gray. Their full backgrounds and article imagery cannot be described reliably from the supplied screenshots.

The paired controls suggest collection navigation, but slide movement, item count, autoplay, looping, and drag behavior were not demonstrated. Only one entry's text is represented in each supplied visible-content record.

### News Row

**Role:** display concise dated updates without making them compete with the larger visual sections.

The desktop news link begins at x=398, measures 986px wide, and is approximately 103px tall with 40px vertical padding. The title is 15px, weight 400. Its date and title occupy a horizontal composition.

On mobile, the row spans the 350px content width, with 25px vertical padding and an approximately 92px height. The date and title are arranged vertically. Preserve this change instead of compressing both into an overcrowded mobile line.

Only one dated announcement is included in the supplied content. Its publication date describes that item, not the inspection date or a verified date of the current design.

### Office Links

**Role:** connect visitors to the director's message, philosophy, office outline, and access information.

The desktop boxes reveal a horizontal sequence rather than four ordinary grid cards. Each outer link is 648px wide, including 60px right padding. Their x positions are 56, 704, 1352, and 2000px. The later links therefore extend beyond the inspected viewport.

Alternating items begin 70px lower. The inner available width is 588px. Labels pair Japanese text with English names such as `Message`, `Philosophy`, `Outline`, and `Access`.

On mobile, the sequence becomes four vertically stacked links, each 332.5px wide, centered inside the 350px content region. Their measured height is approximately 335.2px, with 35px between items.

The desktop arrangement suggests a horizontal presentation, but the mechanism used to reveal offscreen items was not tested. Do not state that it uses pinned scrolling, dragging, or a carousel as an observed fact.

### Recruitment Directory and Interview

**Role:** give hiring information its own substantial browsing path.

The recruitment introduction combines a bilingual heading, a short two-line statement, and a `View more` link. Three directory rows lead to candidate information, numerical office information, and requirements.

On desktop, the rows begin at x=244 and span 1140px. Each has 30px vertical padding and a measured height near 148.2px. On mobile, they align with the main gutter and span 350px, with a height near 121.2px.

The interview heading is exceptionally light: 67px desktop and 57px mobile at weight 100, with white text. The linked interview unit is centered at 500px wide on desktop and becomes 340px wide on mobile.

A separate full-width entry link reads `Join Our Team?`. It uses 110px display text on desktop and 40px on mobile, with 150px vertical padding in both records. Its full painted backdrop is not included in the visual evidence.

### Contact Section

**Role:** offer a broad invitation to ask questions or request advice.

The desktop section places a 644px paragraph column on the left and a 644 × 190px contact link on the right, separated by 40px. The paragraph is 14px with a 25.2px line height.

On mobile, the paragraph occupies the full 350px content column. A 350 × 110px outlined control follows after approximately 46px. Its visible contour has large rounded corners, estimated around 35px, and a fine gray border.

The mobile screenshot shows repeated `Get In Touch` text clipped at the control's side edges. The DOM also includes repeated Japanese contact labels. This establishes a repeated text-strip construction, but not its speed, direction, or hover-language behavior.

The full control links to `/contact/`. Implement one semantic link with a single accessible name, regardless of how many decorative text copies are used.

### Dark Footer

**Role:** close the page with identity, contact information, site navigation, and a social link.

The desktop footer is a tall warm-charcoal field with subtle visible texture. Its identity and contact details sit across the upper portion. Below, four navigation groups begin around x=76, 405.6, 735.2, and 1064.8. Primary links are white, 16px, weight 300; subordinate links are gray, 15px, weight 300.

The closing row places an underlined Instagram link at the left and copyright at the right. The visible identity and copyright independently support the operator name Nakatani Tax Accounting Office.

On mobile, the footer is 562px high. Its identity and address begin at a 40px left inset, followed by the telephone number. Instagram and copyright are centered farther down. The desktop navigation columns are not visible and are absent from the mobile rendered link list, although their text remains in the broader DOM extraction.

The telephone is a real `tel:` link. The social destination is present in the original-page link evidence. The supplied homepage does not establish production credits.

## Tokens — Motion & Interaction

The evidence records computed transitions, not a complete playback trace. Many sampled nodes report `animation: none`; this does not exclude animations on descendants, pseudo-elements, or JavaScript-controlled properties.

| Treatment | Measured declaration or evidence | Interpretation and limit |
| --- | --- | --- |
| Header links | Color and opacity, `0.4s cubic-bezier(0.165, 0.84, 0.44, 1)` | Defined transition; final hover values not supplied |
| Strengths heading, service links, office links, interview heading | Opacity and transform, `1s cubic-bezier(0.165, 0.84, 0.44, 1)` | Supports a reveal-oriented treatment; trigger and displacement unverified |
| Service paragraphs | Color, `0.6s cubic-bezier(0.215, 0.61, 0.355, 1)` | Defined color transition; endpoint unverified |
| Story/blog controls | Background and border color, `0.7s cubic-bezier(0.19, 1, 0.22, 1)` | Slow, soft control feedback; activation not tested |
| News title | Color, `0.4s cubic-bezier(0.165, 0.84, 0.44, 1)` | Defined hover-compatible transition |
| Blog category link | Color, `0.3s cubic-bezier(0.165, 0.84, 0.44, 1)` | Small utility feedback |
| Footer navigation | Color, `0.2s cubic-bezier(0.165, 0.84, 0.44, 1)` | Shorter feedback than the main navigation |
| Contact text strip | Repeated text and clipped edges | Movement plausible, but duration and direction unknown |
| Duplicated link labels | Repeated text nodes | Layering evidenced; rollover animation unverified |
| Hero scroll link | Destination `#strength` | Anchor destination known; smooth-scroll behavior unknown |

The supplied capture procedure waited for finite motion and sampled stability, temporarily pausing perpetual animations during readiness checks. It also traversed intermediate scroll positions. This improves capture readiness but does not prove every reveal or delayed resource completed.

**Recommended motion approach:** reuse the measured easing curves for subtle transitions, keep essential content visible before enhancement, and make any decorative text movement optional. Do not invent parallax, autoplay, a hero slideshow, or a menu transition on the basis of these still images.

## Surfaces

| Surface | Appearance | Evidence and reuse guidance |
| --- | --- | --- |
| Main canvas | Pure white | Measured body background |
| Header | Transparent over page content | Computed background and top/footer captures |
| Hero media | Warm photograph with broad upper corners | Desktop screenshot; full image dimensions unknown |
| Service links | Unboxed outer elements | Transparent backgrounds and zero outer radius measured |
| Story/blog media | Rounded image-link region | 12px radius measured |
| Contact control | White field, fine rounded outline | Mobile screenshot; parent radius alone does not explain the contour |
| Footer | Warm dark field with faint texture | Visually established; exact paint source unknown |
| Reversed content regions | White text | Measured text; full backdrop not supplied |

No general shadow-elevation system is visible in the supplied original-page captures. Do not import the default shadow presets from the property inventory into every component.

## Imagery

The current desktop hero photograph shows people working in a bright office with warm wood and soft cream surfaces. The subjects are engaged with work rather than posing directly at the camera. This supports an approachable professional tone alongside the precise, thin lettering.

The photograph is large enough to continue below the initial viewport. Its upper corners soften a broad rectangular mass without turning it into a small floating card. Keep people and environmental context readable when adapting the crop.

**Recommended art direction:** natural workplace interactions, daylight, warm neutral interiors, restrained saturation, and believable working gestures. These are reuse recommendations based on the visible hero, not descriptions of unseen service or recruitment images.

The footer shows a subtle textured finish. Its source asset and compositing method are unknown. A flat charcoal fallback is preferable to introducing conspicuous noise or an unrelated gradient.

### Observed Asset References

No image `src`, `srcset`, font-file URL, logo-file URL, or decorative-lettering path was included in the supplied evidence. Asset filenames must therefore remain unspecified.

| Visual | What is established | What remains unknown |
| --- | --- | --- |
| Header identity | Japanese wordmark with small English line; anchor widths 200px and 170px | File format, asset path, drawing method |
| Hero photograph | Two working people in a warm office in the desktop capture | Original file, full dimensions, alternate crops, any image-changing behavior |
| Handwritten `each` | Pale peach lettering visible on desktop | Font versus graphic, file path, entrance behavior |
| Scroll arrow | Fine downward arrow inside a circular outline on desktop | SVG, font glyph, or CSS implementation |
| Story/blog media regions | 400 × 412px desktop and 300 × 309px mobile; 12px radius | Actual image content and URLs |
| Footer texture | Subtle dark texture visible at both widths | Image, procedural texture, overlay, or other paint mechanism |

Use authorized assets where available. CSS can reproduce layout and control geometry, but cannot recover the office photography or custom lettering from the measurements alone.

## Layout & Responsive Behavior

The design uses several distinct responsive strategies rather than scaling the whole page uniformly.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Wordmark, five links, circular menu | Wordmark and circular menu only |
| Content gutter | 56px | 20px |
| Hero headline | 100px, two-line composition | 42.9px, two-line composition |
| Hero media and decoration | Photograph, handwritten word, arrow visible | Not fully rendered in the supplied capture |
| Strengths paragraph | Offset to the right | Full content width beneath heading |
| Services | Three staggered columns | Single vertical sequence |
| Story/blog heading | Left-side heading/control region | Heading and controls above the entry |
| Story/blog media | 400px wide | 300px wide |
| News | Offset horizontal date/title row | Full-width stacked date/title row |
| Office links | Horizontal sequence extending offscreen | Four centered vertical links |
| Recruitment rows | Offset 1140px-wide region | Main 350px column |
| Contact | Two columns | Paragraph above full-width CTA |
| Footer | Four navigation groups and split closing row | Address-led composition with centered closing links |

The source property inventory names breakpoints at 375, 576, 768, 992, 1200, 1400, and 1600px. This does not identify which media query causes each component to change. Only the two supplied viewport states are verified.

At 390px, the measured hero size of 42.9px equals 11vw. That is a numerical relationship, not proof of the source formula. A reuse implementation may use an 11vw mobile rule, but should label it as an adaptation.

The desktop record contains approximately 1800px between the measured office section's bottom and recruitment section's start. A blank intermediate desktop capture is also supplied. These facts do not establish whether the gap is scroll infrastructure, unrendered media, delayed content, or another layout effect. Do not turn it into an intentional empty section without further evidence.

The desktop document is longer than the mobile document despite the mobile service and office stacks. Avoid inferring total page length from column count alone; the large desktop visual and spacing allocations materially affect it.

## Do’s and Don’ts

### Do

- Use exact white and brown foundations: `#ffffff` and `#523c3c`.
- Preserve gray utility text instead of making every label the same brown.
- Use weight 100 for the principal English display roles when the font supports it.
- Keep Japanese explanatory copy comfortably spaced, especially the strengths paragraph.
- Distinguish the hero's broad image radius from the 12px editorial-media radius.
- Retain the desktop service stagger: first at zero, second at +200px, third at +100px.
- Stack services and office links in their existing content order on mobile.
- Preserve the different desktop allocations for headings, stories, directory rows, and contact.
- Treat the contact strip as one large link even when its visual text repeats.
- Use the visible workplace photograph as the basis for warm, human art direction.
- Separate measured parent styles from unmeasured child lettering and pseudo-element decoration.

### Don’t

- Don't turn this multi-section corporate homepage into a short campaign page with one repeated conversion action.
- Don't replace the thin display typography with heavy headline weights.
- Don't add bright brand fills based on unused framework palette variables.
- Don't put every section inside a rounded, shadowed card.
- Don't make all desktop service cards start on the same baseline.
- Don't recreate missing mobile imagery or blank captures as deliberate empty design features.
- Don't assume the footer color comes from the generic source `--dark` property.
- Don't apply the bilingual heading parent's 20.8px size to every nested display span.
- Don't claim autoplay, a hero carousel, pinned horizontal scrolling, or working menu behavior without observing it.
- Don't expose repeated animation text as multiple accessible labels.
- Don't invent image paths, handwriting fonts, or production credits.

## Recommended Implementation Additions

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

- Keep content visible by default. Apply entrance effects only after the relevant enhancement has initialized, so delayed scripts do not leave an empty page.
- Ensure the persistent header remains legible over dark surfaces and does not visually collide with contact text. Verify this at actual scroll positions.
- Give the scroll link an explicit accessible name and add `aria-expanded` and `aria-controls` to a functioning menu button.
- Implement menu focus handling, Escape dismissal, and focus return when an expanded menu is provided.
- Keep the small story/blog control graphics, but expand their interactive hit area to at least 44px in height.
- Hide decorative repeated labels from assistive technology and provide one stable name for the contact link.
- Offer a static contact-text treatment and disable entrance movement under reduced-motion preferences.
- Make all office destinations keyboard reachable if adapting the desktop horizontal sequence.
- Supply meaningful image alternatives and verify contrast for small gray text. The pale handwritten accent should not carry essential information alone.
- If 13px service descriptions prove difficult to read for the intended audience, increase them to 14–15px as an explicit accessibility adaptation.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: measured `#ffffff`.
- Main text: measured warm brown `#523c3c`.
- Utility links: measured gray `#727171`.
- Footer secondary text: measured `#a5a5a5`.
- Footer subordinate links: measured `#b5b5b5`.
- Handwritten accent: estimated pale peach `#e8c9af`.
- Footer field: estimated warm charcoal `#282622`.
- Primary action language: thin outlines, generous space, and restrained text rather than a saturated filled button.

### Overall Prompt

“Create a Japanese accounting-office corporate homepage with a white canvas, warm brown text `#523c3c`, gray utility links, and extremely light Outfit display typography. Place a delicate wordmark at the left of a transparent persistent header, five Japanese navigation links toward the right, and a fine circular menu control at the edge. Build a two-line English hero with a separately authored pale handwritten accent, a short Japanese supporting line, and a broad warm workplace photograph with large rounded upper corners. Follow it with an oversized Japanese strengths statement, three staggered service links, editorial story and blog modules, office information, a substantial recruitment sequence, a wide outlined contact link, and a dark spacious footer. At mobile width, use 20px gutters and stack the service and office content. Keep essential content visible without requiring animation.”

### Example Component Prompts

1. **Header and hero:** “At a 1440px viewport, use a 200px-wide wordmark near a 30px left inset, 15px Japanese navigation, and a 51px circular menu control. Set the English hero at 100px and weight 100, aligned to a 56px text gutter. Use brown lettering, a pale handwritten `each`, and a warm photograph inset about 40px with approximately 60px upper corners. These photo values are visual approximations.”
2. **Services:** “Create three transparent linked service compositions inside a 1328px content region: 416px columns, 40px gaps, and top offsets of 0, 200, and 100px. Give each a substantial visual area, a 20.8px light Japanese title, a 13px description at 1.9 line height, and a sequence number. Stack them with 40px gaps on mobile.”
3. **Editorial module:** “Use a desktop heading region on the left and a 400 × 412px media link with 12px corners to the right. Add a light 18px title, restrained metadata, and two small capsule navigation controls. On a 390px phone, move the heading above and use a 300 × 309px media region. Do not enable autoplay unless separately required.”
4. **Office links:** “Present four office destinations in a horizontal desktop sequence with 648px outer widths, 60px trailing allocation, and alternating 70px vertical offsets. For mobile, use centered 332.5px-wide links with 35px vertical gaps. Provide accessible overflow navigation as an implementation addition.”
5. **Contact and footer:** “Place a 14px contact paragraph beside a 644 × 190px link on desktop. Stack them on mobile and make the outlined link 350 × 110px with approximately 35px corners. Use repeated visual text only as decoration. Finish with a warm-charcoal footer, white primary links, gray subordinate links, office details, and a restrained social/copyright row.”

## Quick Start

### CSS Custom Properties

The following CSS is a reusable approximation, not an extraction of the original stylesheet. It combines measured tokens with explicitly marked estimates and recommended responsive rules. The 992px adaptation breakpoint is chosen for this example; its use by each original component was not verified.

Load an authorized Outfit font with the required weights if available. The stack below shortens the original Japanese fallback aliases. Supply your own authorized logo, photography, and handwritten lettering. No source asset paths are implied.

Component structure: `.hero-title` contains two `.hero-line` elements; place an authorized inline graphic in `.hero-each` on the second line. Put the Japanese supporting copy in `.hero-tagline`, outside the display heading. Each `.service-card` is a single link containing media, title, copy, and number. Use a single accessible label for `.contact-link`, and mark its repeated `.contact-track` content decorative.

```css
:root {
  /* Measured colors */
  --color-canvas: #ffffff;
  --color-ink: #523c3c;
  --color-muted: #727171;
  --color-footer-muted: #a5a5a5;
  --color-footer-link: #b5b5b5;
  --color-on-dark: #ffffff;

  /* Visual estimates, not sampled source declarations */
  --color-accent-estimate: #e8c9af;
  --color-dark-estimate: #282622;
  --color-rule-estimate: #aa9c98;
  --radius-hero-estimate: 60px;
  --radius-contact-estimate: 35px;

  /* Shortened adaptation of the measured family stack */
  --font-site: 'Outfit', YuGothic, 'Yu Gothic Medium',
    'Yu Gothic', 'Zen Kaku Gothic New',
    'Hiragino Kaku Gothic ProN', Verdana, Meiryo,
    'M+ 1p', sans-serif;

  --weight-display: 100;
  --weight-light: 300;
  --weight-body: 350;
  --text-body: 16px;
  --text-service: 13px;
  --text-service-title: 20.8px;
  --text-story-title: 18px;
  --leading-body: 1.8;
  --leading-service: 1.9;

  --gutter: 56px;
  --header-inset: 30px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --radius-media: 12px;
  --radius-control: 20px;

  /* Measured transition families */
  --ease-main: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-copy: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-control: cubic-bezier(0.19, 1, 0.22, 1);
}

* {
  box-sizing: border-box;
}

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

a {
  color: var(--color-muted);
}

button {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

.site-container {
  margin-inline: var(--gutter);
}

/* Fixed positioning is an adaptation of the persistent appearance. */
.site-header {
  position: fixed;
  z-index: 20;
  inset: 5px 0 auto;
  height: 90px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline: var(--header-inset);
  background: transparent;
}

.site-brand {
  flex: 0 0 auto;
  width: 200px;
}

.site-brand img,
.site-brand svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav a {
  padding-inline: 16px;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 27px;
  text-decoration: none;
  transition: color 400ms var(--ease-main),
    opacity 400ms var(--ease-main);
}

.menu-button {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 3px;
  width: 51px;
  height: 51px;
  padding: 0;
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.menu-button::before,
.menu-button::after {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* Visual spacing approximation; not the source hero's box model. */
.hero-copy {
  padding-top: 235px;
}

.hero-title {
  margin: 0;
  font-size: clamp(64px, 6.944vw, 100px);
  font-weight: var(--weight-display);
  line-height: 1;
}

.hero-line {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.hero-line + .hero-line {
  margin-top: 20px;
}

.hero-each {
  display: inline-flex;
  align-self: center;
  flex: 0 0 1.95em;
  width: 1.95em;
  margin-inline: 0.02em -0.2em;
  color: var(--color-accent-estimate);
}

.hero-each > svg,
.hero-each > img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-tagline {
  margin: 24px 0 0;
  font-size: 18px;
}

.hero-media {
  position: relative;
  margin: 40px 40px 0;
}

.hero-media > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-hero-estimate);
}

.scroll-link {
  position: absolute;
  top: 0;
  right: 7.65%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 125px;
  height: 125px;
  border: 1px solid var(--color-rule-estimate);
  border-radius: 50%;
  color: var(--color-muted);
  text-decoration: none;
}

/* An inline SVG arrow can use currentColor and a 1px stroke. */
.scroll-link svg {
  width: 24px;
  height: 32px;
}

.strength {
  padding-block: 170px 120px;
}

.strength-title {
  margin: 0;
  font-size: 90px;
  font-weight: var(--weight-light);
  line-height: 1.3;
  letter-spacing: 10px;
}

.strength-copy {
  width: 70%;
  margin: 60px 0 0 auto;
  font-size: 17px;
  line-height: 2.3;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

/* The English child size is an adaptation, not a measured value. */
.section-title {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.section-title-label {
  font-size: 20.8px;
  font-weight: 700;
  line-height: 1.1;
}

.section-title-en {
  margin-top: 10px;
  font-size: 64px;
  font-weight: 100;
  line-height: 1.1;
}

/* Leading rule is a recommended rendering of the measured allocation. */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding-left: 200px;
  text-decoration: none;
}

.text-link::before {
  content: '';
  position: absolute;
  left: 0;
  width: 170px;
  height: 1px;
  background: currentColor;
}

.services {
  padding-block: 120px 140px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  margin-top: 100px;
}

.service-card {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
}

.service-card:nth-child(2) {
  margin-top: 200px;
}

.service-card:nth-child(3) {
  margin-top: 100px;
}

/* Keep actual service media proportions content-specific. */
.service-media img {
  display: block;
  width: 100%;
  height: auto;
}

.service-title {
  margin: 24px 0 0;
  font-size: var(--text-service-title);
  font-weight: 300;
  line-height: 1.2;
}

.service-copy {
  margin: 16px 0 0;
  font-size: var(--text-service);
  line-height: var(--leading-service);
  transition: color 600ms var(--ease-copy);
}

.service-number {
  margin-top: 24px;
}

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

.story-card {
  width: 400px;
  max-width: 100%;
}

.story-media {
  display: block;
  aspect-ratio: 100 / 103;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-title {
  margin: 16px 0 0;
  font-size: var(--text-story-title);
  font-weight: 300;
  line-height: 1.4;
}

/* Accessible horizontal overflow is a recommended implementation. */
.office-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}

.office-card {
  flex: 0 0 648px;
  padding-right: 60px;
  scroll-snap-align: start;
  text-decoration: none;
}

.office-card:nth-child(even) {
  margin-top: 70px;
}

.recruit-list {
  margin-left: 188px;
}

.recruit-row {
  display: flex;
  align-items: center;
  min-height: 148px;
  padding-block: 30px;
  text-decoration: none;
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
}

.contact-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.contact-link {
  display: flex;
  align-items: center;
  height: 190px;
  overflow: hidden;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-contact-estimate);
  text-decoration: none;
}

/* Static by default: no unverified marquee timing is assumed. */
.contact-track {
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  white-space: nowrap;
}

.site-footer {
  padding: 120px var(--gutter) 100px;
  color: var(--color-footer-muted);
  background: var(--color-dark-estimate);
}

.footer-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 120px;
}

.footer-directory a {
  color: var(--color-footer-link);
  font-size: 15px;
  font-weight: 300;
  line-height: 20.8px;
  text-decoration: none;
  transition: color 200ms var(--ease-main);
}

.footer-directory .footer-primary {
  color: var(--color-on-dark);
  font-size: 16px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 160px;
}

.footer-bottom a {
  color: inherit;
  text-underline-offset: 4px;
}

.footer-copyright {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* Reveal-ready content remains visible without JavaScript. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-main),
    transform 1s var(--ease-main);
}

/* Recommended accessibility treatments */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

[id] {
  scroll-margin-top: 110px;
}

@media (max-width: 991px) {
  :root {
    --gutter: 20px;
    --header-inset: 20px;
  }

  .site-header {
    top: 0;
    height: 65px;
    padding-right: 15px;
  }

  .site-brand {
    width: 170px;
  }

  .site-nav {
    display: none;
  }

  .menu-button {
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  .hero-copy {
    padding-top: 200px;
  }

  .hero-title {
    font-size: clamp(30px, 11vw, 70px);
  }

  .hero-line + .hero-line {
    margin-top: 9px;
  }

  .hero-tagline {
    margin-top: 20px;
    font-size: 14px;
  }

  /* Retain media; its absence in the capture is not a design rule. */
  .hero-media {
    margin: 40px 20px 0;
  }

  .hero-media > img {
    border-radius: 30px;
  }

  .scroll-link {
    right: 0;
    width: 75px;
    height: 75px;
  }

  .strength {
    padding-block: 80px 60px;
  }

  .strength-title {
    font-size: clamp(34px, 11.026vw, 43px);
    letter-spacing: 5px;
  }

  .strength-copy {
    width: 100%;
    margin-top: 30px;
    font-size: 14px;
  }

  .section-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .section-title-en {
    font-size: 36px;
  }

  .text-link {
    align-self: flex-end;
    padding-left: 110px;
  }

  .text-link::before {
    width: 85px;
  }

  .services {
    padding-block: 60px 100px;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 40px;
  }

  .service-card {
    padding-inline: 5px;
  }

  .service-card:nth-child(n) {
    margin-top: 0;
  }

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

  .story-card {
    width: 300px;
  }

  .office-track {
    display: grid;
    gap: 35px;
    overflow: visible;
  }

  .office-card {
    width: 95%;
    margin-inline: auto;
    padding-right: 0;
  }

  .office-card:nth-child(even) {
    margin-top: 0;
  }

  .recruit-list {
    margin-left: 0;
  }

  .recruit-row {
    min-height: 121px;
  }

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

  .contact-link {
    height: 110px;
  }

  .site-footer {
    padding: 80px 40px 130px;
  }

  .footer-directory {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 30px;
    margin-top: 150px;
    text-align: center;
  }

  .footer-copyright {
    margin-inline: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .site-nav a,
  .service-copy,
  .footer-directory a {
    transition: none;
  }

  .contact-track {
    animation: none;
    transform: none;
  }

  .office-track {
    scroll-behavior: auto;
  }
}
```

This starter deliberately leaves imagery intrinsic, does not reproduce the unexplained desktop gap, and keeps the contact text static. Menu functionality, collection navigation, and any optional reveal triggers require separate implementation and testing. The footer padding and display-heading child sizes are adaptations; the measured tokens do not make this a pixel-identical reconstruction.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #ffffff;
  --color-ink: #523c3c;
  --color-muted: #727171;
  --color-footer-muted: #a5a5a5;
  --color-footer-link: #b5b5b5;

  /* Estimated visual colors */
  --color-peach: #e8c9af;
  --color-charcoal: #282622;

  --font-site: 'Outfit', YuGothic, 'Yu Gothic',
    'Zen Kaku Gothic New', sans-serif;

  --text-body: 16px;
  --text-service: 13px;
  --text-service-title: 20.8px;
  --text-story-title: 18px;

  --spacing-page: var(--gutter);
  --spacing-section: 120px;
  --spacing-card-gap: 40px;

  --radius-media: 12px;
  --radius-control: 20px;
  --radius-contact: 35px;
  --radius-hero: 60px;

  --ease-site: cubic-bezier(0.165, 0.84, 0.44, 1);
}
```

## Sources & Evidence

- [Nakatani Tax Accounting Office — current homepage](https://nakatani-tac.jp/): supplied original-page browser captures, rendered text, links, custom-property inventory, element rectangles, and computed styles. Original and final URLs are identical; the recorded HTTP status is 200.
- **Capture timestamp:** `2026-10-01T15:17:23.717Z`, equivalent to October 2, 2026, 00:17:23.717 JST.
- **Desktop:** 1440 × 1000 CSS pixels; approximately 13610px document height. Supplied images show the opening hero, a header-only blank state, and the dark footer.
- **Mobile:** 390 × 844 CSS pixels; approximately 10274px document height. Supplied images show a partially rendered opening and the contact/footer ending.
- **Structural evidence:** computed styles and rectangles cover strengths, services, customer stories, news, office links, recruitment, blog, contact, and footer. These establish layout and type measurements even where full visual captures are unavailable.
- **Observation limits:** supplied stills and selected element styles do not establish all image content, border paint, pseudo-elements, font-file loading, hidden panel styling, or animation sequences. Link destinations are evidenced, but their destination pages were not inspected. No independent browsing or interaction was performed for this reference.
- **Capture conditions:** the supplied browser procedure waited for document readiness, finite motion, sampled stability, and visible image decoding within stated limits; perpetual animations were temporarily paused during readiness checks. SharedWorkers and service workers were disabled. These conditions do not guarantee semantic completeness or rule out delayed content.

This reference describes the current supplied homepage evidence. Estimates, arithmetic derivations, and recommended implementation choices are identified separately from measured values.