# allureville / MY ELEMENTS of STYLE — Style Reference

> A spring wardrobe edit presented as a gray cloth notebook, complete with bookmarks, metal clips, and a handwritten invitation to swipe.

**Original URL:** [allureville.com/feature/20260218_myelements_feb](https://www.allureville.com/feature/20260218_myelements_feb)  
**Final URL:** [allureville.com/feature/20260218_myelements_feb](https://www.allureville.com/feature/20260218_myelements_feb) — unchanged; HTTP 200.  
**Theme:** light, with a neutral photographic canvas and restrained pastel details.  
**Inspected:** September 12, 2026. Supplied evidence retrieval timestamp: `2026-09-12T11:21:21.686Z`, equivalent to 20:21:21.686 JST. Individual capture timestamps were not supplied.  
**Viewports:** 1440 × 1000 CSS pixels on desktop; 390 × 844 CSS pixels on mobile. Three desktop captures and two mobile captures document the cover.  
**Scope:** the current fashion feature within allureville’s official site and online shop. Visual analysis covers the closed notebook, desktop navigation, mobile plus control, chapter numerals, and swipe annotation. Rendered DOM evidence additionally supports editorial text styles, page-region dimensions, chapter destinations, product links, and a production-credit block. Interior page appearance and page-turn behavior were not visually verified.

The opening composition gives a seasonal fashion feature the character of a personal styling notebook. A large gray cover sits on a pale tabletop, with cyan and yellow tabs protruding above it. Metal clips, a visible elastic closure, and sheets peeking from the right edge create physical depth. Dark uppercase lettering establishes the feature title; a small handwritten “of” softens its geometry. The white allureville wordmark sits lower on the cover.

On desktop, a narrow navigation column occupies the upper left while the notebook stays close to the center of the viewport. Generous empty space separates the two. Five small chapter numbers sit below the notebook, accompanied by a handwritten left-pointing swipe cue. On mobile, the notebook fills most of the screen width, the right-hand clip extends beyond the viewport, and a thin plus replaces the visible desktop navigation.

The content structure is an editorial lookbook with commerce links. Its five chapters cover tailored jackets, spring coats, bow-tie blouses, gathered skirts, and additional featured items. Japanese styling commentary is paired in the DOM with compact English product names and yen prices. The visual identity depends on the photographed object and its understated navigation; the text system supports close reading inside that object.

## How to Read This Reference

- **Measured** means a value appears directly in the supplied computed styles, element rectangles, viewport records, or document dimensions.
- **Derived** means arithmetic performed on those measurements, such as a gap between two recorded rectangles. A derived inset is not proof of a particular CSS padding declaration.
- **Estimated** means a visual approximation from the original-page captures. Estimated colors are not sampled or recovered asset colors.
- **Recommended** means guidance for a new implementation. The CSS and agent prompts use these recommendations where the original implementation is unknown.
- **DOM-only** identifies content or geometry present in the rendered evidence but not visible in the supplied cover captures. A rectangle inside the viewport does not establish visibility through parent clipping, page layers, or overlays.
- Token names are implementation aliases unless explicitly identified as source custom properties. No original image URLs, font files, page-turn code, or complete stylesheet were supplied.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Body Gray | `#e5e5e5` | `--color-body` | Measured body background: `rgb(229, 229, 229)` at both viewports |
| Tabletop Off-White | Approximately `#e8e6e2` | `--color-canvas` | Estimated pale, slightly warm photographic field surrounding the notebook |
| Cloth Gray | Approximately `#979894` | `--color-cloth` | Estimated midtone of the notebook cover; actual fabric contains texture and tonal variation |
| Cover Ink | Approximately `#302823` | `--color-cover-ink` | Estimated warm dark lettering on the cover and handwritten annotation |
| DOM Text Black | `#000000` | `--color-text` | Measured color on sampled paragraphs, chapter anchors, and product links |
| Logo White | Approximately `#ffffff` | `--color-logo` | Visually white wordmark on the notebook; asset fill was not measured |
| Cyan Bookmark | Approximately `#bfe0e3` | `--color-tab-cyan` | Estimated small paper tab above the notebook |
| Yellow Bookmark | Approximately `#e6eb80` | `--color-tab-yellow` | Estimated second paper tab; a limited photographic accent |

**Separate the canvas from the body background.** The measured body is neutral gray, while much of the visible screen is a subtly varied photographic surface. A single flat fill will approximate the surround but cannot reproduce the tabletop lighting or cloth grain.

The metal clips contain silver highlights, muted warm reflections, and dark edges. Treat these as image detail rather than a metallic UI palette. The yellow and cyan tabs also belong to the still life; no evidence establishes them as action or selection colors.

### Source Variables and Their Limits

The root exposes general-purpose variables such as `--primary: #444`, `--blue: #007bff`, `--yellow: #ffc107`, and several other saturated colors. Their presence does not establish their use in this feature. The supplied cover captures show a much narrower palette, and sampled editorial text computes to black.

No theme switcher or alternate color mode was documented. Keep this reference centered on the observed light presentation.

## Tokens — Typography

### Japanese Editorial Text

**Measured computed family:** `'Zen Kaku Gothic New', sans-serif`.

This family is recorded on the body, introduction, editorial paragraphs, styling headings, and chapter-index anchors. The hierarchy relies on modest size changes, medium weights, and carefully controlled line lengths. Introductory copy is slightly larger and heavier than the detailed garment descriptions.

Computed family declarations identify the requested font stack; the supplied evidence does not independently verify the font file or glyph fallback used for every character.

### Product Names and Prices

**Measured computed family:** `'Work Sans', sans-serif`.  
**Measured weight:** `400`.  
**Measured tracking:** `normal`.

Product references use compact lines such as `Jacket ¥59,400` and `Bag [LIE STUDIO] ¥136,400`. Individual entries are links. Lists use tight line boxes with approximately 6px of space between entries, while a standalone product reference uses a 1.5 line-height.

Keep the product type, optional bracketed brand, and price together. Their role is an editorial shopping reference, with a quieter visual weight than the styling headline.

### Cover Lettering and Brand Graphics

The cover combines three distinct treatments:

- A refined serif allureville wordmark, repeated in black in the desktop navigation and in white on the notebook.
- Widely spaced uppercase sans-serif feature lettering and date.
- A small cursive “of” and a loose handwritten swipe annotation.

The exact fonts behind these graphics are unverified. Several desktop navigation anchors have empty extracted text despite visible labels, so their computed `16px` font size cannot be used as the visible lettering size. The evidence does not determine whether each graphic is raster, SVG, outlined lettering, or another rendering method.

For reproduction, preserve the designed wordmark and feature lettering as supplied assets when available. Work Sans is a reasonable **recommended fallback** for new utility text, but it is only directly confirmed on product links. Do not assign the root’s separate Amiri-containing font variable to the visible wordmark without additional evidence.

### Type Scale

All values below are computed CSS values unless marked as estimates.

| Role | Desktop size / line-height | Mobile size / line-height | Weight | Notes |
| --- | --- | --- | --- | --- |
| Body default | `16px / 24px` | `16px / 24px` | `400` | Inherited baseline; many feature elements override it |
| Introductory Japanese paragraph | `14.4px / 28.8px` | `12px / 22.8px` | `600` | Leading changes from 2 to 1.9 |
| Styling headline | `16.56px / 24.84px` | `14px / 21px` | `500` | Frequently two lines in the recorded content |
| Detailed Japanese paragraph | `12.24px / 20.808px` | `11px / 16.5px` | `500` | Leading changes from 1.7 to 1.5 |
| Standalone product link | `11.52px / 17.28px` | `11px / 16.5px` | `400` | Work Sans |
| Product-list link | `11.52px / 11.52px` | `11px / 11px` | `400` | Separate 6px gaps produce the row rhythm |
| Chapter-index anchor | `22px / 33px` | `22px / 33px` | `400` | Parent anchor values; internal graphic/text treatment is not fully documented |
| Desktop navigation lettering | Approximately `11–12px` | Hidden in cover captures | Unverified | Visual estimate; wrapper computes to 16px |
| Cover title lettering | Approximately `36px` | Approximately `28px` | Unverified | Visual estimate of designed lettering |
| Cover date | Approximately `20px` | Approximately `16px` | Unverified | Visual estimate |
| Chapter numerals below cover | Approximately `16px` | Approximately `10–11px` | Unverified | Visual estimate |

The mobile type changes are not a uniform scale reduction. The chapter-index parent remains at 22px, detailed text settles at 11px, and styling headings become 14px. Do not scale the entire desktop page as one bitmap to reproduce the mobile text system.

## Tokens — Spacing & Shapes

### Spacing Scale

The strongest reusable intervals come from navigation rhythm and editorial page insets.

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Gap between product-list link boxes | Approximately `6px` | `6px` | Derived from link positions and heights |
| Gap between chapter-index anchor boxes | `20px` | `20px` | Derived from successive rectangles |
| Desktop navigation row height | `24px` | Not visible | Measured anchor height |
| Small page-copy inset | `30px` | `30px` | Derived from chapter-description and page-region left edges |
| Feature-title-to-chapter-navigation gap | `30px` | Not applicable | Derived from desktop navigation rectangles |
| Chapter-navigation-to-shop-links gap | `30px` | Not applicable | Derived desktop gap after ALL ITEMS |
| Styling-headline-to-paragraph gap | `46px` | `36px` | Derived from a representative styling page |
| Styling page horizontal inset | `40px` per side | `40px` per side | Derived from page width minus copy width |
| Wordmark-to-feature-title gap | `40px` | Not applicable | Derived desktop navigation gap |
| Styling-paragraph-to-product-list gap | `46px` | `46px` | Derived from representative pages |
| Styling page top inset to first graphic block | `60px` | `60px` | Derived from page and first block positions |

These intervals describe different relationships. The compact 6px price-list rhythm and the generous 46px editorial breaks should remain distinct.

### Shapes and Edges

| Element | Observed treatment | Implementation guidance |
| --- | --- | --- |
| Sampled links and paragraph boxes | Computed radius `0px` | Keep editorial UI square and unboxed |
| Notebook cover | Softly rounded outer corners, especially at the right edge | Preserve through the image; do not apply this radius to every component |
| Elastic closure | Narrow vertical fabric strip near the right edge | Retain its texture and position in the cover artwork |
| Mobile plus | Approximately `25 × 25px`, with approximately 1px strokes | Use a larger invisible hit area in a new implementation |
| Chapter numerals | Plain figures without visible pills or badges | Keep visual chrome minimal |
| Metal clips | Irregular highlights, loops, and physical shadows | Use photographic detail rather than generic UI icons |

There is no visible card-elevation system on the cover. Its depth comes from the photographed notebook, sheets, clips, and their shadows.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Status |
| --- | --- | --- | --- |
| Document height | `1084px` | `862px` | Measured |
| Document excess beyond viewport | `84px` | `18px` | Derived |
| Desktop navigation origin | `x: 42px; y: 100px` | Not visible | Measured |
| Desktop navigation width | `136px` | Not visible | Measured |
| Navigation wordmark link | `136 × 29.328px` | Not visible | Measured |
| Navigation feature-title link | `136 × 40.516px` | Not visible | Measured |
| Closed notebook body, excluding protruding props | Approximately `400 × 656px` | Approximately `320 × 525px` | Estimated from original captures |
| Large editorial page/link region | `374.391 × 646.563px` | `315.891 × 521.219px` | Measured, DOM-only |
| Paired desktop page-region width | `748.781px` | No paired region established | Derived, DOM-only |
| Standard editorial copy width | `294.391px` | `235.891px` | Measured, DOM-only |
| Chapter-index anchor width | `324.391px` | `265.891px` | Measured, DOM-only |
| Source custom property `--book-height` | Not included in desktop variable record | `700px` | Measured declaration; relationship to rendered page height is unverified |

The photographed cover bounds and the DOM page-region dimensions are separate measurements. Neither should be substituted for the other.

## Components

### Desktop Navigation

**Role:** persistent feature identity, chapter access, and routes back into the shop.

The visible column starts 42px from the left and 100px from the top. Its 136px width remains deliberately narrow. The hierarchy is:

1. The allureville wordmark, linking to `#page00_00`.
2. A miniature MY ELEMENTS of STYLE graphic, linking to `#page00_01`.
3. Five chapter links: `01 TAILORED JACKET`, `02 TOPCOAT`, `03 BOW-TIE BLOUSE`, `04 GATHERED SKIRT`, and `05 MOREOVER !`.
4. `ALL ITEMS`, linking to a feature-specific collection.
5. A separated pair of `ONLINE SHOP` and `HOME` links.

The five chapter rows plus ALL ITEMS occupy six consecutive 24px anchor boxes beginning at `y: 239.844px`. ONLINE SHOP begins at `y: 413.844px`; HOME follows at `y: 437.844px`.

The wordmark and feature-title links return to locations inside the feature. HOME points to the broader site root. Preserve this distinction when creating navigation labels and destinations.

The column stays at the same visible position across the three desktop captures while the notebook changes vertical position. This supports a persistent desktop rail; the exact positioning declaration was not supplied.

### Notebook Cover Composition

**Role:** establishes the feature’s identity and suggests an editorial object that can be explored.

Build the composition around the relationship of these visible parts:

- A portrait gray cloth notebook, almost front-on in an overhead still life.
- A rounded right edge and a vertical elastic closure.
- A large cyan tab and a smaller angled yellow tab projecting from the top.
- A binder clip above the notebook and a larger metal clip projecting from the right.
- Thin sheets or photographic inserts peeking from the right side.
- `FEB.2026` above the centered title.
- MY ELEMENTS and STYLE on separate lines, with the small cursive “of” between them.
- A white allureville wordmark positioned well below the title.

The notebook remains vertically oriented, with little rotation. Material texture and gentle shadows provide detail without making the page busy. Preserve the quiet, nearly frontal presentation when commissioning replacement artwork.

FEB.2026 is the edition label printed in the design. It is not the inspection date.

### Chapter Numerals and Swipe Annotation

**Role:** compact navigation and an invitation to explore horizontally.

Five bare numerals, `01` through `05`, sit beneath the closed notebook. On desktop, their centers are approximately 64px apart; on mobile, approximately 30px apart. These are visual estimates, not measured hit-target sizes.

The handwritten `SWIPE` annotation appears to the right with a left-pointing arrow. Its irregular strokes introduce a personal, lightly annotated feeling. No active numeral treatment is clearly distinguishable in the supplied captures.

The annotation establishes a horizontal interaction affordance. It does not verify gesture handling, page-curl animation, swipe thresholds, looping, or keyboard support. In a new implementation, connect every numeral to an explicit destination and provide an alternative to swiping.

### Mobile Plus Control

**Role:** compact access to navigation in the mobile cover presentation.

A thin black plus appears near the upper-left corner. In the first mobile capture it spans approximately `x: 30–55px` and `y: 33–58px`. The second capture shows it about 18px higher, along with the cover’s vertical shift. A fixed-position mobile header therefore cannot be asserted from these images.

The desktop rail is absent from the mobile cover. The rendered mobile DOM also includes shop navigation and off-canvas links, with several rectangles starting at `x: -306px`. Those records confirm navigation content exists, but they do not reveal the plus control’s opened state or establish which panel it operates.

**Recommended implementation:** use a real button or a native disclosure summary, a 44px or larger hit area, an accessible name, and an exposed expanded state. Any proposed drawer appearance should be treated as new design work.

### Introduction and Chapter Index

**Role:** explains the seasonal edit and offers five named entry points.

The DOM contains a Japanese introductory paragraph followed by a shop destination and a five-item chapter index. On desktop, the introductory paragraph occupies a `294.391px` column at `x: 375.602px`. The index occupies the neighboring area, with `324.391px`-wide anchors beginning at `x: 744.992px`.

On mobile, the paragraph is `235.891px` wide, while index anchors are `265.891px` wide. Both occur within the same narrow horizontal region in the DOM. Their rectangles overlap vertically with other page records, so the evidence does not establish that all these elements appear simultaneously.

The first four chapter-index anchors are approximately 57.58px high on desktop and 51px on mobile. The fifth is taller: approximately 79.19px and 69px respectively. Successive anchor boxes have 20px gaps.

Desktop chapter destinations use `#page01_00` through `#page05_00`; mobile destinations use `#page_sp01_00` through `#page_sp05_00`. This is direct evidence of viewport-specific page targets.

### Chapter Introduction Page

**Role:** presents the defining garment and explains its material, silhouette, and styling value.

Desktop DOM geometry places a large product-linked region on the left at `x: 345.602px`, with a `374.391 × 646.563px` rectangle. The neighboring description begins around `x: 749.992px` and uses a `294.391px` column. The anatomy includes a heading or graphic region, a detailed Japanese paragraph, and a standalone product link.

For the jacket chapter, the paragraph computes to `12.24px / 20.808px`, weight 500; the standalone `Jacket ¥59,400` link uses Work Sans at `11.52px / 17.28px`.

On mobile, large linked regions measure `315.891 × 521.219px` at `x: 31.188px`. Chapter descriptions begin at `x: 61.188px`, a derived 30px inset. Their 235.891px width leaves more clearance on the opposite side. The evidence supports a compact page treatment but does not show its final illustrated surface or page-turn sequence.

### Styling Page

**Role:** combines a specific outfit idea, supporting commentary, and item-level shopping references.

A representative desktop styling page uses a text region on the left and a large linked region on the right. The text column begins 40px inside its page. Its structure is:

1. A graphic or heading block, recorded with empty extracted text.
2. A two-line Japanese styling headline.
3. A short explanatory paragraph.
4. A list of product links.

The recorded headline `マニッシュな / ３ピースで揃えてみる` uses `16.56px / 24.84px`, weight 500. A 46px gap separates its box from the paragraph. Another 46px separates the paragraph from the item list.

The mobile counterpart uses `14px / 21px` for the headline and `11px / 16.5px` for the paragraph, with a 36px headline-to-paragraph gap. The copy column remains inset by 40px within a 315.891px page region.

Multiple desktop records repeat the same copy at identical coordinates. This may reflect alternate page layers or duplicated structures. Do not interpret those repeated records as a verified number of unique visible spreads.

### Product Reference List

**Role:** makes an outfit directly shoppable while preserving the editorial reading rhythm.

Each product is its own text anchor. The first recorded jacket outfit includes jacket, gilet, shirt, pants, bag, shoes, bracelet, and ring references. The text uses black, normal tracking, no visible filled button treatment, and zero computed border radius.

Desktop list links have `11.52px` line-height with approximately 6px gaps, producing a 17.52px row interval. Mobile links use an 11px line-height and 6px gaps, producing a 17px interval.

Both individual product URLs and outfit collection URLs are present. Keep those functions separate: an item reference opens one product, while a linked outfit region can lead to the associated collection. Destination contents were not inspected.

### Additional Items and Closing Links

**Role:** extends the four core wardrobe chapters and closes with routes to the brand’s shop and social account.

The fifth chapter’s rendered text discusses a denim jacket, woven bags, shoes, a scarf-pattern textile, and leather bags. It contains product and collection links using the same editorial commerce pattern.

The DOM ends with ONLINE SHOP and INSTAGRAM links. Mobile rendered text also includes a production-credit block. These closing elements were not visible in the supplied screenshots, so their layout, color treatment, spacing, and entrance behavior remain unverified.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Chapter-index anchor transitions | Computed `0.4s cubic-bezier(0.78, 0.18, 0.34, 0.98)` | Duration and easing are confirmed; changed properties and visual endpoints are unverified |
| Product-link transitions | Same computed 0.4s easing | A shared link transition is defined; hover appearance was not captured |
| Animation on sampled nodes | Recorded as `none` | These nodes do not expose named CSS animation in the sample; ancestor, script, or other animation is not ruled out |
| Horizontal browsing cue | Visible SWIPE annotation and left arrow | Horizontal exploration is suggested; actual gesture behavior was not exercised |
| Desktop cover movement between captures | Approximately 42px upward, then another 42px | Total shift is consistent with the document’s 84px excess height; it is not evidence of a page-turn animation |
| Mobile movement between captures | Approximately 18px upward | Consistent with the document’s 18px excess height |
| Desktop navigation persistence | Rail remains in place across captures | Persistent visual positioning is supported |
| Mobile plus expansion | No opened capture or click result | Panel appearance and transition are unverified |
| Chapter and product navigation | Rendered anchor destinations | Destination intent is supported; activation results were not inspected |

The supplied capture process waited for document load, visible image decoding, and sampled layout stability, with an initial observation of at least five seconds. It also handled finite and perpetual animations during readiness checks. These precautions improve capture reliability but do not establish that every delayed state or interaction was exercised.

**Recommended motion direction:** use the confirmed 400ms easing for restrained link feedback. If adding notebook page transitions, document them as a new implementation choice. Provide direct chapter controls, a usable static mode, and reduced-motion behavior. No particular page-curl engine, perspective value, or animation duration is established by this evidence.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Body | Measured `#e5e5e5` | Base behind the feature |
| Photographic surround | Pale warm-neutral field with subtle variation | Gives the notebook a physical setting |
| Notebook cloth | Mid-gray texture and soft physical edges | Main visual identity |
| Elastic and sheets | Fine material detail near the right edge | Reinforces the book object |
| Metal props | Reflective clips with realistic shadows | Adds tactile depth |
| Desktop navigation | Dark graphics on an open, unboxed field | Keeps navigation subordinate to the cover |
| Numerals and handwritten cue | Small dark marks beneath the object | Guides exploration with minimal chrome |
| Interior surfaces | Not visually documented | Do not infer paper texture, rules, decoration, or background colors from the cover alone |

Avoid duplicating shadows already present in the photographic artwork. A CSS shadow around the whole image rectangle would create a second, unrelated plane.

## Imagery

The verified image direction is an overhead still life of a real-looking notebook and stationery. Its detail is quiet: cloth grain, an elastic band, metal reflections, pale paper edges, and small pastel bookmarks. The composition is mostly neutral, with color concentrated in two tiny tabs.

Light is soft enough to retain the gray fabric’s texture. Shadows are strongest near the notebook’s left edge and the protruding objects, grounding the book on the tabletop. Preserve the fine edges and continuous tones with normal photographic image rendering; pixelated rendering would change the material character.

The notebook body stays fully recognizable on mobile. Its right-hand accessory extends out of frame, creating a closer crop while retaining the title and white wordmark. The crop should be authored around the notebook body, not around the center of the entire prop assembly.

The interior DOM contains large product and outfit link regions, and the page has a photography credit. However, the supplied screenshots do not expose the interior image content. Model poses, clothing photography, locations, chapter-specific colors, and image treatments cannot be described as visually observed.

### Observed Asset References

No original image `src`, CSS background URL, SVG path, or asset filename was included in the evidence. The following inventory identifies required visual material without inventing source paths.

| Asset or graphic | Verified appearance | Reuse guidance |
| --- | --- | --- |
| Notebook composition | Gray cover, elastic, clips, tabs, paper inserts, soft shadows | Preserve as a coordinated composition |
| Brand wordmark | Black in the desktop rail; white on the cover | Use the original graphic when available; exact font is unverified |
| Feature-title graphic | Uppercase title with a small cursive “of” | Keep the typographic relationships intact |
| Date lettering | FEB.2026 | Treat as edition-specific content |
| Chapter numerals | Five small figures beneath the cover | Prefer real links with equivalent visual restraint |
| Swipe annotation | Handwritten word and left arrow | Use an authored graphic; provide accessible navigation separately |
| Desktop chapter labels | Compact uppercase category labels | Preserve hierarchy and spacing; source rendering format is unknown |
| Interior image regions | Supported by linked page geometry, not visible image content | Request or supply actual assets before attempting faithful interior art direction |

## Layout & Responsive Behavior

### Desktop Composition

At 1440 × 1000, the visible notebook body is approximately 400px wide, or 28% of the viewport. Its center is close to the viewport center. The projecting right-hand clip makes the complete still life asymmetrical, extending farther right than the book itself.

The navigation occupies only 136px, beginning at x = 42px. There is roughly 350px of empty horizontal space between its right edge and the notebook’s left edge in the first capture. Preserve this separation; it lets the navigation read as a quiet index beside the object.

The DOM’s adjacent interior page regions span approximately 748.78px, centered near x = 720px. This suggests a wider desktop editorial composition than the closed cover. It is geometry evidence, not a screenshot of an opened book.

### Mobile Composition

At 390 × 844, the notebook body grows to approximately 82% of viewport width. Its left edge is about 25px from the screen edge. The right-side clip is partially cropped by the viewport. The chapter numerals and swipe annotation remain beneath the cover.

The first mobile capture has a pale image field beginning around y = 98px and extending to approximately y = 747px, with slightly different surrounding gray above and below. The second capture shifts the scene upward by approximately 18px. These are visual estimates of the capture, not confirmed header or section-height declarations.

Interior page regions use one narrow horizontal area on mobile. Their shared coordinates are consistent with sequential or layered page presentation. They do not establish a conventional vertical stack, an open two-page spread, or a particular slider library.

### Responsive Evidence Summary

| Relationship | Desktop | Mobile |
| --- | --- | --- |
| Visible primary navigation | Left rail | Thin plus control |
| Cover framing | Broad margins around notebook and props | Close framing with right accessory cropped |
| Editorial page width | `374.391px` per recorded region | `315.891px` |
| Editorial copy width | `294.391px` | `235.891px` |
| Detailed body size | `12.24px` | `11px` |
| Styling heading size | `16.56px` | `14px` |
| Chapter target naming | `page01_00` pattern | `page_sp01_00` pattern |
| Visible chapter-number spacing | Approximately `64px` center-to-center | Approximately `30px` center-to-center |

The root lists breakpoint variables at 576, 768, 992, and 1200px. The supplied evidence does not show which media queries control this feature. The exact rail-to-plus breakpoint is unknown. Any breakpoint chosen for a new implementation must be labeled as a recommendation.

## Do’s and Don’ts

### Do

- Make the cloth notebook and its physical props the primary visual statement.
- Preserve broad desktop margins and the small navigation column at the upper left.
- Keep the book’s center distinct from the center of its asymmetrical prop assembly.
- Use the observed Zen Kaku Gothic New and Work Sans roles for editorial copy and product references.
- Preserve the separation between spacious editorial breaks and compact shopping lists.
- Retain the title’s uppercase lettering, small cursive connector, and contrasting serif wordmark.
- Confine pastel accents to small stationery details unless new content calls for additional colors.
- Keep the title and wordmark legible when cropping the right-hand props on mobile.
- Connect chapter navigation and product references to explicit destinations.
- Treat the cover’s shadows and texture as image detail.
- Distinguish DOM-only interior measurements from visually verified cover design.

### Don’t

- Don’t add generic feature cards, oversized conversion buttons, or repeated promotional banners to this opening composition.
- Don’t turn the small cyan and yellow tabs into a site-wide button palette.
- Don’t assign a guessed serif font to the allureville wordmark.
- Don’t use the navigation wrappers’ computed 16px font size as a measurement of their visible graphic labels.
- Don’t add rounded containers around every editorial section.
- Don’t apply a broad drop shadow to the entire photographic image rectangle.
- Don’t claim a page-curl effect, autoplay, looping carousel, or working swipe gesture from the annotation alone.
- Don’t interpret repeated DOM copy as a verified sequence of separate visible pages.
- Don’t treat all root color variables as active feature colors.
- Don’t shrink a complete desktop screenshot to create the mobile version.
- Don’t lock enlarged or translated body text into a fixed-height page that clips its content.

## Recommended Implementation Additions

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

- Give graphic-only chapter links accessible names and expose the current chapter with an appropriate state such as `aria-current`.
- Increase mobile hit areas to approximately 44px. The observed numeral spacing is tighter than that target, so widen or rearrange the control row instead of creating overlapping hit regions.
- Provide explicit previous/next controls if horizontal page navigation is implemented. Keep chapter links available without requiring a gesture.
- Offer a readable text mode. The measured 11px mobile body and product text are compact; a 14–16px reading option should allow page height to grow.
- Keep inactive or duplicated page layers out of keyboard navigation and the accessibility tree when they are not usable.
- Ensure a mobile menu exposes its open state and can be closed predictably. Manage focus if it is implemented as a modal drawer.
- Preserve readable title text in an accessible heading even when the visible cover title is artwork.
- Reserve dimensions for image assets to prevent layout movement while the cover decodes.
- Load interior images progressively while keeping the opening cover crisp. Avoid preloading every duplicated image region merely because it exists in the DOM.
- Provide a sequential document fallback for users who cannot operate the book interaction or prefer reduced motion.

## Agent Prompt Guide

### Quick Color Reference

- Measured body background: `#e5e5e5`.
- Estimated photographic canvas: `#e8e6e2`.
- Estimated notebook cloth midtone: `#979894`.
- Estimated cover lettering: `#302823`.
- Measured editorial text: `#000000`.
- Estimated bookmark accents: cyan `#bfe0e3` and yellow `#e6eb80`.
- White brand mark on the notebook; black version in the desktop rail.
- No confirmed filled CTA color or alternate theme.

### Overall Prompt

“Create an editorial fashion lookbook organized around a photographed gray cloth notebook. Place the notebook close to the center of a pale tabletop, with broad desktop margins and a narrow upper-left navigation rail. Include an elastic closure, cyan and yellow bookmarks, metal clips, and sheets protruding from the right edge. Use an uppercase feature title with a small handwritten connector, a refined brand wordmark, five understated chapter numbers, and a handwritten left-pointing swipe cue. Set Japanese editorial copy in Zen Kaku Gothic New and product names and prices in Work Sans. On mobile, replace the visible rail with a thin plus control, enlarge the notebook relative to the viewport, and crop only peripheral props. Use explicit chapter links and restrained shop references. Treat any page-turn effect or opened menu design as a separately specified interaction.”

### Example Component Prompts

1. **Desktop rail:** “Create a 136px-wide unboxed navigation rail, positioned 42px from the left and 100px from the top at a 1440 × 1000 viewport. Stack a brand graphic, a feature-title graphic after a 40px gap, five 24px chapter rows and ALL ITEMS after a 30px gap, then ONLINE SHOP and HOME after another 30px gap.”
2. **Cover still life:** “Art-direct a nearly overhead gray cloth notebook on a pale neutral tabletop. Show fabric grain, a vertical elastic strip, a cyan bookmark, a smaller yellow bookmark, metal clips, and paper inserts. Keep soft physical shadows and a calm frontal composition. Leave clear space on the cover for a date, centered title, and lower white wordmark.”
3. **Editorial styling page:** “Build a portrait editorial page with a 294.39px desktop text column inside a 374.39px region. Use a two-line Japanese headline at 16.56px/24.84px, a 46px break, body copy at 12.24px/20.808px, another 46px break, and individual Work Sans product links at 11.52px with 6px gaps. Let height expand in a readable mobile adaptation.”
4. **Mobile cover:** “At 390 × 844, make the notebook body approximately 320px wide and place its left edge near 25px. Preserve the title and wordmark while allowing the right-hand clip to extend outside the viewport. Add a fine 25px plus with a larger accessible hit area. Keep five chapter links below the book and make their touch targets non-overlapping.”
5. **Interaction specification:** “Implement chapter links and item links first. If a book transition is added, define its behavior explicitly, support keyboard operation, expose the current page, and provide a reduced-motion sequential fallback. Use 400ms cubic-bezier(0.78, 0.18, 0.34, 0.98) for restrained link feedback; do not infer a particular page-turn animation from a static swipe cue.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source code. It includes measured text and page tokens, estimated photographic colors, and recommended responsive behavior.

The cover rules assume a newly prepared **500 × 724 proportional artboard** containing the full notebook and protruding props. That artboard is an approximation for this scaffold, not an original asset dimension. Align the notebook body toward the left of the artboard so its center remains near the viewport center. Supply the cover and swipe graphics separately; original asset URLs are unavailable.

Expected structure:

- `.elements-experience` contains `.feature-rail`, an optional native `details.mobile-menu`, and `.cover-stage`.
- `.cover-stage` contains `.cover-composition`, with `.cover-art` and `.chapter-bar`.
- `.chapter-bar` contains `.chapter-pagination` with five anchors, plus a decorative `.swipe-cue` image.
- Interior content uses `.editorial-spread`, `.editorial-page`, `.editorial-photo`, `.story-copy`, and `.product-list`.

The interior rules provide a sequential document fallback. They do not implement the original book controller. The recommended 1100px breakpoint, mobile control sizing, menu panel, hover opacity, and enlarged mobile text are deliberate additions.

```css
:root {
  /* Measured colors */
  --color-body: #e5e5e5;
  --color-text: #000000;

  /* Visual estimates for an adaptation */
  --color-canvas: #e8e6e2;
  --color-cloth: #979894;
  --color-cover-ink: #302823;
  --color-logo: #ffffff;
  --color-tab-cyan: #bfe0e3;
  --color-tab-yellow: #e6eb80;

  /* Families recorded in computed styles */
  --font-jp: 'Zen Kaku Gothic New', sans-serif;
  --font-product: 'Work Sans', sans-serif;

  /* Measured desktop typography */
  --text-intro: 14.4px;
  --leading-intro: 2;
  --text-heading: 16.56px;
  --leading-heading: 1.5;
  --text-body: 12.24px;
  --leading-body: 1.7;
  --text-product: 11.52px;
  --leading-product: 1;
  --text-index: 22px;

  /* Measured mobile values retained for comparison */
  --text-intro-mobile-source: 12px;
  --text-heading-mobile-source: 14px;
  --text-body-mobile-source: 11px;
  --text-product-mobile-source: 11px;

  /* Measured and derived geometry */
  --rail-left: 42px;
  --rail-top: 100px;
  --rail-width: 136px;
  --rail-row: 24px;
  --page-width: 374.390625px;
  --page-height: 646.5625px;
  --spread-width: 748.78125px;
  --copy-width: 294.390625px;
  --page-width-mobile: 315.890625px;
  --page-height-mobile: 521.21875px;
  --copy-width-mobile: 235.890625px;

  --space-item: 6px;
  --space-index: 20px;
  --space-group: 30px;
  --space-inset: 40px;
  --space-editorial: 46px;
  --space-page-top: 60px;
  --radius-ui: 0;

  /* Measured transition timing; use is recommended */
  --duration-link: 400ms;
  --ease-link: cubic-bezier(0.78, 0.18, 0.34, 0.98);
}

* {
  box-sizing: border-box;
}

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

.elements-experience {
  position: relative;
  min-block-size: 100svh;
  background: var(--color-canvas);
}

.elements-experience a {
  color: inherit;
}

.feature-rail {
  position: fixed;
  z-index: 20;
  inset-block-start: var(--rail-top);
  inset-inline-start: var(--rail-left);
  inline-size: var(--rail-width);
}

.feature-rail a {
  display: block;
  text-decoration: none;
}

.feature-rail img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.rail-brand {
  min-block-size: 29.328125px;
}

.rail-feature-title {
  margin-block-start: 40px;
  min-block-size: 40.515625px;
}

.rail-chapters,
.rail-utilities {
  margin: var(--space-group) 0 0;
  padding: 0;
  list-style: none;
}

.rail-chapters a,
.rail-utilities a {
  display: flex;
  align-items: center;
  min-block-size: var(--rail-row);
  /* Recommended fallback for graphic utility labels */
  font-family: var(--font-product);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.cover-stage {
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  overflow: hidden;
}

.cover-composition {
  position: relative;
  inline-size: 500px;
  /* Approximate alignment for the stated artboard contract */
  translate: 54px 10px;
}

.cover-art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 500 / 724;
  object-fit: contain;
  /* Keep the artwork's own shadows and photographic detail */
}

.chapter-bar {
  position: relative;
  min-block-size: 56px;
}

.chapter-pagination {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  inline-size: 320px;
  margin-inline-start: 30px;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.chapter-pagination a {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  color: var(--color-cover-ink);
  font-family: var(--font-product);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

.swipe-cue {
  position: absolute;
  inset-inline-start: 90%;
  inset-block-start: 10px;
  display: block;
  inline-size: 100px;
  block-size: auto;
  pointer-events: none;
}

.mobile-menu {
  display: none;
}

/* Recommended feedback; the source hover endpoint is unknown */
.rail-chapters a,
.rail-utilities a,
.chapter-pagination a,
.product-list a {
  transition: opacity var(--duration-link) var(--ease-link);
}

@media (hover: hover) {
  .rail-chapters a:hover,
  .rail-utilities a:hover,
  .chapter-pagination a:hover,
  .product-list a:hover {
    opacity: 0.65;
  }
}

/* Sequential editorial fallback, separate from a book controller */
.editorial-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: min(var(--spread-width), calc(100% - 48px));
  margin: 60px auto;
}

.editorial-page {
  min-inline-size: 0;
  min-block-size: var(--page-height);
}

.editorial-photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 374.390625 / 646.5625;
  object-fit: contain;
}

.story-copy {
  padding: var(--space-page-top) var(--space-inset);
}

.story-copy h2 {
  margin: 0 0 var(--space-editorial);
  font-size: var(--text-heading);
  font-weight: 500;
  line-height: var(--leading-heading);
}

.story-copy p {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.story-copy .intro {
  font-size: var(--text-intro);
  font-weight: 600;
  line-height: var(--leading-intro);
}

.product-list {
  display: grid;
  gap: var(--space-item);
  margin: var(--space-editorial) 0 0;
  padding: 0;
  list-style: none;
}

.product-list a {
  display: block;
  font-family: var(--font-product);
  font-size: var(--text-product);
  font-weight: 400;
  line-height: var(--leading-product);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.elements-experience :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended breakpoint; the original switch point is unknown */
@media (max-width: 1100px) {
  .feature-rail {
    display: none;
  }

  .mobile-menu {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(23px + env(safe-area-inset-top, 0px));
    inset-inline-start: 20px;
    display: block;
  }

  .mobile-menu summary {
    position: relative;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary::before,
  .mobile-menu summary::after {
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 25px;
    block-size: 1px;
    background: currentColor;
    content: '';
    transform: translate(-50%, -50%);
  }

  .mobile-menu summary::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Proposed native disclosure panel, not an observed open state */
  .mobile-menu nav {
    inline-size: min(320px, calc(100vw - 40px));
    max-block-size: calc(100svh - 120px);
    overflow-y: auto;
    padding: 24px;
    background: var(--color-canvas);
    border: 1px solid currentColor;
  }

  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 14px;
  }

  .cover-composition {
    inline-size: 400px;
    translate: 30px 0;
  }

  .chapter-pagination {
    /* Enlarged targets compared with the observed mobile row */
    inline-size: 220px;
    margin-inline-start: 50px;
  }

  .chapter-pagination a {
    font-size: 11px;
  }

  .chapter-bar {
    min-block-size: 70px;
  }

  .swipe-cue {
    inset-inline-start: 65%;
    inset-block-start: 44px;
    inline-size: 70px;
  }

  .editorial-spread {
    grid-template-columns: minmax(0, 1fr);
    inline-size: min(var(--page-width-mobile), calc(100% - 48px));
  }

  .editorial-page {
    min-block-size: var(--page-height-mobile);
  }

  .editorial-photo {
    aspect-ratio: 315.890625 / 521.21875;
  }

  .story-copy {
    padding: 40px;
  }

  .story-copy h2 {
    /* Recommended readable adaptation; source mobile size is 14px */
    margin-block-end: 36px;
    font-size: 18px;
    line-height: 1.5;
  }

  .story-copy p,
  .story-copy .intro {
    /* Allow longer pages instead of clipping enlarged text */
    font-size: 14px;
    line-height: 1.7;
  }

  .product-list a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 13px;
    line-height: 1.5;
  }
}

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

Give the mobile disclosure summary an accessible name such as Menu. Mark the swipe graphic decorative when equivalent navigation is available. Supply meaningful alternatives for the cover and outfit imagery, and use real headings for editorial titles.

The cover’s material realism requires suitable artwork. This CSS supplies layout, typography, navigation spacing, and a readable fallback; it does not synthesize the notebook photograph or reproduce unobserved interaction states. The scaffold was not executed against the original page.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-feature-body: var(--color-body);
  --color-feature-canvas: var(--color-canvas);
  --color-feature-ink: var(--color-cover-ink);
  --color-feature-cloth: var(--color-cloth);
  --color-bookmark-cyan: var(--color-tab-cyan);
  --color-bookmark-yellow: var(--color-tab-yellow);

  --font-editorial-jp: var(--font-jp);
  --font-commerce: var(--font-product);

  --text-feature-intro: 14.4px;
  --text-feature-heading: 16.56px;
  --text-feature-body: 12.24px;
  --text-feature-product: 11.52px;

  --spacing-feature-item: 6px;
  --spacing-feature-group: 30px;
  --spacing-feature-inset: 40px;
  --spacing-feature-editorial: 46px;
  --spacing-feature-page-top: 60px;

  --radius-feature-ui: 0px;
  --ease-feature: cubic-bezier(0.78, 0.18, 0.34, 0.98);
}
```

## Sources & Evidence

- **Original and final page:** [allureville — MY ELEMENTS of STYLE](https://www.allureville.com/feature/20260218_myelements_feb). The supplied browser record reports HTTP 200 and an unchanged final URL.
- **Capture set:** three original-page desktop captures at 1440 × 1000 and two original-page mobile captures at 390 × 844. All show the closed notebook presentation at slightly different vertical positions.
- **Inspection date:** September 12, 2026; evidence retrieved at `2026-09-12T11:21:21.686Z`. The printed FEB.2026 cover date is separate from this inspection date.
- **Rendered DOM and computed styles:** used for font-family declarations, sizes, weights, line-heights, colors, transition timing, link destinations, element rectangles, document dimensions, and the mobile `--book-height` declaration.
- **Original-page links:** the supplied DOM establishes chapter anchors, item links such as [Jacket ¥59,400](https://www.allureville.com/items/20261010120?cc=98), outfit collection links, shop navigation, and [the official Instagram destination](https://www.instagram.com/allureville_official/). These destinations were not opened for this analysis.
- **Production evidence:** the original page’s mobile rendered text includes an explicit editorial and production-credit block. Its visual presentation was not captured.
- **Readiness scope:** the supplied process waited for load, image decoding, animation readiness, and sampled layout/text stability within stated limits. SharedWorkers and service workers were disabled during inspection.
- **Limitations:** no opened notebook screenshot, exercised swipe, chapter-click result, hover state, opened mobile menu, keyboard test, intrinsic image dimensions, original asset URLs, or full source stylesheet was supplied. DOM rectangles may belong to inactive or overlapping page structures. Exact breakpoints and page-turn mechanics remain unknown.

This reference describes the current content served at the inspected URL. Its strongest visual evidence is the cover; interior specifications are explicitly grounded in rendered text and measured geometry, with implementation recommendations labeled separately.