ISURU｜余白と自然素材の質感を生かすベビーブランドサイト

# ISURU — Style Reference

> Intimate textile photography, quiet typography, and generous space for a Japanese baby brand.

**Original URL:** [https://www.isuru-baby.com/](https://www.isuru-baby.com/)
**Final URL:** [https://www.isuru-baby.com/](https://www.isuru-baby.com/)
**Theme:** predominantly white, with a pale gray footer and photographic color.
**Inspected:** October 2, 2026, 05:16:35 JST; supplied retrieval timestamp: October 1, 2026, 20:16:35.245 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current homepage, using five supplied original-page screenshots and rendered DOM/computed-style evidence. Screenshots cover the desktop opening, a desktop Product/Material transition, the desktop footer, the mobile opening, and the mobile footer. The DOM additionally documents the vision, product links, Material, Story, Journal, and closing image section. Linked pages and expanded navigation/news states were not inspected.

ISURU presents its products through a calm brand narrative. The opening gives almost the entire viewport to a close photograph of a sleeping baby and softly folded bedding. A widely spaced wordmark and small English controls sit directly over the image. There is no large promotional headline or filled purchase button in the captured opening.

Below the opening, the page alternates substantial empty space, Japanese serif statements, restrained English section labels, product navigation, and editorial links. Its visual hierarchy comes from photographic scale, changes in alignment, and the contrast between fine sans-serif utilities and expressive Mincho headings. The footer extends this quiet treatment with warm gray text, thin rules, and a flat store link.

This is a long brand homepage with product, editorial, support, and external-store destinations. Preserve that information architecture when reusing the design.

## How to Read This Reference

- **Measured** values come from the supplied rendered rectangles and computed styles. Numbers refer to CSS pixels unless stated otherwise.
- **Visual estimates** describe features visible in screenshots but not measured in the supplied DOM, such as the compact header height and arrow-outline dimensions.
- **Derived values** are calculations from the two inspected viewports. They do not establish the original stylesheet formula or breakpoint.
- **Recommendations** describe a new implementation. They are not claims about features already present on ISURU.
- **Named tokens** are implementation aliases introduced here. The only supplied custom property is `--scrollbar-width: 0px`; it is not a design-token catalog.
- **DOM presence is not visibility.** Product sublinks, news content, and some offscreen elements appear in the extracted data without appearing in the corresponding screenshot.

The desktop Product capture is mostly white space: its small label and outlined-arrow link are visible, while the product presentation is not visibly resolved. The DOM confirms two product destinations, but it does not establish their fully revealed appearance. Do not interpret this capture as proof that the intended product section is empty.

Several sampled rectangles also reflect something other than ordinary document flow. On mobile, product-link rectangles report vertical positions above their parent section's reported start. Positioning or transforms could explain this, but their cause is not supplied. Their widths are useful evidence; their vertical coordinates should not be copied as static offsets.

## Tokens — Colors

### Default Palette

| Name | Measured value | Suggested token | Observed role |
| --- | --- | --- | --- |
| Page White | `#ffffff` | `--color-page` | Body background; white compact-header surface visible in scrolled screenshots |
| Charcoal | `#32312f` | `--color-ink` | Body color, editorial headings, content links, and dark interface details |
| Footer Mist | `#f5f5f5` | `--color-footer` | Footer background |
| Warm Gray | `#b1afaa` | `--color-footer-ink` | Footer navigation, support links, request content, and store-link text |
| Pale Caption | `#d0cfcc` | `--color-caption` | Product, Material, Story, and Journal section labels; sampled desktop product-link color |
| Soft Fill | `#e7e7e5` | `--color-soft` | Online Store background; also the sampled initial vision-section text color |
| Reversed White | `#ffffff` | `--color-on-photo` | Desktop hero navigation and closing-image caption |

These are computed colors from the inspected states, not approximations sampled from compressed images. Pale Caption and Warm Gray are distinct: section labels are lighter than the footer's primary links.

The initial vision heading computes to Soft Fill even though the body computes to white. The page also declares background-color transitions. This combination may be state-dependent; the evidence does not establish every background/text pairing during scrolling. Do not assume that the vision text should remain nearly invisible on white in a new implementation.

### Photographic Color

The opening photograph adds cool blue-gray fabric, cream cloth, warm skin tones, and a blurred ochre foreground. The closing photograph contributes soft green plant stems. These are **visual observations of imagery**, not measured interface colors.

Keep this separation: neutral interface surfaces frame the natural color in photographs. A beige page fill or green primary button would introduce a treatment not evidenced by the supplied captures.

### Contrast Guidance

The pale footer and section labels are part of the observed appearance. They also make small text difficult to read. For a production adaptation, use a darker secondary ink for actionable text and meaningful headings while retaining the original pale tones for decorative details. The Quick Start supplies `#706c66` as a **recommended addition**, not a source color.

## Tokens — Typography

### Azo Sans — Navigation and Utilities

- **Computed family:** `azo-sans-web, sans-serif`.
- **Observed weight:** predominantly `400`.
- **Roles:** English navigation, section labels, content CTAs, social links, store text, and the closing photographic caption.
- **Character:** small, light, and quietly tracked. It supplies structure without competing with photography.

This is the family declared in computed styles. Font files, loading success, licensing, and exact font-face metadata were not supplied.

### Shippori Mincho — Japanese Editorial Text

- **Computed family:** `'Shippori Mincho', serif`.
- **Observed weights:** `400` for the vision headline and footer links; `700` for the Material and Story headings.
- **Roles:** the brand statement, Japanese section headlines, footer navigation, product sublinks in the footer, and support links.
- **Character:** fine strokes and measured line spacing communicate care and craftsmanship without ornamental decoration.

The footer also uses this serif for Latin product names. Do not force every English phrase into the utility sans-serif.

### Wordmark

The visible ISURU wordmark is a graphic treatment with generously spaced capitals. The sampled heading and home-link elements contain no text. Their inherited font sizes therefore do not describe the visible logo.

The desktop opening logo has a measured outer box of `270 × 73.5px`; its visible lettering occupies less of that box. The mobile outer heading reports zero height despite visible artwork. Use the brand artwork and its optical bounds rather than treating these rectangles as a text-logo specification.

### Type Scale

| Role | Desktop measured size / line height | Mobile measured size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Hero navigation | `12.6 / 25.2px` | Not visible in mobile opening | `400`; desktop tracking `0.54px` |
| Section label | `14.4 / 28.8px` | `15.0724 / 30.1449px` | `400`; tracking `0.05em` |
| Content CTA | `14.4 / 14.4px` | `15.0724 / 15.0724px` | `400`; sampled inherited tracking `0.54px` / `0.14625px` |
| Vision headline | `36 / 72px` | `28.2609 / 56.5218px` | Serif `400`; normal tracking |
| Material headline | `23.4 / 46.8px` | `20.7246 / 41.4493px` | Serif `700`; desktop `-0.025em`, mobile normal |
| Story headline | `23.4 / 46.8px` | `20.7246 / 39.3768px` | Serif `700`; `-0.025em` |
| Footer primary link | `27 / 54px` | `18.8406 / 37.6812px` | Serif `400`; `-0.025em` |
| Footer product sublink | `16.2 / 32.4px` | `11.3043 / 22.6087px` | Serif `400`; desktop normal, mobile `-0.025em` |
| Footer support link | `12.6 / 25.2px` | `12.2464 / 24.4928px` | Serif `400`; normal tracking |
| Footer social link | `12.6 / 25.2px` | `12.2464 / 24.4928px` | Sans-serif `400`; `-0.025em` |
| Online Store | `14.4 / 28.8px` | `15.0724 / 30.1449px` | Sans-serif `400` |
| Closing-image caption | `12.6 / 28.98px` | `13.1884 / 23.7391px` | Sans-serif `400`; `0.05em` |

Paragraph descendants were not individually measured. Do not assign the enclosing section's tiny inherited font size to their visible text. For a new implementation, approximately `15–16px` editorial copy with a line height around `2` is a reasonable starting point, to be checked against actual copy and assets.

### Root Sizing Caution

The measured root font size is `9px` at 1440px width and `2.4375px` at 390px width. Both equal `viewport width / 160`, or `0.625vw`. This is a **two-point derivation**, not a verified source rule.

Visible mobile utilities are still about 15px because their sizing differs from the root. A simple proportional shrink of the desktop typography would not reproduce the mobile design. The Quick Start retains a conventional root and defines component sizes explicitly.

## Tokens — Spacing & Shapes

**Density:** sparse at section scale, compact at control scale.
**Geometry:** square photographic surfaces, fine straight rules, and a small oval outline around CTA arrows.
**Elevation:** no visible card-shadow system in the supplied captures.

### Horizontal Alignment

| Element | Desktop evidence | Mobile evidence |
| --- | --- | --- |
| Opening logo | Outer box at `x=585px`, centered in 1440px | Visible lettering begins around `18px`; outer box is not a reliable optical measurement |
| Opening section navigation | Starts at `x=1116px`, or `77.5vw` | Not visible |
| Product label | `x=70.1875px` | `x=17.5469px` |
| Product List link | `x=72px` | `x=17.5469px` |
| Material headline | `x=340.2031px`; width `365.0469px` | `x=17.5469px`; width `354.8906px` |
| Story headline | `x=826.1875px`; width `365.0469px` | `x=17.5469px`; width `354.8906px` |
| Journal link column | `x=449.2656px`; width `918.7188px` | `x=19.5px`; width `351px` |
| Footer primary navigation | Starts at `x=394.5469px` | Starts at `x=17.5469px` |
| Footer support column | Starts at `x=662.5781px` | Support at `17.5469px`; social links at `209.1563px` |
| Footer request/store column | `x=947.875px`; width `374.3906px` | `x=17.5469px`; width `354.8906px` |

Desktop alignment is deliberately asymmetric. The page does not place every section inside one centered text column. On mobile, most content returns to an approximately `4.5–5vw` inset.

### Vertical Rhythm

| Region | Desktop measured extent | Mobile measured extent | Interpretation |
| --- | --- | --- | --- |
| Opening | `1000px` high | `844px` high | Exactly one inspected viewport |
| Vision section | `801.31px`; top padding `380.7px` | `503.92px`; top padding `156px` | Substantial pause before the statement |
| Product section | `1983.58px`; top padding `444.6px` | `1230.13px`; top padding `147.225px` | Large presentation region; revealed product appearance is incomplete in screenshots |
| Material section | `1103.75px`; top padding `364.5px` | `1423.27px`; top padding `208.65px` | Mobile section remains spacious |
| Story section | `1193.75px`; top padding `396px` | `1777.28px`; top padding `210.6px` | Mobile content stacks into a taller region |
| Journal section | `915.30px`; top padding `397.8px` | `685.11px`; top padding `210.6px` | Three editorial destinations |
| Closing image section | `720px` high | `565.5px` high | Substantial photographic section, not merely a thin banner |
| Footer | `812.69px`; top padding `164.7px` | `1064.61px`; top padding `84.825px` | More vertical stacking on mobile |

These are recorded section extents, not a complete static layout recipe. Positioned content, unrepresented intermediate regions, and links extending beyond a section's box mean these rows should not be summed to reconstruct document height.

### Controls and Shapes

| Element | Value | Evidence level |
| --- | --- | --- |
| Compact header | Approximately `44px` high | Screenshot estimate on both viewports |
| Header bottom rule | Approximately `1px` | Screenshot estimate |
| Content CTA outer box | `34.1875px` high desktop; `37.0469px` mobile | Measured |
| CTA arrow capsule | Approximately `54 × 36px` desktop | Screenshot estimate |
| CTA capsule radius | Fully rounded ends | Visual observation |
| Store link | `374.3906 × 52.1875px` desktop | Measured |
| Mobile store link | `354.8906 × 53.5469px` | Measured |
| Store-link radius | `0px` | Measured |
| Request heading rules | Approximately `1px` | Screenshot estimate |

Do not generalize the oval arrow treatment into rounded cards. It is a small directional detail inside an otherwise straight-edged layout.

## Components

### Opening Header

**Role:** identity and unobtrusive access to the site structure.

On desktop, the large white ISURU wordmark sits near the top center of the photograph. The measured outer logo box begins at `y=29.6875px`. A small navigation stack sits toward the upper right: `Product +`, `Story`, `Material`, and `About Us`. `Menu` and three horizontally arranged dots sit farther right.

The Product children `ISURU cocon` and `FUTON COVER` exist in the DOM, but the opening screenshot shows the compact parent navigation. The plus suggests additional content; its activation and expanded appearance were not tested.

On mobile, the large wordmark moves to the upper left and appears charcoal. The Menu control remains white over the photograph, and the desktop navigation stack is absent. This mixed color treatment is visible in the capture; do not automatically force every opening-header element to white.

Use the three-dot motif rather than substituting a hamburger icon. The menu's open state is outside the evidence.

### Compact Scrolled Header

**Role:** maintain identity and menu access once the photograph has scrolled away.

The scrolled screenshots show a white strip about 44px high, separated from the content by a fine dark bottom rule. On desktop, the smaller logo remains centered. On mobile, it sits toward the left, while Menu remains at the right.

The header occupies the top edge across the supplied scrolled views, consistent with persistent positioning. Whether the source uses fixed positioning, sticky positioning, or a coordinated alternative was not supplied. The exact scroll threshold is also unknown.

The logo's source transitions include top/width changes, and mobile additionally includes a left-position change. A responsive implementation should treat the opening and compact compositions as distinct states rather than merely scaling the entire header.

### Full-Viewport Photographic Opening

**Role:** communicate softness, intimacy, and material quality before introducing product information.

The captured opening is `1440 × 1000px` on desktop and `390 × 844px` on mobile. Photography reaches all four edges. The infant is partially cropped, with fabric texture occupying much of the image. Shallow focus and foreground blur create the softness; the visible result does not require a generic CSS blur layer.

Desktop places the sleeping baby's head toward the lower center/right. Mobile gives more space to folded fabric at the upper left and pushes the face toward the right/lower edge. The evidence cannot determine whether this difference comes from a separate asset, crop settings, or the capture timing within the image presentation.

Three small utility groups sit near the bottom:

- `Scroll` at the left, accompanied by a tiny dot.
- A `01 / 03` indicator, with a fine diagonal separator.
- `Latest News`, placed at the far right on desktop and near the horizontal center on mobile.

The counter suggests a three-position image presentation. Automatic advancement, swiping, transition style, and user controls were not verified. The screenshots establish the first displayed state only.

### Latest News Content Region

**Role:** expose recent editorial material without adding a large panel to the opening composition.

The DOM contains `Close`, `Journal`, `Instagram`, three dated article links, and View More destinations. On desktop, sampled article boxes begin at `x=1536px`, beyond the 1440px viewport, and are approximately `306px` wide. On mobile, corresponding article boxes are approximately `352.31px` wide and occur below the opening viewport in the sampled coordinates.

This supports the existence of additional news content associated with the opening utilities. It does not establish the expanded panel's size, direction of entry, backdrop, or tab behavior. Do not reconstruct a drawer or modal solely from these offscreen rectangles.

The latest supplied article date is `2024.08.05`. That is content evidence, not evidence that the website has been discontinued.

### Vision Statement

**Role:** explain the emotional premise of choosing products for a baby's surroundings.

The source headline is `選ぶことは、愛すること。` It uses regular Shippori Mincho at `36px / 72px` on desktop and approximately `28.26px / 56.52px` on mobile. Supporting Japanese copy follows, with an `Our Vision` link to `/aboutus`.

Desktop places the headline around `x=285px` and the CTA farther right at `x=774px`. Mobile brings both into a left-aligned column around `19.5px` from the edge. The mobile source text also uses shorter line breaks.

An English craftsmanship statement exists later in the DOM. Its exact visual treatment was not supplied, so it should not become an invented oversized typography feature in a reproduction.

### Product Section

**Role:** introduce two product families and direct visitors to the product index or detail pages.

The DOM identifies:

- `01` — `ISURU ココン ベビーベッド`, linking to `/products/isuru-cocon`.
- `02` — `布団カバー`, linking to `/products/cover`.

The desktop label and `Product List` CTA sit in a left rail around 70–72px from the edge. Sampled product anchors begin around `x=450.72px` and extend approximately `941.75px` wide. Their `449.09px` height includes `300.6px` bottom padding, so it must not be interpreted as an image aspect ratio.

On mobile, the product anchors measure approximately `354.89px` wide. The Product List link moves toward the end of the product section in the supplied layout evidence. Exact product-image framing and the fully revealed product-link treatment remain unverified.

The desktop screenshot visibly establishes the pale Product label, a charcoal CTA label, the outlined arrow capsule, and very broad white space. Preserve that restrained navigation language without inventing a conventional rounded-card grid.

### Outlined-Arrow CTA

**Role:** provide a quiet directional link between sections and detail pages.

The visible Product List example consists of a thin oval outline with a small right-pointing arrow, followed by an unboxed sans-serif label. The outline is pale gray; the label is charcoal. There is no filled button background or shadow.

The same measured CTA family appears on `Our Vision`, `About Material`, `Read Story`, and `View note`. Desktop CTA containers are approximately 34.19px high, with 14.4px text. Mobile containers are approximately 37.05px high, with 15.07px text.

For a new implementation, retain the small visible capsule while enlarging the interactive target to at least 44px. Mark a purely decorative arrow as hidden from assistive technology and keep the link label meaningful on its own.

### Material and Story Editorial Sections

**Role:** connect the products to natural materials, Japanese handwork, and long-term use.

Both sections combine a small English category label, a two-line Japanese serif headline, supporting copy, and an outlined-arrow CTA. Their desktop compositions differ:

- Material has a rotated English label near the far left, with its headline beginning around `x=340px`.
- Story places its English label nearer the center and its headline much farther right, around `x=826px`.

Material's source headline begins `赤ちゃんの心地よさを追求する。`; Story's begins `日本の手仕事の「美しさ」と、`. Both use bold Shippori Mincho at `23.4px` on desktop.

On mobile, both labels become horizontal and align with the headline and CTA at approximately `17.55px`. The headline width grows to almost the entire content width, while the font decreases only modestly to approximately `20.72px`.

The supplied screenshots do not resolve these sections' complete imagery. Do not invent a verified split-image arrangement, image sequence, or parallax effect. Their type, alignment, copy hierarchy, and link destinations are supported by the DOM.

### Journal List

**Role:** provide editorial continuity through articles hosted on note.

The homepage contains three article destinations with Japanese titles and dates. The desktop anchors form a vertical list in a broad right-side column, beginning around `x=449px`, rather than three equal cards across the page. Each sampled link is approximately `918.72 × 170.09px`.

On mobile, the Journal section is `351px` wide, inset `19.5px`. Its three links use flex layout and have sampled boxes approximately `99.38px` high, with successive starts about `144.22px` apart. These are container measurements, not verified thumbnail dimensions.

`View note` supplies the section's onward link. The full visual anatomy of individual article imagery and metadata was not captured closely enough to specify it beyond the DOM evidence.

### Closing Photograph

**Role:** return the page to an atmospheric image before the footer.

The desktop footer screenshot shows soft green stems and the centered white caption `All from a feeling of love.` Only the lower portion of the photograph is visible in that screenshot. The measured section is actually `720px` high on desktop and `565.5px` high on mobile.

Keep this distinction when reproducing the composition: the visible 143px strip above the desktop footer is a cropped viewport view of a much taller section. The caption is small sans-serif text, not a large closing slogan.

### Footer Navigation

**Role:** combine site navigation, support, sample requests, social destinations, and store access.

Desktop uses a pale gray surface and a broad empty left region. Three functional columns begin around 27.4%, 46.0%, and 65.8% of the viewport width:

1. Large serif site links, with indented product sublinks.
2. Smaller support links, followed by Instagram and note.
3. A request block and the flat Online Store link.

The large primary links are `27px / 54px`; the indented product links are `16.2px / 32.4px`. Support links use the serif, while social links use the sans-serif.

On mobile, the footer becomes a vertical sequence. Primary links come first. Product sublinks share a horizontal row. Support links and social links occupy two neighboring columns, followed by a full-width request block and store link.

The copyright is vertical along the left side on desktop and horizontal above the bottom wordmark on mobile. The bottom wordmark sits left, with the small `Page Top` affordance and dot at the right. Its activation and scrolling behavior were not tested.

### Request Block and Store Link

**Role:** offer material-related information and a separate shopping destination.

The `資料請求` request link has a title row bounded by thin horizontal rules, with a right-pointing arrow at the far edge. Several lines of Japanese explanatory copy follow. The title and copy belong to the request destination `/request`.

The Online Store link is a flat rectangle with `#e7e7e5` fill, a small outlined shopping-bag symbol, and centered text. It links to `https://store.isuru-baby.com/`. Its corners are square and its height remains close to 53px across both inspected sizes.

Do not turn these footer actions into brightly colored conversion panels. Their observed hierarchy is deliberately quiet. A darker text color is nevertheless recommended for production readability.

## Tokens — Motion & Interaction

The following transitions are present in the supplied computed styles. A declared transition is evidence of an available treatment, not proof that its trigger or complete sequence was exercised.

| Element/property | Measured declaration | Evidence and limitation |
| --- | --- | --- |
| Body/header background color | `1s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | End-state palette sequence not supplied |
| Desktop logo heading, top position | `0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Opening and compact compositions appear in screenshots; threshold unknown |
| Desktop home-link width | `0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Supports logo resizing |
| Mobile logo heading, top and left | `0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955)` | Both properties are declared |
| Mobile home-link width | `0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955)` | Supports a separate mobile header transition |
| Desktop navigation opacity | `0.35s cubic-bezier(0.165, 0.84, 0.44, 1)` | Hover/focus endpoint not supplied |
| Desktop content/footer link color | `0.35s cubic-bezier(0.165, 0.84, 0.44, 1)` | Resulting interactive color not supplied |
| Desktop product-link color | `0.3s cubic-bezier(0.165, 0.84, 0.44, 1)` | Fully revealed product state not captured |

Many mobile elements report only `transition: all`, without an explicit nonzero duration in the evidence. Do not assign the desktop 350ms behavior to them as an observed fact.

The sampled elements report `animation: none`. This does not establish that the whole website is static: descendants, pseudo-elements, media, and script-driven transforms are not fully represented in this excerpt.

**Unverified interactions:** opening Menu, expanding Product, opening Latest News, switching news content, advancing the hero presentation, hovering links, keyboard focus, and activating Page Top. No carousel timing, drawer animation, scroll reveal, or parallax value can be responsibly specified as source behavior.

**Recommended adaptation:** use the measured easing families for header state changes, keep ordinary link feedback brief, and ensure content is visible before any optional enhancement. Respect reduced-motion preferences. If an automatic slideshow is added, provide an explicit pause mechanism.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Opening | Edge-to-edge soft-focus photograph | Emotional introduction and material texture |
| Main canvas | White | Separates sparse editorial groups without cards |
| Compact header | White with a thin charcoal bottom rule | Persistent identity over varied content |
| Content CTA | Transparent, with a small pale outlined capsule | Directional navigation without a filled button |
| Closing image | Green photographic scene with small white text | Visual pause before navigation-heavy content |
| Footer | `#f5f5f5` | A subtle change from the white main canvas |
| Store link | `#e7e7e5`, square corners | A quiet, distinct shopping destination |

