# at ease / アットイーズ株式会社 — Style Reference

> Watercolor ingredients scattered across warm paper, framed by black Japanese type and a handwritten signature.

**Website:** [at-e.jp](https://at-e.jp/)
**Original URL:** https://at-e.jp/
**Final URL:** https://at-e.jp/
**Theme:** light cream canvas with black typography and pale yellow accents; no theme selector was observed.
**Inspected:** October 2, 2026, 00:31 JST; supplied capture timestamp October 1, 2026, 15:31:32.016 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current corporate and gourmet-gift homepage: opening illustration composition, About and Line up introductions, contact methods, persistent navigation, and footer. Evidence consists of three desktop captures, two mobile captures, and the supplied rendered DOM/computed-style records. Linked pages and an opened mobile menu were not inspected.

The homepage presents seasonal food and traceable sourcing through an unusually open composition. A cow, small fruits, watermelon, crab, steak, and a citrus branch appear as watercolor cutouts on a continuous cream field. Black Japanese copy runs both horizontally and vertically around them. The small handwritten wordmark and its tiny English descriptor introduce a personal, quiet identity without competing with the ingredients.

Below the opening composition, the same paper continues through spacious editorial sections and a practical contact area. Small English section labels introduce larger Japanese headings. Contact actions use dashed rules and yellow circular arrow marks. Desktop navigation stays visible along the right edge; mobile navigation becomes a narrow bottom bar. The mobile page deliberately rearranges imagery, writing direction, and footer order rather than simply shrinking the desktop composition.

## How to Read This Reference

- **Measured** means a value supplied in the rendered DOM or computed-style evidence. Decimal values are rounded for readability unless a formula is reproduced.
- **Visually estimated** means a dimension or treatment inferred from the supplied original-page screenshots. Image bounds, arrow-circle sizes, and photographic corner radii fall into this category.
- **Derived** means arithmetic based on measured values, such as a container width calculated from its left and right edges.
- **Recommended** means an implementation choice for a new site. The CSS Quick Start is an adaptation, not recovered source code.
- Source custom-property names are identified explicitly. Other token names are descriptive aliases.
- Element rectangles do not establish visibility by themselves. The DOM includes duplicate navigation and headline content that is absent from the closed-menu captures.
- Only the original-page captures inform the design analysis. A separately supplied comparison thumbnail is excluded from the measurements and design findings below.

## Tokens — Colors

### Default Palette

| Name | Value | Source or suggested token | Role and evidence |
| --- | --- | --- | --- |
| Cream Paper | `#f5f4e9` | Source `--background-color`; alias `--color-paper` | Measured body background at both viewports. Continues through the hero, editorial content, contact area, and footer. |
| Black Ink | `#000000` | Source `--font-color`, `--accent-color-1`; alias `--color-ink` | Measured headline and paragraph color. Visually also supplies the wordmark, navigation labels, arrows, and fine rules. |
| Pale Lemon | `#f4ea90` | Source `--main-color`, `--font-link`, `--font-link-hover`; alias `--color-lemon` | Source accent color. Visible in circular contact actions and the oversized footer signature. |
| Quiet Lettering | `#edecdd` | Measured `CONTACT` text color; alias `--color-quiet` | Very low-contrast oversized background lettering in the contact region. |
| Caption Gray | `#c5c5c5` | Source `--font-caption` | Declared support token. A prominent visible caption treatment using it was not established. |
| Border Gray | `#cccccc` | Source `--border-color` | Declared support token. Do not substitute it for the visibly dark contact and bottom-navigation rules. |

The reds, greens, oranges, and brown-black tones in the opening view belong to the artwork. They are not evidence of additional button or category colors. Keep the interface palette restrained and let the food supply most of the chromatic variation.

### Computed Color Versus Visible Paint

Many extracted anchors report `#f4ea90`, while their screenshot labels appear black. Contact headings inside those anchors independently measure black. The extraction does not expose every nested element and pseudo-element responsible for the final paint.

For a visual adaptation, use black readable labels with yellow action shapes. Do not turn all navigation or footer text pale yellow merely because the outer anchor reports that color. The observed `--font-link-hover` value also does not prove a particular visible hover effect; no hover sequence was supplied.

## Tokens — Typography

### Declared Interface Stack

**Measured family stack:** `YakuHanJP, Lato, "Zen Kaku Gothic New", sans-serif`.

The same stack appears on headings, body text, navigation, and controls. Preserve the combination of clean Japanese sans-serif text and compact Latin utility labels. The declared stack is known; the evidence does not independently establish which font file supplied every glyph.

- **Primary weight:** `500`, including the large Japanese display copy and section headings.
- **Emphasis weight:** `700`, used for English section labels and contact-method headings.
- **General tracking:** `0.5px`.
- **Hero tracking:** `5px` at both inspected widths.
- **Body leading:** approximately `2`, despite the general source `--line-height` value of `1.5`.

The main headings look substantial because of size, spacing, and black contrast. Increasing all of them to weight 800 would change the balance.

### Wordmark and Descriptor

The handwritten `at ease` signature is a graphical identity element. Its linked block includes a tiny, widely tracked, two-line English descriptor. No font name for the signature is established, and the block’s computed font size does not describe the lettering inside the graphic.

Use an appropriate supplied wordmark asset when reproducing this identity. A generic cursive web font will not preserve its long connecting strokes and open rhythm.

### Type Scale

Values below are measured font size / line height in CSS pixels.

| Role | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Opening Japanese copy | `57.14 / 76.19` | `37.68 / 50.24` | `500` | `5px` |
| Section heading | `38.10 / 57.14` | `28.31 / 42.47` | `500` | `0.5px` |
| English section label | `14.29 / 17.14` | `15 / 18` | `700` | `0.5px` |
| Editorial paragraph | `14.29 / 28.57` | `13.05 / 26.10` | `500` | `0.5px` |
| Contact-method heading | `23.81 / 42.86` | `20.13 / 36.24` | `700` | `0.5px` |
| Footer statement | `28.57 / 57.14` | `20.26 / 40.52` | `500` | `0.5px` |
| More link | `14.29 / 21.43` | `13.05 / 19.58` | `500` | `0.5px` |
| Desktop navigation | `13.94 / 20.91` | Not visible as a desktop rail | `500` | `0.5px` |
| Mobile Menu / Contact | Not visible | `15 / 22.5` | `500` | `0.5px` |
| Footer policy links | `13 / 19.5` | `13 / 19.5` | `500` | `0.5px` |
| Decorative LINE UP / CONTACT | `666.67 / 533.33` | `200 / 160` | `500` | `0.5px` |

The telephone number is visually estimated at approximately 46–48px on desktop and 38–40px on mobile. Its own computed font size was not included, so these estimates should not be treated as measured tokens.

### Source Scaling

The root measures `10px`, corresponding to the declared `--font-size: 62.5%` under the captured browser settings. Desktop content frequently matches the source’s 1512px reference-width tokens:

```css
/* Observed source custom properties */
--font-base-vw: calc(100vw / (1512 / 15));
--headline-2-vw: calc(100vw / (1512 / 40));
--headline-3-vw: calc(100vw / (1512 / 25));
--font-lg-vw: calc(100vw / (1512 / 30));
```

At 1440px wide, these produce 14.29px, 38.10px, 23.81px, and 28.57px respectively, matching the measured paragraph, section heading, contact heading, and footer statement.

Mobile measurements match these source clamps when one source rem equals 10px:

```css
/* Observed source custom properties; source rem equals 10px here */
--font-base: clamp(1.3rem, 1.2375rem + 0.1736vw, 1.5rem);
--headline-2: clamp(2.8rem, 2.425rem + 1.0417vw, 4rem);
--headline-3: clamp(2rem, 1.8438rem + 0.434vw, 2.5rem);
--font-lg: clamp(2rem, 1.6875rem + 0.8681vw, 3rem);
```

The actual mobile hero size is 37.68px. It should not be assigned the source `--font-xl` token without further evidence: that token has a 40px minimum under the observed root settings.

The body itself reports an unusually small inherited size of 6.25px, while readable descendants explicitly use larger sizes. Do not use 6.25px as the content-text baseline in a new implementation.

## Tokens — Spacing & Shapes

The page uses multiple spacing systems: viewport-scaled desktop geometry, fixed mobile insets, and independently positioned artwork. A universal eight-pixel grid would not explain the observed layout.

### Spacing Measurements

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Brand left inset | `59.05px` | `15.98px` | Matches the source outer-width formula below. |
| Editorial left inset | `131.77px` | `15px` | Desktop content sits farther inward than the wordmark. |
| Editorial available width | About `1176.45px`, derived | `360px` | Desktop edges at about 131.77 and 1308.22px; mobile width is viewport minus 30px. |
| Section-label bottom padding | `47px` | `24px` | Separates the small English label from the Japanese heading. |
| Heading-to-body gap | `47px` in About and Contact | `24px` | Measured from adjacent text boxes. |
| About paragraph-to-More gap | `60px` | `24px` | The desktop narrative remains deliberately loose. |
| Contact-row vertical padding | `45.71px` per side | `32px` per side | Large, open hit regions without card containers. |
| About section outer padding | `121.90px` top | `32px` top and bottom | Additional internal layout space also exists. |
| Footer statement-to-logo gap | Side-by-side arrangement | `60px` | Mobile reverses the visual order and stacks the elements. |
| Mobile footer logo-to-policy gap | Not applicable | `60px` | Repeated vertical rhythm. |
| Mobile policy-to-copyright gap | Not applicable | `60px` | Measured after the policy-link group. |

The observed outer-width property is:

```css
--width-space-1: calc(100% - (100vw / (1512 / 124)));
```

When centered, this produces approximately 59.05px side margins at 1440px and 15.99px at 390px. Editorial mobile content separately matches `--width-space-3: calc(100% - 3rem)`, producing 15px side margins with the observed root.

### Shapes and Rules

| Element | Treatment | Evidence level |
| --- | --- | --- |
| Main sections | Unboxed, square layout regions | Visible captures and zero radii on measured section elements |
| Contact separators | Fine dark dashed horizontal rules, about `1px` | Visually estimated |
| Bottom navigation separator | Straight dark top rule, about `1px` | Visually estimated |
| Contact arrow mark | Pale yellow circle; about 95–96px desktop and 70px mobile | Visually estimated |
| More link box | `border-radius: 0 50% 50% 0` | Measured; internal decorative anatomy not fully exposed |
| Food-photo corners | Small rounding, approximately 8–12px | Visual estimate from the visible photo fragment |
| Hero artwork | Irregular painted silhouettes with soft edges | Visible screenshots |
| Shadows | No general shadow/elevation system visible | Limited to inspected states |

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | `4613.73px` | `3635.44px` |
| Header wordmark link | `222.84 × 97.13px` at `(59.05, 49)` | `159 × 69.30px` at `(15.98, 23)` |
| About heading column | `442.84px` wide | `360px` wide |
| About paragraph | `365.70px` wide | `360px` wide |
| Line up paragraph | `527.61px` wide, beginning at `x = 780.61` | `360px` wide, below its heading |
| Contact introduction | `276.19px` wide | `360px` wide |
| Contact action column | `700.94px` wide, beginning at `x = 607.28` | `360px` wide, below the introduction |
| More link box | `120.94 × 47.61px` | `73 × 30px` |
| Footer region | `417.14px` high | `575.89px` high |
| Footer logo | `222.84 × 97.13px` | `159 × 69.30px` |
| Mobile Menu button | Not visible | `172.5 × 38px` |

The desktop About section’s recorded boundary begins at document y ≈ 809.52px, while the final hero phrase extends to about y = 971.44px and the About label does not begin until y ≈ 1347.75px. These overlapping ranges show that section boundaries alone are not a reliable measure of the visible hero’s height.

## Components

### Persistent Wordmark

**Role:** a quiet home link and continuous identity anchor.

The linked wordmark occupies the upper left, with the signature above two tiny lines of tracked English text. Desktop captures retain it at approximately 59px from the left and 49px from the top. Mobile uses approximately 16px and 23px respectively.

The signature remains visible in scrolled captures, including over the contact region. Its surrounding surface is not a full-width opaque header. This preserves the open paper composition, but it can place the brand over underlying content.

The extracted H1 contains a link with no text in the text-only record; the graphical content is visible in the screenshots. This does not establish whether an accessible image name exists. In a new implementation, give the home link a meaningful accessible name.

### Watercolor Hero Composition

**Role:** communicate seasonality, food quality, and sourcing before presenting conventional navigation or product information.

Three separate paragraphs form the display statement:

1. `旬のおいしさ。` appears horizontally at the upper right on desktop and vertically down the right edge on mobile.
2. `生産地がわかる、` runs vertically down the left side at both sizes.
3. `安心ギフト。` closes the composition horizontally near the lower left.

The measured desktop paragraph boxes begin at approximately `(985.23, 68.56)`, `(44.77, 422.17)`, and `(59.05, 895.27)`. Mobile positions become `(327.53, 23)`, `(6.58, 231.05)`, and `(15.98, 554.94)`.

Keep the Japanese text as actual text with an intentional reading order. Use vertical writing mode for the vertical phrases rather than rotating a horizontal sentence. The screenshot arrangement should not dictate an inaccessible DOM reading order.

Artwork occupies the spaces between the words. The cow anchors the left, the small fruits create a descending center rhythm, the watermelon occupies the upper-right middle, and the citrus branch enters from the right edge. Crab and steak balance the lower center. The branch deliberately crosses the image frame; the principal food subjects remain recognizable.

The composition does not contain a prominent hero button, price badge, or product-card frame in the supplied opening states.

### Desktop Navigation Rail

**Role:** persistent access to company, assortment, and contact information.

A right-aligned vertical list contains `ホーム`, `アットイーズについて`, `ラインアップ`, `会社概要`, `お問い合わせ`, and `LINEで問い合わせ`, followed by a compact telephone and business-hours block. The home item is visibly underlined.

The initial desktop home-link box begins around y = 235.47px; successive main entries are spaced approximately 35.84px apart. The right edge aligns near x = 1380.94px, matching the outer wordmark margin.

In the scrolled desktop captures, the rail appears nearer the top, with its first item around y = 60px. This supports a persistent rail with a changed vertical position during scrolling. Its exact positioning rule, threshold, and transition mechanism are not provided.

Verified destinations include `/about/`, `/lineup/`, `/company/`, the home-page `#contact` anchor, a LINE URL, and a `tel:` link. These are observed link targets, not tested navigation outcomes.

### Mobile Bottom Navigation

**Role:** keep the two main utilities reachable without covering the narrow hero with a full navigation list.

The closed state is a cream bottom strip with 15px side insets, a fine top rule, a Menu button, a slash divider, and a Contact link. Text is 15px. The Menu label aligns toward the central divider; Contact aligns away from it on the right.

The Menu button measures 38px high in the capture. The Contact anchor’s text box measures 22.5px high; that is not sufficient evidence of its entire hit region.

A Close button and duplicated navigation content exist in the DOM, but an opened menu was not captured. Do not infer its panel background, opening direction, focus behavior, or full visual composition from these hidden-state records.

For reuse, enlarge the interactive height to at least 44px, account for the device safe area, and provide content clearance above the fixed strip. These are recommendations rather than observed dimensions.

### About Introduction

**Role:** introduce the quality positioning and lead to the dedicated About page.

The text sequence is a bold English label, a two-line Japanese heading, a short paragraph, and a More link. The heading quotes `プロも認めた高い品質の` followed by `お取り寄せグルメ`.

On desktop, the measured heading column is about 443px wide and the paragraph narrows to about 366px. Text begins well inside the outer wordmark margin. A supplied middle-page capture shows part of an adjacent food-photo arrangement: a cooked dish, a plated meal, and pineapple imagery toward the right side.

Only fragments of that photographic region are visible. The complete grid, image count, and any carousel behavior are unverified. The lower visible photograph looks washed out at its edge, but the evidence does not establish whether this comes from a mask, transition, or another rendering layer.

Mobile gives the text a 360px column. The label begins at document y ≈ 757.33px, with the heading immediately after its 24px label padding. More sits toward the right of the content area after the paragraph.

### Line up Introduction

**Role:** introduce the seasonal assortment and link to the dedicated lineup page.

Desktop separates the heading and explanatory paragraph into two widely spaced columns. The heading begins at x ≈ 131.77px; the paragraph begins at x ≈ 780.61px. Their text occupies a small proportion of a large cream region.

The heading reads `旬のオススメを` and `厳選したラインナップ`. The adjacent paragraph explains timely seasonal eating and direct-from-producer delivery. Keep this as an editorial introduction rather than inventing product cards, pricing, or categories not shown in the evidence.

The DOM also contains two oversized `LINE UP` strings. They measure 666.67px on desktop and 200px on mobile. Their reported text fill matches the page background; any additional outline, mask, or image treatment is not established by the extracted properties.

Mobile stacks heading and paragraph. Its More link sits before the oversized-lettering region, around document y = 1959.36px. Desktop places More below that region, around y = 3111.86px. This is a meaningful layout-order change between the two inspected states.

### More Link

**Role:** a compact editorial continuation link.

Observed destinations are `/about/` and `/lineup/`. The desktop anchor box is approximately 121 × 48px; mobile reduces it to 73 × 30px. Its computed display is flex and its radius is `0 50% 50% 0`.

The supplied crops do not reveal the complete link interior, so an exact arrow construction or hover animation cannot be specified. A black label with a restrained lemon action mark is a suitable adaptation of the visible contact language, but should be labeled as a new implementation choice.

Do not scale the mobile hit target down to 30px simply to reproduce the visible box. A larger transparent interactive area can preserve the apparent size.

### Contact Section

**Role:** offer LINE, telephone, and email-form contact as clear parallel choices.

Desktop uses a narrow introductory column on the left and a substantially wider action column on the right. The left contains the Contact label, `お問い合わせ` heading, and explanatory paragraph. The right contains three full-width linked rows.

Each row combines a bold method label with supporting information or a large action cue. The telephone row places its large number toward the right on desktop. The email-form row ends in a yellow circular mark containing a small black arrow. Fine dashed rules divide the rows.

Measured row heights are approximately 194px, 168px, and 188px on desktop. Mobile rows measure approximately 151px, 189px, and 137px. The taller mobile telephone row accommodates stacked information. The email heading deliberately wraps into two lines.

Observed destinations are:

- LINE: `https://lin.ee/5J0AUmq`.
- Telephone: `tel:0246-46-1781`.
- Email-form page: `https://at-e.jp/contact/`.

The telephone hours shown in the source UI are weekdays 10:00–17:00, with weekends and holidays excluded in the contact-row copy. The form itself was not opened.

Large, pale `CONTACT` lettering sits behind the section. Its measured color is `#edecdd`, which makes it a quiet spatial texture. Keep all essential contact information in the normal foreground content.

### Footer

**Role:** restate the promise, retain the identity, and provide practical policy links.

Desktop pairs the logo on the left with a two-line Japanese statement on the right. A lower row places the copyright at the left and four policy links at the right. A giant yellow handwritten signature extends across the lower edge and is intentionally cropped.

Mobile places the statement first, then the logo, then a two-row policy group, then centered copyright. The statement and logo share a 159px-wide column beginning at x = 115.5px. Three measured 60px gaps establish the vertical rhythm between the main groups.

The policy destinations are `/shopping/`, `/mailorder/`, `/warranty/`, and `/privacypolicy/`. The visible copyright remains `©at ease 2022`; this is source UI text, not the inspection date or proof of the design’s publication date.

## Tokens — Motion & Interaction

The evidence establishes a few transition declarations and several state affordances. It does not establish a complete animation system.

| Treatment | Evidence | What can be specified |
| --- | --- | --- |
| General easing token | Source `--transiton-timing-function: cubic-bezier(0.39,0.58,0.57,1)` | Preserve the source spelling when referring to it. An adaptation can use a correctly spelled alias. |
| Mobile Menu and Contact transition | `0.5s cubic-bezier(0.15,0.64,0.74,1.26)` | Measured duration and curve. The changed property and visible triggered behavior were not verified. |
| Additional navigation-copy background transition | `background 0.5s cubic-bezier(0.39,0.58,0.57,1) 0.2s` | Present on duplicated headline paragraphs; do not automatically apply it to the visible hero copy. |
| Repeated oversized lettering | Duplicate LINE UP and CONTACT strings; slightly negative mobile x positions | Compatible with a translated repeating strip, but speed, direction, looping, and implementation are unverified. |
| Persistent identity and navigation | Visible across different scroll captures | Preserve their availability. Exact sticky/fixed rules and scroll thresholds are not supplied. |
| Home underline | Visible in desktop navigation | A current-page treatment is supported. Hover styling was not exercised. |
| Menu opening and closing | Menu and Close controls appear in the DOM | Affordance exists; the opened state was not visually tested. |
| Hero illustration movement | No temporal sequence supplied | Floating, parallax, rotation, and cursor-follow behavior are unverified. |

Most recorded elements report `animation: none`; many transitions are recorded only as `all`. Neither observation rules out JavaScript motion, ancestor transforms, or pseudo-element effects.

The capture process waited for finite motion and temporarily paused perpetual animations during readiness checks before resuming them. This improves screenshot stability but does not provide frame-by-frame animation evidence.

**Recommended adaptation:** start with a complete static composition. Add motion only after specifying its purpose and obtaining stronger behavioral evidence. Repeating decorative text should remain nonessential, and reduced-motion users should receive a stable, complete layout.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid `#f5f4e9` | Unifies every main section. |
| Hero subjects | Watercolor cutouts that merge into the canvas | Supply detail, color, and character without containers. |
| Editorial content | Black text directly on paper | Maintains the open composition and restrained hierarchy. |
| Food photography | Rectangular crops with modest corner rounding | Introduces prepared-food realism below the illustration-led opening. |
| Contact rows | Paper surface with thin dashed separators | Organizes parallel actions without cards or shadows. |
| Action marker | Pale yellow circle with black arrow | Gives a local, recognizable contact affordance. |
| Oversized background type | Near-paper lettering | Adds scale and depth without becoming essential content. |
| Mobile bottom bar | Paper strip with a dark top rule | Keeps navigation readable over the scrolling page. |

No modal, menu-panel surface, or general elevated-card system was verified. Do not infer one from the presence of hidden menu controls.

## Imagery

### Watercolor Language

The hero imagery combines recognizable food forms with translucent washes, irregular pigment edges, and simplified tonal patches. White and pale areas within the paint allow the cream field to remain visually continuous. The result is warmer and less commercial than a row of polished product packshots.

Preserve natural antialiasing and the soft edges of the artwork. Do not use pixelated image rendering, hard geometric clipping, uniform sticker outlines, or added drop shadows.

### Approximate Hero Placement

These are **visual estimates of the painted areas**, not measured image-element boxes. Coordinates refer to the supplied original-page opening screenshots. Soft watercolor edges make exact bounds ambiguous.

| Subject | Desktop placement at 1440 × 1000 | Mobile placement at 390 × 844 |
| --- | --- | --- |
| Cow | Around x = 190, y = 180; roughly 285 × 525px | Around x = 70, y = 140; roughly 125 × 215px |
| Small orange/red fruits, lime, and cherries | Loose cluster around x = 515–735, y = 80–315 | Narrow cluster around x = 205–300, y = 85–250 |
| Watermelon | Around x = 800, y = 120; roughly 350 × 365px | Around x = 197, y = 269; roughly 115 × 120px |
| Crab | Around x = 590, y = 375; roughly 240 × 170px | Around x = 88, y = 382; roughly 100 × 70px |
| Steak and soft painted surroundings | Around x = 550, y = 585; roughly 340 × 250px | Around x = 70, y = 475; roughly 120 × 85px |
| Citrus branch | Enters around x = 960, y = 420 and extends beyond the right edge | Enters around x = 175, y = 365 and extends beyond the right edge |

The mobile fruit cluster and the relative order of watermelon, crab, steak, and branch are recomposed. A single full-hero bitmap scaled to phone width would not reproduce this arrangement.

### Photography and Branding Assets

The visible secondary photography includes a browned cooked dish with green vegetables, a plated meal, and pineapple. Keep photography appetizing and natural, while preserving the watercolor hero as a distinct introductory treatment.

The top and footer wordmarks are graphic signatures with fine strokes. The large yellow footer signature should remain a separate decorative layer rather than oversized interactive text.

### Observed Asset References

No original image `src`, `srcset`, file names, or asset URLs were included in the supplied DOM excerpt. Consequently, this reference does not invent an asset-path inventory.

A faithful implementation needs separate artwork or an equivalent responsive art-direction strategy for the food subjects, the wordmark lockup, the footer flourish, and the photographic content. CSS alone cannot reproduce their identity.

## Layout & Responsive Behavior

### Desktop

The desktop page separates three horizontal systems:

- The wordmark and navigation align to outer margins of about 59px.
- Editorial text occupies a narrower centered region with about 132px side insets.
- Hero artwork and oversized lettering can extend beyond these content edges.

The rail occupies the right edge without a conventional full-width header. Main sections have generous vertical space and little visible framing. About and Line up use different text/image relationships, while Contact has a narrower introduction beside a wide list of actions.

Do not derive all section heights from the screenshot crops. The DOM reports overlapping hero and About ranges, and the extracted records do not describe every image wrapper or transform.

### Mobile

At 390px wide, the content column becomes 360px with 15px side margins. The wordmark remains approximately 159px wide rather than shrinking proportionally with the desktop viewport.

The opening claim turns vertical at the right edge. The left vertical phrase and lower horizontal phrase remain, but the illustrations move into a tighter arrangement between them. The first About label appears near y = 757px, just above the persistent bottom navigation in the initial capture.

Section headings reduce to about 28px, while English section labels increase slightly from the desktop’s viewport-scaled 14.29px to 15px. Paragraphs use about 13px with a generous 26px line height.

Editorial columns stack. Contact rows span the content width, the telephone information stacks, and the email heading wraps. The footer changes order: statement, logo, policies, copyright, decorative signature. Desktop navigation is replaced by Menu and Contact at the bottom.

### Breakpoints and Untested Sizes

Only the two supplied viewport sizes were inspected. The original breakpoint thresholds, tablet composition, landscape-phone behavior, and browser zoom behavior are unknown.

The Quick Start uses a **recommended 60rem breakpoint**, not an observed source breakpoint. Intermediate widths need review for collisions between the wordmark, hero copy, artwork, and navigation. The large source tracking is particularly important to check when Japanese copy changes.

## Do’s and Don’ts

### Do

- Preserve the exact cream, black, and pale-yellow interface palette.
- Treat watercolor food artwork as the main source of color and visual detail.
- Keep the wordmark small relative to the opening illustration composition.
- Use separate text blocks for the horizontal and vertical Japanese phrases.
- Recompose individual subjects for mobile instead of scaling one desktop collage.
- Retain wide desktop editorial margins and generous inter-section breathing room.
- Pair small bold English labels with larger medium-weight Japanese headings.
- Keep body paragraphs airy, with approximately double-size line height.
- Use fine rules and circular lemon action marks in the contact area.
- Preserve the mobile footer’s statement-first order and repeated vertical gaps.
- Distinguish decorative oversized lettering from essential headings.
- Keep contact methods and business information easy to find throughout the page.

### Don’t

- Don’t convert the food illustrations into a uniform product-card grid.
- Don’t replace the continuous cream field with unrelated colored section panels.
- Don’t add heavy shadows, glossy gradients, glass effects, or thick card borders.
- Don’t assign an invented font name to the handwritten wordmark.
- Don’t use pale-yellow text for every link based only on outer-anchor computed values.
- Don’t make all headings extra-bold; the measured display weight is 500.
- Don’t rotate horizontal Japanese text to imitate vertical typesetting.
- Don’t crop the cow, crab, or steak into generic rectangular hero tiles.
- Don’t claim a carousel, floating-art animation, or marquee speed without further evidence.
- Don’t treat the unshown mobile menu as a verified full-screen overlay design.
- Don’t copy the tiny inherited body font size into a new site’s readable text styles.
- Don’t let fixed branding or bottom navigation hide essential content or focused controls.

## Recommended Implementation Additions

These are improvements for a new implementation, not verified features of the original page:

- Give the graphical home link a meaningful accessible name. Use empty alternative text for purely decorative duplicates.
- Maintain a logical reading order for the three hero phrases, independently of visual positioning.
- Mark repeated LINE UP, CONTACT, and footer-signature decorations as hidden from assistive technology.
- Give Menu an explicit expanded state and controlled-panel relationship. If its panel behaves as a dialog, manage focus and provide Escape-to-close behavior.
- Increase small visible controls to at least 44px interactive targets without enlarging their artwork unnecessarily.
- Add a clear black focus outline and retain underlines or another non-color indicator for important text links.
- Provide bottom safe-area padding and scroll clearance for fixed mobile navigation.
- At narrow or zoomed layouts, consider 14–16px body text while retaining the original hierarchy and generous leading.
- Keep the hero’s text and contact information usable if decorative images fail to load.
- Reserve image dimensions to prevent layout shifts. Load below-fold photography separately from the opening artwork.
- Stop nonessential looping decoration for reduced-motion users. Any JavaScript animation must honor the same preference.
- Verify the full photo and lineup regions before reproducing their blank areas, fades, or reveal behavior.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and normal surfaces: `#f5f4e9`.
- Foreground text, signature, arrows, and visible fine rules: `#000000`.
- Circular contact accents and decorative footer signature: `#f4ea90`.
- Oversized contact-background lettering: `#edecdd`.
- Reds, oranges, greens, and browns: artwork colors, not additional interface accents.
- Default surface treatment: flat paper with no elevation shadow.

### Overall Prompt

“Create a Japanese corporate homepage for seasonal food and gourmet gifts, using a continuous warm cream canvas `#f5f4e9`, black interface text, and pale lemon `#f4ea90` action marks. Build an opening composition from separate watercolor food cutouts: a cow at left, small fruits near the center, watermelon above the middle-right, crab and steak lower down, and a leafy citrus branch entering from the right edge. Place the Japanese promise around the illustrations using both horizontal and true vertical typesetting. Keep a small handwritten logo lockup at the upper left. Use spacious About, Line up, and Contact sections with small bold English labels, medium-weight Japanese headings, airy paragraphs, and fine dashed contact-row rules. Desktop has a right-aligned navigation rail; mobile has a Menu / Contact bottom strip and a deliberately rearranged collage. End with a statement, logo, policy links, and a large cropped lemon signature. Keep unverified animations optional and the static page complete.”

### Example Component Prompts

1. **Hero:** “Arrange watercolor ingredients as independent cutouts on cream paper. Place `旬のおいしさ。` at the upper right, `生産地がわかる、` vertically at the left, and `安心ギフト。` horizontally near the lower left. Use medium-weight black Japanese sans-serif text with generous tracking. Reposition each illustration for a 390px mobile layout.”
2. **Editorial introduction:** “Create a wide cream section with a small bold Line up label above a two-line Japanese heading. At desktop width, place a short explanatory paragraph in a separate right column with a large gap. On mobile, stack the content in a 360px column with 24px text-group gaps.”
3. **Contact row:** “Create a full-width contact link on cream with a bold black method label, ample vertical padding, a fine dashed bottom rule, and a pale-yellow circle containing a small black arrow. Use no card shadow. On mobile, allow the label to wrap and keep the arrow circle approximately 70px wide.”
4. **Mobile navigation:** “Create a fixed cream bottom strip inset 15px from each side, with a one-pixel black top rule. Place Menu and Contact around a slash divider, using 15px sans-serif labels. Provide at least 44px interactive height and a safe-area inset. Define menu accessibility separately; no original opened-menu appearance is established.”
5. **Footer:** “On desktop, pair a compact handwritten logo with a two-line Japanese promise. Place policy links and copyright below. On mobile, stack the promise before the logo, use 60px gaps between major groups, and add a cropped pale-yellow signature along the lower edge.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold for the observed visual relationships. It keeps a conventional browser root size and expresses source-derived type in pixels or viewport units. Artwork positions are screenshot-based approximations; the 60rem breakpoint, larger touch targets, focus treatment, and static motion default are recommendations.

The expected structure uses a `.site-brand` home link, a `.hero` with three text paragraphs and individually positioned `.hero__art` images, ordinary `.content-section` regions, contact-row anchors, footer groups, and a mobile bar containing Menu, a decorative slash, and Contact. Supply the actual artwork and font resources separately.

```css
:root {
  /* Measured interface colors */
  --color-paper: #f5f4e9;
  --color-ink: #000000;
  --color-lemon: #f4ea90;
  --color-quiet: #edecdd;

  /* Observed family declaration; font resources are separate */
  --font-interface: YakuHanJP, Lato, "Zen Kaku Gothic New", sans-serif;
  --weight-medium: 500;
  --weight-bold: 700;
  --tracking-body: 0.5px;
  --tracking-hero: 5px;

  /* Desktop values match the inspected 1440px viewport */
  --type-body: clamp(13px, 0.9920635vw, 15px);
  --type-label: var(--type-body);
  --type-h2: clamp(28px, 2.6455026vw, 40px);
  --type-h3: clamp(20px, 1.6534392vw, 25px);
  --type-hero: clamp(40px, 3.968254vw, 60px);
  --type-footer: clamp(20px, 1.984127vw, 30px);

  /* Derived outer margin and approximate editorial width */
  --brand-edge: calc(100vw * 62 / 1512);
  --brand-width: clamp(159px, 15.47619vw, 234px);
  --content-width: 81.7%;
  --section-space: clamp(64px, 8.4656vw, 128px);
  --text-gap: 47px;
  --contact-padding: clamp(32px, 3.174603vw, 48px);
  --contact-circle: clamp(70px, 6.613756vw, 100px);

  /* Observed curves; no motion is required by this scaffold */
  --ease-site: cubic-bezier(0.39, 0.58, 0.57, 1);
  --ease-menu: cubic-bezier(0.15, 0.64, 0.74, 1.26);
  --duration-menu: 500ms;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-interface);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-brand {
  position: fixed;
  z-index: 30;
  top: 49px;
  left: var(--brand-edge);
  width: var(--brand-width);
}

.site-brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  position: fixed;
  z-index: 30;
  top: 59px;
  right: var(--brand-edge);
  display: grid;
  gap: 14px;
  text-align: right;
  font-size: clamp(13px, calc(12.688px + 0.0868vw), 14px);
  line-height: 1.5;
}

/* Optional authored state; the original scroll threshold is unknown. */
.is-hero .desktop-nav {
  top: 23.55vh;
}

.desktop-nav a {
  justify-self: end;
  text-decoration: none;
}

.desktop-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.hero {
  position: relative;
  isolation: isolate;
  height: max(100svh, 69.44444vw);
  overflow: clip;
}

.hero__copy {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: var(--type-hero);
  font-weight: var(--weight-medium);
  line-height: 1.333333;
  letter-spacing: var(--tracking-hero);
}

.hero__fresh {
  top: 6.856%;
  right: 3.7vw;
}

.hero__origin {
  top: 42.217%;
  left: calc(var(--brand-edge) - 0.25em);
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.hero__gift {
  bottom: 1.984127vw;
  left: var(--brand-edge);
}

.hero__art {
  position: absolute;
  z-index: 1;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

/* Estimated painted-area placement; adjust to actual asset padding. */
.art-cow { left: 13.2%; top: 18%; width: 20%; }
.art-orange { left: 35.8%; top: 8%; width: 6.9%; }
.art-red-fruit { left: 44%; top: 13%; width: 7%; }
.art-lime { left: 38.7%; top: 22.6%; width: 4.4%; }
.art-cherries { left: 46.1%; top: 26.3%; width: 3.8%; }
.art-melon { left: 55.6%; top: 11.9%; width: 24.4%; }
.art-crab { left: 40.9%; top: 37.3%; width: 16.8%; }
.art-steak { left: 38.3%; top: 58.4%; width: 23.8%; }
.art-branch { left: 66.5%; top: 41.9%; width: 38%; }

.content-section {
  position: relative;
  width: var(--content-width);
  margin-inline: auto;
  padding-block: var(--section-space);
}

.section-label {
  margin: 0;
  padding-bottom: var(--text-gap);
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.section-heading {
  margin: 0;
  font-size: var(--type-h2);
  font-weight: var(--weight-medium);
  line-height: 1.5;
}

.section-body {
  margin: var(--text-gap) 0 0;
  font-size: var(--type-body);
  line-height: 2;
}

.editorial-grid {
  display: grid;
  grid-template-columns: 37.642% 44.847%;
  justify-content: space-between;
  align-items: end;
}

.editorial-grid > .section-body {
  margin: 0;
}

.more-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 121px;
  min-height: 48px;
  margin-top: 60px;
  border-radius: 0 50% 50% 0;
  text-underline-offset: 4px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 23.477% 59.581%;
  justify-content: space-between;
  align-items: start;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: var(--contact-padding);
  border-bottom: 1px dashed var(--color-ink);
  text-decoration: none;
}

.contact-title {
  margin: 0;
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  line-height: 1.8;
}

.contact-detail {
  display: block;
  margin-top: 8px;
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: 2;
}

.contact-number {
  white-space: nowrap;
  font-size: clamp(38px, 3.3vw, 50px);
  line-height: 1.2;
  letter-spacing: 0;
}

.contact-arrow {
  display: grid;
  flex: 0 0 var(--contact-circle);
  width: var(--contact-circle);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-lemon);
  color: var(--color-ink);
  font-size: 20px;
}

.decorative-strip {
  overflow: clip;
  color: var(--color-quiet);
  font-size: clamp(200px, 46.2963vw, 700px);
  line-height: 0.8;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 30px 0 95px;
}

.footer-brand {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28.6% 49.7%;
  justify-content: space-between;
  align-items: center;
  width: 54.1%;
  margin-inline: auto;
}

.footer-copy {
  margin: 0;
  font-size: var(--type-footer);
  line-height: 2;
}

.footer-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: var(--content-width);
  margin: 150px auto 0;
  font-size: 13px;
  line-height: 1.5;
}

.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-policies a {
  text-decoration: none;
}

.footer-flourish {
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  width: 100%;
  pointer-events: none;
}

.mobile-bar {
  display: none;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

/* Recommended breakpoint; not recovered from the original stylesheet. */
@media (max-width: 60rem) {
  :root {
    --type-body: clamp(13px, calc(12.375px + 0.1736vw), 15px);
    --type-label: 15px;
    --type-h2: clamp(28px, calc(24.25px + 1.0417vw), 40px);
    --type-h3: clamp(20px, calc(18.438px + 0.434vw), 25px);
    --type-footer: clamp(20px, calc(16.875px + 0.8681vw), 30px);
    --type-hero: clamp(32px, 9.661846vw, 40px);
    --brand-width: 159px;
    --content-width: calc(100% - 30px);
    --section-space: 64px;
    --text-gap: 24px;
    --contact-padding: 32px;
    --contact-circle: 70px;
  }

  body {
    padding-bottom: calc(48px + var(--safe-bottom));
  }

  .site-brand {
    top: 23px;
  }

  .desktop-nav {
    display: none;
  }

  .hero {
    height: 177.7778vw;
  }

  .hero__fresh {
    top: 23px;
    right: 3.137vw;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }

  .hero__origin {
    top: 59.2428vw;
  }

  .hero__gift {
    top: 142.2917vw;
    bottom: auto;
  }

  .art-cow { left: 18%; top: 20%; width: 32%; }
  .art-orange { left: 55.1%; top: 12.3%; width: 13.3%; }
  .art-red-fruit { left: 63.8%; top: 21.3%; width: 13%; }
  .art-lime { left: 52.8%; top: 27.8%; width: 8.5%; }
  .art-cherries { left: 65.3%; top: 31.3%; width: 8.7%; }
  .art-melon { left: 50.5%; top: 38.8%; width: 30%; }
  .art-crab { left: 22.5%; top: 55%; width: 26%; }
  .art-steak { left: 18%; top: 68.2%; width: 31%; }
  .art-branch { left: 44.9%; top: 52.4%; width: 65%; }

  .editorial-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .more-link {
    display: flex;
    width: max-content;
    min-width: 73px;
    min-height: 44px;
    margin: 24px 32px 0 auto;
  }

  .contact-row--phone {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .decorative-strip {
    font-size: 200px;
  }

  .site-footer {
    padding-top: 16px;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 60px;
    width: 159px;
  }

  .footer-copy {
    order: -1;
  }

  .footer-meta {
    flex-direction: column;
    gap: 60px;
    width: 222px;
    margin-top: 60px;
    text-align: center;
  }

  .footer-policies {
    order: -1;
    justify-content: center;
    gap: 12px 20px;
  }

  .mobile-bar {
    position: fixed;
    z-index: 40;
    inset: auto 15px 0;
    display: grid;
    grid-template-columns: 1fr 15px 1fr;
    align-items: center;
    min-height: calc(48px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--color-ink);
    background: var(--color-paper);
    font-size: 15px;
    line-height: 1.5;
  }

  .mobile-bar button,
  .mobile-bar a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
  }

  .mobile-bar button {
    justify-content: flex-end;
    padding: 0 15px 0 0;
  }

  .mobile-bar a {
    justify-content: flex-start;
    padding-left: 15px;
  }

  .mobile-bar__divider {
    text-align: center;
  }

  #contact {
    scroll-margin-top: 110px;
  }
}

/* Also disable any added JavaScript motion when this preference is set. */
@media (prefers-reduced-motion: reduce) {
  .decorative-strip {
    animation: none !important;
    transform: none !important;
  }

  .mobile-bar button,
  .mobile-bar a {
    transition: none !important;
  }
}
```

This scaffold does not reproduce the original document height or the unexposed photo wrappers. The image coordinates assume closely trimmed artwork; transparent padding inside real files requires adjustment. The telephone size is an estimate. Menu behavior requires a separate accessible implementation.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-paper: #f5f4e9;
  --color-ink: #000000;
  --color-lemon: #f4ea90;
  --color-quiet: #edecdd;

  --font-sans: var(--font-interface);

  --text-body: var(--type-body);
  --text-section-label: var(--type-label);
  --text-section-title: var(--type-h2);
  --text-contact-title: var(--type-h3);
  --text-hero: var(--type-hero);
  --text-footer-statement: var(--type-footer);

  --spacing-brand-edge: var(--brand-edge);
  --spacing-section: var(--section-space);
  --spacing-text-gap: var(--text-gap);
  --spacing-contact-circle: var(--contact-circle);
}
```

## Sources & Evidence

- **Original and final page:** [https://at-e.jp/](https://at-e.jp/). The supplied browser record reports HTTP 200 and the title `アットイーズ株式会社`.
- **Capture time:** October 1, 2026, 15:31:32.016 UTC, equivalent to October 2, 2026, 00:31:32.016 JST.
- **Desktop evidence:** 1440 × 1000 viewport; original-page opening, middle, and contact/footer captures; rendered document height approximately 4613.73px.
- **Mobile evidence:** 390 × 844 viewport; original-page opening and contact/footer captures; rendered document height approximately 3635.44px.
- **Measured evidence:** supplied element rectangles, computed typography and colors, custom properties, link destinations, and text content. This is an excerpt rather than a complete stylesheet or asset inventory.
- **Capture protocol:** initial observation lasted at least five seconds. Readiness checks waited for document load, relevant finite motion, sampled layout/text stability, and visible image decoding, with a 15-second overall limit and a five-second pending-image limit. Scroll traversal allowed up to ten seconds per position. Perpetual animations were paused during readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Interaction scope:** different scroll positions were captured. No click-through, opened-menu sequence, hover sequence, form submission, telephone action, or LINE action was supplied for verification.
- **Limitations:** no additional browsing was performed. Exact source breakpoints, image URLs, pseudo-element styling, complete photography layout, delayed content, and animation timelines remain unverified. Desktop/mobile measurements describe the supplied current render, while estimated artwork placement and the reusable CSS are explicitly marked adaptations.