# 1TO2 / それいけイチトニ編集室 — Style Reference

> An editorial photo shelf spread across a warm orange canvas.

**Website:** [1to2.jp](https://1to2.jp/)
**Original URL:** https://1to2.jp/
**Final URL:** https://1to2.jp/
**Theme:** orange canvas with white interface text in the supplied current captures; other color states are not established.
**Inspected:** October 5, 2026, 05:37:48.890 JST / October 4, 2026, 20:37:48.890 UTC, according to the supplied browser record.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current homepage, including its opening feature, recommendation selectors, article collections, sidebar content, introduction, social links, and footer. Evidence consists of three desktop captures, two mobile captures, rendered text, link destinations, element rectangles, and selected computed styles. Destination pages and checkout were not inspected.

The homepage brings editorial reading and shopping into one continuous orange environment. Large square photographs carry the visual emphasis, while white Japanese Gothic text supplies a compact, consistent interface. A red-orange category square overlaps each featured image. Circular author portraits, raised content counts, simple triangular arrows, and an outlined thumbnail shelf give the page its recognizable details.

Desktop composition is deliberately asymmetric: a broad feature area occupies the left, and a narrow recommendation panel sits at the right. Farther down, the left column becomes an article grid and editorial feature area, while the right column holds discovery tools. Mobile reorganizes these relationships into a vertical page with a horizontal thumbnail strip and a two-column article grid. This is a browsable editorial and shopping homepage, with several paths into content rather than one dominant conversion action.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. These measurements describe a particular captured state.
- **Calculated** means arithmetic based on measured values, such as the gap between article columns.
- **Estimated** means a visual approximation from a current-page screenshot. Estimated hex colors are implementation starting points, not sampled source values.
- **Recommended** means a proposed implementation choice or improvement. Breakpoints, accessibility enhancements, and unspecified interaction details fall into this category.
- **Named tokens** are descriptive aliases created for this reference. The supplied custom-property extraction was empty; these names are not original source variables.
- **Visibility takes precedence over raw DOM enumeration.** The evidence includes overlapping slides, repeated labels, and navigation elements that are absent from the corresponding screenshot. Their presence does not establish that they were simultaneously visible.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Orange Canvas | `#d47f2f` | `--color-canvas` | **Measured:** body background is `rgb(212, 127, 47)` at both viewports. Extends through the opening, content, sidebar, and footer. |
| Interface White | `#ffffff` | `--color-ink` | **Measured:** visible navigation, feature titles, bylines, and sampled article text use white. White outlines and utility surfaces are also visually evident. |
| Shopping Stamp | Approximately `#c54816` | `--color-category` | **Estimated:** deeper red-orange fill of the overlapping category square. Its background declaration was not supplied. |
| Soft White | Approximately `rgb(255 255 255 / 55%)` | `--color-muted` | **Recommended approximation:** secondary copy and keyword links look paler than headings. The responsible opacity or compositing chain was not captured. |
| Search Ink | `#d47f2f` | `--color-search-ink` | **Measured:** the search label uses the canvas color inside the visually white search capsule. |

The canvas is a flat color. Texture belongs to the photographs: baked goods, printed packaging, book covers, tabletop surfaces, and the building image. Do not add a paper texture or gradient to the entire page to imitate photographic texture.

### Local Accents

The desktop opening shows a muted lavender previous-arrow triangle and a white next-arrow triangle. The mobile opening shows a white previous arrow and a muted olive next arrow. These are observed states, but the evidence does not establish whether their colors indicate hover, slide identity, an animation phase, or another condition. Do not assign disabled-state semantics to them.

The social links introduce four isolated brand-color circles: green, magenta, blue, and cyan. Approximate implementation values are `#00c300`, `#df2f7e`, `#1877f2`, and `#1da1f2`. These are visual estimates, not verified computed values, and should remain confined to the corresponding social identities.

### Color Behavior and Contrast

The body declares `background-color 0.5s ease-in-out`, and many text elements declare `color 0.5s ease-in-out`. This supports a coordinated color-transition mechanism, but does not establish a user-selectable theme system or the trigger for changing colors. The supplied current-page screenshots all show the orange canvas.

**Calculated accessibility consideration:** white against `#d47f2f` has approximately **3.05:1** contrast. This is insufficient for normal-size text under the usual 4.5:1 criterion. The numerous 10–14px labels therefore need a contrast adjustment in an accessible adaptation. Keep the observed palette documented separately from any improved palette.

## Tokens — Typography

### Japanese Gothic Interface

The sampled visible text declares this family stack:

```css
font-family:
  '游ゴシック Medium', 'Yu Gothic Medium',
  '游ゴシック体', YuGothic,
  'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
  'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
```

The stack is verified; the particular font file used to draw each glyph is not. Most sampled navigation, titles, bylines, and metadata use weight `700`. Their slightly open `0.5px` tracking keeps small Japanese labels distinct against the uninterrupted background.

The root and body report Times, and many anchor wrappers report `font-size: 0px`. Those values do not describe the visible interface lettering: styled descendants supply the Japanese Gothic family, white color, and actual text size. Do not reproduce the wrapper styles as a general typography system.

### Wordmark

The home link displays `#それいけイチトニ編集室` at the upper left. Its measured box is **207 × 18px** on desktop and **184 × 16px** on mobile. The link's text extraction is empty, so its lettering should be treated as a visual brand asset whose construction and font are unverified. A text replacement should be labeled as an approximation.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Primary navigation | `20px / 20px` | Bottom navigation `14px / 20px` | `700`; desktop `0.5px`, mobile normal | Measured |
| Opening feature title | `20px / 30px` | `14px / 22px` | `700`, `0.5px` | Measured |
| Opening author byline | `14px / 14px` | `10px / 10px` | `700`, `0.5px` | Measured |
| Featured category label | `20px / 20px` | `14px / 14px` | `700`, normal tracking | Measured |
| Recent-articles heading | `20px / 20px` | `14px / 14px` | `700`, `0.5px` | Measured |
| Article-card title | `14px / 24px` | `14px / 22px` | `700`, `0.5px` | Measured |
| Card taxonomy and author | `10px / 10px` | `10px / 10px` | `700`, `0.5px` | Measured |
| Search label | `14px / 40px` | Desktop capsule not visible in mobile opening | `700`, `0.5px` | Measured desktop |
| Raised counts | Approximately `12px` | Approximately `12px` | Bold appearance | Screenshot estimate |
| Introduction paragraph | Approximately `14px / 28px` | Exact mobile style unavailable | Regular appearance | Desktop screenshot estimate |
| Keyword links | Approximately `14px / 24px` | Approximately `14px / 24px` | Bold appearance | Screenshot estimate |
| Footer utilities and copyright | Approximately `12px` | Approximately `12px` | Bold appearance | Screenshot estimate |

The hierarchy stays compact. Large photographs and large areas of empty orange provide scale; there is no oversized typographic headline dominating the opening.

### Count Treatment

Content counts sit above and just beyond their labels, resembling small superscripts. The current page shows `88` for reading, `06` for shopping, `94` for recommendations and recent articles, and `01` for news. Preserve leading zeros when formatting equivalent counts. The separated digits in the DOM extraction should not become vertically stacked visible text.

## Tokens — Spacing & Shapes

**Overall rhythm:** small metadata intervals inside generous image compositions.

**Suggested spacing vocabulary:** `5`, `10`, `15`, `20`, `30`, `60`, `75`, `90`, and `150px`. These summarize measured gaps and screenshot estimates; they are not evidence of an original spacing scale.

### Spacing Scale

| Use | Value | Status |
| --- | --- | --- |
| Desktop page-edge inset | `60px` | Measured at brand and opening author portrait |
| Mobile page-edge inset | `30px` | Measured at brand, title, cards, and recommendation heading |
| Desktop author portrait to title | `20px` | Calculated from portrait right edge at 150 and title at 170 |
| Mobile portrait to byline | `10px` | Calculated from portrait right edge at 70 and byline at 80 |
| Desktop article-column gap | Approximately `60px` | Calculated from card rectangles |
| Mobile article-column gap | `30px` | Calculated from 150px cards at x=30 and x=210 |
| Mobile recommendation-thumbnail gap | `10px` | Calculated from 66px items spaced 76px apart |
| Desktop recommendation-panel inset | Approximately `30px` | Screenshot estimate, excluding the border |
| Desktop recommendation-grid gap | Approximately `15px` | Screenshot estimate |
| Mobile recommendation-panel inset | `10px` plus approximately `2px` border | Derived from screenshot and thumbnail positions |
| Desktop title below recent-article image | Approximately `10px` | Derived from square-image geometry and title rectangle |
| Mobile title below recent-article image | Approximately `5px` | Derived from square-image geometry and title rectangle |

### Border Radius

| Element | Geometry | Evidence |
| --- | --- | --- |
| Feature and article images | Square corners | Visible screenshots; sampled feature link radius `0px` |
| Category stamp | Square | Visible screenshots |
| Opening author portrait | `50%` | Measured |
| Desktop recommendation frame | Approximately `20px` radius | Screenshot estimate |
| Mobile recommendation frame | Approximately `8px` radius | Screenshot estimate |
| Search capsule | Approximately `20px` radius on a 40px-high shape | Screenshot estimate |
| Collection links | Fully rounded, approximately `200 × 40px` | Screenshot estimate |
| Social buttons | Approximately `60px` circles | Screenshot estimate |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `4455.671875px`, reported rounded as 4456 | `5849px` | Measured |
| Wordmark | x=60, y=51, 207 × 18 | x=30, y=37, 184 × 16 | Measured |
| Search capsule label box | x=1140, y=40, 240 × 40 | Not visible in opening screenshot | Desktop measured |
| Active feature image | x=290, y=250, 500 × 500 | x=75, y=242, 240 × 240 | Measured stable image boxes |
| Arrow link boxes | 52 × 60, at x=119 and 909, y=470 | 26 × 30, at x=24.5 and 339.5, y=347 | Measured |
| Opening portrait | x=60, y=850, 90 × 90 | x=30, y=584, 40 × 40 | Measured stable state |
| Opening title | x=170, y=866, 30px line box | x=30, y=557, 22px line box | Measured |
| Opening recommendation frame | Approximately x=1080, y=120, 300 × 820 | Approximately x=30, y=724, 330 × 90 | Screenshot estimates |
| Recommendation thumbnail | Approximately 111 × 111 | 66 × 66 | Desktop estimate; mobile measured |
| Recent-article card width | Approximately 220 | 150 | Measured |
| Recent-article columns | Three, starting at x=150, 430, 710 | Two, starting at x=30, 210 | Measured |
| Main content width | Approximately 780, from x=150 to 930 | 330, from x=30 to 360 | Calculated |
| Lower recommendation feature photo | Approximately 334 × 334 | Not visually established | Desktop screenshot estimate |

The desktop feature is centered around x=540, inside the broad left region. Centering it at the viewport midpoint would move it into the sidebar relationship and change the composition.

## Components

### Desktop Header

**Role:** identity, reading and shopping navigation, cart access, and search.

Place the small white wordmark at the left edge, with a compact utility group aligned to the right. The group contains `読みもの`, `買いもの`, `カート`, a white circular cart icon, and a white search capsule labeled `キーワード検索`. The cart circle is approximately 40px in diameter; the search box measures 240 × 40px. Navigation labels are 20px bold, with raised counts.

The header occupies the same upper position in all three desktop scroll captures, supporting a pinned appearance. The supplied properties do not distinguish `fixed` from `sticky`. There is no visible separating rule, shadow, or contrasting header panel.

The cart href points to `https://kashijikan-shop.jp/cart/#/checkout`. That establishes an external checkout destination, not the appearance or behavior of the checkout itself.

### Mobile Identity and Bottom Navigation

**Role:** preserve a small brand presence while giving primary destinations a separate mobile treatment.

The mobile opening shows only the wordmark at the top. A later capture shows five horizontally distributed navigation items near the bottom: `検索`, `読みもの`, `買いもの`, `おすすめ`, and `カート`. Labels are 14px bold, with raised counts and a small cart symbol.

This bottom navigation is not visible in the supplied mobile opening, where the recommendation strip occupies the lower part of the screen. Its visibility trigger and exact positioning behavior are unverified. Do not describe it as continuously visible from page load. A fixed bottom bar controlled by application state is a reasonable implementation recommendation, provided content clearance and safe areas are handled.

### Opening Feature

**Role:** highlight one editorial or shopping entry while keeping its author and category visible.

The component consists of a square linked photograph, an overlapping category stamp, two detached triangular controls, and a separate title/byline group. The desktop photograph measures 500 × 500px. The surrounding empty field is substantial: the photograph begins 250px below the viewport top, and its caption group sits near the lower left of the opening.

On mobile, the photograph becomes 240 × 240px at x=75. It still has room for arrows outside its edges. The title moves above the author row and aligns to the page's 30px inset rather than the photograph's left edge.

The desktop capture shows `菓子時間ムギ マフィン4個セット`; the mobile capture shows `菓子時間ムギ 菓子時間セット`. The DOM contains multiple entries sharing the same feature location. This establishes a multi-state feature presentation, but not its autoplay interval or selection trigger.

### Overlapping Category Stamp

**Role:** identify the featured item's reading or shopping category.

A solid red-orange square sits across the upper-left corner of the photograph. Its visible size is approximately 118–120px on desktop and 72–74px on mobile. Its center roughly coincides with the image's top-left corner, leaving half of the stamp outside the photo in each direction.

The label is white, bold, and centered. The measured text wrappers are 130px wide on desktop and 80px on mobile; those wrapper widths are not measurements of the visible colored square. Keep the stamp square and prominent rather than converting it into a small rounded chip.

### Author Identity

**Role:** make editorial authorship part of both shopping and reading discovery.

The opening uses a 90px circular portrait on desktop and a 40px portrait on mobile. The visible portrait combines a person and a dog, reinforcing the personal editorial tone. A byline beginning `記事を書いた人` sits beside it. Both the portrait and byline link to a staff-filtered collection.

The lower desktop recommendation feature uses a smaller portrait, approximately 60px. Treat portrait size as a component variant rather than forcing one global avatar size.

Article author names identify content authors. They do not establish website production credits.

### Opening Recommendation Shelf

**Role:** expose several other items alongside the currently featured entry.

On desktop, the shelf is a tall frame at the right: approximately 300px wide, with a 2px white outline and 20px rounded corners. The heading `編集室おすすめ` and its raised count sit inside the frame. Below it, square images form two columns with roughly 15px gaps. Lower images are visibly clipped at the frame boundary.

On mobile, the heading moves above the frame, left aligned at x=30. The frame becomes a shallow 330 × 90px strip with approximately 8px corners. It contains 66px thumbnails, 10px gaps, and a partially visible next item at the right edge. This is the clearest structural reflow on the page.

The corresponding thumbnail links use JavaScript placeholders in the DOM. They appear to be selection controls, but clicking them was not recorded. For a new implementation, use named buttons if they select a slide, or ordinary links if they navigate to articles. Do not assign both behaviors to an ambiguous control.

### Recent-Article Grid

**Role:** provide a denser overview after the opening feature.

The section begins with `最近の記事` and a raised count. On desktop, six entries occupy a three-column grid with approximately 220px-wide cards and 60px column gaps. On mobile, the same collection uses two 150px columns separated by 30px.

Each card is unboxed: square image, compact bold title, and small links for content type, category, and author. Card titles use 14px type, with 24px desktop and 22px mobile line heights. Metadata uses 10px type and wraps onto additional lines when space is limited. The source contains both one-line and two-line desktop titles, so card content is not a single rigid-height label.

Keep article navigation separate from the taxonomy and author links. In semantic markup, avoid placing independent metadata anchors inside another anchor.

### Lower Recommendation Feature

**Role:** give an editorial recommendation more space within the main content column.

The supplied desktop middle capture shows a square photograph of approximately 334px at the left, with title and category text to its right. An overlapping category stamp repeats the opening motif at a smaller scale. The author row sits near the bottom of the information column.

Below the feature is a contiguous filmstrip of roughly 111px square images. About seven images fit across the 780px main column. A white outlined `おすすめ一覧` link, approximately 200 × 40px, sits below and aligns to the column's right edge.

This is distinct from the opening's framed shelf: one is a large editorial feature with an image strip; the other is a compact selector beside the opening. The lower feature's mobile visual layout was not captured in detail.

### Reading and Shopping Collections

**Role:** preserve clear entry points into the two major content types.

Rendered text includes `最近の読みもの` and `最近の買いもの`, each with three entries and a collection link. Reading examples include food features, objects, art, and music; shopping examples include baked goods, publications, and household items. Their coexistence is central to the site's identity.

The supplied element sample does not fully measure these sections. Reuse the established square-image, compact-title, and small-metadata language, while treating any additional layout specification as a recommendation.

### Collection Link

**Role:** lead from a homepage sample to a complete index.

Examples include `すべての一覧`, `おすすめ一覧`, `読みもの一覧`, and `買いもの一覧`. The visible desktop treatment is a transparent capsule with a thin white outline, approximately 200px wide and 40px high, containing centered bold text.

Several extracted links contain duplicated copies of their label. The screenshots show a single readable label. Do not render duplicate accessible names or assume the duplicates prove a particular hover animation.

### Discovery Sidebar

**Role:** support exploration beyond the featured content.

The rendered desktop page includes news, category controls, popular articles, keywords, and social links. A news item carries a date, and popular articles carry ranks `1`, `2`, and `3`. The middle desktop screenshot shows a compact popular-article row above the keyword section.

The sidebar is approximately 300px wide at x=1080. Its content changes along the document; do not pin the entire opening recommendation frame over all later sidebar sections.

### Keyword Cloud

**Role:** provide many topical entry points without separate cards or filters.

Under `人気のキーワード`, links form a dense, naturally wrapping text block. Terms have broadly consistent size; this is not a weighted cloud with several dramatic font scales. There are no pill backgrounds, individual outlines, or list bullets.

On desktop, the block is left aligned inside the narrow sidebar. On mobile, it becomes a centered block across the content width. Use natural inline wrapping or a centered wrapping layout with modest word gaps. Preserve whole linked phrases such as `世界の紙を巡る旅` where possible.

Observed keyword hrefs lead to `/all/?keyword=...`. The resulting search pages were not inspected.

### Editorial Introduction

**Role:** explain the publication and connect it to its physical setting.

The desktop lower capture shows a large building photograph tilted counterclockwise by approximately 10°. Below it, `イチトニ編集室とは` introduces a short paragraph. The current page describes a web medium about people's, objects', and activities' first and second steps, with 1TO2 BLDG staff acting as editors.

The text occupies the approximately 780px main column and is visibly lighter in weight than the surrounding headings. Two outlined capsules lead to the editorial-room and building sections. The recorded destinations are `/about/` and `/about/#building`.

The photograph's visible rotation is established; scroll-linked rotation, parallax, and animation of this image are not.

### Social Links and Footer

**Role:** finish the discovery flow with official accounts and utility information.

The social section is headed `編集室の公式アカウント`. Four approximately 60px circles display LINE, Instagram, Facebook, and a Twitter bird symbol in white. Preserve the actual visible symbols when documenting the current page; their outgoing URLs were not supplied in the evidence excerpt.

The desktop footer places compact legal and utility links at the left and copyright at the right. The mobile bottom capture centers the social heading, social buttons, and copyright, with substantial vertical spacing. The desktop legal-link row is not visible there.

The displayed copyright begins `© 2021`. This is page content, not the inspection year.

### Unidentified Circular Mark

A plain white circle appears near the lower-right of the opening feature: approximately 30px in diameter on desktop and 20px on mobile. No associated label or behavior was established. Record it as a visible mark; do not rename it a play button, pagination control, or scroll indicator without further evidence.

## Tokens — Motion & Interaction

| Treatment | Recorded declaration or observation | What can be concluded |
| --- | --- | --- |
| Canvas color | `background-color 0.5s ease-in-out` | A half-second background transition is declared. Its trigger and alternate colors are unknown. |
| Interface text color | `color 0.5s ease-in-out` | Text can participate in the same duration of color change. |
| Featured image link | `transform 0.25s ease-in-out` | A transform transition exists; hover scale or rotation endpoints were not supplied. |
| Author portrait link | `transform 0.25s ease-in-out` | Portrait movement is supported by a declaration, but its activated state is unverified. |
| Arrow controls | `transform 0.25s ease-in-out` | Do not infer a bounce, rotation, or travel distance. |
| Card metadata links | `opacity 0.25s ease-in-out` | Opacity feedback is declared; the target opacity is unknown. |
| Outgoing mobile category text | `0.5s ease-in-out forwards kv_off5` | A named finite outgoing animation appears in the mobile record. Keyframes were not supplied. |
| Incoming mobile category text | `0.5s ease-in-out 0.5s forwards kv_on5` | A half-second animation with a half-second delay appears in the record. Its geometric path is unknown. |
| Featured content | Different visible items across desktop and mobile captures | A multi-state presentation is evident; timing, autoplay, and user triggers remain unverified. |
| Search, thumbnail selection, category controls | JavaScript placeholder hrefs | Control hooks exist; opened states and outcomes were not tested. |

A transformed outgoing mobile image has a different rectangle from the stable 240px square. Do not treat that intermediate rectangle as another responsive image size.

The inspection process waited for visible images and finite motion to settle, and temporarily paused perpetual animations during readiness checks. This reduces accidental loading-state capture, but it is not a recording of every interaction or animation phase. No click, hover, keyboard, swipe, or form-submission results were supplied.

For reuse, preserve the measured 250ms feedback and 500ms color timing where appropriate. Define missing interaction endpoints explicitly in the new product instead of presenting them as recovered original behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid orange | Continuous setting for the entire homepage |
| Editorial content | Photographs and white text directly on the canvas | Keeps attention on objects and stories |
| Category stamp | Solid red-orange square | Strong category identification at image corners |
| Recommendation shelf | Canvas fill, thin white outline, rounded perimeter | Groups many small images without a separate surface color |
| Search | White capsule, orange text and icon | Visually distinct utility input or trigger |
| Collection links | Transparent white-outlined capsules | Consistent secondary navigation |
| Author identity | Circular photographic crop | Personal attribution and staff discovery |
| Social links | Saturated circles with white symbols | Recognizable external identities |

There is no visible general shadow or elevation system. The photographic shadows belong to the source imagery; they should not become generic CSS card shadows.

## Imagery

The page relies on everyday objects photographed with care: baked goods and their packaging, a cheesecake, bottled condiments, books, tableware, artwork reproductions, and a building exterior. Colorful editorial cover art sits comfortably beside natural product photography.

The recurring square image format is crucial. The feature image, article thumbnails, recommendation grid, and filmstrip all share this geometry, letting the same subject move between large and small presentations. Preserve the composition of the supplied square assets. Do not infer native dimensions, cropping rules, or `object-fit` values from the link rectangle alone.

Warm product backdrops connect visually to the orange canvas, while blue backgrounds and pale book covers provide contrast. These varied photographic colors should remain intact. A global orange tint would flatten the distinction between products and their setting.

The author portrait is a circular crop; the building image is a tilted rectangle; most other imagery stays square and upright. This limited set of exceptions creates character without making every image decorative.

### Observed Asset References

No original image `src` URLs or filenames were supplied. The following are associated content destinations, not image-file URLs and not independently inspected pages.

| Visible subject | Recorded associated URL | Use |
| --- | --- | --- |
| Muffin box and four muffins | [Shopping detail 2100](https://1to2.jp/shopping/detail/2100/) | Desktop opening, cards, recommendation imagery |
| Cheesecake and packaging | [Shopping detail 2107](https://1to2.jp/shopping/detail/2107/) | Recommendation and article imagery |
| Assorted baked-goods set | [Shopping detail 2131](https://1to2.jp/shopping/detail/2131/) | Mobile opening and collections |
| Soy-sauce gift set | [Shopping detail 1773](https://1to2.jp/shopping/detail/1773/) | Recommendations and shopping collection |
| AKIU BRAND MAKERS book | [Shopping detail 1768](https://1to2.jp/shopping/detail/1768/) | Recommendation imagery |
| Table soy-sauce vessel | [Shopping detail 1770](https://1to2.jp/shopping/detail/1770/) | Recommendation imagery |
| Opening author's portrait | [Staff-filtered shopping collection](https://1to2.jp/shopping/?staff=hitomi-arakawa) | Circular author link |
| Building exterior | Homepage introduction; associated link to [building section](https://1to2.jp/about/#building) | Tilted contextual photograph |

Use authorized photographs and brand assets when implementing a close reference. Do not manufacture asset paths from these content IDs.

## Layout & Responsive Behavior

### Desktop Composition

The opening fills approximately the first 1000px of the document at the inspected viewport. Its main photograph is centered inside a broad left area, while the recommendation frame occupies the rightmost 300px column with a 60px outer margin.

Below the opening, the primary content starts at x=150 and spans approximately 780px. The sidebar begins at x=1080, leaving approximately 150px between the main column's right edge and the sidebar. These large spaces are as important as the small text sizes.

The recent-article grid starts below a 20px heading with approximately 75px of additional clearance. Images form three columns. Later sections alternate grids, a larger recommendation composition, collection links, and the introduction. The entire document scrolls; this is not an internally scrolling full-screen application.

### Mobile Composition

At 390px wide, the main horizontal inset is 30px, giving 330px of content width. The opening photograph is more tightly centered, leaving 75px on either side. Arrow geometry halves from 52 × 60 to 26 × 30px. The overlapping category square also becomes smaller.

The title moves into a separate row above the 40px author portrait and byline. Below the feature, the recommendation heading starts at y=700, and the horizontal frame begins near y=724. The recent-article heading follows at y=874, just beyond the first viewport.

Recent articles retain two columns at this width. Metadata wraps and may occupy multiple short rows. The later keyword cloud and social section are centered. The measured document height grows to 5849px as the desktop column relationships become a longer mobile sequence.

### Responsive Evidence Boundaries

| Relationship | Desktop evidence | Mobile evidence |
| --- | --- | --- |
| Primary utilities | Top-right navigation and search capsule | Bottom navigation visible in later capture; top utilities absent from opening |
| Feature photograph | 500px square | 240px square |
| Feature caption | Title and byline beside a large portrait | Title above smaller portrait/byline row |
| Opening recommendations | Tall two-column framed shelf | Single horizontal thumbnail strip |
| Recent articles | Three columns | Two columns |
| Keywords | Left aligned in sidebar | Centered across content width |
| Social links | Sidebar width, approximately 20px circle gaps | Centered, smaller gaps |
| Footer | Utility links left, copyright right | Centered copyright; utility row not shown |

Only these two viewport sizes were inspected. Exact media-query thresholds, tablet layouts, browser zoom behavior, and short landscape behavior remain unknown. The Quick Start uses a recommended breakpoint, not an extracted source breakpoint.

## Do’s and Don’ts

### Do

- Start with the measured orange canvas `#d47f2f` and white interface details.
- Let square photography establish the hierarchy before increasing headline size.
- Preserve the desktop feature's left-region center and its separate right recommendation shelf.
- Use the overlapping square category stamp as a repeated structural motif.
- Keep author portraits and staff links visible in both reading and shopping contexts.
- Use compact bold Japanese Gothic labels with the measured line heights and tracking.
- Retain raised counts and leading-zero formatting where the content uses them.
- Reflow the recommendation shelf into a horizontal strip on mobile.
- Preserve the two-column mobile recent-article grid at the observed 390px width.
- Use whitespace, image edges, and thin white outlines to organize the page.

### Don't

- Don't replace the editorial homepage with a generic sales headline, feature-benefit grid, and a single oversized CTA.
- Don't center the desktop hero against the entire viewport while leaving the recommendation panel in place.
- Don't place every image and caption inside a rounded white card.
- Don't apply a warm tint to all photographs or add a global texture absent from the captures.
- Don't turn plain keyword links into a wall of colored chips.
- Don't copy the raw Times or zero-size anchor-wrapper styles into visible text.
- Don't render repeated DOM labels or inactive slides as simultaneous visible content.
- Don't invent autoplay intervals, swipe gestures, hover transforms, or the circular mark's purpose.
- Don't treat pale arrow colors as confirmed disabled states.
- Don't mistake the copyright year or a dated news entry for the inspection date or proof of discontinuation.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified original-site features:

- Increase contrast for small text. A dark ink such as `#321e12` is a possible starting point on the measured orange, or darken the background where white text is essential. Recheck all states rather than assuming the default pair passes.
- Increase 10px bylines and metadata to at least 12px where readability is more important than exact visual matching. Allow card height to grow naturally.
- Give carousel arrows, thumbnail selectors, search, and social links explicit accessible names. Use buttons for state changes and anchors for navigation.
- Expand the mobile arrows' interactive targets to at least 44 × 44px while keeping the visible triangles at 26 × 30px.
- Keep inactive slides out of keyboard navigation and the accessibility tree. Announce user-requested slide changes without continuously interrupting reading.
- If automatic advance is implemented, provide pause controls and stop advancement during interaction. No automatic-advance behavior was verified here.
- Respect reduced-motion preferences in both CSS and JavaScript. A static selected feature should remain usable without animated entry and exit.
- Give the horizontal recommendation strip keyboard access and a discoverable way to reach clipped items.
- Handle long Japanese and mixed-language titles without horizontal page overflow. Some extracted inactive title boxes are wider than the mobile content area.
- If the bottom navigation is fixed, reserve its full height plus the device safe area. Keep legal and contact destinations reachable on mobile even though they are absent from the supplied bottom capture.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: measured `#d47f2f`.
- Primary interface text and outlines: measured white `#ffffff`.
- Category stamp: estimated `#c54816`.
- Secondary text: visually softened white; alpha `0.55` is an approximation.
- Search: white capsule with orange text.
- Social circles: localized green, magenta, blue, and cyan accents.
- Arrow colors: state-dependent appearance is visible, but its semantics are unknown.

### Overall Prompt

“Create an editorial and shopping homepage inspired by the current 1TO2 interface. Use a continuous orange canvas `#d47f2f`, compact bold Japanese Gothic text, white outlines, and square product and editorial photographs. On desktop, center a 500px feature image inside a broad left region and place a tall 300px recommendation shelf on the right. Overlap the photograph's upper-left corner with a red-orange square category stamp. Put detached triangular arrows beside the image and a circular author portrait with title and byline near the bottom-left. Continue with unboxed article grids, a larger recommendation feature, a dense keyword sidebar, and a tilted building photograph above the introduction. On a 390px phone, use 30px page insets, a 240px feature image, a horizontal recommendation strip, and two 150px article columns. Keep motion specifications limited to verified durations unless new behavior is explicitly designed.”

### Example Component Prompts

1. **Opening feature:** “A 500px square product photograph on a flat orange field, positioned at the center of the left content region. Place a roughly 120px red-orange category square halfway outside the photo's upper-left corner. Add detached white triangular arrows and a separate circular author portrait with compact white title and byline.”
2. **Recommendation shelf:** “A 300px-wide transparent panel with a 2px white border and approximately 20px corners. Place a centered Japanese section label with a raised count above two columns of square thumbnails. On mobile, move the heading outside the border and make the thumbnails a single horizontal row of 66px images.”
3. **Article card:** “An unboxed square photograph followed by a bold 14px Japanese title and tiny category and author links. Use white text directly on orange, square image corners, and no shadow. Arrange three columns on wide screens and two columns within a 330px mobile content area.”
4. **Keyword section:** “A narrow block of uniformly sized topical links, softly white against orange, with natural line wrapping and no chip backgrounds. Align it left in a desktop sidebar and center it on mobile.”
5. **Introduction:** “A large building photograph tilted about ten degrees counterclockwise, followed by a modest bold section heading, a short regular-weight paragraph, and two thin white outlined capsule links. Maintain the same orange canvas throughout.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. It uses the measured canvas, font stack, type sizes, stable image dimensions, and transition durations. Category color, muted opacity, panel radii, the 1100px breakpoint, and intermediate-width formulas are approximations or recommendations.

Expected structure: `.opening` contains `.hero-stage` and `.recommend-rail`; `.content-layout` contains the main content and discovery sidebar. Within `.hero-stage`, use `.hero-figure`, `.hero-credit`, and two arrow buttons. The feature title, portrait, and byline are direct children of `.hero-credit`. Apply `.site` to the page wrapper. Set `data-nav-visible='true'` on that wrapper only when the mobile navigation should be shown; its original visibility trigger is unknown.

```css
:root {
  /* Measured palette and an estimated category fill. */
  --color-canvas: #d47f2f;
  --color-ink: #fff;
  --color-category: #c54816;
  --color-muted: rgb(255 255 255 / 55%);

  /* Declared family stack; actual resolved font may vary. */
  --font-ui: '游ゴシック Medium', 'Yu Gothic Medium',
    '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', sans-serif;
  --weight-bold: 700;
  --text-heading: 20px;
  --text-card: 14px;
  --text-meta: 10px;
  --tracking-ui: 0.5px;

  --page-inset: 60px;
  --sidebar-width: 300px;
  --content-inset: clamp(60px, 10.41667vw, 150px);
  --grid-gap: clamp(30px, 4.16667vw, 60px);
  --rule: 2px;
  --radius-panel: 20px;
  --radius-strip: 8px;
  --radius-pill: 999px;
  --motion-feedback: 250ms ease-in-out;
  --motion-color: 500ms ease-in-out;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-ui);
  transition: background-color var(--motion-color);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }

.site-header {
  position: fixed; /* Recommended way to match desktop persistence. */
  z-index: 20;
  inset: 40px var(--page-inset) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 40px;
  background: var(--color-canvas);
}

.brand { display: block; width: 207px; height: 18px; }
.brand img { width: 100%; height: 100%; object-fit: contain; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 20px;
  line-height: 20px;
}

.count {
  font-size: 12px; /* Visual estimate. */
  line-height: 1;
  vertical-align: super;
}

.cart-link { display: inline-flex; align-items: center; gap: 10px; }
.cart-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-canvas);
}

.search-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  height: 40px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-canvas);
  font-size: 14px;
  line-height: 40px;
}

.opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  margin-right: var(--page-inset);
}

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 100svh;
}

.hero-figure {
  position: relative;
  width: min(500px, calc(100% - 160px));
}

.hero-image, .article-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover; /* Verify crop against the selected asset. */
  border-radius: 0;
}

.hero-figure > a, .avatar {
  display: block;
  transition: transform var(--motion-feedback);
}

.category-stamp {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--color-category);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  transition: transform var(--motion-feedback);
}

.hero-arrow::before {
  content: '';
  width: 52px;
  height: 60px;
  background: var(--arrow-color, var(--color-ink));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.hero-arrow--previous { left: 11%; }
.hero-arrow--previous::before { transform: rotate(180deg); }
.hero-arrow--next { right: 11%; }

.hero-credit {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 60px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  grid-template-rows: 45px 45px;
  column-gap: 20px;
}

.avatar {
  width: 90px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-credit .avatar { grid-column: 1; grid-row: 1 / 3; }

.feature-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 20px;
  line-height: 30px;
  overflow-wrap: anywhere;
}

.byline {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 10px;
  font-size: 14px;
  line-height: 14px;
}

.recommend-rail {
  align-self: start;
  height: calc(100svh - 180px);
  margin-block: 120px 60px;
  padding: 30px;
  overflow: hidden;
  border: var(--rule) solid var(--color-ink);
  border-radius: var(--radius-panel);
}

.section-title { font-size: var(--text-heading); line-height: 1; }
.recommend-rail .section-title { margin-bottom: 30px; text-align: center; }

.rail-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
.rail-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: var(--content-inset);
  margin: 50px var(--page-inset) 0 var(--content-inset);
}

.content-main, .discovery-sidebar { min-width: 0; }
.content-section + .content-section { margin-top: 90px; }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px var(--grid-gap);
  margin-top: 75px;
}

.article-card { min-width: 0; }
.article-title {
  margin-top: 10px;
  font-size: var(--text-card);
  line-height: 24px;
  overflow-wrap: anywhere;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: var(--text-meta);
  line-height: 10px;
}
.card-meta a { transition: opacity var(--motion-feedback); }

.section-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}

.outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  min-height: 40px;
  padding: 8px 20px;
  border: var(--rule) solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.recommend-feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3.46fr);
  align-items: stretch;
  gap: 60px;
  margin-top: 60px;
}
.recommend-feature figure { position: relative; }
.recommend-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.recommend-copy .avatar { width: 60px; }

.filmstrip { display: flex; overflow-x: auto; margin-top: 60px; }
.filmstrip > * { flex: 0 0 calc(100% / 7); min-width: 0; }
.filmstrip img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.keyword-cloud {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}
.keyword-cloud a { display: inline-block; margin-right: 0.4em; }

.about-photo {
  width: min(500px, 80%);
  margin: 80px auto 110px;
  transform: rotate(-10deg); /* Screenshot estimate, not motion evidence. */
}
.about-copy { margin-top: 30px; font-size: 14px; font-weight: 400; line-height: 28px; }
.about-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 30px; margin-top: 30px; }

.social-links { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.social-link { display: grid; place-items: center; flex: 0 0 60px; height: 60px; border-radius: 50%; }
/* Approximate colors from the visible social circles. */
.social-link--line { background: #00c300; }
.social-link--instagram { background: #df2f7e; }
.social-link--facebook { background: #1877f2; }
.social-link--twitter { background: #1da1f2; }

.site-footer { display: flex; justify-content: space-between; gap: 30px; margin: 90px 60px 50px; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.mobile-nav { display: none; }

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 1100px) {
  :root { --page-inset: 30px; --text-heading: 14px; }
  .site { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .site-header { position: absolute; top: 37px; min-height: 16px; }
  .brand { width: 184px; height: 16px; }
  .desktop-nav { display: none; }
  .opening { display: block; margin-right: 0; }

  .hero-stage {
    --hero-size: min(240px, calc(100vw - 150px));
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 242px 30px 76px;
  }
  .hero-figure { width: var(--hero-size); flex: none; }
  .category-stamp { width: 72px; font-size: 14px; }

  .hero-arrow {
    top: calc(242px + var(--hero-size) / 2);
    width: 44px; /* Enlarged target; visible triangle stays smaller. */
    height: 44px;
  }
  .hero-arrow::before { width: 26px; height: 30px; }
  .hero-arrow--previous { left: 15.5px; }
  .hero-arrow--next { right: 15.5px; }

  .hero-credit {
    position: static;
    width: 100%;
    margin-top: 75px;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 10px;
  }
  .feature-title { grid-column: 1 / -1; grid-row: 1; font-size: 14px; line-height: 22px; }
  .hero-credit .avatar { grid-column: 1; grid-row: 2; width: 40px; }
  .byline { grid-column: 2; grid-row: 2; align-self: center; margin: 0; font-size: 10px; line-height: 10px; }

  .recommend-rail { height: auto; margin: 0 30px; padding: 0; overflow: visible; border: 0; }
  .recommend-rail .section-title { margin-bottom: 10px; text-align: left; }
  .rail-thumbs {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-strip);
  }
  .rail-thumbs > * { flex: 0 0 66px; }

  .content-layout { display: block; margin: 60px 30px 0; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 45px; }
  .article-title { margin-top: 5px; line-height: 22px; }
  .content-section + .content-section, .discovery-sidebar { margin-top: 60px; }
  .recommend-feature { grid-template-columns: 1fr; gap: 30px; }
  .filmstrip > * { flex-basis: 66px; }
  .keyword-cloud { text-align: center; }
  .social-links { gap: 12px; }
  .about-actions { justify-content: center; }
  .site-footer { flex-direction: column; align-items: center; margin: 60px 30px 30px; text-align: center; }
  .footer-links { justify-content: center; }

  .site[data-nav-visible='true'] .mobile-nav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(90px + env(safe-area-inset-bottom, 0px));
    padding: 20px 30px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--color-canvas);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: normal;
  }
  .mobile-nav a, .mobile-nav button { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-nav button { padding: 0; border: 0; background: transparent; }
}

/* Recommended focus and motion accommodations. */
.site :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  body, .site *, .site *::before, .site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The scaffold preserves the observed phone geometry for short titles while allowing longer titles to increase the opening's height. It deliberately leaves carousel state management, search, SVG or image icons, and animation keyframes to the application. Its stacked lower recommendation feature and retained mobile footer links are recommendations because those exact mobile arrangements were not established by the captures.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #d47f2f;
  --color-ink: #fff;
  --color-category: #c54816;
  --color-muted: rgb(255 255 255 / 55%);

  --font-editorial: var(--font-ui);
  --text-section: 20px;
  --text-card: 14px;
  --text-metadata: 10px;

  --spacing-page: var(--page-inset);
  --spacing-sidebar: 300px;
  --spacing-feature: 500px;
  --spacing-feature-mobile: 240px;
  --spacing-thumb-mobile: 66px;

  --radius-panel: 20px;
  --radius-strip: 8px;
  --radius-capsule: 999px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://1to2.jp/](https://1to2.jp/). Both recorded URLs are identical, and the supplied response status is HTTP 200.
- **Capture record:** retrieved at `2026-10-04T20:37:48.890Z`, equivalent to October 5, 2026, 05:37:48.890 JST. No separate timestamp was supplied for each screenshot.
- **Desktop evidence:** 1440 × 1000 viewport; opening, middle, and lower-page screenshots; document height approximately 4456px; rendered text, hrefs, selected element rectangles, and computed styles.
- **Mobile evidence:** 390 × 844 viewport; opening and lower-page screenshots; document height 5849px; rendered text, hrefs, selected element rectangles, and computed styles.
- **Observed progression:** supplied captures cover multiple scroll positions. The desktop header retains its upper placement; the mobile lower capture exposes navigation that is absent from the opening capture. No activated-control interaction log was supplied.
- **Inspection limitations:** complete stylesheets, keyframe definitions, original asset URLs, exact breakpoints, selected-font resolution, search results, carousel controls, social destinations, and linked detail pages were not available for verification. Some extracted elements belong to inactive or nonvisible states.
- **Readiness limitations:** the supplied browser process waited for load, image decoding, finite animations, and sampled layout stability within bounded time limits. Those checks do not establish semantic completeness or the absence of delayed content. SharedWorkers and service workers were disabled during inspection.

This reference documents the supplied current homepage evidence. Measurements, visual estimates, and implementation recommendations are identified separately so the design can be reused without turning uncertain behavior into a source claim.