There is no visible general system of elevated cards, glass panels, or rounded content containers. The design relies on image boundaries, alignment, type size, and modest changes in neutral tone.

## Imagery

The opening photograph is tactile and close. Fabric weave, folds, a baby's ear and hair, shallow depth of field, and a warm blurred foreground carry the visual identity. The image feels observed at close range rather than arranged as a conventional product cutout.

Use photographs with enough resolution for a full desktop viewport and enough compositional freedom for a tall mobile crop. The mobile capture proves that the subject need not remain fully visible: textile texture and a partial face can retain the emotional meaning.

The closing image uses soft green stems with substantial blur and negative space for its small white caption. Keep its color photographic; do not derive an unrelated green interface theme from it.

### Observed Asset References

No image source URLs, filenames, SVG paths, or font-file URLs were supplied. The table identifies observed visual assets without inventing downloadable paths.

| Visual asset | Evidence | Reuse guidance |
| --- | --- | --- |
| Infant and gray bedding | Desktop and mobile opening screenshots | Use authorized photography and tune each crop to the actual asset |
| Green plant-stem image | Visible portion of desktop closing section | Retain natural blur and space around the caption |
| ISURU wordmark | Opening, compact header, and footer screenshots | Use the brand artwork; ordinary tracked text is only an approximation |
| Oval arrow, menu dots, bag symbol, Page Top dot | Visible interface details | Simple CSS or SVG can reproduce the geometry; exact source implementation is unknown |
| Product and full editorial imagery | Not sufficiently resolved in supplied screenshots | Do not claim asset dimensions, aspect ratios, or art direction beyond available evidence |

