# Diane Be True — Style Reference

> Bright product still lifes, pastel paper, and hand-drawn marks held together by decisive black ink.

**Website:** [diane-betrue.com](https://www.diane-betrue.com/)
**Original URL:** https://www.diane-betrue.com/
**Final URL:** https://www.diane-betrue.com/
**Theme:** light pastel chapters with black typography and illustration; the mobile header reverses to cream on black.
**Inspected:** September 23, 2026, Japan Standard Time. Supplied retrieval timestamp: `2026-09-22T15:29:49.405Z`, equivalent to September 23 at 00:29:49 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current brand homepage, using three desktop captures, two mobile captures, and rendered DOM/computed-style evidence covering the page. Visual coverage includes the opening, the out-bath/body-care transition, the final store section, and the footer. Other sections have stronger measurement evidence than visual coverage. Product-detail pages, the external storefront, Instagram, and an opened navigation menu were not inspected.

Diane Be True presents hair and body care through a long-form brand and product hub. Large photographs show bottles alongside citrus, foliage, water, and strongly lit pastel surfaces. Loose hearts, leaves, birds, clouds, soap, and a rabbit give the page a personal, illustrated voice. Black outlines, dashed dividers, and hard offset shadows keep these soft colors visually assertive.

The structure moves from a photographic desktop hero into a brand statement, product categories, sustainability stories, a large store invitation, and a compact brand footer. Product groups remain open compositions on colored backgrounds. Repeated `RELAX` and `HEALTHY` labels provide a clear comparison within each category, while `SEE MORE` links lead to detail pages and `STORE` links lead to an external shop.

## How to Read This Reference

- **Measured** means reported by the supplied rendered DOM or computed styles. Dimensions below are rounded to two decimal places where useful.
- **Visual estimate** means judged from an original-page capture. Estimated colors were not obtained by pixel sampling, and photographed colors vary with light and texture.
- **Recommended** means guidance for a new implementation. It is not a claim about the original site's CSS or behavior.
- **Named tokens** are implementation aliases unless explicitly identified as source custom properties.
- **Graphic lettering and live text are different systems.** Several large headings and controls have empty sampled text, substantial visual bounds, and a tiny inherited font size. Their visible lettering cannot be reconstructed from that inherited font size.
- **Only two responsive endpoints were measured.** The original media queries, scaling formulas, and intermediate layouts were not supplied.
- **A settled capture is a state, not an interaction recording.** Menu behavior, hover feedback, and animation timing remain unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Cream Paper | `#f5eece` | `--dbt-paper` | Measured body background, `rgb(245, 238, 206)`; the principal open canvas |
| Body-care Peach | `#ffc8b8` | `--dbt-peach` | Measured body-care section background, `rgb(255, 200, 184)` |
| Store Lilac | `#e3c9dd` | `--dbt-lilac` | Measured final store section background, `rgb(227, 201, 221)` |
| Footer Cream | `#eee7c7` | `--dbt-footer` | Measured footer background, `rgb(238, 231, 199)`; slightly darker than the body |
| Black Ink | `#000000` | `--dbt-ink` | Measured text color and mobile header background; visually repeated in rules, outlines, shadows, and the store stripe |
| Sticker White | Approximately `#ffffff` | `--dbt-white` | Visual estimate for pill interiors and round footer badges; no relevant painted-layer style was supplied |
| Concept Pink | Approximately `#ffdfe6` | `--dbt-pink` | Visual estimate of the concept chapter visible below the opening; its sampled outer section is transparent |
| Doodle Teal | Approximately `#005b57` | `--dbt-teal` | Visual estimate for rabbit outlines and selected illustrated accents |
| Marker Yellow | Approximately `#fff12b` | `--dbt-marker` | Visual estimate of the broad highlight beneath the body-care heading |

The hero's mint and pale pink belong to a photographed set, with paper texture, gradients from lighting, and cast shadows. They should not be treated as exact flat CSS surface colors. The green bottles also contain highlights and deep shadows; their color is not a universal interface token.

### Color Behavior

Broad chapters carry the pastel colors. Black stays consistent across lettering, borders, doodles, and shadows. White is reserved for small high-contrast elements such as buttons and badge circles. Teal, leaf green, coral, and yellow appear as selective accents within illustrations and artwork.

The mobile header is a responsive color reversal, not evidence of a separate dark theme. No theme selector was observed.

The supplied `--tw-*` custom properties include generic defaults such as a blue ring color. Those values do not establish a visible blue accent or prove a particular framework was responsible for the page.

## Tokens — Typography

### Live Text — Japanese Sans-serif Stack

The measured family stack is:

```css
'Noto Sans JP', 'Helvetica Neue', Arial,
'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif
```

The source exposes `--font-family-main` for Noto Sans JP and `--font-family-default` for the remaining fallback stack. This establishes the declared family order; individual font-file loading and the final glyph font were not independently verified.

Live paragraphs use weight `400`. Product names, benefit labels, footer links, and copyright text use weight `700`. Japanese body copy has generous line spacing and tracking, which gives dense paragraphs a gentle, deliberate reading rhythm.

### Wordmark and Display Lettering

The wordmark is a slanted brush-script composition. The hero combines that identity with irregular Japanese lettering. Category headings combine Japanese handwriting, rough uppercase English, and occasional marker-like underlining.

These should be treated as supplied graphic compositions. No font family for their visible lettering was established. A standard font applied to the measured heading node will not reproduce them.

### Action Lettering

`STORE` and `SEE MORE` use heavy serif-like capitals inside illustrated controls. The utility captions below the header icons also appear serif-like. Their sampled anchor styles inherit the tiny root size, so neither a specific family nor an accurate text size can be read from those anchor styles.

For a text-based adaptation, generic bold `serif` is a reasonable recommendation. It is not an identified source font.

### Type Scale

Values in this table are measured computed styles unless described otherwise.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Concept paragraph | `19px / 41.17px` | `12.48px / 28.33px` | `400` | `0.13em` at both sizes |
| Sustainability paragraph | `15px / 33px` | `11.44px / 19.448px` | `400` | `0.1em` |
| Product name: `RELAX`, `HEALTHY` | `30px / 30px` | `20.8px / 20.8px` | `700` | `0.02em` |
| Product benefit | `16px / 24px` | `13px / 19.5px` | `700` | Generally `0.16em`; out-bath uses `0.15em` |
| Additive-free note | `11px / 16.5px` | `7.28px / 16.744px` | `400` | Desktop `0.11em`; mobile normal |
| Footer links and copyright | `12px / 37.2px` | `7.28px / 14.56px` | `700` | `0.14em` |
| Root/inherited size | `1.05417px / 1.58126px` | `0.52px / 0.78px` | `400` | Normal |

**Do not use the root size as the intended body size.** It is part of the source's layout/scaling setup. The actual paragraphs and product labels have explicit larger sizes.

Some mobile benefit elements have rendered bounds smaller than their computed line boxes. This indicates that computed typography and final geometry should not be treated as interchangeable; the relevant transform or surrounding layout declarations were not supplied.

**Recommended adaptation:** retain the hierarchy and tracking, but raise small mobile body and legal text to practical reading sizes. Allow sections to grow rather than preserving the original height by shrinking text.

## Tokens — Spacing & Shapes

### Spacing Scale

The evidence supports component-specific spacing rather than a verified universal base grid.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header vertical padding | `17.92px` top and bottom | `9.88px` top, `6.76px` bottom | Measured |
| Header logo left position | `26.34px` | `16.11px` | Measured |
| Hero heading to store-link gap | `36.89px` | `18.19px` | Calculated from measured bounds |
| Space between hero section and concept section | `200.70px` | `98.98px` | Calculated; includes the illustrated bridge |
| Concept section padding | `176.05px` top, `107.53px` bottom | `27.04px` top, `34.84px` bottom | Measured outer section |
| Product section bottom padding | Approximately `126.50–142.31px` | Approximately `54.08–73.84px` | Measured across three categories |
| Final store section padding | `128.61px` top, `121.23px` bottom | `75.4px` top, `78px` bottom | Measured |
| Footer padding | `71.68px` top, `93.82px` bottom | `43.68px` top, `11.96px` bottom | Measured |

For a new implementation, a supporting scale of `4, 8, 12, 16, 24, 32, 48, 72, 120px` works well. These are recommended working values, not recovered source tokens. Preserve the much larger compositional spaces around artwork and between chapters.

### Border Radius

| Element | Observed appearance | Implementation guidance |
| --- | --- | --- |
| Hero photograph | Extremely broad lower-left curve with a thick black lower edge | Use a clipped media wrapper and separate hard backing; radius approximately `230–270px` at the desktop capture is a visual estimate |
| Out-bath photograph | Large lower-left curve, black underside | Use an asymmetric corner treatment rather than rounding all corners equally |
| Main action pills | Fully rounded ends and dashed outlines | `border-radius: 999px` is a recommended approximation |
| Final store portrait | Square corners, thin outline, offset black rectangle | Preserve rectangular geometry |
| Footer badges | White circles with black line art | Circular containers; visual diameters approximately `72px` desktop and `58px` mobile |
| Section dividers | Fine black dashed horizontal lines | Approximately `1–2px`, visually estimated |

The outer section nodes report a `0px` radius. That does not describe the clipping or shape of every child image. The exact mechanism behind the photograph's black edge—border, backing layer, shadow, or artwork—was not provided.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 |
| --- | --- | --- |
| Header bounds | `1440 × 89.55px` | `390 × 43.13px` |
| Header wordmark link | `213.98 × 31.31px` | `149.23 × 21.83px` |
| Hero section height | `670.45px` | `602.67px` |
| Hero heading bounds | `382.66 × 111.56px`, at `899.73, 240.34` | `262.08 × 76.41px`, at `63.95, 228.80` |
| Hero store-link bounds | `264.59 × 69.52px` | `166.91 × 43.84px` |
| Concept section | Starts at `y = 871.16px`; height `1739.64px` | Starts at `y = 701.66px`; height `1496.30px` |
| Concept paragraph width | `517.52px` | `339.92px` |
| Shampoo/treatment section height | `846.41px` | `834.17px` |
| Out-bath section height | `884.88px` | `841.36px` |
| Body-care section height | `869.44px` | `838.30px` |
| Product detail-link bounds | `267.75 × 76.72px` | `169.52 × 48.56px` |
| Sustainability section height | `2396.80px` | `1815.05px` |
| Final store section height | `810.63px` | `516.84px` |
| Final store-link artwork bounds | `347.88 × 59.64px` | `171.59 × 29.42px` |
| Footer height | `298.27px` | `212.84px` |
| Full document height | `8873.66px` | `7333.69px` |

Positions are document coordinates from the supplied measurements. Link bounds describe the sampled anchors; they do not prove that the entire surrounding stripe or illustration is clickable.

## Components

### Persistent Brand Header

**Role:** maintain identity and direct access to shopping, social media, and navigation.

Place the brush wordmark at the left and three compact icon-over-caption controls at the right: a shopping bag for `STORE`, an Instagram-style camera for `SNS`, and three horizontal lines for `MENU`. The desktop header is transparent, with black graphics overlaying photographs and chapter colors.

At the mobile endpoint, the header becomes a black strip with cream graphics. The wordmark stays relatively prominent: its width falls from approximately `214px` to `149px`, while the viewport becomes much narrower. The utility artwork scales more aggressively.

The header stays at the top of the supplied scrolled captures. This supports persistent visual behavior; the exact positioning declaration was not included. The desktop black controls pass over a dark photograph in the middle capture, reducing local contrast. An adaptive high-contrast header treatment is a recommended improvement.

### Navigation Inventory

**Role:** jump between the homepage's principal chapters.

The DOM lists anchors for `#concept`, `#shampoo-treatment`, `#out-bath`, `#body-care`, and `#sustainable`. It also contains repeated store and social links.

The screenshots show the collapsed `MENU` control, not an opened panel. Do not infer a drawer, full-screen overlay, background color, entrance direction, or close interaction from the presence of these links. Nonzero DOM bounds alone do not establish that a menu item was visibly presented in the captured state.

### Hero Composition

**Role:** establish the product world and provide an immediate store route.

The desktop hero is a full-width photographic stage. Bottles and citrus drinks occupy the left and center; a pale pink area at the right gives the headline room. The main heading sits around `62.5%` across the viewport and `240px` below its top. Beneath it is a white dashed `STORE` pill with a shopping bag and a solid wedge-like arrow.

Hearts and birds sit above and beside the heading. Leaves, clouds, and tiny drawn bottles surround the lower half. Keep this as a composed cluster with intentional empty space around the readable center.

The captured headline reads `Be Trueからはじまる、わたしと地球の物語`, incorporating the brand wordmark. Preserve the mixed lettering as artwork when those assets are available.

At `390px`, the headline and pill are centered on cream. **The photograph is absent from the supplied settled mobile capture.** The evidence does not establish whether this is an intentional responsive choice, an asset condition, or another rendering state. Document and reproduce the captured state only with that limitation explicit.

### Rabbit Bridge and Chapter Divider

**Role:** connect the opening to the brand story while providing breathing room.

Between the hero bounds and the concept section is a cream interval of approximately `201px` desktop and `99px` mobile. A lilac rabbit with teal linework sits at its lower edge, accompanied by curved drawn marks. A dashed horizontal rule introduces the next pastel chapter.

The illustration is an anchor at a section boundary rather than a floating UI control. The drawn motion marks do not establish that the rabbit itself animates.

### Concept and Brand Values

**Role:** explain the brand's relationship between personal care, everyday enjoyment, and environmental awareness.

On desktop, the main paragraph occupies a `517.52px` column beginning near `x = 788.5px`. It uses `19px` regular text with approximately `41px` leading. Graphic headings sit above it. The section continues into a separate values grouping and an additive-free note.

On mobile, the paragraph is approximately `340px` wide with `25px` side clearances. The title and paragraph follow a substantial upper media region. In the opening mobile capture, an arched or circular photograph begins against the pink background, showing blue sky and part of a person; the complete crop is not visible.

Keep the manifesto as live text. Preserve its deliberate line rhythm without rasterizing the entire paragraph. The exact arrangement of the values grouping is only partially established by the supplied evidence.

### Product Category Chapter

**Role:** introduce a category, compare two product families, and lead to a detail page.

The desktop out-bath chapter pairs a cream information region on the left with a large photograph on the right. The photograph shows bottles against dark tableware and green leaves, ending in a broad curved corner and black underside. The following body-care chapter reverses the composition: a grapefruit-and-water photograph fills the left side, while a peach information field fills the right.

Within the information region, stack a graphic category heading, product packshots, two parallel name/benefit groups, and one centered `SEE MORE` pill. The body-care heading adds a thick yellow underline and a small soap doodle.

The measured shampoo/treatment heading is approximately `565px` wide on desktop, compared with approximately `260px` for out-bath and `283px` for body care. These are individually composed heading graphics, not a uniform text box to stretch identically.

### Product Family Pair

**Role:** make `RELAX` and `HEALTHY` easy to compare.

Use two centered groups on the chapter background. Keep packshots above the names, followed by short Japanese benefits. For example, out-bath uses `うねり髪ミルク` and `ダメージ補修オイル`; body care uses `しっとりもちもち肌` and `さっぱりうるスベ肌`.

Names use bold, compact sans-serif type: `30px` desktop and `20.8px` mobile. The Japanese benefits have more tracking. Product groups remain paired horizontally in the mobile measurements, even though the broader chapter changes to a vertical composition.

Avoid adding individual bordered cards around every bottle. The blank pastel field and transparent packshots supply the grouping.

### Dashed Action Pill

**Role:** repeat a recognizable route to shopping or product detail.

The anatomy is a white capsule, black dashed outline, hard black offset backing, bold serif-like label, and a solid right-pointing arrow. `STORE` also includes a bag icon. The shadow is crisp and unblurred, visible primarily below and to the right.

The hero link measures approximately `265 × 70px` on desktop and `167 × 44px` on mobile. Product detail links are slightly taller: approximately `268 × 77px` and `170 × 49px` respectively. These dimensions include the sampled graphic/anchor bounds, not a recovered CSS padding formula.

The three observed detail destinations are `/products/shampoo-treatment.html`, `/products/out-bath.html`, and `/products/body-care.html`. Store links point to `https://store.naturelab.co.jp/collections/diane-betrue`.

### Sustainability Story Sequence

**Role:** expand on ingredient sourcing, fragrance reuse, and packaging.

The rendered copy forms three editorial groups. Desktop paragraphs are approximately `390px` wide and alternate between right and left positions. The first discusses cactus cultivation and reuse of extraction residue, the second reused rose petals, and the third recycled bottles and refill packaging.

Use graphic subheadings above readable paragraphs. Desktop text is `15px / 33px`, with `0.1em` tracking. Mobile groups retain deliberate asymmetry rather than becoming identical centered blocks: measured paragraph widths are approximately `265px`, `236px`, and `252px`, with the second group offset farther right.

The supplied screenshots do not fully show this sequence. A blue-sky image strip is visible immediately before the final store section on mobile; the remaining image treatments cannot be specified confidently from the DOM alone.

### Final Store Feature

**Role:** conclude the editorial journey with a prominent shopping invitation.

Use a full-width lilac field with a black horizontal stripe. A square-cornered portrait photograph of a pink pump bottle surrounded by sliced citrus overlaps the stripe on desktop. A black backing rectangle is displaced left and down, producing a printed-poster effect. The white bag, `STORE` label, and arrow occupy the right side of the stripe.

Visual estimates place the portrait near `430 × 545px` on desktop, with a backing offset around `14px`. On mobile, it becomes approximately `211 × 268px`, with an offset around `7px`. The black stripe moves below the photograph, spanning the full viewport; its visual height is approximately `64px`, compared with `130px` on desktop.

Hearts, a leaf, a cloud, and a small bottle sit around this arrangement. Keep the overlap and uneven decorative placement. The measured mobile store-link artwork is only about `29px` high, so extending the interactive area through the stripe is a useful implementation improvement.

### Brand Footer

**Role:** close with identity, values, and corporate links.

The footer uses a slightly darker cream than the page. On desktop, the wordmark and five white circular badges form a group on the left; corporate links and copyright sit to the right. On mobile, the wordmark, badge row, and legal text stack centrally.

The badges show a V/leaf form, a crossed laboratory flask, a rabbit, a globe, and an infinity symbol. Their illustrations are observed; certification status, badge interactivity, and tooltips were not established.

The footer links are `企業情報`, `情報セキュリティ基本方針`, and `プライバシーポリシー`. The rendered copyright identifies `NatureLab. Co., Ltd.`. No production-credit claim is established by the inspected page evidence.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | What can be specified |
| --- | --- | --- |
| Persistent header | Same top placement across opening and scrolled captures | Preserve continuous access to brand and utilities; exact positioning property is unknown |
| Store and product links | Rendered destination URLs | Implement as links; destination-page behavior was not inspected |
| Chapter navigation | Five fragment URLs in the DOM | Provide section targets; smooth scrolling is not verified |
| Menu control | Visible collapsed icon and navigation inventory | Opening, closing, focus behavior, and visual panel treatment are unverified |
| Hover and pressed states | No captured state or duration evidence | Any added feedback must be labeled an implementation recommendation |
| Sampled animation styles | Listed nodes report `animation: none` | No animation can be assigned to those nodes from this evidence; descendants and pseudo-elements are not comprehensively covered |
| Sampled transitions | Records contain `transition: all` without duration/easing details | Do not invent a timing token or claim visible transitions |
| Doodle motion | Static drawings with gesture marks | Do not treat drawn waves, hearts, or birds as proof of animation |

The capture process reports stability checks, finite-animation waiting, and temporary pausing of perpetual animations during readiness checks before resuming them. That process does not supply an animation inventory or prove that the page is entirely static.

**Recommended additions:** a short `140ms ease` pressed/hover treatment for the action pills, keyboard-visible focus, and reduced-motion support. No autoplay carousel, parallax, bouncing mascot, or scroll-triggered entrance sequence is required by the available evidence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Flat cream | Continuous background and generous breathing room |
| Editorial chapters | Pink, peach, and lilac fields | Separate story, product, and store sections |
| Photographic stage | High-resolution product photography with real lighting | Supply color, material, and visual scale |
| Action surface | White capsule, dashed black outline, hard backing | Repeated shopping and detail navigation |
| Final conversion stripe | Solid black with white graphics | Strong contrast near the page end |
| Footer badges | White circles with black drawings | Compact visual expression of brand values |
| Dividers | Thin black dashed rules | Mark chapter changes without heavy container borders |

There is no evidence of a general soft-shadow elevation system. Hard black backing shapes belong to selected photographs and actions. Keep the photographic cast shadows distinct from these flat graphic shadows.

## Imagery

The photographs are bright, tactile, and product-led. Citrus is sliced close to camera; water creates sparkle and refraction; bottles have readable labels and visible material highlights. Green leaves and dark dishes add contrast to the pale packaging. The hero uses directional light, which creates pronounced shadows across the mint and pink set.

Use different media treatments for different roles:

- **Hero:** one wide photographic composition with deliberate negative space for the heading.
- **Category photography:** large scenes reaching the viewport edge, including asymmetric curved corners.
- **Packshots:** isolated bottles grouped by product family, without a separate card surface.
- **Store feature:** a rectangular portrait still life with a thin outline and offset black backing.
- **Decorations:** uneven black line art with limited teal, coral, green, and lilac fills.

The doodles should retain slight irregularity in contour and proportion. Standard navigation icons remain clearer and more geometric than the surrounding illustrations. Photographs should render normally, without pixelated scaling or a universal color filter.

### Observed Asset References

The supplied evidence does not include image `src` values, asset filenames, or original SVG paths. The following is an identification inventory, not a downloadable asset manifest.

| Visual asset | Where observed | What to preserve |
| --- | --- | --- |
| Brush-script wordmark | Header and footer captures | Slant, uneven brush weight, compact horizontal silhouette |
| Hero product still life | Desktop opening | Mint/pink set, citrus drinks, large bottles, directional shadows |
| Hero heading composition | Desktop and mobile opening | Relative wordmark/Japanese lettering arrangement and two-line silhouette |
| Rabbit and drawn marks | Opening chapter boundary | Lilac fill, dark teal contour, grounding on the divider |
| Out-bath photograph | Desktop middle capture | Dark dish, vivid leaves, large bottle crop, curved lower-left edge |
| Body-care photograph | Desktop middle capture | Grapefruit slices, moving water, cream and green bottles |
| Citrus store portrait | Desktop and mobile ending | Pink bottle centered among large yellow citrus slices |
| Footer badge set | Desktop and mobile footer | Five separate white circles and distinct black illustrations |

Use available brand artwork as individual assets. Screenshot crops are not substitutes for responsive source imagery, semantic text, or reusable controls.

## Layout & Responsive Behavior

The homepage is a long scrolling document, not a fixed-height application. Full-width chapter backgrounds carry the composition. Desktop layouts alternate large media regions and centered product information, with little dependence on a conventional page-wide card grid.

### Observed Endpoint Changes

| Feature | Desktop | Mobile |
| --- | --- | --- |
| Header | Transparent, black graphics | Black strip, cream graphics |
| Hero composition | Wide photograph with right-side heading | Centered heading on cream; photograph not visible in the supplied state |
| Hero-to-concept bridge | Approximately `201px` high | Approximately `99px` high |
| Concept copy | Right-side column | Broad centered column below media and headings |
| Category composition | Information and large image share a horizontal chapter | Heading positions suggest media above details; intermediate mobile category images were not supplied |
| Product families | Two parallel groups | Two parallel groups remain |
| Sustainability copy | Alternating left/right desktop columns | Narrower, deliberately offset blocks |
| Final store composition | Portrait overlaps stripe; action at right | Portrait above stripe; action centered |
| Footer | Brand group and legal block beside each other | Centered vertical stack |

The mobile category headings begin roughly `420–453px` after their section starts, while the sections are about `834–841px` high. Together with the centered heading and paired product measurements, this supports a vertical category composition. It does not establish the precise crop or corner treatment of every mobile photograph.

Responsive scaling is selective. The mobile viewport is about `27%` of the desktop width, but its wordmark is about `70%` as wide and its hero headline about `68%` as wide. A single transform applied to a desktop canvas would not reproduce this hierarchy.

The root font size changes from `1.05417px` to `0.52px`; the evidence is insufficient to recover the full formula. Do not infer a breakpoint or a source `rem` conversion from those two samples alone.

For a new implementation, use normal document flow for prose and chapters, anchor offsets for a persistent header, and a clearly documented breakpoint chosen through testing. The CSS below uses `48rem` as a recommendation, not a recovered source value.

## Do’s and Don’ts

### Do

- Preserve the measured cream, peach, lilac, and footer colors.
- Give photography enough space to show ingredients, packaging, light, and texture.
- Keep black linework strong against the pastel fields.
- Use graphic lettering for identity and category art, with live text for paragraphs and product benefits.
- Keep `RELAX` and `HEALTHY` paired and easy to compare.
- Repeat the white dashed action pill consistently.
- Use hard black backing selectively beneath controls and framed imagery.
- Preserve the final store section's different desktop and mobile compositions.
- Retain generous chapter spacing and the small illustrations at transitions.

### Don't

- Don't assign a fabricated font name to the wordmark or drawn headings.
- Don't apply the tiny measured root size to normal reading text.
- Don't convert every bottle into an independent rounded card.
- Don't replace hard graphic backing with diffuse gray shadows.
- Don't flatten photographed mint and pink surfaces into a presumed exact brand palette.
- Don't infer menu behavior, hover animation, or mascot movement from static captures.
- Don't assume the mobile hero photograph is intentionally disabled without further evidence.
- Don't stretch every heading graphic to the same width or crop product labels unnecessarily.
- Don't carry the smallest mobile legal-text sizes into a new build without assessing readability.

## Recommended Implementation Additions

These are improvements for an adaptation, not verified original features:

- Give `STORE`, `SNS`, and `MENU` explicit accessible names. Empty extracted text does not establish whether the original already has suitable alternatives.
- Keep a semantic `h1` and heading hierarchy when decorative lettering is rendered as an image or SVG. Avoid duplicate announcements from both visible artwork and hidden text.
- Make decorative hearts, clouds, and leaves noninteractive and hidden from assistive technology.
- Provide at least `44px` interactive targets for compact mobile utilities and expand the final store link through its stripe.
- Increase mobile body copy toward `14–16px` and legal text toward `11–12px`, allowing layouts to grow.
- Implement visible keyboard focus and appropriate menu focus behavior once the navigation pattern is chosen.
- Reserve media dimensions to prevent layout shifts, and verify the intended mobile hero asset behavior independently.
- Maintain header contrast over dark photography and respect reduced-motion preferences for any added feedback.

## Agent Prompt Guide

### Quick Color Reference

- Main paper: measured `#f5eece`.
- Body-care chapter: measured `#ffc8b8`.
- Store chapter: measured `#e3c9dd`.
- Footer: measured `#eee7c7`.
- Text, outlines, backing shapes: black.
- Buttons and badge circles: visually white.
- Concept pink, doodle teal, and marker yellow: approximate artwork colors; validate against supplied assets.

### Overall Prompt

“Create a Japanese hair- and body-care brand homepage with cream paper, peach and lilac chapters, large citrus-and-bottle photography, and playful hand-drawn decorations. Use strong black outlines, dashed section dividers, white capsule links with hard black backing, and supplied brush-script and category artwork. Pair RELAX and HEALTHY products within each category using bold sans-serif names and tracked Japanese benefits. On desktop, compose large photographs beside centered product information; on mobile, stack the chapter composition while preserving the paired products. End with a lilac store feature, a citrus portrait with offset black backing, a full-width black STORE stripe, and a cream footer with five round value icons. Keep text semantic and readable. Do not invent source animations or asset filenames.”

### Example Component Prompts

1. **Header:** “Build a persistent brand header with a supplied script wordmark on the left and shopping-bag, camera, and menu controls on the right. Use black graphics on a transparent desktop surface and cream graphics on black at the mobile endpoint. Give the compact controls accessible labels and comfortable hit areas.”
2. **Hero:** “Compose a wide mint-and-pink product still life with a right-side graphic headline, a white dashed STORE capsule, and small hearts, birds, leaves, clouds, and drawn bottles. Preserve the large lower-left curve and black underside. Treat the plain cream mobile hero as a captured state requiring asset-behavior verification.”
3. **Product chapter:** “Use a large ingredient photograph beside a pastel product region. Center a supplied category heading above two product groups labeled RELAX and HEALTHY, with short Japanese benefits and a shared SEE MORE capsule. Keep bottles on the chapter background without individual cards.”
4. **Store feature:** “On lilac, place a rectangular photograph of a pink bottle surrounded by citrus over a black backing offset left and down. Run a full-width black stripe behind it with white bag, STORE, and arrow graphics at the right. On mobile, place the stripe below the centered portrait.”
5. **Footer:** “Create a slightly darker cream footer with a brush wordmark, five white circular illustration badges, and compact corporate links. Use a horizontal desktop grouping and centered mobile stack. Preserve the badge artwork while increasing legal-text readability in the adaptation.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered source CSS. It uses the measured flat colors, approximate artwork colors, a normal root font size, and an explicitly recommended `48rem` breakpoint. It raises mobile text sizes and uses a `52px` mobile header to support larger controls, so its final document height will differ from the capture.

Class names describe expected component anatomy: media and message inside the hero; media and copy inside product chapters; portrait and stripe inside the store chapter. Supply actual photographs, heading artwork, and icons separately. The CSS does not recreate the original illustrations or implement a menu.

```css
:root {
  /* Measured flat colors */
  --dbt-paper: #f5eece;
  --dbt-peach: #ffc8b8;
  --dbt-lilac: #e3c9dd;
  --dbt-footer: #eee7c7;
  --dbt-ink: #000;

  /* Visual approximations for an adaptation */
  --dbt-white: #fff;
  --dbt-pink: #ffdfe6;
  --dbt-teal: #005b57;
  --dbt-marker: #fff12b;

  --dbt-font: 'Noto Sans JP', 'Helvetica Neue', Arial,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --dbt-action-font: serif;
  --dbt-concept-size: 19px;
  --dbt-story-size: 15px;
  --dbt-product-size: 30px;
  --dbt-benefit-size: 16px;
  --dbt-meta-size: 12px;
  --dbt-header-height: 90px;
  --dbt-rule: 2px;
  --dbt-pill-shadow: 4px 5px 0 var(--dbt-ink);
  --dbt-feedback: 140ms ease;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  color: var(--dbt-ink);
  background: var(--dbt-paper);
  font-family: var(--dbt-font);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
section[id] { scroll-margin-top: calc(var(--dbt-header-height) + 16px); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: var(--dbt-header-height);
  padding: 18px 26px;
  color: var(--dbt-ink);
}
.site-header__logo { width: 214px; margin-top: 4px; }
.utility-nav { display: flex; align-items: center; gap: 20px; }
.utility-nav :is(a, button) {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.utility-nav__icon { width: 34px; height: 34px; }
.utility-nav__label { font: 700 11px/1 var(--dbt-action-font); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 46.56vw, 760px);
}
.hero__media {
  position: absolute;
  inset: 0 0 10px;
  z-index: -1;
  overflow: hidden;
  border-bottom-left-radius: 18vw;
  box-shadow: 0 10px 0 var(--dbt-ink);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__message {
  position: absolute;
  top: 35.85%;
  left: 62.48%;
  width: 26.57%;
  text-align: center;
}
.hero__title { margin: 0; }
.hero__title img { width: 100%; }
.hero__message .sticker-link { margin-top: 37px; }
.doodle { position: absolute; pointer-events: none; }

.sticker-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  width: min(265px, 100%);
  min-height: 70px;
  padding: 10px 18px;
  border: 2px dashed var(--dbt-ink);
  border-radius: 999px;
  color: var(--dbt-ink);
  background: var(--dbt-white);
  box-shadow: var(--dbt-pill-shadow);
  font: 700 30px/1 var(--dbt-action-font);
  text-decoration: none;
  transition: transform var(--dbt-feedback), box-shadow var(--dbt-feedback);
}
.sticker-link__icon { width: 1em; height: 1em; }
.print-arrow {
  width: 1.1em;
  aspect-ratio: 1.5;
  background: currentColor;
  clip-path: polygon(0 70%, 35% 70%, 35% 0, 100% 100%, 0 100%);
}
.chapter-bridge {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 201px;
}
.chapter-bridge img { width: auto; height: 78%; }
.chapter-rule { border-top: var(--dbt-rule) dashed var(--dbt-ink); }

.concept { padding: 120px 24px; background: var(--dbt-pink); }
.concept__copy {
  max-width: 518px;
  margin-inline: auto;
  font-size: var(--dbt-concept-size);
  line-height: 2.1667;
  letter-spacing: 0.13em;
}
.art-title { width: var(--art-width, 280px); margin-inline: auto; }
.product-chapter {
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: start;
  padding-bottom: 120px;
}
.product-chapter__copy { padding: 100px 24px 40px; text-align: center; }
.product-chapter__media {
  overflow: hidden;
  border-bottom-left-radius: clamp(90px, 17vw, 250px);
  box-shadow: 0 10px 0 var(--dbt-ink);
}
.product-chapter__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.product-chapter--body { grid-template-columns: 52% 48%; background: var(--dbt-peach); }
.product-chapter--body .product-chapter__media { order: -1; }
.product-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 40px auto;
  max-width: 560px;
}
.product-pair img { max-height: 250px; width: auto; margin-inline: auto; }
.product-name {
  margin: 18px 0 6px;
  font-size: var(--dbt-product-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.product-benefit {
  margin: 0;
  font-size: var(--dbt-benefit-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
}
.story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  width: min(calc(100% - 48px), 920px);
  margin-inline: auto;
  padding-block: 60px;
}
.story__copy { max-width: 390px; }
.story__copy p {
  font-size: var(--dbt-story-size);
  line-height: 2.2;
  letter-spacing: 0.1em;
}

.store-chapter {
  position: relative;
  isolation: isolate;
  min-height: 811px;
  padding: 129px 15.2% 135px;
  background: var(--dbt-lilac);
}
.store-portrait {
  position: relative;
  z-index: 1;
  width: 430px;
  max-width: 44%;
  margin: 0;
  border: 1px solid var(--dbt-ink);
  box-shadow: -14px 14px 0 var(--dbt-ink);
}
.store-portrait img { width: 100%; aspect-ratio: 0.79; object-fit: cover; }
.store-band {
  position: absolute;
  inset: 359px 0 auto;
  height: 130px;
  color: var(--dbt-white);
  background: var(--dbt-ink);
}
.store-band__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: 31%;
  height: 100%;
  margin-left: 58%;
  font: 700 60px/1 var(--dbt-action-font);
  text-decoration: none;
}
.site-footer { padding: 72px 24px 94px; background: var(--dbt-footer); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  max-width: 900px;
  margin-inline: auto;
}
.footer-wordmark { width: 285px; margin: 0 auto 14px; }
.value-badges { display: flex; justify-content: center; gap: 14px; }
.value-badge {
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dbt-white);
}
.footer-legal {
  font-size: var(--dbt-meta-size);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.14em;
}

/* Recommended keyboard and pointer feedback */
:where(a, button):focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  .sticker-link:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 3px 0 var(--dbt-ink);
  }
}

/* Chosen adaptation breakpoint; not an observed source query */
@media (max-width: 48rem) {
  :root {
    --dbt-header-height: 52px;
    --dbt-concept-size: 14px;
    --dbt-story-size: 14px;
    --dbt-product-size: 20.8px;
    --dbt-benefit-size: 13px;
    --dbt-meta-size: 11px;
    --dbt-rule: 1px;
  }
  .site-header {
    align-items: center;
    padding: 4px 16px;
    color: var(--dbt-paper);
    background: var(--dbt-ink);
  }
  .site-header__logo { width: 149px; margin: 0; }
  .utility-nav { gap: 0; }
  .utility-nav__icon { width: 20px; height: 20px; }
  .utility-nav__label { font-size: 10px; }
  .hero { min-height: 603px; }
  /* Matches the supplied mobile state; verify intended asset behavior. */
  .hero__media { display: none; }
  .hero__message { top: 229px; left: 50%; width: 67.2%; transform: translateX(-50%); }
  .hero__message .sticker-link { margin-top: 18px; }
  .sticker-link { width: 167px; min-height: 44px; padding: 7px 12px; font-size: 20px; }
  .chapter-bridge { height: 99px; }
  .concept { padding: 28px 25px 40px; }
  .concept__copy { line-height: 2; }
  .product-chapter, .product-chapter--body { grid-template-columns: 1fr; padding-bottom: 64px; }
  .product-chapter__media { order: -1; }
  .product-chapter__copy { padding: 40px 24px 0; }
  .product-pair { gap: 20px; margin-block: 32px; }
  .product-pair img { max-height: 170px; }
  .product-chapter .sticker-link { width: 170px; min-height: 49px; font-size: 18px; }
  .story { grid-template-columns: 1fr; gap: 24px; width: calc(100% - 64px); padding-block: 40px; }
  .story__copy p { line-height: 1.7; }
  .store-chapter { min-height: 517px; padding: 75px 0 78px; }
  .store-portrait { width: 211px; max-width: 70%; margin-inline: auto; box-shadow: -7px 7px 0 var(--dbt-ink); }
  .store-band { top: 375px; height: 64px; }
  .store-band__link { width: 100%; margin: 0; font-size: 30px; }
  .site-footer { padding: 44px 24px 24px; }
  .site-footer__inner { flex-direction: column; gap: 24px; text-align: center; }
  .footer-wordmark { width: 230px; }
  .value-badges { gap: 10px; }
  .value-badge { width: clamp(42px, 14.9vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-link { transition: none; }
  .sticker-link:hover { transform: none; }
}
```

The large heading artwork, decorative placement, photo cropping, and concept/sustainability compositions require project-specific markup and assets. Keep those decisions separate from the measured text styles. Do not treat the illustrative starter layout as an exact reconstruction at untested widths.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--dbt-paper);
  --color-peach: var(--dbt-peach);
  --color-lilac: var(--dbt-lilac);
  --color-footer: var(--dbt-footer);
  --color-ink: var(--dbt-ink);
  --color-concept: var(--dbt-pink);
  --color-teal: var(--dbt-teal);
  --color-marker: var(--dbt-marker);
  --font-brand-body: var(--dbt-font);
  --font-action: var(--dbt-action-font);
  --text-product: var(--dbt-product-size);
  --text-story: var(--dbt-story-size);
  --radius-sticker: 999px;
  --shadow-print: 4px 5px 0 #000;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Diane Be True official homepage](https://www.diane-betrue.com/). The supplied record reports HTTP `200` and no URL change.
- **Capture time:** `2026-09-22T15:29:49.405Z`, or September 23, 2026 at 00:29:49 JST.
- **Visual evidence:** three original-page desktop captures at `1440 × 1000` and two mobile captures at `390 × 844`, showing opening, middle, and ending states as described in the scope.
- **Rendered evidence:** document dimensions, section and link bounds, text content, destination URLs, computed backgrounds, font stacks, sizes, weights, line heights, tracking, and selected custom properties at both viewports.
- **Capture conditions:** the supplied process waited for load, sampled layout/text stability, finite motion, and visible-image decoding within stated time limits. Initial observation lasted at least five seconds. Perpetual animation was temporarily paused for readiness checks and resumed. SharedWorkers and service workers were disabled.
- **Interaction limits:** scrolling supplied several positions, but no menu-open, hover, keyboard-focus, or clicked-destination state was provided. Link destinations are known from the DOM; their resulting pages were not inspected.
- **Technical limits:** full stylesheets, exact breakpoints, asset manifests, loaded-font verification, and animation timelines were not supplied. Transparent outer sections do not establish every child surface. The absent mobile hero photograph remains an observed state with an unverified cause.

All exact values above come from the supplied current-page inspection. Visual estimates and recommended implementation choices are identified separately.