# RENEUTO LAB — Style Reference

> An illustrated neighborhood house, drawn in fine black lines on cream paper and punctuated with green.

**Website:** [lab.reneuto.com](https://lab.reneuto.com/)
**Original URL:** https://lab.reneuto.com/
**Final URL:** https://lab.reneuto.com/ — HTTP 200
**Theme:** a light cream canvas with green accents and a large green contact section; no theme selector was evidenced.
**Inspected:** supplied capture batch dated September 23, 2026, 21:26:14.574 UTC / September 24, 2026, 06:26:14.574 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current homepage, including its opening composition, information links, venue introduction, illustrated uses, media controls, access information, contact section, and footer. Visual coverage consists of three desktop captures and two mobile captures; additional sections are documented from supplied rendered DOM measurements. Linked pages and open control states were not inspected.

RENEUTO LAB presents a community and event space in a renovated 1967 house in Okayama. Its design makes architecture feel approachable: an asymmetrical roof, people on a veranda, a walking parent and child, plants, and a cat establish the setting before longer explanations appear. Fine linework and restrained typography keep the scene quiet. Green clothing, architectural details, circular controls, and small labels connect the illustration to the interface.

This is a facility homepage with news, events, practical information, and several ways to use the space. Its strongest compositional feature is the desktop opening: two columns of vertical Japanese copy at left, a large uncropped house illustration in the middle, and a narrow editorial notice at right. Mobile rearranges those elements into a centered identity, horizontal copy, illustration, and compact notice. The contact section creates a decisive final change of scale and color through a full-width green field.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed styles. These measurements describe the captured state, not every possible browser state.
- **Estimated** means a visual approximation from the current original-page screenshots. Illustration bounds describe visible artwork, not verified image-element dimensions.
- **Derived** means simple relationships calculated from supplied measurements, such as spacing between adjacent elements.
- **Recommended** means an implementation choice for a new project. The CSS below is an adaptation, not recovered production source.
- All token names are descriptive aliases unless explicitly identified as source custom properties.
- Desktop and mobile were both captured. Intermediate breakpoints, hover states, menu opening, button outcomes, and carousel playback were not tested.
- Some sampled elements have transparent backgrounds or transformed bounding rectangles. Read those values together with visible screenshots; a transparent section can still appear green through an unsampled inner layer.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Cream Paper | `#fcf5e9` | `--paper` | Measured on body, main, desktop header, and footer; the dominant page surface |
| Lab Green | `#13913a` | `--green` | Measured on buttons, mobile menu, media controls, and green captions; the contact field visibly uses this brand-green appearance |
| Near-black Ink | `#0d0d0d` | `--ink` | Measured on navigation text, headings, dates, descriptions, and footer text |
| White | `#ffffff` | `--white` | Measured on the desktop featured-story surface and reversed contact text |
| Utility Charcoal | `#333333` | `--utility-ink` | Measured on the home icon and numerous container elements; child text frequently overrides it with Near-black Ink |
| Muted Credit Gray | `#8d8d8d` | `--muted` | Measured on the small `Designed by` label |
| Notice Gray | Approximately `#d7d7d7` | `--notice-paper` | Estimated from the narrow subsidy-notice strip at the bottom |

The illustration contains green fills that appear slightly different from some interface surfaces. Its embedded color values were not supplied; do not claim that every artwork pixel is `#13913a`.

### Color Behavior

Cream is an uninterrupted field through the opening and illustrated uses. Most content does not sit on independent white cards. The narrow featured notice is a notable white exception, while the contact section reverses the hierarchy with white text over a large green surface.

The access area appears lighter than the surrounding cream in the desktop bottom capture. Its sampled section background is transparent, so an exact backing color cannot be assigned from the available evidence.

The introductory heading and paragraph have measured white text, but their final backing surface is not shown in the supplied screenshots. Do not reproduce white text on cream merely because the sampled ancestor reports a cream background.

The extracted `--g-color-*` variables are transparent in this state. Their presence in generated transitions is not evidence of a visible gradient system.

## Tokens — Typography

### Main Interface — Zen Kaku Gothic New

- **Measured family:** `"Zen Kaku Gothic New"`.
- **Source custom property:** `--s-font-09886176`.
- **Weights:** `300` for major section headings, `400` for navigation and most content, and `500` for the small `PICK UP` label and desktop featured date.
- **Character:** open, light, and spacious, with tracking that makes even compact Japanese labels feel unhurried.
- **Coverage:** the sampled English section headings also use this family. Do not automatically assign a separate Latin display font to `INFORMATION`, `ACCESS`, or `CONTACT`.

### Utility Text — Noto Sans JP

- **Measured family:** `"Noto Sans JP"`.
- **Source custom property:** `--s-font-7db1e06c`.
- **Verified uses:** `Page to Top` and the small subsidy notice.
- **Weights:** `300` for the return-to-top label and `400` for the notice.

A Raleway custom property exists, but none of the supplied sampled text elements establishes a visible Raleway role. The HTML/body fallback of Times also does not describe the typography of the actual page components.

### Wordmark and Hero Copy

The wordmark is custom geometric artwork: very thin strokes, broad letterforms, and three stacked lines, with the final line in green. Preserve its proportions as an asset. No font name for the wordmark is established.

The opening Japanese slogan is visible in the screenshots but lacks an independently sampled text style. Its apparent size is approximately 48–52px on desktop and 20–22px on mobile. Its exact family and whether each rendered version is live text or artwork remain unverified.

### Type Scale

Unless otherwise noted, these are measured Zen Kaku Gothic New values. Tracking is expressed in `em` where the supplied pixel values convert directly.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Primary navigation | `17 / 23.8px` | Not visible in closed mobile state | 400 | `0.05em` |
| Information heading | `40 / 56px` | `32 / 44.8px` | 300 | `0.1em` |
| Venue introduction heading | `40 / 56px` | `32 / 44.8px` | 300 | `-0.02em` |
| Uses heading | `40 / 56px` | `28 / 39.2px` | 300 | `-0.04em` |
| Access heading | `40 / 56px` | `28 / 39.2px` | 300 | `0.05em` |
| Contact heading | `40 / 56px` | `24 / 33.6px` | 300 | `0.05em` |
| English supporting captions | `14 / 19.6px` | Same | 400 | `0.1em` |
| Use-category title | `24 / 33.6px` | Same | 400 | `0.1em` |
| Use-category paragraph | `16 / 22.4px` | `16 / 24px` | 400 | Usually `0.15em`; one sample uses `0.14em` |
| Venue introduction paragraph | `20 / 36px` | `16 / 28.8px` | 400 | `0.1em` |
| Featured-story title | `20 / 28px`, vertical | `16 / 22.4px`, horizontal | 400 | `0.05em` |
| Featured-story date | `13 / 20.8px` | `14 / 22.4px` | 500 desktop; 400 mobile | `0.1em` |
| `PICK UP` label | `13 / 18.2px` | `10 / 14px` | 500 | `0.04em` |
| News category / news date | `14 / 19.6px`; `13 / 18.2px` | Same | 400 | Normal category; `0.1em` date |
| Access address | `16 / 28px` | Same | 400 | `0.05em` |
| Contact paragraph | `16 / 32px` | Same | 400 | `0.1em` |
| Telephone number | `32 / 44.8px` | Same | 400 | `0.2em` |
| Opening hours | `13 / 18.2px` | Same | 400 | `0.1em` |
| Contact-form label | `24 / 33.6px` | `20 / 28px` | 400 | `0.05em` |
| Footer identity and legal labels | `14 / 19.6px` | `13 / 18.2px` | 400 | `0.05em` |
| `Page to Top`, Noto Sans JP | `16 / 32px` | `14 / 28px` | 300 | Normal |
| Subsidy notice, Noto Sans JP | `10 / 14px` | Same | 400 | Normal |

The mobile hierarchy is selective: the telephone number and use-category titles retain their desktop size, while the contact heading becomes substantially smaller. A single proportional scale reduction would miss this behavior.

## Tokens — Spacing & Shapes

There is no demonstrated universal spacing unit. The page combines small editorial gaps with large illustration and section clearances. A practical reusable scale is **4, 8, 10, 16, 20, 24, 30, 40, 60, 80, 100, and 150px**; this is a recommendation assembled around observed values.

### Spacing Scale

| Relationship | Value | Evidence |
| --- | --- | --- |
| Gap between desktop text navigation links | `40px` | Derived from adjacent link rectangles |
| Gap from home icon to first navigation label | `44px` | Derived |
| Major heading to English caption | `10px` | Derived in introduction and uses sections |
| Use title to paragraph | `16px` | Derived on both viewports |
| Mobile featured date to title | `4px` | Derived |
| Gap between information-list buttons | `20px` | Derived on both viewports |
| Gap between media-control circles | `24px` | Derived from 40px circles at 64px intervals |
| Information section to introduction section | `150px` | Derived from desktop section bounds |
| Desktop introduction section top padding | `100px` | Measured |
| Contact heading top inset | Approximately `61px` | Derived from section and heading rectangles on both viewports |
| Contact-link vertical padding | `30px` per side | Measured |

### Border Radius

| Element | Value or appearance | Status |
| --- | --- | --- |
| Desktop featured notice | `0` | Measured square corners |
| Main content regions | Predominantly square and unboxed | Observed |
| Green list/detail buttons | `16px` | Measured |
| News category container | `20.5px` | Measured; a short capsule |
| Media-control buttons | `50%` | Measured on 40 × 40px buttons |
| Mobile menu button | `48px` on a 57 × 57px box | Measured; renders circular |
| Featured badge and contact icon rings | Circular | Observed; dimensions estimated below |

### Layout Measurements

| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Document height | `7799.5px` | `8907.0px` | Measured captured state; not a target height |
| Desktop header | `1440 × 93px` | Replaced by menu control | Measured and visually observed |
| Header wordmark link | `100 × 66.0px`, x24, y11 | Not present in a header strip | Measured |
| Mobile menu | — | `57 × 57px`, x313, y30; right inset 20px | Measured |
| Hero content section | `1280 × 900px`, x80, y99 | `342 × 844px`, x24, y51 | Measured section rectangles |
| Visible hero artwork | Approximately `785 × 525px` | Approximately `342 × 230px` | Screenshot estimate |
| Mobile hero wordmark | — | Approximately `150 × 100px`, near y189 | Screenshot estimate |
| Desktop featured-story anchor | `130 × 438px`, x1179, y355 | Replaced by compact text link | Measured; visible border footprint is approximately 132 × 440px |
| Featured badge | Approximately `80px` diameter | Approximately `60px` diameter | Screenshot estimate |
| Information section | `1240px` wide | `390px` wide | Measured |
| News text column | Approximately `365px` | Approximately `246px` | Measured title-link bounds |
| Uses-section horizontal rules | Approximately `1232px` wide | Not visually captured | Screenshot estimate |
| Use paragraph width | `370px` | Mostly `307.8px`; first is `258.5px`, last `342px` | Measured |
| Contact introduction | `700px` wide | `310.4px` wide | Measured |
| Contact options | Two `400 × 149px` links | `291px` wide; heights about 217px and 170px | Measured |
| Contact section | `469px` high | `700.8px` high | Measured |
| Contact icon rings | Approximately `89px` diameter | Approximately `50px` diameter | Screenshot estimate |

Fine borders and dividers appear approximately 1px thick. The artwork generally uses a visible 1–2px line at desktop capture scale. These are visual estimates, not recovered SVG stroke declarations.

## Components

### Desktop Header

**Role:** persistent identity and navigation across a long facility homepage.

A cream strip spans the viewport with a fine lower rule. The wordmark sits at the upper left, the navigation occupies the central band, and a small Instagram icon sits near the right edge. The measured header uses flex layout; a grid implementation can reproduce the composition without claiming to reproduce its source.

The central navigation contains a 24px Material Icons home glyph, the venue introduction anchor, news, events, and contact. Japanese links use 17px regular text rather than bold navigation labels. The Instagram link's measured content box is approximately 15.4 × 18px, ending 40px from the right edge.

The header remains at the same top position in the desktop opening, middle, and bottom captures. This establishes persistent behavior consistent with fixed or sticky positioning; the precise positioning declaration was not included.

### Mobile Menu Control

**Role:** compact access to navigation while preserving open space around the identity.

The full desktop strip disappears. A 57px green circle remains 30px from the top and 20px from the right. Two thin white horizontal strokes identify the closed menu state. The control remains visible in the bottom capture, where its green fill blends into the green contact field.

No open menu was supplied. Its panel size, contents, transition, focus behavior, and dismissal mechanism are unverified. Do not invent a full-screen overlay as an observed component.

### Illustrated Hero

**Role:** introduce the place through a domestic scene and a short statement.

On desktop, the slogan `ニュートラルな暮らしの集会所` is arranged vertically, with the first phrase in the right-hand column and the second in the left. The house dominates the center, while the featured notice occupies a narrow separate column on the right. Broad empty cream space above and around the artwork prevents the composition from becoming a dense banner.

The illustration includes the asymmetrical roof, veranda, occupants, a cat, planted details, and a foreground adult and child. Its curved ground line integrates these figures into one scene. Keep the whole drawing visible; it is not designed to be cropped like a photographic hero background.

Mobile changes the sequence to wordmark, horizontal two-line slogan, house illustration, and featured notice. The wordmark becomes much larger than the desktop header mark. In the current phone capture it begins near y189, the house near y409, and the featured link near y678. These coordinates describe this viewport, not required fixed positions on every phone.

### Featured Notice

**Role:** highlight one timely article without overpowering the illustrated identity.

Desktop anatomy:

1. A green circular `PICK UP` badge above the notice.
2. A tall, square-cornered white story link with a thin dark border.
3. A small exterior photograph at the top, approximately 130 × 120px in the screenshot.
4. A vertically arranged date on the right side of the text area.
5. A larger vertical Japanese title occupying the remaining columns.

The inspected article is dated `2026.07.30` and links to `/blog/Dd07Xzhc`. This is replaceable editorial content, not a permanent heading.

On mobile, the photograph, white panel, and vertical text arrangement disappear. An outlined green circle sits beside a transparent text link. The date appears above a 16px title, which wraps to two lines within a measured 266px text region. The circular label becomes green text on cream instead of white text on green.

### Information Section and Article Items

**Role:** expose current notices and events immediately after the opening.

A centered `INFORMATION` heading is followed by two compact green capsule links: `お知らせ一覧` and `イベント一覧`, each with a right-arrow icon. The measured buttons are approximately 154px wide, with 16px corner radii and asymmetric padding of 20px left and 8px right.

Three article entries follow. Each contains an image link, a metadata row with category and date, and a separate title link. Category containers are approximately 106 × 22px. The text and image regions have no measured corner rounding.

Desktop entries occupy three positions across the content area. On mobile, their x coordinates continue beyond the viewport: the second image starts around x298 and the third around x585. This is evidence of a horizontal strip, rather than three stacked articles. Swipe handling, snapping, and arrow controls for this strip were not tested.

Some recorded image rectangles exceed their apparent column spacing. Those bounds may include transforms or other presentation effects; do not treat their full reported width as an untransformed grid track.

### Venue Introduction and Architectural Illustration

**Role:** explain the renovated house and establish its community purpose.

The introduction has a large Japanese/Latin heading, a small English caption, and a centered paragraph. The paragraph is 700px wide at 20px/36px on desktop, narrowing to approximately 349px at 16px/28.8px on mobile.

The sampled introduction text is white, but the supplied screenshots do not show its backing surface. Preserve the measured type hierarchy while treating the exact surface and reveal state as unresolved.

A large architectural cutaway is partly visible at the top of the desktop middle capture. Its veranda, entrance steps, green vegetation, and green room labels continue the opening illustration's visual language. The complete diagram and any interactive hotspots were not supplied.

### Uses Heading and Illustrated Use Blocks

**Role:** turn the venue's possibilities into recognizable everyday situations.

The heading `どんな使い方ができるの？` sits between long dotted rules, with the smaller green caption `THE WAY TO USE` below it. This creates a broad editorial divider before the next set of illustrations.

Six uses appear in the rendered content: spatial experience, overnight experience, local goods and furniture sales, a children's dining initiative, collaborative seminars, and classes or other activities.

Desktop arranges them in two columns over three rows. The first pair is visible: people sharing drinks on the left and a sleeping figure beneath a green blanket on the right. A thin vertical rule divides the columns. Titles are centered below the artwork, while the descriptive paragraphs are left aligned within narrow centered text columns.

The measured desktop title rows are separated by 500px. Mobile places all six blocks in a single column, with title positions generally separated by approximately 500–545px. The 24px titles retain their desktop size; the paragraphs gain a slightly taller line height.

Do not place these illustrations inside generic rounded cards. Their unframed cream backgrounds and the space between them are structural parts of the design.

### Detail Buttons

**Role:** offer supplementary facility information within selected use blocks.

The overnight block includes `ご利用について`; the final block includes `施設利用のご案内`. Both are actual button elements in the supplied DOM, with green fills, white 16px labels, 16px radii, and approximately 30–32px heights.

Their outcomes were not exercised. The evidence does not establish whether they open dialogs, expand content, or trigger another interface. Preserve them as distinct controls and obtain a behavior specification before implementing their destination states.

### Schedule and Media Controls

**Role:** provide practical scheduling information and navigation through additional media.

The mobile DOM includes `リニュートラボ予定表` at 24px/36px, followed later by a 12px instruction stating that tapping a schedule reveals details. The calendar body and its actual interaction were not captured. Its absence from the desktop text extraction does not prove that desktop has no schedule.

A separate control group before `ACCESS` contains previous, pause, and next buttons. Each is a 40px green circle, with 24px between circles. The same dimensions appear on both viewports.

The pause glyph suggests a playback-capable media component. Actual autoplay, slide contents, timing, swipe support, and pause behavior remain unverified.

### Access Section

**Role:** make the physical location understandable with the same visual language as the rest of the page.

The desktop bottom capture shows a custom illustrated map on the left and address, map link, parking information, and nearby bus-stop information on the right. Roads are black lines; landmarks use small text; the destination is highlighted in green and includes the wordmark. This is a designed map graphic, not a verified embedded interactive map.

Address text uses 16px/28px with modest tracking. The `Google Map` link includes an external-link glyph and has an observed outbound destination. The linked map was not opened.

On mobile, the address begins in a 291px-wide region at x49.5, below the heading and the intervening map area. The geometry supports a stacked arrangement; the mobile map itself is outside the supplied screenshots.

### Contact Section

**Role:** give questions, reservations, and event inquiries a clear final destination.

A full-width green field has fine dark boundaries and white typography. Its heading is centered, followed by a left-aligned explanatory paragraph within a centered column.

Desktop places two 400px-wide links side by side. The telephone link contains a circular outline phone icon, a widely tracked 32px number, and small opening-hours text. The form link combines a circular outline envelope with a 24px label. A thin white vertical rule separates the two options. Neither option uses a raised button surface.

On mobile, each option becomes a centered vertical stack. The phone icon sits above the number, with the opening hours below. The envelope and form label follow as a second block. The dividing rule disappears, the icon rings shrink to approximately 50px, and the form label becomes 20px. The phone number remains 32px.

The DOM verifies a `tel:` link and a link to `/contact`. It does not verify the destination form's fields or submission process.

### Footer

**Role:** close the page with compact utility links and provenance labels.

Desktop distributes copyright and the small `Designed by` mark at left, `Page to Top` in the middle, and operator/privacy links at right. The design-credit label is muted gray; the return-to-top label is green. A narrow gray subsidy-notice strip follows.

Mobile gives `Page to Top` its own full-width row with a lower rule. Legal links appear on the next line, with copyright and the design-credit label below. The subsidy notice is centered at the bottom.

The observed return-to-top link points to the homepage URL. Smooth scrolling or an intercepted click behavior was not demonstrated.

## Tokens — Motion & Interaction

The supplied evidence establishes transition declarations, not complete animated sequences. Sampled elements report `animation: none`; this does not exclude JavaScript-driven motion, transitions, or animation inside unmeasured assets.

| Element or treatment | Measured declaration | What is established |
| --- | --- | --- |
| Body background | `0.5s cubic-bezier(0.4, 0.4, 0, 1)` | A background transition is declared; its trigger is unknown |
| Header, links, and many text elements | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | Shared transition timing; hover endpoints were not captured |
| Hero section and article image/title links | `0.8s cubic-bezier(0, 0.7, 0.22, 1)` | Slower easing is declared; exact properties and start states are unresolved |
| Desktop introduction wrapper | `1.2s cubic-bezier(0.4, 0.4, 0, 1)` with `0.3s` delay | A delayed transition exists; no complete reveal sequence was supplied |
| Desktop inner access section | `1s` with `0.5s` delay | Transition duration and delay are known |
| Mobile access and contact sections | `0.8s cubic-bezier(0, 0.7, 0.22, 1)` | Declared mobile timing |
| Previous/pause/next buttons | `0.4s cubic-bezier(0.4, 0.4, 0, 1)` | Button transitions exist; playback timing is unknown |

Verified navigation destinations include the introduction anchor `/#reneutorab`, information and event indexes, individual articles, contact, privacy, telephone, Instagram, and an external map. These are observed link targets, not tested destination experiences.

**Recommended adaptation:** use the measured 300ms timing for restrained color feedback and the 800ms easing only for optional section reveals. Keep content visible without animation. Do not add parallax, drawing-on-scroll line effects, floating characters, or a continuously moving hero without a separate creative decision.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Main canvas | Solid cream | Connects the illustrations and content into one continuous page |
| Desktop navigation | Cream with a fine lower rule | Persistent navigation without a separate elevated panel |
| Featured story | White, square corners, thin dark border | Small editorial interruption inside the cream opening |
| Illustrated use blocks | Cream, unboxed, thin dividing rules | Organizes activities without card elevation |
| Compact actions | Green capsules or circles | Distinguishes controls from descriptive content |
| Contact | Large green field with white text and outlined icons | Makes inquiry routes prominent at the end |
| Access | Visually very pale; exact backing color unresolved | Supports the map and practical directions |
| Footer notice | Narrow light-gray strip | Separates the small funding notice from navigation |

No general shadow system is visible. Separation comes from whitespace, strokes, dotted rules, and occasional changes of fill.

## Imagery

The dominant imagery is clean architectural and domestic line illustration. Building edges are controlled and straight; people, plants, and animals introduce softer organic shapes. Faces remain minimal. Select areas become solid black or green, while most of the scene retains the page's cream background.

Green is distributed deliberately: garments, a tote bag, slats, plants, furniture details, and a blanket. These accents tie the drawing to controls without filling every object. The large blank areas inside the illustration are as important as the drawn marks.

Photography has a supporting editorial role. The current featured notice shows an exterior view of the actual property. The rendered information entries also contain image backgrounds, but their full images were not supplied as standalone assets.

### Observed Asset References

| Asset role | Current-page evidence | Reuse guidance |
| --- | --- | --- |
| Stacked geometric wordmark | Desktop header, mobile opening, illustrated map | Use an authorized asset with its original aspect ratio |
| House and foreground family | Desktop and mobile opening captures | Keep the complete scene and curved ground line visible |
| Architectural cutaway | Upper portion of desktop middle capture | Preserve room labels and fine line detail; full composition is unverified |
| Spatial-experience illustration | First use block in desktop middle capture | Retain the people, drinks, cat, and green architectural accent |
| Overnight illustration | Second use block in desktop middle capture | Retain the moon window, sleeping figure, shelving, and green blanket |
| Exterior photograph | Current desktop featured notice | Crop only within the small editorial image area |
| Illustrated access map | Desktop bottom capture | Preserve readable landmarks and the green destination marker |
| Phone and envelope | Desktop and mobile contact captures | Thin outline symbols within circular rings |

Complete image asset URLs were not available in the supplied evidence. Several background-image URLs were truncated, so no production filenames are reconstructed here. The visual smoothness of the linework does not prove that its delivery format is SVG.

For a new implementation, use SVG or sufficiently high-resolution transparent artwork where available. Preserve a smooth rendering mode; pixelated image scaling would change this site's character. Avoid white image rectangles around illustrations intended to sit on cream.

## Layout & Responsive Behavior

The page uses normal vertical document progression, with persistent navigation layered above it. The measured document is approximately 7800px tall on desktop and 8907px on mobile. Those heights reflect current content and layout, not a prescribed canvas size.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Navigation | Full-width 93px header, small wordmark, horizontal links | Floating 57px circular menu control |
| Hero identity | Small logo in header; large vertical slogan at left | Large centered logo; small horizontal two-line slogan |
| Hero artwork | Broad central illustration | Full available 342px content width |
| Featured notice | Vertical white photo panel with filled badge | Horizontal text notice with outlined badge; photo omitted |
| News | Three article positions across the page | Horizontal sequence extending beyond the viewport |
| Uses | Two columns, three rows | Six sequential blocks in one column |
| Category typography | 24px titles and 16px descriptions | Titles stay 24px; descriptions stay 16px with more leading |
| Access | Map and address side by side | Geometry supports map above address |
| Contact | Side-by-side options with vertical divider | Stacked icon-over-text options without divider |
| Footer | Identity, return link, and legal links share a row | Return link gets its own row; remaining content stacks |

Only the 1440px and 390px widths are verified. A `max-width: 1140px` media-query fragment appears in the extracted page text for line-break handling, but it does not establish the navigation-collapse breakpoint or the entire responsive system.

**Recommended implementation:** choose a breakpoint around 960px after testing content fit, keep 24px phone-side gutters for broad content, and allow narrower reading columns inside those gutters. Preserve native horizontal scrolling for mobile news if implementing that observed arrangement. Do not make the whole document horizontally scroll.

## Do’s and Don’ts

### Do

- Keep the measured cream `#fcf5e9`, interface green `#13913a`, and near-black text `#0d0d0d` as the core palette.
- Preserve the relationship between thin typography, fine architectural linework, and broad empty space.
- Use the geometric wordmark as artwork rather than approximating it with a standard font.
- Keep the house illustration complete and prominent on both viewports.
- Recompose the hero for mobile, including the horizontal slogan and simplified featured notice.
- Retain 24px use-category titles and the generously tracked telephone number on mobile.
- Use dotted section rules, thin column dividers, and square editorial image edges.
- Reserve circles for small markers, menu controls, media controls, and contact-icon frames.
- Let the contact section become a large green surface with restrained white details.
- Treat editorial dates and article titles as current content that can change independently of the design.

### Don’t

- Don’t turn every content block into a white rounded card.
- Don’t replace the house scene with an unrelated stock lifestyle photograph.
- Don’t crop the foreground figures or roof to fill a generic hero rectangle.
- Don’t make all headings bold or substitute a heavy geometric sans-serif throughout.
- Don’t assume Raleway is the English heading font merely because its variable is present.
- Don’t shrink the desktop vertical notice into an unreadable mobile panel.
- Don’t stack the mobile news articles vertically and describe that as the observed behavior.
- Don’t introduce gradients, glass blur, soft shadows, or extra accent colors into the core system.
- Don’t copy transformed image bounds directly into grid-track sizes.
- Don’t invent menu overlays, modal contents, autoplay intervals, or illustrated hotspots as verified features.

## Recommended Implementation Additions

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

- Give icon-only menu, home, social, and media controls accessible names. Ensure the menu exposes its expanded state and returns focus when closed.
- Use one semantic heading for each section; an English supporting caption can be a paragraph rather than a second heading at the same level.
- Keep a text equivalent of the hero slogan even if its visual treatment is an image.
- Provide concise alternatives for meaningful illustrations and a text address alongside the map. Decorative illustration details can use empty alternatives.
- Check the contrast of small white text on green and green text on cream. Keep any accessible color adjustment separate from the recorded source tokens.
- Increase practical touch areas around the approximately 30px pills and 40px media controls without necessarily enlarging their visible shapes.
- Make all mobile news entries reachable by keyboard and touch. Provide an accessible label for the scrolling region and avoid trapping vertical page scrolling.
- Respect reduced-motion preferences. If a media component autoplays, implement a real pause control; CSS alone cannot stop JavaScript playback.
- Add scroll clearance for the persistent header when following the introduction anchor.
- Let text and sections grow at larger text settings. Avoid fixing the contact section or use blocks to captured heights.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#fcf5e9`.
- Main text and structural linework: `#0d0d0d`.
- Interface accent: `#13913a`.
- Featured-story desktop panel: `#ffffff` with a fine dark border.
- Contact section: green with white text and thin outline icons.
- Small credit label: `#8d8d8d`.
- Structural separation: whitespace, dotted rules, and fine solid lines.

### Overall Prompt

“Create a Japanese community-facility homepage inspired by the current RENEUTO LAB page. Use cream `#fcf5e9`, green `#13913a`, near-black `#0d0d0d`, and predominantly Zen Kaku Gothic New. Build a spacious opening with vertical Japanese copy on the left, an uncropped fine-line house-and-family illustration in the center, and a narrow white featured-story panel with vertical text on the right. Use a small geometric wordmark in a persistent desktop header. Follow with information entries, an introduction, illustrated use categories separated by fine rules, access information, and a full-width green contact section. On mobile, use a floating circular menu, a larger centered wordmark, horizontal slogan, full-width illustration, compact text-only featured notice, a horizontal news strip, and stacked contact options. Keep the surfaces flat and the typography light.”

### Example Component Prompts

1. **Desktop hero:** “Compose a cream opening with two vertical columns of Japanese copy, an unframed architectural line illustration, and a 132px-wide white editorial notice. Put a green 80px circular marker above the notice. Preserve large areas of empty cream around the artwork.”
2. **Mobile hero:** “At 390px width, place a 57px green menu circle at the top right. Center a roughly 150px-wide stacked wordmark above a short two-line Japanese slogan. Show the complete house illustration within 24px side gutters. Follow it with an outlined green marker beside a horizontal date and article title.”
3. **Illustrated uses:** “Use two open cream columns with a fine vertical divider. Place domestic black-and-green illustrations above centered 24px Japanese titles and narrow left-aligned descriptions. Introduce the group with a light 40px question heading, a green English caption, and dotted horizontal rules. Stack the blocks on phones.”
4. **Featured notice:** “Create a square-cornered vertical white article link with a small property photograph at the top, a vertical date at right, and a vertical Japanese title. On mobile, remove the photo and panel fill, switch the text to horizontal, and change the filled circular marker to a green outline.”
5. **Contact:** “Create a full-width green section with a light centered CONTACT heading, white 16px text at 32px line height, and two large unboxed contact links. Use thin phone and envelope icons inside circular outlines. Set the telephone number at 32px with 0.2em tracking. Stack the options vertically on mobile.”
6. **News strip:** “Build three editorial items with square image regions, compact category/date rows, and linked titles on cream. On mobile retain a horizontal sequence with a partial next item. Use native scrolling as a recommended implementation; do not imply that swipe physics were recovered from the reference.”

## Quick Start

### CSS Custom Properties

This adaptation uses a conventional root font size. Exact palette and sampled typography values are retained where available. Layout interpolation, a 960px breakpoint, image fitting, focus styling, and hover feedback are recommendations. The unseen introduction surface and untested menu/detail states are intentionally not implemented.

Expected structure: `.hero` contains a mobile `.hero-mark`, `.hero-tagline`, `.hero-art`, and `.pickup`. The pickup contains a `.pickup-badge` and a `.pickup-story` link; the link contains `.pickup-photo` and `.pickup-copy` with a `time` and heading. Contact links contain an icon ring and their text group. Supply authorized artwork and actual icons; the class names below are new implementation aliases.

```css
:root {
  /* Measured core palette */
  --paper: #fcf5e9;
  --green: #13913a;
  --ink: #0d0d0d;
  --white: #ffffff;
  --utility-ink: #333333;
  --muted: #8d8d8d;
  --notice-paper: #d7d7d7; /* Screenshot approximation */

  /* Measured font roles; load the fonts separately */
  --font-body: 'Zen Kaku Gothic New', sans-serif;
  --font-utility: 'Noto Sans JP', sans-serif;
  --text-body: 16px;
  --text-section: 40px;
  --text-category: 24px;
  --text-caption: 14px;
  --text-small: 13px;

  /* Reusable layout aliases */
  --content-width: 1240px;
  --hero-width: 1280px;
  --header-height: 93px;
  --page-gutter: 24px;
  --rule: 1px;
  --radius-pill: 16px;
  --space-small: 16px;
  --space-medium: 24px;
  --space-large: 60px;

  /* Measured transition timings, without inferred triggers */
  --ease-ui: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-reveal: cubic-bezier(0, 0.7, 0.22, 1);
  --duration-ui: 300ms;
  --duration-reveal: 800ms;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
[id] { scroll-margin-top: calc(var(--header-height) + 24px); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  align-items: center;
  padding-inline: 24px 40px;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--muted);
}
.site-brand { width: 100px; }
.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.site-nav a {
  text-decoration: none;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.site-social { justify-self: end; }
.mobile-menu { display: none; }
.site-main { padding-top: var(--header-height); }

.hero {
  width: min(var(--hero-width), calc(100% - 48px));
  min-height: calc(100svh - var(--header-height));
  margin-inline: auto;
  padding: 50px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 40px;
}
.hero-mark { display: none; }
.hero-tagline {
  margin: 0;
  height: 400px;
  writing-mode: vertical-rl;
  font-size: 48px; /* Visual approximation */
  font-weight: 300;
  line-height: 1.65;
}
.hero-art { width: 100%; height: auto; }
.pickup { width: 132px; }
.pickup-badge {
  width: 80px;
  height: 80px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.pickup-story {
  display: block;
  min-height: 440px;
  border: 1px solid var(--ink);
  background: var(--white);
  text-decoration: none;
}
.pickup-photo {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.pickup-copy {
  min-height: 318px;
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
}
.pickup-copy time {
  writing-mode: vertical-rl;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.pickup-copy h3 {
  margin: 0;
  max-height: 280px;
  writing-mode: vertical-rl;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.section-shell {
  width: min(var(--content-width), calc(100% - 48px));
  margin-inline: auto;
}
.section-heading { text-align: center; }
.section-title {
  margin: 0;
  font-size: var(--text-section);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.information-title { letter-spacing: 0.1em; }
.about-title { letter-spacing: -0.02em; }
.use-title { letter-spacing: -0.04em; }
.section-caption {
  margin: 10px 0 0;
  color: var(--green);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.use-heading {
  padding: 68px 16px 50px;
  border-block: 1px dotted var(--ink);
}
.section-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 16px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color var(--duration-ui) var(--ease-ui);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
}
.news-card { min-width: 0; padding-inline: 24px; }
.news-image {
  width: 100%;
  aspect-ratio: 4 / 3; /* Recommended editorial crop */
  object-fit: cover;
}
.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.news-category {
  padding-inline: 24px;
  border: 1px solid currentColor;
  border-radius: 20.5px;
  font-size: 14px;
  line-height: 1.4;
}
.news-date { font-size: 13px; letter-spacing: 0.1em; }
.news-title {
  margin: 8px 0 0;
  font-size: 18px; /* Recommended; source title child not sampled */
  font-weight: 400;
  line-height: 1.6;
}

.use-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 84px;
}
.use-card {
  min-width: 0;
  min-height: 500px;
  padding: 0 40px 70px;
  text-align: center;
}
.use-card:nth-child(even) { border-left: 1px solid var(--ink); }
.use-art {
  width: min(370px, 100%);
  height: 250px;
  margin-inline: auto;
  object-fit: contain;
}
.use-card h3 {
  margin: 24px 0 16px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.use-card p {
  max-width: 370px;
  margin: 0 auto 16px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-align: left;
}
.media-controls {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.media-controls button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
}
.access-layout {
  width: min(800px, calc(100% - 48px));
  margin: 40px auto 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 80px;
}
.access-copy {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.contact {
  padding: 60px 24px;
  border: 1px solid var(--ink);
  background: var(--green);
  color: var(--white);
}
.contact .section-title { text-align: center; }
.contact-intro {
  width: min(700px, 100%);
  margin: 30px auto 54px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.1em;
}
.contact-options {
  width: min(800px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-link {
  min-width: 0;
  min-height: 149px;
  padding-block: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-decoration: none;
}
.contact-link + .contact-link { border-left: 1px solid currentColor; }
.contact-icon {
  flex: 0 0 auto;
  width: 89px;
  height: 89px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
}
.contact-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
}
.contact-phone {
  margin: 0;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.contact-hours {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.contact-form-label {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.footer-identity { grid-column: 1; grid-row: 1; }
.footer-top {
  grid-column: 2;
  grid-row: 1;
  color: var(--green);
  font-family: var(--font-utility);
  font-weight: 300;
}
.footer-legal { grid-column: 3; grid-row: 1; justify-self: end; }
.footer-credit { color: var(--muted); }
.footer-notice {
  padding: 8px 20px;
  background: var(--notice-paper);
  font-family: var(--font-utility);
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}

/* Recommended hover feedback; source endpoints were not inspected. */
@media (hover: hover) {
  .pill:hover { background: var(--ink); }
  .site-nav a:hover,
  .pickup-story:hover h3,
  .contact-link:hover .contact-form-label { text-decoration: underline; }
}

/* Recommended breakpoint; only 1440px and 390px were captured. */
@media (max-width: 60rem) {
  [id] { scroll-margin-top: 100px; }
  .site-header { display: none; }
  .site-main { padding-top: 0; }
  .mobile-menu {
    position: fixed;
    top: max(30px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    z-index: 40;
    display: grid;
    place-content: center;
    gap: 8px;
    width: 57px;
    height: 57px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
  }
  .mobile-menu::before,
  .mobile-menu::after {
    content: '';
    width: 25px;
    height: 1px;
    background: currentColor;
  }
  .hero {
    width: min(560px, calc(100% - 48px));
    min-height: 100svh;
    margin-top: 51px;
    padding: min(138px, 16.4svh) 0 45px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .hero-mark { display: block; width: 150px; height: auto; }
  .hero-tagline {
    height: auto;
    margin: 20px 0 48px;
    writing-mode: horizontal-tb;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
  }
  .pickup {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 40px;
  }
  .pickup-badge {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    background: transparent;
    color: var(--green);
    font-size: 10px;
  }
  .pickup-story {
    flex: 1;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: transparent;
  }
  .pickup-photo { display: none; }
  .pickup-copy {
    min-height: 0;
    padding: 0;
    flex-direction: column;
    gap: 4px;
  }
  .pickup-copy time {
    writing-mode: horizontal-tb;
    font-size: 14px;
    font-weight: 400;
  }
  .pickup-copy h3 {
    max-height: none;
    writing-mode: horizontal-tb;
    font-size: 16px;
  }
  .section-title { font-size: 28px; }
  .information-title, .about-title { font-size: 32px; }
  .use-heading { padding: 48px 0; }
  .news-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 286px;
    overflow-x: auto;
    padding: 0 12px 24px;
  }
  .news-card { padding-inline: 20px; }
  .use-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .use-card { min-height: 0; padding: 48px 0 64px; }
  .use-card:nth-child(even) { border-left: 0; }
  .use-card p { max-width: 308px; line-height: 1.5; }
  .access-layout {
    width: min(400px, calc(100% - 48px));
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .access-copy { width: min(291px, 100%); margin-inline: auto; }
  .contact { padding: 60px 24px 30px; }
  .contact .section-title { font-size: 24px; }
  .contact-intro { width: min(310.4px, 100%); margin: 30px auto; }
  .contact-options { width: min(291px, 100%); grid-template-columns: 1fr; }
  .contact-link { min-height: 0; flex-direction: column; text-align: center; }
  .contact-link + .contact-link { border-left: 0; }
  .contact-icon { width: 50px; height: 50px; }
  .contact-icon svg { width: 26px; height: 26px; }
  .contact-phone { font-size: clamp(24px, 8.2vw, 32px); }
  .contact-hours { display: inline-block; text-align: left; }
  .contact-form-label { font-size: 20px; }
  .footer-main { grid-template-columns: 1fr; gap: 0; padding: 0; font-size: 13px; }
  .footer-top {
    grid-column: 1;
    grid-row: 1;
    padding: 10px;
    border-bottom: 1px solid var(--ink);
    text-align: center;
  }
  .footer-legal { grid-column: 1; grid-row: 2; justify-self: center; padding-top: 20px; }
  .footer-identity { grid-column: 1; grid-row: 3; padding: 6px 16px 12px; text-align: center; }
  .footer-notice { text-align: center; }
}

/* Recommended reduced-motion support for this adaptation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS does not implement menu opening, detail dialogs, media playback, or calendar interaction. Those require explicit behavior and accessibility handling. Font loading and original artwork are also separate integration steps; the wordmark and house cannot be reproduced by these layout rules alone.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--paper);
  --color-brand: var(--green);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --font-sans: var(--font-body);
  --font-caption: var(--font-utility);
  --text-section: 40px;
  --text-category: 24px;
  --text-body: 16px;
  --text-caption: 14px;
  --radius-pill: 16px;
  --spacing-header: var(--header-height);
}
```

## Sources & Evidence

- **Inspected original and final website:** [RENEUTO LAB](https://lab.reneuto.com/). The supplied browser report records the same original and final URL with HTTP 200.
- **Capture batch timestamp:** `2026-09-23T21:26:14.574Z`, equivalent to September 24, 2026, 06:26:14.574 JST. Separate timestamps for each screenshot were not provided.
- **Desktop visual evidence:** three 1440 × 1000 captures showing the opening, a middle portion of the illustrated uses, and the access/contact/footer area.
- **Mobile visual evidence:** two 390 × 844 captures showing the opening and contact/footer area.
- **Rendered evidence:** supplied desktop and mobile text, link targets, element rectangles, computed typography, colors, padding, radii, and transition declarations. The extraction includes content beyond the screenshot regions, but does not provide every intermediate wrapper or complete asset URL.
- **Observed interaction scope:** the collection traversed page scroll positions. Persistent navigation is visible across captures. No supplied result demonstrates menu opening, detail-button activation, news swiping, calendar selection, media playback, or contact submission.
- **Collection limitations:** readiness checks waited for document load, image decoding, sampled layout/text stability, and finite motion within bounded time limits. Perpetual motion was temporarily paused during readiness checks. These checks do not establish complete delayed content or all interaction states. SharedWorkers and service workers were disabled during collection.

This reference describes the current captured homepage. Measured declarations, screenshot estimates, and new implementation recommendations are identified separately. No additional browsing, command execution, or file inspection was performed for this analysis.