Photography should use normal smooth image rendering. Raster pixelation, illustration filters, and synthetic paper textures are not part of the observed treatment.

## Layout & Responsive Behavior

The measured document height is approximately `10,315.17px` on desktop and `9,389.23px` on mobile. Mobile remains a long editorial page even though the overall document becomes slightly shorter. Individual Material, Story, and footer sections actually become taller as content reorganizes.

| Relationship | Desktop | Mobile |
| --- | --- | --- |
| Opening logo | Large, white, centered | Large, charcoal, upper left |
| Opening navigation | Section stack plus Menu | Menu only |
| Bottom opening utilities | Scroll left; counter and news toward right | Scroll left; news centered; counter right |
| Compact header | Centered small logo | Small logo toward left |
| Editorial alignment | Different offsets for Material and Story | Shared narrow outer gutters |
| Material label | Rotated vertical treatment | Horizontal |
| Product links | Broad right-side region | Nearly full content width |
| Footer navigation | Three main functional columns | Stacked groups with a two-column support/social row |
| Footer product sublinks | Vertically stacked and indented | Horizontal row |
| Copyright | Vertical at the left | Horizontal above the bottom logo |
| Store link | Right-column width | Almost full content width |

Only two viewport sizes were supplied. Breakpoints, intermediate tablet behavior, landscape handling, and safe-area rules are not known. A breakpoint such as 768px in an adaptation is a recommendation, not an extracted source value.

