Woset｜手描きイラストと余白が主役のオンラインショップ

# Woset / Japanese Shop — Style Reference

> A quiet sand-colored shop where oversized type frames a gallery of crayon drawings and peculiar characters.

**Original URL:** [woset.world/ja](https://woset.world/ja)  
**Final URL:** [woset.world/ja](https://woset.world/ja) — unchanged; supplied inspection returned HTTP 200.  
**Theme:** a warm light canvas with black text and restrained yellow controls.  
**Inspected:** September 23, 2026, at 00:43:44 JST; the supplied retrieval timestamp is September 22, 2026, at 15:43:44.789 UTC.  
**Viewports:** desktop **1440 × 1000 CSS pixels** and mobile **390 × 844 CSS pixels**.  
**Scope:** the current Japanese shop index, including its header, introductory heading, category controls, 18-product catalog, desktop and mobile footer arrangements, and supporting rendered DOM/computed styles. Product pages, checkout, open navigation, category changes, and form submission were not exercised.

Woset treats its shop as an illustrated catalog. A large, tightly spaced English heading introduces the products, while Japanese names and yen prices provide compact commercial information. The background remains the same warm gray throughout the header, catalog, and footer. Color comes mainly from the artwork: waxy crayons, graphite shading, irregular lettering, smiling tools, and bright cut-paper shapes.

The desktop catalog alternates rows of three products with rows of two larger products. On a phone, every item becomes a full-width portrait composition. There are no visible enclosing card surfaces or elevation shadows. The interface stays quiet so the drawings can change scale and character without competing with decorative UI.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered element rectangles, computed styles, or custom properties.
- **Observed** means a feature is visible in the supplied original-page screenshots.
- **Derived** means a value is calculated from measured geometry. The portrait image ratio and image-to-caption gap are examples.
- **Estimated** means a visual approximation, such as the color of a thin separator whose computed border color was not supplied.
- **Recommended** means an implementation choice for a new site. Breakpoints, accessible target sizes, and replacement CSS are not presented as recovered source code.
- Font names below are computed family declarations. The evidence does not independently establish font-file loading or the font used for every individual glyph.
- Extracted text includes offscreen navigation, cookie copy, and a one-pixel-wide character block. Their presence in the DOM does not make them visible page sections.
- All observations concern the supplied current page. The footer’s `All Rights Reserved 2023` is displayed copyright copy, not the inspection date.

## Tokens — Colors

### Default Palette

| Name | Value | Source / implementation alias | Role and evidence |
| --- | --- | --- | --- |
| Sand | `#eae9e5` | Source `--sand`; `--color-background: 234,233,229`; alias `--paper` | Measured body background at both viewports; the continuous canvas behind all major sections |
| Black | `#000000` | Source `--black`; alias `--ink` | Measured heading, body, navigation, and category-label color |
| Yellow | `#ecca53` | Source `--yellow`; alias `--accent` | Measured selected `All` button fill; the newsletter button visibly uses a corresponding yellow treatment |
| Gray | `#8d8c8a` | Source `--grey`; alias `--muted` | Measured source token; its use for prices is visually consistent but the price element’s computed color was not included |
| Fine separator | Approximately black at 22% opacity over Sand | Recommended alias `--rule` | Approximation for inactive pill outlines and footer rules; not an extracted border-color declaration |
| Deep green | `#054331` | Source `--green` | Declared token only; no active interface role established in the inspected shop state |
| Deep red | `#a5001b` | Source `--red` | Declared token only; no active interface role established in the inspected shop state |

The reusable interface palette is Sand, Black, Yellow, and Gray. The artwork contains many additional colors, but those colors do not become category-specific UI themes in the observed state.

Use Yellow for a selected category or a compact action. Preserve the large amount of unaccented canvas around it. Inactive categories remain transparent with subtle outlines; the selected category has a stronger black edge.

Some generic source variables describe black buttons, white button text, or zero-radius buttons. Those defaults do not describe the measured category pills, which have black text, a yellow selected fill, and a 30px radius. Prefer component measurements over unrelated theme defaults.

## Tokens — Typography

### Display Heading

- **Computed family:** `"Macan Medium", sans-serif`.
- **Weight:** `500`.
- **Desktop:** `95px / 95px`, with `-3.8px` letter spacing.
- **Mobile:** `37.5208px / 37.5208px`, with `-1.50083px` letter spacing.
- **Tracking relationship:** approximately `-0.04em` at both viewports.
- **Composition:** centered, two lines in both supplied opening screenshots: `Creative tools for` followed by `endless imagination.`

The heading is large and dense without becoming a heavy black slab. Its short line height and negative tracking are essential. Do not substitute an extra-bold weight to imitate its visual impact.

### Body and Utility Text

The measured body stack is `"Macan Regular", "A1 Gothic R", "Noto Sans JP", sans-serif`. Body text is `15px / 22.5px` on desktop and `13.1458px / 19.7188px` on mobile.

Desktop navigation and category controls use `"Macan Medium", "A1 Gothic M", sans-serif`. These controls report `font-weight: 400`; the medium character comes from the named family. Japanese product headings use `"A1 Gothic M", sans-serif`, also at a computed weight of `400`.

The mobile body becomes smaller, but the category labels stay at 15px. The newsletter introduction also stays at 15px. Preserve this distinction instead of shrinking every text role by the same ratio.

### Wordmark and Artwork Lettering

The Woset wordmark is a distinctive graphic with irregular, rounded strokes. Its header link measures 86 × 25px on desktop and 70 × 20px on mobile. Reuse an authorized brand asset; typing the name in a similar font will not reproduce the mark.

Colored product titles drawn inside images are artwork. Their uneven baselines, crayon texture, and changing letter colors should remain part of the image rather than being recreated with a novelty webfont.

### Type Scale

| Role | Desktop measurement | Mobile measurement | Family / treatment |
| --- | --- | --- | --- |
| Root font size | `16px` | `16px` | Conventional root; no tiny-rem scaling system |
| Main heading | `95px / 95px` | `37.5208px / 37.5208px` | Macan Medium, weight 500, tracking `-0.04em` |
| Body | `15px / 22.5px` | `13.1458px / 19.7188px` | Macan Regular with Japanese fallbacks |
| Product title | `15px / 20.25px` | `13.1458px / 17.7469px` | A1 Gothic M, weight 400 |
| Category label | `15px / 15px` | `15px / 15px` | Macan Medium / A1 Gothic M; tracking `-0.3px` |
| Desktop navigation | `15px / 20.25px` | Replaced in the visible header | Macan Medium / A1 Gothic M |
| Mobile cart label | Not applicable | `13.1458px / 19.7188px` | A1 Gothic M |
| Footer links | `15px / 20.25px` | `13.1458px / 17.7469px` | Macan Medium / A1 Gothic M |
| Newsletter introduction | `15px / 22.5px` | `15px / 22.5px` | A1 Gothic R |
| Offscreen mobile primary links | Not applicable | `37.5208px / 56.2812px` | Measured outside the visible viewport; open state unverified |
| Cookie paragraph | `11px / 16.5px` | `11px / 16.5px` | DOM-only evidence; absent from the supplied visible captures |

**Implementation recommendation:** load the named fonts only when licensed and available. Keep a system sans-serif fallback and recheck wrapping after font loading. Do not invent font asset URLs or assume a fallback will preserve the exact two-line heading.

## Tokens — Spacing & Shapes

The spacing language combines narrow page edges, generous vertical intervals, and large image fields. It is not a uniform eight-pixel spacing system.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header and catalog side inset | `22px` | `20px` | Measured |
| Category section side inset | `22px` | `22px` | Measured; intentionally differs from the mobile catalog inset |
| Header navigation gap | `22px` | Not applicable | Derived from adjacent link positions |
| Heading section top padding | `60px` | `40px` | Measured |
| Heading section bottom padding | `60px` | `60px` | Measured |
| Category gap | `10px` | `5px` | Derived from button positions |
| Categories to catalog | `80px` | `20px` | Derived from section bounds |
| Catalog column gap | `22px` | `15px` declared | Measured; the mobile column gap has no visible effect in one column |
| Catalog row gap | `30px` | `30px` | Measured |
| Image to product title | Approximately `15px` | `15px` | Derived using the inferred 4:5 media ratio |
| Catalog to footer | `60px` | `60px` | Derived from catalog and main-section bounds |
| Footer top padding | `22px` | `20px` | Measured; a thin top rule adds separation |
| Mobile footer section clearance | Not applicable | About `60px` below content before the next rule | Screenshot estimate |

### Border Radius and Edges

| Element | Treatment | Evidence |
| --- | --- | --- |
| Category pill | `30px` radius | Measured |
| Category outline | Approximately `1px` | Visually observed; exact computed border omitted |
| Newsletter field and submit button | Capsule outline, approximately 36–37px tall | Screenshot estimate |
| Product image and information area | Square, unboxed | Observed |
| Footer separator | Thin horizontal rule | Observed |
| Product cards | No visible shadow or raised surface | Observed |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 |
| --- | --- | --- |
| Header | `1440 × 65px` | `390 × 58px` |
| Header wordmark link | `86 × 25px`, at `x=677, y=19` | `70 × 20px`, at `x=160, y=18` |
| Heading box | `900 × 190px`, at approximately `x=270, y=125` | `350 × 75.03px`, at `x=20, y=98` |
| Category section | Starts at `y=375`; height `37px` | Starts at `y=233.03`; height `52px` |
| Catalog section | Starts at `y=492` | Starts at `y=305.03` |
| Standard product width | Approximately `450.66px` | `350px` |
| Wide product width | Approximately `687px` | `350px` |
| First product title | Starts at `y=1070.31` | Starts at `y=757.53` |
| Footer | Starts at `y=5965.81`; height `1000px` | Starts at `y=9693.91`; height `729.45px` |
| Document height | Approximately `6966px` | Approximately `10423px` |

The desktop product grid has twelve measured tracks of approximately 96.16px, separated by eleven 22px gaps. A standard product occupies the equivalent of four tracks; a wide product occupies six.

Derived widths:

```text
Desktop usable width = 1440 - 2 × 22 = 1396px
Three-product width = (1396 - 2 × 22) / 3 ≈ 450.67px
Two-product width = (1396 - 22) / 2 = 687px
Mobile product width = 390 - 2 × 20 = 350px
```

These dimensions support a full-width catalog. Do not impose a narrow centered container simply because a generic page-width variable exists elsewhere in the theme.

## Components

### Desktop Header

**Role:** quiet navigation, centered brand identity, and shopping utilities.

The header is 65px tall, transparent over the Sand canvas, with 22px side padding. `Shop`, `World`, and `Information` form the left group. The Woset mark is centered on the viewport. The right group contains the Japanese locale affordance, account link, and `買い物かご (0)` cart link.

Navigation uses 15px medium-family text with 22px gaps. The locale affordance includes a small Japanese flag and a downward indicator. Its menu was not opened.

The source also contains a second desktop header positioned at `y=-65`, with a transform transition. This supports the existence of a hidden header variant, but does not establish its scroll trigger. The visible reference should not be described as an always-fixed header.

**Recommended reconstruction:** use independent left and right groups around a truly centered wordmark. A three-column grid is a convenient implementation, although the measured source header itself uses flex layout.

### Mobile Header and Navigation Affordance

**Role:** preserve shopping access while reducing navigation density.

At 390px, the visible arrangement is cart at left, wordmark in the center, and a three-line menu button at right. The header is 58px tall with 20px side insets. The hamburger’s measured button box is only 20 × 12px, at `x=350, y=24`.

The DOM contains a close button and a second set of navigation links to the right of the viewport. Primary links begin at `x=410`, beyond the 390px screen. Their measured type is approximately 37.52px, substantially larger than the visible cart label.

This indicates an offscreen mobile navigation structure. The supplied evidence does not show its open appearance, backdrop, animation, focus handling, or dismissal behavior.

**Recommended addition:** enlarge the interactive menu target without enlarging its drawn lines. Keep hidden navigation inert until opened and provide an accessible button name and expanded state.

### Introductory Heading

**Role:** establish the brand’s creative premise above the catalog.

The heading is the only large text block before products. It has no supporting paragraph, badge, or adjacent action button. Its copy is `Creative tools for endless imagination.`

On desktop, the heading occupies a centered 900px-wide box with 60px of section padding above and below. On mobile, its width becomes 350px, its top padding becomes 40px, and its bottom padding remains 60px.

Preserve the compact two-line composition and the large empty space surrounding it. The heading is an introduction to the shop rather than a separate conversion panel.

### Category Pills

**Role:** provide four compact catalog categories.

The visible labels are `All`, `Apparel`, `Art supplies`, and `Furniture`. The selected `All` control uses Yellow with a black outline. The other controls have a transparent fill and lighter outlines.

Measured anatomy:

- 15px medium-family text with a 15px line height.
- `-0.3px` letter spacing.
- Padding of `11px 14px 9px`.
- 30px border radius.
- Normal height of 37px.
- A declared `0.1s linear` transition.

At desktop width, the four buttons occupy approximately 370.41px and are centered. At mobile width, the available row is 346px wide. `Art supplies` wraps into two lines, becoming approximately 105.22 × 52px; the other pills remain 37px tall and are vertically centered alongside it.

Do not shrink every label to force a uniform mobile height. The two-line category is part of the observed mobile arrangement. Category changes and resulting product filtering were not tested.

### Product Catalog Grid

**Role:** present the merchandise as a sequence of large illustrated compositions.

The desktop row sequence is **3, 2, 3, 2, 3, 2, 3**, accounting for all 18 products. Three-product rows use approximately 450.66px-wide items; two-product rows use approximately 687px-wide items. This creates a deliberate change in visual scale as the visitor scrolls.

The first three products are crayons, glue, and markers. The next row widens to two products. The same width rhythm continues down the page. Product heading rectangles establish the row groupings even where individual screenshots do not show an entire row.

On mobile, all products use the same 350px width in one continuous column. The measured title-to-title interval is approximately 519.94px for these items.

The quick-start CSS reproduces the desktop grouping with a repeating five-item pattern. That is an implementation adaptation, not a claim about the source’s selectors.

### Product Item

**Role:** combine a dominant image with discreet product identification and price.

Each visible item consists of a large portrait media field, a small left-aligned product name, and a gray price beneath it. The media has no visible frame, radius, badge, or surrounding card fill.

A **4:5 width-to-height media ratio is derived**, not directly extracted from an image element. On mobile, the catalog starts at `y=305.03` and the first title starts at `y=757.53`. A 350px-wide image at 4:5 is 437.5px high; adding 15px gives the measured 452.5px interval. The desktop measurements support the same relationship.

Example current caption:

- Product title: `ドゥーナ　マジカルクレヨン`.
- Price: `¥5,280`.

Product headings use A1 Gothic M at 15px desktop and approximately 13.15px mobile. Keep prices subordinate through color and placement rather than putting them in decorative tags.

The catalog DOM includes `買い物かごに追加する` text, but no visible add-to-cart treatment appears in the supplied resting screenshots. Its reveal conditions and behavior are unverified. Do not invent a persistent overlay or claim a hover interaction from that text alone.

### Newsletter Form

**Role:** a compact subscription action integrated into the footer.

The label `ニュースレターを購読する` sits above one outlined email field and a yellow outlined submit button labeled `購読する！`. The field placeholder is `メールアドレス`.

The controls are approximately 36–37px tall. They sit on one line at both inspected widths, with about a 10px gap. Their row begins roughly 10px farther right than the label.

Visual estimates:

- Desktop field: approximately 326px wide; submit button: approximately 105px.
- Mobile field: approximately 225px wide; submit button: approximately 105px.

On desktop this module sits at the upper right of the footer. On mobile it moves above the contact and policy information. Submission, validation, and success feedback were not tested.

### Desktop Footer

**Role:** provide contact details, legal and service navigation, social access, and newsletter signup.

The footer begins with a fine horizontal rule and approximately 22px top padding. Contact information starts at `x=22`, service links at `x=376.5`, and the newsletter at `x=967.33`.

The contact block contains the email address, postal address, and the displayed copyright `© Woset Inc.`. The second block contains account, shopping guide, wholesale, terms, privacy, legal disclosure, and Instagram information.

The contact-to-copyright interval is visually much larger on desktop than on mobile: approximately 80px after the address block, compared with about 20px on mobile.

The measured desktop footer is 1000px tall, matching the inspected viewport height. Its information remains near the top, leaving a broad empty Sand field below. No large bottom wordmark is visible in the supplied desktop footer capture. A viewport-height minimum is a reasonable reconstruction of this state, but the original height rule is not supplied.

### Mobile Footer

**Role:** reorganize the same information into a readable vertical sequence.

The visual order becomes:

1. Newsletter label and inline form.
2. Contact information and copyright.
3. Service and legal links, then Instagram.
4. A large Woset wordmark near the bottom edge.

Thin rules divide the first three groups. Content uses 20px horizontal insets, while the final wordmark spans almost the entire viewport width. The wide gap above that mark gives the footer a distinct ending without adding a colored surface.

The mobile footer measures approximately 729.45px tall. Do not copy the desktop footer’s measured 1000px height onto the phone layout.

### Supporting DOM-Only Elements

The rendered evidence includes a skip link labeled `コンテンツに進む`, cookie information, and an agreement control. The cookie paragraph and agreement control are positioned below the initial viewport in the supplied measurements, and no cookie panel is visible in the attached captures.

Preserve appropriate accessibility and consent functionality in an implementation, but do not invent its visible placement or animation from these DOM fragments. The long character sequence in a one-pixel-wide element is not visible editorial content and should not become a page section.

## Tokens — Motion & Interaction

| Element or token | Supplied value / state | What is established | Limitation |
| --- | --- | --- | --- |
| Catalog entrance | `reveal-up`, `1.5s`, `cubic-bezier(.42, 0, .34, 1.01)`, `1s` delay, `forwards` | An entrance animation is applied to the catalog section at both widths | Keyframes were not supplied; translation distance and opacity behavior are unknown |
| Hidden desktop header | `transform 0.5s cubic-bezier(.77, 0, .18, 1)` | A second header has a transform transition and sits above the viewport | Scroll threshold and activation direction were not exercised |
| Category buttons | `0.1s linear` | Short transition timing is declared | Hover colors and filtering transitions were not captured |
| Default duration token | `--duration-default: .2s` | Source variable exists | Not evidence that every control animates for 200ms |
| Long duration token | `--duration-long: .5s` | Source variable exists | Component assignment is not established |
| Extended duration token | `--duration-extended: 3s` | Source variable exists | No visible three-second interaction was established |
| Fade token | `fadeIn .6s cubic-bezier(0, 0, .3, 1)` | Source animation token exists | Its application to a visible inspected component is not established |
| Mobile menu | Offscreen links and close control | A closed/offscreen navigation structure exists | Open state, transition, and focus behavior were not tested |
| Shopping and newsletter actions | Links, buttons, and form-like controls are present | Intended affordances are visible or present in DOM | Successful actions and feedback states are unverified |

The captures show settled page states after readiness checks. They establish layout more strongly than animation choreography. The name `reveal-up` suggests a rising entrance, but it does not reveal the actual keyframes.

Do not infer animation from generic `transition: all` entries that lack a meaningful duration. Likewise, no evidence establishes animated product artwork, parallax, or a looping catalog carousel.

**Recommended approach:** retain brief feedback for controls and, if desired, implement a restrained entrance as a separately documented adaptation. Keep product content visible when animation is disabled or unavailable. Respect reduced-motion preferences.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Solid Sand | Unifies the full document |
| Header | Transparent over Sand; no visible enclosing panel | Keeps navigation secondary to the content |
| Product field | Artwork on a visually matching background | Lets each illustration read as part of the page |
| Product metadata | Unboxed black title and gray price | Supplies shopping information without adding visual weight |
| Inactive category | Transparent capsule with a fine gray outline | Makes categories recognizable as controls |
| Selected category | Yellow capsule with a black outline | Indicates the current category |
| Newsletter field | Transparent outlined capsule | Provides an input without introducing a white form panel |
| Newsletter action | Yellow outlined capsule | Repeats the category accent in a practical action |
| Footer | Same Sand canvas with thin rules | Separates information through spacing and lines |

The apparent seamlessness between artwork and page may result from transparency, a baked-in matching background, or both. The supplied evidence does not identify the image compositing method.

## Imagery

The current visible catalog imagery is handmade and character-driven. Crayon marks retain uneven coverage. Pencil shading remains visibly granular. Objects have faces, irregular outlines, and playful proportions. Lettering inside images varies in size, color, and baseline.

The first product illustration combines multicolored crayon lettering with scattered crayons. The glue composition uses a large graphite character and jar. The marker composition combines stacked hand lettering with loose marker drawings. Further down, a triangular eraser face appears inside dense graphite shading, while colorful insects echo the shapes of markers.

A lower row introduces flatter cut-paper shapes around scissors and flowers, thin overlapping notebook outlines, and a blue hand-drawn furniture composition. This variety belongs within the artwork; the UI grid and caption treatment remain consistent.

Use generous portrait canvases and preserve the full drawing, including its handwritten lettering. Avoid cropping characters to fill arbitrary card shapes. Normal image rendering is appropriate; the evidence does not support a pixelated rendering treatment.

### Observed Asset References

No original image `src`, `srcset`, or wordmark asset URLs were included in the supplied evidence. The references below identify visible subjects, not invented downloadable paths.

| Visual reference | Location in supplied original-page captures | Reusable characteristic |
| --- | --- | --- |
| Crayons and hand lettering | Desktop opening and mobile opening | Grainy wax texture, irregular colored lettering, scattered objects |
| Glue character and jar | Center of desktop opening | Graphite shading, smiling silhouette, loose contour drawing |
| Rounded markers | Right side of desktop opening | Stacked multicolor lettering above loosely arranged marker drawings |
| Triangular eraser face | Left side of desktop middle capture | Negative space inside a dense pencil field |
| Marker insects | Right side of desktop middle capture | Simple red, yellow, green, and blue line drawings with faces |
| Scissors, notebooks, and furniture | Lower portion of desktop middle capture | Variation between flat shapes, thin outlines, and textured color |
| Woset wordmark | Both headers and mobile footer | Irregular rounded strokes; small navigation scale and large closing scale |

Use original assets only when authorized and available. The CSS shell can reproduce spacing and hierarchy; it cannot reproduce the identity carried by these illustrations.

## Layout & Responsive Behavior

### Desktop Catalog Rhythm

The desktop layout is full width with 22px edges. It alternates three standard products and two larger products, then repeats. Because the media proportions stay consistent, two-product rows are also taller. This changes the pace of the page without introducing a separate featured-product component.

The opening viewport ends before the first row’s captions: the first title begins at `y=1070.31`, below the 1000px viewport. Preserve the measured composition rather than compressing the entire first row into one screen.

### Mobile Transformation

At 390px, the catalog becomes a single column with 350px-wide products. The first item’s name and price fit inside the 844px opening capture. This results from smaller heading type and a 20px category-to-catalog gap, compared with 80px on desktop.

The mobile header replaces the desktop navigation groups with a cart label and menu icon. The footer changes order, placing the newsletter first and adding the large closing wordmark visible in the mobile capture.

### Responsive Comparison

| Behavior | Desktop observation | Mobile observation |
| --- | --- | --- |
| Primary navigation | Three links at left | Menu affordance at right |
| Cart | Right utility group | Left side of header |
| Wordmark | Centered, 86px wide | Centered, 70px wide |
| Heading | 95px, 900px box | Approximately 37.52px, 350px box |
| Categories | Four single-line pills | `Art supplies` wraps to two lines |
| Product grid | Alternating three- and two-item rows | One item per row |
| Catalog top gap | 80px | 20px |
| Footer newsletter | Rightmost information block | First footer block |
| Footer closing mark | Not visible in supplied desktop footer | Nearly full-width mark visible at the bottom |

Only two viewport widths were inspected. The original breakpoint values, tablet layout, and exact fluid typography formulas are unknown. The quick start uses a recommended 768px structural breakpoint and interpolation chosen to match the observed endpoints; those are adaptation choices.

The page uses normal document scrolling and has a long catalog. It is not a fixed-height application with an internally scrolling product panel.

## Do’s and Don’ts

### Do

- Keep the continuous Sand canvas at `#eae9e5`.
- Use black interface text and reserve Yellow for selection and compact actions.
- Preserve the heading’s tight tracking, short line height, and two-line composition at the inspected widths.
- Keep the wordmark centered independently of the navigation groups.
- Alternate three-product and two-product rows on desktop.
- Let mobile products occupy the available width inside 20px margins.
- Preserve complete hand-drawn compositions and small, left-aligned captions.
- Allow the mobile `Art supplies` label to wrap while the other pills stay shorter.
- Move newsletter signup to the top of the mobile footer.
- Keep visible design observations separate from untested behavior.

### Don’t

- Don’t turn the shop into a generic sequence of promotional sections, feature cards, and repeated large actions.
- Don’t put every product inside a rounded white card or add elevation shadows.
- Don’t flatten the desktop catalog into an equal-sized three-column grid throughout.
- Don’t turn the colorful artwork into a rainbow of UI badges and backgrounds.
- Don’t replace the artwork’s lettering with a decorative webfont.
- Don’t apply bold weights indiscriminately; several medium-family labels compute to weight 400.
- Don’t force all mobile category pills into one uniform height by shrinking their labels.
- Don’t assume hidden DOM text proves a visible cookie panel, open menu, or add-to-cart overlay.
- Don’t claim image swapping, hover behavior, or animation keyframes that were not supplied.
- Don’t hard-code the original copyright year as the date of a new implementation.

## Recommended Implementation Additions

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

- Expose selected category state with `aria-pressed` or an equivalent appropriate control pattern. Announce updated product counts when filtering changes the catalog.
- Give product destinations semantic links and keep any add-to-cart button separate from those links. Do not nest interactive controls.
- Enlarge the mobile menu target to approximately 44 × 44px while retaining the small 20 × 12px drawing.
- Give the mobile menu an accessible name, explicit expanded state, focus management, and an inert closed state.
- Give the newsletter field a persistent accessible label, `type=email`, and email autocomplete. Add clear validation and submission feedback.
- Verify the final price-text contrast at its small rendered size. If needed, darken the price color while preserving its secondary hierarchy.
- Supply meaningful image alternatives, including useful product information that otherwise appears only inside artwork.
- Reserve media dimensions to avoid layout movement. Load lower catalog images progressively while prioritizing the opening products.
- Keep visible keyboard focus and reduced-motion behavior. Do not make catalog visibility depend on an entrance animation completing.
- At widths narrower than the inspected phone, permit category wrapping and additional heading lines instead of horizontal overflow.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and ordinary surfaces: `#eae9e5`.
- Main text and strong outlines: `#000000`.
- Selected category and newsletter action: `#ecca53`.
- Price color reference: `#8d8c8a`.
- Fine separators: a subtle gray outline; black at approximately 22% opacity is a reconstruction option.
- Additional bright colors belong primarily inside artwork.

### Overall Prompt

“Create an illustrated creative-tools shop inspired by the current Woset Japanese catalog. Use a continuous warm gray canvas `#eae9e5`, black sans-serif text, and small yellow `#ecca53` capsule controls. Center a graphic wordmark between navigation groups. Introduce the catalog with a large, tightly tracked two-line heading. Use four category pills beneath it, followed by a full-width product grid that alternates three-item and two-item rows. Each product has a complete portrait illustration, a small Japanese product name, and a gray yen price. Keep cards unboxed and shadowless. On a 390px phone, show cart left, wordmark center, menu right, then a single 350px-wide product column. Reorder the footer so newsletter signup comes first, followed by contact and policy links and a large closing wordmark. Preserve crayon grain, pencil shading, irregular lettering, and generous empty space.”

### Example Component Prompts

1. **Header:** “A 65px-high Sand header with 22px horizontal insets. Place Shop, World, and Information at left in 15px medium sans-serif text, an 86px-wide Woset graphic at the exact center, and locale, account, and cart controls at right. No card surface or shadow.”
2. **Introductory heading:** “Set Creative tools for endless imagination. in a centered two-line heading, 95px size and line height, weight 500, and -0.04em tracking at desktop width. Use a 900px text box and 60px vertical section padding. Reduce to approximately 37.52px on the inspected 390px phone.”
3. **Category row:** “Four outlined capsule buttons labeled All, Apparel, Art supplies, and Furniture. Use 15px text, 30px radius, and yellow fill only for All. Keep a 10px desktop gap and 5px phone gap; allow Art supplies to wrap into a taller two-line pill on the phone.”
4. **Product item:** “A complete 4:5 portrait illustration on a background that visually matches the page, followed after approximately 15px by a small Japanese title and gray price. Preserve irregular hand lettering and pencil texture. No rounded image corners, enclosing white card, or shadow.”
5. **Catalog rhythm:** “Use a twelve-column desktop grid with 22px gaps and page insets. Repeat product spans of 4, 4, 4, 6, 6. Collapse to one column with 20px page insets on mobile. Keep 30px vertical gaps.”
6. **Footer:** “Use the same Sand background and a fine top rule. On desktop place contact details left, service links beside them, and a capsule email form at right, leaving a large empty field below. On mobile put the newsletter first, divide information groups with fine rules, and finish with a nearly full-width graphic wordmark.”

## Quick Start

### CSS Custom Properties

This is a usable reconstruction stylesheet, not recovered source CSS. It matches measured endpoints where possible. The 768px breakpoint, intermediate heading scaling, separator opacity, 4:5 image ratio, newsletter dimensions, and footer-height rule are explicit adaptations. The larger mobile menu hit target is an accessibility recommendation.

Expected structure:

- `.site-header` contains `.header-nav`, `.header-brand`, `.header-tools`, `.header-cart-mobile`, and `.menu-toggle`.
- `.shop-intro` contains `.shop-heading`; two block spans can express the observed heading lines.
- `.category-list` contains `.category-pill` buttons; add `.category-pill--art` to the longer category.
- `.catalog-grid` contains `.product-card` elements, each with an image and metadata block.
- `.footer-grid` contains `.newsletter`, `.footer-contact`, and `.footer-links`. Put `.footer-brand` after that grid.

Provide authorized image and font assets separately. This CSS does not implement filtering, menu state, cart actions, or newsletter submission. The unknown source entrance keyframes are intentionally not reproduced.

```css
:root {
  /* Measured source colors */
  --paper: #eae9e5;
  --ink: #000000;
  --accent: #ecca53;
  --muted: #8d8c8a;

  /* Recommended approximation for thin borders */
  --rule: rgb(0 0 0 / 22%);

  /* Observed family declarations; supply licensed font files separately */
  --font-text: 'Macan Regular', 'A1 Gothic R', 'Noto Sans JP', sans-serif;
  --font-ui: 'Macan Medium', 'A1 Gothic M', sans-serif;
  --font-display: 'Macan Medium', sans-serif;
  --font-product: 'A1 Gothic M', sans-serif;

  /* Mobile endpoint; intermediate scaling is an adaptation */
  --text-body: 13.1458px;
  --text-hero: clamp(30px, 9.6207vw, 37.5208px);
  --text-control: 15px;
  --page-inset: 20px;
  --header-height: 58px;
  --catalog-top-gap: 20px;
  --radius-pill: 30px;
  --control-transition: 100ms linear;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--header-height);
  padding-inline: var(--page-inset);
}

.header-brand {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 70px;
  height: 20px;
}

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

.header-nav,
.header-tools {
  display: none;
}

.header-cart-mobile {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-family: var(--font-product);
  white-space: nowrap;
}

/* Recommended larger hit target around the observed small drawing */
.menu-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle__lines {
  display: grid;
  width: 20px;
  gap: 3px;
}

.menu-toggle__lines span {
  display: block;
  height: 2px;
  background: currentColor;
}

.shop-intro {
  padding: 40px 0 60px;
}

.shop-heading {
  width: calc(100% - 2 * var(--page-inset));
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
}

.shop-heading > span {
  display: block;
}

.category-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-inline: 22px;
}

.category-pill {
  flex: 0 0 auto;
  padding: 11px 14px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-control);
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.3px;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--control-transition),
    border-color var(--control-transition);
}

.category-pill--art {
  flex: 0 1 114.625px;
  min-width: 0;
}

.category-pill[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--accent);
}

.catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px 15px;
  margin-block: var(--catalog-top-gap) 60px;
  padding-inline: var(--page-inset);
}

.product-card {
  min-width: 0;
}

.product-card__link {
  display: block;
}

/* Ratio inferred from supplied geometry; fit is a recommendation */
.product-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--paper);
}

.product-card__meta {
  margin-top: 15px;
}

.product-card__title {
  margin: 0;
  font-family: var(--font-product);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.35;
}

.product-card__price {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--page-inset);
}

.newsletter {
  grid-row: 1;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--rule);
}

.newsletter__label {
  margin: 0;
  font-family: 'A1 Gothic R', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Form geometry is estimated from the screenshots */
.newsletter__form {
  display: flex;
  gap: 10px;
  margin: 8px 0 0 10px;
}

.newsletter__input,
.newsletter__submit {
  height: 37px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 15px;
}

.newsletter__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 15px;
  color: var(--ink);
  background: transparent;
}

.newsletter__input::placeholder {
  color: var(--ink);
  opacity: 1;
}

.newsletter__submit {
  flex: 0 0 105px;
  padding: 0 12px;
  background: var(--accent);
  cursor: pointer;
}

.footer-contact {
  grid-row: 2;
  padding-block: 20px 60px;
  border-bottom: 1px solid var(--rule);
}

.footer-links {
  grid-row: 3;
  padding-top: 20px;
}

.footer-contact,
.footer-links {
  font-family: var(--font-ui);
  line-height: 1.35;
}

.footer-contact a,
.footer-links a {
  display: block;
}

.footer-contact p,
.footer-links p {
  margin: 0;
}

.footer-contact .footer-copyright,
.footer-links .footer-social {
  margin-top: 20px;
}

.footer-brand {
  display: block;
  width: 100%;
  margin-top: 100px;
}

.footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

/* Recommended structural breakpoint; original breakpoint is unknown */
@media (min-width: 768px) {
  :root {
    --text-body: 15px;
    --text-hero: clamp(50px, 6.597222vw, 95px);
    --page-inset: 22px;
    --header-height: 65px;
    --catalog-top-gap: 80px;
  }

  .header-brand {
    width: 86px;
    height: 25px;
  }

  .header-nav,
  .header-tools {
    display: flex;
    align-items: center;
    gap: 22px;
    grid-row: 1;
    font-family: var(--font-ui);
    line-height: 1.35;
    white-space: nowrap;
  }

  .header-nav {
    grid-column: 1;
  }

  .header-tools {
    grid-column: 3;
    justify-content: flex-end;
  }

  .header-cart-mobile,
  .menu-toggle {
    display: none;
  }

  .shop-intro {
    padding: 60px 30px;
  }

  .shop-heading {
    width: 100%;
  }

  .category-list {
    gap: 10px;
  }

  .catalog-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
  }

  .product-card {
    grid-column: span 4;
  }

  .product-card:nth-child(5n + 4),
  .product-card:nth-child(5n + 5) {
    grid-column: span 6;
  }

  /* Approximates the measured full-viewport desktop footer */
  .site-footer {
    min-height: 100svh;
    padding-top: 22px;
  }

  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
  }

  .footer-contact,
  .footer-links,
  .newsletter {
    grid-row: 1;
    padding: 0;
    border: 0;
  }

  .footer-contact {
    grid-column: 1 / span 3;
  }

  .footer-links {
    grid-column: 4 / span 3;
  }

  .newsletter {
    grid-column: 9 / span 4;
  }

  .footer-contact .footer-copyright {
    margin-top: 80px;
  }

  /* Reproduces the supplied desktop capture state */
  .footer-brand {
    display: none;
  }
}

/* Recommended behavior below the inspected phone width */
@media (max-width: 360px) {
  .category-list {
    flex-wrap: wrap;
    gap: 8px;
  }

  .category-pill--art {
    flex: 0 0 auto;
  }

  .newsletter__form {
    margin-left: 0;
  }
}

/* Recommended accessible focus treatment */
:where(a, button, input):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .category-pill,
  .catalog-grid,
  .site-header {
    animation: none;
    transition: none;
  }
}
```

When using the repeating product selectors, render the filtered result as its own ordered list of elements. Merely hiding arbitrary original children can leave the five-item span pattern attached to the wrong visible positions. Recheck header fit around the chosen breakpoint; tablet behavior was not part of the supplied inspection.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not establish the framework or version used by the original site. Define the custom properties above first.

```css
@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-accent: var(--accent);
  --color-muted: var(--muted);
  --color-rule: var(--rule);

  --font-sans: var(--font-text);
  --font-heading: var(--font-display);
  --font-control: var(--font-ui);

  --text-shop-body: var(--text-body);
  --text-shop-hero: var(--text-hero);
  --text-shop-control: 15px;

  --spacing-page: var(--page-inset);
  --spacing-catalog-top: var(--catalog-top-gap);
  --spacing-catalog-row: 30px;
  --radius-capsule: 30px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Woset Japanese shop](https://woset.world/ja). Both supplied URLs are identical, and the recorded response status is HTTP 200. The rendered page title is `Creative Tools for Endless Imagination – Woset`.
- **Capture time:** September 22, 2026, at 15:43:44.789 UTC, equivalent to September 23, 2026, at 00:43:44.789 JST.
- **Desktop evidence:** supplied opening, middle, and footer screenshots at 1440 × 1000 CSS pixels, plus rendered DOM rectangles, computed typography, custom properties, link targets, and document-height measurements.
- **Mobile evidence:** supplied opening and footer screenshots at 390 × 844 CSS pixels, plus corresponding rendered DOM and computed styles. Offscreen navigation measurements were available, but an open-menu screenshot was not.
- **Inspection conditions:** the supplied browser process observed the initial page for at least five seconds and used bounded checks for document readiness, visible image decoding, finite animation completion, and layout/text stability. It traversed intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed afterward; shared workers and service workers were disabled.
- **Limitations:** readiness checks do not prove that all delayed content appeared. No click results were supplied for categories, menu opening, locale selection, product purchase actions, cookie agreement, or newsletter submission. Original media URLs, font files, animation keyframes, and responsive breakpoints were not provided. Linked destinations were not independently inspected for this reference.

This document describes the supplied current shop state. Exact measurements, visual estimates, derived proportions, and implementation recommendations are distinguished throughout.