# Open Road — Style Reference

> Everyday community work, presented through generous photography, sturdy Japanese lettering, and a small amber accent.

**Website:** [open-road.jp](https://www.open-road.jp/)
**Original URL:** https://www.open-road.jp/
**Final URL:** https://www.open-road.jp/
**Theme:** light; white surfaces, charcoal text, amber actions, and a pale warm project backdrop.
**Inspected:** supplied evidence captured October 6, 2026, at 01:21:22.781 JST — October 5, 2026, at 16:21:22.781 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, reported in CSS pixels.
**Scope:** the current corporate homepage: brand presentation, navigation, featured projects, a dated announcement, six project cards, an organization introduction, and the footer. Linked pages and the expanded mobile menu were not inspected.

Open Road presents its work through people, places, and specific local projects. The homepage belongs to オープンロード合同会社, identified by the original page title and copyright line. Its introduction describes work connected with community development around Chiba and Ichihara. This is an organization homepage and project showcase, with several navigation destinations and article links.

The central design relationship is between a compact, assertive identity and large documentary photographs. Charcoal typography and a black-and-amber logo establish recognition; white space keeps the photographs approachable. Amber appears in reading actions and small graphic accents. Rounded image corners, rounded project cards, and pill buttons soften an otherwise straightforward editorial layout.

The desktop DOM describes an asymmetric composition: a broad navigation rail on the left and a large content region to its right. The mobile screenshots visibly confirm the tall opening photograph, compact logo, persistent hamburger control, white project-card bodies, photographic organization banner, and restrained footer.

**Important visibility limit:** the supplied desktop screenshots show a centered brand lockup and a blank pale canvas, rather than an unobscured homepage. Desktop content dimensions below therefore come from the rendered DOM. They are not claims that the complete desktop design was visually verified.

## How to Read This Reference

- **Measured** means a value is present in the supplied computed styles or element rectangles. Decimal measurements are rounded where that improves readability.
- **Derived** means a value is calculated from measured rectangles, such as the 50px distance between desktop cards.
- **Estimated** means an appearance or dimension is inferred from the original-page screenshots. These estimates are not sampled CSS declarations.
- **Recommended** means a choice for a new implementation. The CSS breakpoint, photographic scrims, focus treatment, and accessible alternatives are recommendations.
- All custom-property names in this document are implementation aliases. The evidence supplied no named source custom properties.
- A computed font-family declaration establishes the requested stack, not which font file supplied every rendered glyph.
- A DOM rectangle does not establish visibility. This matters for the overlapping feature entries, the mobile navigation, and desktop content covered by the captured brand state.
- The source root font size is **10px** at both inspected widths. The Quick Start uses explicit pixel tokens and leaves the application root at its normal size.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-white` | Measured on the mobile brand block and reversed text; visually confirmed on the header, card body, and footer |
| Charcoal | `#222222` | `--color-ink` | Measured body, navigation, headings, and footer text |
| Amber | `#f5a70f` | `--color-accent` | Measured feature and organization-link backgrounds; visually connects with the logo accent |
| Deep link ink | `#111111` | `--color-link` | Measured Instagram-link color |
| Warm project ground | approximately `#f4f2ef` | `--color-project-ground` | Screenshot estimate for the pale background surrounding the lower mobile project card |
| Opening canvas | approximately `#fafafa` | `--color-opening` | Screenshot estimate for the pale desktop lockup and blank states |

Use white and charcoal for most of the interface. Amber is concentrated in actions and small identity details; it does not replace the photographic color palette. The visible photographs retain warm indoor light, skin tones, green clothing, blue sky, and urban greenery.

The sampled `HTML` and `BODY` backgrounds are transparent. They do not independently prove a white body declaration. White is nevertheless visibly present and is explicitly measured on the mobile identity block.

### Contrast Guidance

The source uses white text on amber. Calculated from the measured colors, white against `#f5a70f` is approximately **2.0:1**. Charcoal `#222222` against the same amber is approximately **7.9:1**.

For an accessible adaptation, use charcoal action text or select a darker amber after checking contrast. This changes the source treatment and should be recorded as an intentional improvement. The Quick Start preserves the observed white labels by default and supplies a separate contrast option.

No alternate theme or dark mode was established by the evidence.

## Tokens — Typography

### Display, Navigation, and Editorial Interface

- **Measured family:** `'Zen Kaku Gothic New', sans-serif`.
- **Measured weight:** `700` for navigation, sampled headings, feature actions, the organization banner, and footer.
- **Character:** substantial Japanese sans-serif lettering with open tracking and comfortable line spacing.
- **Typical heading tracking:** `0.07em`, supported by measurements such as 2.8px at 40px and 1.82px at 26px.
- **Implementation alias:** `--font-display`.

The type feels friendly through its proportions and spacing, rather than through thin weights or decorative effects. Preserve the boldness of short Japanese statements. The logo is artwork and should not be recreated by choosing a vaguely similar font.

### General Body Stack

The measured source stack is:

```css
'中ゴシックBBB', '游ゴシック体', '游ゴシック',
'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic Pro',
'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif
```

Body text uses weight `400`, line height `1.75`, and tracking `0.04em`: 18px / 31.5px with 0.72px tracking on desktop, and 14px / 24.5px with 0.56px tracking on mobile.

The root element reports Times, but the body and interface override it. Times is not evidence of a serif visual identity.

### Measured Type Scale

| Role | Desktop | Mobile | Notes |
| --- | --- | --- | --- |
| General body | 18px / 31.5px | 14px / 24.5px | Weight 400; tracking 0.04em |
| Header inheritance | 18px / 27px | 14px / 21px | Weight 700 |
| Main navigation links | 17px / 17px | 20px / 20px | Mobile values belong to DOM navigation not visibly open in the captures |
| Contact and news navigation | 16px / 24px | 14px / 21px | Desktop tracking 1.26px; mobile 0.98px |
| Feature heading parent | 18px / 27px | 14px / 21px | Does not describe the larger nested headline lettering |
| Feature reading action | 16px / 19.2px | 10px / 14px | Desktop pill becomes a small mobile circle |
| Announcement link | 18px / 27px | 14px / 21px | Weight 700 |
| Project heading parent | 18px / 27px | 14px / 21px | Lead-line child styles were not separately sampled |
| Organization headline | 40px / 60px | 26px / 39px | Weight 700; tracking 0.07em |
| Organization supporting text | 24px / 36px | 14px / 21px | Weight 700; tracking 0.07em |
| Organization action | 16px / 19.2px | 12px / 14.4px | Weight 700; tracking 0.07em |
| Copyright line | 14px / 21px | 12px / 24px | Desktop tracking 1.26px; mobile 0.84px |

### Large Text Inside Composite Headings

The mobile feature headline visually reads at approximately **26px with 39px leading**. The lead statement in the visible railway project card is approximately **22px with 33px leading**. These are screenshot estimates; the supplied H2 measurements describe their parent styles.

For the Quick Start, use 26px / 39px for the mobile feature headline and 22px / 33px for mobile card leads. Desktop feature text at 40px / 60px and card leads at 24px / 36px are recommended adaptation values, not independently measured child styles.

Do not flatten the feature into 14px text merely because its H2 parent reports 14px. Keep a large statement, a smaller project identifier, and a separate reading action.

## Tokens — Spacing & Shapes

The source favors 20–25px mobile insets and 50px desktop separations. These are repeated observed dimensions, not proof of a universal spacing scale.

### Spacing Scale

| Use | Value | Status |
| --- | --- | --- |
| Mobile feature and card outer gutters | 20px | Measured from nominal feature and card rectangles |
| Mobile identity inset | 30px | Measured brand-block padding |
| Mobile card interval | 20px | Derived between successive card rectangles |
| Project text side inset | 25px | Derived at both widths |
| Mobile feature text inset | 25px left and bottom | Derived from nominal frame and heading bounds |
| Mobile circular action inset | 15px right and bottom | Derived |
| Desktop feature inset from top and main-region right edge | 50px | Measured geometry |
| Desktop feature copy and action inset | 50px | Derived |
| Desktop project-grid side inset | 50px | Derived from main-region and card bounds |
| Desktop project-column gap | 50px | Derived |
| Desktop project-row gap | 50px | Derived |
| Main navigation icon-side allowance | 40px | Measured left padding; icon artwork not resolved in the current desktop captures |
| Desktop footer vertical padding | 50px | Measured |
| Mobile footer vertical padding | 20px | Measured; additional height is present in its overall box |

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| Mobile brand block | 10px | Measured |
| Project-card anchor | 15px | Measured at both widths |
| Mobile feature image frame | approximately 20px | Screenshot estimate |
| Desktop feature and organization action | 60px | Measured; produces a pill at the observed height |
| Mobile organization action | 60px | Measured |
| Mobile feature action | 30px radius on a 55 × 55px box | Measured; effectively circular |
| Footer and organization photograph section | Square section edges | Visually observed on mobile |

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 |
| --- | --- | --- |
| Document height | 4016px, reported | 4520px, reported |
| Header region | x 0, y 10; 340 × 1000px | 390 × 164.88px |
| Brand H1 box | x 76, y 192.73; 188 × 275.31px | x 0, y 0; 124 × 164.88px |
| Brand content width | 168px inside 10px horizontal padding | 64px inside 30px padding |
| Main content region | x 340; 1050px wide | Full viewport, with section-specific gutters |
| Nominal feature image | x 340, y 50; 1050 × 900px | x 20, y 170; 350 × 654px |
| First feature text group | x 390, y 730; approximately 374 × 170px | x 45, y 692; approximately 245 × 107px |
| Feature action | approximately 149.61 × 51.19px | 55 × 55px |
| Project columns | x 390 and 890; each 450px wide | x 20; 350px wide |
| Project heading width | 400px | 300px |
| First project-card top | y 1167 | y 981 |
| Typical project-card heights | 608px; final pair 635px | approximately 490.80px; first and last approximately 511.80px |
| Organization action | approximately 218.09 × 51.19px | 340 × 38.39px |
| Footer | x 340, y 3894.5; 1050 × 121px | x 0, y 4421.17; 390 × 99px |

The first mobile feature image link has a larger sampled rectangle: approximately **356.87 × 666.84px at x 16.57, y 163.58**. The other feature links retain 350 × 654px. These dimensions are consistent with roughly 1.0196× scaling around the same center, but the transform declaration and its cause were not supplied. Use the visible 350 × 654px frame as the layout reference and treat the larger rectangle as a state-dependent measurement.

## Components

### Brand Mark and Captured Opening State

**Role:** establish identity before or over the main content.

The visible mark combines a heavy black glyph with an amber teardrop-like accent. On mobile it sits above a compact, stacked Japanese wordmark. Its narrow footprint allows a generous photograph to begin immediately below the header region.

Two desktop captures show the mark beside the two-line statement “まちをひらく、みちをひらく。” on a very pale canvas. The combined lockup occupies approximately 550 × 155px near the center of the 1440 × 1000 view. Another desktop capture is blank.

These stills do not establish a loading duration, a required click, a fade sequence, or the reason the desktop page remains covered. Treat this as a captured opening or obscured state, not as the full homepage. Do not make the blank frame a design requirement.

Use authorized brand artwork when available. Neither the source asset URL nor its file format is present in the evidence.

### Desktop Navigation Rail

**Role:** organize the corporate site while leaving the main region for project imagery.

The DOM places a 340px-wide header region beside the content. Its brand and navigation occupy a narrower 188px column beginning at x 76. The brand H1 has 10px horizontal padding, leaving a 168px content width.

The primary navigation contains three 49px-high rows:

- “わたしたちのこと” links to `/about/`.
- “てがけてきたこと” links to `/project/`.
- “できること” links to `/solution/`.

Rows use 17px bold display text and padding of 20px top, 12px bottom, and 40px left. Contact and information links sit together below them, using 16px type. A further link to `https://mei-sis.com/` is present, but its visible graphic is not established by the current desktop captures.

The header has viewport-height geometry. Whether it remains fixed throughout desktop scrolling is not established by the supplied screenshots or sampled position properties. A fixed rail is a reasonable implementation recommendation, explicitly adopted in the Quick Start.

### Mobile Header and Menu Control

**Role:** retain the identity while freeing horizontal space for photography.

The visible logo starts approximately 30px from the top and left. Its white H1 block measures 124 × 164.88px, including 30px padding. The photograph begins at y 170, shortly after that block.

A three-line charcoal menu glyph appears near x 335, y 30. It remains in the same upper-right location in the lower-page capture, supporting a persistent mobile control. The icon itself is approximately 24px wide; its hit target was not measured.

The DOM contains navigation links with 20px text and another centered logo link. They are not visibly open in either mobile capture. Do not infer the expanded menu background, entrance animation, focus behavior, or close control from those rectangles.

For a new implementation, use a button with a minimum 44px target, an accessible name, and an explicit expanded state. The menu interaction requires separate implementation and testing.

### Featured Project Stage

**Role:** lead with a concrete example of the organization’s work.

The visible mobile feature is a tall, rounded meeting photograph. Its nominal frame is 350 × 654px with 20px side gutters. The crop places a participant near the middle and another participant in the foreground at the right. White editorial text sits toward the bottom left; an amber circular reading action sits at the bottom right.

The content hierarchy is:

1. Documentary photograph filling the frame.
2. Large project statement, currently “地域の“HUB”になる / 場所をつくりたい”.
3. Smaller project identifier, “HUBプロジェクト”.
4. The action “記事を読む”.

The image, text group, and action have separate links to `/project/co-saten/` in the source DOM. A new implementation may consolidate these into one accessible feature link, with the visible action represented by a non-interactive child. Do not nest anchors.

The desktop image rectangle is 1050 × 900px, with the text and amber pill approximately 50px inside its lower edges. Mobile changes that pill into a 55px circle with a two-line 10px label.

Three project entries occupy the same nominal feature coordinates: the HUB project, restaurant support, and school lesson streaming. This supports an overlapping feature-stage structure. It does not verify autoplay, slide order, interval, swipe support, or user controls. Only the HUB image is visibly established in the supplied mobile top capture.

### Announcement Row

**Role:** provide a modest editorial update between the feature and project collection.

The rendered text includes the date “2020年07月20日” and the link “ウェブサイトリニューアルのお知らせ”, pointing to `/information/renewal/`.

The desktop announcement link begins at x 580, y 1020 and uses 18px / 27px bold text. On mobile it begins at x 30, y 890 and uses 14px / 21px text. Its right padding is 24px on desktop and 18px on mobile, but the associated decorative detail is not separately established.

Keep the announcement subordinate to the feature and work collection. Its old publication date is content metadata, not evidence that the current website is discontinued.

### Project Card

**Role:** connect a short project story with its article.

The visible lower mobile card has a photograph above a white body. The body contains a bold lead statement, a smaller project description, an amber reading pill at the lower left, and a small regional-outline graphic with an amber marker at the lower right. The card has 15px rounded corners and sits on a pale warm background.

The source implements each project card as one block anchor. Preserve that useful large target; the pill inside it can be a styled span rather than a second link.

**Anatomy:**

- **Media:** full card width. The visible card suggests an approximately 4:3 photograph; exact image dimensions and `object-fit` declarations were not supplied.
- **Text body:** 25px horizontal inset at both viewport sizes.
- **Lead statement:** visually larger than the H2 parent’s computed type.
- **Project description:** a smaller bold line or paragraph, allowed to wrap.
- **Action row:** a small amber pill paired with the outline graphic.
- **Container:** white visible surface, 15px radius, no discernible shadow in the mobile capture.

The heading begins 367px below the desktop card top and approximately 287.11px below the mobile card top. Those offsets include the media region and the body’s top spacing; they are not direct image-height measurements.

Desktop cards form two 450px columns with 50px gaps. Mobile cards are 350px wide and separated by 20px. Mobile heights vary with the copy, so do not force every card into a fixed-height box.

The six current card destinations concern business-card donations, reuse of a local building, a seaside festival, crowdfunding, falconry exchange, and a railway anniversary. Their titles are established by the DOM. Photography for all six was not visually supplied, so do not invent a uniform photographic treatment beyond the visible examples.

### Project Index Link

**Role:** move from selected homepage work to the complete project collection.

The desktop DOM includes “てがけてきたことへ”, a right-side text link to `/project/`, positioned below the six cards. It uses 18px / 27px bold display text and 24px right padding.

The corresponding link is absent from the supplied mobile rendered-link set. The Quick Start hides its optional equivalent on mobile to follow that observed difference. This does not establish the original CSS rule or breakpoint.

### Organization Introduction Banner

**Role:** connect the work examples back to the company and its geographic focus.

The lower mobile screenshot shows a full-width city-street photograph with blue sky, buildings, trees, and road markings. White copy is placed over the lower portion of the image:

- “まちをひらく、 / みちをひらく。”
- “千葉市・市原市を中心に / まちづくりに関わるしごとをしています。”
- The amber action “わたしたちのことへ”, linking to `/about/`.

On mobile, the content has 25px side insets. The headline is measured at 26px / 39px, supporting copy at 14px / 21px, and the button is 340px wide. The photographic section is approximately 333px high in the lower capture.

On desktop, the headline is 40px / 60px and the supporting copy is 24px / 36px. The button becomes an approximately 218px-wide pill to the right of the copy. Its bottom aligns with the supporting text’s bottom in the sampled geometry.

Keep this as a place-specific organization introduction. Its imagery and wording carry the geographic identity more effectively than an abstract decorative background.

### Footer

**Role:** offer a social destination and a quiet ownership line.

A white footer follows the organization image. The mobile screenshot shows a small Instagram icon, an underlined “Instagram” link, a separator, and the copyright line naming オープンロード合同会社.

The Instagram destination is `https://www.instagram.com/openroad_llc/`. Mobile text is 12px with 24px line height and 0.84px tracking. Desktop text is 14px with 21px line height and 1.26px tracking. The desktop link position indicates a group toward the right of the main region; the mobile line sits approximately centered across the viewport.

Avoid adding a large multi-column footer to this reference. The observed footer is a single compact identity and social line.

## Tokens — Motion & Interaction

| Treatment | Evidence | Practical interpretation |
| --- | --- | --- |
| Standard links | Measured `0.2s ease-in-out` transition | Reusable short interaction timing; changed properties and endpoints are not established |
| Project-card anchors | Measured `0.3s ease-in-out` transition | Slightly slower card feedback; no specific lift, opacity, or scale endpoint was observed |
| Sampled element animations | Reported `none` | Applies only to sampled elements; does not rule out script-driven, descendant, or pseudo-element motion |
| First mobile feature image | Rectangle consistent with approximately 1.0196× enlargement | Possible transformed state; trigger and duration unknown |
| Feature entries | Three entries share one stage geometry | Suggests a layered feature mechanism; playback behavior unverified |
| Desktop brand state | Repeated lockup captures and a blank capture | Timing, dismissal, and relationship to content readiness remain unknown |
| Mobile menu control | Visible at the top right in top and lower captures | Persistent placement observed; opening behavior not tested |
| Navigation and article links | Destinations present in rendered anchors | Link semantics established; destination pages were not inspected |

Do not invent a Ken Burns effect, automatic carousel interval, parallax treatment, or scroll-reveal sequence. The evidence does not establish them.

The capture process waited for document loading, visible finite animations, sampled layout stability, and visible image decoding within stated limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. These safeguards do not prove that delayed content or every interaction completed.

For an adaptation, keep feedback brief, provide visible keyboard focus, and honor reduced-motion preferences. If multiple feature entries are implemented, add explicit controls and an accessible pause mechanism for any automatic advance.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Main canvas | White | Separates identity, photography, and editorial information |
| Opening state | Very pale neutral | Isolates the brand lockup in the captured desktop state |
| Project-section ground | Pale warm neutral, estimated | Makes white cards legible without strong borders |
| Project body | White, 15px rounded container | Holds titles, descriptions, article actions, and regional graphics |
| Feature photograph | Rounded edge, white overlaid copy | Makes a local project the first visible story |
| Organization photograph | Full-width on mobile, square section edges | Reintroduces place and company purpose |
| Action | Amber circle or pill | Repeated visual signal for reading and organization links |
| Footer | White, small dark type | Quiet close to the page |

No general elevation system is visible in the supplied mobile captures. Structure comes from spacing, photographic boundaries, white card bodies, and rounded corners. A dark photographic scrim can improve readability in an adaptation, but its exact presence and strength were not established by the supplied styles.

## Imagery

The strongest current visual evidence is documentary photography: people in discussion, a railway ceremony, and a recognizable urban environment. The meeting image is close and informal. The railway image records an event. The organization image situates the company within an everyday city landscape.

Keep the photographs in natural color. Their different lighting conditions are part of the editorial character. The brand palette belongs to the interface around the images rather than to a duotone filter applied over every photograph.

Cropping is a major responsive decision. The mobile feature is much taller and narrower than its desktop DOM frame. Set a focal point per image so participants and meaningful gestures remain visible. Do not assume that one centered crop will work for all three feature entries.

The visible project card also includes a thin regional-outline drawing and a small amber location-like accent. Its exact marker semantics and whether every card uses the same graphic were not established.

### Observed Asset References

No original image-file URLs, SVG paths, intrinsic image dimensions, or font-file URLs were included in the evidence. The references below identify observed uses, not downloadable asset paths.

| Asset | Original-page evidence | Reuse guidance |
| --- | --- | --- |
| Black-and-amber brand mark and stacked wordmark | Mobile header | Use authorized artwork; preserve its proportions |
| Brand mark with two-line slogan | Desktop lockup captures | Keep separate from the homepage’s main content structure |
| Community meeting photograph | Mobile feature at the top of the homepage | Preserve the people and foreground interaction when cropping |
| Railway ceremony photograph | Last project card in the lower mobile capture | Retain the documentary event framing |
| City-street photograph | Organization introduction in the lower mobile capture | Keep enough environmental context to communicate place |
| Regional outline and amber marker | Lower-right area of the visible railway card | Preserve the light outline style; do not infer unverified map interactions |
| Instagram icon | Mobile footer | Pair with the visible text link |

The meeting feature links to [the HUB project](https://www.open-road.jp/project/co-saten/), and the railway card links to [the anniversary project](https://www.open-road.jp/project/kominato-100anniversary/). These are content destinations, not image asset URLs, and their pages were not inspected.

## Layout & Responsive Behavior

### Desktop: Measured Structure, Limited Visual Confirmation

At 1440px wide, the header region occupies 340px. The main feature starts at x 340, spans 1050px, and leaves 50px to the right edge. It begins 50px below the top and ends at y 950.

The project collection is inset another 50px within the main region. Its two columns occupy x 390–840 and x 890–1340. Rows begin at y 1167, 1825, and 2483, with 50px gaps after the measured card heights.

A separate slogan H2 occupies a 74px-wide, viewport-height region at the right edge, beginning at x 1366. Its writing mode, visible backing shape, and overlap appearance are not established by the current desktop captures. The Quick Start does not fabricate that decoration.

### Mobile: Visually Confirmed Composition

At 390px wide, the rail is replaced visually by a compact identity block and hamburger control. The feature starts at y 170 with 20px side gutters, leaving a nominal 20px below its 654px height within the 844px viewport.

The project collection becomes a single column with the same 20px outer gutters. The first card begins at y 981. Card bodies retain their 25px inner padding, so the heading width becomes 300px.

The last card ends around y 4067.78. A short pale interval separates it from the full-width organization photograph. The footer begins at y 4421.17. The approximately 4520px document height reflects the single-column content flow; it should not become a fixed page-height target.

### Breakpoints and Intermediate Widths

The source breakpoint was not supplied. Only the two stated viewports were inspected. Do not claim exact tablet behavior, fluid interpolation, landscape behavior, or safe-area handling.

The Quick Start uses **70rem / 1120px at a conventional 16px initial size** as a recommended switch to the desktop rail and two-column collection. Test that choice with the actual logo and Japanese copy. It is an adaptation boundary, not a recovered source media query.

Preserve these relationships across widths:

- Large photography remains the first content emphasis.
- Mobile keeps 20px feature/card gutters and 25px card text insets.
- Desktop introduces the left rail and two project columns.
- The feature action changes from a mobile circle to a desktop pill.
- The organization action expands across the mobile content width.
- Card height follows text wrapping rather than a fixed universal height.

## Do’s and Don’ts

### Do

- Use `#222222`, white, and measured amber `#f5a70f` as the interface foundation.
- Keep bold Japanese display typography and visibly separated headline/project-name levels.
- Let real community photographs carry the emotional emphasis.
- Preserve the compact logo, tall mobile feature, and generous desktop content region.
- Use 15px project-card corners and approximately 20px feature corners.
- Keep project-card bodies white against a subtle warm ground.
- Maintain 25px card text insets at both inspected widths.
- Let long project names create additional card height.
- Preserve the repeated “記事を読む” action and the final organization link.
- Clearly distinguish a measured DOM box from a visually confirmed state.

### Don’t

- Don’t treat the desktop blank capture as the intended finished page.
- Don’t infer an expanded mobile menu or carousel interaction from hidden or overlapping DOM content.
- Don’t render all headline text at the smaller computed H2 parent size.
- Don’t replace local documentary imagery with generic business illustrations.
- Don’t introduce heavy shadows, glass panels, or unrelated accent colors.
- Don’t flatten the mobile circular feature action into the same treatment as every other button.
- Don’t force every card to match one fixed height.
- Don’t recreate the logo with ordinary text or approximate CSS shapes.
- Don’t invent image paths, production credits, animation durations, or unsampled breakpoints.
- Don’t copy the source’s white-on-amber labels into an accessibility-sensitive implementation without a contrast decision.

## Recommended Implementation Additions

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

- Give the menu button a 44px or larger target, an accessible name, `aria-expanded`, and a controlled navigation region.
- Ensure closed mobile navigation is removed from keyboard navigation and the accessibility tree.
- Use one semantic link per project card and avoid nested interactive controls.
- Give repeated article links project-specific accessible names.
- Provide visible keyboard focus around cards, navigation, and photographic feature links.
- Choose charcoal button text or a darker amber where normal-text contrast is required.
- Use per-image focal points and verify white copy against every possible feature photograph.
- Provide meaningful alt text for documentary images; hide purely decorative regional outlines from assistive technology.
- Load the named display font only when the required font asset or service is available. Do not assume a family declaration proves successful loading.
- Keep the main content available if an opening animation fails or reduced motion is requested.
- If implementing a carousel, test inactive-slide focus, accessible controls, pause behavior, and image loading independently.

## Agent Prompt Guide

### Quick Color Reference

- Main text and navigation: `#222222`.
- Main surfaces and project bodies: `#ffffff`.
- Reading and organization actions: `#f5a70f`.
- Footer social link: `#111111`.
- Project-section ground: approximately `#f4f2ef`, a screenshot estimate.
- White action labels reproduce the source; charcoal labels are the recommended contrast alternative.

### Overall Prompt

“Create a Japanese corporate homepage for a community-development organization, using white surfaces, charcoal `#222222`, and amber `#f5a70f`. Lead with a large documentary project photograph and bold white Japanese copy. On mobile, use a compact stacked logo at the upper left, a persistent hamburger at the upper right, 20px side gutters, a tall rounded feature image, and a 55px circular article action. Follow with a small dated announcement and a single column of white project cards on a pale warm background. Each card contains a photograph, a bold lead statement, a smaller project description, and an amber reading pill. On desktop, use a 340px left navigation rail and two project columns. End with a city photograph, a two-line organization statement, an about link, and a compact social/copyright footer. Keep animation optional and do not invent interactions from the visual reference.”

### Example Component Prompts

1. **Mobile feature:** “Build a 350 × 654px photographic feature at a 390px viewport, with 20px outer gutters and approximately 20px corners. Place a two-line white Japanese statement at the lower left, a smaller project identifier beneath it, and a 55px amber circular reading action at the lower right. Use a documentary meeting photograph with a deliberate focal point.”
2. **Project card:** “Create a whole-card article link with a full-width documentary image, a white body, 15px outer corners, and 25px body insets. Stack a bold project statement above smaller project metadata. Place an amber reading pill and a small regional-outline illustration along the bottom. Use natural content height and no visible elevation shadow.”
3. **Desktop navigation:** “Create a 340px-wide left rail with a narrow 188px identity/navigation column. Use the supplied brand artwork, three bold primary links, and smaller contact/news links below. Reserve a 40px left allowance in primary rows, but do not invent icon artwork that has not been supplied.”
4. **Organization banner:** “Use a full-width city photograph with white Japanese text near the lower left. At mobile width, use a 26px / 39px headline, 14px / 21px supporting copy, 25px side insets, and a full-width amber about button. Keep the city legible as a real place.”
5. **Interaction implementation:** “Use short 200ms link and 300ms card transitions, visible keyboard focus, and reduced-motion support. Select hover endpoints as explicit implementation choices. Do not assume autoplay, image zoom, or a menu animation was verified.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. It preserves measured colors, principal dimensions, typography stacks, and responsive relationships. Estimated headline sizes, the 1120px breakpoint, photo scrims, desktop fixed positioning, and minimum feature heights are explicit adaptation choices.

Expected structure: `.site-header` contains `.brand-block`, `.primary-nav`, and `.utility-nav`. A separate `.menu-button` controls an implemented mobile navigation region. `.page-main` contains `.feature`, `.news-row`, `.project-section`, `.about-panel`, and `.site-footer`. Each `.project-card` is one anchor. The feature uses one `.feature-link` containing its image, copy, and non-interactive CTA span.

Supply authorized logo and photographic assets through image elements. No asset URLs are assumed here. The opening overlay and unverified feature rotation are intentionally outside this scaffold.

```css
:root {
  /* Measured colors */
  --color-white: #ffffff;
  --color-ink: #222222;
  --color-link: #111111;
  --color-accent: #f5a70f;
  --color-on-accent: #ffffff;

  /* Screenshot estimates */
  --color-project-ground: #f4f2ef;
  --color-opening: #fafafa;

  /* Measured font declarations; provide font assets separately */
  --font-display: 'Zen Kaku Gothic New', sans-serif;
  --font-body: '中ゴシックBBB', '游ゴシック体', '游ゴシック',
    'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic Pro',
    'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --tracking-body: 0.04em;
  --tracking-display: 0.07em;

  /* Mobile defaults */
  --text-body: 14px;
  --text-feature: 26px; /* Screenshot estimate */
  --text-card-lead: 22px; /* Screenshot estimate */
  --text-about: 26px;
  --text-about-body: 14px;
  --rail-width: 0px;
  --outer-gutter: 20px;
  --card-inset: 25px;
  --grid-gap: 20px;
  --radius-card: 15px;
  --radius-feature: 20px; /* Screenshot estimate */
  --radius-pill: 60px;
  --motion-link: 200ms ease-in-out;
  --motion-card: 300ms ease-in-out;
}

* {
  box-sizing: border-box;
}

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

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.site-header {
  position: relative;
  height: 170px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

.brand-block {
  width: 124px;
  margin: 0;
  padding: 30px;
  border-radius: 10px;
  background: var(--color-white);
}

.brand-block img {
  width: 64px;
  height: auto;
}

.primary-nav,
.utility-nav {
  display: none;
}

/* Recommended target size; menu behavior needs implementation. */
.menu-button {
  position: fixed;
  z-index: 20;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.menu-lines {
  display: grid;
  gap: 6px;
  width: 24px;
}

.menu-lines span {
  display: block;
  height: 3px;
  background: currentColor;
}

.page-main {
  min-width: 0;
}

.feature {
  position: relative;
  height: calc(100vh - 190px);
  height: calc(100svh - 190px);
  min-height: 480px; /* Recommended short-screen safeguard */
  margin-inline: var(--outer-gutter);
}

.feature-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-feature);
  color: var(--color-white);
  text-decoration: none;
  isolation: isolate;
}

.feature-photo,
.about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}

/* Recommended text support; the source gradient was not measured. */
.feature-link::after,
.about-panel::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgb(0 0 0 / 36%) 100%
  );
}

.feature-copy {
  position: absolute;
  z-index: 1;
  left: 25px;
  right: 80px;
  bottom: 25px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

.feature-title {
  margin: 0;
  font-size: var(--text-feature);
  line-height: 1.5;
}

.feature-project {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
}

.feature-cta {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 6px;
  border-radius: 30px;
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 14px;
  letter-spacing: 0.07em;
  text-align: center;
}

.news-row {
  display: grid;
  gap: 10px;
  margin: 40px 30px 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 21px;
  letter-spacing: var(--tracking-display);
}

.news-row time {
  font-size: 12px; /* Recommended; date style was not sampled */
  line-height: 16px;
}

.news-row a {
  padding-right: 18px;
  text-decoration: none;
}

.project-section {
  margin-top: 30px;
  padding: 40px 20px 20px;
  background: var(--color-project-ground);
}

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-white);
  text-decoration: none;
  transition: color var(--motion-card);
}

.project-card__media {
  width: 100%;
  aspect-ratio: 4 / 3; /* Approximation from the visible card */
  object-fit: cover;
  object-position: var(--photo-position, 50% 50%);
}

.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--card-inset);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

.project-card__title {
  margin: 0;
  font-size: var(--text-card-lead);
  line-height: 1.5;
}

.project-card__description {
  margin: 12px 0 0;
  font-size: var(--text-body);
  line-height: 1.5;
}

.project-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  margin-top: auto;
  padding-top: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38.4px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  text-align: center;
  text-decoration: none;
}

.regional-mark {
  width: 50px; /* Screenshot estimate */
  height: 60px;
  object-fit: contain;
}

.project-index {
  display: none;
}

.about-panel {
  position: relative;
  padding: 120px 25px 25px;
  color: var(--color-white);
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
}

.about-copy,
.about-panel > .pill {
  position: relative;
  z-index: 1;
}

.about-copy h2 {
  margin: 0;
  font-size: var(--text-about);
  line-height: 1.5;
}

.about-copy p {
  margin: 10px 0 0;
  font-size: var(--text-about-body);
  line-height: 1.5;
}

.about-panel > .pill {
  width: 100%;
  margin-top: 20px;
}

.site-footer {
  min-height: 99px;
  padding: 20px 16px;
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 24px;
  letter-spacing: 0.84px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--color-link);
  text-underline-offset: 2px;
}

/* Recommended accessibility variant. */
.contrast-safe {
  --color-on-accent: #222222;
}

:where(a, button):focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (min-width: 70rem) {
  :root {
    --rail-width: 340px;
    --text-body: 18px;
    --text-feature: 40px; /* Recommended desktop child size */
    --text-card-lead: 24px; /* Recommended desktop child size */
    --text-about: 40px;
    --text-about-body: 24px;
    --grid-gap: 50px;
  }

  .site-header {
    position: fixed;
    top: 10px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--rail-width);
    height: 100svh;
    padding-inline: 76px;
  }

  .brand-block {
    width: 188px;
    padding: 0 10px;
  }

  .brand-block img {
    width: 168px;
  }

  .primary-nav {
    display: grid;
    margin-top: 40px;
  }

  .primary-nav a {
    display: block;
    padding: 20px 0 12px 40px;
    font-size: 17px;
    line-height: 17px;
    letter-spacing: 1.26px;
    text-decoration: none;
  }

  .utility-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1.26px;
  }

  .utility-nav a {
    text-decoration: none;
  }

  .menu-button {
    display: none;
  }

  .page-main {
    margin-left: var(--rail-width);
    margin-right: 50px;
    padding-top: 50px;
  }

  .feature {
    height: calc(100vh - 100px);
    height: calc(100svh - 100px);
    min-height: 560px;
    margin: 0;
  }

  .feature-copy {
    left: 50px;
    right: 220px;
    bottom: 50px;
  }

  .feature-project {
    margin-top: 23px; /* Adaptation matching the first group height */
    font-size: 18px;
    line-height: 27px;
  }

  .feature-cta {
    right: 50px;
    bottom: 50px;
    width: auto;
    min-width: 149.6px;
    height: 51.2px;
    padding: 14px 30px;
    border-radius: 60px;
    font-size: 16px;
    line-height: 19.2px;
  }

  .news-row {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    margin: 70px 50px 0;
    line-height: 27px;
  }

  .news-row a {
    padding-right: 24px;
  }

  .project-section {
    margin-top: 40px;
    padding: 80px 50px;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-card__footer {
    padding-top: 50px;
  }

  .project-index {
    display: block;
    margin-top: 24px;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    text-align: right;
  }

  .about-panel {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    min-height: 600px; /* Recommended; section height not measured */
    padding: 50px;
  }

  .about-copy {
    max-width: 60%;
  }

  .about-copy p {
    margin-top: 14px;
  }

  .about-panel > .pill {
    flex-shrink: 0;
    width: auto;
    min-height: 51.2px;
    margin: 0 0 0 auto;
    padding: 14px 30px;
    font-size: 16px;
  }

  .site-footer {
    min-height: 121px;
    padding: 50px 0;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1.26px;
    text-align: right;
  }
}

/* Hover endpoint is a recommendation; only source timing is measured. */
@media (hover: hover) {
  .primary-nav a,
  .utility-nav a,
  .news-row a {
    transition: opacity var(--motion-link);
  }

  .primary-nav a:hover,
  .utility-nav a:hover,
  .news-row a:hover {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .primary-nav a,
  .utility-nav a,
  .news-row a {
    transition: none;
  }
}
```

The CSS intentionally leaves card heights dependent on actual copy and images. Do not add fixed heights merely to reproduce one measured content sample. The main feature and organization headline should include deliberate line breaks only where the editorial copy requires them.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. These are adaptation aliases, not evidence that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-road-white: var(--color-white);
  --color-road-ink: var(--color-ink);
  --color-road-accent: var(--color-accent);
  --color-road-on-accent: var(--color-on-accent);
  --color-road-ground: var(--color-project-ground);

  --font-road-display: var(--font-display);
  --font-road-body: var(--font-body);

  --text-road-body: var(--text-body);
  --text-road-feature: var(--text-feature);
  --text-road-card: var(--text-card-lead);
  --text-road-about: var(--text-about);

  --spacing-road-gutter: var(--outer-gutter);
  --spacing-road-card-inset: var(--card-inset);
  --spacing-road-grid-gap: var(--grid-gap);

  --radius-road-card: var(--radius-card);
  --radius-road-feature: var(--radius-feature);
  --radius-road-pill: var(--radius-pill);
}
```

## Sources & Evidence

- **Original and final page:** [https://www.open-road.jp/](https://www.open-road.jp/). The supplied browser record reports HTTP 200 and no URL change.
- **Capture timestamp:** October 5, 2026, 16:21:22.781 UTC; October 6, 2026, 01:21:22.781 JST.
- **Desktop evidence:** 1440 × 1000 viewport; reported document height 4016px. Supplied screenshots show a brand lockup and a blank pale state. Rendered DOM provides navigation, feature, card, organization, and footer geometry and selected computed styles.
- **Mobile evidence:** 390 × 844 viewport; reported document height 4520px. Original-page screenshots visibly establish the header and first feature, plus the lower railway card, organization photograph, and footer.
- **Measurements:** supplied element rectangles, colors, font declarations, font sizes, weights, line heights, tracking, padding, radii, link destinations, and transition declarations. Full stylesheets and source custom-property definitions were not supplied.
- **Interaction scope:** passive rendering and scrolling during capture. No menu expansion, article navigation, hover endpoint, manual slide change, or keyboard interaction was established.
- **Inspection limitations:** capture readiness used finite time limits; delayed content and unexercised behavior remain unverified. SharedWorkers and service workers were disabled during inspection. No additional browsing or file inspection was performed for this reference.

This document describes the current homepage evidence at the original URL. Desktop geometry is distinguished from desktop visual confirmation, screenshot estimates are labeled, and the CSS is a reusable adaptation rather than a reconstruction of unavailable source code.