Avoid scaling the entire page uniformly. The mobile CTA text is slightly larger than the desktop CTA text, while footer primary links become much smaller. The changes are component-specific.

## Do’s and Don’ts

### Do

- Let close, tactile photography dominate the opening.
- Pair Azo Sans utilities with Shippori Mincho editorial headings where those fonts are available and licensed.
- Preserve the distinction between small English category labels and stronger Japanese statements.
- Keep desktop alignments asymmetric and return them to consistent mobile gutters.
- Retain the opening and compact header as separate compositions.
- Use the actual three-dot Menu motif and small outlined-arrow CTAs.
- Keep images and store surfaces square-cornered.
- Preserve the footer's primary, support/social, request, and store hierarchy.
- Treat the visible closing strip as part of a substantial photographic section.
- Keep content available when animation or enhancement code fails.

### Don’t

- Don't add a large promotional headline or bright purchase button to the captured opening composition.
- Don't turn every section into an identical centered grid or rounded card row.
- Don't recolor the entire interface beige because the photographs contain warm tones.
- Don't use the source root size as the visible body-copy size.
- Don't render the logo as ordinary text and describe it as an exact match.
- Don't copy offscreen or transformed rectangle positions as a static page layout.
- Don't assume the mostly blank Product capture proves an intentionally empty section.
- Don't claim autoplay, parallax, reveal choreography, or menu behavior without further evidence.
- Don't infer missing product photography or image ratios from padded link boxes.
- Don't preserve pale text unquestioningly when readability is required for a new production site.

