# Kontext — Style Reference

> A neighborhood guide drawn with street-map linework and the rhythm of a culture magazine.

**Original URL:** [https://kontext.jp/](https://kontext.jp/)
**Final URL:** [https://kontext.jp/](https://kontext.jp/)
**Theme:** light ivory, black typography and rules, with restrained red accents
**Inspected:** September 13, 2026, at 01:51:45 JST; the supplied inspection record is dated September 12, 2026, at 16:51:45 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current Japanese homepage: persistent header, featured story and neighborhood map, introductory text strip, shop carousel, DOM-confirmed news entries, editorial category sections, closing introduction, and footer. Three desktop captures and two mobile captures show the opening, selected intermediate content, and closing regions. Linked pages and expanded navigation were not inspected.

Kontext presents Nihonbashi Kabutocho and Kayabacho through places, people, and events. Its structure combines a numbered neighborhood map, a horizontal directory of venues, and a magazine-like sequence of interviews and reports. Fine black rules connect these different formats into one continuous page. The warm ivory canvas keeps the framework quiet while photography supplies changing color and subject matter.

The strongest identity contrast is between the dense, sculptural Kontext wordmark and the light, regular-weight interface typography. Other signatures are the repeated text strips, square photographic frames, alternating image-and-copy arrangements, small corner arrows, and open bracket links ending in a centered dot. The page closes with a much larger wordmark and generous space around an explanation of the publication.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered element rectangles or computed styles. Dimensions are CSS pixels unless stated otherwise.
- **Visual estimate** means a size, color, or relationship was read from the supplied current-page captures. These observations are not stylesheet measurements.
- **Calculated** means arithmetic applied to supplied measurements, such as subtracting a card's insets from its width.
- **Recommendation** means an implementation choice for a new project. It is not evidence of existing behavior.
- Token names and CSS classes below are implementation aliases. The supplied custom-property inventory contains general CMS presets, not a verified set of site-specific design tokens.
- Screenshots and DOM samples need not represent the exact same animation frame. Use the DOM for recorded values and the captures for composition; moving track offsets are especially state-dependent.
- The mobile screenshots establish the opening and closing layouts. They do not establish the visual layout of every intervening article or news section.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Ivory Paper | `#fafaf0` | `--paper` | **Measured:** `rgb(250, 250, 240)` on the body, header, and shop category labels. Visually continues through the editorial grid and closing introduction. |
| Black Ink | `#000000` | `--ink` | **Measured:** body and sampled text color. Visually also forms the wordmark, rules, map linework, and footer background. |
| Signal Red | `#dc4641` | `--signal` | **Measured:** `rgb(220, 70, 65)` on the active `jp` link. Similar red accents appear in the map and feature indicators, but their individual declarations were not supplied. |
| Feature White | approximately `#ffffff` | `--feature-paper` | **Visual estimate:** the selected feature's copy panel is visibly whiter than the ivory page. The panel's own background declaration was not included. |
| Inactive Indicator Gray | pale gray; exact value unmeasured | No source token established | Small inactive ticks at the upper-right of the feature photograph. Keep this subordinate to the red active tick. |

### Palette Behavior

Ivory is the main structural surface, not merely an outer page margin. It appears between photographs, inside labels, behind article copy, and around the closing identity block. Black rules separate adjoining regions without shadows or rounded containers.

The captured feature uses a white summary panel with black text. Keep this distinction from the ivory editorial cells. Red is a small orientation signal in the supplied current state; it does not establish a universal filled-button or category-background system.

The solid black footer is a local reversal of the page palette. No theme switcher or alternate page theme was evidenced.

The DOM includes generic CMS presets for vivid colors, gradients, and shadows. Their availability does not demonstrate their use in this design. Do not turn those presets into the site's visual palette.

## Tokens — Typography

### Main Interface and Editorial Text

**Measured family stack:** `'DM Sans', dnp-shuei-gothic-kin-std, sans-serif`.

This stack appears on the body, header links, featured story text, and shop metadata. It combines a restrained Latin sans-serif with a declared Japanese Gothic family. Sampled text uses weight `400`; hierarchy comes mainly from size, spacing, position, and imagery.

The supplied record confirms the computed family stack, not which font file rendered every individual glyph. A reproduction should load authorized font resources where available and retain a sans-serif fallback. Font files and licensing details were not supplied.

The root element reports `Times`, but the visible body overrides it. That root declaration is not evidence of serif article typography.

### Wordmark

The Kontext identity is visually distinct from the text stack: extremely heavy letterforms, tight joins, slanted details, and a narrow counter in the rounded letter. Treat it as supplied logo artwork. Its typeface and asset format are not established by this evidence.

The measured header home-link box is approximately `189.98 × 36.08px` on desktop and `142.48 × 27.05px` on mobile. The closing version is visually about `670 × 127px` on desktop and `345 × 65px` on mobile. Preserve the artwork's proportions rather than recreating it by setting ordinary text in a heavier weight.

### Type Scale

Sizes and line heights below are measured unless explicitly marked as estimates. A slash separates font size and line height.

| Role | Desktop | Mobile | Tracking / notes |
| --- | --- | --- | --- |
| Root sizing context | `12 / 12px` | `9 / 9px` | Recorded root values; the original responsive formula is unavailable. |
| Body base | `14 / 25.2px` | `10.5 / 18.9px` | `0.42px` desktop; `0.315px` mobile. |
| Visible desktop navigation | `14 / 25.2px` | Not visible in the closed mobile header | Regular weight. |
| Mobile offscreen primary navigation | — | `22.05 / 35.7px` | Measured outside the viewport; expanded appearance was not tested. |
| Language links | `14 / 14px` | `14.7 / 14.7px` | Mobile utility text is slightly larger, despite the smaller body base. |
| Feature category and date | `10 / 17px` | `10.4 / 17.68px` | Tracking `0.3px` and `0.312px`. |
| Feature headline | `20 / 26px` | `16.64 / 21.84px` | Inherits tracking of approximately `0.42px` and `0.315px`. |
| Feature subject name | `18 / 30px` | `14.56 / 22.88px` | Regular weight. |
| Feature hashtags | `10 / 25.2px` | `10.4 / 18.9px` | Plain text within the story link. |
| Feature `Read` label | `14 / 23.8px` | `10.4 / 17.68px` | Compact corner-arrow treatment. |
| Introductory text strip | `16 / 28px` | `16.64 / 29.12px` | Remains prominent on mobile. |
| Shop category label | `12 / 12px` | `12.48 / 12.48px` | Padding is additional to the line box. |
| Shop name and location number | `18 / 25.2px` | `18.72 / 18.9px` | Long mobile names can occupy two lines. |
| Editorial grid headline | approximately `24 / 35px` | Not visually established | Desktop visual estimate; do not substitute the measured feature size automatically. |
| Closing introduction | approximately `18 / 40.5px` | approximately `13 / 30.5px` | Visual estimates; unusually open line spacing is a key characteristic. |

### Scaling Interpretation

There is no single desktop-to-mobile multiplier. The root and body base shrink to 75%, while the language control, ticker, and shop titles remain similar in size or become slightly larger. The featured headline shrinks by a different amount again.

Preserve these component-specific priorities: a smaller mobile header, readable utility controls, a compact story summary, and substantial shop imagery. The Quick Start uses explicit aliases rather than claiming an unobserved source `rem` or viewport formula.

## Tokens — Spacing & Shapes

**Density:** compact navigation and metadata, medium photographic insets, and a deliberately spacious closing section.

**Geometry:** square image corners and label corners; fine rules; tiny circular endpoints used as graphic punctuation.

### Spacing Scale

| Use | Desktop value | Mobile value | Evidence |
| --- | --- | --- | --- |
| Structural rule | approximately `1px` | approximately `1px` | Visual estimate supported by adjacent section boundaries. |
| Label offset inside a shop photograph | approximately `5px` | approximately `5.2px` | Estimated from the photo and label positions. |
| Feature headline-to-name gap | `7px` | approximately `7px` | Calculated from text rectangles. |
| Shop label padding | `8px` | `8.32px` | Measured computed padding. |
| Feature name-to-footer gap | `13px` | approximately `13px` | Calculated from text rectangles. |
| Feature metadata-to-headline gap | `14px` | approximately `14px` | Calculated from text rectangles. |
| Feature category-to-date gap | `20px` | `20px` | Calculated between text boxes; decorative bracket extends into the gap. |
| Header outer inset | `22.5px` | `22.5px` | Measured link and menu-control positions. |
| Feature copy horizontal inset | `30px` | approximately `23.91px` | Measured text positions within the feature. |
| Shop photograph inset | approximately `30px` | approximately `31.2px` | Desktop visual estimate; mobile positions support the corresponding inset. |
| Editorial copy inset | approximately `30px` | Not visually established | Desktop visual estimate. |
| Closing section's large vertical gaps | approximately `90–135px` | approximately `65–100px` | Visual estimates; values depend on which elements define the gap. |

### Border Radius

| Element | Treatment |
| --- | --- |
| Photographs, shop cells, editorial cells | Square corners. |
| Shop category labels | Square, outlined rectangles. Sampled label radius is `0px`. |
| Feature indicators | Small square or rectangular ticks. |
| `More Articles` and `More Information` links | Open-top rectangular bracket with square corners. |
| Link endpoint and map station markers | Circular graphic details, not a rounded-card system. |

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Header | `1440 × 60px` | `390 × 45px` | Measured. |
| Header logo link | approximately `189.98 × 36.08px` | approximately `142.48 × 27.05px` | Measured. |
| Featured story link | `720 × 540px`, beginning at `x=720, y=60` | `390 × 447.19px`, beginning at `x=0, y=45` | Measured. |
| Desktop map region | approximately `720 × 540px` | — | Visual estimate; fills the other half of the opening row. |
| Feature photograph | approximately `720 × 344px` | approximately `390 × 250px` | Visual estimates. Cropping changes materially. |
| Feature copy panel | approximately `720 × 196px` | approximately `390 × 197px` | Visual estimate and feature-height subtraction. |
| Mobile map region | — | approximately `390 × 219.39px` | Calculated from the feature end and ticker start; close to `16:9`. |
| Introductory ticker link | `1440 × 48px`, excluding adjacent rules | `390 × 49.89px` | Measured. |
| Shop cell | `400 × 344.20px` in the DOM sample | Usually `390 × 333.95px` | Measured. A wrapped mobile shop name produces a `352.86px` cell. |
| Desktop shop photograph | approximately `340 × 218px` | Mobile image width approximately `327.6px` | Desktop visual estimate; mobile width calculated from insets. |
| Editorial columns | Three columns, approximately `480px` each | Not visually established | Desktop screenshot. |
| Closing wordmark | approximately `670px` wide | approximately `345px` wide | Visual estimates. |
| Document height | approximately `4407.92px` | approximately `7973.06px` | Measured at inspection time; content-dependent, not a target height. |

## Components

### Persistent Header

**Role:** identity, section navigation, language choice, and social destinations.

A full-width ivory strip carries a thin black bottom rule. On desktop, five links sit at the left: `Article`, `News & Events`, `Shops`, `About`, and `Contact`. The wordmark is centered independently of these links. Language and social links occupy the right side.

The `jp` label is red and `en` is black, separated by a thin vertical divider. Social destinations use a small corner-line motif. Keep these as compact text links, not a row of filled social icons.

On mobile, the visible header contains a two-line menu symbol at the left, the smaller centered wordmark, and language controls at the right. The menu anchor has a measured `45 × 45px` box. Primary navigation and social links exist at negative horizontal coordinates in the supplied mobile DOM. This establishes offscreen content, but does not establish the opened panel's geometry, overlay, animation, or focus behavior.

The header remains at the top in opening, intermediate, and closing captures. Persistent positioning is visually established; whether the original uses `fixed`, `sticky`, or another mechanism is not included in the computed-style excerpt.

### Featured Story

**Role:** a prominent editorial entry adjacent to geographic context.

The desktop story fills the right half of the opening row. Its upper photograph is edge-to-edge; the lower white panel contains the article information. The sampled story concerns GARDEN HOUSE COFFEE and displays the subject name `近江奈未`.

The anatomy is:

1. A color photograph with a vertical group of small indicators near its upper-right corner.
2. A metadata row containing a bracketed category label, `彩る人`, and the date `2026.08.10`.
3. A regular-weight, two-line Japanese headline.
4. The subject's name.
5. A bottom line of hashtags at the left and `Read` at the right.

The recorded anchor wraps the photograph and summary together. `Read` is therefore a visual cue inside the larger story link, not evidence of a separate button. The subject's name is story content, not a production-credit attribution.

On mobile, this complete feature moves above the map. The photo becomes approximately `390 × 250px`, showing more of the subject's torso than the shallow desktop crop. The summary remains close to 197px high in the sampled state, despite becoming much narrower. Smaller headline and name sizes make that composition possible.

### Neighborhood Map

**Role:** connect the publication's stories and venues to the physical neighborhood.

The desktop map is a dense, diagrammatic drawing. Thin streets and heavier transport or boundary lines share the black-and-ivory palette. Japanese labels, small squares, outlined circles, and numbered locations provide detail. Large black blocks create strong graphic anchors alongside the text.

The desktop opening capture highlights the KABUTO ONE region in red. The mobile capture shows that region in black and a small red marker near the upper cluster. These different states do not establish whether map emphasis is synchronized with the feature or shop carousel.

Shop numbers are location references. Multiple venues share numbers such as `01`, `06`, and `07`; they are not unique carousel positions.

On mobile, the map becomes a shallow full-width region below the story. Preserve its useful crop and geographic labels rather than scaling the entire desktop composition into an unreadably small thumbnail.

**Recommended implementation:** use an authored map asset or vector drawing with a separate accessible venue list. The original asset format, marker hit areas, and map interactions were not supplied. Do not infer pan, zoom, selection, or navigation behavior from the drawing alone.

### Introductory Text Strip

**Role:** state the publication's purpose while separating the opening from the shop directory.

A roughly 50px-high band sits between fine horizontal rules. It repeats the sentence: “Kontext is a city and people guide to enjoy Nihonbashi Kabutocho and Kayabacho more deeply.” Long, delicate arrows separate repetitions.

The DOM contains three copies, with text extending beyond the viewport. The whole strip links to `/about/`. Its typography stays near 16px on both inspected viewports, giving the narrow mobile crop a strong horizontal presence.

The repeated text and offscreen positions support a marquee-style presentation. A speed, direction, loop interval, and pause behavior were not recorded. Reproducing the static appearance does not require inventing those values.

### Shop Carousel Cell

**Role:** a photographic venue directory linked to map detail pages.

Desktop cells are 400px wide and continue beyond both screen edges. The opening capture shows partial outer cells around complete central entries, including Book Lounge Kable and GARDEN HOUSE COFFEE. A thin vertical rule marks each cell boundary.

Each linked cell contains:

- An inset landscape photograph, approximately 340px wide on desktop.
- A small ivory category label over the photograph's upper-left corner, offset slightly inward from its edge.
- A separate lower name strip divided from the photograph area by a black rule.
- A regular-weight venue name at the left and a two-digit location number at the right.

Category labels have a 1px-looking outline, square corners, compact text, and measured 8px desktop padding. They support long content: the label for `景色／Keshiki` contains multiple venue functions and wraps to two lines. The maximum sampled label width is 320px on desktop and 312px on mobile.

On mobile, each cell is 390px wide, matching the viewport. The photographic inset remains around 31px rather than shrinking in proportion to the page width. Long shop names can increase cell height, as demonstrated by CAFE SALVADOR BUSINESS SALON in the DOM.

Small outlined arrow controls visually straddle carousel seams on desktop. Their visible frames are approximately 46 × 30px. Click handling, dragging, autoplay, and keyboard navigation were not exercised. Repeated offscreen links support a looping-track implementation, but the exact carousel library is unknown.

### News & Events Entries

**Role:** timely, compact access to neighborhood events.

The current DOM confirms three entries, followed by `News & Events Archives`. Each entry is a link containing a publication date, `EVENT`, an event title or date range, a location, and `WEB`. The most recent entry is dated `2026.09.10` and concerns `兜町夜市2026`.

The supplied current-page screenshots do not show this section clearly enough to establish its column widths, badge colors, row spacing, or mobile arrangement. Those details must remain unmeasured.

**Recommended implementation:** a ruled editorial list with date and event type as compact metadata, a flexible title, and secondary venue information. On narrow screens, place the title on its own line. This recommendation extends the observed page vocabulary; it is not a measurement of the existing news layout.

### Editorial Category Strip

**Role:** divide stories by their relationship to the neighborhood.

The DOM identifies three repeated section labels: `兜町を楽しむ人`, `兜町を彩る人`, and `兜町を考察する人`. Each category contains three article entries in the supplied content.

In the desktop intermediate capture, the category strip is a full-width ivory band about 50px high with black rules above and below. The Japanese label repeats at regular intervals across the width. Keep the category rhythm separate from individual article metadata.

The repetitions are visual structure. For a new implementation, expose one meaningful section heading to assistive technology and hide redundant copies.

### Editorial Article Block

**Role:** present interviews and reports as an interconnected magazine grid.

The desktop screenshot uses three approximately 480px-wide columns without broad gutters. Images and ivory copy panels touch along shared boundaries. Visible blocks are around 320px high, producing a roughly `3:2` module at this viewport.

The composition alternates vertically: one column begins with copy and reveals a photograph below, while its neighbor begins with a photograph and places copy beneath. The visible right column begins with copy; its lower image state is not established by the supplied crop. This evidence supports alternating image/copy arrangements, not a claim about a particular masonry algorithm.

A copy panel contains a compact category and date row, a larger Japanese headline, a subject or venue name, an optional role line, hashtags, and a lower-right `Read` cue. Content is inset approximately 30px. The headline stays regular-weight and gains hierarchy through its approximately 24px size and generous line height.

The article index photographs visible in this capture are grayscale, including the same GARDEN HOUSE COFFEE subject shown in color in the opening feature. The evidence does not reveal whether grayscale comes from image files or a CSS filter. A hover-to-color transition was not tested.

Some link text contains longer article excerpts that are not visible in the captured panels. Do not add those excerpts to a screenshot-matching teaser solely because they occur in the DOM.

### Corner Read Cue

**Role:** provide a small, consistent navigation signal.

`Read` sits near the lower-right of feature and article panels. A fine rule and short diagonal terminal create a compact corner-arrow shape. The motif is closer to map annotation than to a conventional button.

Keep the lettering modest, the strokes crisp, and the treatment flat. In a new implementation, make the entire story link keyboard-operable while preserving a visible focus indicator. Decorative lines should not contribute redundant accessible text.

### Bracket-and-Dot Link

**Role:** link to a broader archive or explanation at the end of a section.

`More Articles` and `More Information` use an open-top rectangular bracket. A vertical stem intersects the center of its bottom rule and extends downward to a small solid dot. The stem also rises slightly into the bracket's interior.

Visual estimates are approximately 214px wide for the desktop archive link and 240px for the desktop information link. The mobile versions are about 160px and 180px wide. Dots are approximately 10px on desktop and 7px on mobile.

These are navigation links to `/article/` and `/about/`, respectively. They do not establish asynchronous loading or an expanding accordion.

### Closing Introduction

**Role:** explain the editorial purpose after the reader has encountered the neighborhood's stories.

A large Kontext wordmark sits above centered Japanese paragraphs describing the area's financial history, subsequent changes, and renewed activity through people and their connections. The copy occupies a broad central measure on desktop, with roughly 40px between text baselines.

On mobile, the wordmark nearly spans the available width between approximately 22.5px side insets. The text wraps into shorter centered lines and keeps about 30px line spacing. It remains a substantial reading block, not a single oversized marketing slogan.

The `More Information` bracket link sits beneath the copy. Large clearances above the wordmark and below the link separate this closing statement from the denser directory and article sections.

### Footer

**Role:** a minimal legal and identity endpoint.

The page ends in a full-width black band with light text. Desktop places `Privacy Policy` at the left and the copyright line at the right. Mobile stacks them at the left.

The captured footer is visually about 80–85px high. Use content-driven padding rather than locking this height for every language. There is no visible multi-column sitemap, newsletter form, or decorative illustration in this footer.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Target | Recorded value | What it establishes |
| --- | --- | --- |
| Header navigation, social, and language links | `opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1)` | An opacity transition is defined; the changed opacity and trigger were not tested. |
| Introductory strip link | `background 0.6s cubic-bezier(0.19, 1, 0.22, 1)` | A background transition is defined; its endpoint was not supplied. |
| Shop links | `background 0.6s cubic-bezier(0.19, 1, 0.22, 1)` | A shared background-transition vocabulary. |

Use `--motion-interface: 600ms` and `--ease-interface: cubic-bezier(0.19, 1, 0.22, 1)` as aliases for these measured transitions. Do not apply the timing automatically to every animation.

### Motion Evidence and Limits

| Region | Evidence | Unverified details |
| --- | --- | --- |
| Featured stories | Indicator ticks and additional story content in the DOM | Autoplay interval, transition type, indicator click behavior, and synchronization with the map. |
| Introductory and category strips | Repeated text and offscreen content | Direction, speed, pause controls, and reduced-motion behavior. |
| Shop rail | Repeated entries, translated/offscreen positions, and visible arrow controls | Dragging, swipe thresholds, autoplay, loop mechanics, and keyboard controls. |
| Mobile menu | Menu control and offscreen navigation links | Open state, overlay, animation, focus management, and dismissal behavior. |
| Editorial images | Grayscale in the captured index | Filter implementation and any hover color reveal. |
| Header | Remains at the top across captures | Exact positioning declaration and any scroll-dependent changes. |

The supplied process observed the initial page for at least five seconds and waited for visible finite animations, image decoding, and sampled stability within its stated limits. Perpetual animation was paused during readiness checks and then resumed. This is capture preparation, not a record of tested interaction sequences.

Many sampled descendants report `animation: none`. That does not exclude animation on wrappers, pseudo-elements, or JavaScript-controlled tracks. No motion duration should be derived from the distance between isolated screenshots.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid ivory | Unifies map, directory, editorial sections, and closing introduction. |
| Selected feature summary | White in the captured state | Creates a subtle surface distinction beneath the color photograph. |
| Shop cell | Ivory, thin shared rules | Organizes repeated places without isolated elevated cards. |
| Shop category label | Ivory fill, black outline | Keeps text legible over varied photographs. |
| Article copy panel | Ivory, square boundaries | Alternates with grayscale imagery to form the editorial grid. |
| Text strips | Ivory between horizontal rules | Provide section identity and horizontal rhythm. |
| Footer | Solid black with light text | Closes the page through a clear palette reversal. |

No general shadow, gradient, blur, or rounded-card elevation system is visible. Distinction comes from rules, adjoining surfaces, photographic content, and changes in scale.

## Imagery

Photography is specific to people and places: a café worker outside a storefront, a book lounge, restaurant interiors, food arranged on plates, hands holding printed material, and portraits in the neighborhood. Warm wood, greenery, glass, and food colors enliven the shop directory without becoming additional interface tokens.

The featured portrait uses color and a shallow desktop crop. The mobile crop opens vertically to include more of the person. Maintain meaningful focal points at each aspect ratio; a single inflexible crop can lose the subject's face or useful environmental context.

Editorial index imagery is visibly grayscale in the intermediate capture. This quieter treatment helps the repeated image/text modules read as a continuous publication. Preserve smooth photographic detail; there is no evidence for pixelation, dithering, or decorative film-grain overlays.

The map is a different image language: high-contrast linework, Japanese labeling, numbered groups, and bold geometric masses. It should remain a carefully authored graphic rather than adopting the visual chrome of a generic map service.

### Observed Asset References

No original image file URLs, logo filenames, intrinsic dimensions, or map asset paths were supplied. The following references identify visible content, not downloadable assets.

| Visible asset | Current capture location | Reuse guidance |
| --- | --- | --- |
| Kontext wordmark | Header and closing introduction on both viewports | Use authorized logo artwork; preserve its distinctive outline and aspect ratio. |
| Numbered neighborhood map | Desktop opening left half; mobile below the feature | Preserve label hierarchy and geographic relationships. |
| GARDEN HOUSE COFFEE portrait | Color opening feature; grayscale editorial image | Use separate crops or focal positions for feature and index contexts. |
| Shop interiors and food photography | Horizontal shop rail | Use consistent landscape frames with square corners and restrained category overlays. |
| Event poster and hands with printed material | Desktop intermediate editorial capture | Allow documentary imagery and graphic printed matter within the same module system. |

The shell can be reproduced with CSS. The identity of the logo, map, and photographs depends on actual assets; the Quick Start does not supply replacements for them.

## Layout & Responsive Behavior

### Desktop Composition

The page is full-width. The 60px header leads into a 540px opening row at the inspected width, divided evenly between map and feature. A ruled text strip follows, then a horizontal venue rail. The directory's fixed 400px cells intentionally show partial neighboring content at the viewport edges.

The lower editorial content changes to three equal columns. Shared boundaries, alternating copy and imagery, and repeated category bands establish the rhythm. The closing introduction releases that density with a large centered logo and broad space around the text.

### Mobile Composition

At 390px, the header becomes 45px high and replaces visible primary navigation with the menu symbol. The opening order is feature photograph, feature copy, map, introductory strip, and shop rail. This is a real rearrangement of content, not a scaled desktop split screen.

The map becomes a shallow crop around 219px high. Shop cells become viewport-wide, while the photographs retain around 31px of surrounding space. The ticker remains close to its desktop size and continues beyond the screen edge.

At the end of the page, the closing logo fills approximately 345px of the 390px width. The explanation remains centered and generously led. Footer links stack vertically.

### Unmeasured Responsive Decisions

The exact breakpoint, intermediate tablet layout, mobile article grid, and mobile news layout were not supplied. A transition around 1024px and a single-column mobile article list are reasonable implementation recommendations, not original-site findings.

The desktop and mobile document heights reflect the current content and state. Do not hardcode either value. Allow longer titles, translations, and wrapped venue names to expand their containers.

## Do’s and Don’ts

### Do

- Use measured ivory `#fafaf0` and black as the main structural pair.
- Preserve the distinct white feature summary seen in the current opening state.
- Keep the wordmark as artwork and maintain its strong contrast with regular-weight text.
- Retain the map as a major opening element and move it beneath the story on mobile.
- Use thin shared rules, square corners, and restrained photographic insets.
- Keep location numbers meaningful across the map and shop directory.
- Allow multi-function shop labels and long venue names to wrap.
- Alternate editorial copy and grayscale imagery across the desktop grid.
- Reuse the corner-arrow and bracket-and-dot motifs consistently.
- Preserve the generous line spacing and empty space in the closing introduction.

### Don’t

- Don't convert the publication into a generic conversion page with feature lists and repeated large buttons.
- Don't recreate the logo by applying a heavy weight to DM Sans.
- Don't replace the map with decorative geometry that loses the neighborhood's actual structure.
- Don't treat shop location numbers as unique item indexes.
- Don't introduce pill badges, rounded image cards, gradients, or floating shadows.
- Don't infer visible site colors from unused CMS presets.
- Don't shrink every component by the same percentage on mobile.
- Don't claim autoplay, map synchronization, image hover effects, or menu transitions without testing them.
- Don't apply the desktop three-column grid to mobile as an observed requirement.
- Don't force identical card heights when names or article titles need more room.

## Recommended Implementation Additions

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

- Give the menu and carousel controls accessible names and visible keyboard focus. The source link-text inventory alone does not establish their accessible names.
- Implement the mobile menu with an explicit expanded state, a predictable close action, and appropriate focus handling. Keep closed menu items out of the tab sequence.
- Provide a textual venue directory alongside the map, including the shared location numbers and meaningful destination links.
- Keep stories and shop cells as real links. Avoid nesting a second link around `Read` inside an already linked card.
- Hide duplicated marquee text and carousel clones from assistive technology and keyboard navigation.
- If automatic movement is added, provide pause behavior and honor reduced-motion preferences. Begin with manually navigable tracks until motion requirements are verified.
- Enlarge the effective target area of small arrow artwork without enlarging the visible outline unnecessarily.
- Review the 10–12px metadata and tightly led mobile venue names at text zoom. Use larger text or additional line height where reading comfort requires it.
- Pair the active language color with a non-color indication such as `aria-current` or an underline. Verify the contrast of small red text independently.
- Supply responsive image sources, stable image dimensions, and meaningful alternatives. Load the visible feature promptly and defer distant directory images where appropriate.
- Test keyboard navigation, 200% text zoom, long Japanese titles, and intermediate widths before deciding that the two captured layouts cover every responsive case.

## Agent Prompt Guide

### Quick Color Reference

- Main page and repeated surfaces: `#fafaf0`.
- Text, logo, rules, and map linework: `#000000`.
- Active language label: measured `#dc4641`.
- Featured story summary: approximately white in the current capture.
- Footer: black with light text.
- Additional color comes primarily from photography.

### Overall Prompt

“Create a Japanese neighborhood editorial homepage inspired by Kontext. Use ivory `#fafaf0`, black 1px rules, square photographic frames, and regular-weight sans-serif text. Use the declared DM Sans and dnp-shuei-gothic-kin-std stack when authorized and available. Place a supplied heavy wordmark in a centered persistent header. On desktop, pair a numbered neighborhood map with a featured color photograph and white story summary. Follow with a repeated introductory text band, a horizontally navigable shop directory, and three-column editorial sections that alternate grayscale photographs with ivory copy panels. Finish with an enlarged wordmark, widely spaced centered introduction text, an open bracket link with a stem and dot, and a minimal black footer. On mobile, put the feature above the map and make shop cells viewport-wide. Treat unverified motion and lower mobile layouts as implementation decisions.”

### Example Component Prompts

1. **Header:** “Build a 60px ivory desktop header with a truly centered supplied logo, five small text links at the left, and language plus social links at the right. At the chosen mobile breakpoint, use a 45px header with a two-line menu icon and persistent language controls. Do not invent an observed open-menu animation.”
2. **Featured story:** “Create a linked editorial feature with a color portrait above a white information panel. Include a small category/date row, a regular-weight Japanese headline, a subject name, plain hashtags, and a corner-arrow Read cue. Match the approximate 720 × 540px desktop unit and adapt it to a 390px-wide mobile story.”
3. **Shop cell:** “Create a square-cornered 400px-wide ivory shop cell with a landscape photograph inset by 30px, a small outlined category label over the photo, and a ruled footer containing the shop name and a shared map-location number. Allow labels and long names to wrap. Use a full-width cell on mobile.”
4. **Editorial grid:** “Arrange three equal desktop columns of linked article modules, alternating the order of grayscale photographs and ivory copy panels. Use approximately 30px copy insets, regular 24px headlines, small metadata, and lower-right Read cues. Let long content expand without clipping. A single-column mobile arrangement is a proposed adaptation.”
5. **Closing introduction:** “Center supplied Kontext-style logo artwork at about 670px wide on desktop and almost the available width on mobile. Place restrained centered Japanese introduction text below it with very open line spacing. End with an open-top bracket link whose center rule continues downward to a solid dot.”
6. **Map:** “Use a real authored neighborhood map with thin streets, heavy black geographic masses, Japanese labels, small circles and squares, and numbered venue clusters. Keep the drawing readable in the desktop half-width panel and a shallow mobile crop. Do not invent geographic connections or unverified marker interactions.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered source code. It preserves measured colors, typography, and representative proportions using a conventional root size. Load authorized fonts and provide actual logo, map, and photographic assets separately.

The 1024px breakpoint, sticky-header mechanism, static grayscale filter, article layout implementation, scroll snapping, and hover endpoints are recommendations. The supplied evidence establishes their intended visual context, not these exact implementations. Tracks below are manually scrollable; no autoplay timing is invented.

```css
:root {
  /* Measured colors, with a visual approximation for the feature panel. */
  --paper: #fafaf0;
  --ink: #000000;
  --signal: #dc4641;
  --feature-paper: #ffffff;

  /* Declared source stack; font loading is a separate requirement. */
  --font-site: 'DM Sans', dnp-shuei-gothic-kin-std, sans-serif;
  --text-base: 14px;
  --leading-base: 25.2px;
  --tracking-base: 0.42px;
  --feature-title: 20px;
  --feature-leading: 26px;
  --feature-name: 18px;
  --feature-name-leading: 30px;
  --meta-size: 10px;
  --meta-leading: 17px;
  --ticker-size: 16px;
  --ticker-leading: 28px;
  --shop-name-size: 18px;
  --shop-name-leading: 25.2px;
  --shop-label-size: 12px;

  /* Representative measured dimensions and visual estimates. */
  --rule: 1px;
  --header-height: 60px;
  --logo-width: 190px;
  --header-inset: 22.5px;
  --feature-inset: 30px;
  --shop-width: 400px;
  --shop-inset: 30px;
  --shop-label-padding: 8px;
  --feature-photo-ratio: 720 / 344;

  /* Measured transition timing; endpoints below are recommendations. */
  --motion-interface: 600ms;
  --ease-interface: cubic-bezier(0.19, 1, 0.22, 1);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-site);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
:where(h1, h2, h3, p, figure) { margin: 0; }
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Suggested persistent header implementation. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  block-size: var(--header-height);
  padding-inline: var(--header-inset);
  border-block-end: var(--rule) solid var(--ink);
  background: var(--paper);
}
.primary-nav,
.header-utilities,
.social-links {
  display: flex;
  align-items: center;
  gap: 22.5px;
}
.primary-nav { grid-column: 1; grid-row: 1; }
.site-brand { grid-column: 2; grid-row: 1; line-height: 0; }
.site-brand img { inline-size: var(--logo-width); block-size: auto; }
.header-utilities { grid-column: 3; grid-row: 1; justify-self: end; }
.site-header a {
  transition: opacity var(--motion-interface) var(--ease-interface);
}
.language-switch { display: flex; gap: 6px; line-height: 1; }
.language-switch a + a { padding-inline-start: 6px; border-inline-start: 1px solid; }
.language-switch [aria-current] { color: var(--signal); }
.menu-toggle {
  display: none;
  inline-size: 45px;
  block-size: 45px;
  padding: 0;
  border: 0;
  background: transparent;
}
.menu-toggle span {
  display: block;
  inline-size: 45px;
  border-block-start: 1px solid;
}
.menu-toggle span + span { margin-block-start: 7px; }

/* Put the story before the map in the HTML reading order. */
.feature-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'map story';
}
.feature-story { grid-area: story; min-inline-size: 0; }
.feature-photo {
  aspect-ratio: var(--feature-photo-ratio);
  overflow: hidden;
}
.feature-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, 50% 50%);
}
.feature-map {
  grid-area: map;
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
}
.feature-map img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}
.feature-copy {
  padding: 23px var(--feature-inset) 15px;
  background: var(--feature-paper);
}
.story-meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-block-end: 14px;
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  letter-spacing: 0.03em;
}
.story-category { position: relative; }
.story-category::after {
  content: '';
  position: absolute;
  inset: 0 -10px 0 0;
  border-inline-end: 1px solid;
  border-block-end: 1px solid;
  pointer-events: none;
}
.feature-title {
  margin-block-end: 7px;
  font-size: var(--feature-title);
  font-weight: 400;
  line-height: var(--feature-leading);
  line-break: strict;
}
.feature-person {
  font-size: var(--feature-name);
  line-height: var(--feature-name-leading);
}
.feature-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-block-start: 13px;
}
.story-tags { font-size: var(--meta-size); overflow-wrap: anywhere; }
.feature-bottom .story-tags { align-self: flex-start; }
.read-cue {
  position: relative;
  flex: none;
  padding-inline-end: 9px;
  border-inline-end: 1px solid;
  border-block-end: 1px solid;
  font-size: 14px;
  line-height: 23.8px;
}
.read-cue::after {
  content: '';
  position: absolute;
  inset-inline-end: 1px;
  inset-block-end: 3px;
  inline-size: 7px;
  border-block-start: 1px solid;
  transform: rotate(45deg);
}

/* A static, manually scrollable baseline for the repeated strip. */
.intro-strip {
  display: block;
  overflow-x: auto;
  border-block: var(--rule) solid;
  transition: background var(--motion-interface) var(--ease-interface);
}
.intro-strip-track {
  display: flex;
  align-items: center;
  gap: 150px;
  inline-size: max-content;
  min-block-size: 48px;
  padding-block: 10px;
  white-space: nowrap;
  font-size: var(--ticker-size);
  line-height: var(--ticker-leading);
}

/* Use one semantic entry per venue; clone handling requires separate logic. */
.shop-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--shop-width);
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-block-end: var(--rule) solid;
}
.shop-card {
  min-inline-size: 0;
  border-inline-end: var(--rule) solid;
  scroll-snap-align: start;
  transition: background var(--motion-interface) var(--ease-interface);
}
.shop-card:focus-visible { outline-offset: -4px; }
.shop-media { position: relative; padding: var(--shop-inset); }
.shop-media img {
  inline-size: 100%;
  aspect-ratio: 25 / 16;
  object-fit: cover;
}
.shop-category {
  position: absolute;
  inset-block-start: calc(var(--shop-inset) + 5px);
  inset-inline-start: calc(var(--shop-inset) + 5px);
  max-inline-size: 80%;
  padding: var(--shop-label-padding);
  border: var(--rule) solid;
  background: var(--paper);
  font-size: var(--shop-label-size);
  line-height: 1;
  overflow-wrap: anywhere;
}
.shop-caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 20px var(--shop-inset);
  border-block-start: var(--rule) solid;
  font-size: var(--shop-name-size);
  line-height: var(--shop-name-leading);
}
.shop-name { min-inline-size: 0; overflow-wrap: anywhere; }
.shop-number { flex: none; }

/* Desktop composition adapted from the visible editorial modules. */
.category-strip {
  display: flex;
  align-items: center;
  min-block-size: 50px;
  gap: 75px;
  overflow: hidden;
  white-space: nowrap;
  border-block: var(--rule) solid;
  font-size: 16px;
}
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  align-self: start;
  border-inline-end: var(--rule) solid;
  border-block-end: var(--rule) solid;
}
.article-card:nth-child(odd) .article-copy { order: -1; }
.article-photo { aspect-ratio: 3 / 2; overflow: hidden; }
.article-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.article-copy {
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 2;
  padding: 30px;
}
.article-copy .story-meta { font-size: 12px; line-height: 1.7; }
.article-title { margin-block-end: 18px; font-size: 24px; font-weight: 400; line-height: 1.45; }
.article-person { font-size: 20px; line-height: 1.5; }
.article-role,
.article-copy .story-tags { font-size: 12px; line-height: 1.8; }
.article-copy .story-tags { margin-block-start: 16px; }
.article-copy .read-cue { align-self: flex-end; margin-block-start: auto; }

/* Open bracket, center stem, and terminal dot. */
.archive-action { padding: 45px 22.5px 35px; text-align: center; }
.stem-link {
  position: relative;
  display: inline-block;
  min-inline-size: 214px;
  padding: 8px 20px;
  border: var(--rule) solid;
  border-block-start: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.stem-link::before {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -13px;
  inline-size: 1px;
  block-size: 25px;
  background: currentColor;
}
.stem-link::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -18px;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.about-block { padding: 100px 22.5px 90px; text-align: center; }
.about-brand { inline-size: min(670px, 100%); margin: 0 auto 45px; }
.about-brand img { inline-size: 100%; block-size: auto; }
.about-copy { max-inline-size: 1000px; margin-inline: auto; font-size: 18px; line-height: 40.5px; }
.about-block .stem-link { min-inline-size: 240px; margin-block-start: 48px; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-block-size: 84px;
  padding: 22.5px;
  color: var(--paper);
  background: var(--ink);
}

/* Recommended feedback endpoints; these were not measured. */
@media (hover: hover) {
  .site-header a:hover { opacity: 0.7; }
  .shop-card:hover { background: var(--feature-paper); }
}

/* Proposed breakpoint; mobile values target the supplied 390px capture. */
@media (max-width: 64rem) {
  :root {
    --header-height: 45px;
    --logo-width: 142.5px;
    --text-base: 10.5px;
    --leading-base: 18.9px;
    --tracking-base: 0.315px;
    --feature-inset: 23.9px;
    --feature-title: 16.64px;
    --feature-leading: 21.84px;
    --feature-name: 14.56px;
    --feature-name-leading: 22.88px;
    --meta-size: 10.4px;
    --meta-leading: 17.68px;
    --ticker-size: 16.64px;
    --ticker-leading: 29.12px;
    --shop-width: 100%;
    --shop-inset: 31.2px;
    --shop-name-size: 18.72px;
    --shop-name-leading: 18.9px;
    --shop-label-size: 12.48px;
    --shop-label-padding: 8.32px;
    --feature-photo-ratio: 390 / 250;
  }
  .primary-nav,
  .social-links { display: none; }
  .menu-toggle { display: block; grid-column: 1; grid-row: 1; }
  .language-switch { font-size: 14.7px; }
  .feature-stage { grid-template-columns: 1fr; grid-template-areas: 'story' 'map'; }
  .feature-map { aspect-ratio: 16 / 9; }
  .feature-copy { padding-block: 30px 25px; }
  .feature-bottom { min-block-size: 24px; }
  .read-cue { font-size: 10.4px; line-height: 17.68px; }
  .intro-strip-track { min-block-size: 49.9px; }
  .shop-caption { padding-block: 20.8px; }

  /* Proposed mobile article layout; not visible in the supplied captures. */
  .article-grid { grid-template-columns: 1fr; }
  .article-card:nth-child(odd) .article-copy { order: initial; }
  .article-copy { aspect-ratio: auto; min-block-size: 260px; padding: 24px; }
  .article-title { font-size: 20px; line-height: 1.5; }
  .article-copy .read-cue { margin-block-start: 24px; }

  .archive-action { padding: 32px 22.5px 0; }
  .stem-link { min-inline-size: 160px; padding: 4px 18px; font-size: 10.5px; line-height: 18px; }
  .stem-link::before { inset-block-end: -9px; block-size: 18px; }
  .stem-link::after { inset-block-end: -12.5px; inline-size: 7px; block-size: 7px; }
  .about-block { padding: 100px 22.5px 65px; }
  .about-brand { margin-block-end: 30px; }
  .about-copy { font-size: 13px; line-height: 30.5px; }
  .about-block .stem-link { min-inline-size: 180px; margin-block-start: 38px; }
  .site-footer { flex-direction: column; gap: 8px; min-block-size: 80px; padding: 17.5px 22.5px; }
}

/* Recommended safeguards for this adaptation. */
@media (prefers-reduced-motion: reduce) {
  .site-header a,
  .shop-card,
  .intro-strip { transition: none; }
  .shop-rail { scroll-behavior: auto; scroll-snap-type: none; }
}
```

The menu control requires a separately implemented accessible panel. Carousel arrows require real navigation handlers if included. The CSS alone establishes neither interaction. Provide a semantic venue list even when a visually looping carousel is added.

For new long-form reading areas, use a larger dedicated body style rather than inheriting the measured 10.5px mobile interface base. The original capture's small metadata sizes are reference values, not a blanket readability recommendation.

### Minimal Component Markup

This example uses an original-page destination and the bracket-link treatment. The wording is an observed UI label; class names are adaptation aliases.

```html
<div class='archive-action'>
  <a class='stem-link' href='https://kontext.jp/article/'>
    More Articles
  </a>
</div>
```

For story cards, place the image and copy inside one anchor. Use headings for article titles and a non-interactive span for the internal `Read` cue. Keep article subjects and publication metadata separate from image alternative text.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-signal: var(--signal);
  --color-feature-paper: var(--feature-paper);
  --font-editorial: var(--font-site);
  --text-feature: var(--feature-title);
  --text-meta: var(--meta-size);
  --text-shop-name: var(--shop-name-size);
  --spacing-header: var(--header-height);
  --spacing-shop-inset: var(--shop-inset);
  --radius-card: 0px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [Kontext homepage](https://kontext.jp/). Both supplied URLs are `https://kontext.jp/`; the reported HTTP status is `200`.
- **Capture record:** `2026-09-12T16:51:45.450Z`, equivalent to September 13, 2026, 01:51:45.450 JST. Individual timestamps for each screenshot were not supplied.
- **Desktop evidence:** three current-page captures at 1440 × 1000 CSS pixels, showing the opening map/feature and shop rail, an intermediate editorial region, and the closing introduction/footer. Recorded document height is approximately 4407.92px.
- **Mobile evidence:** two current-page captures at 390 × 844 CSS pixels, showing the opening feature/map and the closing introduction/footer. Recorded document height is approximately 7973.06px.
- **Rendered DOM and computed styles:** supplied text, anchor destinations, element rectangles, font stacks, sizes, line heights, letter spacing, backgrounds, selected padding values, radii, and transition declarations. Detailed element samples mainly cover the header, feature, ticker, and shop rail.
- **Known linked destinations:** `/article/`, `/news/`, `/map/`, `/about/`, `/contact/`, and individual story and venue routes occur in the homepage evidence. Their destination-page designs were not inspected for this reference.
- **Observed preparation and scrolling:** the supplied process waited for loading, image decoding, finite motion, and sampled stability within stated time limits, and traversed intermediate scroll positions. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** no expanded menu, click sequence, keyboard test, hover-state comparison, motion timeline, original asset inventory, or complete stylesheet was provided. The current news layout and middle mobile sections lack sufficient visual evidence for precise styling claims. Delayed content and unexercised interactions remain unverified.

This reference describes the current homepage represented by the supplied inspection. Measured values, visual estimates, and proposed implementation choices are intentionally identified separately.