# CHIMJUN — Style Reference

> Monumental hairline lettering, warm paper, and a narrow window onto Okinawa.

**Original URL:** [https://chimjun.jp/](https://chimjun.jp/)
**Final URL:** [https://chimjun.jp/](https://chimjun.jp/)
**Theme:** warm light canvas with a black salon portal and a muted blue-gray footer.
**Inspected:** September 29, 2026, from the supplied browser evidence retrieved at 12:56:03.981 UTC / 21:56:03.981 JST.
**Viewports:** desktop **1440 × 1000 CSS pixels**; mobile **390 × 844 CSS pixels**.
**Scope:** the current corporate and brand homepage: opening identity composition, company introduction, product index, professional salon service, salon presentation, news, journal, contact/shop handoff, and footer. Visual captures show the desktop opening, salon portal, and footer, plus the mobile opening and footer. The rendered DOM supplies additional measurements for the intervening sections. Linked pages and shop destinations were not inspected.

CHIMJUN presents an Okinawa-based beauty company through an unusually large identity system. A delicate, high-contrast wordmark stretches across the opening and returns near the bottom of the page. Warm beige and dark brown give the interface a quiet material character; a tightly cropped photograph of rock, vegetation, and sky provides its strongest natural color. Neutral grotesk lettering carries the English statements, Japanese explanations, navigation, and product information.

The homepage alternates between spacious brand compositions and structured indexes. Products occupy a ruled matrix, news uses broad linked rows, and journal entries extend horizontally with alternating vertical offsets. The footer introduces a cool blue-gray field and a distinctive diagonal progression of information. Preserve these changes in scale and alignment: they explain the site more accurately than a uniform collection of cards.

## How to Read This Reference

- **Measured** means a value recorded in the supplied rendered DOM or computed styles. Tables round measurements to two decimal places where practical.
- **Visual estimate** means an approximation from an original-page screenshot. Photo bounds, the footer background color, and the visible hero lettering size fall into this category.
- **Derived** means arithmetic based on recorded measurements, such as a width percentage or a source-root equivalent.
- **Recommended** means an implementation choice for a new build. Breakpoints, accessibility additions, fallback fonts, and the Quick Start interpolation rules are recommendations.
- Font-family declarations identify the requested source families; the evidence does not independently verify which font file rendered every glyph.
- The DOM includes offscreen navigation and repeated heading copies. Their presence does not establish that they were visible in the captured state.
- Some contact-panel coordinates differ from their placement in the scrolled footer captures. Treat the measurements as state-specific snapshots, not a complete map of scroll animation.
- All tokens introduced here are descriptive aliases. The only supplied source custom properties are Swiper defaults, which do not describe the visible brand palette.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Warm Paper | `#eae3da` | `--color-paper` | **Measured:** body background; also the computed light text color in the footer and dark capsules |
| Brown Ink | `#3f342f` | `--color-ink` | **Measured:** navigation, body copy, headings, and ordinary links |
| Capsule Brown | `#484036` | `--color-capsule` | **Measured:** business and salon capsule backgrounds in the DOM |
| Salon Gray | `#a6a19c` | `--color-salon-text` | **Measured:** salon heading, address, explanatory paragraph, and detail link |
| Portal White | `#ffffff` | `--color-portal-text` | **Measured:** the large `OUR PRODUCT` and `OUR SALON` heading text |
| Portal Black | approximately `#000000` | `--color-portal` | **Visual estimate:** the large black field in the desktop salon capture; the selected anchor itself has a transparent computed background |
| Coastal Blue Gray | approximately `#83979c` | `--color-footer` | **Visual estimate:** footer field in desktop and mobile screenshots; its container background was not included in the computed-style sample |
| Quiet Rule | ink or paper with low opacity | `--color-rule` | **Recommendation:** reproduce the restrained separators; exact source rule colors were not supplied |

The warm canvas is continuous across much of the homepage. Dark text and rules establish hierarchy without a large set of accent colors. Photography supplies sky blue, forest green, stone gray, and warm hair tones.

The footer color is a local section treatment, not evidence of a user-selectable theme. Likewise, the black salon panel is the observed captured surface; the evidence does not establish whether it is permanently black or a background for media.

### Incidental Source Variables

The DOM exposes `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px`. These are library defaults. No supplied screenshot establishes bright blue as a visible brand accent or 44px as the size of the site's gallery controls. Do not include that blue in the primary design system.

## Tokens — Typography

### Grotesk Text — Navigation, Body Copy, and Links

**Declared source stack:**

`neue-haas-grotesk-text, noto-sans-cjk-jp, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, serif`

Most sampled text uses weight **400**. English utility labels are compact and frequently uppercase. Tracking commonly resolves to **0.03em**. Japanese paragraphs use normal tracking and more generous line spacing.

The root and some structural containers report `Times`. Their styled descendants explicitly request the grotesk stack, so those inherited container values should not be interpreted as the visible body typography.

### Grotesk Display — Statements and Section Headings

**Declared leading family:** `neue-haas-grotesk-display`, followed by the text stack.

Sampled company statements, news headings, salon headings, and contact statements use weight **500**, usually with line height close to **1**. The visual character is clear and restrained. Large size and careful line breaks supply emphasis instead of heavy weight.

### CheyraRegular — Section Portals

**Declared leading family:** `CheyraRegular`.

This family is directly evidenced on `OUR PRODUCT` and `OUR SALON`. It produces tall, fine, high-contrast display lettering. At desktop scale, its narrow strokes are paired with a large open arrow and substantial empty space.

Use this face only when the appropriate font asset is available. A generic serif fallback will change the proportions substantially.

### Wordmark — Preserve as Identity Artwork

The opening `H1` and footer brand heading have empty text in the element extract, while the screenshots clearly show the wordmark. Its exact asset format and font construction were not supplied.

Treat the wordmark as supplied identity artwork. Do not assume that typing `CHIMJUN` in CheyraRegular recreates it merely because the portal headings use that font. The measured heading boxes also do not equal the visible ink bounds of the artwork.

### Type Scale

| Role | Desktop at 1440px | Mobile at 390px | Weight / leading / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Hero statement, visible lettering | approximately `76–80px` | approximately `31px` | Three lines, approximately one-em leading | Visual estimate; child text styles were not sampled |
| Company opening statement | `61.71px` | `24.96px` | `500`, line height `1`, tracking `0.03em` | Measured |
| Company mission statement | `61.71px` | `26px` | `500`, line height `1`; mobile tracking `0.04em` | Measured |
| News / journal section heading | `61.71px` | `36.4px` | `500`, line height `1`, tracking `0.03em` | Measured |
| Professional service heading | `61.71px` | `47.84px` | `500`, line height `1`, tracking `0.03em` | Measured parent heading |
| Portal display heading | `205.71px` | `47.84px` | `400`, line height `0.9`, tracking `0.03em` | Measured |
| Contact statement | `61.71px` | `31.2px` | `500`, line height `1`, tracking `0.03em` | Measured |
| Standard Japanese body | `14.4px / 25.2px` | `12.48px / 21.84px` | `400`, normal paragraph tracking | Measured |
| Company introduction body | `14.4px / 28.8px` | `12.48px / 24.96px` | Leading `2` | Measured |
| Product link / ordinary detail link | `18.51px` | `16.64px` | `400`, usually line height `1`, tracking `0.03em` | Measured on anchor |
| Desktop primary navigation | `13.37px` | Not visible as a horizontal row | `400`, line height `1`, tracking `0.03em` | Measured |
| Mobile menu entries | Not applicable to visible hero row | `16.64px` | `400`, line height `1`, tracking `0.03em` | Measured offscreen menu entries |
| Footer links | `16.46px / 21.39px` | `14.56px / 18.93px` | `400`, tracking `0.03em` | Measured |
| Contact-panel explanation | `12.34px / 22.22px` | `11.44px / 20.59px` | `400`, normal tracking | Measured |
| Privacy link | `12.34px` | `11.44px` | Line height `1`, tracking `0.03em` | Measured |

**Hero measurement caveat:** its parent `H2` reports `14.4px` on desktop and `12.48px` on mobile, but the visible lettering is much larger. The parent boxes are **240px** and **93.56px** high respectively, each containing three lines. Do not use the inherited parent font size to reproduce the hero.

## Tokens — Spacing & Shapes

### Source Root and Derived Units

The measured root size is **10.2857px** on desktop and **10.4px** on mobile. In this document, **1u** means the root size at that sampled viewport.

Many dimensions are simple multiples of that unit. These equivalences are calculated from the measurements; a complete source spacing-token system was not supplied.

The desktop root happens to equal `viewport width / 140`, and the mobile root equals `viewport width / 37.5`. These relationships fit the two samples. They do not prove the original breakpoint, clamping behavior, or root formula at other widths.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement | Derived relationship |
| --- | --- | --- | --- |
| General outer gutter | `41.14px` | `15.6px` | `4u` desktop; `1.5u` mobile |
| Mobile company-label inset | — | `10.4px` | `1u` |
| Hero top padding | `50px` | `83.2px` | Desktop measured directly; mobile `8u` |
| Product tile padding | `24.69px` | `16.64px` | `2.4u` / `1.6u` |
| Detail-link arrow reservation | `30.86px` | `24.96px` | `3u` / `2.4u` left padding |
| Introduction paragraph to link | `36px` | approximately `24.96px` | Derived from element bounds |
| Introduction bottom padding | `102.86px` | `52px` | `10u` / `5u` |
| News horizontal inset | `129.6px` | `15.6px` | Desktop `9vw`; mobile `1.5u` |
| News top padding | `154.29px` | `74.88px` | `15u` / `7.2u` |
| News bottom padding | `123.43px` | `74.88px` | `12u` / `7.2u` |
| Journal card side padding | `61.71px` | `20.8px` | `6u` / `2u` |
| Journal alternating offset | `90px` | `49.92px` | Measured opposing top/bottom padding |
| Contact-panel mobile inner inset | — | approximately `20.8px` | Derived from panel and paragraph bounds |

### Border Radius and Linework

| Element | Treatment | Evidence |
| --- | --- | --- |
| Product links | Square, `0px` radius | Computed |
| Ordinary text links | Unboxed, `0px` radius | Computed and visible |
| Hero photograph | Square rectangle with a fine dark edge | Screenshot |
| Contact panel | Square paper rectangle | Screenshot |
| Business / salon capsules | `102.86px` desktop radius; `104px` mobile radius | Computed; effectively fully rounded at their approximately 48px height |
| Product matrix separation | Approximately `1px` between measured cells | Derived from positions; exact separator construction unknown |
| Footer rules | Fine, low-contrast horizontal lines | Screenshot; opacity not supplied |
| Arrows | Open heads and simple straight shafts | Screenshot; use consistent SVG strokes in a new implementation |

The rounded business capsule is a specific exception. It is not a general radius token for product tiles, images, or content panels.

### Layout Measurements

| Element | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Document height | `11,557.25px` | `10,911.56px` | Measured at the supplied state; not an implementation target |
| Hero section | `1440 × 1606.95px` | `390 × 1039.91px` | The opening section extends beyond the initial viewport |
| Opening wordmark heading box | `1357.72 × 295.02px`, at `(41.14, 50)` | `358.81 × 91.89px`, at `(15.59, 83.19)` | Measured container bounds |
| Visible desktop wordmark ink | approximately `1150px` wide | Nearly fills its `358.81px` box | Visual estimate; container width is larger on desktop |
| Hero statement box | `1357.72 × 240px`, top `469.81px` | `358.81 × 93.56px`, top `206.27px` | Measured |
| Hero photograph | approximately `390 × 612px`, at `(1009, 338)` | approximately `108px` wide, starting at `(141, 337)` | Visual estimates; mobile bottom extends below the screenshot |
| Product / salon portal | `1440 × 810px` | `390 × 452.39px` | Measured; desktop happens to be `16:9` |
| Standard product tile | `479.33 × 529.53px` | `390 × 510.30px` | Three columns become one |
| News list width | `1180.81px` | `358.81px` | Measured |
| Typical news row height | `99.70px` | `121.34px`; longer entries `146.83px` | Measured; mobile grows with wrapping |
| Journal card bounds | `440.20px` wide | `269.09px` wide | Track extends horizontally beyond the viewport |
| Contact-panel apparent width | approximately `835px` | `351px` | Desktop supported by visible panel edge and inner geometry; mobile screenshot and DOM agree |
| Footer brand heading box | `1357.72 × 390px` | `358.81 × 92.03px` | Measured; visible artwork occupies less than the desktop container height |

## Components

### Global Header and Navigation

**Role:** company identification and access to the main site areas.

The mobile capture shows a small company label at the upper left and a two-line menu icon at the upper right. The company link is positioned at approximately **10.4px from the left** and **16.63px from the top**. The recorded menu button is **24 × 24px**, at approximately `(355.61, 18.72)`.

Its navigation entries exist above the viewport in the measured closed state. They include the main site sections, an online-shop link, and a business capsule. Their destinations are real anchors, but the menu was not opened in the supplied evidence. Do not invent its complete open layout, focus behavior, or overlay treatment.

On desktop, the opening composition contains a separate horizontal navigation row beneath the large wordmark. `ABOUT` begins at **x = 360px**, and the row continues through `CONTACT` near **x = 1011px**. Its top is approximately **396.44px**. Meanwhile, the fixed-header company link and navigation have negative vertical coordinates in the sampled initial state.

The DOM also reports a secondary brand lockup and a salon capsule within the hero. They are not clearly distinguishable in the supplied opening screenshot. Their computed styles are useful evidence, but they should not all be forced into the visible initial composition.

### Opening Brand Composition

**Role:** establishes identity, positioning, and an Okinawan sense of place.

The desktop arrangement has five principal elements:

1. A centered, very large wordmark near the top.
2. A compact horizontal navigation row beneath it.
3. A centered English statement across three lines.
4. A narrow landscape photograph pushed to the right and overlapping the wordmark's lower vertical region.
5. A large downward arrow near the bottom center of the first viewport.

The statement reads:

> For a beautiful  
> today, tomorrow,  
> and beyond

The photograph begins around **y = 338px**, close to the wordmark's lower edge, while the statement begins around **y = 470px**. This creates a layered composition rather than an ordinary equal-width text/image split. Keep the broad empty paper field to the left of the image.

The downward cue is approximately **64 × 96px**, centered near **x = 720px**, with its top near **y = 850px**. The screenshot establishes its appearance, not whether it is clickable.

On mobile, the composition becomes vertical: company/menu strip, wordmark, three-line statement, then a very narrow centered photograph. The wordmark starts at **83.19px**, the statement at **206.27px**, and the photo around **337px**. The photo is only about **28% of the viewport width**, with extensive paper on both sides. It continues below the first screen. Preserve this unusually slender crop rather than expanding it automatically to the full mobile width.

### Company Introduction

**Role:** connects the brand to Okinawa and explains its beauty-company mission.

Desktop uses large English statements and a comparatively small Japanese paragraph placed toward the right. The Japanese text begins at approximately **x = 923.67px**, occupies **475.19px**, and uses **14.4px type with 28.8px leading**. The `About Us` link follows with a reserved arrow space.

The second English statement occupies a broad central region, approximately **1008px** wide. Its placement gives the section a composed, editorial rhythm rather than a compact text block.

Mobile changes the reading sequence. The mission statement precedes the Japanese paragraph in the measured layout, and both use the general **15.6px** page gutter. The Japanese paragraph becomes **358.81px** wide. Reproduce this responsive ordering explicitly instead of simply shrinking the desktop right-hand column.

No introduction photograph is visible in the supplied captures, and no relevant asset URL was supplied. Its content should not be invented from the company description.

### Product and Salon Portals

**Role:** large linked entrances to major areas of the site.

Each portal is a full-width anchor. Both measure **810px high on desktop** and **452.39px on mobile**. The primary heading combines an open rightward arrow with a large CheyraRegular label.

For the desktop salon portal, the measured heading box is approximately **945.66 × 185.14px**, beginning at **x = 247.17px** within the page. A **133.71px** left padding reserves space for the arrow. The screenshot shows white lettering and arrow on a black field, centered with generous empty space above and below.

On mobile, the salon heading becomes approximately **234.55 × 43.05px** with a **45.76px** arrow reservation. Portal text is **47.84px**, not a uniformly scaled version of the enormous desktop label.

Repeated heading copies carry a desktop animation declaration. The visible screenshot shows a single central label, so the duplicate nodes must not be interpreted as several simultaneously visible headline rows. Exact clipping and activation behavior remain unverified.

### Product Index Tile

**Role:** direct entry to a specific shop product.

The desktop matrix contains five numbered product anchors and a sixth overview tile. The recorded items are premium shampoo, regular shampoo, treatment, hair milk, and hair gelee. Labels use parenthesized three-digit numbers such as `(001)` with uppercase English names.

Each standard desktop tile is approximately **479.33px wide** and **529.53px high**, with **24.69px padding**. The positions establish three columns and two rows separated by approximately one pixel. The sixth cell contains the brand statement and `View all`.

Mobile is a single full-width column. Each standard product tile remains substantial at approximately **510.30px high**, with **16.64px padding**. The overview tile is slightly shorter, approximately **493.17px**. This is a tall product sequence, not a two-column mobile thumbnail grid.

The anchors and dimensions are measured, but the supplied screenshots do not show the product imagery. Bottle shapes, image backgrounds, hover swaps, and image fitting cannot be specified as original-page findings.

### Professional Service Feature

**Role:** introduces the salon-oriented `chemi na chura` offering.

The desktop capture shows the lower portion of a paper-colored text panel on the left and a close photograph of long dark hair and a shoulder on the right. Their split occurs near the page midpoint. The text panel has a fine vertical boundary against the image.

The DOM supplies a large mixed brand/service heading, a salon qualifier, Japanese explanatory copy, and `View More`. The lower desktop paragraph is approximately **521.94px wide**, beginning at **x = 20.56px**. Its detail link uses the same arrow-and-text construction as `About Us`.

The mobile text is nearly full width within the standard gutter. The service heading is **47.84px**, notably larger than ordinary mobile section headings. Preserve that distinction. The mobile image arrangement was not visually captured; do not claim that its crop or order has been verified.

### Salon Presentation and Gallery Affordance

**Role:** introduces the physical salon and its role as a place to experience products and techniques.

Below the portal, the DOM records `OUR SALON / IN OKINAWA`, a linked address, Japanese explanatory copy, and `View Our Salon`. These use **Salon Gray `#a6a19c`**. A dark brown panel is visible at the lower edge of the desktop salon capture, but its complete background styling is not supplied.

Desktop text begins at approximately **x = 123.42px**. The explanatory paragraph is **411.42px** wide. Mobile uses a more generous local inset of approximately **24.96px**, with a **340.08px** paragraph width.

The text includes a **`1 / 4`** gallery indicator. The mobile extraction additionally includes `NEXT IMAGE`. These establish a gallery affordance and a four-item count, but no next action, drag gesture, autoplay, or slide transition was exercised. Preserve the counter and provide explicit controls in a new implementation without presenting an invented interaction as measured behavior.

### News Release Index

**Role:** compact access to announcements, press information, products, and events.

The desktop section uses a narrower content region than the product matrix: **1180.81px**, inset **129.6px** from either side. A large `NEWS RELEASE` heading appears on the left, while category links form a small vertical group near the right.

Six broad linked rows follow. Each carries a date, Japanese title, and category. The row anchor uses flex layout, **8.23px top padding**, and **61.71px bottom padding**, producing a measured row height near **99.70px**. The exact child alignment and divider styling were not included in the element sample.

Category links point to category-specific URLs such as `/news?cat=information`. This establishes navigation destinations; it does not establish an in-place filtering interaction.

At mobile size, the section returns to the standard **15.6px** gutter. Rows grow to approximately **121–147px** depending on title wrapping. The category-link group is absent from the mobile rendered link list. `View All` remains aligned toward the right below the entries.

### Journal Track

**Role:** presents an extended stream of dated editorial content.

Desktop uses a vertical title area alongside a horizontal sequence of article anchors. The `JOURNAL` heading's measured box is **61.72px wide × 289.67px high**; the nearby `View All` link also has a tall, narrow box. These bounds establish the vertical arrangement, but do not identify whether the source uses rotation or writing mode.

Article bounds are approximately **440.20px wide**. Their x coordinates continue well beyond the viewport. Alternate articles have **90px top padding** instead of bottom padding, creating a staggered rhythm within the same row.

Mobile keeps the horizontal sequence. Cards are approximately **269.09px wide**, about **69% of the viewport**, and their alternating inset becomes **49.92px**. The section heading is horizontal above the track, and `View All` appears after it near the lower right.

The mobile first card starts at x = 0 and the second near x = 270.09, so the next item can be partially visible. Desktop advances and bounding widths differ slightly; do not infer a precise negative gap without the track's transform and sizing rules.

Dates and Japanese titles are documented. Article image assets and actual swipe, drag, or keyboard behavior are not. A native horizontally scrollable list is a reasonable implementation recommendation, not a verified source mechanism.

### Contact and Shop Panel

**Role:** separates professional inquiries from customer purchases.

The footer area contains an English statement followed by two audience-specific groups:

- `FOR SALON`: inquiry and information-request copy with `Contact`.
- `FOR CUSTOMER`: official-shop copy with `Online Shop` and a northeast arrow.

Desktop inner text regions are approximately **334.8px** wide and appear in parallel columns in the DOM. Mobile stacks the two groups inside a **351px-wide** paper panel, inset approximately **19.5px** from the viewport edges. Paragraphs begin at **x = 40.30px**, leaving approximately **20.8px** of inner padding.

The mobile screenshot shows a fine divider above the customer group, compact text, and an unboxed shop link. The card has square corners and no visible elevation shadow. It sits above the blue-gray footer field.

Its scrolled appearance and the initial DOM coordinates do not describe a single static position. An overlap can be used in an adaptation, but the source pinning or scroll choreography is not established.

### Footer Wordmark and Directory

**Role:** closes the page with strong identity and a concise directory.

The wordmark returns in warm paper color over blue gray. On desktop it nearly fills the available **1357.72px** inner width; on mobile it fills approximately **358.81px**. The mobile visible mark is about **92px** high.

The desktop directory has an unusual staircase arrangement. Four labels start at quarter-width positions:

| Group | Measured content x position | Relative start within the inner width |
| --- | --- | --- |
| Site map | `41.14px` | `0%` |
| Salon address | `380.56px` | `25%` |
| Online shop | `720px` | `50%` |
| Social links | `1059.42px` | `75%` |

The corresponding values occupy successive horizontal rows. Thin rules extend across the inner page width while the content steps down and to the right. The result is not a conventional four-column footer with all values on one baseline.

The sitemap wraps into two lines and uses slash separators. The salon address is underlined. The shop link has a small northeast arrow. Social labels are separated by slashes. In the supplied DOM, the social anchors point to the homepage, so their external social destinations are not established.

Mobile replaces the staircase with a vertical stack: heading, value, separator, then the next group. All groups align to the **15.6px** gutter. Copyright and privacy remain at opposite ends of the final line, using approximately **11–12px** text.

## Tokens — Motion & Interaction

| Treatment | Recorded value or state | What is established | Limitation |
| --- | --- | --- | --- |
| Header movement | `transform 0.4s ease-in-out` | A transform transition is declared | Scroll trigger and full sequence were not exercised |
| Desktop company-logo movement | `transform 0.4s ease-in-out` | Same transition on the sampled logo anchor | Initial anchor is above the viewport |
| Mobile company label and menu button | `0.6s cubic-bezier(0.425, 0, 0, 1)` | Duration and easing are recorded | Complete changed-property set and interaction result are not supplied |
| Mobile menu links | `transform 0.4s ease-out` | Transform transition on offscreen entries | Menu opening was not tested |
| Portal heading | `transform 0.4s ease-out` | Heading has a transform transition | Hover displacement or other trigger is unknown |
| Repeated desktop portal headings | `30s linear infinite forwards endless` | Continuous animation is declared on duplicate headings | Exact keyframes, clipping, direction, and activation are not supplied |
| Mobile portal | Central heading sampled with no animation | The sampled central heading is static | Does not prove every mobile decorative animation is disabled |
| Salon gallery | `1 / 4`; mobile `NEXT IMAGE` | Multiple-image affordance exists | No verified slide change, autoplay, or gesture |
| Journal | Horizontally extending article bounds | A horizontal content track exists | Input method and movement behavior untested |
| Hero and contact composition | State-dependent positions | Screenshots and DOM show the captured arrangements | No verified parallax, reveal duration, or pinning formula |

Many elements report only `transition: all` without a useful nonzero duration. That is not sufficient evidence for a specific hover effect.

The collection process waited for document load, image decoding, finite animation readiness, and sampled layout stability. Perpetual animations were temporarily paused during readiness checks and then resumed. This supports the supplied captures, but it is not an interaction recording or a guarantee that every delayed medium was present.

For a new implementation, use a restrained **400ms transform transition** where appropriate, and treat the **30-second loop** as an optional decorative behavior. Provide a static reduced-motion state. Do not add continuous movement merely to fill an evidentiary gap.

## Surfaces

| Layer | Appearance | Structural purpose |
| --- | --- | --- |
| Main canvas | Solid warm paper | Unifies the opening, copy, and indexes |
| Hero image | Narrow, sharp-edged photograph with fine outline | Introduces place and color without filling the canvas |
| Product matrix | Square cells, continuous alignment, approximately one-pixel separation | Gives the product range a catalog structure |
| Salon portal | Captured black field with white display lettering | Creates a strong pause and major navigation entrance |
| Salon information | Muted light-gray text associated with a dark panel | Separates the physical-salon story from paper sections |
| Contact/shop panel | Square paper panel with restrained division | Groups the two audience pathways |
| Footer | Blue-gray field with paper lettering and fine rules | Provides a cool closing register and directory |
| Business capsule | Dark brown, fully rounded, light text | Specific emphasis for a professional audience link |

The inspected design does not show a general shadow-based elevation system. Separation is achieved through large color fields, linework, image edges, and changes in composition.

## Imagery

The opening photograph shows a rocky outcrop, dense vegetation, palms, and a pale blue sky. Its visual power comes from the crop: a relatively narrow vertical window cuts into an expansive beige composition. Mobile narrows that window further and allows it to continue below the fold.

The professional-service fragment shows long, smooth dark hair and skin at close range. It introduces a tactile beauty image with a different scale from the landscape. Keep the distinction between environmental photography and intimate hair imagery.

Do not impose a single crop rule on every photograph. A landscape may intentionally use `cover` in a slender frame, while product imagery may need a different fitting strategy. Product and journal image treatments were not visually documented here.

### Observed Asset References

No direct image, video, SVG, or font-file URLs were included in the supplied original-page evidence. The following are visual references, not downloadable asset paths.

| Visual | Observed use | Available evidence |
| --- | --- | --- |
| CHIMJUN wordmark | Opening and footer | Desktop and mobile captures; heading container bounds |
| Okinawan landscape | Opening vertical image | Desktop and mobile captures; estimated crop bounds |
| Long hair / shoulder photograph | Professional-service split panel | Upper fragment of desktop salon capture |
| Open directional arrows | Hero, portal, detail links, shop link | Visible captures; some link padding measurements |
| Product media | Inside or associated with product entries | Product-link structure is documented; media appearance and URLs are not |
| Salon gallery media | Four-item gallery | Counter and control text; full images not documented |
| Journal media | Article track | Link geometry and titles; images not visually documented |

Use supplied brand artwork and suitable image files when available. Do not invent source filenames or treat a content title as proof of a photograph's subject.

## Layout & Responsive Behavior

### Desktop: Large Compositions and Multiple Alignment Systems

The homepage uses several deliberate widths rather than one universal centered container:

- **41.14px outer gutters** for the opening and footer.
- **Full-width bands** for major portals and the product matrix.
- **129.6px insets** for news.
- A **right-positioned 475px paragraph** within the introduction.
- A horizontal journal track beside a vertical title area.
- Quarter-width alignment points within the footer directory.

These alignments make the page feel composed across its full width. Applying the same max-width and side padding to every section would erase much of that character.

### Mobile: Recomposition, Not Uniform Shrinking

| Area | Desktop | Observed mobile change |
| --- | --- | --- |
| Navigation | Horizontal hero row | Small company label and menu icon; menu entries offscreen |
| Hero image | Right-aligned, approximately 390px wide | Centered vertical slit, approximately 108px wide |
| Hero statement | Approximately 80px visible type | Approximately 31px while retaining three lines |
| Introduction | Statements and right-hand paragraph | Full-width text with changed visual ordering |
| Product index | Three columns | One full-width column |
| Portal heading | Approximately 206px | Approximately 48px |
| News | Narrower desktop container and category group | Standard mobile gutter; taller wrapped rows; category group not listed |
| Journal | Horizontal track beside vertical heading area | Horizontal track beneath a horizontal heading |
| Contact groups | Parallel columns in DOM | Stacked within a 90%-width panel |
| Footer | Staircase directory | Four vertically stacked groups |

Only the two stated viewports were supplied. The exact breakpoint is unknown. The Quick Start uses **48rem** as a recommended breakpoint and fits the recorded values at the two inspection widths.

The first screen does not contain the whole hero at either viewport. Avoid imposing a strict `100vh` section height that clips the mobile photograph or collapses the original breathing room. Also avoid deriving fixed document positions from the contact-panel snapshots; their geometry varies with capture state.

## Do’s and Don’ts

### Do

- Keep the measured paper and ink pair: `#eae3da` and `#3f342f`.
- Preserve the wordmark as artwork and allow it to dominate both the opening and the footer.
- Pair fine display lettering with neutral grotesk text and modest utility labels.
- Retain the hero's three-line statement and its deliberately narrow photograph.
- Use distinct section widths: full-bleed products, inset news, offset introduction copy, and quarter-width footer alignments.
- Keep product tiles square-cornered and convert the desktop matrix into one mobile column.
- Preserve the journal's horizontal sequence and alternating vertical offsets.
- Make the desktop footer step diagonally through successive ruled rows.
- Maintain separate salon-inquiry and customer-shop pathways.
- Mark estimated colors, inferred geometry, and new interaction behavior explicitly when implementing from this reference.

### Don’t

- Don't replace the large wordmark with an ordinary text heading in an assumed font.
- Don't use the hero parent element's inherited 14.4px or 12.48px value as the visible headline size.
- Don't turn every content area into a rounded card with a shadow.
- Don't widen the mobile hero photograph to full width by default.
- Don't convert the mobile product sequence into a compact two-column grid.
- Don't flatten the footer into four identical desktop columns.
- Don't promote the Swiper default blue into a brand color.
- Don't infer video, autoplay, parallax, hover distance, or menu behavior from a static frame or transition declaration alone.
- Don't fabricate product packaging, journal photography, or asset URLs where the evidence is absent.
- Don't assume offscreen repeated headings should appear as duplicate accessible content.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified properties of the inspected site:

- Give the graphical wordmark an accessible name. Empty extracted heading text does not establish whether the original artwork already has an accessible alternative.
- Expand the mobile menu's measured 24px control to a comfortable touch target, while retaining the small visible two-line icon. Use `aria-expanded` and connect it to the menu panel.
- Keep closed navigation out of keyboard focus order. If implemented as a modal menu, support Escape and restore focus to the opener.
- Provide explicit gallery buttons and keyboard access for horizontal article navigation. Do not rely solely on dragging.
- Hide decorative repeated portal text from assistive technology and retain one meaningful link name.
- Honor reduced-motion preferences and provide a way to stop continuous decorative movement where used.
- Review the small mobile body text and footer contrast. Increase text sizes or adjust local foreground/background contrast where necessary without changing the wordmark's graphic role.
- Keep an underlined or otherwise persistent distinction for address and inline links, with a visible focus indicator.
- Validate the social-link destinations before using them in a new build; the supplied links resolve to the homepage.
- Reserve image dimensions to prevent layout shifts, and preserve the intended crop when substituting assets.

## Agent Prompt Guide

### Quick Color Reference

- Main paper: **`#eae3da`**, measured.
- Main text and linework: **`#3f342f`**, measured.
- Professional capsule: **`#484036`** with paper text, measured.
- Salon secondary text: **`#a6a19c`**, measured.
- Portal lettering: **`#ffffff`**, measured.
- Salon portal surface: approximately **`#000000`**, captured appearance.
- Footer: approximately **`#83979c`**, visual estimate; use paper-colored lettering.
- Rules: subtle ink or paper opacity, implementation recommendation.

### Overall Prompt

“Create a corporate and brand homepage for an Okinawa-based haircare company, following CHIMJUN's observed visual structure. Use warm paper `#eae3da`, brown ink `#3f342f`, an oversized supplied wordmark, fine high-contrast portal lettering, and neutral grotesk body text. Build the opening around a three-line centered statement and a narrow landscape crop on the right. On mobile, stack the wordmark and statement above a slender centered photo. Continue with an offset company introduction, a three-column product matrix that becomes one column on mobile, large linked section portals, an inset news index, and a horizontal journal track with alternating offsets. Finish with a paper contact/shop panel and a muted blue-gray footer whose desktop information steps down through successive ruled rows. Keep motion restrained and distinguish verified transition values from newly designed behaviors.”

### Example Component Prompts

1. **Desktop hero:** “At 1440px wide, place a fine CHIMJUN wordmark near y = 50px, a small centered navigation row near y = 396px, and a three-line statement near y = 470px. Use approximately 80px statement type and a square-edged 390 × 612px landscape crop near the right edge, beginning around y = 338px. Preserve the broad empty paper field and the centered downward arrow.”
2. **Mobile hero:** “At 390px wide, use approximately 15.6px content gutters, a wordmark near y = 83px, and a three-line statement around 31px. Center a landscape crop only about 108px wide beneath the statement. Let its image continue below the first screen rather than making a full-width banner.”
3. **Section portal:** “Create a full-width linked portal with a large open right arrow and a thin high-contrast serif title. Match the captured salon appearance with white lettering on black. Use approximately 206px desktop title type and 48px mobile title type. Do not invent background video or a hover animation.”
4. **Product index:** “Create five numbered product links and one overview tile in a square-cornered three-column matrix with approximately one-pixel divisions. At 1440px, tiles are about 479 × 530px with 25px padding. At 390px, use one full-width column with about 17px padding and tall 510px product entries. Use supplied product assets; do not assume their appearance.”
5. **Journal track:** “Lay out dated Japanese article links in a horizontal sequence with alternating top and bottom spacing. Use approximately 440px-wide desktop cards and 269px-wide mobile cards. Put the desktop journal heading in a vertical side area and move it above the track on mobile. Implement accessible horizontal navigation as a new behavior.”
6. **Footer:** “Use a muted blue-gray field, a nearly full-width paper-colored wordmark, small uppercase group labels, and fine horizontal rules. On desktop, start the sitemap at 0%, address at 25%, shop at 50%, and social links at 75%, placing their values in successive rows. On mobile, stack the four groups with separators and retain the slash-separated sitemap.”

## Quick Start

### CSS Custom Properties

This CSS is a **static implementation adaptation**, not recovered source code. It preserves the measured palette and typography roles, fits the two sampled viewport scales, and supplies the main layout relationships.

The footer hex, rule opacity, breakpoint, intermediate scaling, mobile photo height, native journal scrolling, and focus treatment are recommendations. Hero staging heights are fitted approximations. The source's complete scroll choreography and menu/gallery logic are not reconstructed.

Use a conventional root font size. The `--u` token carries the smaller source-derived unit without changing the meaning of `rem` elsewhere in the application. Font declarations below do not download font files. Supply the actual licensed font assets and wordmark separately; serif fallback metrics will differ.

Class anatomy: `.hero` contains `.hero-logo`, `.hero-nav`, `.hero-statement`, `.hero-photo`, and an optional SVG `.hero-cue`. A `.portal` contains `.portal-label`. Product and journal items should be semantic anchors. Each `.footer-group` contains one `h3` and one `.footer-value`.

```css
:root {
  /* Measured source colors */
  --color-paper: #eae3da;
  --color-ink: #3f342f;
  --color-capsule: #484036;
  --color-salon-text: #a6a19c;
  --color-portal-text: #fff;

  /* Screenshot approximations and recommended rule colors */
  --color-portal: #000;
  --color-footer: #83979c;
  --color-rule: rgb(63 52 47 / 22%);
  --color-footer-rule: rgb(234 227 218 / 22%);

  /* Source family names with practical fallbacks */
  --font-text: neue-haas-grotesk-text, noto-sans-cjk-jp,
    'Hiragino Kaku Gothic Pro', system-ui, sans-serif;
  --font-display: neue-haas-grotesk-display, var(--font-text);
  --font-portal: CheyraRegular, Georgia, serif;

  /* Recommended interpolation; matches 10.2857px at 1440px */
  --u: clamp(8px, 0.7142857vw, 12px);
  --gutter: calc(4 * var(--u));
  --text-body: calc(1.4 * var(--u));
  --text-link: calc(1.8 * var(--u));
  --text-section: calc(6 * var(--u));
  --text-portal: calc(20 * var(--u));
  --text-footer: calc(1.6 * var(--u));
  --text-small: calc(1.2 * var(--u));
  --tracking: 0.03em;
  --radius-pill: calc(10 * var(--u));

  /* Recorded timing values; behavior requires separate implementation */
  --motion-header: 400ms ease-in-out;
  --motion-transform: 400ms ease-out;
  --motion-mobile: 600ms cubic-bezier(0.425, 0, 0, 1);
  --motion-loop-duration: 30s;
}

* { box-sizing: border-box; }

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

a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking);
}

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

.hero {
  position: relative;
  min-height: 111.6vw;
  padding: 50px var(--gutter);
  isolation: isolate;
}

.hero-logo {
  width: min(80vw, 100%);
  margin-inline: auto;
  aspect-ratio: 3.905;
  object-fit: contain;
}

.hero-nav {
  display: flex;
  justify-content: center;
  gap: calc(4.75 * var(--u));
  margin-top: calc(5 * var(--u));
  font-size: calc(1.3 * var(--u));
  line-height: 1;
  letter-spacing: var(--tracking);
}

.hero-nav a { text-decoration: none; }

.hero-statement {
  position: relative;
  z-index: 1;
  margin: 60px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 5.555556vw;
  font-weight: 500;
  line-height: 1;
}

.hero-statement > span { display: block; }

.hero-photo {
  position: absolute;
  z-index: -1;
  top: 23.4722vw;
  right: var(--gutter);
  width: 27.083333vw;
  height: 42.5vw;
  margin: 0;
  border: 1px solid var(--color-ink);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-cue {
  position: absolute;
  top: 85svh;
  left: 50%;
  width: 64px;
  height: 96px;
  transform: translateX(-50%);
}

.mobile-header { display: none; }

.text-link {
  position: relative;
  display: inline-block;
  padding-left: calc(3 * var(--u));
  font-size: var(--text-link);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-decoration: none;
}

.text-link::before {
  position: absolute;
  left: 0;
  content: '→';
}

.business-link {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--color-capsule);
  color: var(--color-paper);
  font-size: calc(1.3 * var(--u));
  line-height: 1;
  text-decoration: none;
}

.introduction {
  padding: 0 var(--gutter) calc(10 * var(--u));
}

.introduction-copy {
  width: 35%;
  margin-left: auto;
  line-height: 2;
}

.portal {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-portal-text);
  background: var(--color-portal);
  text-decoration: none;
}

.portal-label {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  margin: 0;
  font-family: var(--font-portal);
  font-size: var(--text-portal);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: transform var(--motion-transform);
}

.portal-label svg {
  width: calc(10 * var(--u));
  height: auto;
  flex: none;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
}

.product-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 479.33 / 529.53;
  padding: calc(2.4 * var(--u));
  background: var(--color-paper);
  font-size: var(--text-link);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-decoration: none;
}

.news {
  padding: calc(15 * var(--u)) 9vw calc(12 * var(--u));
}

/* Recommended child layout; source row anchors use flex. */
.news-row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) auto;
  gap: calc(2 * var(--u));
  padding: calc(0.8 * var(--u)) 0 calc(6 * var(--u));
  border-top: 1px solid var(--color-rule);
  text-decoration: none;
}

/* Native horizontal scrolling is an implementation recommendation. */
.journal-track {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}

.journal-card {
  flex: 0 0 30.57vw;
  min-width: 0;
  padding: 0 calc(6 * var(--u)) 90px;
  scroll-snap-align: start;
  text-decoration: none;
}

.journal-card:nth-child(even) {
  padding-top: 90px;
  padding-bottom: 0;
}

.contact-panel {
  width: 58vw;
  margin-inline: auto;
  padding: calc(4 * var(--u));
  color: var(--color-ink);
  background: var(--color-paper);
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(4 * var(--u));
}

.contact-option {
  padding-top: calc(2 * var(--u));
  border-top: 1px solid var(--color-rule);
}

.contact-option p {
  font-size: var(--text-small);
  line-height: 1.8;
}

.site-footer {
  padding: calc(7 * var(--u)) var(--gutter) calc(3.5 * var(--u));
  color: var(--color-paper);
  background: var(--color-footer);
}

.footer-logo { margin-bottom: calc(7.2 * var(--u)); }

.footer-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-group { display: contents; }

.footer-group h3 {
  grid-row: 1;
  margin: 0 0 calc(2.4 * var(--u));
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1;
}

.footer-value {
  grid-column: 1 / -1;
  min-height: calc(7.2 * var(--u));
  padding-block: calc(0.8 * var(--u));
  border-top: 1px solid var(--color-footer-rule);
  font-size: var(--text-footer);
  line-height: 1.3;
  letter-spacing: var(--tracking);
}

.footer-value nav { max-width: 24rem; }

.footer-group:nth-child(1) h3 { grid-column: 1; }
.footer-group:nth-child(2) h3 { grid-column: 2; margin-top: calc(1.2 * var(--u)); }
.footer-group:nth-child(3) h3 { grid-column: 3; margin-top: calc(2.4 * var(--u)); }
.footer-group:nth-child(4) h3 { grid-column: 4; margin-top: calc(3.6 * var(--u)); }

.footer-group:nth-child(1) .footer-value { grid-row: 2; }
.footer-group:nth-child(2) .footer-value { grid-row: 3; padding-left: 25%; }
.footer-group:nth-child(3) .footer-value { grid-row: 4; padding-left: 50%; }
.footer-group:nth-child(4) .footer-value { grid-row: 5; padding-left: 75%; }

.footer-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: calc(11 * var(--u));
  font-size: var(--text-small);
  line-height: 1;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (max-width: 48rem) {
  :root {
    --u: clamp(9px, 2.6666667vw, 11.2px);
    --gutter: calc(1.5 * var(--u));
    --text-body: calc(1.2 * var(--u));
    --text-link: calc(1.6 * var(--u));
    --text-section: calc(3.5 * var(--u));
    --text-portal: calc(4.6 * var(--u));
    --text-footer: calc(1.4 * var(--u));
    --text-small: calc(1.1 * var(--u));
  }

  .mobile-header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.6 * var(--u)) var(--u);
  }

  /* Enlarged target is recommended; observed button is 24px. */
  .mobile-header button {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
  }

  .hero {
    min-height: 123.2svh;
    padding: calc(8 * var(--u)) var(--gutter) calc(3 * var(--u));
  }

  .hero-logo { width: 100%; }
  .hero-nav { display: none; }

  .hero-statement {
    margin-top: calc(3 * var(--u));
    font-size: 8vw;
  }

  .hero-photo {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 27.7vw;
    height: 72svh;
    margin: calc(3.6 * var(--u)) auto 0;
  }

  /* Source mobile arrow position was not visible in the capture. */
  .hero-cue { display: none; }

  .text-link { padding-left: calc(2.4 * var(--u)); }
  .introduction { padding-bottom: calc(5 * var(--u)); }
  .introduction-copy { width: 100%; }

  .portal { aspect-ratio: 390 / 452.39; }
  .portal-label { gap: calc(1.4 * var(--u)); }
  .portal-label svg { width: calc(3 * var(--u)); }

  .product-grid { grid-template-columns: 1fr; }
  .product-tile {
    aspect-ratio: 390 / 510.30;
    padding: calc(1.6 * var(--u));
  }

  .news { padding: calc(7.2 * var(--u)) var(--gutter); }
  .news-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: calc(4.8 * var(--u));
  }
  .news-title { grid-column: 1 / -1; grid-row: 2; }

  .journal-card {
    flex-basis: 69vw;
    padding: 0 calc(2 * var(--u)) calc(4.8 * var(--u));
  }
  .journal-card:nth-child(even) {
    padding-top: calc(4.8 * var(--u));
    padding-bottom: 0;
  }

  .contact-panel { width: 90vw; padding: calc(2 * var(--u)); }
  .contact-options { grid-template-columns: 1fr; gap: calc(2 * var(--u)); }

  .footer-logo { margin-bottom: calc(3.5 * var(--u)); }
  .footer-directory { display: block; }
  .footer-group {
    display: block;
    padding-block: calc(2 * var(--u));
    border-bottom: 1px solid var(--color-footer-rule);
  }
  .footer-group:nth-child(n) h3 {
    margin: 0 0 calc(1.2 * var(--u));
  }
  .footer-group:nth-child(n) .footer-value {
    min-height: 0;
    padding: 0;
    border: 0;
  }
  .footer-meta { margin-top: calc(6 * var(--u)); }
}

/* Recommended keyboard and reduced-motion support. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .portal *,
  .mobile-header * {
    animation: none !important;
    transition: none !important;
  }
  .journal-track { scroll-behavior: auto; }
}
```

The optional mobile arrow omission above is a conservative adaptation, not proof that the original has no mobile arrow. Likewise, the black portal background reproduces the captured salon appearance; it should not be applied to undocumented media states as a factual reconstruction.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #eae3da;
  --color-ink: #3f342f;
  --color-capsule: #484036;
  --color-salon-text: #a6a19c;
  --color-coastal: #83979c; /* Visual approximation */

  --font-brand-text: var(--font-text);
  --font-brand-display: var(--font-display);
  --font-brand-portal: var(--font-portal);

  --text-brand-body: var(--text-body);
  --text-brand-link: var(--text-link);
  --text-brand-section: var(--text-section);
  --text-brand-portal: var(--text-portal);

  --spacing-unit: var(--u);
  --spacing-page: var(--gutter);
  --radius-business: var(--radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://chimjun.jp/](https://chimjun.jp/). The supplied browser record reports HTTP **200**, the title `CHIMJUN`, and no URL change.
- **Capture date:** September 29, 2026. Evidence retrieval timestamp: **2026-09-29T12:56:03.981Z**. Both viewport records are included in that supplied inspection bundle; separate per-image timestamps were not supplied.
- **Desktop evidence:** **1440 × 1000 CSS pixels**. Original-page captures show the opening composition, the salon portal with neighboring section fragments, and the footer. DOM/computed-style evidence covers the homepage sections, links, element bounds, fonts, colors, and selected transitions.
- **Mobile evidence:** **390 × 844 CSS pixels**. Original-page captures show the opening and footer. DOM measurements document the stacked product sequence, changed introduction order, news dimensions, and horizontal journal layout.
- **Interaction evidence:** initial loading and scrolling were part of capture collection. Declared CSS transitions, repeated-heading animation values, link destinations, gallery text, and offscreen menu geometry were supplied. Menu opening, hovering, gallery advancement, article dragging, and destination-page behavior were not exercised in the provided record.
- **Inspection limitations:** no direct asset URLs, complete stylesheet, animation keyframes, font-file verification, accessibility tree, or device-pixel-ratio record was supplied. Intermediate viewport behavior and exact breakpoints remain unknown. No additional browsing or file access was used for this reference.

This document describes the current homepage represented by the supplied inspection. Measured values, screenshot estimates, and implementation recommendations remain separate throughout; the Quick Start is a reusable adaptation of that evidence.