## Recommended Implementation Additions

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

- Use darker secondary text for footer links, meaningful section labels, and request copy; test contrast over both flat surfaces and photographs.
- Give Menu an accessible name, `aria-expanded`, and an associated controlled region. Implement focus handling once its actual interaction model is chosen.
- Keep the visible arrow capsule small while providing a minimum 44px interactive target.
- Provide a visible keyboard focus style for links and controls, including the logo, store link, and Page Top.
- Use an accessible home-link label for the graphic wordmark and appropriate alternatives for meaningful photography.
- If a slideshow is implemented, provide pause/advance controls and avoid announcing every automatic change to assistive technology.
- Use reduced-motion alternatives for logo movement and any added image transitions.
- Reserve image dimensions and render editorial content without depending on a reveal observer to make it visible.
- Tune mobile image positioning from the real asset rather than assuming the desktop center crop will work.
- Keep the page usable at enlarged text sizes; large fixed blank regions should not push essential content out of reach.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#ffffff`.
- Primary text and dark rules: `#32312f`.
- Footer surface: `#f5f5f5`.
- Observed footer text: `#b1afaa`.
- Observed section labels and pale details: `#d0cfcc`.
- Store-link fill: `#e7e7e5`.
- Text over suitable photography: white.
- Recommended readable secondary ink: `#706c66`; this is an adaptation token.

