# YASUMI WORKS — Style Reference

> A workshop scrapbook of shaped photographs, mixed editorial lettering, and colorful everyday play.

**Website:** [yasumiworks.com](https://yasumiworks.com/)
**Original URL:** https://yasumiworks.com/
**Final URL:** https://yasumiworks.com/
**Response:** HTTP 200; original and final URLs are identical.
**Theme:** a light interface with cream, peach, blue, turquoise, and lavender section treatments; no theme selector was observed.
**Inspected:** supplied browser capture dated September 13, 2026, at 03:33 JST — September 12, 2026, at 18:33 UTC. Recorded retrieval timestamp: `2026-09-12T18:33:11.123Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage: opening collage, About introduction, four services, eleven store entries, recruitment feature, news, contact form, repeated brand ribbons, and illustrated footer. The About and Recruit destination pages were linked but not inspected.

YASUMI WORKS presents its experience and workshop business through a loose photographic collage supported by a consistent drawing language. Real hands, customized watches, handmade objects, and store interiors sit inside flower, arch, scalloped, and pinched frames. Small hearts, stars, toy animals, a gloved hand, and a maker at a desk connect the photographs without turning them into a regular grid.

Typography gives the playful artwork an adult editorial setting. Bodoni Moda supplies fine, high-contrast serif lettering; Montserrat introduces a geometric sans-serif voice; Courgette provides a handwritten accent. Japanese descriptions use a quieter gothic face and generous leading. Broad color fields organize a long homepage, while white store cards and plain form fields make practical tasks easy to identify.

The composition changes substantially on mobile. Photographs move into a new arrangement, the headline remains below the collage, desktop navigation becomes a compact menu control, and the store catalog becomes a single column. Preserve this deliberate rearrangement when adapting the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Measurements are CSS pixels unless stated otherwise.
- **Calculated** means arithmetic derived from those measurements, such as the gap between two cards.
- **Declared** means a source custom property was recorded. Its existence does not prove which visible element uses it.
- **Estimated** means a visual approximation from the supplied current-page screenshots. Estimated hexadecimal colors are implementation targets, not sampled pixel measurements.
- **Recommended** means guidance for a new implementation. This includes the Quick Start, intermediate breakpoints, accessible states, and replacement SVG geometry.
- Visual evidence consists of three desktop captures and two mobile captures. DOM measurements cover additional homepage sections, but the element sample does not include complete header, contact, footer, or image-style records.
- Loading and scrolling were part of the supplied inspection. No click-result evidence was supplied for menus, store cards, filters, news disclosures, or form submission.

## Tokens — Colors

### Default Palette

The names below are reusable aliases. Hashed names are the recorded source custom properties.

| Name | Value | Evidence | Role and implementation guidance |
| --- | --- | --- | --- |
| Main Cream | `#f7eed3` | Measured: hero and About backgrounds | Primary warm canvas. This is the correct measured opening background. |
| Charcoal | `#333333` | Measured text and selected filter fill; source `--s-color-7e9c8da2` | Main text, practical UI outlines, and dark drawing details. |
| White | `#ffffff` | Measured store cards and News background; source `--s-color-4c909bcf` | Cards, fields, white illustration areas, and quiet information surfaces. |
| Service Peach | `#fcd2b0` | Measured Service background; source `--s-color-d78829cc` | Large warm field behind the four service stories. |
| Recruit Blue | `#a6d8e3` | Measured Recruit background; source `--s-color-eabef5d4` | Cool section transition around the recruitment feature. |
| Recruit Cream | `#ffefd4` | Measured recruitment link panel; source `--s-color-f0ab0098` | A second, slightly different cream used inside the blue recruitment section. |
| Action Orange | `#f15a24` | Declared: `--s-color-67807e18`; visually consistent with orange accents | Suitable alias for the Contact capsule and orange frame accents. Their individual computed fills were not supplied. |
| Palette Lavender | `#cbccea` | Declared: `--s-color-caabd966` | Source-palette approximation for the repeated lavender brand ribbon. The ribbon's own computed fill is unavailable. |
| Spring Lime | `#e1e881` | Declared: `--s-color-40bacbe7`; visually consistent with selected illustrations | Small spring-like shapes and maker illustration accents. Exact asset-color mapping is unverified. |
| News Date Gray | `#969696` | Measured news dates | Subdued metadata; distinct from the main charcoal. |
| Coming-Soon Gray | `#959595` | Measured EC availability note | Secondary availability text. |
| News Link Blue | `#007cff` | Measured links within extracted news bodies | Rich-text link color. These bodies were not confirmed visually expanded. |

**Keep the two creams separate.** The recorded palette includes `#ffefd4`, but the opening section computes to `#f7eed3`. Replacing the opening cream with the recruitment panel token would lose a verified distinction.

The ribbon appears somewhat brighter in the screenshots than the declared lavender token. Use the declared token as a documented adaptation until the actual ribbon surface or asset can be measured. A transparent background on its sampled section does not describe the visible lavender layer beneath or within it.

### Supporting Illustration Colors

These are visual estimates from the current-page captures.

| Name | Approximate value | Visible use |
| --- | --- | --- |
| Contact Turquoise | `#9bd2d1` | Contact section and similarly colored frame or location-tab details |
| Frame Pink | `#f3a591` | Large flower-shaped photograph outline |
| Frame Amber | `#ffb238` | Watch arch and selected store-image outlines |
| Illustration Salmon | `#f4afa3` | Footer panels and heart interiors |
| Illustration Orange | `#ff9e54` | Diagonal-striped illustrated area visible below the mobile hero |
| Bright Yellow | `#ffec20` | A strong footer illustration panel and clothing accents |

These accents belong to the artwork and section composition. They do not establish separate semantic warning, success, or error colors. No such status palette was observed.

## Tokens — Typography

### Bodoni Moda — Editorial Display

- **Measured family:** `Bodoni Moda`.
- **Recorded source variable:** `--s-font-728d86ca`.
- **Measured weight:** `400`.
- **Roles:** the first and last hero lines, About, Service, Stores, News, recruitment lettering, and service numbers.
- **Character:** strong thick–thin contrast, delicate serifs, and a fashion-editorial presence.

Keep this face light in visual weight. Large size and contrast provide hierarchy without boldening the display lettering.

### Montserrat — Geometric Counterpoint

- **Measured family:** `Montserrat`.
- **Recorded source variable:** `--s-font-18b9e3f1`.
- **Measured weights:** `400` for the hero word `made`; `500` for store titles and the EC availability note.
- **Roles:** the geometric part of the hero sentence and practical English store naming.

Navigation looks consistent with this geometric sans-serif voice, but its actual font declaration was not included in the element sample.

### Courgette — Handwritten Accent

- **Measured family:** `Courgette`.
- **Recorded source variable:** `--s-font-d9a73f53`.
- **Measured weight:** `400`.
- **Verified role:** the hero word `into`.

The emphasis comes from a separate typeface. It should not be reproduced by applying a generic italic style to the surrounding serif.

### Japanese Gothic — Descriptions and Utility Text

- **Measured family:** `中ゴシックBBB JIS2004`.
- **Recorded source variable:** `--s-font-ea95fb01`.
- **Measured weights:** frequently `505` for descriptions, headings, and action labels; `400` for filters, activity tags, and some news body text.
- **Roles:** Japanese body copy, the hero subtitle, service headings, filters, store activity labels, and news.

Preserve the recorded `505` value when reproducing these styles; do not silently reinterpret it as a conventional bold weight. The resolved font file and its weight support were not independently inspected.

`Noto Sans JP` and `Zen Kaku Gothic New` also appear as declared font variables. No sampled content establishes them as the primary body face. The root element's Times declaration likewise does not describe the explicitly styled visible interface.

### Type Scale

All values in this table are measured. A dash indicates that the corresponding element was not measured.

| Role | Desktop size / line height | Mobile size / line height | Weight | Family |
| --- | --- | --- | --- | --- |
| Hero first and last lines | `64 / 64px` | `32 / 32px` | `400` | Bodoni Moda |
| Hero `made` | `56 / 56px` | `32 / 32px` | `400` | Montserrat |
| Hero `into` | `64 / 64px` | `32 / 32px` | `400` | Courgette |
| Hero Japanese subtitle | `23 / 33px` | `16 / 33px` | `505` | Japanese gothic |
| About, Service, Stores, News headings | `58 / 58px` | `32 / 32px` | `400` | Bodoni Moda |
| About Japanese lead | `24 / 43.2px` | `22 / 37.4px` | `505` | Japanese gothic |
| About and Service body | `15 / 31.5px` | `14 / 25.2px` | `505` | Japanese gothic |
| Service numbers | `24 / 24px` | `32 / 32px` | `400` | Bodoni Moda |
| Service headings | `20 / 36px` | `20 / 36px` | `505` | Japanese gothic |
| Oval action labels | `14 / 16.8px` | `13 / 15.6px` | `505` | Japanese gothic |
| Region filters | `15 / 15px` | `15 / 15px` | `400` | Japanese gothic |
| Store titles | `24 / 33.6px` | `20 / 28px` | `500` | Montserrat |
| Activity and location labels | `13 / 18.2px` | `13 / 18.2px` | `400` | Japanese gothic |
| Store `View more` | `11 / 13.2px` | `13 / 15.6px` | `505` | Japanese gothic |
| Recruit display label | `48 / 48px` | `28 / 28px` | `400` | Bodoni Moda |
| Recruit description | `16 / 25.6px` | `15 / 24px` | `505` | Japanese gothic |
| News dates | `13 / 18.2px` | `13 / 18.2px` | `505` | Japanese gothic |
| News item titles | `15 / 24px` | `14 / 25.2px` | `505` | Japanese gothic |
| Extracted news body | `15 / 24px` | `14 / 22.4px` | `400` | Japanese gothic |

Filter labels use measured tracking of `0.75px`, equivalent to `0.05em`. Most sampled text uses normal tracking.

The responsive scale is selective: service numbers and `View more` labels become larger on mobile, while body copy decreases only slightly. Do not apply one global scale factor to the whole interface.

## Tokens — Spacing & Shapes

### Spacing Scale

The source uses a conventional `16px` root. Repeated values support an adaptation based on `8, 12, 16, 24, 32, 48, 64, 80, 120, 160px`, but no global spacing-token system was supplied.

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero bottom padding | `64px` | `32px` | Measured section padding |
| Gap between `made` and `into` | `12px` | `8px` | Calculated from text rectangles |
| About body to oval action | `48px` | `24px` | Calculated |
| Service section padding | `120px 120px 160px` | `64px 32px 80px` | Measured |
| Service number to heading | `16px` | `8px` | Calculated |
| Service heading to body | `16px` | `8px` | Calculated |
| Service body to action | `32px` | `16px` | Calculated for the first three services |
| Store card padding | `16px 16px 32px` | `16px 16px 32px` | Measured |
| Store column gap | `32px` | One column | Calculated |
| Store row gap | `72px` | `48px` | Calculated between card surfaces |
| Filter anchor padding | `10px 20px` | `10px 20px` | Measured |
| Filter anchor separation | `12px` | `12px`, including wrapped rows | Calculated |
| Recruit section padding | `120px` | `64px 32px` | Measured |
| News section padding | `120px 80px 160px` | `64px 32px 80px` | Measured |

### Border Radius

| Element | Value or geometry | Evidence |
| --- | --- | --- |
| Store card surface | `24px` | Measured at both viewports |
| Recruitment feature | `16px` | Measured at both viewports |
| About and Service actions | `50%` | Measured; creates a true elongated ellipse |
| Contact navigation action | Capsule, approximately `20px` end radius | Screenshot estimate |
| Contact fields | Approximately `8px` | Screenshot estimate |
| Location tab | Rounded upper corners, approximately `8px` | Screenshot estimate |
| Hero photographs | Custom flower, arch, scalloped, and pinched contours | Visually observed; source paths unavailable |
| Section edges and footer cells | Square edges with thin rules | Visually observed |

**Filter geometry requires two levels of evidence.** Sampled filter anchors report `border-radius: 2px`, while the desktop capture shows a fully rounded outer capsule. The styling of its wrapper or pseudo-element was not supplied. For visual reproduction, use a capsule outline and retain this distinction in implementation notes.

Page rules and field borders appear approximately `1px`. Illustration outlines are generally around `1–3px`, while large desktop photograph frames appear around `4–7px`; these stroke widths are visual estimates.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | `10902.41px` | `13582.50px` |
| Hero section | `1440 × 921.73px` | `390 × 679.56px` |
| First headline origin | `x 128.66, y 597.92px` | `x 24, y 512.56px` |
| Ribbon sampled section | `1440 × 90.67px` | `780 × 43.55px`, positioned at `x −195px` |
| About section height | `1160px` | `1272.63px` |
| About body column | `580px` wide at `x 760px` | `326px` wide at `x 32px` |
| Service section height | `2988px` | `3053.17px` |
| Typical service body width | `458.75px`; third service `506px` | `244px` at `x 73px` |
| Store catalog occupied width | Approximately `991px` | `326px` |
| Store card width | `308.98px` | `326px` |
| First store-row card height | `462.55px` | First six cards: `461.78px` each |
| About/Service oval action | `202 × 59px` | `149 × 48px` |
| Recruitment feature | `1200 × 315.78px` | `326 × 383.09px` |
| News heading origin | `x 180px` | `x 32px` |
| News trigger width | `792.52px` | `324px` |

Document and section heights describe the captured content state. They are not recommended fixed heights for a CMS implementation.

## Components

### Persistent Header

**Role:** identity, primary navigation, and direct access to contact.

The desktop header places a compact black symbol-and-wordmark at the upper left and a single horizontal navigation group at the upper right. Visible labels are `Top`, `About`, `Service`, `Stores`, `Recruit`, and `Contact`. Contact is an orange capsule with a charcoal outline; the other links remain unboxed.

Desktop screenshot estimates place the logo near `x 42, y 46px`, about `140px` wide, and the Contact capsule near `x 1283, y 35px`, about `124 × 40px`. Navigation lettering is approximately `18–20px`.

On mobile, the logo is approximately `118px` wide near `x 16, y 24px`. Contact remains visible as an approximately `90 × 38px` capsule. A charcoal menu symbol made of three flattened, stacked oval strokes occupies the rightmost position. The full navigation row is absent from the visible mobile header.

The header remains at the same screen position in the supplied scrolled captures, consistent with a fixed overlay. Its actual positioning declaration was not included. It has no visible opaque full-width backing, so section colors and content remain visible behind it.

**Observed limitation:** the overlay crosses form content in the bottom captures, including the mobile name-label area. A new implementation should add anchor and focus clearance while preserving the lightweight header appearance. Menu opening, focus behavior, and link hover states remain unverified.

### Opening Photo Collage

**Role:** establishes the workshop experience through real objects, people, and spaces.

The desktop hero contains four main photographs distributed across an open cream field:

| Photograph | Desktop arrangement | Mobile arrangement |
| --- | --- | --- |
| Hands holding charm watches | Large pink flower frame at upper left | Smaller flower frame at middle left |
| Handmade objects in open boxes | Orange pinched frame across the center | Lower-right frame, directly above the headline |
| Two hanging watches | Amber arch at upper right | Upper-left photograph |
| Store interior with plant and display | Turquoise scalloped frame at lower right | Upper-right photograph |

Approximate visible desktop bounds are `394 × 411px` for the hands frame, `406 × 327px` for the central objects, `352 × 389px` for the watch arch, and `357 × 386px` for the interior. On mobile, the corresponding image groups are approximately `167–180px` wide. These are screenshot estimates of visible contours, not source image boxes.

The photographs retain natural indoor light, material texture, green foliage, and incidental background details. Their colored contours provide the graphic connection to the illustrations. Cropping should retain the hands, watch faces, handmade objects, and useful spatial context.

Decorations occupy the gaps between photographs: a person lifting a flower-shaped object, a watch-wearing hand, small toy animals, hearts, sparkles, a lime spring, and a large white starburst. They overlap some image edges and occasionally approach the lettering. Keep their layer order intentional and prevent decorative elements from capturing pointer input.

No carousel, photograph click action, parallax behavior, or hover transformation was established by the supplied evidence.

### Mixed-Type Hero Statement

**Role:** expresses the brand proposition without competing with the collage.

The current statement is arranged in three visual lines:

1. `Playful ideas,` — Bodoni Moda.
2. `made into` — Montserrat followed by Courgette.
3. `real experiences.` — Bodoni Moda.

The Japanese subtitle is `遊び心を、次の流行へ。`.

On desktop, the statement begins well below the upper photograph group, at approximately `x 129, y 598px`. The first and third lines are `64px`; `made` is `56px`; `into` returns to `64px`. The source keeps key word groups together with nonbreaking spaces.

On mobile, all three English faces use `32px`. Line starts occur at approximately `y 512.56`, `546.56`, and `580.56px`, giving a `34px` line-to-line step. The left inset is `24px`. The Japanese line follows in `16px` type with a `33px` line box.

The sampled source uses separate paragraph elements for the English fragments. **Recommended adaptation:** preserve the three-face styling inside one semantic `h1` so the proposition remains one coherent heading.

### Repeated Brand Ribbon

**Role:** provides a recognizable boundary between large sections.

A lavender strip repeats `YASUMI WORKS` in alternating serif, script, and geometric sans-serif treatments. Thin charcoal rules separate it from neighboring sections. Repetition continues beyond the viewport, with cropped words at the edges.

The sampled desktop section is `90.67px` high. On mobile it is `43.55px` high and `780px` wide, centered across the `390px` viewport with a left coordinate of `−195px`. This directly supports an oversized, horizontally clipped composition.

The ribbon appears after the hero, before Stores, and above the footer. Its visible lettering may be contained in artwork; the sampled section has no text, so do not assume each word is a live font element.

A marquee-like appearance is visible, but continuous scrolling, direction, speed, and pause behavior were not demonstrated. A static repeated strip is the evidence-supported starting point.

### About Introduction

**Role:** explains the company's approach to planning and operating experiences.

The desktop text sits in the right half of a cream section. Its heading begins at `x 760px`; the body is `580px` wide. The stack contains the English section title, a two-line Japanese lead, a long description with a short list, and an elliptical `もっとくわしく` link to `/about`.

Desktop body leading is notably generous: `15px` text on `31.5px` lines. The action follows the body after a calculated `48px` gap. The complete section is `1160px` high in the captured state.

On mobile, the text occupies a `326px` column with `32px` side margins. Body text becomes `14 / 25.2px`; the action is `149 × 48px` and follows after `24px`. The opening portion visible below the hero includes an orange diagonal-striped illustration with a small white cat. The complete illustration composition is not available in the supplied captures.

### Numbered Service Stories

**Role:** presents four business offerings with contextual actions.

A peach section contains a centered serif `Service` heading followed by four numbered blocks. Each text block contains a serif number, Japanese heading, description, and action or availability note.

The desktop text columns alternate sides: service 01 begins at `x 703.25px`, service 02 at `x 278px`, service 03 at `x 656px`, and service 04 at `x 278px`. This measured alternation supports a spacious sequence of paired content regions. The complete media treatment of each story was not supplied and should not be invented.

On mobile, all four descriptions align at `x 73px` in a `244px` column, inset within the section's `32px` outer padding. Numbers increase from `24px` to `32px`, while Japanese headings remain `20px`. The number-to-heading and heading-to-body gaps contract from `16px` to `8px`.

The offerings are workshops, space for opening workshops or shops, experience-content development with social-media marketing support, and EC operation. The first action targets `#stores`; the next two target `#contact`. The EC block includes `ECサイトはこちら` and `※Coming Soon`; no working EC destination is established by the recorded links.

### Elliptical Text Action

**Role:** secondary navigation and form submission.

The measured About and Service actions are transparent, elongated ellipses with `border-radius: 50%`, a small Japanese label, and an arrow detail. They measure `202 × 59px` on desktop and `149 × 48px` on mobile. Recorded content gaps are `12px` and `10px`, respectively.

The shape is more oval than the header Contact capsule. Preserve that distinction. The action should sit within the surrounding color field, using a fine charcoal edge without a shadow.

The contact submit control uses the same visual family but appears wider on mobile: approximately `175 × 47px`. Its dimensions are estimated from the screenshot rather than transferred from the measured navigation actions.

### Stores Heading and Region Filters

**Role:** introduces the catalog and offers geographic selection.

The desktop Stores heading sits at `x 80px`, above a full-width horizontal rule. A yellow star decoration crosses the rule near the right side. The catalog and filters use a narrower centered region below this section title.

The five region controls are `すべての店舗`, `東京`, `名古屋`, `大阪`, and `京都`. The first is selected in the capture, using charcoal fill and white lettering. Other filters have white fill, dark text, and a fine capsule outline.

Measured inner anchor heights are `35px`, with `10px 20px` padding. Text is `15px` with `0.05em` tracking at both viewports. On mobile, the first three controls share one row; Osaka and Kyoto wrap onto a second row. Their size remains stable instead of shrinking to fit one line.

The recorded region links use a query parameter and the `#pref` anchor. For example, Tokyo points to `/?DMnpHvFs=yUIPXEKj#pref`. This establishes link destinations, but not whether activation reloads the page, updates the catalog in place, or animates the result.

### Store Card

**Role:** presents a location and its available creative activities.

The current catalog contains eleven entries. Desktop uses three columns; mobile uses one column.

The visible anatomy is:

1. A turquoise location tab protruding above the upper-left card edge, with a small location-pin symbol and city label.
2. A white surface with measured `24px` corners and `16px 16px 32px` padding.
3. A large, approximately square artwork area containing a custom-shaped photo frame or availability graphic.
4. A Montserrat store title.
5. One or more small outlined activity capsules.
6. A compact `View more` affordance near the bottom.

The first desktop row measures approximately `308.98 × 462.55px` per card, separated by `32px`. Card title text begins `32px` inside the surface, showing an additional inset beyond the outer `16px` padding. On mobile, cards are `326px` wide, and titles begin `24px` inside the card at `x 56px`.

Store titles use `24 / 33.6px` on desktop and `20 / 28px` on mobile. The wider mobile card and smaller title allow names that wrap on desktop to fit on one line. Activity labels remain `13 / 18.2px`. `View more` grows from `11px` to `13px` on mobile.

The first card uses a centered `Coming Soon!` graphic inside a pink frame with inward-curving sides. The next visible cards show a T-shirt workshop interior and hands holding decorated perfume charms, each with a different frame contour.

Desktop cards stretch to a shared height within a row. Later rows measure approximately `500.73px` and `581.70px`, reflecting longer activity lists. Mobile heights vary independently, reaching approximately `602.53px` for Kyoto. Allow content-driven height rather than fixing every card to the first row.

**Interaction evidence:** sampled store cards are buttons. No resulting dialog, detail panel, booking interface, or navigation was captured. The destination behavior must be established separately.

### Recruitment Feature

**Role:** provides a distinct route into hiring information.

A measured blue section surrounds a cream linked feature. The desktop feature is `1200 × 315.78px`, with `16px` corners and a recorded `64px` internal gap. On mobile it becomes `326 × 383.09px`, retaining the same radius while changing the internal gap to `40px`.

The text group contains a Bodoni Moda `Recruit` label, a short Japanese invitation, and `さらに詳しく`. The complete feature links to `/recruit`. The display label changes from `48px` to `28px`; its Japanese copy changes from `16 / 25.6px` to `15 / 24px`.

The unshown media region cannot be characterized from the text measurements alone. Reuse the measured container relationship and text hierarchy without inventing its artwork.

### News List

**Role:** publishes dated announcements and press references.

News occupies a white section. Desktop separates the `58px` serif heading at `x 180px` from a list beginning at `x 466.48px`. Each entry has a button containing a date and title, with associated rich text present in the extraction. Short desktop triggers are `72px` high; a longer title produces a `96px` trigger.

Dates use gray `13px` text and a measured `92px` text box. Desktop titles sit beside them in `15 / 24px` type. On mobile, dates stack above titles; the list uses nearly the full `326px` content width, and short triggers grow to approximately `116.56px` high. A long title reaches approximately `166.94px`.

The page includes `もっと読み込む` after the initial five announcements. Its activation was not tested.

**Visibility limitation:** extracted news body rectangles overlap subsequent trigger positions. Those bodies may belong to clipped or closed disclosure regions. Their presence in extracted text does not prove they were all visibly expanded. Opening behavior, indicator graphics, and expanded-panel styling remain unverified.

### Contact Form

**Role:** collects space-rental, shop-opening, and general inquiries.

The visible form sits directly on a turquoise section. White fields have thin charcoal borders and small rounded corners. It contains `お名前`, `メールアドレス`, an inquiry-type group labeled `お問い合わせ項目`, and a textarea labeled `お問い合わせ詳細`.

The two radio options are `場所貸し・出店希望のお問い合わせ` and `その他お問い合わせ`. The submit control reads `送信する` with a small diagonal arrow.

In the mobile screenshot, the fields span approximately `310px` between `40px` side margins. Single-line fields are about `43px` high, and the textarea is about `134px` high. The submit ellipse sits about `33px` below the textarea. These are screenshot estimates; field typography, required attributes, and validation rules were not included in the computed-style sample.

The desktop bottom capture shows a `500px`-wide textarea region on the right, with approximately `160px` visible height, followed by an approximately `202 × 59px` submit ellipse. The field's top edge meets the screenshot boundary, so the full form layout cannot be reconstructed from this crop.

The captured state is empty. Submission, errors, success feedback, radio selection, and keyboard focus were not exercised.

### Illustrated Footer

**Role:** closes the page with a dense, memorable expression of the brand.

A lavender brand ribbon separates the contact section from a full-width illustration mosaic. The mosaic has two rows, thin charcoal dividers, and no gutters.

The upper row has three main regions: a large white brand panel at left, a bright yellow panel with alternating blue-and-white spring discs, and a blue panel with a painter's palette. The lower row has five regions: a person making something at a desk, an orange double-lobed shape, a green potted plant against an orange grid, a miniature shop scene, and a white cat beside a hand.

The approximate upper-row width distribution is `52% / 25% / 23%`; the lower row is roughly `35% / 14% / 15% / 15% / 21%`. These proportions are screenshot estimates.

The entire mural remains recognizable on mobile and appears to scale as one composition: approximately `455px` tall at desktop width and `125px` tall at mobile width. Whether it is one composite asset or several arranged assets is unverified.

A separate white strip below contains centered `©YASUMI WORKS`. The observed footer does not add a large secondary navigation directory.

## Tokens — Motion & Interaction

### Recorded Transition Values

| Element or treatment | Recorded value | What the evidence establishes |
| --- | --- | --- |
| Most sampled sections, text, links, and cards | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A common transition declaration; changed properties and triggers are not established. |
| Body background | `0.5s cubic-bezier(0.4, 0.4, 0, 1)` | A background transition exists; no theme-switching interaction was observed. |
| Ribbon sampled section | `0.3s linear` | A transition declaration, not evidence of an infinite marquee. |
| Desktop News heading wrapper | `0.6s ease-out 0.4s` | A longer transition with delay; reveal direction and trigger are unknown. |
| Mobile News heading wrapper | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A different responsive declaration. |
| News item buttons | `0.4s cubic-bezier(0.4, 0.4, 0, 1)` | A transition on the controls; disclosure behavior was not tested. |
| Sampled element animations | `animation: none` | No CSS keyframe animation on those sampled elements at capture time. |

The repeated `--g-angle`, `--g-color-*`, and `--g-position-*` transition entries are not proof of visible gradient animation. The captured design is organized around flat color fields.

The inspection waited for finite motion and layout stability, and temporarily paused perpetual animations during readiness checks. This process does not identify animation timing or prove that unsampled descendants, pseudo-elements, SVGs, or scripts are static.

### Interaction Evidence and Limits

| Control | Verified | Unverified |
| --- | --- | --- |
| Main navigation | Labels and recorded page/anchor destinations | Hover treatment, smooth-scroll timing, active-section state |
| Mobile menu | Closed menu symbol is visible | Open state, animation, dismissal, keyboard handling |
| Region filters | Default selected appearance and query-based links | Result updates, loading, persistence, URL history behavior |
| Store cards | Button elements and `View more` affordance | Resulting detail experience |
| News | Button headings, associated extracted content, load-more label | Open/close behavior and additional loading |
| Contact | Empty fields, radio options, submit control | Validation, sending, error and success states |

**Recommended motion approach:** use brief color or outline feedback with the recorded easing, keep decorative movement optional, and provide reduced-motion behavior. Choose any new ribbon or illustration animation deliberately and document it as an addition.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Hero and About | Measured cream `#f7eed3` | Warm, open setting for collage and brand narrative |
| Service | Measured peach `#fcd2b0` | Separates the four offerings as one sequence |
| Stores | Visually cream with white cards | Combines playful imagery with a scannable catalog |
| Recruit | Measured blue with a second cream panel | Marks hiring as a distinct destination |
| News | Measured white | Quieter setting for dates and longer information |
| Contact | Estimated turquoise with white fields | Makes the form a clear final task area |
| Brand ribbons | Lavender, repeated lettering, thin rules | Recurring section boundary |
| Footer | Bright illustrated cells followed by white copyright strip | Dense brand close |

No general shadow-elevation system is visible. Separation comes from solid fills, linework, rounded card edges, and custom image contours. Large section surfaces remain flat and full width.

## Imagery

The identity depends on the relationship between natural photography and flat outlined illustration. Photographs show materials and social activity; illustrations give those ordinary scenes a playful frame.

Use images with believable workshop detail: hands displaying customized objects, small handmade pieces, tabletops, indoor greenery, and approachable store interiors. Preserve material texture and natural color. The current photographs do not use a uniform duotone, halftone, or pixelated treatment.

The drawings use dark contours, broad flat fills, simplified faces, oversized hands, small domestic objects, and uneven organic geometry. Decorative vocabulary repeats across the page: lobed shapes, hearts, stars, flowers, cats, springs, plants, and making tools.

### Observed Asset References

Complete original image URLs were not provided. Some mobile DOM strings contain truncated background-image references, which are insufficient to identify usable files.

| Asset group | Observed treatment | Reference status |
| --- | --- | --- |
| Header identity | Black abstract symbols with stacked wordmark | Visible in desktop and mobile captures; complete asset URL unavailable |
| Four hero photographs | Distinct custom contours with colored borders | Visible at both viewports; complete asset URLs unavailable |
| Hero decorations | Flat outlined people, objects, hearts, stars, and toys | Visible at both viewports; formats and animation behavior unknown |
| Brand ribbon | Repeated mixed-style wordmarks on lavender | Visible in multiple sections; implementation format unknown |
| Store artwork | Shaped photography and a framed availability graphic | Desktop examples visible; individual file references incomplete |
| Footer mosaic | Two rows of adjoining illustrated cells | Visible at both viewports; composite-versus-separate implementation unknown |

**Recommended implementation:** use authorized artwork when available. For newly authored image frames, clip the photograph with an SVG path and draw a second instance of that same path as the colored outline. A regular CSS border on a clipped rectangle will not reliably trace a flower or pinched contour.

## Layout & Responsive Behavior

The homepage remains a normal long scrolling document. Its order is hero, ribbon, About, Service, ribbon, Stores, Recruit, News, Contact, ribbon, illustrated footer, and copyright.

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Full link row and orange Contact capsule | Logo, Contact capsule, and stacked-oval menu control |
| Hero media | Hands left, handmade objects center, two image groups right | Watches and interior above hands and handmade objects |
| Hero copy | Large lower-left statement sharing space with right-side art | Smaller three-line statement below the main image cluster |
| About | Right-side text column | Single text column after the opening illustrated region |
| Service text | Alternates horizontal position across four stories | All descriptions align in the same narrow column |
| Region filters | One row | Two wrapped rows with unchanged label size |
| Store cards | Three columns with equal height within each row | One column with independent content-driven heights |
| Recruitment | Wide linked panel | Taller, narrow linked panel |
| News | Heading beside list; date beside title | Heading above list; date above title |
| Contact | Visible form region occupies the right side | Fields occupy a centered `310px` region |
| Footer art | Full-width two-row mural | Same recognizable two-row composition scaled down |

The mobile hero ends at approximately `680px`, so the first ribbon and the start of the next illustrated section are visible within the `844px` viewport. It is not forced to fill the entire screen height. The desktop hero similarly ends near `922px` within the `1000px` viewport.

The store catalog accounts for much of the additional mobile document length. Mobile cards are actually wider than individual desktop cards, even though the page is narrower. Preserve that useful image size instead of squeezing the desktop grid into two phone columns.

A source fragment shows a `max-width: 1080px` media query for conditional line breaks. It does not establish the switch point for every component. Only the two supplied viewport layouts are measured; tablet, landscape, intermediate widths, zoom, and safe-area behavior remain unverified.

**Recommended interpolation:** select breakpoints by content fit, retain separate mobile collage positions, and keep content heights automatic. The Quick Start uses `900px` as an adaptation breakpoint and does not claim it is the site's original breakpoint.

## Do’s and Don’ts

### Do

- Use measured `#f7eed3` for the opening cream canvas.
- Preserve the separate cream used inside the recruitment feature.
- Combine Bodoni Moda, Montserrat, and Courgette according to their specific roles.
- Keep Japanese descriptions calm, readable, and generously spaced.
- Give each major photograph a distinct contour and a deliberately chosen crop.
- Reuse a small vocabulary of hearts, stars, lobed shapes, cats, plants, and making tools.
- Reserve clear negative space for the headline within the collage.
- Rearrange the four photographs for mobile.
- Keep Contact visible in the compact mobile header.
- Use white `24px`-radius store cards, protruding city tabs, and small outlined activity labels.
- Let filters wrap and card heights respond to their content.
- Finish with the dense two-row illustration mural and a quiet copyright strip.

### Don't

- Don't replace all shaped frames with identical rounded rectangles.
- Don't flatten the hero's three typefaces into one font or a generic italic treatment.
- Don't scale the entire desktop layout down as a single mobile image.
- Don't apply shadows, glass blur, or glossy gradients to every surface.
- Don't treat every illustration color as a functional UI status color.
- Don't infer a carousel, parallax effect, or continuous marquee from a still capture.
- Don't invent store dialogs, booking flows, or form-confirmation screens as observed features.
- Don't copy the sampled `2px` filter-anchor radius as the final visible capsule geometry.
- Don't fix every store card to the same global height.
- Don't allow decorative artwork or persistent navigation to obstruct essential text and controls.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the current site.

- Build the hero proposition as one semantic heading with styled spans and a separate Japanese subtitle.
- Give the menu control an accessible name and implement its expanded state, dismissal, and keyboard behavior explicitly. A native disclosure is an option if its behavior fits the intended navigation.
- Preserve heading structure within store entries and choose links or buttons according to the verified destination behavior. Avoid nested interactive controls.
- Provide clear selected-state semantics for region filters and retain the selection in the URL where appropriate.
- Add visible keyboard focus indicators and at least `44px` touch targets. The captured filter and header capsules are visually smaller, so target enlargement is an intentional improvement.
- Add scroll and focus clearance for the persistent header, especially around the contact form.
- Associate every field with a label, group the radio options with a fieldset and legend, and provide explicit validation and submission feedback.
- Review the low-contrast gray metadata before reusing it for essential information. The recorded gray values are observations, not accessibility endorsements.
- Keep decorative SVGs out of the accessibility tree and provide meaningful alternatives for informative workshop photography.
- Reserve media dimensions to prevent layout shifts. Prioritize visible hero images and load lower catalog artwork progressively.
- Provide a static ribbon and illustration state for reduced-motion preferences; add a pause mechanism if continuous decorative motion is introduced.

## Agent Prompt Guide

### Quick Color Reference

- Main opening cream: measured `#f7eed3`.
- Main text and linework: measured `#333333`.
- Service peach: measured `#fcd2b0`.
- Recruitment surround: measured `#a6d8e3`.
- Recruitment panel: measured `#ffefd4`.
- Orange accent: declared `#f15a24`, visually consistent with Contact.
- Lavender ribbon adaptation: declared `#cbccea`; actual ribbon fill is unmeasured.
- Contact turquoise adaptation: estimated `#9bd2d1`.
- Store cards and fields: white.

### Overall Prompt

“Create a Japanese workshop-company homepage inspired by the current YASUMI WORKS page. Use a warm cream opening canvas, charcoal text, and natural photographs of hands, customized objects, and inviting store interiors. Arrange four photographs inside different flower, arch, scalloped, and pinched contours with pink, orange, amber, and turquoise outlines. Add a restrained set of flat outlined hearts, stars, cats, springs, and maker illustrations. Place a three-line statement below the upper collage using Bodoni Moda, Montserrat, and a Courgette accent. Continue with a company introduction, a peach sequence of four services, a region-filtered store catalog, a blue recruitment feature, white news area, turquoise contact form, repeated lavender brand ribbons, and a two-row illustrated footer. Recompose the hero on mobile and use one generous store-card column.”

### Example Component Prompts

1. **Hero:** “Arrange four workshop photographs asymmetrically on cream `#f7eed3`. Put the hands-and-watches flower frame at desktop left, handmade objects in the middle, and the watch arch and interior frame at right. On a 390px phone, move the watch arch and interior to the upper row and the other photographs beneath. Keep the mixed-font headline below the main photo group.”
2. **Typography:** “Set `Playful ideas,` and `real experiences.` in regular Bodoni Moda, `made` in Montserrat, and `into` in Courgette. Use 64px serif/script and 56px sans on desktop, then 32px for all three on mobile. Add `遊び心を、次の流行へ。` in quiet Japanese gothic lettering.”
3. **Store card:** “Create a white card with 24px corners, a city tab protruding above its left edge, a large shaped photograph, a Montserrat location title, outlined Japanese activity capsules, and a small View more action. Use three desktop columns with 32px gaps and a single 326px-wide column at a 390px viewport. Allow long activity lists to increase height.”
4. **Section action:** “Draw a thin charcoal ellipse with transparent fill, a small Japanese action label, and a diagonal arrow. Target 202 × 59px on desktop and 149 × 48px for mobile content navigation. Keep its outline crisp and its surface flat.”
5. **Contact:** “Place labeled white fields directly on an estimated turquoise `#9bd2d1` field. On mobile use 40px side margins, a 310px form width, two radio options, a rounded textarea, and a centered outlined submit ellipse. Include accessible labels, focus clearance, and explicit result states as new implementation features.”
6. **Footer:** “Build a full-width two-row illustration mural with thin dark cell dividers and no gutters. Give the upper-left cell a large wordmark, then add a spring and painter's palette. Fill the lower cells with a maker, an orange lobed shape, a potted plant, a miniature shop, and a cat. Preserve the entire arrangement when scaling to mobile.”

## Quick Start

### CSS Custom Properties

This is a recommended visual adaptation, not recovered source CSS. It combines measured endpoint typography, spacing, and card geometry with explicitly estimated header, contact, and artwork values. The `900px` breakpoint, intermediate sizing, hover inversion, and focus treatment are recommendations.

Load appropriate font assets separately; font-family declarations do not download fonts. The fallback stack is an implementation choice. The CSS provides the visual shell; menus, filtering, store details, news loading, and form delivery still require defined behavior.

```css
:root {
  /* Measured colors */
  --yw-paper: #f7eed3;
  --yw-ink: #333333;
  --yw-white: #ffffff;
  --yw-peach: #fcd2b0;
  --yw-recruit-blue: #a6d8e3;
  --yw-recruit-paper: #ffefd4;
  --yw-date: #969696;

  /* Declared palette values used as adaptation tokens */
  --yw-orange: #f15a24;
  --yw-lavender: #cbccea;
  --yw-lime: #e1e881;

  /* Screenshot estimates */
  --yw-contact: #9bd2d1;
  --yw-pink: #f3a591;
  --yw-amber: #ffb238;

  /* Verified primary families; recommended fallbacks */
  --yw-display: 'Bodoni Moda', Georgia, serif;
  --yw-sans: 'Montserrat', Arial, sans-serif;
  --yw-script: 'Courgette', cursive;
  --yw-jp: '中ゴシックBBB JIS2004', 'Noto Sans JP', sans-serif;

  /* Measured desktop endpoints */
  --yw-text-hero: 64px;
  --yw-text-hero-sans: 56px;
  --yw-text-section: 58px;
  --yw-text-body: 15px;
  --yw-leading-body: 2.1;
  --yw-text-store: 24px;
  --yw-text-number: 24px;
  --yw-text-action: 14px;
  --yw-text-more: 11px;

  --yw-space-8: 8px;
  --yw-space-12: 12px;
  --yw-space-16: 16px;
  --yw-space-24: 24px;
  --yw-space-32: 32px;
  --yw-space-48: 48px;
  --yw-space-64: 64px;
  --yw-space-80: 80px;
  --yw-space-120: 120px;
  --yw-space-160: 160px;

  --yw-radius-card: 24px;
  --yw-radius-feature: 16px;
  --yw-radius-field: 8px; /* Estimated */
  --yw-rule: 1px;
  --yw-ease: cubic-bezier(0.4, 0.4, 0, 1);
  --yw-feedback: 300ms;
  --yw-header-clearance: 104px; /* Recommended */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--yw-ink);
  background: var(--yw-paper);
  font-family: var(--yw-jp);
}

button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { max-inline-size: 100%; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--yw-header-clearance); }

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

.yw-section-title {
  margin: 0;
  font: 400 var(--yw-text-section)/1 var(--yw-display);
}

.yw-copy {
  font-size: var(--yw-text-body);
  line-height: var(--yw-leading-body);
  font-weight: 505;
}

/* Approximate persistent header */
.yw-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 35px 32px 0 40px;
  pointer-events: none;
}

.yw-header > * { pointer-events: auto; }
.yw-logo { display: block; inline-size: 142px; }
.yw-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.yw-nav a { color: inherit; text-decoration: none; font: 500 18px/1.2 var(--yw-sans); }

.yw-contact-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-block-size: 40px;
  padding: 6px 24px;
  border: 2px solid var(--yw-ink);
  border-radius: 999px;
  background: var(--yw-orange);
  color: var(--yw-ink);
  text-decoration: none;
  font: 500 18px/1.2 var(--yw-sans);
}

.yw-menu-toggle { display: none; }

/* Hero placement is an approximation of the two captured compositions. */
.yw-hero {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(680px, 64.01vw, 922px);
  overflow: clip;
  background: var(--yw-paper);
}

.yw-hero-copy {
  position: absolute;
  z-index: 3;
  inset-inline-start: 8.935%;
  inset-block-end: 83px;
}

.yw-hero-title { margin: 0; font: 400 var(--yw-text-hero)/1 var(--yw-display); }
.yw-hero-title > span { display: block; }
.yw-hero-title .yw-middle { display: flex; align-items: baseline; gap: 12px; }
.yw-hero-title .yw-made { font: 400 var(--yw-text-hero-sans)/1 var(--yw-sans); }
.yw-hero-title .yw-into { font-family: var(--yw-script); }
.yw-hero-subtitle { margin: 16px 0 0; font-size: 23px; line-height: 33px; font-weight: 505; }

.yw-photo { position: absolute; margin: 0; }
.yw-photo > svg { display: block; inline-size: 100%; block-size: 100%; }
.yw-photo--hands { left: 6.4%; top: 9.3%; width: 27.4%; height: 44.6%; }
.yw-photo--objects { left: 35.9%; top: 20.2%; width: 28.3%; height: 35.5%; }
.yw-photo--watches { left: 68.5%; top: 8.8%; width: 24.5%; height: 42.2%; }
.yw-photo--interior { left: 67.6%; top: 52.6%; width: 24.8%; height: 41.9%; }
.yw-sticker { position: absolute; z-index: 2; pointer-events: none; }

/* Static ribbon; no unverified continuous motion is added. */
.yw-ribbon {
  display: flex;
  align-items: center;
  block-size: 92.67px;
  overflow: hidden;
  border-block: var(--yw-rule) solid var(--yw-ink);
  background: var(--yw-lavender);
}

.yw-ribbon-track { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.yw-ribbon-serif { font: 400 40px/1 var(--yw-display); }
.yw-ribbon-script { font: 400 48px/1 var(--yw-script); }
.yw-ribbon-sans { font: 400 40px/1 var(--yw-sans); }

.yw-service { padding: 120px 120px 160px; background: var(--yw-peach); }
.yw-service > .yw-section-title { text-align: center; }
.yw-service-number { font: 400 var(--yw-text-number)/1 var(--yw-display); }
.yw-service-heading { margin: 16px 0; font-size: 20px; line-height: 1.8; font-weight: 505; }

.yw-oval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  inline-size: 202px;
  min-block-size: 59px;
  padding: 12px 20px;
  border: var(--yw-rule) solid currentColor;
  border-radius: 50%;
  color: var(--yw-ink);
  background: transparent;
  text-decoration: none;
  font-size: var(--yw-text-action);
  line-height: 1.2;
  cursor: pointer;
  transition: color var(--yw-feedback) var(--yw-ease), background-color var(--yw-feedback) var(--yw-ease);
}

/* Recommended hover feedback; the original hover result was not supplied. */
@media (hover: hover) {
  .yw-oval:hover { color: var(--yw-paper); background: var(--yw-ink); }
}

.yw-store-container { inline-size: min(992px, calc(100% - 64px)); margin-inline: auto; }
.yw-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 72px; }

.yw-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: var(--yw-rule) solid var(--yw-ink);
  border-radius: 999px;
  background: var(--yw-white);
  color: var(--yw-ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.yw-filter[aria-current='true'] { color: var(--yw-white); background: var(--yw-ink); }
.yw-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 32px; }

.yw-store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 16px 16px 32px;
  border-radius: var(--yw-radius-card);
  background: var(--yw-white);
}

.yw-place {
  position: absolute;
  left: 20px;
  top: -28px;
  padding: 5px 10px;
  border-radius: 8px 8px 0 0;
  background: var(--yw-contact);
  font-size: 13px;
  line-height: 18px;
}

/* Use an authorized framed composite or an SVG-clipped photograph here. */
.yw-store-media { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: contain; }
.yw-store-body { display: flex; flex: 1; flex-direction: column; padding-inline: 16px; }
.yw-store-title { margin: 8px 0 16px; font: 500 var(--yw-text-store)/1.4 var(--yw-sans); overflow-wrap: anywhere; }
.yw-tags { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.yw-tag { padding: 4px 12px; border: var(--yw-rule) solid var(--yw-ink); border-radius: 999px; font-size: 13px; line-height: 1.4; }
.yw-more { margin-top: auto; padding-top: 24px; font-size: var(--yw-text-more); line-height: 1.2; color: inherit; }

.yw-recruit { padding: 120px; background: var(--yw-recruit-blue); }
.yw-recruit-feature { display: flex; gap: 64px; border-radius: 16px; background: var(--yw-recruit-paper); color: inherit; text-decoration: none; }
.yw-recruit-copy { padding: 42px; }
.yw-recruit-title { margin: 0 0 16px; font: 400 48px/1 var(--yw-display); }

.yw-news { padding: 120px 80px 160px; background: var(--yw-white); }
.yw-news-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 80px; max-inline-size: 1080px; margin-inline: auto; }
.yw-news-trigger { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; min-block-size: 72px; padding: 24px; }
.yw-news-date { color: var(--yw-date); font-size: 13px; line-height: 1.4; }
.yw-news-title { font-size: 15px; line-height: 1.6; }

/* Contact geometry is adapted from screenshot estimates. */
.yw-contact { padding: 120px 40px; background: var(--yw-contact); }
.yw-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 64px; max-inline-size: 960px; margin-inline: auto; }
.yw-contact-form { display: grid; gap: 20px; min-inline-size: 0; }
.yw-field { display: grid; gap: 8px; }
.yw-field label, .yw-contact-form legend { font-size: 15px; line-height: 1.6; }

.yw-input, .yw-textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 12px;
  border: var(--yw-rule) solid var(--yw-ink);
  border-radius: var(--yw-radius-field);
  color: var(--yw-ink);
  background: var(--yw-white);
  font-size: 16px;
  scroll-margin-top: var(--yw-header-clearance);
}

.yw-textarea { min-block-size: 160px; resize: vertical; }
.yw-contact-form fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.yw-radio-label { display: flex; align-items: center; gap: 8px; min-block-size: 44px; }
.yw-radio-label input { accent-color: var(--yw-ink); }
.yw-submit { margin: 24px auto 0; }

.yw-footer-art { display: block; inline-size: 100%; block-size: auto; }
.yw-copyright { margin: 0; padding: 24px; background: var(--yw-white); text-align: center; font-size: 14px; line-height: 20px; }

@media (max-width: 899px) {
  :root {
    --yw-text-hero: 32px;
    --yw-text-hero-sans: 32px;
    --yw-text-section: 32px;
    --yw-text-body: 14px;
    --yw-leading-body: 1.8;
    --yw-text-store: 20px;
    --yw-text-number: 32px;
    --yw-text-action: 13px;
    --yw-text-more: 13px;
    --yw-header-clearance: 80px;
  }

  .yw-header { padding: 16px 16px 0; gap: 12px; }
  .yw-logo { inline-size: 118px; }
  .yw-nav { display: none; }
  .yw-contact-link { margin-left: auto; min-block-size: 44px; padding-inline: 16px; font-size: 14px; border-width: 1px; }
  .yw-menu-toggle { display: grid; align-content: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .yw-menu-toggle span { display: block; inline-size: 42px; block-size: 9px; border-radius: 50%; background: var(--yw-ink); }

  .yw-hero { min-block-size: 680px; }
  .yw-hero-copy { left: 24px; right: 24px; bottom: 32px; }
  .yw-hero-title .yw-middle { gap: 8px; margin-block: 2px; }
  .yw-hero-subtitle { margin-top: 2px; font-size: 16px; }
  .yw-photo--watches { left: 6%; top: 9.5%; width: 43%; height: 27%; }
  .yw-photo--interior { left: 51%; top: 14%; width: 43%; height: 26%; }
  .yw-photo--hands { left: 6.5%; top: 39.5%; width: 43%; height: 26%; }
  .yw-photo--objects { left: 49%; top: 53%; width: 46%; height: 22%; }

  .yw-ribbon { block-size: 45.55px; }
  .yw-ribbon-serif, .yw-ribbon-sans { font-size: 20px; }
  .yw-ribbon-script { font-size: 24px; }
  .yw-service, .yw-news { padding: 64px 32px 80px; }
  .yw-service-heading { margin-block: 8px; }
  .yw-oval { inline-size: 149px; min-block-size: 48px; gap: 10px; padding-inline: 16px; }
  .yw-filters { margin-block: 32px 56px; }
  .yw-store-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .yw-store-body { padding-inline: 8px; }
  .yw-tags { row-gap: 7px; }
  .yw-recruit { padding: 64px 32px; }
  .yw-recruit-feature { flex-direction: column; gap: 40px; }
  .yw-recruit-copy { padding: 25px; }
  .yw-recruit-title { font-size: 28px; }
  .yw-news-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .yw-news-trigger { grid-template-columns: minmax(0, 1fr) auto; }
  .yw-news-date { grid-column: 1; }
  .yw-news-title { grid-column: 1; font-size: 14px; line-height: 1.8; }
  .yw-contact { padding: 64px 40px; }
  .yw-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .yw-contact .yw-section-title { text-align: center; }
  .yw-textarea { min-block-size: 134px; }
  .yw-submit { inline-size: 175px; }
  .yw-copyright { padding: 12px; font-size: 13px; line-height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .yw-oval { transition: none; }
  .yw-ribbon-track, .yw-sticker { animation: none !important; }
}
```

The hero's absolute positions provide an initial composition at the two inspected widths. Adjust them against real assets and content at intermediate widths. Service-media arrangements and footer artwork must be supplied separately; the CSS does not invent missing original assets.

### Example Markup and Shape Construction

The headline below reproduces the current text hierarchy with a recommended semantic structure. The arch path is newly authored example geometry, not an extracted original path. Replace `your-workshop-photo.jpg` with an appropriate project asset and use unique SVG IDs for repeated instances.

```html
<div class="yw-hero-copy">
  <h1 class="yw-hero-title">
    <span>Playful ideas,</span>
    <span class="yw-middle">
      <span class="yw-made">made</span>
      <span class="yw-into">into</span>
    </span>
    <span>real experiences.</span>
  </h1>
  <p class="yw-hero-subtitle" lang="ja">遊び心を、次の流行へ。</p>
</div>

<svg viewBox="0 0 300 360" role="img" aria-labelledby="watch-photo-title">
  <title id="watch-photo-title">Customized watches displayed in a workshop</title>
  <defs>
    <path id="watch-arch-path" d="M12 348V156a138 138 0 0 1 276 0v192Z" />
    <clipPath id="watch-arch-clip">
      <use href="#watch-arch-path" />
    </clipPath>
  </defs>
  <image href="your-workshop-photo.jpg"
    width="300" height="360"
    preserveAspectRatio="xMidYMid slice"
    clip-path="url(#watch-arch-clip)" />
  <use href="#watch-arch-path"
    fill="none" stroke="var(--yw-amber, #ffb238)"
    stroke-width="4" />
</svg>
```

Use distinct paths for the flower, scalloped, and pinched frames. Keep the photograph clip and outline synchronized by referencing the same geometry.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--yw-paper);
  --color-ink: var(--yw-ink);
  --color-peach: var(--yw-peach);
  --color-recruit-blue: var(--yw-recruit-blue);
  --color-recruit-paper: var(--yw-recruit-paper);
  --color-action-orange: var(--yw-orange);
  --color-ribbon: var(--yw-lavender);
  --color-contact: var(--yw-contact);

  --font-display: var(--yw-display);
  --font-geometric: var(--yw-sans);
  --font-script: var(--yw-script);
  --font-japanese: var(--yw-jp);

  --text-hero: var(--yw-text-hero);
  --text-section: var(--yw-text-section);
  --text-body: var(--yw-text-body);
  --text-store: var(--yw-text-store);
  --text-action: var(--yw-text-action);

  --radius-store: var(--yw-radius-card);
  --radius-feature: var(--yw-radius-feature);
  --radius-field: var(--yw-radius-field);
  --spacing-card-gap: 32px;
  --spacing-mobile-inset: 32px;
  --ease-brand: var(--yw-ease);
}
```

## Sources & Evidence

- **Inspected original and final website:** [https://yasumiworks.com/](https://yasumiworks.com/), HTTP 200. This is the authority for the page identity, content, and design described here.
- **Capture date:** `2026-09-12T18:33:11.123Z`, equivalent to September 13, 2026, at 03:33 JST.
- **Desktop evidence:** `1440 × 1000` viewport; supplied captures of the hero, Stores region, and contact/footer end. Rendered document height: `10902.41px`.
- **Mobile evidence:** `390 × 844` viewport; supplied captures of the hero and contact/footer end. Rendered document height: `13582.50px`.
- **Rendered DOM and computed styles:** section rectangles, typography, colors, padding, gaps, radii, control element types, recorded link destinations, custom properties, and transition declarations. Mobile measurements establish catalog and news reflow even where screenshots of those sections were not supplied.
- **Observed inspection actions:** initial loading and scrolling through intermediate positions, with finite-motion, layout-stability, and visible-image readiness checks. No control activation results were supplied.
- **Limits:** incomplete image URLs; no complete header/contact/footer computed-style sample; no inspected child pages; no verified menu, card-detail, filter-result, expanded-news, submission, or reduced-motion states. Readiness checks do not prove delayed-content completeness or establish a motion timeline.

This reference describes the current homepage represented by the supplied inspection. Measured values, declared palette entries, visual estimates, and recommended implementation additions are identified separately throughout.