# Mr.Standard — Style Reference

> A housing brand presented through warm paper, wooden interiors, and a scrapbook of personal interests.

**Website / Original URL:** [mr-standard.lifelabel.jp](https://mr-standard.lifelabel.jp/)
**Final URL:** [https://mr-standard.lifelabel.jp/](https://mr-standard.lifelabel.jp/)
**HTTP status:** 200; no redirect reported.
**Inspected:** October 2, 2026, 01:14 JST — supplied retrieval timestamp: October 1, 2026, 16:14:49.210 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Theme:** predominantly warm and light, with a dark green framed feature and a black global footer. No selectable color theme was evidenced.
**Scope:** the current housing-brand website, including its captured entry state, partial opening photo composition, concept and product content, personal-lifestyle feature, specifications, editorial links, service links, social promotion, and global footer. Visual evidence consists of three desktop captures and two mobile captures, supplemented by rendered DOM text, links, bounds, and computed styles.

Mr.Standard connects a simple house with the objects people choose to live with. Beige paper, plywood interiors, plants, books, clothing, records, and small collected objects carry that idea through the page. Photography appears as overlapping panels and isolated cutouts. Large graphic lettering organizes the more playful compositions, while Japanese body text and compact English section labels provide an editorial reading rhythm.

The site is a long product-and-culture experience with routes into magazine content, online viewing, an app, and store consultation. Its visual structure changes substantially between sections: a quiet entry image, photographic arrangements, a tan lifestyle stage inside a green frame, and a dense black footer with pixel-style details. Preserve these distinct section identities when reusing the design.

A significant limitation is visible on mobile: the 390px viewport contains a measured 1200px-wide body and main region. The opening photographs and footer are consequently cropped. Several mobile typography rules do activate, but the supplied page does not demonstrate a consistently fitted mobile layout.

## How to Read This Reference

- **Measured** means a value reported in the supplied rendered DOM or computed-style evidence. These are measurements at the two inspected viewports, not recovered stylesheet formulas.
- **Visual estimate** means an approximate reading of a current-page screenshot. Estimated colors were not programmatically sampled.
- **Calculated** means simple arithmetic from measured bounds, such as the 30px gap between topic thumbnails.
- **Recommended** means an implementation choice for a new version. Responsive repairs, accessible controls, CSS class names, and unverified motion fall into this category.
- All token names below are implementation aliases. The supplied custom-property collection was empty; no original variable names were established.
- Several prominent headings have empty text content in the sampled elements and appear as graphic lettering. Their element font size is not a reliable measurement of the visible artwork's lettering.
- Offscreen navigation and story content are documented as DOM evidence. Their presence does not prove that their opening behavior, focus management, or final visible placement was tested.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Textured Paper | Approximately `#DFD5BD` | `--color-paper` | Visual estimate of the pale beige opening canvas; the visible grain produces many local shades |
| Lifestyle Sand | `#D8C3A3` | `--color-sand` | Measured `rgb(216, 195, 163)` on the personal-lifestyle section; the large flat field inside the green frame |
| Pale Oat | `#DECFB7` | `--color-oat` | Measured on an unnamed mobile section immediately following SPEC; its complete visual treatment was not captured |
| Link Cream | `#EEE5CE` | `--color-cream` | Measured `rgb(238, 229, 206)` on magazine-continuation and online-viewing pills |
| Black Ink | `#000000` | `--color-ink` | Measured body and link text; also the visible global-footer background |
| White | `#FFFFFF` | `--color-white` | Measured on desktop product headings; visually present in the social strip and reversed footer content |
| Forest Frame | Approximately `#2E5138` | `--color-forest` | Visual estimate of the lifestyle stage's perimeter frame |
| Ochre Lettering | Approximately `#B48642` | `--color-ochre` | Visual estimate of the filled, black-outlined New Standard lettering |
| Dialogue Gray | Approximately `#303030` | `--color-dialogue` | Visual estimate of the footer's game-dialogue panels |

The paper color is not established by the sampled HTML or BODY background: those computed backgrounds are transparent. Likewise, the measured cream belongs to specific links; it should not automatically be treated as the exact page-background color.

The first desktop capture is unusually pale, including its house, wordmark, and nearby text. The evidence does not identify whether this comes from an opening layer, image treatment, opacity, or another state. Do not derive a global low-opacity text system from that single frame.

### Accent Distribution

The green perimeter is a section-scale color, while ochre is concentrated in graphic lettering. Two lower-right utility graphics introduce small green and blue accents. The footer uses bright pixel-style social symbols and cyan, red, yellow, and green section icons.

These accents have local roles. They do not form an evidenced set of interchangeable button variants. Keep the main content in paper, sand, black, and photographic wood tones; use stronger colors where the composition already calls for them.

## Tokens — Typography

### Japanese Body and Product Text

The supplied computed stack is:

```css
font-family: MyYuGothicM, 游ゴシック, 'Yu Gothic', YuGothic,
  'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN',
  メイリオ, Meiryo, sans-serif;
```

`MyYuGothicM` is a declared family or alias. Its font file and definition were not supplied. The computed stack does not establish which installed face rendered each glyph.

The root is measured at 16px, weight 400, with 0.64px letter spacing. Concept copy uses weight 700 and exceptionally open desktop leading. Product descriptions use regular weight and a tighter measure. This contrast gives the introductory passages a deliberate, almost spoken cadence while keeping practical explanations compact.

The root's measured 16px line height is not the reading line height throughout the page. Use the component-specific values below.

### English Section Labels and Small Links

`Lato, sans-serif` is declared for the concept kicker, CONTENTS label, SPEC and TOPICS headings, dimension figures, and sampled cream links.

- SPEC and TOPICS: 30px, weight 700, 30px line height, 2.4px tracking.
- Concept kicker: 14px, weight 700, 14px line height, 0.28px tracking.
- CONTENTS: 16px on desktop and 14px on mobile, both with tracking equal to 0.08em.
- Magazine-continuation links: 14px, weight 700, 14px line height.
- Online-viewing VIEW: 12px, weight 700, 12px line height.

Lato is an evidenced declaration, but successful font-file loading was not separately recorded. Do not substitute a guessed display font for the graphic titles and claim it is original.

### Graphic Lettering and Brand Marks

The Mr.Standard identity, the large lifestyle title, and several Japanese headlines depend on their visible graphic shapes. The lifestyle title combines a heavy black first line with much larger ochre lettering outlined in black. Its Japanese subtitle has a looser, hand-rendered appearance.

Treat this lettering as artwork unless the original assets or font definitions become available. The sampled 16px font size on an empty containing element does not describe the lettering inside that graphic.

The footer uses a heavy sans-serif visual treatment. Its actual font family was not included in the sampled footer evidence; do not automatically assign the footer to Lato.

### Type Scale

| Role | Desktop measured value | Mobile measured value | Weight / tracking |
| --- | --- | --- | --- |
| Root text | `16px / 16px` | `16px / 16px` | 400; `0.64px` |
| Concept kicker | `14px / 14px` | `14px / 14px` | 700; `0.28px`; Lato declaration |
| Concept paragraph | `16px / 38.4px` | `14px / 26.04px` | 700; `0.64px` |
| Product introduction | `16px / 28px` | `14px / 25.9px` | 700; `0.64px` |
| Exterior feature title | `29.25px / 39.37px` | `20px / 30px` | 700; `0.64px` |
| Plywood-space title | `29.25px / 43.875px` | `19px / 28.5px` | 700; white desktop, black mobile |
| Shelf/craft-space title | `29.25px / 55.575px` | `19px / 28.5px` | 700; white desktop, black mobile |
| Product description | `15px / 24px` | `12px / 21.96px` | 400; `0.64px` |
| Story-panel paragraph | `13px / 26px` | `13px / 26px` | 400; measured while offscreen |
| SPEC / TOPICS | `30px / 30px` | `30px / 30px` | 700; `2.4px`; Lato declaration |
| Dimension figures | `16px / 16px` | `13px / 13px` | 700; tracking changes from `1.28px` to `0.26px` |
| Topic title | `16px / 28px` | `14px / 24.5px` | 700; `0.64px` |
| Magazine-continuation link | `14px / 14px` | Same | 700; `0.64px`; Lato declaration |
| Online-viewing VIEW | `12px / 12px` | Same | 700; `0.64px`; Lato declaration |

Footer type is visually estimated at roughly 40px for the large brand mark, 26px for navigation-group headings, 18px for primary lists, and 12px for legal links. These are screenshot estimates, not measured font sizes.

## Tokens — Spacing & Shapes

The evidence shows component-specific spacing, not a recoverable universal spacing scale. Large section intervals coexist with tightly arranged objects and small utility controls.

### Spacing Scale

| Use | Value | Evidence |
| --- | --- | --- |
| Desktop brand position | `35px` from left, `40px` from top | Measured link bounds |
| Mobile brand position | `25px` from left and top | Measured link bounds |
| Concept kicker to graphic heading | `20px` | Calculated from desktop bounds |
| Concept graphic heading to paragraph | `54px` desktop; `33px` mobile | Calculated from reported bounds |
| Concept section padding | `100px 0 127px` desktop | Measured |
| Mobile concept padding | `80px 15px 122px` | Measured, but applied inside a 1200px-wide region |
| Product section top padding | `96px` desktop; `80px` mobile | Measured |
| Topic thumbnail gap | `30px` | Calculated from successive horizontal positions |
| Desktop TOPICS section padding | `160px` above and `170px` below | Measured |
| Long cream-link padding | `17px 66px` | Measured |
| Small VIEW-link padding | `13px 45px` | Measured |
| Lifestyle frame | Approximately `35px` on each side | Visual estimate at 1440 × 1000 |

### Border Radius

| Element | Value / shape | Evidence |
| --- | --- | --- |
| Sampled content sections and topic thumbnails | `0` | Measured |
| Cream links | `24px` | Measured |
| Product pagination indicators | `50%` | Measured |
| Lifestyle plant photograph | Broad capsule-like crop | Screenshot observation; exact radius unknown |
| Social avatar | Circle | Screenshot observation |
| Back-to-top control | Circle, approximately `60px` across | Visual estimate |
| Footer dialogue | Stepped, pixel-like outline | Screenshot observation; not a normal smooth-radius card |

Rounded treatment is selective. It appears in pills, circular utilities, and occasional image masks. Most photographs and content boundaries remain square or follow a cutout silhouette.

### Layout Measurements

| Element | Desktop measurement | Mobile measurement / limitation |
| --- | --- | --- |
| Document height | Approximately `16,038px` | Approximately `20,043px` |
| BODY / MAIN width | `1440px` | `1200px` inside a `390px` viewport |
| Opening section | `1440 × 832.31px` | `1200 × 1018.69px`; large photo crop visible |
| Main H1 container | `457.88 × 110.34px` | `315 × 76px`, beginning at `x=442.5px`, beyond the visible viewport |
| Concept section | `800px` wide, starting at `x=320px` | `1200px` wide; text region `1170px` wide |
| Concept graphic heading | `431 × 94px` | `326 × 71px` |
| Product description example | `680px` wide | `1200px` outer box with horizontal padding |
| SPEC heading region | `1040px` wide | `1140px` wide inside the oversized body |
| Topic thumbnail | `352 × 352px` | `828 × 828px` |
| Story text column | Approximately `194.39px` | `315px`; both sampled offscreen |
| Long cream link | Approximately `299.27 × 48px` | Same |
| Small VIEW link | Approximately `124.28 × 38px` | Same |

The desktop lifestyle title's graphic containers measure approximately 168.75 × 38.61px for its first line, 213.75 × 58.95px for New, 528.75 × 67.22px for Standard., and 472.5 × 26.11px for the subtitle. These are artwork-container bounds, not font sizes.

## Components

### Brand Header and Contents Navigation

**Role:** retain the parent brand and expose navigation through a small utility mark.

The visible header consists of the LIFE LABEL wordmark at the upper left and a dotted-grid menu mark at the upper right. It does not appear as a conventional filled navigation bar. The sampled HEADER has zero layout height, consistent with separately positioned contents, though fixed-versus-absolute positioning was not supplied.

The brand link measures 123 × 16px in both viewports. Its inset changes from 35px left / 40px top on desktop to 25px on both axes on mobile.

The DOM contains CONTENTS followed by CONCEPT, PRODUCT, It’s My New Standard., SPEC, and TOPICS, then APP, CONTACT, and INSTAGRAM. The section links point to actual page anchors. Desktop navigation rows have 17px vertical padding and approximately 58px bounds. Mobile rows use 13px vertical padding; the longer lifestyle label occupies a taller row.

Navigation text is positioned beyond the right edge in the supplied measurements: for example, desktop CONTENTS begins at x=1560 and mobile CONTENTS at x=456. This supports a closed offscreen navigation arrangement. It does not establish the open panel's animation, background, dismissal behavior, or accessibility.

### Captured Entry State

**Role:** establish the house silhouette and product identity in the first supplied desktop frame.

A small front-facing house sits near the center of a broad textured beige field. Its visible footprint is approximately 360px wide. A gray-brown Mr.Standard wordmark sits below it, followed by the smaller produced by POPEYE mark and a thin horizontal rule approximately 228px wide.

The house has a simple triangular roof, a wood-framed horizontal window, a wooden door, and a narrow planted base. The composition is quiet, with extensive empty space around it. The next section's small kicker begins near the bottom of the viewport.

This frame and the underlying H1 bounds do not coincide as a single static composition. Treat it as the captured entry state. A loading phase or transition is plausible, but neither a progress mechanism nor its timing was verified. Do not assign a percentage meaning to the horizontal rule.

### Opening Room Collage

**Role:** introduce the material character and lived-in atmosphere of the house.

The current mobile capture shows overlapping photographic panels beginning beneath the header area. Warm plywood ceilings and walls dominate. Visible details include a hanging mobile, a dark floor lamp, framed artwork, a projected image, and the edge of a lit interior surface. Panels overlap with different edges and orientations, producing a pasted-photo effect.

This is a partial view: the mobile body is wider than the viewport, so the capture shows only a slice of the arrangement. The complete desktop opening composition is not established by the current-page screenshots. Preserve the evidenced layering and wood photography without inventing an exact unseen desktop arrangement.

For a new implementation, use a local collage container with positioned image layers and explicit image dimensions. Keep its decorative clipping separate from the page's text layout.

### Concept Introduction

**Role:** explain the house as a setting for personal interests.

An 800px-wide centered desktop section combines a small Lato kicker, a graphic Japanese heading, and bold Japanese paragraphs. The kicker reads Mr.Standard is ... at 14px. The paragraph begins with the actual source sentence `家は、人生を楽しむための舞台だ。`.

The large 38.4px line height on 16px desktop text creates a calm, paced reading block. The concept heading is approximately 431px wide, with a 54px gap before the paragraph. This is an editorial opening, with substantial vertical breathing room.

Mobile styles reduce the paragraph to 14px / 26.04px and introduce additional line breaks. However, its measured container is still much wider than the viewport. A new implementation should preserve the reading rhythm while fitting the column to the screen.

### Product Feature Scenes

**Role:** translate the housing concept into architectural features.

The rendered content identifies three main subjects: the triangular-roof single-story exterior, a connected interior finished in lauan plywood, and open shelves plus a craft space.

The desktop feature titles use approximately 29.25px bold type. Two interior titles are computed white, while their explanatory paragraphs are black at 15px / 24px. Their positions and color changes indicate an image-oriented presentation, but complete screenshots of these product scenes were not supplied.

Mobile styles move those interior titles to black at 19px / 28.5px. The measured title and description positions place the text after the associated pagination region. This is evidence of a responsive presentation change, even though the outer width remains oversized.

Two sampled pagination groups each contain three circular indicators: one 34 × 34px and two 8 × 8px. Width and height have explicit 300ms transitions. Their exact click behavior and image-change mechanism were not tested.

### It’s My New Standard Stage

**Role:** express the variety of lifestyles the same house can support.

This is the clearest full desktop composition in the supplied evidence. A tan field fills most of the screen inside an approximately 35px dark green frame. A short white instruction runs across the top border, and white vertical branding runs along both sides.

The central title is arranged in three levels: a heavy black It’s My line, a larger New, and the widest Standard. line. The last two use ochre interiors and black outlines. A Japanese subtitle sits beneath: `これが僕らのMr.Standardの楽しみ方。`.

Personal objects occupy the perimeter rather than a regular grid:

- Upper left: a capsule-cropped plant photograph, overlapping clothing cutouts, and a small carved figure.
- Upper right: an art-filled wall photograph with a smaller workstation image overlapping below.
- Lower left: a bookshelf photograph, an open publication, a bottle, and ceramic drinking vessels.
- Lower right: a record player, record sleeves, and smaller personal objects.

The center remains mostly clear so the title is immediately legible. The cutouts vary in scale and angle, giving the page a collected rather than catalogued feeling. Some photographs retain rectangular edges; others use isolated silhouettes or broad masks.

The green frame reads as a viewport-scale composition in this capture. Its persistence during scrolling was not established. The large measured section height does not by itself prove a pinned or scroll-scrubbed implementation.

### Personal Story Content

**Role:** attach a person's interests and voice to the lifestyle feature.

The stage's visible instruction invites visitors to click a person. The rendered DOM contains associated story content with a short statement, a name and occupation, a paragraph, graphic material, and sometimes a magazine-continuation link.

Measured paragraphs use 13px / 26px. Desktop text columns are approximately 194px wide; mobile columns are approximately 315px wide. Optional cream links read `続きをMAGAZINEで読む` and measure about 299 × 48px.

These elements were sampled offscreen. The evidence supports their content anatomy and typography, but not a verified modal, drawer, or transition sequence. Their names and occupations belong to editorial content; they are not website-production credits.

A reusable implementation should make the selectable subject and its associated content explicit, with a keyboard-operable trigger and an accessible reading view.

### Specifications and Online Viewing

**Role:** provide practical housing information and an external interior-viewing route.

SPEC is a 30px Lato heading with 2.4px tracking. The desktop heading region is 1040px wide. The section contains a plan-related graphic, dimension figures 11,830 and 7,280, and two area rows showing 86.12㎡（26.05坪）.

The source text includes `©Yoshifumi Takeda` within this section. The evidence does not specify the person's precise role, so it should not be expanded into an architectural or website-design credit.

An ONLINE VIEWING label and a short Japanese invitation accompany a cream VIEW link. The link points to [the recorded Matterport destination](https://my.matterport.com/show/?m=HLPdcf47ieq). The destination was not inspected, so embedded playback, navigation controls, and loading behavior are outside this reference.

The VIEW link is approximately 124 × 38px, with a 24px radius and 12px bold Lato text. Its visual treatment is compact and quiet.

### Topics Rail

**Role:** connect the product to continuing lifestyle and magazine coverage.

TOPICS uses the same 30px tracked Lato treatment as SPEC. The desktop rail has square 352px thumbnail links, 30px gaps, bold 16px / 28px titles, and publication dates in the text evidence. Three complete thumbnail positions are measured at x=163, 545, and 927, with neighboring items extending beyond the viewport.

The desktop DOM includes repeated entries at the ends of the sequence. This is consistent with a looping rail or carousel, but autoplay, dragging, pagination, and loop timing were not verified. Do not treat repeated DOM items as separate editorial stories.

On mobile, topic thumbnails measure 828 × 828px while the viewport is only 390px wide. This is an observed overflow condition, not a recommended mobile card size.

The reusable anatomy is a square image, a substantial title directly below it, and a date. No rounded card shell or elevated card surface is evidenced. A final `MAGAZINEを見る` link provides a route to the wider magazine.

### App, Consultation, and Floating Utility Graphics

**Role:** offer practical next steps after the editorial content.

The DOM contains APP and CONTACT sections with short explanatory copy and VIEW labels. Their destinations are the LIFE LABEL app page and store directory. These are link destinations; a booking form or completed reservation flow was not inspected.

In the desktop lifestyle capture, two small illustrated utility graphics appear near the lower-right edge. One pairs a green label with a phone image and the source label `家づくりアプリ`. The other pairs a blue label with a calendar image and `来店予約`.

Their silhouette and illustration make them feel like stickers attached to the composition. Their position suggests floating utilities, but fixed positioning across all scroll states was not verified. Keep this uncertainty separate from the clearly observed appearance.

### Partner Information and Social Follow Strip

**Role:** explain the collaborating brands and connect visitors to ongoing updates.

The DOM contains separate descriptions and OFFICIAL SITE links for LIFE LABEL and POPEYE. The page title and visible produced by POPEYE mark establish the housing collaboration; they do not identify the website's designers or developers.

A white follow strip appears above the black footer. In the desktop screenshot it is approximately 226px high. Its main elements are a circular pink avatar, an Instagram glyph and lifelabel_official handle, a compact black FOLLOW ME! control, a short Japanese explanatory paragraph, and a circular TOP control at the right.

Visual estimates place the avatar at about 105px across, the black follow control at about 183 × 28px, and the TOP circle at about 60px across. The strip uses clean white space to separate the tactile product content from the dense global navigation below.

### Global Footer

**Role:** return the visitor to the broader LIFE LABEL content and service ecosystem.

The footer is a substantial black field with white text. In the desktop capture, its content spans approximately x=160 to x=1280, giving a 1120px inner width. A large LIFE LABEL mark sits at the upper left; a row of bright pixel-style social symbols sits at the upper right.

Below, three main areas organize the content:

1. LL MAGAZINE, with a white search control and two parallel lists for categories and tags.
2. HOUSE LINE-UP and PROJECT, stacked with smaller navigation links.
3. WHAT’S LIFE LABEL, accompanied by a gray, white-outlined game-dialogue graphic.

Small colored icons distinguish the groups: a cyan book, red house, yellow lightbulb, and green person. The dialogue includes a triangular selection marker and the source labels `はい` and `いいえ`. The affirmative link points to the brand's About page; the negative choice's behavior was not established.

A thin white rule separates the navigation from legal links and `© HPM Inc. ALL RIGHTS RESERVED.`. That is an observed copyright line, not independent verification of a corporate relationship.

The footer occupies approximately 740px in both supplied viewport states. On mobile, its large text and columns remain cropped rather than stacking into a fitted layout. The visible 40px left inset is consistent with a 1120px block centered inside the measured 1200px body: `(1200 − 1120) / 2 = 40`.

## Tokens — Motion & Interaction

| Treatment | Evidence | What remains unverified |
| --- | --- | --- |
| Product pagination size change | Explicit `width 0.3s, height 0.3s`; 8px and 34px circular states | Trigger, image transition, autoplay, and timing between slides |
| Entry presentation | Centered house, identity, and horizontal rule in the first desktop capture | Whether it is a loader, intro overlay, or another temporary state; duration and exit behavior |
| Contents navigation | Anchor destinations and offscreen menu content are present | Open/close animation, backdrop, focus handling, and scroll locking |
| Personal-story selection | Visible click instruction; related content exists offscreen | Exact trigger mapping, opening layout, dismissal, and motion |
| Topics rail | Sequential horizontal bounds and repeated desktop entries | Dragging, autoplay, looping behavior, and controls |
| App and store utilities | Illustrated links visible at the lower right in one desktop frame | Persistence across scroll positions and hover changes |
| TOP control | Circular arrow and TOP caption are visible | Whether return scrolling is immediate or animated |
| Footer dialogue | Game-like visual presentation and an About destination for the affirmative choice | Any typing animation or response to the negative choice |

Many sampled elements report `animation: none` and a generic `transition: all`. These entries do not prove that the page is motionless. They also do not establish useful durations: motion could belong to descendants, pseudo-elements, or script-controlled transforms outside the sample.

The capture process waited for load, visible-image decoding, and sampled layout stability, with an overall readiness limit of 15 seconds. Perpetual animations were temporarily paused during readiness checks and resumed afterward. Scrolling passed through intermediate positions. This is stronger evidence than an immediate screenshot, but it is not a complete interaction recording.

**Recommended motion:** retain the evidenced 300ms pagination resizing. If adding collage or panel transitions, use brief opacity or small-position changes as a new implementation choice. Provide a static first render and reduced-motion behavior. No particular spring, parallax formula, or scroll-scrubbing library is supported by the supplied evidence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | Pale beige with subtle paper-like grain | Creates a tactile setting for the house and photographs |
| Photographic layers | Warm plywood, natural interiors, varied light | Supplies material detail and lived-in atmosphere |
| Lifestyle stage | Flat measured sand with dark green perimeter | Gives the personal-object collage a distinct chapter |
| Text and graphic lettering | Black, selective white, outlined ochre | Establishes hierarchy without a card system |
| Cream links | Small rounded fills | Separates navigation actions from surrounding imagery |
| Follow strip | Clean white | Introduces the social account and separates the footer |
| Global footer | Solid black with white lists and colored pixel details | Organizes the broader site ecosystem |
| Footer dialogue | Dark gray with stepped white outline | Adds a small game-interface motif |

There is no evidenced general shadow or elevation system. Depth comes primarily from overlapping photographs, cutout edges, and the contrast between major section surfaces.

## Imagery

The key image language is domestic and specific: lauan walls, a pitched roof, plants, clothing, collected objects, art books, ceramics, records, and workspaces. These items communicate how a simple architectural shell can support different personalities.

Use a mixture of full rectangular photographs and transparent cutouts. Some layers can tilt or overlap; others should remain square to stabilize the composition. Preserve natural photographic detail. The footer's pixel aesthetic is local and should not be applied to the interior photography.

The paper grain should stay low contrast. It supports the tactile impression without competing with text or resembling an opaque texture filter over every photograph. The source texture file, repeat size, and compositing method were not supplied.

### Observed Asset References

No image source URLs, font-file URLs, or texture filenames were included in the supplied evidence. The following is an inventory of observed asset roles, not a downloadable asset manifest.

| Asset role | Evidence | Reuse guidance |
| --- | --- | --- |
| Front-facing house cutout | Current desktop entry capture | Retain the roof silhouette, isolated edges, window, door, and planted base |
| Mr.Standard / POPEYE identity | Entry capture and original-page text | Use authorized brand artwork; do not guess a matching font |
| Layered plywood interiors | Current mobile opening capture | Preserve photo detail, overlapping panel edges, and warm material color |
| Lifestyle object collage | Current desktop framed stage | Mix object silhouettes, rectangular scenes, and an occasional broad image mask |
| New Standard title artwork | Desktop capture and graphic-container bounds | Preserve outline, fill, line breaks, and relative line widths |
| Plan-related graphic | SPEC DOM content and dimensions | Exact visual style is not established by the supplied screenshots |
| Topic thumbnails | Square link bounds in the DOM | Keep a consistent 1:1 display ratio; image-specific cropping was not inspected |
| Social avatar and pixel-style symbols | Desktop social/footer capture | Keep ordinary photography and pixel-style utilities visually distinct |
| App and calendar utilities | Desktop lifestyle capture | Retain their compact illustrated, sticker-like treatment |

Use original assets when authorized and available. CSS can reproduce the layout relationships and surfaces, but the identity depends substantially on the photographs, graphic titles, and cutouts.

## Layout & Responsive Behavior

### Desktop Structure

The page combines full-width visual sections with several different inner measures. The concept copy uses an 800px region, SPEC has a 1040px heading region, and the topics/footer system uses approximately 1120px. These widths serve different tasks; forcing every section into one narrow container would change the composition.

The 1440px viewport gives the lifestyle stage room to distribute objects around a large empty center. The topics rail fits three 352px thumbnails with 30px gaps while allowing adjacent content to extend beyond the central region. The global footer fits its magazine lists and two additional navigation areas side by side.

### What Actually Changes on Mobile

| Feature | Observed change | Interpretation |
| --- | --- | --- |
| Header inset | Changes to 25px top and left | A mobile-specific placement rule is active |
| Concept typography | 16px becomes 14px; line height reduces | Mobile text styling is active |
| Concept line breaks | More short lines appear in extracted text | Copy presentation changes, independently of the oversized container |
| Feature headings | Approximately 29px becomes 19–20px | Product typography adapts |
| Interior-title color | White becomes black | Presentation changes from the desktop styling |
| Story paragraphs | Text measure changes from about 194px to 315px | A different detail-content arrangement is defined, but sampled offscreen |
| Lifestyle title art | Standard. container reduces from about 529px to 278px | Some inner components scale to the viewport |
| Main width | Remains 1200px | Major horizontal overflow remains |
| Topic images | Become 828px square | Images are oversized relative to the 390px viewport |
| Footer | Retains broad columns and large type | The mobile capture shows clipping rather than a fitted stack |

The lifestyle title's mobile bounds are centered around x=195, even while the section itself measures 1200px wide. This shows that viewport-sized inner elements coexist with much wider layout regions. It is not evidence of one consistent responsive scaling formula.

### Recommended Responsive Adaptation

For a new build, preserve the visual character while correcting the oversized outer layout:

- Make the page and main content fit the viewport; use max-width containers rather than a body-wide minimum width.
- Keep photo overflow local to a decorative collage wrapper. Do not hide global overflow to conceal unreachable content.
- Recompose the opening photographs for a narrow screen, keeping the product identity and principal text within the visible area.
- Reduce the lifestyle frame and move perimeter objects around a protected central text area. Keep interactive objects reachable.
- Fit topic cards to the available inline size and offer a usable horizontal rail or stacked alternative.
- Let the footer grow vertically. Stack major groups and allow category/tag text to wrap.
- Keep the header menu trigger on the actual viewport edge and keep closed navigation out of the focus order.

The original breakpoint values are unknown. The 768px breakpoint used in the Quick Start is an implementation recommendation, not a recovered source value.

## Do’s and Don’ts

### Do

- Build the main experience around textured pale paper, measured sand `#D8C3A3`, and black text.
- Preserve the warm wood interiors and specific objects that express personal interests.
- Mix rectangular photographs, isolated cutouts, and a small number of broad image masks.
- Give the lifestyle stage a substantial green frame and a clear central title area.
- Preserve the hierarchy between small tracked Lato labels, Japanese reading text, and graphic headline artwork.
- Keep cream links compact and strongly rounded while leaving most image edges square.
- Retain the footer's black field, dense navigation, colored pixel-style symbols, and dialogue motif.
- Distinguish the captured entry state from an unverified completed opening sequence.
- Repair the observed mobile clipping when adapting the design for production.

### Don’t

- Don’t replace the site's different section compositions with one repeated card layout.
- Don’t invent a display-font name from the appearance of a logo or graphic title.
- Don’t use the first desktop frame's pale appearance as a universal text-opacity token.
- Don’t add generic glossy gradients, large soft shadows, or glass panels to every component.
- Don’t pixelate the house and interior photography because the footer uses pixel-style details.
- Don’t describe menu opening, story dialogs, carousel autoplay, or sticky behavior as verified.
- Don’t copy the 1200px mobile body width or the 828px mobile topic image size into a new responsive build.
- Don’t turn clipped footer content into an intentional interaction without evidence.
- Don’t treat product collaborators, interview subjects, or an artwork copyright line as website-production credits.

## Recommended Implementation Additions

These are recommendations for a new implementation, not confirmed features of the original page.

- Give graphic headings meaningful text alternatives, and keep the page's heading hierarchy available to assistive technology.
- Use buttons for menu and story-opening actions, and links for real destinations. Supply accessible names for image-only utilities.
- If personal stories open as dialogs, support keyboard activation, Escape, a visible close control, and focus return to the originating subject.
- Keep inactive offscreen panels hidden from keyboard navigation and assistive technology until opened.
- Preserve visible focus indicators on paper, sand, and black surfaces. Increase small controls' interactive areas to at least 44px without unnecessarily enlarging their artwork.
- Keep body copy comfortably readable on mobile. The original's 12px product descriptions are documented, but a 14px minimum is recommended for a new implementation.
- Provide a static, readable page before enhancement. Intro effects should not leave the product name or navigation inaccessible if scripting or image loading is delayed.
- Reserve image dimensions, provide appropriately sized image variants, and defer nonessential imagery below the opening region.
- Reduce decorative motion under `prefers-reduced-motion`; retain access to every story and article without animation.

## Agent Prompt Guide

### Quick Color Reference

- Main textured canvas: approximately `#DFD5BD`; visual estimate.
- Lifestyle field: `#D8C3A3`; measured.
- Cream navigation pills: `#EEE5CE`; measured.
- Main text: `#000000`; measured.
- Lifestyle perimeter: approximately `#2E5138`; visual estimate.
- Outlined display-letter fill: approximately `#B48642`; visual estimate.
- Social strip: white; global footer: black.
- Keep bright utility colors local to illustrated actions and footer symbols.

### Overall Prompt

“Create a housing-brand and lifestyle website with the tactile character of Mr.Standard. Use a pale paper-textured canvas, warm plywood interior photography, overlapping photo panels, and isolated cutouts of plants, clothing, books, records, and ceramics. Alternate spacious Japanese editorial copy with image-led product features. Use compact tracked Lato section labels where available, and treat major brand and campaign lettering as graphic artwork. Build a distinct sand-colored lifestyle stage inside a dark green frame, with objects around the perimeter and large ochre, black-outlined lettering in the center. Finish with a white social-follow strip and a substantial black footer containing dense navigation and small pixel-style details. Fit every content region to mobile; do not reproduce the observed oversized body and cropped footer. Keep unverified motion optional.”

### Example Component Prompts

1. **Lifestyle stage:** “Create a viewport-scale tan composition using `#D8C3A3`, surrounded by a dark green frame. Place a three-line graphic title in a protected central area. Arrange plant photography and clothing at upper left, an art-filled workspace at upper right, books and ceramics at lower left, and records at lower right. Vary image silhouettes and scale; keep the title unobstructed.”
2. **Concept section:** “Create an 800px desktop reading region on subtle beige paper. Use a 14px tracked English kicker, a centered Japanese graphic headline, and bold Japanese copy at 16px with 38.4px leading. On phones, fit the container to the viewport and use 14px text with about 26px leading.”
3. **Magazine link:** “Create a cream `#EEE5CE` continuation link with black 14px bold text, 17px vertical padding, generous horizontal padding, and a 24px radius. Keep it visually light and free of shadows. Ensure the text remains within the viewport.”
4. **Topics rail:** “Create an editorial article rail with square 352px desktop photographs and 30px gaps. Put bold titles and dates directly beneath the images without a separate card surface. Use smaller viewport-fitted cards on mobile and provide keyboard-accessible navigation.”
5. **Global footer:** “Create a broad black footer with a large white brand mark, colorful pixel-style social symbols, a two-list magazine directory, housing and project links, and a small gray game-dialogue illustration with a stepped white outline. Add a fine white rule above legal links. Stack the major groups on narrow screens.”

## Quick Start

### CSS Custom Properties

This is a recommended adaptation, not extracted source CSS. It combines measured colors, typography, and link geometry with estimated surface colors. It deliberately corrects the mobile overflow. Collage coordinates, footer grid ratios, the responsive breakpoint, and the text fallback for graphic lettering are implementation choices.

Apply `.mr-page` to the page wrapper. Use `.concept` for the introduction, `.standard-stage` for the framed lifestyle section, `.topic-rail` with `.topic-card` children for articles, and `.site-footer` for the global footer. The `.collage-layer` slots expect authorized project images. No original asset filename is assumed.

```css
:root {
  /* Measured colors */
  --color-sand: #d8c3a3;
  --color-oat: #decfb7;
  --color-cream: #eee5ce;
  --color-ink: #000;
  --color-white: #fff;

  /* Visual estimates for a reusable approximation */
  --color-paper: #dfd5bd;
  --color-forest: #2e5138;
  --color-ochre: #b48642;
  --color-dialogue: #303030;
  --paper-image: none;

  /* Declared source stacks; font files are not bundled */
  --font-body: MyYuGothicM, 'Yu Gothic', YuGothic,
    'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-label: Lato, sans-serif;

  /* Measured desktop typography */
  --text-body: 16px;
  --text-detail: 15px;
  --text-kicker: 14px;
  --text-section: 30px;
  --tracking-body: 0.64px;
  --tracking-section: 0.08em;

  /* Measured content widths and component geometry */
  --width-reading: 800px;
  --width-spec: 1040px;
  --width-wide: 1120px;
  --topic-width: 352px;
  --topic-gap: 30px;
  --radius-pill: 24px;
  --pager-small: 8px;
  --pager-active: 34px;
  --duration-pager: 300ms;

  /* Recommended responsive geometry */
  --gutter: 30px;
  --frame-size: 35px;
  --focus-width: 2px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.mr-page {
  position: relative;
  min-inline-size: 0;
  inline-size: 100%;
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image: var(--paper-image);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.75;
  letter-spacing: var(--tracking-body);
}

.mr-page img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

.mr-page button {
  font: inherit;
}

.mr-page a {
  color: inherit;
}

.mr-page :focus-visible {
  outline: var(--focus-width) solid currentColor;
  outline-offset: 4px;
}

.container-wide {
  inline-size: min(
    var(--width-wide),
    calc(100% - var(--gutter) - var(--gutter))
  );
  margin-inline: auto;
}

.brand-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 25px 35px;
  pointer-events: none;
}

.brand-header > * {
  pointer-events: auto;
}

.brand-link {
  display: block;
  inline-size: 123px;
  margin-block-start: 15px;
}

.menu-toggle {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

/* Recommended dot-mark approximation, not recovered artwork */
.menu-toggle-mark {
  inline-size: 21px;
  block-size: 21px;
  background: radial-gradient(
    circle, currentColor 1.5px, transparent 2px
  ) 0 0 / 7px 7px;
}

.concept {
  inline-size: min(var(--width-reading), calc(100% - 30px));
  margin-inline: auto;
  padding-block: 100px 127px;
  text-align: center;
}

.concept-kicker {
  margin: 0 0 20px;
  font-family: var(--font-label);
  font-size: var(--text-kicker);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.concept-heading-art {
  inline-size: min(431px, 100%);
  margin-inline: auto;
}

.concept-copy {
  margin: 54px 0 0;
  font-weight: 700;
  line-height: 2.4;
}

.section-label {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-section);
}

.feature-title {
  margin: 0 0 20px;
  font-size: 29.25px;
  font-weight: 700;
  line-height: 1.5;
}

.feature-copy {
  max-inline-size: 680px;
  margin: 0;
  font-size: var(--text-detail);
  line-height: 1.6;
}

.cream-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-inline-size: 100%;
  padding: 17px min(66px, 8vw);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--color-cream);
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cream-link--small {
  /* Original visible link: 38px high; hit area enlarged here */
  min-block-size: 44px;
  padding: 13px 45px;
  font-size: 12px;
}

.standard-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  padding: 150px 24px;
  border: var(--frame-size) solid var(--color-forest);
  background: var(--color-sand);
}

.standard-title {
  position: relative;
  z-index: 2;
  max-inline-size: 100%;
  margin: 0;
  text-align: center;
}

/* Text fallback only; original graphic lettering is preferred */
.standard-title-intro {
  display: block;
  font-family: var(--font-label);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.1;
}

.standard-title-display {
  display: block;
  margin-block-start: 12px;
  color: var(--color-ochre);
  font-family: var(--font-label);
  font-size: clamp(44px, 6vw, 86px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 2px var(--color-ink);
}

.standard-subtitle {
  margin: 22px 0 0;
  font-size: clamp(16px, 2vw, 28px);
  line-height: 1.5;
}

/* Clip decorative layers locally, never the whole document */
.stage-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.collage-layer {
  position: absolute;
  inline-size: var(--layer-width, 24%);
  inset-inline-start: var(--layer-x, 0%);
  inset-block-start: var(--layer-y, 0%);
  transform: rotate(var(--layer-angle, 0deg));
}

/* Example coordinates, not measured source positions */
.collage-layer--plants {
  --layer-width: 26%;
  --layer-x: 5%;
  --layer-y: 6%;
  --layer-angle: -3deg;
}

.collage-layer--workspace {
  --layer-width: 26%;
  --layer-x: 67%;
  --layer-y: 3%;
  --layer-angle: 2deg;
}

.collage-layer--books {
  --layer-width: 25%;
  --layer-x: 0%;
  --layer-y: 69%;
}

.collage-layer--records {
  --layer-width: 30%;
  --layer-x: 67%;
  --layer-y: 72%;
  --layer-angle: -8deg;
}

/* A story trigger belongs outside the decorative stage-art layer */
.story-trigger {
  position: relative;
  z-index: 3;
  min-inline-size: 44px;
  min-block-size: 44px;
}

.product-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-pager button {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.product-pager-mark {
  inline-size: var(--pager-small);
  block-size: var(--pager-small);
  border: 1px solid currentColor;
  border-radius: 50%;
  transition:
    width var(--duration-pager),
    height var(--duration-pager);
}

.product-pager button[aria-current='true'] .product-pager-mark {
  inline-size: var(--pager-active);
  block-size: var(--pager-active);
}

.topics {
  padding-block: 160px 170px;
}

.topic-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--topic-width);
  gap: var(--topic-gap);
  margin-block-start: 50px;
  padding: 6px 4px 24px;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
}

.topic-card {
  min-inline-size: 0;
  scroll-snap-align: start;
}

.topic-card img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
}

.topic-title {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}

.topic-date {
  /* Recommended value; date typography was not measured */
  font-family: var(--font-label);
  font-size: 13px;
}

.follow-strip {
  padding: 60px var(--gutter);
  background: var(--color-white);
}

.follow-strip-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  max-inline-size: var(--width-wide);
  margin-inline: auto;
}

.site-footer {
  padding: 104px 0 88px;
  color: var(--color-white);
  background: var(--color-ink);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-block-start: 60px;
}

.footer-columns > * {
  min-inline-size: 0;
}

.footer-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.site-footer ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin-block: 6px;
  overflow-wrap: anywhere;
}

.footer-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block-start: 42px;
  padding-block-start: 20px;
  border-block-start: 1px solid currentColor;
  font-size: 12px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --frame-size: 14px;
    --topic-width: min(82vw, 352px);
  }

  .brand-header {
    padding: 10px 15px 0 25px;
  }

  .concept {
    padding-block: 80px 122px;
  }

  .concept-heading-art {
    inline-size: min(326px, 100%);
  }

  .concept-copy {
    margin-block-start: 33px;
    font-size: 14px;
    line-height: 1.86;
  }

  .feature-title {
    font-size: 20px;
    line-height: 1.5;
  }

  .feature-copy {
    /* Recommended readability floor; source mobile size was 12px */
    font-size: 14px;
    line-height: 1.83;
  }

  .standard-stage {
    min-block-size: 760px;
    padding: 220px 14px;
  }

  .collage-layer {
    inline-size: 38%;
  }

  .collage-layer--workspace,
  .collage-layer--records {
    inset-inline-start: 62%;
  }

  .topics {
    padding-block: 80px 113px;
  }

  .topic-title {
    font-size: 14px;
    line-height: 1.75;
  }

  .follow-strip-inner,
  .footer-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .site-footer {
    padding-block: 64px;
  }

  .footer-columns {
    margin-block-start: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-pager-mark {
    transition: none;
  }

  .topic-rail {
    scroll-behavior: auto;
  }
}
```

The rail's native scrolling and scroll snapping are recommended replacements for unverified carousel behavior. The pager styles define appearance only; JavaScript must update its state and associated content. Menu and story-dialog logic are intentionally not implied by this CSS.

The graphic title fallback approximates the hierarchy, not the exact lettering. Replace it with authorized artwork when visual fidelity matters, retaining an accessible heading. Decorative images inside `.stage-art` should have empty alternatives; meaningful or interactive images need appropriate text and separate operable elements.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #dfd5bd;
  --color-sand: #d8c3a3;
  --color-cream: #eee5ce;
  --color-forest: #2e5138;
  --color-ochre: #b48642;
  --color-ink: #000;

  --font-body: MyYuGothicM, 'Yu Gothic', YuGothic,
    'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-label: Lato, sans-serif;

  --text-kicker: 14px;
  --text-section: 30px;
  --radius-pill: 24px;
  --spacing-topic-gap: 30px;
  --container-reading: 800px;
  --container-spec: 1040px;
  --container-wide: 1120px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://mr-standard.lifelabel.jp/](https://mr-standard.lifelabel.jp/). Both URLs are identical in the supplied observation, with HTTP status 200.
- **Capture timestamp:** October 1, 2026, 16:14:49.210 UTC; October 2, 2026, 01:14:49.210 JST. This document analyzes that supplied inspection and does not claim a separate later visit.
- **Desktop evidence:** 1440 × 1000 viewport; approximately 16,038px document height. Three current-page screenshots show the entry state, framed lifestyle stage, and social/footer region.
- **Mobile evidence:** 390 × 844 viewport; approximately 20,043px document height. Two current-page screenshots show the cropped opening photographs and cropped footer. The DOM reports a 1200px BODY and MAIN width.
- **Rendered measurements:** supplied element bounds, computed colors, declared font stacks, font sizes, weights, line heights, letter spacing, padding, radii, transition strings, and link destinations. No complete stylesheet, image manifest, or font-file manifest was supplied.
- **Page identity:** the original-page title identifies Mr.Standard and LIFE LABEL × POPEYE. Visible house imagery, product copy, and official-brand links support that identity.
- **Interaction scope:** the supplied process loaded the page and traversed scroll positions. Menu opening, personal-story selection, carousel manipulation, link destinations, and back-to-top behavior were not independently exercised in the evidence.
- **Inspection limitations:** the opening desktop frame and underlying layout measurements reflect different visible arrangements; their state relationship is unresolved. Readiness waits cannot guarantee that every delayed element completed. Offscreen content is not equivalent to a visually inspected open state. No additional browsing, command execution, or file inspection was used for this reference.

Measured values describe the current supplied page. Screenshot estimates are labeled, and the Quick Start is an adaptation that preserves the visual language while addressing the observed mobile overflow.