# Lamune Kyoto / ラムネ — Style Reference

> A quiet white salon journal, warmed by wooden interiors and interrupted by small hand-drawn creatures.

**Original URL:** [lamune-kyoto.com](https://lamune-kyoto.com/)
**Final URL:** [lamune-kyoto.com](https://lamune-kyoto.com/)
**Theme:** white canvas, warm charcoal typography, natural photographic color
**Inspected:** October 5, 2026, 06:54 JST. Supplied retrieval timestamp: October 4, 2026, 21:54:31.280 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current salon homepage: opening composition, BLOG, ABOUT and location information, STAFF, MENU, STYLE, RECRUIT, persistent navigation, and photographic footer. Three desktop and two mobile captures provide visual evidence; rendered DOM measurements cover additional content between those captures. Menu-open states, media playback, gallery activation, and linked destination pages were not inspected.

Lamune’s identity comes from the relationship between generous white space and an intimate physical place. The photography shows a large wooden entrance, glass panels, tiled pavement, plants, and warmly lit interior details. White characters with uneven black outlines appear inside these scenes. The surrounding interface stays restrained: small uppercase navigation, widely tracked Japanese copy, numbered section labels, and almost no container decoration.

This is a working salon homepage with editorial content, staff profiles, prices, a style archive, location details, recruitment information, and an external reservation link. Its opening is an introduction to the shop’s atmosphere. The desktop composition gives the photograph a tall central-right stage, places the introductory copy low in the left white panel, and reserves a narrow right rail for navigation. On mobile, a compact top bar remains visible while the photograph and introduction become consecutive blocks.

## How to Read This Reference

- **Measured** means a value is present in the supplied rendered DOM or computed-style record. Decimal dimensions below are rounded for readability.
- **Calculated** means arithmetic derived from measured bounds, such as gallery gaps or content widths. It does not identify an original CSS formula.
- **Visual estimate** means a dimension or treatment is inferred from the supplied original-page screenshots. Photograph colors are descriptive, not sampled design tokens.
- **Recommendation** means guidance for a new implementation. The Quick Start uses new class names and an explicitly chosen breakpoint.
- Font names below are measured declarations. The evidence does not independently verify font downloads or which fallback rendered each glyph.
- Most measurements describe two specific viewport endpoints. Intermediate layouts, source media queries, and all interaction states remain unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White Canvas | `#ffffff` | `--color-canvas` | Measured mobile header background and visually consistent page canvas. The sampled body background itself is transparent. |
| Warm Charcoal | `#3c3835` | `--color-ink` | Measured `rgb(60, 56, 53)` on body text, navigation, section labels, and introductory copy. |
| Reversed White | `#ffffff` | `--color-on-photo` | Measured copyright text over the footer photograph. |
| Quiet Rule | approximately `#dedbd8` | `--color-rule` | Recommended approximation for faint separators visible in the information area; exact border color was not supplied. |
| Drawing Black | visually near black | No global token required | Character outlines and utility icons look darker than the body text. Their exact asset colors were not measured. |

There is no evidenced saturated brand accent or colored reservation button. Warm brown, terracotta, amber, and green enter through photography. Keep these colors attached to materials and lighting rather than spreading them across interface surfaces.

The embedded map introduces its own blue, green, gray, and red controls. These belong to the map’s interface. The recorded `--wp-admin-theme-color` variables also do not establish visible homepage brand colors.

Only one page theme is evidenced. No theme switcher or alternate palette was inspected.

## Tokens — Typography

### Japanese Body and Information Text

The measured body stack is:

```css
'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
メイリオ, Meiryo, 'ＭＳ Ｐゴシック',
'Helvetica Neue', Helvetica, Arial, sans-serif
```

Body size changes from 14px on desktop to 13px on mobile, with weight 400. This stack handles ordinary information and blog titles. Do not treat the `Times` declaration sampled on the root HTML element as the site’s principal visual typeface.

### Japanese Introductory Copy

`'Noto Sans JP', sans-serif`, weight 500, supplies the introductory statement, ABOUT captions, Japanese staff names, and recruitment message. Wide tracking and generous leading make short passages feel deliberate without increasing their size substantially.

The opening statement is six lines in both inspected layouts. Desktop uses 15px text with 37.5px leading; mobile uses 14px with 28px leading. Preserve the phrase-level line breaks when adapting the original copy.

### Latin Navigation and Names

`Lato, sans-serif` appears in navigation, blog dates, staff roles, Latin staff names, and copyright text. Navigation is small and bold. Desktop staff names use a markedly different treatment: 34px at weight 300, breaking first and last names across two lines in the recorded layout.

On mobile, staff names become 14px and fit on one line. This is a substantial responsive hierarchy change, not uniform scaling of the desktop design.

### Condensed Section and Utility Type

`'Roboto Condensed', sans-serif`, weight 700, is declared for numbered section labels, VIEW MORE links, and recruitment contact details. The 26px section labels retain their size on mobile while changing orientation and position.

### Wordmark

The visible `ラムネ` mark has irregular, brush-like strokes. Its H1 container measures 80 × 37.33px on desktop and 60 × 28px on mobile. The H1 has no extracted text. Treat the mark as artwork; no source font for recreating it was identified.

### Type Scale

| Role | Desktop | Mobile | Weight | Leading / tracking |
| --- | --- | --- | --- | --- |
| General body | 14px | 13px | 400 | Normal leading and tracking in sampled body style |
| Navigation / RESERVE | 13px | 13px | 700 | 13px line height; normal tracking |
| Opening Japanese statement | 15px | 14px | 500 | 37.5px / 3px desktop; 28px / 2.8px mobile |
| ABOUT captions | 16px | 14px | 500 | 40px / 3.2px desktop; 28px / 2.8px mobile |
| Numbered section label | 26px | 26px | 700 | Normal leading; 2.6px tracking; approximately 30px cross-axis box |
| Blog date | 11px | 10px | 700 | Normal leading and tracking; vertically oriented |
| Blog title | 13px | 13px | 400 | 26px / 1.3px desktop; 23.4px / normal mobile |
| VIEW MORE, measured blog link | 18px | 14px | 700 | Line height equals font size |
| Staff role | 13px | 12px | 700 | Normal leading; vertically oriented |
| Latin staff name | 34px | 14px | 300 | Normal leading; desktop name box spans two lines |
| Japanese staff name | 16px | 14px | 500 | Normal leading; 1.6px / 1.4px tracking |
| Recruitment message | 16px | 15px | 500 | 40px / 3.2px desktop; 30px / 1.5px mobile |
| Recruitment email | 18px | 16px | 700 | Normal leading; 1.8px / 0.8px tracking |
| Copyright | 12px | 12px | 700 | Approximately 15px text box; white |

The source’s general headings are modest. The 34px Latin staff names are the principal typographic enlargement in the measured content; there is no giant promotional headline.

## Tokens — Spacing & Shapes

The design uses two distinct spacing scales: small utility details and large editorial intervals. Avoid compressing the generous gaps merely because the text itself is small.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Wordmark position | 30px from top and left | 20px left; 15.5px top | Measured |
| Section top padding | 80px | 30px | Measured |
| Gap between successive section boxes | 120px | 70px | Calculated from repeated section bounds |
| Main section content start | x = 280px | x = 19.5px | Measured |
| Numbered heading start | x = 80px | x = 19.5px | Measured |
| Desktop hero copy clearance | 60px from media boundary and viewport bottom | Not applicable | Calculated using measured text bounds and visible media boundary |
| Mobile photo-to-intro gap | Not applicable | About 30px | Screenshot and text-bound comparison |
| Blog column gap | About 43.19px | About 28.09px | Calculated |
| Mobile blog row gap | Not applicable | 25px | Calculated |
| Gallery gap | About 8.63px | About 6.31px | Calculated horizontally and vertically |
| Recruitment-to-footer gap | 260px | 100px | Calculated from section and footer bounds |
| Copyright bottom clearance | 30px | 30px | Calculated |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Photographs and gallery tiles | Square corners | Visible captures; sampled link radii are 0 |
| Blog and staff modules | Unboxed, square image boundaries | DOM geometry and available photography |
| Sound control | White circle, approximately 36px diameter | Visual estimate |
| Navigation and text links | No enclosing pill or filled card | Visible captures |
| Embedded map controls | Provider-specific shapes | Visible map interface; separate from the page system |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Right utility rail | Approximately 80px wide | Replaced by top bar | Screenshot |
| Mobile header | No horizontal header strip | 390 × 60px | Measured |
| Opening media | Approximately x = 464–1360; 896 × 1000px | Approximately y = 60–606; 390 × 546px | Screenshot |
| Opening copy | x = 141.77, y = 715; 262.23 × 225px | x = 0, y = 636; 390 × 168px | Measured |
| Main editorial content | x = 280–1360; 1080px wide | x = 19.5–370.5; 351px wide | Measured / calculated |
| Map panel | Approximately 1080 × 486px | Not directly measured | Desktop screenshot |
| Gallery tile | 172.80 × 218.92px | 112.31 × 142.30px | Measured |
| Footer box | 1440 × 500px | 390 × 295.39px | Measured |
| Document height | 7842.92px | 6426.81px | Measured at capture time |

The desktop footer’s outer box spans 1440px, but its visible photograph stops at approximately x = 1360, leaving the navigation rail white. Its copyright paragraph spans the full viewport and is centered on that width.

Some sampled desktop staff children extend beyond their parent section’s recorded bounds. Their typography and horizontal alignment remain useful evidence, but those coordinates should not be treated as a definitive animation endpoint or an exact full-page positioning formula.

## Components

### Desktop Identity and Navigation Rail

**Role:** establish the salon identity while keeping navigation and reservations available during a long page visit.

The wordmark sits at the upper left, at 30px from both edges. It belongs to the opening composition; the lower-page screenshots do not show a persistent desktop logo.

A white strip runs down the right edge. Its upper group contains BLOG, ABOUT, STAFF, MENU, STYLE, and RECRUIT. The Latin labels read sideways along a vertical axis. BLOG leads to `/blogs/`; the other five point to corresponding homepage anchors.

The lower group contains a calendar icon, RESERVE, a short horizontal divider, and the Instagram icon. The reservation destination recorded in the original DOM is an external booking URL. Keep the action visually compact: an icon and label in charcoal, without a large colored button.

The rail stays in the same viewport position across the supplied opening, middle, and footer captures. Its persistent behavior is visually supported; its exact positioning declarations were not supplied.

### Mobile Header

**Role:** retain the three most useful utilities in a narrow viewport.

The 60px white bar contains, from left to right:

1. The 60 × 28px wordmark.
2. Calendar icon and the 13px RESERVE label.
3. A narrow divider and Instagram icon.
4. A menu control with three thin horizontal strokes, approximately 30px wide.

The header is visible at the top of both the opening and bottom-of-page mobile captures. The six desktop section links are absent from the rendered mobile link list in the closed state.

Only the closed menu control is evidenced. Do not infer a drawer direction, overlay treatment, opening animation, or menu contents from its icon.

### Opening Composition

**Role:** introduce the shop through its entrance and a short statement of hospitality.

Desktop anatomy:

- A white left panel approximately 464px wide.
- A tall photographic/media region approximately 896px wide.
- Introductory text aligned toward the lower-right of the white panel.
- Three outlined white characters peeking into the doorway scene.
- A small circular sound affordance near the media’s lower-right corner.

The text ends 60px above the viewport bottom and approximately 60px before the media begins. Its six short lines are right-aligned, with a large amount of empty white space above.

Mobile anatomy changes to a sequence: top bar, edge-to-edge entrance scene, then centered introductory copy on white. The scene is approximately 546px tall at 390px wide. The sound icon remains inside its lower-right corner. The copy begins approximately 30px below the photograph and occupies six 28px lines.

The scene and sound control suggest a media experience, but the evidence does not identify its implementation format or demonstrate audible playback.

### Numbered Section Marker

**Role:** provide a quiet editorial index through the page.

Each section pairs a two-digit number with an uppercase label: 01 BLOG through 06 RECRUIT. Use 26px bold Roboto Condensed with 2.6px tracking.

On desktop, the label sits in the left gutter near x = 80 and runs vertically, with a short divider between number and name. The content starts at x = 280. On mobile, the marker becomes a horizontal heading at the same 5% inset as the content, with approximately 20px between its 30px heading box and the first content row.

A new implementation should use actual heading elements, even though the sampled original markers are paragraphs.

### Blog Preview

**Role:** show recent salon activity without taking over the page.

Desktop presents five linked previews in one row. Each measured link is approximately 181.45px wide, with about 43.19px between columns. Mobile presents four items in two columns and two rows, with 161.45px-wide links and 25px between rows.

Each item combines a thumbnail region, a narrow vertical date at the right edge, and a Japanese or English title below. Dates use bold Lato; titles use the ordinary Japanese body stack. The measured titles include `成人式・卒業式` and `perm.`.

A centered VIEW MORE link leads to `/blogs/`. Its type reduces from 18px to 14px on mobile. No filled card, shadow, or badge is needed to organize the previews.

The fifth desktop item is absent from the mobile rendered text and link list. The exact hiding or selection mechanism was not supplied.

### ABOUT Editorial Sequence

**Role:** convey the salon’s interior atmosphere before presenting practical visit information.

The section alternates photographic content and short Japanese captions. Desktop caption coordinates place the first caption on the right and the next on the left, supporting an alternating editorial composition. The copy stays small: 16px, weight 500, with 40px leading and 3.2px tracking.

On mobile, both captions occupy the 351px content width and use 14px type with 28px leading. The photographs and text become a vertical sequence rather than retaining desktop offsets.

The supplied screenshots do not expose every photograph in this sequence. Preserve the observed alternation and spacing principles without inventing exact crop dimensions for unseen frames.

### Salon Information and Map

**Role:** make the shop easy to locate and contact.

The information block contains address, telephone, opening hours, closed days, and an Instagram handle. The desktop middle capture shows a shop photograph to the left and a simple label/value information area to the right. A faint dotted separator is visible in the information area.

A wide map follows beneath it, aligned to the 1080px content region. The map includes its standard place card, pin, labels, and provider controls. It is a substantial rectangular utility surface, approximately 486px tall in the supplied desktop capture.

Retain real address information as text outside the map. Do not rely on the map image or its place card as the only accessible location information. A mobile map size or interaction state was not measured.

### Staff Profile

**Role:** introduce three stylists through portrait photography and bilingual names.

Desktop uses three columns. The visible portrait widths are approximately 300px, with card starts at x = 280, 658, and 1036. A vertical `stylist` label sits just outside each photograph’s right edge. The overall slot, including the role label, is wider than the photograph.

Beneath the image, a light 34px Latin name is paired with a smaller Japanese name. The recorded names are Takashi Nobukane / 延兼 敬, Yumiko Ishida / 石田 由美子, and Rena Kagawa / 香川 玲菜.

Mobile uses two columns, with the third stylist beginning another row. Latin and Japanese names stack beneath the portrait, both at 14px but with different weights and tracking. Keep the vertical role label as a small edge detail.

These are editorial profiles without visible enclosing panels. No staff-card click behavior is established by the supplied link record.

### Service Menu

**Role:** communicate a concise set of starting prices.

The rendered content lists five service-and-price pairs: cut, color, design color, perm, and treatment. For example, the actual source label `カット` is paired with `¥4,100〜`.

The section shares the numbered heading system. Individual row measurements and a direct screenshot of the menu were not supplied, so its exact dividers, alignment, imagery, and row spacing cannot be specified as observations.

For reuse, a simple semantic description list with service names and right-aligned starting prices is a suitable recommendation. Preserve the starting-price suffix and avoid inventing inclusions or pricing conditions.

### Style Gallery

**Role:** offer a compact visual archive of hairstyles.

Twelve image links are present at both inspected sizes. Desktop arranges them into six columns and two rows; mobile uses three columns and four rows. Tiles have a measured height-to-width ratio of approximately 1.267 and closely spaced, square boundaries.

Desktop spacing is approximately 8.63px; mobile spacing is approximately 6.31px. The gallery is denser than the surrounding editorial content, creating a useful change of rhythm.

Each recorded anchor points directly to an image URL. A lightbox, carousel, zoom state, or keyboard gallery was not exercised. STYLE also contains VIEW MORE text, but its actionable destination is not established in the supplied link list.

### Recruitment Block

**Role:** provide a direct invitation and contact route for prospective staff.

Desktop pairs a large plant-and-character image on the left with a short message and contact details on the right. In the bottom capture, the image spans approximately x = 280–874; the contact text begins at x = 934, leaving a 60px gap.

Mobile stacks the image, a two-line recruitment message, and two contact rows inside the 5% page inset. The message uses 15px Noto Sans JP with 30px leading and 1.5px tracking. Contact text is stronger and more condensed: the measured email is 16px bold Roboto Condensed with 0.8px tracking.

The email is a verified `mailto:` link. The telephone is visible text; a telephone-link interaction is not established by the supplied anchors.

### Photographic Footer

**Role:** end the visit with another small scene from the salon.

After a generous white interval, a warm interior photograph fills the bottom region. A white outlined creature sits on a wooden shelf beside a glowing caged lamp. The drawing is part of the composition, not a separate interface card.

The desktop footer is 500px tall. Mobile uses a approximately 295px-tall crop at 390px wide, retaining the lamp, creature, and dark foreground. Copyright text is centered approximately 30px above the bottom in white 12px bold Lato.

There is no evidenced conventional multi-column link footer. The persistent reservation and social controls continue to provide utility access.

## Tokens — Motion & Interaction

| Treatment | Evidence | Implementation implication |
| --- | --- | --- |
| Desktop text-link transition | Computed `color 0.2s` on sampled links | A short color transition is declared; the destination color was not captured. |
| Mobile text-link transition | Computed shorthand is `color`, without an explicit duration | Do not assume the desktop duration applies. |
| Gallery transition | Computed `opacity 0.4s` at both viewports | Opacity is the declared animated property; target opacity and trigger were not exercised. |
| Persistent navigation | Same viewport placement across supplied scrolled captures | Keep reservation and navigation utilities accessible while scrolling. |
| Homepage section links | Recorded fragment URLs | Destinations are known; scrolling easing and duration are not. |
| Sound affordance | Circular speaker icon visible over the opening scene | Playback state, mute semantics, media format, and click result remain unverified. |
| Illustrated characters | Present in multiple photographic scenes | Static captures establish appearance, not animation timing or technique. |
| Mobile menu | Closed three-line control visible | Open state and transition are unknown. |
| Gallery activation | Anchors point to image files | Do not claim a lightbox based only on those anchors. |

The sampled text and section elements report `animation: none`. This does not rule out movement in media, pseudo-elements, unsampled descendants, or script-driven effects. Likewise, the generic `transition: all` shorthand on some elements is not evidence of a particular reveal animation.

The collection process waited for initial rendering and traversed intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and then resumed. These procedures improve capture stability but do not verify all delayed content or interactions.

For a new implementation, keep interface feedback quiet and brief. Do not add a page-wide parallax system, elaborate entrance choreography, or continuous character motion and describe it as source behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | White, visually continuous | Gives photographs and small text room to breathe |
| Desktop rail / mobile header | White with dark utilities | Persistent navigation without a dominant bar color |
| Editorial modules | Same canvas; largely unboxed | Grouping comes from alignment, spacing, and labels |
| Image planes | Square photographic rectangles | Carry material, color, atmosphere, and character artwork |
| Information separators | Very faint, sometimes dotted | Support label/value scanning without heavy framing |
| Sound control | Small white circular disk | Remains visible over the photograph |
| Map | Provider-rendered interface | Practical location utility |
| Footer | Dark, warm photograph with white text | A visual closing scene |

No general shadow elevation system, gradient surface system, or rounded-card language is evidenced.

## Imagery

Photography should feel specific to a small, lived-in salon. The entrance has substantial wooden framing and glazing; plants partly intrude into the scene; interior light is warm rather than studio-neutral. Staff portraits retain the shop as a recognizable setting. Style imagery provides the more compact, repeatable portrait format.

The character drawings use white fills, black irregular outlines, simple facial marks, and deliberately peculiar silhouettes. They interact with the location: peeking through a doorway, standing among plants, or resting on a shelf. Their appeal comes from the combination of ordinary photography and unexpected drawing.

Use the characters sparingly and preserve their placement relative to architectural or botanical details. Avoid turning every text block into an illustrated badge. The logo and characters should remain supplied artwork when authorized, rather than approximations made with a generic font or stock icon set.

The recruitment characters differ between the desktop and mobile captures. The evidence does not establish whether this results from media timing, responsive asset selection, or another cause.

### Observed Asset References

These paths occur in the rendered original-page links. They were not separately opened, and no intrinsic image dimensions were supplied.

| Asset reference | Original-site path | Evidenced use |
| --- | --- | --- |
| Style image 1 | `/syst/wp-content/uploads/2026/05/IMG_9850_VSCO.jpg` | Linked gallery image |
| Style image 2 | `/syst/wp-content/uploads/2026/05/IMG_1387.jpg` | Linked gallery image |
| Style image 3 | `/syst/wp-content/uploads/2026/05/IMG_3271_VSCO.jpg` | Linked gallery image |
| Style image 4 | `/syst/wp-content/uploads/2026/05/IMG_3574_VSCO.jpg` | Linked gallery image |
| Style image 5 | `/syst/wp-content/uploads/2026/03/IMG_1529_VSCO.jpg` | Linked gallery image |
| Style image 12 | `/syst/wp-content/uploads/2025/12/IMG_9827_VSCO.jpg` | Linked gallery image |
| Wordmark | Path not exposed in supplied evidence | Visible identity artwork |
| Entrance scene and character artwork | Paths and media format not exposed | Opening visual |
| Recruitment and footer scenes | Paths not exposed | Photographic closing sequence |

Do not infer image licensing, authorship, or production responsibilities from these paths.

## Layout & Responsive Behavior

The desktop page uses an asymmetric content system. The rightmost approximately 80px is reserved for persistent utilities. Below the opening scene, content aligns to a 1080px region starting at x = 280; numbered headings occupy a separate left gutter. The opening composition uses a different split, with media beginning around x = 464.

On mobile, the right rail disappears into a 60px top bar and the regular content width becomes 90% of the viewport. At 390px, that produces the measured 19.5px side margins and 351px content width. The opening photograph and footer remain edge-to-edge.

| Component | Desktop observation | Mobile observation |
| --- | --- | --- |
| Utilities | Vertical rail; section links visible | Horizontal top bar; menu closed |
| Opening scene | Photo beside low, right-aligned copy | Photo above centered copy |
| Section markers | Vertical in a separate gutter | Horizontal above content |
| Blog | Five columns / five previews | Two columns / four previews |
| ABOUT | Alternating image-and-copy placement | Consecutive image and text blocks |
| Staff | Three columns; large Latin names | Two columns; compact stacked names |
| Style gallery | Six columns × two rows | Three columns × four rows |
| Recruitment | Image and copy side by side | Image, message, and contacts stacked |
| Footer | Wide 500px-tall scene | Narrow approximately 295px-tall crop |

The desktop gallery width is approximately 16% of its content region per tile, with approximately 0.8% gaps. Mobile tiles are approximately 32% of the content region, with approximately 1.8% gaps. These percentages are calculations from the recorded rectangles, not recovered stylesheet declarations.

The exact breakpoint is unknown. The Quick Start chooses 1024px as a practical adaptation and should be checked at intermediate widths. Preserve the hierarchy and avoid forcing the wide-screen gutters into tablet layouts when the text and portraits no longer fit comfortably.

## Do’s and Don’ts

### Do

- Keep the white canvas and measured warm charcoal `#3c3835` as the interface foundation.
- Let wooden surfaces, foliage, tiled pavement, and warm lighting supply most of the color.
- Preserve the large empty area above the desktop introduction.
- Use the observed division of type roles: Noto Sans JP for expressive Japanese copy, Lato for Latin utilities and names, and Roboto Condensed for section labels.
- Keep Japanese introductory text small, widely tracked, and generously led.
- Treat vertical dates, staff roles, and section labels as recurring editorial details.
- Keep the reservation and social links easy to find in both layouts.
- Retain square image corners, compact gallery gaps, and unboxed content.
- Recompose the hero and headings for mobile, and substantially reduce staff-name typography.
- Place outlined characters within photographic scenes with intentional scale and position.

### Don't

- Don't replace the low desktop introduction with a large centered headline over the photograph.
- Don't turn every module into a rounded card with a shadow.
- Don't use map colors or administrative CSS variables as the salon’s brand palette.
- Don't introduce a bright filled reservation button merely to create a conventional CTA hierarchy.
- Don't recreate the wordmark with an assumed brush font.
- Don't apply the same font, weight, and tracking to every text role.
- Don't retain six gallery columns or three staff columns on a 390px screen.
- Don't enlarge or crop characters without checking their relationship to the underlying scene.
- Don't invent a lightbox, navigation overlay, media timeline, or hover color as an observed feature.
- Don't compress the recruitment-to-footer white interval into a narrow divider.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-site features:

- Use semantic headings for the numbered sections and preserve logical reading order when changing their visual orientation.
- Give the wordmark a useful text alternative and give the Instagram, menu, and sound controls explicit accessible names.
- Provide at least 44 × 44px interactive targets around small icons while retaining their compact visible artwork.
- Expose menu state with `aria-expanded` and associate the trigger with its panel. Add keyboard handling appropriate to the panel behavior actually implemented.
- Keep audio muted until an explicit user action. If the scenes move, provide a pause option and a useful still-image fallback.
- Add a reduced-motion path that also handles media playback; a CSS media query alone does not pause video or animated image files.
- Give hairstyle image links descriptive accessible text. Implement a keyboard-accessible viewer only if a viewer is deliberately added.
- Make the telephone number a `tel:` link and keep address, hours, and closed days available as ordinary text.
- Title the map embed and provide a separate directions link. Reserve its dimensions before loading.
- Set image dimensions or aspect ratios to prevent layout shifts, and defer lower-page assets without delaying the opening visual.
- Add scroll offsets for anchored sections so the persistent mobile header does not cover their headings.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and utility surfaces: `#ffffff`.
- Body, headings, and text links: `#3c3835`.
- Copyright over the footer photograph: `#ffffff`.
- Optional faint rule approximation: `#dedbd8`.
- Photographic atmosphere: timber brown, terracotta, warm amber light, and natural green foliage.
- Primary action treatment: small calendar icon plus RESERVE text.
- Character treatment: irregular near-black outlines with white interiors.

### Overall Prompt

“Create a salon homepage inspired by Lamune Kyoto’s current visual structure. Use a white canvas, warm charcoal text `#3c3835`, generous editorial spacing, square photography, and small white characters drawn with irregular black outlines inside the scenes. On desktop, reserve an approximately 80px right navigation rail, put a modest logo at the upper left, and compose a tall entrance photograph beside a white panel with six short lines of Japanese copy aligned low and right. Organize the page into six numbered sections for blog, salon information, staff, services, hairstyles, and recruitment. Use Lato for Latin utilities and names, Noto Sans JP for Japanese introductory copy, and Roboto Condensed for section labels. On mobile, switch to a 60px top bar, stack the photograph above centered copy, use 5% content insets, two-column blog and staff layouts, and a three-column style gallery. Finish with a warm interior photograph and small white copyright text.”

### Example Component Prompts

1. **Opening composition:** “At 1440 × 1000, place an approximately 464px white panel beside an approximately 896px entrance scene, leaving an 80px white utility rail. Keep the introductory copy 60px above the bottom and 60px from the photograph. Use 15px Noto Sans JP, weight 500, 37.5px leading, and 3px tracking. Add a small white circular sound affordance inside the image; do not assume playback behavior.”
2. **Section marker and blog:** “Create a numbered salon journal section with a vertical 26px bold condensed heading in the desktop left gutter. Arrange five unboxed previews in a row, with narrow vertical dates and small titles below their images. On mobile, rotate the heading into normal horizontal flow and show four previews in two columns.”
3. **Staff profile:** “Use a rectangular salon portrait, a small vertical stylist label just beyond the right image edge, a light 34px Lato name, and a smaller Japanese name. On mobile, use two columns and stack both names at 14px beneath each portrait. Preserve white space and omit card borders and shadows.”
4. **Style grid:** “Build twelve portrait image links in a six-by-two desktop grid and a three-by-four mobile grid. Use a height-to-width ratio near 1.267, square corners, and narrow gaps. Keep hover feedback subtle; a lightbox is an optional new behavior, not an assumed requirement.”
5. **Closing sequence:** “Place a plant photograph with a white outlined creature beside a short recruitment message and bold condensed contact rows. Stack these elements on mobile. Leave a generous white pause before a full-width warm interior footer with a creature on a shelf and a glowing caged lamp.”

## Quick Start

### CSS Custom Properties

This is an adaptation using new class names, not a recovered original stylesheet. It reproduces measured typography and endpoint proportions where practical. The 1024px breakpoint, portrait defaults, hover guidance, and accessibility rules are recommendations. Load the declared font families separately and supply authorized artwork; the CSS does not invent missing image URLs or implement menu and media behavior.

Expected structure: a desktop logo, a desktop rail, a separate mobile header, and a `.page` containing `.hero`, numbered `.editorial-section` elements, and `.photo-footer`. Section bodies contain the relevant grids. Place the hero image or video inside `.hero-media`; keep the introduction as real text in `.hero-copy`. Give first and last names separate spans if they should break on desktop.

```css
:root {
  /* Measured interface colors; the rule color is an approximation. */
  --color-canvas: #ffffff;
  --color-ink: #3c3835;
  --color-on-photo: #ffffff;
  --color-rule: #dedbd8;

  /* Measured font declarations. Load the fonts separately. */
  --font-body: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
    メイリオ, Meiryo, 'ＭＳ Ｐゴシック',
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-japanese: 'Noto Sans JP', sans-serif;
  --font-latin: Lato, sans-serif;
  --font-condensed: 'Roboto Condensed', sans-serif;

  --text-body: 14px;
  --text-nav: 13px;
  --text-section: 26px;
  --text-intro: 15px;
  --text-caption: 16px;
  --text-name: 34px;
  --leading-intro: 2.5;
  --tracking-copy: 0.2em;

  /* Desktop endpoint geometry, adapted from the supplied capture. */
  --rail-width: 80px;
  --content-start: 280px;
  --section-axis: 80px;
  --content-width: calc(100vw - var(--rail-width) - var(--content-start));
  --section-top: 80px;
  --section-gap: 120px;
  --gallery-gap: calc(var(--content-width) * 0.008);
  --radius-image: 0;
  --sound-size: 36px;
  --motion-link: 200ms;
  --motion-gallery: 400ms;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 30px; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
  font-size: var(--text-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a { transition: color var(--motion-link); }
.page { margin-inline-end: var(--rail-width); }

.desktop-logo {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 30px;
  width: 80px;
}
.desktop-logo img { width: 100%; height: auto; }
.mobile-header { display: none; }

.desktop-rail {
  position: fixed;
  z-index: 20;
  inset: 0 0 0 auto;
  width: var(--rail-width);
  padding: 30px 25px 30px 31px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-canvas);
}
.rail-nav,
.rail-tools,
.rail-reserve {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rail-nav,
.rail-tools { gap: 15px; }
.rail-reserve { gap: 10px; }
.rail-nav a,
.rail-reserve span {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font: 700 var(--text-nav) / 1 var(--font-latin);
}
.rail-divider {
  width: 24px;
  height: 1px;
  background: currentColor;
}

.hero {
  display: grid;
  grid-template-columns: 34.1176% minmax(0, 1fr);
  min-height: 100svh;
}
.hero-media {
  grid-area: 1 / 2;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.hero-media > :is(img, video),
.photo-footer > :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-copy {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  max-width: calc(100% - 90px);
  margin: 0 60px 60px 30px;
  text-align: right;
  font-family: var(--font-japanese);
  font-size: var(--text-intro);
  font-weight: 500;
  line-height: var(--leading-intro);
  letter-spacing: var(--tracking-copy);
}
.sound-button {
  position: absolute;
  right: 30px;
  bottom: 27px;
  display: grid;
  place-items: center;
  width: var(--sound-size);
  height: var(--sound-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-canvas);
}
/* Recommended larger hit area around the small visible disk. */
.sound-button::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.editorial-section {
  position: relative;
  margin-block-start: var(--section-gap);
  padding: var(--section-top) 0 0 var(--content-start);
  scroll-margin-top: 30px;
}
.hero + .editorial-section { margin-block-start: 60px; }
.section-title {
  position: absolute;
  top: var(--section-top);
  left: var(--section-axis);
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font: 700 var(--text-section) / 30px var(--font-condensed);
  letter-spacing: 0.1em;
}
.section-title .divider {
  flex: none;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 4%;
}
.blog-card { position: relative; min-width: 0; }
/* Thumbnail geometry is an adaptation consistent with the text bounds. */
.blog-photo {
  width: calc(100% - 25px);
  aspect-ratio: 1;
  object-fit: cover;
}
.blog-date {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  writing-mode: vertical-rl;
  font: 700 11px var(--font-latin);
}
.blog-title {
  margin: 20px 0 0;
  padding-inline-end: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
}
.view-more {
  display: table;
  margin: 40px auto 0;
  padding-block-end: 13px;
  font: 700 18px / 1 var(--font-condensed);
}

.feature-pair {
  display: grid;
  grid-template-columns: 55% minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.feature-pair img { width: 100%; height: auto; }
.feature-copy h3 {
  margin: 0;
  font: 500 var(--text-caption) / 2.5 var(--font-japanese);
  letter-spacing: 0.2em;
}
.contact-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 20px;
  font: 700 18px var(--font-condensed);
  letter-spacing: 0.1em;
}
.contact-list dt,
.contact-list dd { margin: 0; }
.contact-list a { overflow-wrap: anywhere; }
.map-frame {
  display: block;
  width: 100%;
  aspect-ratio: 20 / 9;
  border: 0;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  column-gap: 5%;
}
.staff-card {
  position: relative;
  min-width: 0;
  padding-inline-end: 24px;
}
.staff-photo { width: 100%; height: auto; }
.staff-role {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  writing-mode: vertical-rl;
  font: 700 13px var(--font-latin);
}
.staff-names {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 20px;
}
.latin-name {
  margin: 0;
  font: 300 var(--text-name) var(--font-latin);
}
.latin-name span { display: block; }
.japanese-name {
  margin: 5px 0 0;
  font: 500 16px var(--font-japanese);
  letter-spacing: 0.1em;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gallery-gap);
}
.style-link {
  display: block;
  aspect-ratio: 1 / 1.267;
  overflow: hidden;
  border-radius: var(--radius-image);
  transition: opacity var(--motion-gallery);
}
.style-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Recommended menu structure; source row geometry was not supplied. */
.price-list > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}
.price-list dt,
.price-list dd { margin: 0; }

.photo-footer {
  position: relative;
  height: 500px;
  margin-block-start: 260px;
}
.copyright {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 30px;
  width: 100vw;
  margin: 0;
  color: var(--color-on-photo);
  text-align: center;
  font: 700 12px / 15px var(--font-latin);
}

/* Recommended breakpoint; the original threshold was not supplied. */
@media (max-width: 1024px) {
  :root {
    --rail-width: 0px;
    --content-start: 5vw;
    --content-width: 90vw;
    --section-top: 30px;
    --section-gap: 70px;
    --gallery-gap: calc(var(--content-width) * 0.018);
    --text-body: 13px;
    --text-intro: 14px;
    --text-caption: 14px;
    --text-name: 14px;
    --leading-intro: 2;
  }
  html { scroll-padding-top: 80px; }
  .desktop-logo,
  .desktop-rail { display: none; }
  .page { margin: 0; padding-block-start: 60px; }
  .mobile-header {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    height: 60px;
    padding-inline-start: 20px;
    display: grid;
    grid-template-columns: minmax(60px, 1fr) auto 60px 60px;
    align-items: center;
    background: var(--color-canvas);
  }
  .mobile-logo { width: 60px; }
  .mobile-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 16px;
    font: 700 13px / 1 var(--font-latin);
  }
  .mobile-social,
  .menu-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .mobile-social::before {
    content: '';
    position: absolute;
    inset: 18px auto 18px 0;
    width: 1px;
    background: currentColor;
  }
  .menu-toggle { border-inline-start: 1px solid #f2f2f2; }
  .menu-lines { display: grid; gap: 9px; width: 30px; }
  .menu-lines span { height: 1px; background: currentColor; }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block-end: 50px;
  }
  .hero-media { height: 140vw; min-height: 0; }
  .hero-copy {
    width: 100%;
    max-width: none;
    margin: 30px 0 0;
    text-align: center;
  }
  .sound-button { right: 15px; bottom: 15px; }
  .editorial-section {
    padding: 30px 5vw 0;
    scroll-margin-top: 0;
  }
  .hero + .editorial-section { margin-block-start: 0; }
  .section-title {
    position: static;
    margin-block-end: 20px;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  .section-title .divider { width: 1px; height: 20px; }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8%;
    row-gap: 25px;
  }
  /* Matches the four-item mobile preview; keep the full archive linked. */
  .blog-card:nth-child(n + 5) { display: none; }
  .blog-date { font-size: 10px; }
  .blog-title {
    margin-block-start: 15px;
    line-height: 1.8;
    letter-spacing: normal;
  }
  .view-more {
    margin-block-start: 29px;
    padding-block-end: 11px;
    font-size: 14px;
  }
  .feature-pair { grid-template-columns: 1fr; gap: 30px; }
  .feature-copy h3 { line-height: 2; }
  .recruit-copy h3 { font-size: 15px; letter-spacing: 0.1em; }
  .contact-list { font-size: 16px; letter-spacing: 0.05em; }
  /* Recommended mobile map height; not measured in the original. */
  .map-frame { aspect-ratio: auto; height: 300px; }
  .staff-grid {
    grid-template-columns: repeat(2, 47%);
    column-gap: 6%;
    row-gap: 30px;
  }
  .staff-role { font-size: 12px; }
  .staff-names { flex-direction: column; gap: 5px; }
  .latin-name span { display: inline; }
  .japanese-name { margin: 0; font-size: 14px; }
  .style-grid { grid-template-columns: repeat(3, 32%); }
  .photo-footer {
    height: min(500px, 75.74vw);
    margin-block-start: 100px;
  }
}

/* Recommended keyboard and reduced-motion additions. */
:where(a, button, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  a,
  .style-link { transition: none; }
}
```

At the supplied mobile width, the hero scaffold produces 60px of header, 546px of media, a 30px gap, and 168px of six-line introduction. This matches the measured opening sequence when the intended fonts and explicit line breaks are supplied. Validate crops separately: a correct container does not guarantee that the doorway or character artwork lands in the correct position.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #ffffff;
  --color-ink: #3c3835;
  --color-on-photo: #ffffff;
  --color-rule: #dedbd8;

  --font-copy: var(--font-japanese);
  --font-utility: var(--font-latin);
  --font-section: var(--font-condensed);

  --text-copy: var(--text-intro);
  --text-section-label: 26px;
  --text-staff-name: var(--text-name);

  --spacing-rail: var(--rail-width);
  --spacing-editorial-top: var(--section-top);
  --spacing-editorial-gap: var(--section-gap);
  --spacing-gallery-gap: var(--gallery-gap);
  --radius-photo: 0px;
}
```

## Sources & Evidence

- **Original and final website:** [https://lamune-kyoto.com/](https://lamune-kyoto.com/). The supplied observation records HTTP 200, an unchanged URL, and the page title `ラムネ 京都 美容室`.
- **Capture record:** retrieved October 4, 2026, at 21:54:31.280 UTC, equivalent to October 5 at 06:54:31.280 JST. Individual screenshot timestamps were not separately supplied.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; three original-page captures showing the opening, map and staff boundary, and recruitment/footer boundary; rendered document height approximately 7842.92px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; two original-page captures showing the opening and recruitment/footer; rendered document height approximately 6426.81px.
- **Rendered DOM and computed styles:** supplied text, link destinations, element rectangles, font declarations, colors, padding, transition shorthands, and animation values. These establish the measured tokens and grid relationships in this document.
- **Original-page identity:** the visible wordmark, salon information, contact details, and `Copyrights © lamune. All Rights Reserved.` independently support the salon identity. No production credit is established by the inspected original-page evidence.
- **Interaction limits:** persistent utility placement is visible across scroll positions. Navigation URLs are recorded, but clicks, menu opening, reservation completion, map manipulation, gallery viewing, hover endpoints, and sound playback were not exercised in the supplied evidence.
- **Inspection limits:** this reference analyzes the supplied captures and observation record only. No additional browsing, command execution, asset retrieval, or historical reconstruction was performed. Exact media formats, source selectors, breakpoint thresholds, and unseen states remain unknown.

All implementation aliases, the Quick Start scaffold, and recommended accessibility behavior are adaptations. They should be validated against the measured viewport endpoints before being extended to additional screen sizes.