# Yoko’s Piano School — Style Reference

> A narrow botanical storybook, framed by quiet navigation and photographs of a miniature musical world.

**Website:** [yokospiano.com](https://yokospiano.com/)
**Original URL:** https://yokospiano.com/
**Final URL:** https://yokospiano.com/
**Theme:** light, with textured ochre, turquoise, sage-gray, and coral section surfaces.
**Inspected captures:** September 16, 2026, 20:08:16 UTC / September 17, 2026, 05:08:16 JST.
**Viewports:** desktop 1440 × 1000; mobile 390 × 844 CSS pixels.
**Scope:** the current piano-school website, including its opening composition, lesson section, contact area, and footer in screenshots; rendered text and computed styles additionally cover introduction, profile, message, testimonials, and access information. This is a long school-information page with section navigation and external contact links.

Yoko’s Piano School combines botanical cutouts, painted wooden figures, miniature piano photography, and grainy paper backgrounds. Cream navigation gives the desktop composition a quiet left edge. A narrow central column carries the school’s story through illustrated sections, while a full-height photograph fills the right edge. Japanese Mincho typography, generous line spacing, and small English navigation labels establish a gentle editorial rhythm.

The identity depends on the relationship between elaborate imagery and restrained interface controls. Flowers, birds, butterflies, a cat, and piano keys form picture frames and section boundaries. Buttons remain simple outlines or translucent rectangular rows. On mobile, the side regions disappear and the central story becomes the whole page, preserving its decorative density and long vertical reading sequence.

## How to Read This Reference

- **Measured** means supplied rendered-DOM bounds or computed styles. Measurements are in CSS pixels unless stated otherwise.
- **Visually observed** means visible in the five original-page screenshots: three desktop views and two mobile views.
- **Estimated** colors and ornamental dimensions are visual approximations, not sampled pixels or recovered stylesheet declarations.
- **Calculated** values derive from the supplied measurements, such as column proportions and width ratios.
- **Recommended** values belong to the reusable implementation below. They do not establish how the original was coded.
- The evidence does not include complete stylesheets, image URLs, JavaScript, or an interaction recording. Exact breakpoints, image sequencing, disclosure behavior, and animation timing remain partly unverified.
- Several visible logos and section labels correspond to elements with empty extracted text. Their parent font declarations must not be mistaken for the lettering inside the graphics.

## Tokens — Colors

### Default Palette

Names and custom properties below are implementation aliases. The supplied source variables do not define a complete brand palette.

| Name | Value | Evidence | Suggested token | Role |
| --- | --- | --- | --- | --- |
| Warm lettering | `#f6ddc9` | Measured: `rgb(246, 221, 201)` | `--color-warm-text` | Central headings, body copy on colored sections, contact text, and footer lettering |
| Navigation ink | `#231815` | Measured: `rgb(35, 24, 21)` | `--color-nav-ink` | Desktop section links and several link containers |
| Message ink | `#50484d` | Measured: `rgb(80, 72, 77)` | `--color-message-ink` | Long-form message text |
| Sidebar cream | Approximately `#fff1da` | Visual estimate | `--color-paper` | Large uninterrupted desktop navigation surface |
| Ochre paper | Approximately `#b78345` | Visual estimate | `--color-ochre` | Opening poster and the visible beginning of the introduction |
| Turquoise paper | Approximately `#3c9e99` | Visual estimate | `--color-turquoise` | Lesson-section background |
| Sage-gray paper | Approximately `#929e97` | Visual estimate | `--color-sage` | Contact-section background |
| Coral paper | Approximately `#c67566` | Visual estimate | `--color-coral` | Footer background |
| Muted logo ink | Approximately `#62575b` | Visual estimate | `--color-logo-ink` | Sidebar wordmark and social artwork |
| Crest blue | Approximately `#006a85` | Visual estimate | `--color-crest-blue` | English lettering inside the illustrated opening crest |

The textured surfaces contain many lighter and darker pixels. These estimated hex values represent useful base fills beneath grain, not an assertion that each background is a flat color.

### Color Behavior

The left rail stays visually consistent while the central page moves through different colored papers. Warm lettering supplies continuity across the ochre, turquoise, sage-gray, and coral regions. The message section explicitly uses darker text in the computed evidence; its complete visual surface was not included in the screenshots.

The right-side photographs contribute greens, pale skies, wood tones, and sunset gold. Treat these as photographic color, rather than adding every image color to the interface palette.

Many sampled elements have transparent computed backgrounds even where textured color is visible. The paint may belong to ancestors, images, or other layers not included in the element sample. A transparent paragraph background does not describe the final surface beneath it.

The supplied custom properties include `--swiper-theme-color: #007aff`. This is evidence of a slider-related default, not evidence that bright blue is a visible brand accent. No selectable color themes or dark-mode control were demonstrated.

## Tokens — Typography

### Editorial Mincho

- **Measured stack:** `YakuHanMP, 'Zen Old Mincho', serif`.
- **Roles:** Japanese narrative copy, introductory statements, profile text, testimonial headings, and desktop navigation.
- **Weights:** generally `400` for expressive statements and message copy; `500` for several body paragraphs and navigation labels.
- **Character:** delicate strokes and generous leading support the botanical, printed atmosphere.
- **Implementation alias:** `--font-editorial`.

The body element computes to `16px / 32px`, but individual content elements override that value. The representative desktop narrative size is approximately 18.21px, not 16px.

### Practical Notes

- **Measured stack:** `YakuHanJP, 'Zen Kaku Gothic New', sans-serif`.
- **Roles:** lesson notes and the access-location notice.
- **Weight:** `400` in the supplied samples.
- **Character:** a quieter utility voice for practical information beneath expressive Mincho headings.
- **Implementation alias:** `--font-utility`.

This distinction is useful: the emotional narrative remains Mincho, while operational details use a simpler sans-serif treatment.

### Wordmarks and Graphic Labels

The opening English crest uses distinctive blue lettering integrated with the decorative composition. The sidebar and footer repeat Japanese and English school identities at different sizes. Do not infer a font family for this artwork from nearby DOM text.

The visible contact-button label appears heavier and more sans-serif than its sampled anchor’s inherited `16px` Mincho declaration. Descendant styling or artwork was not captured. Likewise, an empty H2 with a computed `24px` font size does not establish the visible size of a graphic section heading.

### Type Scale

The following are measured element styles, not rounded design-system guesses.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Navigation link | `13px / 13px` | Rail not rendered | `500`; `1.3px`, equivalent to `0.1em` |
| Opening tagline | `16.875px / 30.375px` | `13px / 23.4px` | `400`; `0.1em` |
| School-and-location H1 | `18.225px / 32.805px` | `14.04px / 25.272px` | `400`; `0.31em` |
| Introductory and lesson statements | `24.84px / 49.68px` | `19.136px / 38.272px` | `400`; normal tracking |
| Introduction body | `18.21px / 38.241px` | `14.3px / 30.03px` | `500`; `-0.05em` |
| Profile body | `18.21px / 38.241px` | `14.3px / 30.03px` | `500`; `-0.06em` |
| Message body | `18.21px / 37.3305px` | `14.3px / 29.315px` | `400`; `-0.04em` |
| Lesson utility notes | `16.309px / 26.0944px` | `12.8336px / 20.5338px` | Sans-serif, `400` |
| Testimonial heading | `24.887px / 44.7966px` | `19.1568px / 34.4822px` | `400`; some English headings add tracking |
| Testimonial body | `18.2125px / 37.3356px` | `14.3px / 29.315px` | `500` |
| Testimonial author | `22.005px / 39.609px` | `16.952px / 30.5136px` | `400`; tracking varies by entry |
| Contact explanation | `18.2125px / 38.2463px` | `14.3px / 30.03px` | `500`; `-0.06em` |
| Footer tagline | `15.255px / 27.459px` | `11.752px / 21.1536px` | `500`; `0.1em` |
| Copyright container | `12px / 21.6px` | `10.4px / 18.72px` | `400`; `0.07em` |

The largest measured live-text statements are around 25px on desktop. Scale and emphasis come primarily from imagery, line spacing, placement, and tracking rather than oversized headline typography.

## Tokens — Spacing & Shapes

**Density:** a narrow reading column with generous vertical breathing room, surrounded by broad desktop side regions.
**Source spacing system:** not recovered. The measurements reveal proportional scaling, but do not establish an exact source unit or formula.

### Responsive Unit

The central column measures 506px on desktop and 390px on mobile. Their calculated ratio is approximately `1.2974`. Several heading, spacing, and button measurements scale by approximately the same factor.

This relationship is useful for adaptation, but the page is not uniformly scaled. Body text, footer dimensions, section spacing, and some inset widths vary independently. Do not reproduce the mobile site by applying a transform to the entire desktop column.

The Quick Start uses container-relative units for approximate scaling within the story column. That is a recommended implementation technique, not recovered source CSS.

### Spacing Scale

| Use | Desktop measurement | Mobile measurement | Interpretation |
| --- | --- | --- | --- |
| Sidebar left inset | `50px` | Not applicable | Shared alignment for identity, navigation, and social links |
| Sidebar identity top | `65px` | Not applicable | Quiet upper margin |
| Navigation start-to-start rhythm | `37px` | Not applicable | `13px` line box plus a calculated `24px` interval |
| Typical central copy inset | `58.05px` | `44.72px` | Approximately `11.47%` of the column on each side |
| Message copy left inset | `54px` | `37.44px` | Slightly wider reading area than the introduction |
| Intro heading-to-body gap | `27px` | `20.80px` | Calculated from adjacent bounds |
| Lesson heading top padding | `81px` | `62.4px` | Measured on the section-heading container |
| Contact copy-to-button gap | `40.5px` | `31.19px` | Calculated from the text and anchor bounds |
| Instagram button height | `101.25px` | `78px` | Large, calm contact target |

### Border Radius

| Element | Evidence | Treatment |
| --- | --- | --- |
| Instagram contact link | Measured `108px` desktop; `83.2px` mobile | Fully rounded pill at the observed heights |
| Map link | Measured `108px` desktop; `83.2px` mobile | Same large rounded geometry |
| Lesson photograph | Visual estimate: roughly `55–70px` corner radius on desktop | Broad soft corners; flowers obscure part of the upper edge |
| Lesson option rows | Visually square | Stacked rectangles with thin separators |
| Floral opening frame | Visually irregular oval | Botanical artwork, not a plain rounded container |
| Paper crest | Irregular illustrated outline | Preserve as artwork rather than approximating with border radius |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Left rail | `x: 0`, width `467px`, visible height `1000px` | Not rendered in the supplied viewport |
| Main story | `x: 467px`, width `506px` | `x: 0`, width `390px` |
| Right photographic region | Screenshot extent `x: 973–1440px`, width `467px` | Not visible |
| Typical introduction text width | `389.91px` | `300.56px` |
| Message text width | `406.09px` | `321.36px` |
| Contact link width | `390.5px` | `304.75px` |
| Testimonial text block | `275px` | `215.78px` |
| Sampled testimonial track interval | `383px` | `301px` |
| Footer DOM bounds | Width `506px`, height `553.77px` | Width `390px`, height `453.17px` |
| Document height | Approximately `11950.14px` | Approximately `9337.19px` |

The desktop composition is approximately `32.43% / 35.14% / 32.43%`. These percentages describe one inspected viewport; they are not verified breakpoint-independent rules.

## Components

### Desktop Identity and Navigation Rail

**Role:** maintain orientation throughout a long page.

A cream rail fills the left side of every supplied desktop screenshot. The identity sits near `(50, 65)`, followed by a seven-link vertical list: `INTRO`, `PROFILE`, `MESSAGE`, `LESSON`, `VOICE`, `ACCESS`, and `CONTACT`.

Navigation starts around `y: 189.6px`. Each text box is 13px high, with a 37px start-to-start rhythm. The small uppercase letters use medium-weight Mincho and `0.1em` tracking. Links have a measured 130px-wide box even though the visible words are shorter.

Below the navigation, four social/editorial destinations form another vertical stack: YouTube, Instagram, Ameba Blog, and the piano-column graphic. The first begins around `y: 474.6px`; later items are roughly 49–51px apart. These are graphic identities, so their visible lettering should not be recreated from the anchor’s inherited font declaration.

The rail remains in the same screen position across the supplied desktop scroll views. This supports a persistent-rail description, although the evidence does not establish whether the source uses fixed or sticky positioning. The school identity links to `#wrap`; navigation links point to the corresponding section fragments.

### Botanical Opening Poster

**Role:** introduce the school through a distinctive visual world.

The opening fills the narrow central column with ochre grain and fine pale rays. A short Japanese tagline appears near the top. A large irregular oval of daisies, blue flowers, and leaves surrounds a shallow-focus photograph of painted wooden figures and a miniature piano. Small birds, roses, butterflies, and scattered blossoms extend beyond the main frame.

A pale illustrated paper crest overlaps the lower part of the frame. Blue English school lettering is integrated with the crest. The live-text school-and-location H1 sits below, with unusually generous `0.31em` tracking.

Measured text placement includes:

- Tagline top: `28.34px` desktop; `21.83px` mobile.
- School-and-location heading top: `832px` desktop; `634.39px` mobile.
- Following introduction heading top: `1061.61px` desktop; `769.59px` mobile.

The desktop and mobile captures show different figure arrangements inside the opening image. This could reflect different imagery, framing, or a different media state; the still evidence does not identify the cause.

Do not replace the crest with a generic script font or render the floral frame as a plain CSS ellipse. Their uneven edges, overlap, and small motifs carry much of the identity.

### Narrative Sections

**Role:** connect the visual opening to the school’s teaching approach.

The introduction begins with a two-line statement followed by long-form Japanese copy. Its typical inner width is about 77% of the story column. Headings use approximately twice their font size as line height; body copy uses approximately `2.1` leading.

The visible mobile opening shows the first narrative statement entering near the bottom of the initial viewport. The composition therefore continues directly into reading content rather than ending with an isolated full-screen splash.

The DOM establishes a sequence of introduction, profile, message, lessons, testimonials, access, a closing statement, and contact. Preserve this sequence as an editorial journey; it should not be compressed into a generic grid of interchangeable feature cards.

### Profile and Message

**Role:** explain the teacher’s background and educational approach.

The profile includes a statement, the teacher’s Japanese and Romanized names, biography text, and labels for education, qualifications, and awards. The name container is a flex row with a measured gap of `27px` desktop and `20px` mobile. Child font sizes were not supplied, so the parent’s 16px declaration is not a complete measurement of the displayed name treatment.

The message is a substantial single-column text passage. It uses `#50484d`, regular-weight Mincho, approximately `2.05` line height, and mildly negative tracking. Its text area is wider than the introduction’s, reaching about 406px on desktop and 321px on mobile.

These sections are supported by DOM evidence rather than dedicated supplied screenshots. The exact imagery, background artwork, and behavior associated with the credential labels are unverified.

### Lesson Section

**Role:** introduce lesson choices without overwhelming the page’s atmosphere.

The supplied desktop view shows a turquoise paper surface with a rounded photograph of hands playing a piano. Rose cutouts overlap the photograph’s upper edge. Beneath it, a two-line Mincho statement introduces the lesson offering.

Three translucent rectangular rows sit in a single stack:

1. `ピアノ個人レッスン`
2. `大人のピアノレッスン（高校生以上）`
3. `一曲マスターコース`

The stack is approximately 390px wide in the desktop screenshot. Individual rows are visually about 81px high, with warm thin separators, left-aligned labels, and a tiny upward-pointing triangular marker at the right. The rows have no visible elevation shadow.

The markers suggest disclosure controls, but opening and closing were not recorded. All three labels are visible without accompanying expanded detail in the supplied state. Do not invent lesson prices, expanded content, or state semantics.

Two practical notes follow in the measured sans-serif stack. They mention English/Zoom lessons and consultation for occasional lessons by former students. Their smaller size and tighter leading distinguish operational detail from the larger expressive statement above.

### Testimonial Track

**Role:** present individual voices in the same narrow reading format.

The DOM contains six testimonial entries, each with a heading, paragraph, and author. Their horizontal positions form a repeating track: approximately 383px between entries on desktop and 301px on mobile. Several entries have negative x coordinates, while the final sampled entry is centered inside the story column.

This geometry, together with the supplied slider-related custom properties, supports a horizontal slider interpretation. It does not demonstrate autoplay, swiping, looping, navigation arrows, or pagination.

The text itself occupies a smaller width than ordinary prose: 275px desktop and about 215.78px mobile. Headings have `1.8` leading, body copy approximately `2.05`, and author names are slightly larger than the body. Maintain this typographic hierarchy rather than turning every quote into a dense compact card.

No dedicated testimonial screenshot was supplied. Its card surfaces, ornaments, controls, and transitions should remain unspecified until directly inspected.

### Access Information

**Role:** provide practical location context while respecting the school’s home-based setting.

The rendered page includes a `Google Mapで見る` link, descriptive location text, labeled address/parking/access information, and a note that detailed location and parking instructions are provided for lessons.

The map anchor measures approximately `384.75 × 101.25px` on desktop and `296.39 × 78px` on mobile. It has the same pill-like radius family as the contact link. Its sampled background is white, but the full rendered appearance is not shown in the supplied screenshots; descendants and other layers may affect the result.

Keep access information structured and readable. Do not infer a booking interface or add an exact street address that is absent from the supplied page content.

### Contact Panel

**Role:** direct visitors to current lesson availability on Instagram.

A sage-gray textured section contains the `CONTACT` label, a centered two-line explanation, and one large outlined Instagram link. The measured anchor is `390.5 × 101.25px` desktop and `304.75 × 78px` mobile. Its background is transparent in the supplied styles; the screenshot shows a fine warm outline.

The explanation uses Mincho. The visible button label is heavier and visually simpler. Leave substantial space around the pill so it reads as an inviting destination rather than an urgent conversion banner.

The destination is `https://www.instagram.com/yo_ko_piano/`. No contact form, availability calendar, or on-site booking completion was demonstrated.

### Botanical Keyboard Divider

**Role:** transform the contact-to-footer transition into a small illustrated scene.

A cat peeks above a dense horizontal band of daisies, blue flowers, and green leaves. Beneath the foliage, irregularly drawn piano keys span the full story width. The artwork crosses the apparent boundary between the sage contact area and coral footer.

On mobile, the cat appears around the left quarter of the composition rather than centered. Leaves and flowers extend to both edges. Preserve this asymmetry and the layered relationship between foliage and keyboard.

The footer’s DOM rectangle begins within the overall illustrated transition. Its top coordinate is not identical to the visible start of the coral paper. Use the screenshot to understand the overlap rather than treating the footer bounding box as a clean horizontal color boundary.

### Footer

**Role:** close the narrative, repeat the identity, and provide external destinations and credits.

The coral paper footer centers a short tagline and the bilingual school identity. A two-column, two-row group repeats YouTube, Instagram, Ameba Blog, and the piano-column destination. Warm monochrome artwork keeps these external brands within the page’s palette.

At the bottom, small tracked serif text carries the copyright line and `Designed by 6B Iwamiginzan`. The original page directly links the design credit to `https://d-6b.com/` and includes an `Iwamiginzan Dessin Dolls` copyright link to `https://www.instagram.com/dessin_dolls/`. The copyright wording alone does not establish a more specific production role.

The footer stays inside the central column on desktop. It does not expand across the navigation and photography regions. On mobile it occupies the full viewport width.

### Desktop Photographic Panel

**Role:** sustain atmosphere beside the long central story.

The rightmost 467px of the desktop captures contain full-height photography. The opening view shows green foliage and wooden figures gathered around a miniature piano. The lesson view uses a closer view with a bright upper area. The ending view places figures near the bottom against a warm sunset and reflective water.

Short Japanese phrases appear in vertical columns over the quieter parts of each photograph. Their placement respects negative space rather than crossing the figures’ faces.

Different photographs are visible in different captures. The evidence does not establish whether their changes are tied to scrolling, elapsed time, or another state. Reproduce the panel’s visual role without inventing parallax or a timed slideshow as an observed feature.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be carried forward |
| --- | --- | --- |
| Desktop section navigation | Fragment URLs from `#intro` through `#contact` | Same-page destinations are established; smooth-scroll timing is not |
| Desktop link transitions | Computed `0.3s` on navigation and several other anchors | A 300ms duration is measured; changed properties and visible endpoints are not recorded |
| Persistent side regions | Same desktop rail position across supplied scroll views | Preserve persistent framing; fixed versus sticky source implementation is unknown |
| Lesson row markers | Three visible triangular markers | Disclosure-like affordance only; activation and open-state behavior unverified |
| Testimonial sequence | Repeating horizontal positions and slider-related variables | A horizontal track is supported; controls, looping, autoplay, and gesture handling are unverified |
| Changing photographic imagery | Different images or compositions across captures | Image variation is visible; transition type and trigger are unknown |
| Instagram and map links | Explicit external destinations | Navigation links, not verified on-site transaction flows |
| Sampled element animation | `animation: none` on listed elements | Applies only to sampled elements; does not prove the entire page is static |

The capture procedure waited for stability and managed perpetual animations during readiness checks. That procedure is not an animation inventory. Static screenshots cannot establish duration, easing, autoplay, sound, or scroll synchronization.

**Recommended adaptation:** use restrained opacity or color feedback around 200–300ms where needed, preserve native link behavior, and provide reduced-motion handling for any added image transitions. Avoid adding continuous movement simply because the imagery is playful.

## Surfaces

| Layer | Appearance | Structural purpose |
| --- | --- | --- |
| Desktop navigation | Broad, visually flat cream | Quiet framing and orientation |
| Opening story | Grainy ochre with fine radial lines | Warm illustrated cover |
| Lesson section | Grainy turquoise | Distinguish practical offerings while retaining warm lettering |
| Lesson rows | Slightly lighter translucent rectangles | Group options without elevated cards |
| Contact section | Grainy sage-gray | A calm final destination |
| Contact link | Transparent pill with a thin warm outline | One clear action without a solid accent fill |
| Footer | Grainy coral | A warm closing page beneath the keyboard ornament |
| Right panel | Full-height natural photography | Environmental storytelling and visual breathing room |

There is no general shadow-based elevation system visible in the supplied components. Separation comes from background changes, narrow rules, image shapes, and decorative overlap. Natural photographic shadows should not be confused with UI box shadows.

## Imagery

The strongest visual ingredients are tactile and specific: painted articulated wooden figures, a miniature piano, moss, garden flowers, shallow depth of field, vintage botanical cutouts, and softly mottled paper. Faces and clothing retain their hand-painted irregularities. Photography uses natural light and pronounced foreground/background separation.

The botanical material resembles detailed printed ephemera rather than simplified flat vector icons. White daisies, blue flowers, roses, green leaves, small birds, butterflies, and a cat build a coherent miniature world. Fine pale rays add structure behind the opening arrangement without competing with it.

Preserve these differences between image roles:

- **Opening frame:** a dense ornamental composition around a photograph.
- **English crest:** illustrated lettering and paper, treated as a single identity asset where appropriate.
- **Lesson photograph:** a real piano-playing scene with broad rounded corners and floral overlap.
- **Right panel:** tall photographic crops with enough quiet space for vertical text.
- **Footer divider:** a full-width, irregular keyboard-and-flower illustration.
- **Paper grain:** subtle surface variation beneath the readable content.

Use normal image smoothing for photographs and detailed cutouts. Pixelated rendering would work against the observed photographic and printed texture.

### Observed Asset References

No original image-file URLs were included in the supplied evidence. The entries below identify visible assets without inventing filenames or paths.

| Asset | Capture evidence | Implementation guidance |
| --- | --- | --- |
| Floral opening oval and paper crest | Desktop opening and mobile opening | Preserve detailed edges and overlapping motifs; use authorized artwork |
| Wooden figures and miniature piano | Opening and desktop right-panel views | Preserve painted texture and shallow-focus photography |
| Rounded piano-playing photograph | Desktop lesson view | Keep the broad rounded silhouette and floral overlay |
| Paper textures | Opening, lesson, contact, and footer views | Use restrained grain over a base color |
| Cat, flowers, and piano keys | Desktop ending and mobile ending | Use a full-width ornament with transparency where needed |
| School wordmarks and social artwork | Desktop rail and both ending views | Preserve aspect ratios; provide accessible link names |

The supplied links identify destinations, not downloadable image assets. The CSS starter therefore does not invent original asset paths.

## Layout & Responsive Behavior

### Desktop Composition

At 1440px wide, the story is centered between equal-width side regions: `467 / 506 / 467px`. The left rail and right photograph occupy the viewport height in the supplied captures, while the central document extends to approximately 11,950px.

The central content remains deliberately narrow. Most prose is around 390px wide, so the experience retains a small-book quality even on a large monitor. The right photograph provides visual scale without forcing long text lines.

The footer remains aligned to the story column. This is an important structural detail: a conventional full-width footer would interrupt the persistent three-part composition.

### Mobile Composition

At 390 × 844, the main column starts at `x: 0` and spans the entire viewport. The desktop navigation and photographic side panel are absent from the supplied mobile views. The rendered mobile link inventory also omits the desktop section-navigation links.

No replacement hamburger, sticky contact bar, or mobile header was demonstrated. The opening artwork begins at the top of the screen, and social destinations remain available in the footer.

The decorative composition scales down with the column. Typical prose width becomes approximately 300.56px, leaving about 44.72px on either side. Some long-form regions use slightly wider measures. Contact buttons stay broad, approximately 305px wide and 78px tall.

Typography scales selectively: introductory statements move from 24.84px to 19.136px, while body text moves from 18.21px to 14.3px. The document remains long at approximately 9,337px. The mobile result is a complete reading experience rather than a compressed desktop overview.

### Responsive Limits

Only two viewport sizes were supplied. The exact breakpoint, tablet composition, landscape behavior, maximum column width at larger desktops, and safe-area rules are unknown.

The Quick Start uses a 1000px breakpoint and a 506px story cap as recommendations. Those choices reproduce the inspected desktop geometry and mobile structure, but should be validated at intermediate widths. Retain independent document flow; do not scale the entire page as a single bitmap or transformed canvas.

## Do’s and Don’ts

### Do

- Preserve the narrow central story and its equal desktop side regions at the inspected width.
- Keep the cream navigation quiet, with small tracked section labels and generous empty space.
- Use the measured Mincho and sans-serif stacks for their distinct editorial and practical roles.
- Retain generous line height and modest live-text headline sizes.
- Carry `#f6ddc9` through colored sections as the measured warm text color.
- Treat botanical frames, the paper crest, and the keyboard divider as essential artwork.
- Preserve the wooden figures’ painted texture and photographic depth of field.
- Keep lesson choices as a calm vertical stack with thin separators.
- Make the Instagram destination a broad outlined pill.
- Keep the footer within the story column on desktop.
- Preserve vertical Japanese copy in photographic negative space where appropriate.
- Label uncertain behaviors and estimated values explicitly when extending the reference.

### Don’t

- Don’t widen prose across the desktop viewport.
- Don’t replace the school’s narrative with a generic feature-card grid.
- Don’t invent a large mobile header or floating booking CTA as an existing feature.
- Don’t convert the textured palette into glossy gradients or glass panels.
- Don’t replace the illustrated crest with an arbitrary script typeface.
- Don’t use bright slider-default blue as a brand color.
- Don’t mistake inherited H1/H2 styles for the lettering inside graphic assets.
- Don’t assume the lesson triangles prove a particular accordion behavior.
- Don’t claim autoplay, parallax, or crossfade timing from still captures.
- Don’t infer exact background colors from transparent element declarations.
- Don’t invent original image paths or production roles.
- Don’t apply pixelated rendering to the photographs and botanical cutouts.

## Recommended Implementation Additions

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

- Give every graphic social link and school-identity link an accessible name. Empty extracted link text is insufficient to assess its existing accessible name.
- Preserve semantic headings even when a visible section title is artwork. A decorative title graphic can accompany accessible live text.
- Provide visible keyboard focus that remains legible on cream and textured backgrounds.
- If lesson rows reveal content, use native disclosure elements or buttons with an accurate expanded state. Implement this only with real lesson content.
- If testimonials remain a carousel, provide keyboard-operable controls and a way to pause any automatic movement. Keep all entries accessible without gesture-only interaction.
- Consider a 16px minimum for new mobile body copy; the observed 14.3px scale can become demanding during long reading. Check the resulting line breaks rather than preserving the original measure at any cost.
- Check text contrast against the actual darkest and lightest areas of each texture, especially the sage contact surface and translucent lesson rows.
- Reserve image dimensions to prevent layout shifts. Use responsive image variants for the large photographic panel and detailed cover.
- Treat purely decorative flowers, rays, and redundant side photography appropriately in text alternatives, while describing meaningful school imagery.
- Respect reduced-motion preferences for any added image transitions and avoid making essential navigation depend on animation.

## Agent Prompt Guide

### Quick Color Reference

- Measured warm central text: `#f6ddc9`.
- Measured navigation ink: `#231815`.
- Measured message text: `#50484d`.
- Estimated sidebar paper: `#fff1da`.
- Estimated opening paper: `#b78345`.
- Estimated lesson paper: `#3c9e99`.
- Estimated contact paper: `#929e97`.
- Estimated footer paper: `#c67566`.
- Surface character: fine grain, botanical overlap, restrained rules, and no general elevation shadows.
- Primary contact treatment: a transparent warm-outlined pill, not a saturated filled button.

### Overall Prompt

“Create a Japanese piano-school website with the intimacy of a botanical storybook. At a 1440px desktop width, center a roughly 506px scrolling story between a cream navigation rail and a full-height photographic panel. Use YakuHanMP with Zen Old Mincho for narrative typography and YakuHanJP with Zen Kaku Gothic New for practical notes. Build the visual identity from authorized photographs of painted wooden figures around a miniature piano, detailed floral cutouts, textured paper, and an illustrated English crest. Move the central story through ochre, turquoise, sage-gray, and coral surfaces with warm `#f6ddc9` lettering. Use modest two-line headings, generous leading, simple lesson rows, and a large outlined Instagram link. On mobile, present the story at full width and omit the desktop side regions. End with a cat-and-flower keyboard ornament and a compact two-column social footer. Keep unverified motion and disclosure behavior separate from the visual reconstruction.”

### Example Component Prompts

1. **Opening poster:** “Create an ochre paper cover for a narrow music-school story. Surround a shallow-focus miniature-piano photograph with an irregular oval of daisies, blue flowers, and leaves. Overlap the lower frame with an illustrated paper crest. Add small birds, roses, and delicate radial lines. Keep the Japanese tagline and location text as accessible live text.”
2. **Desktop rail:** “Build a quiet cream side rail with a small bilingual school identity at the upper left, seven tracked 13px uppercase section links, and four monochrome social/editorial marks beneath. Preserve a 50px left inset and ample unused space.”
3. **Lesson section:** “Use turquoise paper grain, a broadly rounded photograph of piano playing with roses overlapping its edge, a two-line Mincho statement, and three translucent rectangular lesson rows. Add thin warm separators and small right-aligned triangular markers. Keep notes below in a smaller Japanese sans-serif.”
4. **Contact and footer:** “Create a sage-gray contact area with centered availability text and a wide warm-outlined Instagram pill. Transition into coral paper through a full-width collage of a cat, flowers, leaves, and irregular piano keys. Center the school identity, a two-by-two social group, and small tracked credits.”
5. **Photographic panel:** “Crop a natural-light miniature-piano scene into a tall desktop side panel. Preserve soft background focus and space above or beside the figures for short vertical Japanese copy. Do not add motion unless its trigger and accessible behavior are separately specified.”

## Quick Start

### CSS Custom Properties

This is a recommended adaptation, not extracted source CSS. It reproduces the measured desktop column geometry and approximates the observed scale with container units. Estimated surface colors are marked below. Font files and authorized image assets must be supplied separately.

Expected structure: `.school-layout` contains `.sidebar`, `.story`, and `.scene`. The story contains the main sections and footer. Text belongs inside `.content`; the cover artwork should be prepared without duplicating the live tagline and location caption. Set `--paper-grain` to an authorized texture when available; its default is `none`.

The lesson rules support native `details` and `summary` as a recommended accessible implementation. They do not establish that the original uses those elements. The right panel is static in this starter; image sequencing requires a separately specified behavior.

```css
:root {
  /* Measured text colors */
  --color-warm-text: #f6ddc9;
  --color-nav-ink: #231815;
  --color-message-ink: #50484d;

  /* Visual estimates for textured surfaces */
  --color-paper: #fff1da;
  --color-ochre: #b78345;
  --color-turquoise: #3c9e99;
  --color-sage: #929e97;
  --color-coral: #c67566;
  --color-logo-ink: #62575b;

  /* Measured font stacks; load font assets separately */
  --font-editorial: YakuHanMP, 'Zen Old Mincho', serif;
  --font-utility: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;

  /* Adaptation tokens, not recovered source variables */
  --story-max: 506px;
  --paper-grain: none;
  --text-title: clamp(19.136px, 4.909cqw, 24.84px);
  --text-body: clamp(14.3px, 3.6cqw, 18.21px);
  --text-note: clamp(12.8336px, 3.223cqw, 16.309px);
  --text-credit: clamp(10.4px, 2.372cqw, 12px);
  --section-space: clamp(62.4px, 16cqw, 81px);
  --copy-gap: clamp(20.8px, 5.34cqw, 27px);
  --motion-link: 300ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-message-ink);
  font-family: var(--font-editorial);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.school-layout {
  display: block;
}

.sidebar,
.scene {
  display: none;
}

.story {
  width: min(100%, var(--story-max));
  min-width: 0;
  margin-inline: auto;
  container-type: inline-size;
}

.paper-section {
  --surface: var(--color-ochre);
  padding-block: var(--section-space);
  color: var(--color-warm-text);
  background-color: var(--surface);
  background-image: var(--paper-grain);
}

.content {
  width: 77.1%;
  margin-inline: auto;
}

.section-statement {
  margin: 0 0 var(--copy-gap);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 2;
}

.prose {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.prose + .prose {
  margin-top: 1.5em;
}

/* Approximate cover proportions; artwork supplies the ornament. */
.hero {
  position: relative;
  aspect-ratio: 390 / 740;
  color: var(--color-warm-text);
  background-color: var(--color-ochre);
  background-image: var(--paper-grain);
}

.hero-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-tagline {
  position: absolute;
  inset: 3% 4% auto;
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 3.335cqw, 16.875px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.hero-caption {
  position: absolute;
  inset: 86% 5% auto;
  margin: 0;
  text-align: center;
  font-size: clamp(14.04px, 3.6cqw, 18.225px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.31em;
}

/* Recommended light message surface; exact source fill is unknown. */
.message {
  --surface: var(--color-paper);
  color: var(--color-message-ink);
}

.message .content {
  width: 82%;
}

.message .prose {
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: -0.04em;
}

.lesson {
  --surface: var(--color-turquoise);
}

.lesson-photo {
  width: 83%;
  aspect-ratio: 1.6;
  margin: 0 auto 8cqw;
  border-radius: clamp(42px, 13cqw, 66px);
  object-fit: cover;
}

.lesson-options {
  margin-block: 8cqw 7cqw;
}

.lesson-options details {
  background: rgb(246 221 201 / 14%);
  border-bottom: 1px solid rgb(246 221 201 / 55%);
}

.lesson-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 16cqw;
  padding: 1em 5cqw;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-title);
  line-height: 1.5;
}

.lesson-options summary::-webkit-details-marker {
  display: none;
}

.lesson-options summary::after {
  content: '▴';
  flex: none;
  font-size: 0.55em;
}

/* Recommended state feedback, not a verified original interaction. */
.lesson-options details[open] > summary::after {
  transform: rotate(180deg);
}

.lesson-detail {
  padding: 0 5cqw 5cqw;
}

.utility-note {
  font-family: var(--font-utility);
  font-size: var(--text-note);
  line-height: 1.6;
}

.contact {
  --surface: var(--color-sage);
  text-align: center;
}

.contact .content {
  width: 78%;
}

.contact-title {
  margin: 0 0 9cqw;
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20cqw;
  margin-top: 8cqw;
  padding: 1em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--color-warm-text);
  font-family: var(--font-utility);
  font-size: clamp(16px, 4cqw, 20px);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--motion-link);
}

.site-footer {
  color: var(--color-warm-text);
  background-color: var(--color-coral);
  background-image: var(--paper-grain);
  text-align: center;
}

.footer-ornament {
  width: 100%;
  height: auto;
  margin-bottom: -1px;
  background-color: var(--color-sage);
}

.footer-inner {
  padding: 12cqw 15% 8cqw;
}

.footer-tagline {
  margin: 0;
  font-size: clamp(11.752px, 3.015cqw, 15.255px);
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.footer-brand {
  width: 75%;
  margin: 3cqw auto 0;
}

.footer-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8cqw 10cqw;
  margin-top: 8cqw;
}

.footer-socials a {
  display: grid;
  min-height: 44px;
  place-items: center;
}

.footer-credits {
  margin: 9cqw 0 0;
  font-size: var(--text-credit);
  line-height: 1.8;
  letter-spacing: 0.07em;
}

/* Recommended breakpoint; the original breakpoint was not supplied. */
@media (min-width: 1000px) {
  .school-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 506px minmax(0, 1fr);
    align-items: start;
  }

  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    padding: 65px 50px;
    color: var(--color-nav-ink);
  }

  .rail-brand {
    display: block;
    width: 198px;
    min-height: 57.6px;
  }

  .rail-nav {
    display: grid;
    gap: 24px;
    margin-top: 67px;
  }

  .rail-nav a {
    width: 130px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    text-decoration: none;
  }

  .rail-socials {
    display: grid;
    gap: 25px;
    margin-top: 50px;
  }

  .rail-socials a {
    display: block;
    width: fit-content;
    min-height: 24px;
  }

  .message .content {
    width: 80.3%;
  }

  .scene {
    display: block;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
  }

  .scene > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scene-copy {
    position: absolute;
    top: 12%;
    left: 35%;
    margin: 0;
    color: var(--color-warm-text);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.1em;
  }
}

/* Recommended interaction and accessibility additions. */
:where(a, button, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  .contact-link:hover {
    background-color: rgb(246 221 201 / 12%);
  }
}

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

For a reading-first adaptation, raise the minimum in `--text-body` from `14.3px` to `16px` and recheck Japanese line wrapping. Keep the original measured value documented so the accessibility adjustment remains distinguishable from the reference.

### 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 CSS properties above first; container-relative typography should be used inside `.story`.

```css
@theme inline {
  --color-paper: #fff1da;
  --color-warm-text: #f6ddc9;
  --color-nav-ink: #231815;
  --color-message-ink: #50484d;
  --color-ochre: #b78345;
  --color-turquoise: #3c9e99;
  --color-sage: #929e97;
  --color-coral: #c67566;

  --font-editorial: YakuHanMP, 'Zen Old Mincho', serif;
  --font-utility: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;

  --text-story-heading: var(--text-title);
  --text-story-body: var(--text-body);
  --text-story-note: var(--text-note);
  --text-story-credit: var(--text-credit);

  --spacing-story: 506px;
  --spacing-section: var(--section-space);
  --spacing-copy-gap: var(--copy-gap);
  --radius-contact: 999px;
}
```

## Sources & Evidence

- **Original and final website:** [Yoko’s Piano School](https://yokospiano.com/). The supplied inspection reports HTTP 200 and no URL change.
- **Capture timestamp:** `2026-09-16T20:08:16.179Z`, corresponding to September 17, 2026, 05:08:16.179 JST.
- **Desktop evidence:** 1440 × 1000 screenshots of the opening, lesson area, and ending; rendered DOM bounds, text, links, computed styles, and an approximately 11,950px document height.
- **Mobile evidence:** 390 × 844 screenshots of the opening and ending; rendered DOM bounds, text, links, computed styles, and an approximately 9,337px document height.
- **Section destinations:** the original page exposes `#intro`, `#profile`, `#message`, `#lesson`, `#voice`, `#access`, and `#contact`. Their URLs establish navigation targets; no click-by-click navigation recording was supplied.
- **Attribution visible on the original page:** the footer contains the school copyright, the linked `Iwamiginzan Dessin Dolls` copyright wording, and `Designed by 6B Iwamiginzan`. More specific production responsibilities are not established by that wording.
- **Inspection limitations:** no complete asset manifest, stylesheet source, JavaScript, hover/focus recordings, disclosure activation, carousel-control testing, or motion timeline was supplied. Readiness checks waited for page stability but do not prove that every delayed state or interaction was exercised. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current supplied original-page evidence. Color estimates, proportional calculations, and implementation recommendations are labeled separately from measured styles and visible structure.