# RIM BY JINS — Style Reference

> A spacious eyewear lookbook with a bold black wordmark, seasonal photography, and paired rectangle-and-pill links.

**Website:** [RIM — Japanese homepage](https://rim.jins.com/jp/)
**Original URL:** https://rim.jins.com/jp/
**Final URL:** https://rim.jins.com/jp/
**Theme:** light; white surfaces, black identity, and campaign-specific accents
**Inspected:** September 12, 2026; supplied evidence retrieved at 11:32:42.699 UTC / 20:32:42.699 JST
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px
**Scope:** the current brand and shopping homepage, including its opening identity, campaign features, product metadata, ranking, BASIC promotion, PICK UP banner, and service footer. Visual captures cover desktop opening, middle, and footer positions, plus mobile opening and footer positions. Additional sections are documented through the supplied rendered DOM.

RIM presents eyewear through fashion imagery and a restrained retail interface. A large, centered RIM BY JINS mark establishes identity before the first campaign photograph. Thin outline utility icons occupy the outer edges, and two small category links sit below the mark. White space, regular-weight geometric Latin typography, and modest Japanese descriptions leave the photographs in control of the page.

This is a brand homepage with several browsing routes. The current sequence leads with September’s MISAMO campaign, continues through August, June, and February features, and then provides ranking, everyday eyewear, and service navigation. Its most reusable component is the campaign module: photography, a short title and sentence, a small product assortment, and two equally prominent links distinguished by shape. Desktop alternates image and information columns; mobile creates a clear image-first sequence.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Dimensions are CSS pixels; tables round some values for readability.
- **Observed** means visible in the current-page captures, without a corresponding exact style declaration.
- **Estimated** means a visual approximation, such as a divider color or the expanded wordmark width.
- **Recommended** means an implementation choice for reuse. Breakpoints, accessibility additions, and unverified interaction details belong in this category.
- Token names are descriptive aliases introduced here, not original source variables.
- A computed font-family declaration identifies the requested stack. It does not independently prove which font file supplied every rendered glyph.
- Some desktop heading exports contain only `R` or `L`. Mobile evidence contains complete titles, and the desktop middle capture shows a complete February title. These fragments are an inspection limitation, not a recommendation to use single-letter headings.
- Document heights were approximately 7511.38 px on desktop and 7996.97 px on mobile. These are content-state measurements, not layout targets to hardcode.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-page` | Measured header background; observed main canvas and footer |
| Black | `#000000` | `--color-ink` | Measured primary text and BASIC button fill; observed wordmark and outline icons |
| Metadata Gray | `#808080` | `--color-muted` | Measured campaign color and price text |
| Quiet Fill | `#fafafa` | `--color-quiet` | Measured VIEW MORE background |
| BASIC Gray | `#e8e8e8` | `--color-basic` | Measured BASIC promotional section background |
| Fine Rule | Approximately `#e5e5e5` | `--color-rule` | Estimated from header, section, and footer dividers; border color was not supplied |
| Ranking Red | `#ed1c24` | `--color-ranking` | Measured ranking section and product text |

The body and main elements report transparent backgrounds. White is the visible canvas, with an explicitly white header; do not describe every white region as a separately measured fill.

Product photographs sit on very pale neutral plates in the middle capture. Their exact background declaration was not included. Reusing Quiet Fill for those plates is a recommended approximation, not a measured asset color.

### Campaign Accents

| Current feature | Measured color | Suggested token | Application |
| --- | --- | --- | --- |
| September — RIM loves: MISAMO 26AW | `#e62c27` | `--accent-aw` | Both campaign links |
| August — Low-profile Acetate | `#b8dddc` | `--accent-acetate` | Both campaign links |
| June — RIM meets ROIROM 26SS | `#93c6d1` | `--accent-roirom` | Both campaign links; cyan detail visible in the middle capture |
| February — RIM loves: MISAMO 26SS | `#e593c4` | `--accent-ss` | Both campaign links; pink title marker and separator visible in the middle capture |
| BASIC | Black with white text | `--color-ink` | Single rectangular CHECK ITEM link |

Keep campaign red `#e62c27` distinct from ranking red `#ed1c24`. They are different measured colors. Small red dots precede COLLECTION and BASIC, but their exact color was not included in the sampled elements; reusing ranking red is an approximation.

These colors identify sections within one light design. No selectable color theme was evidenced. Generic WordPress palette, gradient, and shadow presets appear in the custom-property export, but they do not establish the visible RIM palette. The exported blue Swiper variable likewise does not justify introducing blue navigation controls.

## Tokens — Typography

### Latin Navigation and Editorial Titles

- **Measured family:** `futura-pt, sans-serif`.
- **Weights:** `400` for campaign titles, photo captions, product metadata, and campaign links; `500` for category navigation and most footer navigation.
- **Character:** geometric, open, and comparatively light. The bold wordmark supplies the strongest typographic weight.
- **Usage:** mixed-case campaign titles, uppercase utility labels, small color/price fields, and product names.
- **Tracking:** category links use `0.05em`; most sampled text uses normal tracking.

Use Futura PT only when an appropriate font source and license are available. The evidence names the family but supplies no font files or loading configuration. A fallback sans-serif will change label widths and wrapping.

### Japanese Body Copy

**Measured stack:** `'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Helvetica Neue', Arial, Meiryo, sans-serif`.

Japanese campaign descriptions use weight `400` with a line-height ratio of `1.75`. They remain short and centered. Actual examples include `おしゃれを更新する、ファッションアイウエア。` and `ふつうが、かっこいい。` The BASIC description has a more generous line-height ratio of approximately `1.917`.

The VIEW MORE button also uses this Japanese-oriented stack, despite its English label. Preserve this measured exception when matching the original typography closely.

### Wordmark and Artwork Lettering

Treat the RIM BY JINS wordmark as an identity asset. Its exclamation-mark forms, proportions, and stacked arrangement should not be approximated by typing ordinary bold text. The supplied evidence does not identify the logo file format or URL.

The PICK UP campaign graphic contains its own large red lettering and small editorial captions. Preserve that composition as artwork rather than assigning those letters to the site-wide heading scale.

### Type Scale

Values below are measured. Size and line height are shown as `size / line-height`.

| Role | Desktop | Mobile | Weight / notes |
| --- | --- | --- | --- |
| Root | `10 / 11.5px` | `5.2 / 5.98px` | Source scaling base, not ordinary reading text |
| COLLECTION / BASIC | `20 / 23px` | `14.56 / 16.744px` | 500; tracking 1px / 0.728px |
| FEATURE / campaign date | `18 / 20.7px` | `13.52 / 15.548px` | 400; white over photography |
| Campaign title | `35 / 40.25px` | `26 / 29.9px` | 400; desktop text extraction incomplete |
| Campaign Japanese copy | `15 / 26.25px` | `13.52 / 23.66px` | 400 |
| Product color | `15 / 20.25px` | `13.52 / 18.252px` | 400; gray in campaigns |
| Product price | `15 / 24.286px` | `13.52 / 21.890px` | 400 |
| Campaign link | `16 / 18.4px` | `13.52 / 15.548px` | 400 |
| VIEW MORE | `18 / 20.7px` | `13.52 / 15.548px` | 400; Japanese-oriented stack |
| Ranking product name | `18.571 / 21.357px` | `16.739 / 19.250px` | 400; wraps as needed |
| BASIC media caption | `24 / 27.6px` | `17.68 / 20.332px` | 400; white |
| BASIC Japanese copy | `16 / 30.667px` | `13.52 / 25.913px` | 400 |
| PICK UP | `18 / 20.7px` | `13.52 / 15.548px` | 500 |
| Footer service label | `18 / 20.7px` | `14.56 / 16.744px` | 500 |
| ONLINE SHOP | `25 / 28.75px` | `18.2 / 20.93px` | 500 |
| Legal links | `15 / 17.25px` | `13.52 / 15.548px` | 500 |
| Copyright | `14 / 16.1px` | `13.52 / 15.548px` | 500 |

Do not use a heavy display weight for all campaign headings. Their regular weight is a useful counterpoint to the large black identity and photographic detail.

## Tokens — Spacing & Shapes

### Responsive Unit

The root is measured at 10px on desktop and 5.2px at the inspected phone width. The stylesheet formula and breakpoint declarations were not supplied.

Individual components change by different proportions: a 35px title becomes 26px, while 15px body copy becomes 13.52px. Scaling every desktop measurement by the root-size ratio would produce the wrong mobile design. The Quick Start keeps a conventional root and uses explicit component tokens instead.

### Spacing Scale

| Relationship | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Utility-control padding | 15px | 7.8px | Computed styles |
| Gap inside category link | 8.571px | 6.24px | Computed styles; dot to label |
| Gap between category links | Approximately 55.70px | Approximately 40.55px | Calculated from link rectangles |
| Navigation bottom to first image | 45px | Approximately 31.19px | Calculated from rectangles |
| Photo-label horizontal inset | 18px | 13px | Calculated from rectangles |
| Photo-label top inset | 23px | Approximately 14.55px | Calculated from rectangles |
| Later campaign outside gutter | 22.5px | 0px | Measured section positions |
| Later campaign vertical padding | 52px each end | 0px | Computed styles |
| Lead photo to heading | 56px | Approximately 30.16px | Calculated from rectangles |
| Campaign heading to description | 27px | Approximately 15.59px | Calculated from rectangles |
| Paired-link gap | 14px | Approximately 7.27px | Calculated from rectangles |
| Product price bottom to links | 80px | Approximately 36.39px | Calculated from campaign rectangles |
| Between mobile campaign sections | — | Approximately 93.59px | Repeated measured separation |
| PICK UP label to banner | 20px | Approximately 14.03px | Calculated from rectangles |

The page’s spaciousness comes from both large photographs and deliberate pauses between image, title, products, and links. Avoid compressing every relationship into a uniform small gap.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| CHECK ITEM links | `0` | Measured |
| SPECIAL CONTENT links | `9999px` | Measured |
| Campaign sections and footer links | `0` | Measured sampled elements |
| Photography | Square corners | Visible |
| Product favorite affordance | Small circular outline/container | Visible; exact radius and size unavailable |

The rectangle/pill contrast is semantic: product browsing uses a rectangle, while campaign storytelling uses a pill. Both share the same campaign fill and similar dimensions.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Compact header | `1440 × 90px` | `390 × 71.75px` |
| Compact home-logo anchor | `86 × 57.91px` | `61.88 × 41.66px` |
| Expanded visible wordmark | Approximately `280 × 188px` | Approximately `190 × 128px` |
| Category-link top | `y = 255px` | `y = 182px` |
| First campaign image top | `y = 323px` | `y ≈ 229.92px` |
| Lead media link | `1440 × 842.88px` | `390 × 523.5px` |
| Later campaign width | `1395px` | `390px` |
| Later campaign media | `697.5 × 816.53px` | `390 × 496.5px` |
| Campaign metadata text block | `210px` wide | Approximately `154.97px` wide |
| CHECK ITEM | `212 × 63.45px` | Approximately `157.55 × 53.63px` |
| SPECIAL CONTENT | `212 × 63.45px` | Approximately `165.34 × 53.63px` |
| VIEW MORE band | `1440 × 195.75px` | `390 × 147.53px` |
| BASIC section | `1000 × 365.33px` | `390 × 821.08px` |
| PICK UP link | `460 × 241.5px` | Approximately `343.19 × 180.17px` |
| Standard footer service cell | Approximately `250.72 × 250.72px` | `195 × 139.39px` |
| Online-shop footer cell | Approximately `386.13 × 250.72px` | `390 × 133.53px` |

Expanded-wordmark dimensions are screenshot estimates. The DOM logo-anchor measurements describe the compact presentation and should not be mistaken for the initial visible mark.

## Components

### Identity Header

**Role:** keep the brand and four utility routes visible while browsing a long homepage.

The outer arrangement stays consistent: menu and shop-location icons on the left; favorites and Instagram on the right; identity centered between them. The icons are black outlines with open interiors and no persistent colored button backgrounds.

Two presentations are visible. At the opening, the large stacked wordmark extends through much of the white masthead. At the middle and bottom scroll positions, a compact mark sits in a white strip with a fine lower rule. Its measured anchor starts at `x = 677, y = 15` on desktop and approximately `x = 164.06, y = 15.08` on mobile.

The captures establish a persistent compact presentation during scrolling. They do not establish whether the implementation uses fixed positioning, sticky positioning, duplicate logo elements, or a particular scroll threshold. A fixed header with an explicit compact state is a recommended implementation approach.

The menu is a button. The location, home, favorites, and Instagram controls have recorded anchor destinations. Menu contents and favorite-page behavior were not exercised.

### Category Navigation

**Role:** expose the two main product worlds before campaign browsing.

COLLECTION and BASIC form one centered horizontal row beneath the large mark. Each label has a small red dot before it. The row uses medium-weight Futura PT, restrained tracking, and generous separation between links. It remains horizontal at the inspected phone width.

These are links to `/jp/collection/` and `/jp/basic/`, not an evidenced tab interface. The compact scrolled captures retain the utility header without this category row.

### Lead Campaign

**Role:** make the latest campaign the homepage’s dominant editorial entry.

The current lead is `RIM loves: MISAMO 26AW`, dated `2026 SEP.` Its media spans the desktop viewport. Two identical trio compositions appear next to each other, meeting at the center. On mobile, the composition appears once in a taller full-width frame.

FEATURE sits at the upper left and the date at the upper right. Both are white, regular-weight labels over a gray-to-transparent tonal wash. The wash is visible; whether it belongs to the image or an overlay was not established.

Below the image, center the title and Japanese sentence, then present four products and the paired campaign links. Desktop has four products across; mobile has two columns and two rows. The complete mobile title is visible at 26px beneath the photograph.

The image link and SPECIAL CONTENT both target `/jp/lp/misamo26aw/`. CHECK ITEM targets `/jp/feature/rim-loves-misamo-26aw/`. Preserve this distinction between a product feature page and a campaign experience.

The repeated desktop image is an observed composition. It does not establish an animated marquee or an autoplaying carousel.

### Alternating Campaign Feature

**Role:** connect seasonal imagery with a compact, browsable product selection.

At desktop width, subsequent campaigns occupy a 1395px-wide section, inset 22.5px on each side. Each half is 697.5px wide. August places media left and information right; June reverses this; February returns media to the left. The middle capture clearly shows June information beside photography and February beginning with its image on the left.

The information half groups a centered title, a short Japanese description, two product presentations, and the rectangle/pill link pair. Small colored title markers and thin product separators are visible in the February panel; the June panel uses cyan accents. Broad white areas separate these details.

At 390px, each campaign is ordered as full-width image, title, description, two-column products, and paired links. The desktop alternation does not become an awkward text-before-image mobile sequence.

### Product Presentation

**Role:** reveal frame appearance, color, and price without turning the homepage into a dense inventory table.

The middle capture shows front-facing eyewear on pale image plates with square edges. Small heart affordances occupy an upper corner of product presentations. Gray color and price lines sit below the image region and align left within their own narrow block.

Measured campaign metadata widths are 210px on desktop and approximately 155px on mobile. On mobile, the two metadata columns begin around x = 20 and x = 215, giving each half of the viewport a useful internal inset.

Actual field examples include `COLOR:SILVER` and `PRICE:¥9,900`. Keep these as compact factual labels, without a large price badge or a filled product-card container. Product image dimensions and individual product-link destinations were not supplied; card click behavior should not be inferred from the visible heart alone.

### Paired Campaign Links

**Role:** offer product browsing and campaign storytelling with comparable visual priority.

Both links share one campaign color, black text, and a small right arrow. CHECK ITEM is square-cornered. SPECIAL CONTENT is fully rounded. Desktop links measure 212px wide and approximately 63.45px tall, separated by 14px.

The phone presentation keeps them on the same row, approximately 157.55px and 165.34px wide, with a 7.27px gap. The storytelling link is slightly wider, accommodating its longer label.

The cyan links show a shallow gray edge along the lower/right side. The supplied style fields do not include box-shadow, so a `2px 2px 0` offset shadow is only a recommended visual approximation. Avoid a large blurred shadow that would make the buttons float above the editorial layout.

### VIEW MORE Band

**Role:** provide an additional-content control after the four currently recorded campaigns.

This is a full-width button on `#fafafa`, approximately 196px tall on desktop and 148px on mobile. The centered label has extensive vertical breathing room. It is a structural pause rather than a small fifth campaign CTA.

A button and transition declaration were recorded. Whether activation expands the list, fetches content, or changes its label was not tested. A new implementation needs an explicit behavior and an appropriate accessible state.

### Recommended Ranking

**Role:** provide another route into products after the campaign sequence.

The DOM records six products under `おすすめランキング`, with mobile text also reporting `Update: 2026 Sep.02` and ranks 1–6. Desktop product positions form three columns and two rows; mobile positions form two columns and three rows.

Unlike the gray campaign metadata, ranking product names, color fields, and prices are measured in `#ed1c24`. Desktop product-name blocks are 230px wide; mobile blocks are 156px wide. Long names wrap naturally, including `Oversized Combination Lightframe`.

This section is supported by DOM geometry and text, but is not visible in a dedicated supplied screenshot. Do not infer an exact decorative ranking masthead, numeral size, or badge shape from the small computed size of its outer H2.

### BASIC Promotion

**Role:** introduce the everyday assortment after seasonal and ranked products.

The measured background is `#e8e8e8`. Desktop uses a centered 1000px-wide, approximately 365px-tall block with media on the left and heading, copy, and one black CHECK ITEM link on the right. Mobile expands it to the full viewport width and approximately 821px in height.

Mobile element positions place the heading first, the media-caption region below it, then the two-line Japanese description and the link. The recorded description is `毎日かけたくなる、定番のメガネ。自分らしさに出会える「ベーシック」。`

COMBINATION, LIGHTFRAME, METAL, and ACETATE occupy the same caption rectangle in each DOM sample. This supports an overlapping media region, but does not establish which labels are simultaneously visible or how they change. Rotation, autoplay, and manual slide controls remain unverified.

### PICK UP Banner

**Role:** provide one compact campaign reminder before service navigation.

A small centered PICK UP label sits over a single linked editorial graphic. The banner link measures 460 × 241.5px on desktop and approximately 343.19 × 180.17px on mobile, preserving a ratio near 1.905:1.

The current artwork contains three portraits, warm off-white space, and prominent red campaign lettering. Desktop leaves broad white margins around it. Mobile retains approximately 23.4px outside clearance on each side. Do not enlarge this footer reminder to compete with the lead campaign.

### Service Navigation Grid

**Role:** make store information, support, brand information, and external shopping easy to find at the end of the page.

Desktop forms one ruled row: SHOP LIST, FAQ, NEWS, and ABOUT occupy approximately square cells, while ONLINE SHOP occupies a wider cell. The first four cells center a thin black icon over a medium-weight label. The shop cell uses a cart icon, larger ONLINE SHOP text, and a smaller JINS.COM line with an external-link symbol.

Mobile changes the four service links into a two-by-two grid. ONLINE SHOP becomes a full-width row beneath them, with the shopping label toward the left and JINS.COM toward the right. Fine gray rules supply all the grouping; there are no separate rounded tiles.

The destinations are recorded links. The JINS.COM destination points to an external JINS product-search URL; its browsing outcome was not inspected.

### Legal Footer and Return Control

**Role:** finish the page with legal routes, copyright, and a compact upward-navigation affordance.

Desktop centers PRIVACY POLICY, SECURITY POLICY, COMPANY, and CONTACT, with copyright below and the upward arrow at the right. Mobile keeps the legal links in one compact row at 390px, then places the copyright left and the arrow right.

The visible copyright reads `© JINS Inc.All Rights Reserved.` The COMPANY link targets the JINS corporate URL. These are original-page observations; no production-credit claim is established here.

The upward control is a button, measured at 58 × 58px on desktop and approximately 41.59 × 41.59px on mobile. Its icon suggests return-to-top behavior, but activation and scroll timing were not tested.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be reused |
| --- | --- | --- |
| Menu-button transition | Measured `0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)` | A short, slightly overshooting easing; affected visual properties and open state unverified |
| Campaign-link transition | Measured `0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` | Short ease-out feedback; exact hover transformation unavailable |
| VIEW MORE transition | Same measured 200ms ease-out | Timing token only; expansion behavior unverified |
| ONLINE SHOP transition | Same measured 200ms ease-out | Timing token only; hover appearance unverified |
| Expanded to compact identity | Both presentations visible in captures | Preserve two visual states; trigger, transition duration, and positioning mechanism are unknown |
| Campaign heading changes | Desktop fragments, complete mobile titles, complete title in the middle capture | Use complete readable titles; do not infer a typewriter or reveal specification |
| Repeated lead photography | Two identical desktop panels; one mobile composition | Preserve the observed composition without assuming automatic movement |
| BASIC media | Overlapping caption rectangles and differing text order | Layering is supported; carousel operation and cadence are not |
| Favorite hearts | Visible affordances; header favorite link recorded | Provide a clear control if implemented; persistence and toggle feedback were not exercised |

Most sampled elements report `animation: none`. This does not rule out motion in child elements, pseudo-elements, JavaScript, or unsampled states. A reported `transition: all` without an explicit duration is not evidence of a visible animation.

The supplied capture procedure waited for document load, finite animation settling, sampled layout/text stability, and visible image decoding within time limits. Perpetual animations were temporarily paused during readiness checks and then resumed. Consequently, the captures describe settled appearances, not a motion recording. Menu opening, hover states, favorite actions, VIEW MORE activation, and destination-page interactions remain outside the verified scope.

**Recommended motion approach:** retain brief 200ms feedback, make full headings available immediately, and avoid adding parallax, automatic horizontal movement, or elaborate scroll reveals without a separate requirement. If implementing identity compaction, animate only the necessary properties and respect reduced-motion preferences.

## Surfaces

| Layer | Appearance | Function / confidence |
| --- | --- | --- |
| Main canvas | White | Observed background supporting imagery and generous space |
| Persistent header | Solid white | Measured fill; fine rule visible in compact captures |
| Campaign information | White, mostly unboxed | Observed; hierarchy comes from spacing and typography |
| Product plate | Very pale neutral image region | Visible in middle capture; exact fill unavailable |
| Campaign links | Solid local accent, black text | Measured colors and radii; shallow offset edge visible on cyan links |
| VIEW MORE | `#fafafa` | Measured full-width quiet band |
| BASIC | `#e8e8e8` | Measured neutral promotional field |
| Footer service grid | White cells with thin gray rules | Visible; exact rule color estimated |

There is no broad floating-card elevation system in the supplied captures. Preserve the small button-edge detail without spreading drop shadows to photography, product groups, or footer cells.

## Imagery

The current lead photograph uses a restrained studio setting, warm off-white background, and coordinated black-and-white clothing. Eyeglasses remain central to the styling. The mobile crop shows a single trio composition with substantial neutral space above the subjects, while desktop repeats the composition across two adjoining panels.

The February image visible farther down the current page uses a cooler gray studio setting and softer clothing colors. The June crop visible above it introduces a knit texture and a more environmental photographic setting. These differences let each campaign carry its own mood while the surrounding interface remains stable.

Product imagery is quieter: front-facing frames, isolated presentation, pale ground, and generous surrounding space. Use `object-fit: contain` for product cutouts so frame shape is preserved. For campaign photography, provide deliberate desktop and mobile crops; the measured aspect ratios change, so one generic center crop is not a complete responsive strategy.

Do not add color filters, grain, artificial blur, or rounded photo masks. Ordinary smooth image rendering suits the observed photography. The brand mark and campaign poster lettering require the actual authorized assets for faithful reproduction.

### Observed Asset References

No image-file URLs, native dimensions, or font-file URLs were included in the supplied evidence. The URLs below are recorded **link destinations**, not media download paths.

| Visual asset | Current-page observation | Recorded destination |
| --- | --- | --- |
| RIM BY JINS identity | Expanded opening mark and compact scrolled mark | `https://rim.jins.com/jp/` |
| September campaign photography | Repeated trio on desktop; single composition on mobile | `https://rim.jins.com/jp/lp/misamo26aw/` |
| August campaign media region | Dimensions and route recorded; no dedicated close-up capture | `https://rim.jins.com/jp/lp/low-profile-acetate/` |
| June campaign photography | Partial environmental portrait visible in desktop middle capture | `https://rim.jins.com/jp/lp/roirom26ss/` |
| February campaign photography | Trio visible in the current desktop middle capture | `https://rim.jins.com/jp/lp/misamo26ss/` |
| Product cutouts | Eyeglass frames on pale plates | Individual destinations not supplied |
| PICK UP campaign graphic | Three portraits with red editorial lettering | `https://rim.jins.com/jp/lp/misamo26aw/` |
| Utility symbols | Menu, location, heart, Instagram, support, news, cart, and upward arrow | Mixed buttons and recorded navigation links; asset formats unknown |

## Layout & Responsive Behavior

The page uses several widths rather than one global container. The opening campaign spans the desktop viewport. Later campaigns use almost the full width with 22.5px outside gutters. Ranking positions fit a centered region of approximately 1000px, and BASIC is explicitly measured at 1000px. The PICK UP graphic is much narrower. Footer service navigation returns to the broad ruled grid.

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Opening identity | Large mark above centered category links | Large mark retained; utilities remain at outer edges |
| Scrolled identity | 90px header, 86px-wide logo anchor | 71.75px header, 61.88px-wide logo anchor |
| Lead media | Two repeated panels within a wide region | One full-width portrait composition |
| Later features | Alternating equal image/information halves | Image first, then centered information |
| Lead assortment | Four products across | Two columns, two rows |
| Later assortments | Two products within an information half | Two products across the viewport |
| Campaign actions | Equal-width rectangle and pill | Same-row pair; slightly unequal widths |
| Ranking | Three columns, two rows | Two columns, three rows |
| BASIC | Media left, information right | Heading, media, copy, then link |
| Footer services | Four square cells plus a wider shop cell | Two-by-two services plus a full-width shop row |
| Legal area | Centered links and copyright | Compact link row; copyright left, arrow right |

The lead media ratio changes from approximately 1.708:1 for the whole desktop region to 0.745:1 on mobile. Later media changes from approximately 0.854:1 to 0.786:1. These are calculated from rendered boxes, not native image dimensions.

Only two viewport sizes were supplied. Tablet, intermediate-width, landscape-phone, zoomed-text, and safe-area behavior were not separately tested. The breakpoint in the Quick Start is recommended, and should be adjusted after checking content fit. Do not force the 390px legal-link row or paired CTAs to overflow at narrower widths; allow wrapping when necessary.

## Do’s and Don’ts

### Do

- Make the white canvas, large black identity, and fashion photography the primary visual hierarchy.
- Preserve the large opening mark and compact scrolled presentation as separate design states.
- Use the measured Futura PT and Japanese font stacks where legally available.
- Keep campaign headings regular-weight and descriptions short.
- Give each campaign one local accent while retaining black text and white surrounding space.
- Pair a rectangular CHECK ITEM link with a pill-shaped SPECIAL CONTENT link.
- Alternate later desktop feature layouts and restore image-first order on mobile.
- Preserve two product columns on mobile rather than reducing every item to a separate full-width card.
- Keep campaign metadata gray and ranking metadata red.
- Use fine rules and large service targets to organize the footer.
- Plan responsive photography deliberately so glasses and faces remain legible.

### Don't

- Don't reduce this multi-route brand homepage to a single campaign landing page.
- Don't replace the identity asset with an ordinary bold text approximation.
- Don't copy single-letter DOM heading fragments into the interface.
- Don't turn every image and product group into a rounded, shadowed card.
- Don't make every action pill-shaped; the contrasting silhouettes are characteristic.
- Don't merge all measured reds into one token without an intentional adaptation decision.
- Don't use exported CMS gradients or the Swiper blue variable as visible brand colors.
- Don't stretch, recolor, or apply decorative textures to the photographic assets.
- Don't infer autoplay from duplicated photography or overlapping captions.
- Don't shrink all desktop typography according to the mobile root-size ratio.
- Don't hardcode the captured total page height or assume the compact header’s scroll threshold.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the inspected page.

- Give every icon-only control an accessible name. Expose menu expansion state and favorite selection state when those behaviors exist.
- Enlarge the phone utility targets to at least 44 × 44px without enlarging the icon artwork. Several measured original targets are smaller.
- Keep a visible keyboard focus outline and ensure fixed header content does not obscure focused anchors.
- Use complete semantic headings even if visual letter animations are added. Avoid announcing a title one character at a time.
- Check small gray metadata and red ranking text for contrast at the final font size. A darker gray or red may be needed for a stricter accessibility target; retain the observed colors separately in the token record.
- Give the light-on-photo labels a dependable contrast treatment across every responsive crop.
- Implement VIEW MORE with clear loading, completion, and failure states if it retrieves content. If it reveals existing content, expose the relationship and expansion state.
- Keep product links and favorite buttons as separate interactive elements; avoid nesting a button inside an anchor.
- Reserve image space with dimensions or aspect ratios. Prioritize the first campaign image and defer below-fold imagery appropriately.
- If duplicate lead images are decorative copies of the same campaign, avoid repeated screen-reader descriptions.
- Respect reduced motion for identity compaction and any future media rotation. Keep essential content readable with animation disabled.
- Test wrapping and focus behavior at 320px, intermediate desktop widths, and enlarged text in addition to the supplied viewports.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and header: white `#ffffff`.
- Identity, icons, headings, and ordinary links: black `#000000`.
- Campaign product metadata: gray `#808080`.
- September campaign links: red `#e62c27`.
- August campaign links: pale mint `#b8dddc`.
- June campaign links: muted cyan `#93c6d1`.
- February campaign links: pink `#e593c4`.
- Ranking text: red `#ed1c24`.
- BASIC panel: gray `#e8e8e8`, with a black rectangular link.
- Fine divider approximation: `#e5e5e5`.

### Overall Prompt

“Create a Japanese eyewear brand homepage inspired by the current RIM BY JINS structure. Use a white canvas, an authorized large stacked black wordmark, thin outline utility icons at the outer edges, and centered COLLECTION and BASIC links marked by small red dots. Lead with fashion photography, then a regular-weight campaign title, short Japanese copy, restrained product presentations, and two links sharing a campaign color: rectangular CHECK ITEM and pill-shaped SPECIAL CONTENT. Alternate subsequent image/information halves on desktop. On mobile, show each campaign image first, keep products in two columns, and retain the paired links. Continue with a red-text six-product ranking, a light-gray BASIC promotion, a narrow campaign banner, and a ruled service footer. Use Futura PT for Latin UI where licensed and the supplied Japanese sans-serif stack for Japanese copy. Preserve broad white space and square image edges.”

### Example Component Prompts

1. **Header:** “Build a white utility header with menu and location on the left, heart and Instagram on the right, and a centered supplied RIM BY JINS wordmark. Support an expanded opening mark and a compact scrolled state. Use approximately 90px desktop and 72px mobile compact heights. The state trigger and animation are implementation choices; keep keyboard focus and touch targets usable.”
2. **Campaign feature:** “Create an equal-width desktop photo/information module with a small white FEATURE label and date over the image. Center a regular-weight title and one short Japanese sentence in the information half, followed by two eyewear presentations and same-color rectangle/pill links. Reverse the desktop columns for alternate features, but keep image-first mobile order.”
3. **Action pair:** “Make two 212 × 63px desktop links with black 16px geometric sans-serif text, right arrows, and muted cyan `#93c6d1` fills. CHECK ITEM has square corners; SPECIAL CONTENT is fully rounded. Use a shallow hard lower-right edge, not a soft elevated shadow. At 390px, keep the pair around 330px total width and 54px tall.”
4. **Product assortment:** “Present isolated eyeglass frames on pale, square-cornered image plates. Group a small heart affordance with each item and place compact left-aligned color and price lines underneath. Keep the page background white and avoid a filled outer card. Use two columns on mobile, and contain the frame image without distortion.”
5. **Service footer:** “Create four large white cells with thin gray rules, black outline icons, and centered SHOP LIST, FAQ, NEWS, and ABOUT labels. Add a wider ONLINE SHOP cell with a cart icon and JINS.COM. On mobile, use a two-by-two service grid followed by a full-width shopping row. Finish with compact legal links, left-aligned mobile copyright, and a small upward control.”
6. **Evidence-aware motion:** “Use complete readable headings and brief 200ms control feedback. Implement the large-to-compact identity state explicitly. Do not assume that repeated campaign images scroll automatically or that overlapping BASIC captions establish a particular carousel. Provide reduced-motion behavior for any added transitions.”

## Quick Start

### CSS Custom Properties

This is a reusable CSS adaptation, not the original stylesheet. It uses measured colors, type sizes, and major dimensions while retaining a conventional root font size. The 48rem breakpoint, fixed-header mechanism, divider color, photo wash, product-plate ratio, and button shadow are recommended approximations.

The class contract is simple: a header contains left/right utility groups and a brand image; each campaign contains a media link and an information region; the information contains title, copy, products, and actions. Add `campaign--lead` to the opening feature and `campaign--reverse` to alternate desktop features. Only the lead media needs a second image marked `duplicate` to reproduce the observed desktop repetition. Supply authorized asset URLs separately.

```css
:root {
  /* Measured colors */
  --color-page: #ffffff;
  --color-ink: #000000;
  --color-muted: #808080;
  --color-quiet: #fafafa;
  --color-basic: #e8e8e8;
  --color-ranking: #ed1c24;
  --accent-aw: #e62c27;
  --accent-acetate: #b8dddc;
  --accent-roirom: #93c6d1;
  --accent-ss: #e593c4;

  /* Visual approximations */
  --color-rule: #e5e5e5;
  --button-edge: 2px 2px 0 rgb(0 0 0 / 18%);

  /* Measured family declarations; font files are not included */
  --font-latin: futura-pt, sans-serif;
  --font-japanese: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', 'Helvetica Neue', Arial, Meiryo, sans-serif;

  --text-nav: 20px;
  --text-title: 35px;
  --text-copy: 15px;
  --text-meta: 15px;
  --text-action: 16px;
  --text-photo-label: 18px;
  --text-service: 18px;
  --text-legal: 15px;

  --header-height: 90px;
  --logo-compact: 86px;
  --logo-expanded: 280px; /* Screenshot estimate */
  --page-gutter: 22.5px;
  --section-pad: 52px;
  --action-height: 63.45px;
  --action-gap: 14px;

  /* Measured transition timing */
  --ease-control: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-menu: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-control: 200ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-page);
  font-family: var(--font-japanese);
  font-size: 16px;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Recommended positioning; original positioning was not supplied. */
.rim-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding-inline: 26px;
  background: var(--color-page);
  border-bottom: 1px solid transparent;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.header-tools--left { grid-column: 1; justify-self: start; }
.header-tools--right { grid-column: 3; justify-self: end; }

.icon-control {
  display: grid;
  place-items: center;
  width: 54px;
  height: 58px;
  padding: 15px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.icon-control svg { width: 24px; height: 28px; }
.menu-control {
  width: 60px;
  transition: transform var(--duration-control) var(--ease-menu);
}
.menu-control svg { width: 30px; height: 22px; }

.brand {
  position: absolute;
  top: 30px;
  left: 50%;
  width: var(--logo-expanded);
  transform: translateX(-50%);
  /* Recommended timing for the unverified compaction transition. */
  transition: width 200ms var(--ease-control),
    top 200ms var(--ease-control);
}
.brand img { width: 100%; height: auto; }
.rim-header[data-compact='true'] {
  border-bottom-color: var(--color-rule);
}
.rim-header[data-compact='true'] .brand {
  top: 15px;
  width: var(--logo-compact);
}

.masthead { padding-block: 255px 45px; }
.category-nav {
  display: flex;
  justify-content: center;
  gap: 55.7px;
  font: 500 var(--text-nav)/1.15 var(--font-latin);
  letter-spacing: 0.05em;
}
.category-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8.571px;
  text-decoration: none;
}
.category-nav a::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--color-ranking); /* Dot-color approximation */
}

.campaign {
  --campaign-accent: var(--accent-aw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 2 * var(--page-gutter));
  margin-inline: auto;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--color-rule);
}
.campaign[data-campaign='acetate'] {
  --campaign-accent: var(--accent-acetate);
}
.campaign[data-campaign='roirom'] {
  --campaign-accent: var(--accent-roirom);
}
.campaign[data-campaign='ss'] {
  --campaign-accent: var(--accent-ss);
}
.campaign--lead {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0;
  border-top: 0;
}

.campaign-media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  aspect-ratio: 697.5 / 816.531;
  overflow: hidden;
}
.campaign--lead .campaign-media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1440 / 842.875;
}
.campaign-media > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.campaign-media::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 100px;
  background: linear-gradient(rgb(0 0 0 / 30%), transparent);
  pointer-events: none;
  /* Recommended wash; disable if already present in the asset. */
}
.media-labels {
  position: absolute;
  z-index: 1;
  inset: 23px 18px auto;
  display: flex;
  justify-content: space-between;
  color: white;
  font: 400 var(--text-photo-label)/1.15 var(--font-latin);
  pointer-events: none;
}
.media-labels > * { margin: 0; }

.campaign-info {
  min-width: 0;
  align-self: center;
  text-align: center;
}
.campaign--lead .campaign-info { padding-top: 56px; }
.campaign-title {
  margin: 0;
  font: 400 var(--text-title)/1.15 var(--font-latin);
  text-wrap: balance;
}
.campaign-copy {
  width: 80%;
  margin: 27px auto 0;
  font-size: var(--text-copy);
  line-height: 1.75;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 0;
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
}
.campaign--lead .product-grid {
  width: 80%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product {
  width: min(230px, calc(100% - 20px));
  min-width: 0;
  justify-self: center;
  text-align: left;
}
.product-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4; /* Recommended plate ratio, not measured */
  background: var(--color-quiet);
}
.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-favorite {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* Accessible target recommendation; original size unavailable. */
}
.product-meta {
  padding-inline: 10px;
  color: var(--color-muted);
  font: 400 var(--text-meta)/1.35 var(--font-latin);
}
.product-meta p { margin: 3px 0 0; }
.product-meta .price { line-height: 1.619; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--action-gap);
  margin-top: 80px;
}
.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10.18px;
  width: 212px;
  min-height: var(--action-height);
  padding: 22.55px;
  border: 0;
  border-radius: 0;
  background: var(--campaign-accent, var(--color-ink));
  color: var(--color-ink);
  box-shadow: var(--button-edge);
  font: 400 var(--text-action)/1.15 var(--font-latin);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 200ms var(--ease-control),
    box-shadow 200ms var(--ease-control);
}
.action--story { border-radius: 9999px; }
.action--basic { background: black; color: white; }
.action .arrow { flex: none; }

.view-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 195.75px;
  margin-top: 30px;
  padding: 24px;
  border: 0;
  background: var(--color-quiet);
  color: var(--color-ink);
  font: 400 18px/1.15 var(--font-japanese);
  cursor: pointer;
}

.ranking { margin-block: 130px 60px; color: var(--color-ranking); }
.ranking .product-grid {
  max-width: 1000px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 56px;
}
.ranking .product-meta { color: inherit; }
.product-name {
  margin: 12px 0 7px;
  padding-inline: 10px;
  font: 400 18.571px/1.15 var(--font-latin);
  overflow-wrap: anywhere;
}

.basic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
  padding: 46px 34px 52px 50px;
  background: var(--color-basic);
  text-align: center;
}
.basic-media { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.basic-heading, .basic-copy, .basic-actions { grid-column: 2; }
.basic-copy { margin: 0; font-size: 16px; line-height: 1.917; }
.basic-actions { display: flex; justify-content: center; }

.pickup {
  padding: 51px 0 72px;
  text-align: center;
}
.pickup-label {
  margin: 0 0 20px;
  font: 500 18px/1.15 var(--font-latin);
}
.pickup-link { display: block; width: min(460px, 88%); margin: auto; }
.pickup-link img { width: 100%; height: auto; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.54fr);
  gap: 1px;
  width: calc(100% - 2 * var(--page-gutter));
  margin-inline: auto;
  border: 1px solid var(--color-rule);
  background: var(--color-rule);
}
.footer-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 0 10px 5px;
  background: white;
  font: 500 var(--text-service)/1.15 var(--font-latin);
  text-decoration: none;
}
.footer-service:not(.footer-shop) { aspect-ratio: 1; }
.footer-service svg { width: 28px; height: 32px; }
.footer-shop { gap: 14px; font-size: 25px; }
.shop-primary { display: flex; align-items: center; gap: 14px; }
.shop-secondary { font-size: 15px; }

.footer-legal {
  position: relative;
  padding: 36px 23.5px 57px;
  text-align: center;
  font-family: var(--font-latin);
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.legal-links a {
  padding: 11.59px;
  font-size: var(--text-legal);
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
}
.copyright { margin: 10px 0 0; font-size: 14px; font-weight: 500; }
.return-top {
  position: absolute;
  right: 60px;
  top: 38px;
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Recommended hover feedback; the original end state is unverified. */
@media (hover: hover) {
  .action:hover { transform: translateY(-1px); }
}

@media (min-width: 48rem) {
  .campaign--reverse .campaign-media { grid-column: 2; grid-row: 1; }
  .campaign--reverse .campaign-info { grid-column: 1; grid-row: 1; }
}

/* Recommended breakpoint, anchored to the measured 390px layout. */
@media (max-width: 47.999rem) {
  :root {
    --text-nav: 14.56px;
    --text-title: 26px;
    --text-copy: 13.52px;
    --text-meta: 13.52px;
    --text-action: 13.52px;
    --text-photo-label: 13.52px;
    --text-service: 14.56px;
    --text-legal: 13.52px;
    --header-height: 71.75px;
    --logo-compact: 61.875px;
    --logo-expanded: 190px;
    --page-gutter: 0px;
    --action-height: 53.625px;
    --action-gap: 7.27px;
  }

  .rim-header { padding-inline: 10px; }
  .icon-control, .menu-control {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .icon-control svg, .menu-control svg { width: 19px; height: 22px; }
  .brand { top: 21px; }
  .masthead { padding-block: 182px 31.188px; }
  .category-nav { gap: 40.55px; }
  .category-nav a { gap: 6.24px; }
  .category-nav a::before { width: 4.2px; height: 4.2px; }

  .campaign {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 0;
  }
  .campaign + .campaign { margin-top: 93.59px; }
  .campaign-media { aspect-ratio: 390 / 496.5; }
  .campaign--lead .campaign-media {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: 390 / 523.5;
  }
  .campaign-media > .duplicate { display: none; }
  .campaign-media::after { height: 65px; }
  .media-labels { inset: 14.55px 13px auto; }
  .campaign-info, .campaign--lead .campaign-info { padding-top: 30.16px; }
  .campaign-title { padding-inline: 16px; }
  .campaign-copy { width: 100%; margin-top: 15.59px; padding-inline: 12px; }
  .product-grid { margin-top: 32px; row-gap: 32px; }
  .campaign--lead .product-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    width: min(330.16px, calc(100% - 40px));
    margin: 36.39px auto 0;
  }
  .action {
    width: 100%;
    padding: 19.05px 12px;
    gap: 8.6px;
  }
  .view-more {
    min-height: 147.53px;
    margin-top: 93.59px;
    font-size: 13.52px;
  }
  .ranking { margin-block: 81.59px 66.59px; }
  .ranking .product-grid {
    width: calc(100% - 12.48px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .ranking .product { width: min(156px, 100%); }
  .ranking .product-meta, .product-name { padding-inline: 8.32px; }
  .product-name { font-size: 16.739px; }

  .basic {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 73.84px 0 107.64px;
    gap: 28px;
  }
  .basic-heading { order: 1; }
  .basic-media { order: 2; width: min(335px, 86%); }
  .basic-copy { order: 3; padding-inline: 16px; font-size: 13.52px; }
  .basic-actions { order: 4; width: 157.55px; }

  .pickup { padding-block: 63.95px 52.47px; }
  .pickup-label { margin-bottom: 14.03px; font-size: 13.52px; }
  .footer-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 0;
    border-inline: 0;
  }
  .footer-service:not(.footer-shop) {
    min-height: 139.39px;
    aspect-ratio: auto;
    gap: 7.28px;
  }
  .footer-service:nth-child(odd):not(.footer-shop) {
    border-right: 1px solid var(--color-rule);
  }
  .footer-service svg { width: 24px; height: 28px; }
  .footer-shop {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    min-height: 133.53px;
    padding: 24px 31.72px 24px 37.95px;
    font-size: 18.2px;
  }
  .shop-primary { gap: 10px; }
  .shop-secondary { font-size: 13.52px; }
  .footer-legal { padding: 31.16px 16px 46.8px; text-align: left; }
  .legal-links a { padding: 5.2px; }
  .copyright { margin-top: 36.4px; padding-left: 3.24px; font-size: 13.52px; }
  .return-top { top: auto; right: 18px; bottom: 36px; width: 44px; height: 44px; }
}

/* Recommended safeguards for narrow screens and keyboard users. */
@media (max-width: 22rem) {
  .brand { width: 155px; }
  .actions { grid-template-columns: minmax(0, 1fr); width: calc(100% - 40px); }
  .footer-shop { flex-wrap: wrap; justify-content: center; padding-inline: 20px; }
}

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

@media (prefers-reduced-motion: reduce) {
  .brand, .menu-control, .action { transition: none; }
  .action:hover { transform: none; }
}
```

Toggle `data-compact` through application state when an opening-page sentinel leaves view; the sentinel position is a recommended choice because the original threshold was not supplied. Connect the menu, favorites, VIEW MORE, and upward control to explicit behavior separately. CSS alone does not implement those functions.

Use `<picture>` or responsive image sources for campaign art direction. The measured media boxes above preserve the captured proportions, but actual focal-point choices require the supplied photography. Remove the CSS photo wash if the asset already contains it.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. This does not imply that the original site uses Tailwind. Define the custom properties above first; component geometry and responsive rules still require implementation.

```css
@theme inline {
  --color-rim-page: var(--color-page);
  --color-rim-ink: var(--color-ink);
  --color-rim-muted: var(--color-muted);
  --color-rim-rule: var(--color-rule);
  --color-rim-quiet: var(--color-quiet);
  --color-rim-basic: var(--color-basic);
  --color-rim-ranking: var(--color-ranking);
  --color-rim-aw: var(--accent-aw);
  --color-rim-acetate: var(--accent-acetate);
  --color-rim-roirom: var(--accent-roirom);
  --color-rim-ss: var(--accent-ss);

  --font-rim-latin: var(--font-latin);
  --font-rim-japanese: var(--font-japanese);
  --text-rim-title: var(--text-title);
  --text-rim-copy: var(--text-copy);
  --text-rim-meta: var(--text-meta);
  --text-rim-action: var(--text-action);
  --spacing-rim-gutter: var(--page-gutter);
  --radius-rim-story: 9999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://rim.jins.com/jp/](https://rim.jins.com/jp/). The supplied browser observation reports HTTP 200 with no URL change.
- **Inspection date:** September 12, 2026. Evidence retrieval timestamp: `2026-09-12T11:32:42.699Z`, equivalent to 20:32:42.699 JST. Individual screenshot timestamps were not separately supplied.
- **Desktop evidence:** 1440 × 1000 CSS-pixel opening, middle, and footer captures, plus rendered text, anchor destinations, computed style samples, and element rectangles. Document height: approximately 7511.38px.
- **Mobile evidence:** 390 × 844 CSS-pixel opening and footer captures, plus rendered text, anchor destinations, computed style samples, and element rectangles. Document height: approximately 7996.97px.
- **Visual authority:** current-page captures establish photography, logo presentations, icon arrangement, button silhouettes, white space, and footer composition. DOM evidence adds exact colors, requested font stacks, sampled transitions, and geometry for sections without dedicated captures.
- **Recorded navigation:** campaign, collection, BASIC, service, favorites, Instagram, and JINS destinations were present as original-page links. Destination pages were not separately inspected for this reference.
- **Limitations:** no source stylesheet formulas, breakpoint declarations, image-file inventory, native image dimensions, font-file inventory, or interaction recording was supplied. Desktop title fragments and overlapping BASIC captions limit conclusions about text reveal and media changes. No additional browsing or file inspection was performed.

This reference describes the current homepage represented by the supplied inspection. Measured values, screenshot estimates, and implementation recommendations are identified separately; the reusable CSS is an adaptation rather than a reconstruction of unavailable source code.