### Overall Prompt

“Create a Japanese baby-brand homepage with ISURU's restrained visual relationships: an edge-to-edge photograph of soft bedding and a sleeping infant, a spacious graphic wordmark, tiny sans-serif utilities, Japanese Mincho editorial headings, and extensive white space. Use white and charcoal for the main interface, with a pale gray footer and warm gray secondary details. On desktop, vary the horizontal alignment of editorial sections and place the opening navigation at the upper right. On mobile, move the opening wordmark left, retain Menu, align content to roughly 4.5–5vw gutters, and stack the footer's main groups. Use small outlined-arrow links and a flat square store link. Keep unverified menu, slideshow, and reveal behavior separate from the visual implementation.”

### Example Component Prompts

1. **Opening:** “Build a viewport-height photographic opening with fabric texture filling most of the composition. Place a white graphic wordmark at the top center on desktop, small navigation at the upper right, and Scroll, a 01 / 03 indicator, and Latest News along the bottom. On mobile, use the observed left-aligned dark wordmark and center the news label. Tune the photograph's crop to the supplied asset.”
2. **Editorial section:** “Create a sparse Material section with a small muted English label, a two-line bold Japanese Mincho heading near 23px on desktop, supporting copy, and a small oval-arrow link. Keep the desktop heading offset from the left rail; on mobile, align everything to an approximately 18px gutter and use a heading near 21px.”
3. **Compact header:** “Create a white header about 44px high with a fine charcoal bottom rule, a small centered graphic logo on desktop, and Menu with three horizontal dots at the right. Move the logo left on mobile. Support a separate opening state and use a restrained 600ms transition, with reduced-motion handling.”
4. **Footer:** “Create a pale gray footer with generous empty space on the left of its desktop layout. Arrange large Japanese serif navigation, smaller support/social links, and a request/store column to the right. Use thin rules around the request title and a square pale store rectangle with a small bag icon. Stack the main groups on mobile, keeping support and social links side by side.”
5. **Directional link:** “Create an unboxed sans-serif text link preceded by a thin pale oval containing a small right arrow. Use a visible capsule near 54 × 36px, no shadow, no filled background, and a larger accessible hit target.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation, not extracted source code. It keeps a conventional root font size and reproduces the observed palette, type relationships, header states, opening controls, and footer structure. The 768px breakpoint, optical logo dimensions, paragraph sizing, focus treatment, and darker secondary ink are recommendations.

Load authorized fonts and image/logo assets separately. The declared font families do not download fonts. Use semantic links for destinations and buttons for actions. The header's `data-compact` state requires application logic; its threshold is intentionally not presented as a source measurement.

