# TRUNK — Style Reference

> A hospitality company presented through monumental black lettering, deliberate cropping, and expansive white space.

**Website / original URL:** [www.trunk-base.com](https://www.trunk-base.com/)
**Final URL:** [https://www.trunk-base.com/](https://www.trunk-base.com/)
**Theme:** white and black, with an inverted closing section and footer
**Inspected:** October 2, 2026, 03:42 JST; supplied capture timestamp October 1, 2026, 18:42:07.173 UTC
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current Japanese corporate homepage. Screenshots establish the opening header, mission composition, vertical line, and notice. Rendered DOM and computed styles establish the structure and measurements of the numbered sections, news, editorial content, contact area, closing statement, and footer. Lower sections were not supplied as distinct visible screenshots. Linked pages and expanded controls were not inspected.

TRUNK places a small, vertically compressed brand mark against an enormous field of typography. The opening has almost no conventional interface decoration: black lettering, white space, compact navigation, a fine vertical line, and a charcoal notice. The oversized statement is deliberately wider than its viewport in places. A small italic connector interrupts the heavy uppercase lines and changes their rhythm.

The homepage is a corporate directory and editorial destination. Its content includes company information, sustainability, hotel properties, development, careers, news, staff stories, and a hotel journal. Measured desktop sections alternate their content between left and right alignments, then move into denser editorial arrangements. The closing section and footer reverse the palette to white on black. Preserve this shift from spacious identity to useful information when adapting the design.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed styles. Coordinates below are rounded where additional decimal precision would be misleading.
- **Visual estimates** come from the current desktop and mobile screenshots. Header geometry, hero letter dimensions, and notice styling fall into this category because their corresponding computed styles were not included.
- **Calculated** values are arithmetic relationships between supplied measurements, such as a 39px inset being 10% of a 390px viewport.
- **Recommendations** describe a new implementation. Proposed breakpoints, animation durations, accessibility changes, and CSS class names are not claims about the original source.
- Font stacks identify computed declarations, not independently verified font downloads or the font used inside graphical lettering.
- Empty heading text, missing image records, and offscreen elements limit interpretation. A measured element rectangle does not establish its artwork, crop, or visible glyph size.

## Tokens — Colors

### Core Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-paper` | Measured HTML/body background and several content sections; reversed text in the closing section and footer |
| Black | `#000000` | `--color-ink` | Measured primary text, closing-section background, footer background, and main-content NEW badge |
| Footer Gray | `#666666` | `--color-muted-source` | Measured secondary footer links such as CEO MESSAGE |
| Notice Charcoal | Approximately `#333333` over white | `--color-notice` | Visual estimate of the opening notice; its actual opacity and compositing were not supplied |
| Fine Gray | Approximately `#d8d8d8`–`#dddddd` | `--color-rule` | Visual estimate of the long vertical line near the right edge |

The palette is structural. White provides room for the large typography; black carries identity and later becomes an entire section background. Gray is reserved for secondary information and thin details. There is no verified colorful primary-action treatment.

Black letter shapes remain visible within the desktop notice overlap. A translucent black background could produce this appearance, but opacity, blending, and stacking were not measured. Treat `rgb(0 0 0 / 80%)` as a possible implementation approximation, not a recovered declaration.

### Values That Are Not Design Tokens

The supplied custom properties contain numerous WordPress preset colors, gradients, and shadows. Their presence does not establish visible use. Do not introduce cyan, purple, orange, gradients, or drop shadows merely because those presets exist.

Several parent anchors compute to browser blue while their measured text descendants compute to black or white. That parent declaration is not evidence of a visible blue link system.

## Tokens — Typography

### Base Interface Family

**Measured stack:** `"Noto Sans JP", "MS PGothic", Arial, "Hiragino Kaku Gothic ProN", Osaka, sans-serif`.

The root font size is `10px` at both inspected widths. The body computes to `14px` on desktop and `8.32px` on mobile, but important mobile content has explicit larger sizes. Do not use the mobile body value as a recommended reading size.

The TRUNKER'S TALK heading uses this stack at `60px / 700` on desktop and `33.28px / 700` on mobile.

### Japanese Content Family

**Measured stack:** `"Zen Kaku Gothic New", "ZEN角ゴシックN B", sans-serif`.

This family appears on Japanese section descriptions, story titles, categories, journal introductions, and the closing statement. Its role changes by weight:

- `900` for short section descriptions and the closing statement.
- `500` for editorial titles and introductory prose.
- `700` for journal titles.
- `400` for some categories and small labels.

### Latin Utility Family

**Measured stack:** `Roboto, sans-serif`.

Used for VIEW MORE links, dates, property labels, journal headings, Contact, and much of the footer. Bold uppercase labels establish hierarchy without button containers. Dates and small metadata use medium or semibold weights.

### Opening Display Lettering

The screenshots show very heavy uppercase sans-serif lettering with broad shapes. The opening begins with `TO BE AN`; the next long line extends beyond the frame. Mobile also reveals `in the` in a smaller italic treatment and the hospitality/industry wording below.

The hero section has empty extracted text, and no hero-specific font declaration or asset URL was supplied. Its exact typeface and rendering method remain unknown. Do not assign the hero to Roboto simply because Roboto appears elsewhere.

**Visual estimates:** desktop uppercase ink is approximately 184–190px high; mobile uppercase ink is approximately 49–51px high. A live-text approximation might begin around 250–260px desktop and 66–72px mobile, but font metrics require adjustment. These are not measured source font sizes.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Family / weight |
| --- | --- | --- | --- |
| Body inheritance | `14px`, tracking `0.56px` | `8.32px`, tracking `0.3328px` | Noto Sans JP stack / 400 |
| Japanese section description | `34px / 45.9px`, tracking `3.072px` | `20.8px / 28.08px`, tracking `0.832px` | Zen Kaku Gothic New / 900 |
| Main VIEW MORE | `28px`, tracking `0.8px` | `20.8px`, tracking `1.12px` | Roboto / 700 |
| News date | `12px / 12px` | `12.48px / 12.48px` | Roboto / 600 |
| News category | `12px / 12px` | `12.48px / 12.48px` | Zen Kaku Gothic New / 400 |
| Main NEW badge | `14px` | `14.56px` | Roboto / 700 |
| TRUNKER'S TALK heading | `60px`, normal line height | `33.28px`, normal line height | Noto Sans JP stack / 700 |
| Featured story title | `22px / 41.8px` | `20.8px / 33.28px` | Zen Kaku Gothic New / 500 |
| Compact story title | `14px / 25.2px` | `20.8px / 37.44px` | Zen Kaku Gothic New / 500 |
| Compact story category | `10px / 17px` | `14.56px / 24.752px` | Zen Kaku Gothic New / 400 |
| Compact story date | `10px / 10px` | `12.48px / 12.48px` | Roboto / 700 |
| Journal heading | `60px / 60px`, tracking `2.4px` | `33.28px / 36.608px`, tracking `1.3312px` | Roboto / 700 |
| Journal prologue title | `26px / 46.8px` | `20.8px / 37.44px` | Zen Kaku Gothic New / 700 |
| Journal prologue body | `16px / 27.2px` | `14.56px / 24.752px` | Zen Kaku Gothic New / 500 |
| Journal item title | `18px / 32.4px` | `20.8px / 37.44px` | Zen Kaku Gothic New / 700 |
| Closing statement | `20px / 36px` | `14.56px / 26.208px` | Zen Kaku Gothic New / 900 |
| Footer secondary link | `12px / 26px` | `14.56px / 31.2px` | Roboto / 400 |

The desktop VIEW MORE links have an unusual measured `7.8px` line height with `10px` top and bottom padding. Their total rectangle is approximately `27.8px` high. Preserve their visual compactness, but use a conventional line height and an adequate interactive target in an adaptation.

Several section H2 elements compute to `21px` on desktop and `12.48px` on mobile while their rectangles are much taller and their extracted text is empty. Those inherited sizes do not describe the visible section lettering.

## Tokens — Spacing & Shapes

### Spacing Scale

The design uses several distinct spacing systems rather than one universal card grid.

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main corporate-content left inset | `144px` | `39px` | Measured; both equal 10% of viewport width |
| Editorial container side inset | `120px` | `26px` | Measured; content widths 1200px and 338px |
| Compact editorial item gap | `10px` | `20.8px` | Measured flex gap; layout direction changes |
| Two-column editorial gutter | `40px` | Single column | Calculated from two 580px items inside 1200px |
| Featured-item horizontal gap | Approximately `40px` | Approximately `15.6px` | Calculated from consecutive item coordinates |
| News-row padding | `30px 0 60px` | `31.2px 0` | Measured in main news section |
| NEW badge padding | `2px 6px` | `2px 6px` | Measured |
| Notice outside clearance | Approximately `36px` right and bottom | Flush to bottom and side edges | Visual estimate |

Desktop section padding is deliberately large and varies by content. Observed examples include `260px 0 160px` for About, `120px 0 220px` for Sustainability, and `160px 0 220px` for Development. The Careers section includes an exceptional `1400px` bottom padding. Its purpose cannot be established from the supplied opening captures; do not convert it into a generic spacing token.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Sampled sections, story links, and contact link | `0` | Measured |
| NEW badge | `3px` | Measured |
| Opening notice | Approximately `3px` | Visual estimate |
| Header news count | Circular | Visible in desktop screenshot |

There is no evidenced rounded-card or shadow-elevation system. Most separation comes from empty space, typography, and changes between white and black fields.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Status |
| --- | --- | --- | --- |
| Main content origin | `y ≈ 134.39px` | `y ≈ 70.72px` | Measured |
| Opening section height | `1468.42px` | `576.02px` | Measured |
| Opening section top padding | `326px` | `208.52px` | Measured |
| Logo visible bounds | About `60 × 60px` at `(60, 50)` | About `39 × 39px` at `(12, 16)` | Visual estimate |
| Vertical line | About `x = 1370px`, `y = 400–600px` | About `x = 371px`, `y = 110–310px` | Visual estimate |
| About content-link width | `646px` | `351px` | Measured |
| Sustainability content-link origin | `x = 600px` | `x = 39px` | Measured |
| Main news-list width | `680px` at `x = 616px` | `338px` at `x = 26px` | Measured |
| Featured story width | `720px` | `312px` | Measured |
| Compact story-link rectangle | `580 × 173px` | About `338 × 383.69px` | Measured |
| Contact-link rectangle | About `1152 × 279.39px` | About `312 × 130.94px` | Measured |
| Notice rectangle | About `480 × 141px` at `(924, 823)` | About `390 × 132px` at `(0, 712)` | Visual estimate |

## Components

### Corporate Header

**Role:** establish identity and expose the principal corporate destinations.

The desktop header places the narrow black TRUNK mark at the upper left. A single row of small uppercase links begins around `x = 441px`: ABOUT TRUNK, PURPOSE, SUSTAINABILITY, PROPERTIES, DEVELOPMENT, CAREERS, and NEWS. JP and EN sit at the far right, separated by a fine vertical divider. JP is underlined in the captured state.

A small black circular count containing `1` sits above the NEWS area. The screenshot also shows a roughly 4px black horizontal strip along the top, beginning near the navigation's left boundary. Its behavioral meaning is unknown.

On mobile, the full navigation row disappears. The logo sits inside an approximately 72px header with a thin black bottom rule. A two-line gray menu glyph appears at the right; its lines are unequal in length, approximately 40px and 30px. The open-menu state, control semantics, and header behavior during scrolling were not supplied.

### Opening Mission Composition

**Role:** communicate the brand's scale and attitude before presenting site content.

The first desktop line begins around `(202, 464)`. The next line begins much farther left, near `x = 60px`, and extends beyond the viewport. Letterforms dominate the lower half of the first screen while the space between navigation and headline remains almost entirely empty.

Mobile retains this composition rather than fitting every word neatly into a narrow column. The first line begins near `(67, 279)`, the next line around `y = 344px`, the italic connector near `(78, 453)`, and the lower uppercase wording around `y = 533–646px`. Some letters are cropped at the horizontal edges.

Treat line placement and cropping as art direction. Do not shrink the entire statement until all lines fit. A new implementation should retain a complete accessible heading even when the visual presentation uses clipped artwork or decorative duplicates.

### Vertical Line

**Role:** a quiet vertical counterpoint to the massive lettering.

A thin light-gray line with a tiny dark mark at its upper end sits near the right edge. Its visible length is approximately 200px in both supplied viewport sizes. It overlaps the vertical territory of the hero without becoming a prominent control.

There is no evidence that this is an interactive scrollbar or that its dark mark tracks reading progress. Use a static decorative line unless separate behavior is specified.

### Current Notice

**Role:** surface an important corporate announcement independently of the main navigation.

The visible notice reads `TRUNK(HOTEL)を装った不審なメッセージにご注意ください`, followed by the underlined link `詳細はこちら` and a small right arrow. A white close glyph sits at its upper right.

On desktop, it occupies a compact charcoal rectangle at the bottom right with roughly 32px horizontal text inset. The Japanese notice wraps to two lines. On mobile, the same notice spans the viewport width at the bottom, uses roughly 26px horizontal padding, and becomes a prominent bottom strip.

Its placement appears viewport-anchored, but fixed positioning was not included in the computed evidence. The destination link is present in the rendered DOM. Dismissal behavior, persistence, focus handling, and announcement timing were not tested.

### Numbered Corporate Gateways

**Role:** direct visitors into the company's main areas.

The first five gateways follow a consistent content hierarchy:

1. A two-digit section number with a trailing period.
2. A large heading region whose lettering is not recoverable from the text extraction.
3. A heavy Japanese description.
4. A separate VIEW MORE link to the same destination.

The observed descriptions are `私たちについて`, `サスティナビリティ`, `TRUNKブランドが展開するホテル`, `店舗開発`, and `採用情報`.

On desktop, About and Careers use a 646px-wide content link beginning at `x = 144px`. Sustainability and Development begin at `x = 600px` and use 696px-wide links. Properties occupies a wider 1152px span from `x = 144px`. This creates an alternating rhythm rather than a sequence of centered blocks.

On mobile, these heading groups share `x = 39px` and a 351px width. Sustainability and Development retain a displaced VIEW MORE link beginning at `x = 195px`; the other gateway links remain at `x = 39px`. The asymmetry survives through action alignment even after the main content collapses into one column.

### VIEW MORE Link

**Role:** a repeated, unboxed navigation action.

Use bold Roboto, uppercase text, black on white or white on black, and reserved space to the right. Main desktop instances measure approximately `208.36 × 27.8px`; mobile instances measure approximately `140.56 × 24px`.

The source padding reserves 50px on the right on desktop and 18.2px on mobile. The excerpt does not establish the exact graphic occupying that space. A right arrow is a reasonable adaptation, but its geometry should not be presented as measured source artwork.

Keep the action visually integrated with its section. A filled pill or oversized colored button would introduce an unsupported interaction style.

### News List

**Role:** organize current announcements as editorial information.

Section 06 contains four announcement links in the supplied DOM. Each groups a date, category, optional NEW marker, and Japanese title. The latest announcement is also used in the opening notice.

The desktop list sits toward the right, at `x = 616px`, with a 680px width. Rows have substantial vertical padding and vary in height with content, approximately 156–188px in the measured examples. Date and category are small, while the NEW marker is a compact black rectangle with white text and 3px corners.

On mobile, the list fills the 338px editorial column. The NEW badge sits at the right end of the first row's metadata area. Rows measure about 150px high in the supplied sample. Retain date/category/title hierarchy without turning every announcement into a separate raised card.

The footer repeats three announcements using white text and an inverted white NEW badge on black.

### Featured TRUNKER'S TALK Strip

**Role:** give selected staff and company stories greater prominence.

The rendered structure contains a horizontal sequence of 720px-wide story links on desktop and 312px-wide links on mobile. The central mobile item begins at approximately `x = 39px`, leaving portions of neighboring items beyond the main card. Desktop items advance by 760px; mobile items advance by approximately 327.6px.

Each entry includes a title, category, date, and property label. Desktop featured titles use `22px / 41.8px`; mobile uses `20.8px / 33.28px`. Several entries appear twice in the DOM, consistent with a carousel implementation that duplicates items.

The evidence establishes horizontal arrangement and duplication, not autoplay, dragging, controls, easing, or looping behavior. The visual contents of the leading media regions were not supplied.

### Compact Story Collection

**Role:** provide more editorial choices below the featured strip.

Desktop uses two columns of 580px-wide story links within a 1200px container. The text area begins 300px after the link's left edge and is 270px wide. A measured 10px flex gap separates the leading region from the text. This suggests a roughly 290px leading media region, but no image-element measurement confirms its exact bounds.

Titles use medium-weight Japanese type, categories are smaller, and date/property metadata sits near the bottom. The horizontal item is square-edged and unboxed in its sampled styles.

Mobile changes these into stacked items: a full-width leading region, a 20.8px gap, then a 338px-wide text area. Titles increase to 20.8px rather than inheriting the desktop's compact 14px size. This is a significant hierarchy adjustment, not a uniform scale-down.

### NOJIRI’S HOTEL JOURNAL

**Role:** distinguish the hotel journal within the broader editorial area.

The desktop heading is a 60px bold Roboto line with 2.4px tracking. On mobile, it becomes two lines—NOJIRI’S above HOTEL JOURNAL—at `33.28px / 36.608px`.

A prologue feature precedes four hotel entries. Its desktop link is 1200px wide with a measured 26px flex gap; the text begins at `x = 616px`. The title, supporting paragraph, and PROLOGUE label form a clear hierarchy. Mobile stacks the feature within the same 338px editorial column used by other stories.

The smaller journal entries include hotel name, location, date, and region. Their desktop arrangement follows the compact two-column editorial system and becomes a vertical sequence on mobile.

### Contact Area

**Role:** provide a broad, explicit route to contact information.

The desktop Contact anchor spans 1152px and uses generous internal padding: `90px 120px 120px`. It sits inside a white section with `205px` top and `120px` bottom padding. The label is bold Roboto at a measured 36.5px.

Mobile reduces the link to 312px wide with `43.68px 39px` padding and a 20.8px label. No supplied border or icon measurements establish a more detailed visual treatment. Preserve the scale and breathing room without inventing an elaborate contact card.

### Closing Statement and Footer

**Role:** close the corporate narrative and expose the deeper site map.

Section 08 changes to a black background with white text. The Japanese statement uses Zen Kaku Gothic New at weight 900, followed by a VIEW MORE link to Careers. Desktop padding is `225px 0 300px`; mobile padding is `117px 0 156px`.

The footer continues the black surface. Its measured desktop padding is `187px 144px 110px`; mobile uses `102.96px 39px 44.2px`. It contains repeated news, grouped corporate navigation, property destinations, editorial destinations, careers links, contact, policy links, and the copyright line.

Primary footer labels are white and bold. Secondary links are `#666666` and regular-weight Roboto. The supplied mobile measurements show reflowed navigation groups, but do not establish every group's final arrangement or any accordion behavior.

## Tokens — Motion & Interaction

No reliable motion-duration or easing tokens can be recovered from this evidence.

| Element or behavior | Evidence | Interpretation limit |
| --- | --- | --- |
| Sampled elements | `animation: none` | Does not exclude JavaScript animation, pseudo-elements, or unsampled nodes |
| Transition field | Serialized as `all` | Duration, delay, easing, and active property changes were not supplied |
| Main content | Large bounding rectangle despite viewport-height document report | Consistent with a controlled content wrapper; scroll implementation is unverified |
| Featured stories | Horizontal offscreen items and duplicate entries | Supports carousel-like structure, not a specific interaction model |
| Header menu | Closed two-line glyph visible on mobile | Open state and transition unverified |
| Notice close glyph | Visible at both widths | Dismissal and persistence unverified |
| JP / EN | Desktop links present | Language-switch result not inspected |
| Repeated captures | Same opening composition supplied | Does not establish a timed sequence or prove that all motion is absent |

**Recommended adaptation:** begin with a static, fully readable page. Add restrained 160–220ms opacity or underline transitions only where useful. If a carousel is implemented, provide explicit controls and keyboard access before considering autoplay. These are recommendations, not recovered TRUNK behaviors.

## Surfaces

| Layer | Appearance | Role |
| --- | --- | --- |
| Main canvas | Solid white | Supports oversized black lettering and spacious corporate content |
| Editorial content | White or transparent over white | Organizes stories through type, alignment, and spacing |
| NEW marker | Black with white text | Small freshness indicator |
| Closing section | Black with white text | Strong transition into the final corporate statement |
| Footer | Black, white primary labels, gray secondary links | Dense site navigation and repeated news |
| Current notice | Charcoal appearance with white text | Independent announcement overlay |

No general surface elevation or shadow system is established. Keep most components flat and square.

## Imagery

The supplied current first-screen captures contain no photographic hero. Their visual identity comes from the TRUNK mark, display lettering, empty space, and small interface details.

The lower DOM implies leading visual regions in editorial entries, but no image URLs or image-element records were supplied. Story subjects do not establish what the images depict. Photography color grading, subject framing, aspect ratios, hover crops, and motion remain unverified.

For a new implementation, authentic hospitality and people photography would be a content-appropriate choice, but that is a recommendation. Do not describe it as an observed photographic treatment of this page.

### Observed Asset References

| Visual element | What is established | Asset limitation |
| --- | --- | --- |
| TRUNK mark | Narrow black graphic, approximately square visible footprint | Original file URL and format unavailable |
| Opening lettering | Huge black uppercase forms and smaller italic connector | Exact font, graphic format, and complete uncropped asset unavailable |
| Section heading regions | Empty extracted H2 text with substantial measured bounds | No heading-art URLs supplied |
| Header and notice symbols | Two-line menu, close glyph, arrow, circular news count | Rendering method unavailable |
| Editorial leading regions | Geometry suggests space preceding or above text | Image files, exact image bounds, and visual contents unavailable |

Use authorized original identity assets when available. Do not redraw the logo using an ordinary condensed font or invent source asset paths.

## Layout & Responsive Behavior

### Desktop Composition

The opening is intentionally taller than the viewport: its measured height is approximately 1468px beneath a main-content origin of 134px. A large portion of the first screen is white space above the display lettering.

Corporate gateways generally reference a 10% page inset, but their internal widths and left origins vary. Editorial content introduces a separate 1200px-wide container, centered with 120px side margins at the inspected width. News has a right-shifted 680px list. These distinct alignments create the page's rhythm.

### Mobile Composition

The header changes to logo plus menu. The hero remains horizontally cropped and its measured section height drops to 576px. Numbered corporate sections begin from a 39px left inset, while editorial and main news content use 26px side insets.

The featured story strip retains neighboring-item overflow with a 312px central item. The compact story grid becomes a vertical sequence with 338px-wide content. Several editorial text sizes become larger on mobile than in their desktop compact variants. The journal heading wraps into two deliberate lines.

The notice becomes edge-to-edge at the bottom and covers part of the underlying content in the supplied mobile capture. A new implementation should account for this obstruction when placing interactive elements.

### Scaling and Breakpoint Limits

Many mobile values are multiples of 1.04: 20.8, 14.56, 12.48, 31.2, and 104px. A 375px reference-width system would reproduce those values at 390px, but the original formula was not supplied. Any such formula in the Quick Start is an adaptation.

Only two viewport widths were inspected. The actual navigation breakpoint, tablet layouts, landscape behavior, maximum widths at larger screens, and browser zoom behavior are unknown.

### Scroll-Geometry Limitation

The reported document height equals the viewport height at both sizes, while MAIN measures approximately 16010px tall on desktop and 12992px tall on mobile. This discrepancy means the document-height field cannot be treated as the actual content length or proof that the page contains only one screen.

Do not reproduce a fixed-height body or a custom scrolling system from this observation alone. Native document scrolling is the recommended baseline until the intended behavior is verified.

## Do’s and Don’ts

### Do

- Let oversized black letterforms and white space carry the opening.
- Preserve the small logo and compact navigation as a counterpoint to the headline.
- Art-direct individual headline lines and retain deliberate horizontal cropping.
- Use the italic connector to interrupt the uppercase rhythm.
- Keep corporate gateways spacious and asymmetrical on desktop.
- Preserve separate corporate and editorial container widths.
- Use Zen Kaku Gothic New for the measured Japanese roles and Roboto for measured Latin utility roles when those fonts are available.
- Retain unboxed VIEW MORE links and small monochrome NEW markers.
- Increase compact editorial text appropriately when items stack on mobile.
- Preserve the black closing section and footer.

### Don’t

- Do not replace the corporate information architecture with a generic conversion-page sequence.
- Do not force all hero words into a centered, fully contained text block.
- Do not assign a specific hero font without additional evidence.
- Do not turn every story or gateway into a rounded, shadowed card.
- Do not use the WordPress preset palette as evidence for visible accent colors.
- Do not reproduce the mobile body's 8.32px inherited value as ordinary reading text.
- Do not interpret empty H2 text as proof that the page has no headings.
- Do not label the vertical line as a working progress control without testing it.
- Do not invent carousel timing, menu transitions, or notice persistence.
- Do not infer photographs or asset paths from article titles.

## Recommended Implementation Additions

These are recommendations for an adaptation, not verified original features:

- Provide one complete semantic H1. If lettering is rendered as artwork, give it an accurate text alternative and hide redundant decorative copies from assistive technology.
- Keep decorative cropping local to the hero; prevent it from creating horizontal page scrolling or clipping keyboard focus elsewhere.
- Give the menu and notice-close controls accessible names and at least 44px targets. Synchronize the menu's expanded state with its actual visibility.
- Make the notice dismissible through an ordinary button, preserve access to its destination, and keep focused content clear of the bottom overlay.
- Add visible monochrome focus indicators that work on both white and black surfaces.
- Improve the contrast of small gray footer links. The measured `#666666` on black is below a 4.5:1 normal-text target; a lighter gray can preserve the hierarchy.
- If the horizontal story strip is interactive, make every story reachable without dragging and remove duplicated items from the accessibility and tab order where appropriate.
- Keep content available without animation and honor reduced-motion preferences.
- Verify full titles before applying line clamps. Some mobile title rectangles accommodate only two lines despite long extracted text, but the clipping mechanism is not supplied.

## Agent Prompt Guide

### Quick Color Reference

- Main background: `#ffffff`.
- Main lettering and labels: `#000000`.
- Closing section and footer: black background, white primary text.
- Secondary footer links: measured `#666666`; use a lighter accessible gray for a new implementation.
- Notice: approximately `#333333` over white, with white copy.
- Details: very thin neutral-gray rules and compact monochrome markers.

### Overall Prompt

“Create a Japanese hospitality corporate homepage with a white canvas, monumental black uppercase mission lettering, deliberate viewport-edge cropping, and a much smaller italic connector. Pair a narrow graphic logo with compact uppercase desktop navigation and a simple two-line mobile menu. Follow the opening with spacious numbered gateways for company information, sustainability, properties, development, and careers, alternating left and right content positions on desktop. Add a right-aligned news list, a horizontal featured-story strip, responsive editorial collections, a hotel journal, a generous contact area, and a black closing section and footer. Keep components flat and mostly square. Use measured Japanese and Latin font roles, but treat the hero font as unresolved. Do not add undocumented motion or invented photography.”

### Example Component Prompts

1. **Header:** “On a 1440px white canvas, place a roughly 60px black graphic mark 60px from the left and 50px from the top. Set compact uppercase navigation toward the right, followed by JP and EN. At phone width, replace the navigation with two unequal thin menu lines inside an approximately 72px header with a black bottom rule.”
2. **Hero:** “Create a typography-led mission composition with heavy black uppercase lines, large white space above, and intentionally different line offsets. Allow wide lines to crop at the viewport edge. Insert a small italic ‘in the’ connector. Keep a complete accessible heading separate from decorative clipping.”
3. **Corporate gateway:** “Use a two-digit section number, a large heading region, a 34px heavy Japanese description, and an unboxed 28px VIEW MORE link. Alternate the desktop content origin between approximately 10% and 42% of viewport width. On mobile, align the main group at 10% while retaining selected right-shifted actions.”
4. **Editorial item:** “Create a flat desktop story link with a leading media region and a narrow Japanese title column, small category text, and date/property metadata. Stack the regions on mobile, use a 20.8px gap, and increase the title to approximately 21px. Use actual supplied media; do not fabricate its appearance.”
5. **Notice:** “Place a compact charcoal announcement at the desktop bottom right with white Japanese text, an underlined detail link, a thin arrow, and a close button. Convert it into a full-width mobile bottom strip. Keep the visual close glyph small while providing a 44px interaction target.”

## Quick Start

### CSS Custom Properties

This is an implementation starter, not recovered source CSS. It keeps a conventional root size, uses measured content sizes where available, and approximates the opening with live text. The hero requires typography or artwork tuning for exact correspondence.

The mobile unit, 1024px adaptation breakpoint, display fallback, hero ink correction, media aspect ratio, focus treatment, and transition duration are recommendations. The starter also raises secondary footer text to `#999999` and enlarges small interaction targets.

**Markup contract:** use `.site-header` with an authorized logo inside `.brand`, a `.desktop-nav`, and a real `.menu-toggle` button. The hero contains one `.mission` heading with separate block spans for its lines and connector. Gateways use `.gateway-inner`, `.gateway-title`, `.gateway-description`, and `.more-link`. The notice is an aside with a link and a real `.notice-close` button. Menu and dismissal behavior require application logic; CSS alone does not implement them.

```css
:root {
  /* Measured palette, with explicitly recommended additions. */
  --color-paper: #fff;
  --color-ink: #000;
  --color-muted-source: #666;
  --color-muted-accessible: #999;
  --color-rule: #ddd; /* Visual approximation. */
  --color-notice: rgb(0 0 0 / 80%); /* Compositing approximation. */

  --font-base: 'Noto Sans JP', 'MS PGothic', Arial,
    'Hiragino Kaku Gothic ProN', Osaka, sans-serif;
  --font-jp: 'Zen Kaku Gothic New', 'ZEN角ゴシックN B', sans-serif;
  --font-latin: Roboto, sans-serif;
  --font-display: Arial, sans-serif; /* Unverified hero fallback. */

  --text-body: 14px;
  --text-description: 34px;
  --text-action: 28px;
  --text-editorial-heading: 60px;
  --text-feature-title: 22px;
  --text-story-title: 14px;
  --text-meta: 12px;

  --corporate-inset: 10%;
  --editorial-width: 1200px;
  --editorial-gap: 40px;
  --featured-width: 50vw;
  --featured-gap: 40px;

  --hero-size: clamp(66px, 17.78vw, 256px);
  --hero-top: 326px;
  --hero-ink-correction: calc(var(--hero-size) * .2);
  --hero-height: 1468px;

  --radius-small: 3px;
  --motion-ui: 180ms ease; /* Recommended, not measured. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font: 400 var(--text-body)/1.7 var(--font-base);
  letter-spacing: .04em;
}

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

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

.site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 134px;
  padding: 50px 60px 24px;
  background: var(--color-paper);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 30.8%;
  height: 4px;
  background: var(--color-ink);
}

.brand {
  display: block;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
}

.brand img, .brand svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.78vw, 40px);
  margin-top: 8px;
  font: 400 14px/1.4 var(--font-latin);
  letter-spacing: .04em;
}

.desktop-nav a {
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}

.languages {
  display: flex;
  align-items: center;
  gap: 10px;
}

.languages a + a {
  border-left: 1px solid #ccc;
  padding-left: 10px;
}

.languages [aria-current] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-count {
  position: absolute;
  top: -20px;
  right: -26px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--color-paper);
  background: var(--color-ink);
  font-size: 12px;
}

.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: var(--hero-height);
  padding-top: calc(var(--hero-top) - var(--hero-ink-correction));
  overflow: hidden;
  overflow: clip;
}

.mission {
  margin: 0;
  font: 900 var(--hero-size)/.955 var(--font-display);
  letter-spacing: .015em;
}

.mission-row {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.mission-row--lead { margin-left: 14vw; }
.mission-row--wide { margin-left: 4.17vw; }
.mission-row--industry { margin-left: -4vw; }
.mission-row--last { margin-left: 18vw; }

.mission-connector {
  display: block;
  margin: 72px 0 64px 9vw;
  font: italic 700 88px/1 var(--font-display);
  letter-spacing: 0;
}

.hero-line {
  position: absolute;
  top: 266px;
  right: 4.86vw;
  width: 1px;
  height: 200px;
  background: var(--color-rule);
}

.hero-line::before {
  content: '';
  display: block;
  width: 1px;
  height: 3px;
  background: var(--color-ink);
}

.gateway { padding: 160px 0 220px; }

.gateway-inner {
  width: min(646px, 80%);
  margin-left: var(--corporate-inset);
}

.gateway--right .gateway-inner {
  width: min(696px, 48.33%);
  margin-left: 41.67%;
}

.gateway--wide .gateway-inner { width: 80%; }

.section-number {
  display: block;
  margin-bottom: 32px;
  font: 500 14px/1 var(--font-latin);
}

.gateway-title {
  margin: 0;
  /* Suggested fallback size; original heading artwork is unavailable. */
  font: 700 clamp(56px, 7vw, 106px)/1 var(--font-display);
}

.gateway-description {
  margin: 69px 0 0;
  font: 900 var(--text-description)/1.35 var(--font-jp);
  letter-spacing: 3.072px;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  margin-top: 80px;
  padding-block: 5px;
  font: 700 var(--text-action)/1.2 var(--font-latin);
  letter-spacing: .8px;
  text-decoration: none;
}

.more-link::after {
  content: '→'; /* Recommended arrow, not recovered artwork. */
}

.editorial-container {
  width: min(var(--editorial-width), calc(100% - 80px));
  margin-inline: auto;
}

.editorial-heading {
  margin: 0 0 90px;
  font: 700 var(--text-editorial-heading)/1 var(--font-latin);
  letter-spacing: .04em;
}

.news-list {
  width: min(680px, 100%);
  margin-left: auto;
}

.news-row {
  display: block;
  padding: 30px 0 60px;
  text-decoration: none;
}

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 30px;
  font: 600 var(--text-meta)/1 var(--font-latin);
}

.news-title {
  margin: 24px 0 0;
  font: 500 18px/1.8 var(--font-jp);
}

.new-badge {
  padding: 2px 6px;
  border-radius: var(--radius-small);
  color: var(--color-paper);
  background: var(--color-ink);
  font: 700 14px/1.2 var(--font-latin);
}

.featured-strip {
  display: flex;
  gap: var(--featured-gap);
  overflow-x: auto;
  padding: 8px calc((100% - var(--featured-width)) / 2) 24px;
  /* Native horizontal scrolling is a recommended baseline. */
}

.featured-story {
  flex: 0 0 var(--featured-width);
  text-decoration: none;
}

.featured-title {
  font: 500 var(--text-feature-title)/1.9 var(--font-jp);
  letter-spacing: .02em;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px var(--editorial-gap);
}

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.story-media {
  width: 100%;
  aspect-ratio: 25 / 16; /* Recommended placeholder proportion. */
  object-fit: cover;
  border-radius: 0;
}

.story-title {
  margin: 0;
  font: 500 var(--text-story-title)/1.8 var(--font-jp);
}

.story-category {
  margin: 10px 0;
  font: 400 10px/1.7 var(--font-jp);
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font: 500 10px/1.2 var(--font-latin);
}

.contact-section { padding: 205px 10% 120px; }

.contact-link {
  display: flex;
  align-items: center;
  min-height: 279px;
  padding: 90px 120px 120px;
  font: 700 36.5px/1.2 var(--font-latin);
  text-decoration: none;
}

.closing {
  padding: 225px 10% 300px;
  color: var(--color-paper);
  background: var(--color-ink);
}

.closing-copy {
  font: 900 20px/1.8 var(--font-jp);
  letter-spacing: .04em;
}

.site-footer {
  padding: 187px 10% 110px;
  color: var(--color-paper);
  background: var(--color-ink);
}

.site-footer .secondary-link {
  color: var(--color-muted-accessible);
  font: 400 12px/26px var(--font-latin);
  letter-spacing: 1.12px;
}

.site-footer .new-badge {
  color: var(--color-ink);
  background: var(--color-paper);
}

.notice {
  position: fixed;
  z-index: 50;
  right: 36px;
  bottom: calc(36px + var(--safe-bottom));
  width: min(480px, calc(100% - 72px));
  padding: 28px 48px 30px 32px;
  border-radius: var(--radius-small);
  color: var(--color-paper);
  background: var(--color-notice);
}

.notice p {
  margin: 0 0 14px;
  font: 700 14px/1.7 var(--font-base);
}

.notice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 3px;
}

.notice-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

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

  .notice-close {
    transition: opacity var(--motion-ui);
  }

  .notice-close:hover { opacity: .7; }
}

/* Adaptation breakpoint; the original threshold is unknown. */
@media (max-width: 64rem) {
  :root {
    --m: clamp(.96px, calc(100vw / 375), 1.2px);
    --text-description: calc(20 * var(--m));
    --text-action: calc(20 * var(--m));
    --text-editorial-heading: calc(32 * var(--m));
    --text-feature-title: calc(20 * var(--m));
    --text-story-title: calc(20 * var(--m));
    --text-meta: calc(12 * var(--m));
    --featured-width: 80vw;
    --featured-gap: 4vw;
    --hero-top: calc(200.5 * var(--m));
    --hero-height: calc(553.85 * var(--m));
  }

  .site-header {
    align-items: center;
    min-height: 72px;
    padding: 12px;
    border-bottom: 1px solid var(--color-ink);
  }

  .site-header::before, .desktop-nav { display: none; }

  .brand {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .menu-toggle {
    position: relative;
    display: block;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    color: #777;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle::before, .menu-toggle::after {
    content: '';
    position: absolute;
    left: 0;
    height: 1px;
    background: currentColor;
  }

  .menu-toggle::before { top: 17px; width: 40px; }
  .menu-toggle::after { top: 24px; width: 30px; }

  .mission-row--lead { margin-left: 17.2vw; }
  .mission-row--wide { margin-left: -3.6vw; }
  .mission-row--industry { margin-left: -7vw; }
  .mission-row--last { margin-left: 19.5vw; }

  .mission-connector {
    margin: calc(48 * var(--m)) 0 calc(36.5 * var(--m)) 20vw;
    font-size: calc(30.77 * var(--m));
  }

  .hero-line { top: 38px; right: 4.87vw; }

  .gateway { padding: calc(100 * var(--m)) 0; }

  .gateway-inner,
  .gateway--right .gateway-inner,
  .gateway--wide .gateway-inner {
    width: 90%;
    margin-left: 10%;
  }

  .gateway-description {
    margin-top: calc(30 * var(--m));
    letter-spacing: .04em;
  }

  .more-link {
    gap: 12px;
    margin-top: calc(49 * var(--m));
    letter-spacing: 1.12px;
  }

  .gateway--right .more-link { margin-left: 40vw; }

  .editorial-container { width: 86.6667%; }

  .editorial-heading {
    margin-bottom: calc(40 * var(--m));
    line-height: 1.1;
  }

  .news-list { width: 100%; }
  .news-row { padding: calc(30 * var(--m)) 0; }
  .news-meta .new-badge { margin-left: auto; }

  .featured-title { line-height: 1.6; }

  .story-grid {
    grid-template-columns: 1fr;
    gap: calc(60 * var(--m));
  }

  .story {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--m));
  }

  .story-category {
    font-size: calc(14 * var(--m));
    line-height: 1.7;
  }

  .story-meta { font-size: var(--text-meta); }

  .contact-section { padding: calc(60 * var(--m)) 10%; }

  .contact-link {
    min-height: calc(126 * var(--m));
    padding: calc(42 * var(--m)) 10vw;
    font-size: var(--text-action);
  }

  .closing {
    padding: calc(112.5 * var(--m)) 10% calc(150 * var(--m));
  }

  .closing-copy { font-size: calc(14 * var(--m)); }

  .site-footer {
    padding: calc(99 * var(--m)) 10% calc(42.5 * var(--m));
  }

  .site-footer .secondary-link {
    font-size: calc(14 * var(--m));
    line-height: calc(30 * var(--m));
  }

  .notice {
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 32px 42px calc(12px + var(--safe-bottom)) 26px;
    border-radius: 3px 3px 0 0;
  }

  .notice p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .notice-close { transition: none; }
}
```

The notice may be taller than the captured original because the starter provides a 44px detail-link target. Keep that accessibility improvement when tuning its layout. Supply real media and logo assets separately; the code deliberately includes no guessed asset URLs.

### Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This does not imply that the original site uses Tailwind. Define the preceding variables first.

```css
@theme inline {
  --color-paper: #fff;
  --color-ink: #000;
  --color-footer-muted: #999; /* Recommended contrast improvement. */
  --color-fine-rule: #ddd; /* Visual approximation. */

  --font-interface: var(--font-base);
  --font-japanese: var(--font-jp);
  --font-utility: var(--font-latin);

  --text-section-description: var(--text-description);
  --text-action-label: var(--text-action);
  --text-editorial-title: var(--text-editorial-heading);
  --text-story-heading: var(--text-story-title);
  --text-metadata: var(--text-meta);

  --spacing-editorial-gap: var(--editorial-gap);
  --radius-marker: 3px;
}
```

## Sources & Evidence

- [TRUNK Japanese homepage](https://www.trunk-base.com/): original and final URL, HTTP 200, supplied page title, rendered text, links, computed styles, custom properties, and element rectangles.
- Capture timestamp: `2026-10-01T18:42:07.173Z`, equivalent to October 2, 2026, 03:42:07.173 JST. Inspected viewports: **1440 × 1000** and **390 × 844** CSS pixels. Device pixel ratio was not supplied.
- Current desktop and mobile screenshots establish the opening visual composition. Repeated images do not provide additional verified interaction states or distinct lower-page views.
- The supplied DOM establishes the homepage's lower-section content and measured layout. Destinations such as [About](https://www.trunk-base.com/about/), [Properties](https://www.trunk-base.com/properties/), and the [current notice](https://www.trunk-base.com/company/news/20261001/) were observed as links, not inspected as separate pages.
- Capture preparation reportedly waited for document loading, relevant finite animations, sampled layout/text stability, and visible image decoding within bounded time limits. Perpetual animations were paused during readiness checks and resumed afterward. These precautions do not verify delayed content, complete scroll behavior, or every interaction.
- No opened mobile menu, notice dismissal result, hover state, keyboard sequence, carousel operation, source image URL, hero font declaration, or complete animation configuration was supplied. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage evidenced by those captures and measurements. Visual estimates and implementation recommendations are explicitly separated from measured source values.