# 点々 TenTen — Style Reference

> A rural brand journal framed by white space, documentary photography, and a quiet vertical headline.

**Original URL:** [https://tenten.fun/](https://tenten.fun/)
**Final URL:** [https://tenten.fun/](https://tenten.fun/)
**Theme:** white/light; no alternative theme was verified.
**Inspected:** September 12, 2026. Supplied browser evidence was retrieved at 11:33:32.053 UTC, or 20:33:32.053 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current Japanese homepage, including its opening composition, subscription feature, Information, Items, resource-cycle explanation, Stories, store information, planned hospitality offerings, online-store banner, and footer. Visual evidence consists of three desktop captures and two mobile captures, supplemented by rendered DOM and computed styles across the page.

TenTen presents agriculture, food, and the future of a rural community through an unusually spacious brand homepage. A photograph of chickens occupies a precise rectangle within a white field. The short statement “半径1kmの風景をつくる” sits below it in vertical columns, offset toward the right. Small English navigation labels, Japanese serif paragraphs, thin rules, and two dark organic marks provide identity without a large masthead.

The page connects a brand story with products, news, recipes, physical stores, and planned accommodation and dining. Its hierarchy depends on changes in image scale, alignment, and spacing. Headings remain modest, and commerce links use the same restrained language as editorial links. On mobile, the design preserves a substantial left rail and becomes deliberately asymmetric instead of simply centering every section.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Coordinates refer to the initial document layout unless explicitly described as screenshot coordinates.
- **Calculated** means arithmetic applied to measured rectangles, such as column gaps or aspect ratios.
- **Estimated** means a visual approximation from the original-page captures. Hero lettering, some rules, and unmeasured image bounds fall into this category.
- **Recommended** means guidance for a new implementation. Breakpoints, accessible control behavior, and the sample CSS are not recovered source code.
- **Named tokens** are reusable aliases introduced here. The evidence does not expose a dedicated TenTen token system.
- Computed font stacks identify declared families, but do not establish the font file used for every glyph. Several visible graphic links have empty extracted text.
- The supplied element list does not include every image, wrapper, pseudo-element, or script. An omitted element is not evidence that the original page lacks it.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White canvas | `#ffffff` | `--color-paper` | Measured body background at both viewports; also the visible field around photographs and footer content |
| Black ink | `#000000` | `--color-ink` | Measured primary text and link color; visually used for the hamburger and strong separator rules |
| Quiet gray | `#989898` | `--color-muted` | Measured inactive EN link, newsletter destination link, and copyright color |
| Graphic brown-black | `#251e1c` | `--color-mark` | Exact fill value declared in inline SVG styling within the rendered page; appropriate to the dark graphic identity details |
| Pale rule | Approximately `#d0d0d0` | `--color-rule` | Screenshot estimate for light section dividers and the online-store banner outline |
| Link rule | Approximately `#808080` | `--color-link-rule` | Screenshot estimate for the short horizontal rule beside About |

The interface has no prominent colored action fill. Brown feathers, pale plumage, timber, soil, and muted green-gray tones belong to the current photograph, not to a general UI accent system.

### Palette Boundaries

The computed custom-property list contains numerous WordPress preset colors, gradients, shadows, and sizes. Their availability does not demonstrate use in the visible design. Do not import those vivid colors or shadow presets into this reference's palette.

Keep white as the continuous page surface. Use black for essential information, gray for secondary details, and the slightly warmer SVG fill only where the artwork requires it. The footer's black separator is visibly stronger than the pale divider above the resource-cycle section.

## Tokens — Typography

### Japanese Reading Text

**Measured stack:** `YakuHanMP, MFW-PRyuminPr6N, serif`.

The body uses regular Japanese serif typography with fine stroke contrast and generous leading. The measured default is `14px / 36px`, weight `400`, with `0.7px` letter spacing. This small type and large line interval contribute substantially to the calm rhythm.

The opening paragraph uses `36.4px` leading. Subscription copy opens further to `42px`, with slightly tighter tracking of `0.392px`. Preserve these distinctions when reproducing the observed layout; a single global line-height would flatten its pacing.

The evidence does not provide font URLs or confirm which face rendered each character. Referencing the observed stack in CSS does not supply the font files.

### English Headings and Utility Links

**Measured stack:** `"Times New Roman", serif` for section headings, text-and-rule links, language links, and most footer text.

Section labels such as Information, Items, Stories, Popup Store, Stay, and Restaurant use `22px`, weight `400`, usually with `36px` leading and normal tracking. They are small editorial labels rather than oversized display headings.

About, View all, and Google Map use `16px`, weight `400`, `0.7px` tracking, and generally a `44px` line box. Desktop Information and Stories header links have a measured `27px` line box instead.

### Graphic Lettering and Vertical Copy

The visible Online Store shortcut has an empty extracted anchor label and a measured graphic-sized box of about `121 × 16.95px`. Its inherited `20px` font size does not prove that the visible letters are ordinary text set in that font.

The opening vertical statement is visible in the screenshots but is not separately measured as a text element. Its lettering is approximately `36px` on desktop and `18px` on mobile. Four columns read from right to left: “半径”, “1kmの”, “風景を”, and “つくる”. Latin characters in the distance column appear upright and stacked.

A live-text reconstruction using vertical writing is a recommendation. The captures do not establish whether the original uses live text, SVG, or another graphic technique for this statement.

### Type Scale

| Role | Desktop | Mobile | Leading / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Main reading text | `14px`, 400 | Same | `36px / 0.7px` | Measured |
| Opening paragraph | `14px`, 400 | Same | `36.4px / 0.7px` | Measured |
| Subscription paragraph | `14px`, 400 | Same | `42px / 0.392px` | Measured |
| English section heading | `22px`, 400 | Same | Usually `36px / normal` | Measured |
| Subscription heading | `22px`, 400 | `18px`, 400 | `30.8px` desktop; `25.2px` mobile | Measured |
| Resource-cycle statement | `20px`, 400 | Same | `50px / 3px` | Measured |
| Store and hospitality description | `16px`, 400 | Same | `36px / 0.8px` | Measured |
| Text-and-rule link | `16px`, 400 | Same | Usually `44px / 0.7px` | Measured |
| JP / EN | `18px`, 400 | Absent from closed mobile view | `36px / 0.7px` | Measured desktop |
| Footer navigation | `12px`, 500 | Same | `24px / normal`, plus `4px` vertical padding | Measured |
| Newsletter text | `12px`, 400 | Same | `20px / normal` | Measured |
| Copyright | `10px`, 400 | Same | `36px / normal` | Measured |
| Store calendar link | `10px`, 400 | Same | Inherited `36px / 0.7px` | Measured |
| Vertical opening statement | Approximately `36px` | Approximately `18px` | Widely separated columns | Screenshot estimate |
| Product category caption | Approximately `13px` | Not visually verified | Light gray, compact | Desktop screenshot estimate |

The source root computes to `10px` at both inspected widths. This is not evidence of a fluid root-size formula. The Quick Start uses explicit pixel values and can coexist with a conventional browser root size.

## Tokens — Spacing & Shapes

**Density:** generous between sections; compact within labels and utility groups.
**Geometry:** rectangular photographs, square corners, fine horizontal rules, and unboxed text links.

### Spacing Scale

| Use | Value | Status |
| --- | --- | --- |
| Main desktop content width | `900px` | Measured repeatedly across sections |
| Desktop outside margins | `270px` each at 1440px | Calculated |
| Mobile left rail | `62px` | Measured |
| Mobile right inset | `20px` | Measured main padding |
| Mobile usable content width | `308px` | Measured and calculated: `390 − 62 − 20` |
| Common section-heading top offset | `100px` desktop; `50px` mobile | Measured in Information, Items, and Stories |
| Collection heading box to content | `40px` | Calculated from element bounds |
| Product row gap | `50px` | Calculated at both widths |
| News/story horizontal gap | `10px` desktop; `16px` mobile | Calculated |
| Text to CTA rule | Approximately `22px` | Measured link gap, supported visually |
| CTA rule length | Approximately `100px` | Screenshot estimate, consistent with `122px` reserved right padding |
| Hero photograph to vertical statement | Approximately `150px` | Screenshot estimate at both widths |
| Subscription text CTA to mobile image | `32px` | Calculated |
| Resource statement to mobile body | `56px` | Calculated |
| Resource body to mobile About link | `50px` | Calculated |

The design uses recurring 50px and 100px intervals, but not every distance belongs to a uniform spacing scale. Some large section heights include content omitted from the selected element list. Do not recreate unexplained height as empty spacer blocks.

### Shapes and Rules

| Element | Appearance | Evidence |
| --- | --- | --- |
| Photographs and linked content | Square corners | Visible captures and measured zero-radius anchors |
| Online-store banner | Thin rectangular outline, no rounded corners | Visible desktop/mobile captures |
| General section divider | Approximately 1px pale gray | Visible capture; separator element is 1px high |
| Footer separator | Approximately 1px black | Visible captures |
| Hamburger | Three fine horizontal strokes, about 28px wide | Screenshot estimate |
| Lower-left signature | Two irregular dark brush/drop forms | Visible at both widths and scroll positions |

No general card-elevation system is visible. Do not interpret available WordPress shadow presets as evidence of shadows on these components.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Status |
| --- | --- | --- | --- |
| Document height | `8777.48px` | `11109.73px` | Measured |
| Main content alignment | `x = 270`, width `900px` | `x = 62`, width `308px` | Measured repeated content bounds |
| Opening photograph | Approximately `900 × 525px`, at `(270, 188)` | Approximately `220 × 293px`, at `(106, 182)` | Screenshot estimate |
| Opening paragraph | `350px` wide, `y = 1071.20` | `308px` wide, `y = 772.78` | Measured |
| Subscription linked visual | `400 × 533.33px` | `308 × 410.66px` | Measured anchor box; approximately 3:4 |
| Product column width | `214.19px`, four columns | `147.22px`, two columns | Measured |
| Product column gap | Approximately `14.42px` | Approximately `13.56px` | Calculated |
| Resource text columns | `423px + 54px gap + 423px` | One `308px` column | Measured/calculated |
| Hospitality destination width | `290.69px`, three columns | `308px`, vertically stacked | Measured |
| Online-store banner | `900 × 137.33px` | `308 × 138px` | Measured |
| Newsletter column | `250px` | `236px` | Measured |
| Lower-left home-link box | `76 × 158px`, bottom-left | Same | Measured |

## Components

### Persistent Navigation and Identity

**Role:** keep the shop and brand accessible while the long page scrolls.

The desktop frame places the hamburger near `(32, 47)`, the visible Online Store lettering at `(96, 45)`, a narrow vertical brand mark at `(1368, 52)`, and JP / EN near the bottom-right. Two dark organic marks occupy the lower-left rail inside a home link.

These elements retain their viewport positions across the supplied scrolled captures. They behave as persistent page furniture without a visible full-width colored header surface.

On mobile, the hamburger moves to approximately `(14, 24)`, and Online Store moves to the upper-right: the measured anchor begins at `(247.5, 23.5)`. The lower-left home-link box remains `76 × 158px`. The upper-right vertical brand mark and bottom-right language links are absent from the closed mobile capture and visible-link extraction.

The mobile HEADER rectangle has zero height even though its controls are visible. Do not translate that measurement into a hidden or unusable header; positioned descendants can exist outside their parent's normal-flow height.

Header DOM text includes About, Items, Stores, Restaurant, Stay, Stories, Information, Online Store, Company, Awards, Recruit, Egg farm tour, Contact, and JP / EN. The menu was not opened, so its panel layout, animation, focus behavior, and mobile language access remain unverified.

### Opening Photograph, Vertical Statement, and Introduction

**Role:** establish the relationship between a specific place, farming, and the brand's purpose.

The current photograph shows chickens behind the wire front of a coop. On desktop it fills the 900px content width and has an approximate `12:7` ratio. It sits well below the navigation and has no text overlay, border radius, or visible caption box.

On mobile, it becomes a narrow portrait crop of approximately `220 × 293px`, close to `3:4`. It is centered within the 308px content column, leaving about 44px on each side. Its center is at `x = 216px`, not at the viewport center of `195px`.

Below the image, retain about 150px of air before the right-aligned vertical statement. Keep its four columns distinct and its scale restrained. The mobile photograph and statement should not be expanded to fill every available pixel.

The introduction begins lower down at the left edge of the content column. It is 350px wide on desktop and expands to the full 308px mobile content width. Its About link follows with a long horizontal rule. This composition relies on separate image, statement, and paragraph regions rather than a centered stack of headline, description, and button.

The original mobile crop mechanism is unknown. A dedicated mobile source through `<picture>`, or a carefully tuned `object-fit: cover` crop, is a recommended implementation choice.

### Text-and-Rule Link

**Role:** provide a recurring low-emphasis navigation pattern.

An English or Japanese label sits beside a thin horizontal line. Measured links reserve `122px` to the right of the text, and their computed gap is `22px`; the visible line is approximately 100px long. Typical line-box height is 44px.

Observed labels include About, View all, Google Map, and “詳しくはこちら”. The label and rule belong to one linked component. Do not render the line as a progress indicator or make only its endpoint clickable.

The computed transition is `transform 0.3s`, but no hover endpoint or movement distance was supplied. An animated arrow, sliding rule, or translating label would require additional evidence. The Quick Start uses a static rule with recommended keyboard focus styling.

### Subscription Feature

**Role:** explain recurring egg purchases in the context of the farm's resource cycle.

Desktop anatomy is a 400px text column, a 100px gap, and a linked 400 × 533.33px visual. The heading uses `22px / 30.8px`; a 30px gap separates it from the paragraph. The paragraph uses `14px / 42px`. The text group sits vertically within the height of the portrait visual.

On mobile, the heading reduces to `18px / 25.2px`. The text, explanation link, and linked visual stack in that order. The image link follows the CTA by 32px and fills the 308px content width at approximately 3:4.

Both the text CTA and visual link point to the observed subscription page on `online.tenten.fun`. The homepage evidence does not show subscription selection, checkout, or purchase confirmation states.

### Information and Stories Rails

**Role:** expose current updates and editorial material without turning every entry into another full-height section.

Both collections have an English section heading, linked entries arranged horizontally, and a View all destination. On desktop, View all aligns to the right of the section heading. On mobile, it moves below the collection and aligns left.

Information entries contain a category where supplied, a date, and a Japanese title. Stories entries contain a category such as Brand Story or Recipes and an editorial title. The current extracted collections contain ten information entries and eight stories.

| Rail | Desktop card width / gap | Mobile card width / gap |
| --- | --- | --- |
| Information | `238.5px / 10px` | `226.38px / 16px` |
| Stories | `265.5px / 10px` | `229.45px / 16px` |

At both viewports, later entry rectangles extend beyond the visible right edge. This establishes a horizontal rail arrangement. It does not establish autoplay, drag handling, arrow controls, or a particular slider library.

Keep entry surfaces unboxed. The selected DOM measurements provide whole-link bounds, not individual image bounds. Their proportions are compatible with landscape news images and portrait story images, but exact image ratios are not independently measured.

### Items Grid

**Role:** present a concise catalog of eight products while directing purchases to the online store.

The desktop grid has four columns and two rows. Each linked entry combines a visual region, a small category label such as “点々 Original” or “点々 Collaboration”, and a Japanese product name. Category labels appear gray in the supplied desktop section capture. Titles sit directly on white without a card background.

The observed products include recurring and one-time egg purchases, mayonnaise, egg sauce, seaweed, pancake mix, a towel, and sausage. The supplied homepage text does not show a price or purchase button within these entries.

At 390px, the grid becomes two columns across the 308px content width. Each column is approximately 147.22px wide, separated by 13.56px. Preserve the 50px row gap and let longer names wrap naturally. Card heights vary with content; forcing every title to one line would change the measured layout.

The inherited anchor style is `14px / 36px`, but nested category and title styles were not individually sampled. Differences in card heights occur in 24px increments, suggesting a tighter nested text rhythm; treat that as an inference, not a measured child line-height.

### Resource-Cycle Illustration and Explanation

**Role:** explain how farming, local resources, people, and food connect within a small area.

A full-width line illustration follows a pale horizontal divider. In the desktop capture, fine black-gray lines depict trees, chickens, buildings, people, cultivated ground, and connecting arrows. A dotted boundary labeled 1km organizes the system. The drawing is approximately 900px wide and 428px tall in the visible composition; these are screenshot estimates.

Below it, the desktop text splits into two 423px columns with a 54px gap. The left statement, “養鶏から始まる / 地域の資源循環と / 風景づくり”, uses `20px / 50px` with `3px` tracking. Its About link sits underneath. The right paragraph begins 59px lower than the statement's top, creating an intentionally staggered arrangement.

On mobile, the statement, paragraph, and About link stack. The heading keeps its 20px size, 50px leading, and 3px tracking. There is 56px between heading and paragraph, then 50px before the About link.

Preserve the illustration as a complete diagram. Its small labels are not a substitute for the accompanying explanation, especially after mobile scaling.

A subsequent linked membership visual measures `900 × 149.25px` on desktop and `308 × 169.05px` on mobile. Its destination is present in the DOM, but its artwork and responsive asset strategy are not established by the selected captures.

### Popup Store Information

**Role:** give practical visiting information within the same editorial system.

The measured desktop text block is 329px wide and begins at `x = 370px`, inset from the main 270px content edge. Popup Store uses the standard 22px English heading. The Japanese description uses `16px / 36px`, followed by smaller operating details.

The current text lists 11:00–15:00 opening hours, irregular operation, and an Instagram link for the calendar. Google Map is a text-and-rule outbound link; an embedded interactive map was not verified.

On mobile, the text returns to the 308px main column, and Google Map follows the operating information. The selected captures do not establish the appearance of the visual region associated with this section.

### Stores, Stay, and Restaurant Destinations

**Role:** connect the homepage to the brand's physical offerings and future projects.

Desktop uses three linked columns of approximately 290.69px each, with roughly 14px gaps. Each destination groups an English section label, a substantial visual region, two-line Japanese explanatory copy, and View more.

Mobile stacks these destinations at 308px wide. The first Stores teaser does not repeat a visible heading in the sampled mobile element list; a Stores heading already appears earlier above the popup-store section. Stay and Restaurant retain their headings.

The current copy describes the accommodation as planned for 2030 and the restaurant as planned for 2029. Preserve that planned status when referencing the inspected content. The evidence does not support presenting them as currently bookable services.

### Online-Store Banner

**Role:** provide a broad commerce destination near the end of the homepage.

This is a quiet outlined rectangle measuring about `900 × 137px` on desktop and `308 × 138px` on mobile. The center combines the brand name with Online Store. The mobile anchor has measured padding of `50px 45px`.

Keep the outline pale, the corners square, and the interior white. The broad linked surface supplies emphasis without a saturated fill. Desktop lettering is visible despite empty extracted anchor text; mobile extraction includes “点　々” and Online Store.

In the mobile footer capture, the persistent upper-right store shortcut visually overlaps the banner region at that scroll position. This is evidence of the persistent frame over scrolling content, not a second banner layout.

### Footer and Newsletter Destination

**Role:** close the page with practical links, a newsletter destination, social access, and copyright.

A black horizontal rule precedes a large interval of white space. On desktop, two columns of utility links occupy the left side while a 250px newsletter block sits at the right. Footer content has an additional 16px inset within the 900px column.

The utility order is Privacy Policy and Contact on the first row, then Legal Notice and Recruit. These links use 12px Times New Roman, computed weight 500, and 32px-high anchor boxes including padding.

The newsletter block contains Newsletter, a short Japanese sentence, and a bottom-ruled row with Registration at left and click here at right. This is an outbound newsletter destination, not an email input visible on this page. The recorded link targets the online store's footer fragment.

Mobile keeps the utilities in two columns but moves the newsletter below them. Its inner content is 236px wide, beginning at `x = 98px`: 36px inside the main column. The right-hand utility text aligns toward the right edge. An approximately 100px interval separates the utility group from the newsletter.

A 16 × 16px Instagram link sits at the lower-left of the inner footer. The original page independently displays “© TenTen Inc.” in 10px gray type at the lower-right.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Header opacity | Computed `transition: opacity 2s` | A two-second opacity transition is declared; its trigger and visible sequence were not recorded |
| General links | Computed transition duration `0.3s` | A short transition is available; target properties and endpoints are not established |
| Text-and-rule links | Computed `transition: transform 0.3s` | Transform changes would animate over 300ms; actual hover displacement is unknown |
| Sampled CSS animations | Listed elements report `animation: none` | No named animation appears on those sampled elements in the settled state |
| Persistent navigation | Same viewport placement in opening and scrolled captures | Navigation and identity remain visually anchored during page scrolling |
| Horizontal collections | Successive cards extend beyond the viewport | Horizontal arrangement is established; interaction mechanics are unverified |
| Language navigation | JP and EN have distinct recorded URLs | Link destinations are established; the English page was not inspected |
| Store and content navigation | Recorded original-page anchor destinations | Navigation affordances exist; destination behavior was not exercised |

The browser observation included an initial period of at least five seconds and readiness checks for loading, visible image decoding, finite motion, and layout stability. Perpetual animations were temporarily paused during readiness checks and then resumed. Those procedures do not establish a complete motion inventory.

No verified evidence establishes hero autoplay, crossfades, parallax, menu choreography, hover zoom, scroll-triggered reveals, or reduced-motion behavior. Keep these out of a faithful description. For a new implementation, start with static imagery, ordinary document scrolling, and brief utility feedback; add motion only for a specific purpose.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Continuous white | Holds photography, copy, and empty space together |
| Persistent frame | Visually transparent around individual controls | Keeps navigation and identity present without a large header bar |
| Editorial/product entry | White, unboxed content | Groups visual and text without card elevation |
| Diagram area | Fine monochrome artwork on white | Explains the regional resource cycle |
| Store banner | White rectangle with pale outline | Establishes a large linked destination |
| Footer | White with a stronger black separator | Marks the final utility region |

No modal, drawer surface, cart panel, or menu-open backdrop was supplied. Their styling cannot be inferred from the closed homepage.

## Imagery

The verified opening image is documentary rather than decorative: chickens, wire mesh, rough timber, and the working environment of a coop. Natural light and subdued colors provide the page's texture. Preserve believable detail and the spatial relationship between the animals and their surroundings.

The mobile crop changes the image from a broad scene to a closer portrait composition. Maintain the subject's legibility and the wire grid instead of stretching the desktop image into a different ratio.

The resource diagram supplies a complementary visual language: very fine lines, small drawn figures, sparse labels, dotted boundaries, and arrows. It explains a system without becoming a set of colored infographic cards. Keep the line weight light and the background white.

The two lower-left identity marks are irregular brush/drop forms. Their asymmetry is part of the brand's character. Use authorized artwork where available; generic leaves, circles, or emoji would change their silhouette.

### Observed Asset References

No original image-file URLs or font-file URLs are included in the supplied evidence. The references below identify observed roles without inventing asset paths.

| Asset role | Original-page evidence | Implementation boundary |
| --- | --- | --- |
| Coop photograph | Desktop and mobile opening captures | Landscape desktop framing and portrait mobile framing are visible; source selection method is unknown |
| Vertical opening statement | Both opening captures | Wording and arrangement are visible; original rendering technique is unknown |
| Resource-cycle illustration | Desktop middle capture | Complete fine-line diagram is visible; asset format and path are unknown |
| Brand marks and store lettering | Opening and footer captures | Visible graphic forms; several linked elements have empty extracted text |
| Subscription visual | Linked bounds in desktop/mobile DOM | Approximately 3:4 box is measured; asset content is not shown in the selected captures |
| Product, news, and story visuals | Collection bounds and content structure | Whole-link dimensions are available; individual image measurements and files are absent |
| Instagram symbol | Footer captures and 16px link bounds | Small outline symbol; exact source asset is unknown |

Do not reuse a page screenshot as the entire interface. Rebuild the layout and text, then provide appropriate image and identity assets separately.

## Layout & Responsive Behavior

### Desktop Composition

At 1440px wide, repeated 900px sections align between `x = 270px` and `x = 1170px`. The fixed controls occupy the outer white field. The opening photograph, Items grid, diagram, store banner, and principal dividers share this alignment.

The page alternates between full-column visuals, narrow text, split explanations, a four-column catalog, horizontal editorial rails, and three destination columns. This variation is more important than repeating a single card template.

News and story rails begin at the content edge but extend toward and beyond the right viewport boundary in the measured layout. They should be treated separately from the contained Items grid.

### Mobile Composition

At 390px, the main content starts 62px from the left and stops 20px before the right edge. The resulting 308px column is shifted right of the viewport center. Preserve this rail while keeping the lower-left brand artwork outside the main reading area.

The opening photograph remains narrower than the content column. The vertical statement keeps its orientation and shifts to the column's right edge. Reading text retains its measured 14px size rather than shrinking proportionally with the desktop layout.

Products change from four to two columns. Subscription content and the resource explanation stack vertically. News and Stories remain horizontal sequences, with their View all links placed below. Hospitality destinations stack one per row, and the footer newsletter moves beneath the two-column utility group.

Most English section headings remain 22px. The subscription heading is a specific exception at 18px. The 20px resource-cycle statement also retains its desktop size.

### Responsive Limits

Only the two stated viewport sizes were inspected. The original breakpoint, tablet layout, landscape-phone treatment, safe-area rules, and behavior under zoom are unknown. The Quick Start uses a recommended 767px breakpoint and interpolates desktop gutters; these are implementation choices.

The mobile document is about 2332px taller than the desktop document, consistent with stacking and additional product rows. This does not imply that every section scales vertically by the same factor.

## Do’s and Don’ts

### Do

- Preserve the 900px desktop alignment and the offset mobile column.
- Treat the outer white field as part of the composition.
- Keep the opening photograph rectangular and give its mobile crop deliberate attention.
- Retain the vertical opening statement and the small horizontal English section labels.
- Use the measured Japanese and Latin serif stacks when available, with honest fallbacks.
- Keep 14px reading text paired with generous 36–42px leading where observed.
- Distinguish horizontal editorial rails from the four-to-two-column product grid.
- Use complete linked groups for products, stories, and destination teasers.
- Preserve the fine resource diagram, its dotted boundary, and explanatory text.
- Keep planned openings and current operating information accurate to the referenced content.
- Use the original organic identity shapes when authorized and available.

### Don’t

- Don't replace the opening with a full-bleed photograph and an oversized centered sales headline.
- Don't eliminate the mobile left rail to make every section symmetrically centered.
- Don't make the mobile hero image fill the entire 308px column.
- Don't introduce rounded product cards, general drop shadows, gradients, or bright category badges.
- Don't derive the visible palette from unused WordPress presets.
- Don't turn the newsletter destination into a purported original-page email form.
- Don't invent a carousel, menu animation, hover zoom, or parallax effect from static captures.
- Don't treat inherited font styles on graphic links as proof of their visible lettering font.
- Don't crop the resource diagram into fragments or replace it with unrelated stock icons.
- Don't claim unmeasured image ratios or intermediate breakpoints as exact source values.

## Recommended Implementation Additions

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

- Give the hamburger, graphic home links, Online Store shortcut, and Instagram link explicit accessible names.
- Implement the menu with a real button, an expanded state, keyboard navigation, Escape handling, and appropriate focus management.
- Preserve at least 44px touch targets around small visible icons. The observed glyph size should not determine the complete hit area.
- Keep language navigation discoverable on mobile if it moves into a menu.
- Use a visible focus outline that remains clear on white and does not depend on motion.
- For essential small text, consider replacing `#989898` with a darker gray such as `#666666`. Keep the lighter value documented as the original measured treatment.
- Implement horizontal collections with accessible native scrolling or a fully keyboard-operable slider. Make all entries reachable and do not depend on dragging alone.
- Provide meaningful alternatives for the coop photo and a text explanation of the resource diagram. Hide duplicated decorative lettering from assistive technology when a semantic equivalent exists.
- Supply intrinsic image dimensions and responsive sources to prevent layout shifts. Preserve the initial photograph's loading priority and load distant imagery as appropriate.
- Make the full newsletter registration row a clearly named link if expanding the original small click target.
- Test the asymmetric layout at narrow widths, with enlarged text, and around safe areas. Keep fixed controls from covering focused content.
- Keep essential content visible without animation and honor reduced-motion preferences if transitions are added.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and component surfaces: `#ffffff`.
- Primary text and strong rules: `#000000`.
- Measured secondary utility gray: `#989898`.
- Inline SVG graphic fill: `#251e1c`.
- Pale outlines: approximately `#d0d0d0`, an estimate.
- Text-link rules: approximately `#808080`, an estimate.
- Photograph colors belong to the image; there is no verified bright CTA accent.

### Overall Prompt

“Build an editorial homepage for a rural agriculture and food brand using TenTen's observed spatial language. Use a white canvas, regular Japanese serif body text, Times New Roman utility headings, black ink, fine gray rules, and broad vertical intervals. At 1440px, align principal sections to a centered 900px column. Place a rectangular documentary farm photograph above a small vertical Japanese statement aligned right, with a narrow introduction below at left. Keep navigation as sparse persistent controls around the page edges. At 390px, use a 62px left rail, a 20px right inset, and a 308px content column; center a 220px portrait photograph within that column. Include four-to-two-column product listings, horizontal news and story rails, a fine resource-cycle illustration, and a spacious footer. Keep imagery static unless additional motion requirements are supplied.”

### Example Component Prompts

1. **Opening composition:** “Place a 900 × 525px documentary coop photograph in a centered desktop column. Leave approximately 150px below it before a four-column vertical statement aligned right. Use ‘半径1kmの風景をつくる’ as the quoted example copy. On mobile, use an approximately 220 × 293px crop centered in an offset 308px column and reduce the statement to roughly 18px lettering.”
2. **Product grid:** “Create eight unboxed product links on white: four columns on desktop, two on mobile. Use approximately 14px horizontal gaps and 50px row gaps, a quiet category caption, and a naturally wrapping Japanese serif product name. Keep price and purchase controls out unless required by the new content.”
3. **Resource explanation:** “Use a complete fine-line rural resource diagram with tiny buildings, trees, chickens, people, arrows, and a dotted 1km boundary. Beneath it, place a three-line 20px Japanese serif statement beside a 14px explanatory paragraph. Use 50px heading leading and 3px tracking. Stack the text and About link on mobile.”
4. **Editorial rail:** “Start a horizontal sequence of unboxed story links at the main content edge. Use approximately 266px cards with 10px gaps on desktop and 229px cards with 16px gaps on mobile. Put Stories and View all together above the desktop rail, then move View all below it on mobile. Native horizontal scrolling is a recommended implementation, not a claim about the reference's mechanism.”
5. **Footer:** “After a black rule and a large white interval, arrange a two-column utility group opposite a narrow newsletter destination. Use 12px Times New Roman, a bottom-ruled Registration row, a 16px Instagram symbol, and small gray copyright. On mobile, place the newsletter below the utilities within a 236px inner column.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not the original stylesheet. Exact body typography, principal widths, and measured grid relationships are retained where practical. The 767px breakpoint, intermediate gutter formula, live vertical lettering, native rail scrolling, and hover/focus behavior are recommendations. Hero lettering and rule colors use the estimates identified above.

News imagery is given a recommended 4:3 wrapper, and product/story imagery a recommended 3:4 wrapper. These ratios are compatible with the measured card bounds but were not directly measured on the original image elements. The subscription visual's approximately 3:4 linked box is measured.

```css
:root {
  /* Measured colors, plus explicitly estimated rules. */
  --color-paper: #ffffff;
  --color-ink: #000000;
  --color-muted: #989898;
  --color-mark: #251e1c;
  --color-rule: #d0d0d0;
  --color-link-rule: #808080;

  /* Observed stacks; font files must be supplied separately. */
  --font-ja: 'YakuHanMP', 'MFW-PRyuminPr6N', serif;
  --font-latin: 'Times New Roman', serif;
  --text-body: 14px;
  --text-section: 22px;
  --text-feature: 20px;
  --text-link: 16px;
  --text-caption: 12px;
  --text-small: 10px;
  --leading-body: 36px;
  --leading-intro: 36.4px;
  --leading-subscription: 42px;
  --tracking-body: 0.7px;

  --content-max: 900px;
  --mobile-rail: 62px;
  --mobile-end: 20px;
  --space-section: 100px;
  --space-row: 50px;
  --rule-width: 1px;
  --motion-link: 300ms;

  /* Recommended interpolation between inspected widths. */
  --content-end-gutter: max(64px, calc((100vw - 900px) / 2));
}

* { box-sizing: border-box; }

body.tenten-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-ja);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.tenten-page a { color: inherit; text-decoration: none; }
.tenten-page p { margin: 0; }
.tenten-page img { display: block; max-width: 100%; }

.content-width {
  width: min(var(--content-max), calc(100% - 128px));
  margin-inline: auto;
}

.section-title {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 36px;
  letter-spacing: normal;
}

/* Persistent frame; provide semantic controls and actual artwork. */
.menu-toggle {
  position: fixed;
  z-index: 20;
  inset: 32px auto auto 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.menu-toggle__lines {
  position: relative;
  width: 28px;
  height: 16px;
  border-block: 1px solid currentColor;
}

.menu-toggle__lines::after {
  content: '';
  position: absolute;
  inset: 7px 0 auto;
  height: 1px;
  background: currentColor;
}

.store-shortcut {
  position: fixed;
  z-index: 20;
  top: 45px;
  left: 96px;
  font: 400 20px / 1 var(--font-latin);
  letter-spacing: 1px;
}

.brand-wordmark {
  position: fixed;
  z-index: 20;
  top: 52px;
  right: 52px;
  width: 20px;
  height: 78px;
}

.brand-signature {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  width: 76px;
  height: 158px;
}

.language-switch {
  position: fixed;
  z-index: 20;
  right: 35px;
  bottom: 40px;
  display: flex;
  gap: 16px;
  font: 400 18px / 36px var(--font-latin);
}
.language-switch .is-secondary { color: var(--color-muted); }

/* Static opening composition. */
.hero { padding-block: 188px 100px; }
.hero__media { margin: 0; aspect-ratio: 12 / 7; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__slogan {
  display: flex;
  flex-direction: row-reverse;
  gap: 36px;
  width: max-content;
  max-width: 100%;
  margin: 150px 0 0 auto;
  font-size: 36px;
  font-weight: 400;
}

.hero__slogan span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  letter-spacing: 0.15em;
}

.hero__intro {
  width: min(350px, 100%);
  margin-top: 40px;
  line-height: var(--leading-intro);
}
.hero__intro .rule-link { margin-top: 30px; }

.rule-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 122px;
  font: 400 var(--text-link) / 44px var(--font-latin);
  letter-spacing: 0.7px;
}

.rule-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 100px;
  height: 1px;
  background: var(--color-link-rule);
}

.subscription {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 100px;
  padding-block: var(--space-section);
}
.subscription .section-title { line-height: 1.4; }
.subscription__copy p {
  margin-top: 30px;
  line-height: var(--leading-subscription);
  letter-spacing: 0.392px;
}
.subscription__copy .rule-link { margin-top: 40px; }
.subscription__media { aspect-ratio: 3 / 4; }
.subscription__media img { width: 100%; height: 100%; object-fit: cover; }

/* Put heading, content, and destination link in that DOM order. */
.collection-section {
  display: grid;
  grid-template-areas: 'heading action' 'content content';
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 0;
  padding-block: var(--space-section);
}
.collection-section > .section-title { grid-area: heading; }
.collection-section > .collection-content { grid-area: content; min-width: 0; }
.collection-section > .rule-link { grid-area: action; justify-self: end; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px 14.4px;
}

/* Recommended image wrappers for unmeasured collection imagery. */
.product-card img,
.rail--stories img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.rail--news img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.card-category {
  margin-top: 16px;
  color: var(--color-muted);
  font: 400 13px / 24px var(--font-latin);
  letter-spacing: normal;
}
.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  overflow-wrap: anywhere;
}

/* Native scrolling is a recommended substitute for unverified controls. */
.rail {
  --rail-card: 238.5px;
  display: flex;
  gap: 10px;
  width: calc(100% + var(--content-end-gutter));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
}
.rail--stories { --rail-card: 265.5px; }
.rail > a { flex: 0 0 var(--rail-card); scroll-snap-align: start; }

.cycle-section {
  border-top: 1px solid var(--color-rule);
  padding-block: 100px;
}
.cycle-map { margin: 0; }
.cycle-map img { width: 100%; height: auto; }
.cycle-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px;
  margin-top: 50px;
}
.cycle-statement { font-size: 20px; line-height: 50px; letter-spacing: 3px; }
.cycle-copy__body { padding-top: 59px; }
.cycle-copy .rule-link { margin-top: 32px; }

.portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.portal-card__description { font-size: 16px; line-height: 36px; letter-spacing: 0.8px; }

.store-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  min-height: 138px;
  border: 1px solid var(--color-rule);
  font-size: 18px;
  letter-spacing: normal;
}
.store-banner__label { font-family: var(--font-latin); }

/* This combines the observed separator and surrounding spacer regions. */
.site-footer {
  margin-top: 200px;
  padding-block: 200px 100px;
  border-top: 1px solid var(--color-ink);
  font-family: var(--font-latin);
  letter-spacing: normal;
}
.footer-inner { padding-inline: 16px; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(32px, 14.58vw, 210px);
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 4px 6%;
}
.footer-links a { padding-block: 4px; font-size: 12px; font-weight: 500; line-height: 24px; }
.newsletter { font-size: 12px; line-height: 20px; }
.newsletter__description { margin-top: 3px !important; }
.newsletter__registration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 47px;
  border-bottom: 1px solid var(--color-muted);
}
.newsletter__registration a { color: var(--color-muted); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 100px;
}
.footer-social { display: block; width: 16px; height: 16px; }
.footer-copyright { color: var(--color-muted); font-size: 10px; line-height: 36px; }

/* Recommended accessibility feedback, not observed original states. */
.tenten-page :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  .rule-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 767px) {
  :root { --space-section: 50px; --content-end-gutter: 20px; }
  .content-width {
    width: calc(100% - var(--mobile-rail) - var(--mobile-end));
    margin-left: var(--mobile-rail);
    margin-right: var(--mobile-end);
  }
  .menu-toggle { top: 10px; left: 6px; }
  .store-shortcut { top: 23.5px; right: 21.5px; left: auto; }
  .brand-wordmark, .language-switch { display: none; }
  .hero { padding-top: 182px; padding-bottom: 50px; }
  .hero__media { width: min(220px, 100%); margin-inline: auto; aspect-ratio: 3 / 4; }
  .hero__slogan { gap: 20px; font-size: 18px; }
  .hero__intro { width: 100%; margin-top: 60px; }
  .subscription { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .subscription .section-title { font-size: 18px; }
  .subscription__copy .rule-link { margin-top: 50px; }
  .collection-section { grid-template-areas: 'heading' 'content' 'action'; grid-template-columns: minmax(0, 1fr); }
  .collection-section > .rule-link { justify-self: start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 13.56px; }
  .rail { --rail-card: 226.375px; gap: 16px; }
  .rail--stories { --rail-card: 229.453px; }
  .cycle-section { padding-block: 50px; }
  .cycle-copy { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .cycle-copy__body { padding-top: 0; }
  .cycle-copy .rule-link { margin-top: 50px; }
  .portal-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .store-banner { gap: 32px; padding: 50px 45px; }
  .site-footer { margin-top: 150px; padding-block: 120px 28px; }
  .footer-inner { padding-inline: 36px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 100px; }
  .footer-links a:nth-child(even) { text-align: right; }
}

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

For the resource explanation, place the About link beneath the statement on desktop and after the body on mobile. Use an appropriate grid-area arrangement or responsive layout wrapper while preserving one keyboard focus target; do not duplicate an active link solely to reposition it.

### Minimal Opening Markup

The image URLs below are explicit replacement placeholders, not observed source paths. The live-text heading is a semantic reconstruction. The paragraph is shortened example copy drawn from the original text.

```html
<section class='hero content-width'>
  <figure class='hero__media'>
    <picture>
      <source media='(max-width: 767px)' srcset='REPLACE_WITH_MOBILE_IMAGE_URL'>
      <img
        src='REPLACE_WITH_DESKTOP_IMAGE_URL'
        alt='Chickens inside a wire-fronted coop'
        fetchpriority='high'
      >
    </picture>
  </figure>

  <h1 class='hero__slogan' aria-label='半径1kmの風景をつくる'>
    <span aria-hidden='true'>半径</span>
    <span aria-hidden='true'>1kmの</span>
    <span aria-hidden='true'>風景を</span>
    <span aria-hidden='true'>つくる</span>
  </h1>

  <div class='hero__intro'>
    <p>私たちは自らが暮らす半径1kmで未来に残したい風景をつくります。</p>
    <a class='rule-link' href='https://tenten.fun/about/'>About</a>
  </div>
</section>
```

Set the `<picture>` to `display: contents` or `display: block; width: 100%; height: 100%` so its child image fills the figure's aspect-ratio box. Supply the final image's intrinsic dimensions when preparing real assets.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not identify the original site's implementation framework. Define the custom properties above first.

```css
@theme inline {
  --color-paper: var(--color-paper);
  --color-ink: var(--color-ink);
  --color-quiet: var(--color-muted);
  --color-hairline: var(--color-rule);
  --font-reading: var(--font-ja);
  --font-editorial: var(--font-latin);
  --text-reading: 14px;
  --text-editorial: 22px;
  --text-statement: 20px;
  --text-utility: 12px;
  --spacing-mobile-rail: 62px;
  --spacing-mobile-end: 20px;
  --spacing-section: 100px;
  --spacing-row: 50px;
  --radius-editorial: 0px;
}
```

When integrating Tailwind, use distinct source and theme variable names if your build emits same-name custom properties; for example, map `--color-canvas` to `var(--color-paper)` and `--color-text` to `var(--color-ink)` to avoid self-references.

## Sources & Evidence

- [Current Japanese TenTen homepage](https://tenten.fun/): original and final URL are identical; supplied response status is HTTP 200.
- Supplied browser retrieval record: September 12, 2026, `2026-09-12T11:33:32.053Z`. Separate timestamps for each screenshot were not supplied.
- Desktop inspection: 1440 × 1000 CSS pixels; opening, resource-cycle section, and footer captures; rendered document height approximately 8777.48px.
- Mobile inspection: 390 × 844 CSS pixels; opening and footer captures; rendered document height approximately 11109.73px.
- Rendered DOM evidence: page title, homepage text, anchor destinations, selected element rectangles, computed colors, typography, padding, transitions, and custom properties.
- Observed interaction scope: initial settled page and scrolling to supplied capture positions. Menu opening, link activation, language switching, rail controls, hover states, and destination pages were not demonstrated.
- Inspection limitations: no complete stylesheet, image-file inventory, font-file inventory, interaction recording, or intermediate viewport was supplied. Readiness checks improve capture stability but do not prove that all delayed content or motion was exercised.

This reference describes the current homepage supported by those captures and measurements. Estimated geometry and recommended implementation behavior are labeled throughout.