# arflex / 2025–26 Collection — Style Reference

> Sunlit upholstery, quiet architectural geometry, and precise typography on warm earth tones.

**Website:** [arflex — 2025–26 Collection](https://www.arflex.co.jp/2025-26collection/)
**Original URL:** https://www.arflex.co.jp/2025-26collection/
**Final URL:** https://www.arflex.co.jp/2025-26collection/
**Theme:** warm brown canvas, dark brown footer, beige interface lettering, and white branding.
**Inspected:** September 12, 2026, at 13:54:43 UTC / 22:54:43 JST.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current collection page: opening imagery, introduction, SOFFIO ELEMENTI and ODEON features, seven-product lineup, location information, patterned transition, and footer. Visual captures establish the opening, transitional surfaces, and footer; the intervening sections have rendered DOM and computed-style evidence. Linked pages were not inspected.

The page presents furniture through room-scale imagery and a restrained editorial interface. A small collection identity sits at the top left, while sparse product links and a sound control occupy the opposite corner. A much larger white arflex wordmark anchors the opening image near the lower left. Upholstery, timber, directional sunlight, and dark foreground silhouettes supply the texture and tonal variation.

The supporting system is equally specific: muted brown fields, delicate quarter-circle geometry, large regular-weight product names, narrow Japanese copy blocks, and a dark footer with substantial empty space. Desktop content uses a three-column alignment system. Mobile preserves the photographic emphasis while stacking navigation, product cards, and footer groups according to their roles.

This is a collection presentation with product-detail and location links. Its supplied interface emphasizes browsing and product discovery; no purchase flow is established by the evidence.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and custom properties. Decimal measurements are rounded where that improves readability.
- **Visual estimates** describe the five supplied original-page captures. These include wordmark dimensions and decorative pattern geometry where element measurements were unavailable.
- **Calculated** values derive from measured coordinates, widths, or section boundaries. Calculations are identified explicitly.
- **Recommended** values belong to the reusable implementation. They do not establish how the original site was built.
- **Named tokens** are implementation aliases unless an original custom-property name is identified.
- DOM presence and coordinates do not prove that an element was visible in a particular screenshot. The introduction, for example, has viewport-level coordinates in the sampled DOM but does not appear over the supplied opening image.
- Static images and selected element styles do not establish media playback, scroll choreography, hover effects, or sound behavior. Those limits are retained throughout this reference.

## Tokens — Colors

### Core Palette

| Name | Value | Source token | Role and evidence |
| --- | --- | --- | --- |
| Earth Brown | `#8c7c61` | `--color-brown` | Measured body background; visible in the large patterned fields |
| Dark Brown | `#3d3a35` | `--color-dark-brown` | Measured footer background; a warm charcoal rather than neutral black |
| Pale Beige | `#ded3c5` | `--color-beige` | Measured navigation, collection captions, product display text, and footer links |
| White | `#ffffff` | `--color-white` | Measured Japanese body copy; visually used by the white wordmark |
| Source Black | `#000000` | `--color-black` | Declared token; a specific visible interface assignment was not established |

The brown canvas and dark footer are the structural colors. Beige softens the small English labels and oversized product names. White gives the brand graphic and Japanese copy a clearer presence.

The near-black areas in the opening capture belong to the photographed furniture and foreground shadows. They should not be interpreted as an additional card or overlay color system.

### Decorative Linework

| Treatment | Value | Status |
| --- | --- | --- |
| Pattern stroke | Approximately 1px in the supplied captures | Visual estimate |
| Pattern color | A faint lighter brown/beige against Earth Brown | Observed appearance; exact stroke color unavailable |
| Reusable pattern stroke | `rgb(222 211 197 / 15%)` | Recommendation |
| Mobile footer divider | Thin, low-contrast horizontal rule | Visually observed; exact color unavailable |
| Reusable divider | `rgb(222 211 197 / 20%)` | Recommendation |

The underlying HTML element computes to white with a slate text color, but the body supplies the visible brown-and-white treatment. Do not promote those underlying defaults into the page's visible palette.

## Tokens — Typography

### English Display and Utility Text

**Measured family:** `neue-haas-grotesk-display, sans-serif`, also declared through `--font-neue`.

This family appears in navigation, collection captions, featured product names, counter suffixes, product labels, location headings, and footer links. Large names remain regular weight. Smaller destination labels use medium weight to hold their shape without introducing a filled button treatment.

Normal tracking is measured on most English labels. The slightly expanded spacing visible between some words also exists in the supplied text as repeated nonbreaking spaces; it should not be generalized into wide letter spacing across every label.

### Japanese Body Copy

**Measured family:** `'Noto Sans JP Variable', sans-serif`, declared through `--font-sans` and the default family token.

Body copy is regular weight. Featured product descriptions use a generous `2` line-height ratio. The location copy is somewhat tighter at `1.7`, and the compact introductory text uses `1.6`.

Japanese tracking measures `0.8px` on desktop and `0.832px` on mobile across several differently sized paragraphs. Model this as a shared spacing token; applying `0.05em` separately to every font size would produce different results.

### Japanese Introductory Statement

**Measured family:** `dnp-shuei-gothic-gin-std, sans-serif`, declared through `--font-gothic`.

The statement “日常に、ゆるやかな自由を。” uses weight `700`, a 24px desktop font size, and 1.3 line height. Its stronger weight is a local emphasis within an otherwise restrained typographic system.

### Brand Wordmark

The visible arflex identity is a graphic wordmark. The large opening wordmark is approximately 300px wide on desktop and 225px wide on mobile. Its exact asset format and URL were not supplied.

The page also contains a 1 × 1px H1 with the text `arflex 2025-26 Collection`, consistent with a visually hidden semantic heading. Its computed 16px font size is not the visible wordmark size. Use an authorized brand asset instead of recreating the logo with a large text heading.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight | Evidence |
| --- | --- | --- | --- | --- |
| Root | 16 / 24px | 16.64 / 24.96px | 400 | Computed HTML style |
| Header product links | 14 / 14px | 12.48 / 12.48px | 400 | Computed anchor style |
| Sound control | 14 / 14px | 12.48 / 12.48px | 400 | Computed button style |
| Large-lockup collection caption | 20 / 20px | 14.56 / 14.56px | 400 | Computed paragraph style |
| Introductory statement | 24 / 31.2px | 24.96 / 32.448px | 700 | Computed paragraph style |
| Introductory body | 13 / 20.8px | 13.52 / 21.632px | 400 | Computed paragraph style |
| Featured product display name | 104 / 104px | 62.4 / 62.4px | 400 | Computed display paragraph |
| Counter suffix `/ 05` | 40 / 40px | 24.96 / 24.96px | 300 | Computed paragraph style |
| Compact featured-product label | 20 / 20px | 16.64 / 16.64px | 400 | Computed paragraph style |
| Featured-product description | 14 / 28px | 14.56 / 29.12px | 400 | Computed paragraph style |
| `View More` / `Visit Site` text | 16 / 16px | 16.64 / 16.64px | 500 | Inner text element |
| Product-card label | 20 / 26px | 18.72 / 24.336px | 500 | Label parent; nested category styling not supplied |
| `LOCATION` | 20 / 20px | 20.8 / 20.8px | 400 | Computed H2 style |
| Location body | 14 / 23.8px | 14.56 / 24.752px | 400 | Computed paragraph style |
| Footer links | 14 / 14px | 13.52 / 13.52px | 500 | Computed anchor style |

Font size, line height, and bounding-box height are separate measurements. For example, the desktop product-card label has a 33px bounding height despite its 26px computed line height.

The `Product Lineup` H2 wrapper computes to 16px on desktop, but its box is 65px high. Its inner display styling was not included, so that wrapper value does not establish the visible heading size. The Quick Start supplies an explicitly recommended heading scale.

## Tokens — Spacing & Shapes

### Responsive Unit

The supplied custom properties refer to a 1440px desktop design width and a 375px mobile design width:

```css
/* Observed custom-property expressions at the two inspected widths */
/* Desktop */
--rem: calc(1rem * tan(atan2(1440px, 1px)) / 1440);

/* Mobile */
--rem: calc(1rem * tan(atan2(390px, 1px)) / 375);
```

The measured root sizes are 16px and 16.64px respectively. For reuse, this reference calls one design pixel **1u**: 1px at the inspected desktop width and 1.04px at the inspected mobile width. This is an implementation notation, not an original variable name.

The authored breakpoint and behavior at other widths were not supplied. The Quick Start uses a recommended breakpoint and clamps the unit outside the inspected sizes.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Sound label-to-state gap | 4px | 4.16px | Measured |
| Header link internal gap | 8px | 8.32px | Measured |
| Header brand left inset | 32px | 10.39px | Measured |
| Header brand top inset | 20px | 10.39px | Measured |
| Gap between desktop navigation links | 48px | Navigation becomes vertical | Calculated from rectangles |
| Mobile navigation top-to-top step | — | About 27.44px | Calculated |
| Main content side inset | 48px | 10.39px | Measured at lineup and product copy |
| Hero lockup left inset | 56px | 24.95px | Measured caption alignment |
| Product grid horizontal gap | 24px | Single column | Calculated |
| Product grid row gap | 40px | About 33.27px | Calculated |
| CTA inner padding | 20px vertical, 12px horizontal | 20.8px vertical, 12.48px horizontal | Measured |
| Footer link top-to-top step | 64px | About 46.78px | Calculated |

### Shapes

- Measured anchors, sections, and buttons have `border-radius: 0`.
- The opening image and footer are full-width rectangular fields.
- The `OFF` state has a small, square-cornered outline around the state word.
- Header links use fine underlines in the captures.
- Footer links are unboxed and use small directional arrows.
- Curves belong primarily to the furniture and decorative pattern. They do not become a general rounded-card system.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Opening viewport | 1440 × 1000px | 390 × 844px |
| Header bounding box | 1440 × 65.34px | 390 × 131.17px |
| Header identity link | 212 × 25.34px | 220.47 × 26.36px |
| Intro copy column | 223.20px wide, x = 180px | 232.14px wide, centered at x ≈ 78.93px |
| Featured description | 432px wide, x = 960px | 369.22px wide, x ≈ 10.39px |
| Featured CTA | 432 × 59px | 191.36 × 61.88px, right aligned |
| Product card | 432 × 285px | 369.22 × 248.27px |
| Location copy column | 432px wide, x = 504px | 307.83px wide, x ≈ 41.08px |
| Pre-footer gap | 360px | 260px |
| Footer | 1440 × 546px | 390 × 601.48px |

The source also declares `--page-header-height: 4.25rem` on desktop and `5.75rem` on mobile. These are not equal to the sampled header bounding heights. Do not substitute those tokens for measured chrome dimensions without checking their actual use.

## Components

### Overlay Header

**Anatomy:** collection identity link → two featured-product anchors → `All Products` destination → sound button.

The desktop header is transparent and spans the photograph. The identity begins at x = 32px; the first product link begins near x = 935px. The large empty interval lets the room image remain dominant. Links use beige 14px text, fine underlines, and no enclosing navigation panel.

`SOFFIO ELEMENTI` and `ODEON` point to anchors on the same page. `All Products` points to `/2025-26collection/lineup`. The latter carries a small horizontal arrow in the captures.

On mobile, the identity stays at the upper left. Sound occupies the upper right, with the three navigation links stacked beneath it and aligned to the right edge. This arrangement is directly visible at 390px; there is no hamburger control in that capture.

The desktop footer capture retains the full header. The mobile footer capture retains only the sound control. This establishes two visible mobile header states, but not the scroll threshold, animation, or code that switches between them.

### Sound Control

**Anatomy:** `Sound` label → outlined `OFF` state.

This is a real button in the supplied DOM, with transparent background, no outer radius, and a 4px desktop gap between its parts. The entire desktop button measures about 79.7 × 17.4px; mobile measures about 72.8 × 15.7px.

Only `OFF` was observed. Activation, audible output, persistence, and an `ON` treatment were not tested. Preserve the visible state label in a new implementation and connect it to actual media behavior before exposing the control.

### Opening Room Image and Brand Lockup

**Anatomy:** edge-to-edge room media → transparent header → large lower-left wordmark → collection caption.

The opening desktop capture fills the viewport with a close view of a beige sofa. Side lighting reveals its fabric weave and cushion shaping. A dark, softly focused foreground table and chair occupy the lower portion, giving the white logo a quiet area of contrast.

The large lockup begins about 56px from the desktop left edge. Its caption ends 56px above the viewport bottom. Mobile moves the lockup to about 25px from the left, reduces the graphic to roughly 225px wide, and keeps the caption about 60px above the bottom.

The mobile crop concentrates on the sofa back, seat, and foreground table. It retains photographic scale instead of shrinking an entire desktop composition into view. `object-fit: cover` with deliberate focal positioning is a suitable implementation approach, but the original media element and fit rule were not supplied.

A second desktop capture shows a gray curved sofa arrangement above a patterned field. Multiple room views are therefore visible in the evidence. Their playback or switching mechanism remains unverified.

### Introductory Copy Panel

**Anatomy:** short bold Japanese statement → three compact thematic passages.

The supplied statement is “日常に、ゆるやかな自由を。”. Its typography is 24px DNP Shuei Gothic at weight 700 on desktop. The body uses 13px Noto Sans JP with 20.8px line height.

The desktop column is unusually narrow: about 223px, starting 180px from the left. Mobile keeps approximately the same reading measure in design units and centers the resulting 232px column.

The DOM preserves deliberate short lines and paragraph breaks. Maintain that considered line rhythm for Japanese copy rather than turning it into a wide generic paragraph. The panel's sampled coordinates overlap the first viewport, while the opening capture does not show it; its reveal and layering must therefore be treated as unverified.

### Featured Product Title Stage

**Anatomy:** semantic product heading → large visible name → parenthesized category.

SOFFIO ELEMENTI and ODEON each have a large title stage. The visible text uses regular-weight Neue Haas Grotesk Display at 104px on desktop. The SOFFIO display paragraph is approximately 1034px wide and horizontally centered; the shorter ODEON paragraph is approximately 527px wide and also centered.

Mobile switches the display size to 62.4px. The supplied text explicitly separates `SOFFIO`, `ELEMENTI`, and `(Sofa)` onto successive lines. ODEON uses a shorter two-line name/category arrangement. Preserve these product-specific line breaks rather than relying on arbitrary overflow wrapping.

The semantic H2 elements have 1 × 1px rectangles, while companion paragraphs carry the large display text. A new implementation can simplify this into a properly styled H2, provided it avoids duplicate announcements.

### Featured Product Sequence and Detail Copy

**Anatomy:** media sequence region → numerical position display → compact product label → Japanese description → `View More` link.

Each feature contains repeated zero digits, digits one through five, and a `/ 05` suffix in the rendered text. This supports a five-part position display. It does not reveal the active position, prove a carousel, or establish whether the digits roll during movement.

Desktop puts the compact product label and counter toward the right. The description occupies the rightmost 432px column at x = 960px. Its four measured lines use 14px type with 28px line height. A 432px-wide `View More` link follows, with 20px vertical and 12px horizontal padding.

On mobile, the counter region moves toward the left while the compact product label remains right aligned. The description expands to almost the full content width, about 369px. The CTA becomes a smaller 191px-wide block aligned to the right.

The SOFFIO and ODEON links lead to their respective product-detail URLs. The anchor backgrounds are transparent and their radii are zero. Border, hover, and active-state styling for these links were not supplied visually.

### Product Lineup

**Anatomy:** `Product Lineup` heading → seven linked media-and-caption items.

The order is SOFFIO ELEMENTI, ODEON, BLITS 25, DEW COFFEE TABLE, LOGOS, LIOR, and SOFFIO BED. Categories appear in parentheses: sofas, living tables, a dining table, and a bed.

Desktop places three 432px-wide cards per row, beginning at x = 48, 504, and 960px. The 24px gutters make a 1344px-wide content field. Seven products produce rows of three, three, and one, with the final item aligned left.

Mobile uses one 369px-wide card per row. Product names are 18.72px, weight 500, compared with 20px on desktop. This is a deliberate single-column product presentation rather than a compressed two-column mobile shop grid.

**Calculated media hypothesis:** the desktop caption begins 252px below the card top. A 432 × 240px media area plus a 12px gap explains that offset. Mobile similarly fits a roughly 369 × 205px media area plus a 12.48px gap. A `9 / 5` image ratio is therefore a well-supported reconstruction choice, but the image elements were not independently measured.

The supplied screenshots do not show the lineup's individual images. Its geometry and labels are supported by the DOM; specific product crops, backgrounds, and hover effects are not.

### Location Section

**Anatomy:** small `LOCATION` heading → Japanese explanatory copy → `Visit Site` link.

The location copy describes the lifestyle experience facility “カーサミア河口湖”. On desktop, the section is 900px tall and centers a 432px-wide text group. On mobile, the section is 780px tall and the copy narrows to about 308px, leaving approximately 41px on either side.

The heading uses 20px regular English display type on desktop. Body copy uses 14px Japanese text with a 23.8px line height. The mobile measurements scale these to 20.8px and 14.56px respectively.

`Visit Site` follows the same link construction as `View More`: full copy-column width on desktop, about 191px and right aligned on mobile. Its destination is `/casamia-kawaguchi-ko/`. Background imagery and visual overlay treatment for this section were not established by the supplied captures.

### Patterned Field

**Anatomy:** Earth Brown surface → thin rectilinear segments → quarter-circle arcs at more than one scale.

The geometry echoes rounded sofa modules without becoming a literal furniture illustration. Some lines form a square lattice; others stop or merge into broader arcs. Contrast remains low enough for the field to read first as a color surface.

The apparent base module is approximately 180px on desktop and 106px on mobile. Some arcs span multiple modules. These are visual estimates, not measured SVG dimensions.

A 360px desktop gap and 260px mobile gap separate the end of `main` from the footer. The final captures show the patterned treatment in this interval. Another desktop capture contains a larger visible patterned area, so the motif should not be understood as only a fixed-height footer ornament.

### Footer

**Anatomy:** dark brown field → grouped destination links → large lower-left brand lockup → copyright.

The desktop footer is 546px tall. Navigation begins 72px below its top and occupies the right half: `All Products` in the first group, the two featured sofas in the next, and five remaining products in the last. Links advance vertically in 64px steps. A large white logo sits low on the left, leaving much of the upper-left footer intentionally empty.

`All Products` uses a horizontal arrow. Product links use small diagonal arrows. All recorded product destinations are on the same website; the diagonal glyph alone does not establish new-tab behavior.

The mobile footer is approximately 601px tall. Its navigation changes into two columns: `All Products` on the left, the two featured sofas on the right, then a full-width divider. The remaining products follow in two columns, with SOFFIO BED occupying the final left position. Links begin around x = 10 and 201px.

The mobile brand lockup sits below this navigation with substantial breathing room. Copyright moves beneath it and is left aligned. The rendered footer names `ARFLEX JAPAN LTD.` in its copyright statement.

## Tokens — Motion & Interaction

### Declared Motion Tokens

| Source token | Supplied value | What the evidence establishes |
| --- | --- | --- |
| `--effect-logo-transition-duration` | `1.2s` | A named duration exists; its complete effect and trigger were not captured |
| `--ease-quart-out` | `cubic-bezier(.25, 1, .5, 1)` | Available easing token; component assignment unverified |
| `--ease-expo-out` | `cubic-bezier(.16, 1, .3, 1)` | Available easing token; component assignment unverified |
| `--default-transition-duration` | `.15s` | Default token, not proof of every control's duration |
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Default easing token |

The sampled elements report `animation: none`. Their transition summaries contain `all` without a verified running duration. Neither observation rules out motion on other elements, pseudo-elements, media, or scripts.

### Interaction Evidence and Limits

| Feature | Supported observation | Unverified behavior |
| --- | --- | --- |
| Featured-product navigation | Two links contain in-page anchor destinations | Smooth scrolling, offset handling, and duration |
| Product and location links | Real destination URLs are present | Destination rendering, hover state, and opening mode |
| Sound | A button displays `Sound OFF` | Toggling, playback, volume, persistence |
| Product position indicator | Two feature sections expose a five-part numerical structure | Active state, input method, animation, and media synchronization |
| Header persistence | Full desktop header remains visible at the footer; mobile footer shows sound only | Fixed versus sticky implementation and state-change threshold |
| Room imagery | More than one room view appears across original-page captures | Video format, autoplay, looping, crossfade, or scroll scrubbing |
| Long feature sections | Large measured document spans | Pinning, parallax, and reveal choreography |

A faithful extension should retain the quiet pace and sparse controls. Motion timing beyond the declared tokens should be prototyped and labeled as new design work, rather than described as a recovered source behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening media | Full-viewport room imagery | Establishes material, scale, and atmosphere |
| Header | Transparent, white identity, beige controls | Keeps navigation available over the room |
| Main canvas | Solid Earth Brown | Connects the editorial sections |
| Pattern field | Earth Brown with faint geometric lines | Provides visual rhythm between photographic or content regions |
| Content links | Transparent, square corners | Keeps product discovery visually lightweight |
| Sound state | Tiny outline around `OFF` | Makes media state explicit without a large button |
| Footer | Solid Dark Brown | Creates a strong, quiet closing field |

No general shadow-based elevation system is visible in the supplied captures. Depth comes from the photographs. The interface establishes hierarchy through scale, placement, type weight, and the change from brown to dark brown.

## Imagery

The opening photograph is intimate and materially specific: woven beige upholstery, large cushioned surfaces, warm wall panels, directional daylight, and dark furniture silhouettes close to the camera. The second desktop view broadens the setting to a curved gray sofa, round ottoman, rug, and dark floorboards.

These images occupy the full available width and tolerate purposeful cropping. They are not small decorative illustrations beside marketing copy. Preserve textile detail, natural highlight falloff, and architectural context. The UI should occupy quieter regions of the composition without covering the furniture's defining curves.

The mobile opening keeps the sofa large and crops away peripheral room information. A new implementation should review the mobile crop independently, especially the relationship between the lower-left logo and dark foreground shapes.

### Observed Asset References

| Asset or visual element | Established evidence | Asset-path status |
| --- | --- | --- |
| Opening sofa room imagery | Desktop and mobile captures | No original media URL supplied |
| Alternate gray-sofa room view | Desktop transition capture | No original media URL supplied |
| Small collection identity | Visible header graphic and measured link box | Asset format and URL unavailable |
| Large arflex wordmark | Opening and footer captures | Asset format and URL unavailable |
| Geometric pattern | Desktop and mobile captures | Original vector or stylesheet path unavailable |
| Product-card media areas | Inferred from card and caption geometry | Image nodes and asset URLs unavailable |

Use authorized brand and furniture assets when available. The CSS below supplies layout and an approximate geometric pattern; it does not contain recovered photographs or a reconstructed logo.

## Layout & Responsive Behavior

### Measured Document Structure

| Region | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Opening and introduction span | 0 / 3000px | 0 / 3376px |
| SOFFIO ELEMENTI | 3000 / 10900px | 3376 / 8558.80px |
| ODEON | 13900 / 10900px | 11934.80 / 8558.80px |
| Product Lineup | 24800 / 1404px | 20493.59 / 2238.91px |
| Location | 26204 / 900px | 22732.50 / 780px |
| Pre-footer interval | 27104 / 360px | 23512.50 / 260px |
| Footer | 27464 / 546px | 23772.50 / 601.48px |

The resulting document heights are 28010px on desktop and approximately 24374px on mobile. These are observations of the rendered page, not recommended fixed heights. They may include space allocated to interactions whose implementation was not exposed.

### Responsive Relationships

- **Header:** horizontal desktop navigation becomes a right-aligned mobile stack. The compact identity remains broadly similar in width instead of shrinking with the whole viewport.
- **Opening lockup:** desktop uses roughly a 300px wordmark with a 20px caption; mobile uses roughly 225px with a 14.56px caption.
- **Introduction:** a narrow left-offset desktop column becomes a centered mobile column with a similar reading measure.
- **Featured title:** 104px desktop names become 62.4px mobile names with deliberate line breaks.
- **Featured copy:** the rightmost desktop column becomes nearly full-width mobile copy. CTAs remain smaller and right aligned on mobile.
- **Lineup:** three columns become one. Product order remains intact.
- **Location:** the text group stays centered but gains proportionally larger side margins than the product lineup on mobile.
- **Footer:** three desktop navigation groups become two mobile columns separated into featured and remaining-product groups by a rule.

Only the two listed viewports were inspected. Tablet behavior, breakpoint values, browser-bar resizing, orientation changes, and safe-area handling are not established. The reusable CSS makes explicit choices for those gaps.

## Do’s and Don’ts

### Do

- Keep the structural colors exact: `#8c7c61`, `#3d3a35`, `#ded3c5`, and white.
- Let room imagery occupy the opening viewport and retain its material detail.
- Use the actual wordmark graphic at two distinct scales.
- Keep English product names large, regular weight, and tightly organized.
- Preserve the separate Japanese headline and body families when licensed font files are available.
- Use narrow copy measures and the measured generous Japanese line heights.
- Align desktop cards and featured copy to the 432px column system at 1440px.
- Give mobile its own navigation arrangement, title breaks, and image crop.
- Keep the patterned geometry faint, with straight segments and quarter-circle arcs.
- Preserve the footer's empty space and differentiated link groups.
- Keep the media state visible and meaningful.

### Don’t

- Don’t redraw the wordmark using an unrelated sans-serif font.
- Don’t add rounded white cards, colorful badges, or prominent filled CTAs to this restrained system.
- Don’t treat photographic shadows as a UI drop-shadow specification.
- Don’t squeeze the mobile product lineup into two columns.
- Don’t widen the introductory Japanese copy into a generic desktop text block.
- Don’t apply expanded tracking indiscriminately to English display names.
- Don’t infer the visible lineup heading size from its wrapper's computed font size.
- Don’t hardcode the measured document height to imitate an unverified scroll sequence.
- Don’t claim autoplay, parallax, a carousel, or rolling counters solely from static images and repeated DOM digits.
- Don’t invent asset URLs or assume product-detail pages share this page's complete design.

## Recommended Implementation Additions

These recommendations extend the supplied evidence; they are not verified features of the original page.

- Expand the small header and sound hit areas to comfortable touch targets while keeping the visible labels compact. The measured text-sized controls are considerably smaller than a recommended 44px touch area.
- Add visible keyboard focus and use real links for navigation. Give a graphic identity link an accessible name.
- Implement sound with a clearly named button and an accessible state. Require a user action before audible playback.
- Provide a static or paused alternative if the room imagery is animated. Reduced-motion CSS alone cannot pause a playing video or stop a script-driven media sequence.
- Keep product copy and destination links available before scroll enhancements initialize. Long feature sections should not make content dependent on a successful animation setup.
- Ensure repeated decorative counter digits and duplicate display text do not create confusing screen-reader output.
- Validate text contrast over each media frame. Beige over a bright wall can require adjusted placement or a restrained backing treatment.
- Load a correctly sized opening poster promptly and defer offscreen media. Preserve image dimensions to prevent layout movement.
- Review text zoom, longer labels, mobile safe areas, and the untested tablet range before publishing a reuse of this system.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: Earth Brown `#8c7c61`.
- Footer: Dark Brown `#3d3a35`.
- English interface and product display text: Pale Beige `#ded3c5`.
- Brand graphic and Japanese copy: white `#ffffff`.
- Pattern: faint beige linework; approximately 15% opacity is a recommended starting point.
- Controls: transparent labels and thin outlines, with no general filled-button palette.

### Overall Prompt

“Create an editorial furniture collection page with full-viewport architectural room imagery, a small collection identity at the upper left, and sparse beige product navigation at the upper right. Anchor a large authorized white wordmark near the lower left. Use Earth Brown `#8c7c61`, a Dark Brown `#3d3a35` footer, and Pale Beige `#ded3c5` English text. Set English labels and oversized regular-weight product names in Neue Haas Grotesk Display, Japanese body copy in Noto Sans JP, and the short Japanese statement in DNP Shuei Gothic. Build two featured-product chapters, a three-column desktop product lineup that becomes one column on mobile, a narrow centered location block, and faint quarter-circle geometry. Preserve generous empty space and transparent, square-cornered controls. Treat media sequencing as a separately specified feature.”

### Example Component Prompts

1. **Opening composition:** “Fill the viewport with a close architectural photograph of upholstered furniture. Keep fabric texture and directional daylight visible. Place a small white collection identity at the upper left, beige underlined product links at the upper right, and a large white wordmark with a modest collection caption at the lower left. Review the phone crop independently.”
2. **Featured product:** “Create a centered beige product title at 104px on a 1440px desktop composition. Place a 432px Japanese description column on the right with 14px text and 28px line height. On a 390px phone, use a 62.4px title with deliberate name/category breaks, nearly full-width copy, and a smaller right-aligned View More link. Counter behavior requires a separate specification.”
3. **Product lineup:** “Arrange seven product links in a three-column grid with 48px outer margins and 24px gutters at 1440px. Use unboxed media areas, beige medium-weight labels, and parenthesized categories. A 9:5 media ratio is a reconstruction estimate. At 390px, use one column with approximately 10px side margins.”
4. **Patterned transition:** “Create a muted brown field with low-contrast straight segments and quarter-circle arcs. Start with an approximately 180px desktop module and a 106px mobile module. Mix single-module and larger arcs. Keep the pattern subordinate to photography and typography.”
5. **Footer:** “Build a warm charcoal footer with a large white wordmark low on the left and three sparse navigation groups on the right. On mobile, place All Products opposite the featured sofas, add a fine divider, then arrange the remaining products in two columns. Keep a broad interval before the lower brand lockup and left-aligned copyright.”

## Quick Start

### CSS Custom Properties

This is a reusable responsive shell, not recovered source code. It matches key measurements at the two inspected widths while retaining a conventional root font size. The 48rem breakpoint, unit clamps, lineup heading sizes, pattern SVG, focus treatment, and optional compact-header state are recommendations.

Use the listed font families only with properly supplied font resources; family declarations do not load them. Provide your own authorized header lockup, large wordmark, and furniture media.

Suggested anatomy: `.collection-hero` contains `.collection-media` and `.brand-lockup`; `.site-header` contains identity, navigation, and sound children; `.product-grid` contains linked `.product-card` elements; `.footer-nav` contains `.footer-all`, `.footer-featured`, and `.footer-secondary` groups.

```css
:root {
  /* Measured palette */
  --color-earth: #8c7c61;
  --color-dark: #3d3a35;
  --color-beige: #ded3c5;
  --color-white: #fff;

  /* Measured font families; font loading is separate */
  --font-latin: 'neue-haas-grotesk-display', sans-serif;
  --font-jp: 'Noto Sans JP Variable', sans-serif;
  --font-jp-heading: 'dnp-shuei-gothic-gin-std', sans-serif;

  /* Recommended clamps; 1u = 1px at 1440px */
  --u: clamp(.85px, calc(100vw / 1440), 1.1px);
  --page-gutter: calc(48 * var(--u));
  --column-gap: calc(24 * var(--u));
  --tracking-jp: calc(.8 * var(--u));
  --pattern-line: rgb(222 211 197 / 15%);
  --divider: rgb(222 211 197 / 20%);

  /* Declared source motion tokens; assignment is optional */
  --motion-logo: 1.2s;
  --motion-quick: 150ms;
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --ease-quart-out: cubic-bezier(.25, 1, .5, 1);
  --ease-expo-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }

.collection {
  color: var(--color-white);
  background: var(--color-earth);
  font: 400 calc(16 * var(--u)) / 2 var(--font-jp);
  letter-spacing: var(--tracking-jp);
}

.collection :where(h1, h2, h3, p) { margin: 0; }
.collection :where(a, button) { color: inherit; }
.collection img { display: block; max-inline-size: 100%; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Recommended fixed implementation of the observed overlay */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  background: transparent;
  pointer-events: none;
}

.site-header :where(a, button) { pointer-events: auto; }
.site-header__identity { flex: none; }
.site-header__identity img { inline-size: calc(212 * var(--u)); }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
  margin-inline-start: auto;
}

.site-header__nav a,
.sound-control {
  color: var(--color-beige);
  font: 400 calc(14 * var(--u)) / 1 var(--font-latin);
  letter-spacing: normal;
  white-space: nowrap;
}

.site-header__nav a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.sound-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.sound-control__state {
  padding-inline: calc(2 * var(--u));
  border: 1px solid currentColor;
}

/* Recommended larger hit area without enlarging the label */
.sound-control::before {
  content: '';
  position: absolute;
  inset: -14px -6px;
  min-block-size: 44px;
}

.collection-hero {
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
}

.collection-media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--media-position, 50% 50%);
}

.brand-lockup {
  inline-size: calc(302 * var(--u));
  color: var(--color-white);
}

.brand-lockup img { inline-size: 100%; }
.brand-lockup p {
  margin-block-start: calc(12 * var(--u));
  color: var(--color-beige);
  font: 400 calc(20 * var(--u)) / 1 var(--font-latin);
  letter-spacing: normal;
}

.collection-hero > .brand-lockup {
  position: absolute;
  inset-inline-start: calc(56 * var(--u));
  inset-block-end: calc(56 * var(--u));
}

/* Natural-flow content is the baseline before any enhancement */
.intro-stage {
  display: grid;
  align-items: center;
  min-block-size: 100svh;
  padding-block: calc(80 * var(--u));
}

.intro-copy {
  inline-size: calc(223.2 * var(--u));
  margin-inline-start: 12.5vw;
}

.intro-copy h2 {
  font: 700 calc(24 * var(--u)) / 1.3 var(--font-jp-heading);
}

.intro-copy p {
  margin-block-start: calc(24 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.6;
}

.feature-title-stage {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  padding: calc(80 * var(--u)) var(--page-gutter);
}

.feature-title {
  max-inline-size: 100%;
  color: var(--color-beige);
  font: 400 calc(104 * var(--u)) / 1 var(--font-latin);
  letter-spacing: normal;
  text-align: center;
}

.feature-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--column-gap);
  padding: calc(64 * var(--u)) var(--page-gutter);
}

.feature-copy { grid-column: 3; }
.feature-copy > p {
  font-size: calc(14 * var(--u));
  line-height: 2;
}

.feature-meta {
  display: grid;
  justify-items: end;
  gap: calc(8 * var(--u));
  margin-block-end: calc(24 * var(--u));
  color: var(--color-beige);
  font-family: var(--font-latin);
  letter-spacing: normal;
}

.feature-counter-total {
  font-size: calc(40 * var(--u));
  font-weight: 300;
  line-height: 1;
}

.feature-label {
  font-size: calc(20 * var(--u));
  line-height: 1;
}

.detail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: calc(59 * var(--u));
  margin-block-start: calc(20 * var(--u));
  padding: calc(20 * var(--u)) calc(12 * var(--u));
  color: var(--color-beige);
  background: transparent;
  border-radius: 0;
  font: 500 calc(16 * var(--u)) / 1.2 var(--font-latin);
  letter-spacing: normal;
  text-decoration: none;
}

.lineup {
  padding: calc(124 * var(--u)) var(--page-gutter)
    calc(120 * var(--u));
}

/* Recommended visible heading size; inner source style unavailable */
.lineup-heading {
  margin-block-end: calc(64 * var(--u));
  font: 400 calc(56 * var(--u)) / 1.16 var(--font-latin);
  letter-spacing: normal;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u)) var(--column-gap);
}

.product-card {
  display: block;
  min-inline-size: 0;
  text-decoration: none;
}

/* Inferred media ratio, not an independently measured image rule */
.product-card img {
  inline-size: 100%;
  aspect-ratio: 9 / 5;
  object-fit: cover;
  border-radius: 0;
}

.product-card__label {
  min-block-size: calc(33 * var(--u));
  margin-block-start: calc(12 * var(--u));
  color: var(--color-beige);
  font: 500 calc(20 * var(--u)) / 1.3 var(--font-latin);
  letter-spacing: normal;
}

.location {
  display: grid;
  place-items: center;
  min-block-size: calc(900 * var(--u));
  padding-block: calc(80 * var(--u));
}

.location-copy {
  inline-size: calc((100% - 2 * var(--page-gutter)
    - 2 * var(--column-gap)) / 3);
}

.location-copy h2 {
  font: 400 calc(20 * var(--u)) / 1 var(--font-latin);
  letter-spacing: normal;
}

.location-copy p {
  margin-block-start: calc(28 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.7;
}

.location-copy .detail-link {
  margin-block-start: calc(28 * var(--u));
}

/* Recommended geometric approximation, not the original artwork */
.pattern-field {
  min-block-size: calc(360 * var(--u));
  background-color: var(--color-earth);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%23ded3c5' stroke-opacity='.15' stroke-width='1'%3E%3Cpath d='M0 180H720M0 360H540M180 540H720M180 0V720M360 0V540M540 180V720M0 0A180 180 0 0 1 180 180M180 360A180 180 0 0 0 360 180M360 360A180 180 0 0 1 540 540M720 0A360 360 0 0 1 360 360M0 540A180 180 0 0 1 180 720M540 720A180 180 0 0 0 720 540'/%3E%3C/g%3E%3C/svg%3E");
  background-size: calc(720 * var(--u)) calc(720 * var(--u));
}

.site-footer {
  position: relative;
  min-block-size: calc(546 * var(--u));
  padding: calc(72 * var(--u)) var(--page-gutter)
    calc(200 * var(--u));
  background: var(--color-dark);
}

.footer-nav {
  display: grid;
  grid-template-columns: calc(149 * var(--u))
    calc(143 * var(--u)) minmax(0, 1fr);
  column-gap: calc(88 * var(--u));
  inline-size: calc(678 * var(--u));
  max-inline-size: 100%;
  margin-inline-start: auto;
  align-items: start;
}

.footer-featured,
.footer-secondary {
  display: grid;
  gap: calc(48 * var(--u));
}

.footer-nav a {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--color-beige);
  font: 500 calc(14 * var(--u)) / 1.142857 var(--font-latin);
  letter-spacing: normal;
  text-decoration: none;
}

.site-footer > .brand-lockup {
  position: absolute;
  inset-inline-start: var(--page-gutter);
  inset-block-end: calc(48 * var(--u));
}

/* Copyright scale and positioning approximate the captures */
.footer-copyright {
  position: absolute;
  inset-inline-end: var(--page-gutter);
  inset-block-end: calc(48 * var(--u));
  color: var(--color-beige);
  font: 400 calc(12 * var(--u)) / 1.3 var(--font-latin);
  letter-spacing: normal;
}

/* Recommended breakpoint; the original breakpoint was not supplied */
@media (max-width: 48rem) {
  :root {
    --u: clamp(.95px, calc(100vw / 375), 1.15px);
    --page-gutter: calc(10 * var(--u));
    --column-gap: calc(12 * var(--u));
  }

  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(8 * var(--u)) 0;
    padding: calc(10 * var(--u));
    padding-block-start: max(calc(10 * var(--u)),
      env(safe-area-inset-top, 0px));
  }

  .site-header__identity { grid-area: 1 / 1; }
  .sound-control {
    grid-area: 1 / 2;
    align-self: center;
    justify-self: end;
  }

  .site-header__nav {
    grid-area: 2 / 2;
    display: grid;
    justify-items: end;
    gap: calc(12 * var(--u));
    margin: 0;
  }

  .site-header__nav a,
  .sound-control {
    font-size: calc(12 * var(--u));
    line-height: 1.2;
  }

  /* Optional state; its application trigger must be implemented */
  .site-header[data-compact='true'] .site-header__identity,
  .site-header[data-compact='true'] .site-header__nav {
    visibility: hidden;
    pointer-events: none;
  }

  .brand-lockup { inline-size: calc(216 * var(--u)); }
  .brand-lockup p {
    margin-block-start: calc(8 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .collection-hero > .brand-lockup {
    inset-inline-start: calc(24 * var(--u));
    inset-block-end: calc(58 * var(--u));
  }

  .intro-copy { margin-inline: auto; }
  .feature-title { font-size: calc(60 * var(--u)); }
  .feature-title__line { display: block; }
  .feature-details { grid-template-columns: 1fr; }
  .feature-copy { grid-column: auto; }

  .feature-meta {
    display: flex;
    align-items: end;
    justify-content: space-between;
  }

  .feature-counter-total { font-size: calc(24 * var(--u)); }
  .feature-label { font-size: calc(16 * var(--u)); }

  .detail-link {
    inline-size: calc(184 * var(--u));
    max-inline-size: 100%;
    margin-inline-start: auto;
  }

  .lineup { padding-block-start: calc(80 * var(--u)); }
  .lineup-heading {
    margin-block-end: calc(40 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: 1.25;
  }

  .product-grid {
    grid-template-columns: 1fr;
    row-gap: calc(32 * var(--u));
  }

  .product-card__label {
    min-block-size: calc(29.5 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .location { min-block-size: calc(750 * var(--u)); }
  .location-copy { inline-size: 79%; }

  .pattern-field {
    min-block-size: calc(250 * var(--u));
    background-size: calc(408 * var(--u)) calc(408 * var(--u));
  }

  .site-footer {
    min-block-size: calc(578 * var(--u));
    padding-block: calc(60 * var(--u)) calc(276 * var(--u));
  }

  .footer-nav {
    inline-size: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(40 * var(--u)) calc(12 * var(--u));
  }

  .footer-all { grid-area: 1 / 1; }
  .footer-featured { grid-area: 1 / 2; }
  .footer-featured,
  .footer-secondary { row-gap: calc(32 * var(--u)); }

  .footer-secondary {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(12 * var(--u));
    padding-block-start: calc(40 * var(--u));
    border-block-start: 1px solid var(--divider);
  }

  .footer-nav a {
    gap: calc(6 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: 1;
  }

  .site-footer > .brand-lockup {
    inset-block-end: calc(60 * var(--u));
  }

  .footer-copyright {
    inset-inline: var(--page-gutter);
    inset-block-end: calc(40 * var(--u));
    font-size: calc(10 * var(--u));
  }
}

/* Recommended accessible feedback */
.collection :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Media and script-driven motion also need explicit pause logic */
@media (prefers-reduced-motion: reduce) {
  .collection *,
  .collection *::before,
  .collection *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS intentionally keeps the introduction and feature sections in usable natural flow. It does not recreate the source's 10,900px feature spans, media sequencing, or repeated counter mechanics. Add those only after their behavior has been specified and verified independently.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. Define the custom properties above first. Utility-related properties occur in the supplied evidence, but its framework version and build configuration are not established.

```css
@theme inline {
  --color-collection-earth: var(--color-earth);
  --color-collection-dark: var(--color-dark);
  --color-collection-beige: var(--color-beige);
  --color-collection-white: var(--color-white);

  --font-collection-latin: var(--font-latin);
  --font-collection-jp: var(--font-jp);
  --font-collection-jp-heading: var(--font-jp-heading);

  --spacing-collection-unit: var(--u);
  --spacing-collection-gutter: var(--page-gutter);
  --spacing-collection-column-gap: var(--column-gap);

  --text-collection-body: calc(14 * var(--u));
  --text-collection-caption: calc(20 * var(--u));
  --text-collection-display: calc(104 * var(--u));

  --ease-collection-quart: var(--ease-quart-out);
  --ease-collection-expo: var(--ease-expo-out);
}
```

The display token above is the desktop size. Apply the mobile 60u display size through a responsive rule rather than assuming that token changes automatically.

## Sources & Evidence

- **Inspected original and final page:** [arflex — 2025–26 Collection](https://www.arflex.co.jp/2025-26collection/). The supplied observation reports HTTP 200 and identical original/final URLs.
- **Capture time:** September 12, 2026, 13:54:43.180 UTC / 22:54:43.180 JST.
- **Desktop evidence:** three original-page captures at 1440 × 1000, plus rendered text, links, custom properties, element rectangles, and computed typography and colors. Document height: 28010px.
- **Mobile evidence:** two original-page captures at 390 × 844, plus equivalent DOM and style evidence. Document height: approximately 24374px.
- **Visual coverage:** opening room imagery, header states, patterned fields, and footer. Introduction, product features, lineup, and location measurements are DOM-supported; their complete intermediate visual states were not supplied.
- **Observed navigation targets:** in-page SOFFIO and ODEON anchors, the collection lineup route, seven product-detail routes, and the location route. These destinations were present as rendered links and were not followed for this reference.
- **Inspection limits:** the supplied capture process waited for loading and sampled stability, traversed intermediate scroll positions, and used finite readiness limits. Perpetual animations were paused during readiness checks and resumed afterward. This does not establish complete reveal behavior, playback timing, or semantic completeness.
- **Untested behavior:** sound activation, hover, keyboard interaction, counter input, media seeking, reduced motion, tablet layouts, and linked-page rendering. Original media asset URLs and complete animation code were not supplied.

This reference describes the current page supported by these captures and measurements. Calculated geometry and recommended implementation choices are labeled separately from observed source values.