```css
:root {
  /* Measured source colors */
  --color-page: #ffffff;
  --color-ink: #32312f;
  --color-footer: #f5f5f5;
  --color-footer-ink: #b1afaa;
  --color-caption: #d0cfcc;
  --color-soft: #e7e7e5;
  --color-on-photo: #ffffff;

  /* Recommended readable secondary text */
  --color-muted-readable: #706c66;

  /* Computed source families; assets must be loaded separately */
  --font-utility: azo-sans-web, sans-serif;
  --font-editorial: 'Shippori Mincho', serif;

  /* Desktop component sizes measured at 1440px */
  --text-utility: 14.4px;
  --text-section: 14.4px;
  --text-vision: 36px;
  --text-editorial: 23.4px;
  --text-footer-primary: 27px;
  --text-footer-small: 12.6px;
  --text-copy: 16px;
  --gutter: 4.875vw;
  --header-compact: 44px;

  /* Measured easing families */
  --ease-header: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-mobile-header: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-link: cubic-bezier(0.165, 0.84, 0.44, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-page);
  font: 400 var(--text-copy) / 2 var(--font-utility);
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 0;
  color: var(--color-on-photo);
}

.brand {
  position: absolute;
  top: 44px;
  left: 50%;
  width: 190px;
  transform: translateX(-50%);
  transition:
    top 600ms var(--ease-header),
    width 600ms var(--ease-header);
}

/* Use a logo asset with appropriate intrinsic optical bounds. */
.brand img,
.brand svg { display: block; width: 100%; height: auto; }

.menu-trigger {
  position: absolute;
  top: 42px;
  right: 3.75vw;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: var(--text-utility);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.menu-dots { display: inline-flex; gap: 6px; }
.menu-dots > span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.hero-nav {
  position: absolute;
  top: 50px;
  left: 77.5%;
  display: grid;
  gap: 2px;
  font: 400 12.6px / 25.2px var(--font-utility);
  letter-spacing: 0.54px;
}

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

.site-header[data-compact='true'] {
  height: var(--header-compact);
  color: var(--color-ink);
  background: var(--color-page);
  border-bottom: 1px solid var(--color-ink);
}

.site-header[data-compact='true'] .brand {
  top: 12px;
  width: 86px;
}

.site-header[data-compact='true'] .menu-trigger { top: 0; }
.site-header[data-compact='true'] .hero-nav { display: none; }

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-media,
.closing-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position, center);
}

/* Tune --photo-position separately for each authorized photograph. */
.hero-bottom {
  position: absolute;
  right: 3.75vw;
  bottom: 40px;
  left: 3.75vw;
  display: flex;
  align-items: end;
  gap: 52px;
  color: var(--color-on-photo);
  font-size: 12.6px;
  letter-spacing: 0.04em;
}

.hero-scroll { margin-right: auto; }
.hero-count { font-size: 10px; white-space: nowrap; }
.hero-news { color: inherit; font: inherit; }

.section-label {
  margin: 0;
  color: var(--color-muted-readable);
  font: 400 var(--text-section) / 2 var(--font-utility);
  letter-spacing: 0.05em;
}

.editorial-heading {
  margin: 0;
  max-width: 365px;
  font: 700 var(--text-editorial) / 2 var(--font-editorial);
  letter-spacing: -0.025em;
}

.vision-heading {
  margin: 0;
  font: 400 var(--text-vision) / 2 var(--font-editorial);
}

.editorial-copy {
  font-family: var(--font-editorial);
  line-height: 2;
}

/* Approximate the observed desktop Material alignment. */
.editorial-layout {
  display: grid;
  grid-template-columns: 18.75vw minmax(0, 1fr);
  padding: 140px var(--gutter) 0;
}

.editorial-layout > .section-label {
  justify-self: start;
  writing-mode: vertical-rl;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: var(--color-ink);
  font: 400 var(--text-utility) / 1 var(--font-utility);
  text-decoration: none;
  transition: color 350ms var(--ease-link);
}

.cta-mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 36px;
  border: 1px solid var(--color-caption);
  border-radius: 999px;
  color: var(--color-muted-readable);
}

.closing {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.closing-caption {
  position: absolute;
  right: var(--gutter);
  bottom: 60px;
  left: var(--gutter);
  margin: 0;
  color: var(--color-on-photo);
  text-align: center;
  font: 400 12.6px / 2.3 var(--font-utility);
  letter-spacing: 0.05em;
}

.site-footer {
  position: relative;
  padding-top: 164.7px;
  color: var(--color-muted-readable);
  background: var(--color-footer);
}

.footer-grid {
  display: grid;
  grid-template-columns: 18.614vw 19.813vw minmax(0, 1fr);
  margin-left: 27.4vw;
  margin-right: 8.175vw;
}

.site-footer a { text-decoration: none; }

.footer-primary > a {
  display: block;
  margin-bottom: 19.8px;
  font: 400 var(--text-footer-primary) / 2 var(--font-editorial);
  letter-spacing: -0.025em;
}

.footer-products {
  display: grid;
  gap: 12.6px;
  margin: 28px 0 40px 27px;
  font: 400 16.2px / 2 var(--font-editorial);
}

.footer-support,
.footer-social {
  display: grid;
  justify-items: start;
  gap: 10.8px;
  font-size: var(--text-footer-small);
  line-height: 2;
}

.footer-support { font-family: var(--font-editorial); }
.footer-social { margin-top: 36px; }

.request-link { display: block; }
.request-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  border-block: 1px solid var(--color-footer-ink);
  font: 400 16px / 1.7 var(--font-editorial);
}

.request-copy {
  margin: 18px 0 0;
  font: 400 13px / 2.08 var(--font-editorial);
}

.store-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52.1875px;
  margin-top: 64px;
  background: var(--color-soft);
  font-size: var(--text-utility);
  letter-spacing: 0.04em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 140px;
  padding: 0 var(--gutter) 77px;
}

.footer-brand {
  display: block;
  width: 123px;
  color: var(--color-footer-ink);
}

.footer-copyright {
  position: absolute;
  top: 45%;
  left: 5vw;
  writing-mode: vertical-rl;
  font-size: 10px;
}

.page-top { font-size: 11px; letter-spacing: 0.05em; }

/* Recommended focus treatment, not measured source behavior. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .site-footer a:hover,
  .cta:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Recommended breakpoint; mobile values reference the 390px capture. */
@media (max-width: 767px) {
  :root {
    --gutter: 4.5vw;
    --text-utility: 15.0724px;
    --text-section: 15.0724px;
    --text-vision: 28.2609px;
    --text-editorial: 20.7246px;
    --text-footer-primary: 18.8406px;
    --text-footer-small: 12.2464px;
  }

  .brand {
    top: 29px;
    left: var(--gutter);
    width: 180px;
    color: var(--color-ink);
    transform: none;
    transition:
      top 600ms var(--ease-mobile-header),
      left 600ms var(--ease-mobile-header),
      width 600ms var(--ease-mobile-header);
  }

  .menu-trigger { top: 24px; right: var(--gutter); gap: 12px; }
  .hero-nav { display: none; }

  .site-header[data-compact='true'] .brand {
    top: 14px;
    left: 32px;
    width: 76px;
  }

  .hero-bottom {
    right: var(--gutter);
    bottom: 20px;
    left: var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
  }

  .hero-scroll { order: 1; margin: 0; font-size: 10px; }
  .hero-news { order: 2; justify-self: center; }
  .hero-count { order: 3; justify-self: end; }

  .editorial-layout { display: block; padding-top: 156px; }
  .editorial-layout > .section-label {
    margin-bottom: 64px;
    writing-mode: horizontal-tb;
  }
  .editorial-heading { max-width: none; }

  /* Aspect ratio derived from the inspected section dimensions. */
  .closing { aspect-ratio: 20 / 29; }
  .closing-caption { font-size: 13.1884px; line-height: 1.8; }

  .site-footer { padding-top: 84.825px; }
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    margin-inline: var(--gutter);
  }

  .footer-primary > a { margin-bottom: 10px; }
  .footer-products {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 50px;
    margin: 26px 0 34px;
    font-size: 11.3043px;
  }

  .footer-utilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .footer-social { align-content: start; margin-top: 0; }
  .request-title { padding-block: 23px; }
  .request-copy { font-size: 12.2464px; line-height: 2; }
  .store-link { min-height: 53.5469px; }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 28px;
    margin-top: 66px;
    padding-bottom: 26.325px;
  }
  .footer-copyright {
    position: static;
    grid-column: 1 / -1;
    writing-mode: horizontal-tb;
  }
  .footer-brand { width: 132.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .cta { transition: none; }
}
```

**Markup expectations:** `.hero-bottom` contains `.hero-scroll`, `.hero-count`, and `.hero-news`; the mobile CSS reorders their visual placement. `.footer-grid` contains `.footer-primary`, `.footer-utilities`, and a request/store group. `.footer-utilities` contains separate support and social groups. `.footer-bottom` contains the copyright, graphic wordmark, and Page Top link. Decorative dots, bag symbols, and arrow marks should not duplicate accessible labels.

The CSS intentionally does not encode the source's entire multi-thousand-pixel section timeline. Product reveals, complete editorial imagery, and panel behavior need additional evidence or an explicitly new design decision.

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-page: #ffffff;
  --color-ink: #32312f;
  --color-footer: #f5f5f5;
  --color-footer-ink: #b1afaa;
  --color-caption: #d0cfcc;
  --color-soft: #e7e7e5;
  --color-muted-readable: #706c66;

  --font-utility: azo-sans-web, sans-serif;
  --font-editorial: 'Shippori Mincho', serif;

  --text-ui: var(--text-utility);
  --text-section-label: var(--text-section);
  --text-editorial-title: var(--text-editorial);
  --text-vision-title: var(--text-vision);
  --text-footer-title: var(--text-footer-primary);

  --spacing-page-gutter: var(--gutter);
  --spacing-compact-header: var(--header-compact);
}
```

## Sources & Evidence

- **Original and final page:** [ISURU homepage](https://www.isuru-baby.com/). The supplied browser record reports HTTP 200 and no URL change.
- **Capture time:** October 1, 2026, `20:16:35.245Z`, equivalent to October 2, 2026, `05:16:35.245 JST`.
- **Desktop evidence:** 1440 × 1000 viewport; opening screenshot, Product/Material transition screenshot, footer screenshot, rendered text, links, element rectangles, and computed-style samples.
- **Mobile evidence:** 390 × 844 viewport; opening screenshot, footer screenshot, rendered text, links, element rectangles, and computed-style samples.
- **Observed destinations:** product index and two product pages; Story, Material, About, support, request, editorial/social links, and the external store. Their presence is established by homepage links; their destination pages were not inspected.
- **Capture procedure supplied with the evidence:** initial observation of at least five seconds; readiness checks for document load, finite motion, sampled layout/text stability, and visible image decoding. Overall readiness was capped at 15 seconds, pending-image waits at five seconds, and settling at each scroll position at ten seconds. Perpetual animations were paused during checks and then resumed. SharedWorkers and service workers were disabled.
- **Interaction limits:** only the supplied opening and scrolled states are available. No verified click, hover, keyboard-focus, expanded menu, expanded news, or slideshow-advance result was supplied.
- **Asset and implementation limits:** no image asset inventory, font files, stylesheet source, exact breakpoint definitions, or complete motion timeline was supplied. Stable captures do not prove semantic completeness or the absence of delayed content.

This reference describes the current homepage represented by those captures. Measured values, screenshot estimates, and implementation recommendations are separated throughout; unresolved product and interaction details remain explicitly unverified.