# Vaundy × Morisawa Fonts / 置き手紙 — Style Reference

> A music video opens into a monumental Japanese type specimen, punctuated by electric blue.

**Original URL:** https://okitegami.morisawafonts.com/  
**Final URL:** https://okitegami.morisawafonts.com/  
**Theme:** pale editorial surfaces, black typography, and saturated blue statement sections.  
**Inspected:** October 2, 2026, Japan Standard Time; supplied retrieval timestamp: October 1, 2026, 16:11:25.347 UTC.  
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.  
**Scope:** the current root-page experience, using supplied opening, lyrics, credits, and footer captures together with rendered DOM measurements. Concept and Interview have detailed computed-style evidence; the service introduction has text and link evidence. The separate interview page and external font pages were not inspected.

This is a music collaboration microsite with an extensive, linked font specimen. Its sequence connects the opening media, Concept, Interview, Lyrics, About Morisawa Fonts, and Credit. The lyrics occupy much of the document and serve as the central browsing experience: enormous Japanese phrases sit above tiny blue labels identifying their typefaces.

The strongest contrast is between scale and restraint. Large lettering and broad blue fields provide impact; navigation, annotations, and production roles remain small. Pale surfaces carry a subtle visible texture. Rounded geometry is concentrated in the media control and interview links, while the page itself remains open, flat, and largely unboxed.

## How to Read This Reference

- **Measured** means reported by the supplied rendered DOM or computed styles. Values are CSS pixels unless stated otherwise.
- **Estimated** means visually assessed from the supplied original-page captures. These estimates are not stylesheet declarations.
- **Calculated** means derived from reported measurements, such as section proportions or footer height.
- **Recommended** means a practical adaptation for a new implementation, including the CSS starter and its breakpoint.
- Token names introduced here are implementation aliases. The reported source custom properties are documented separately.
- A computed font family identifies a declaration; it does not independently verify which font file rendered every glyph.
- Several visible headings and navigation labels have empty extracted text. Their inherited `16px` computed size does not describe the visible lettering.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Campaign Blue | `#003cff` | `--campaign-blue` | Measured Concept background and Interview heading/link color; visually repeated in annotations, arrows, and footer |
| Paper | `#f6f7f8` | `--paper` | Measured HTML and body background; pale ground behind lyrics and credits |
| Interview Paper | `#eef0f2` | `--paper-muted` | Measured Interview section background |
| Ink | `#000000` | `--ink` | Measured default text and lyric-link color |
| White | `#ffffff` | `--white` | Measured Concept text; visually used for media controls and footer content |
| Brand Gray | Approximately `#cccccc` | `--brand-gray` | Visual estimate for the second arch of the brand mark; use the supplied logo asset for accuracy |
| Legal Gray | Approximately `#999999` | `--legal-muted` | Visual estimate for trademark notes; exact computed color was not supplied |

The blue is structural. It fills the Concept section and visually anchors the footer, while smaller blue annotations connect the specimen to font destinations. On paper, most large content remains black.

The cyan and luminous blue in the mobile media frame belong to the artwork. They are not evidence of additional interface accent colors. Likewise, the warm brown and muted green in the desktop media frame should not become UI tokens.

### Theme Behavior

Only one page palette is evidenced. There is no verified theme selector or dark-mode variant. White-on-blue sections are part of the page composition, rather than a separate theme.

## Tokens — Typography

### Interface and Supporting Copy

**Measured source stack:** `'Aoto Gothic Regular', -apple-system, 'system-ui', system-ui, sans-serif`.

This stack appears on the root, supporting paragraphs, and other interface containers. The root size is a conventional `16px`. The Interview paragraph is more specifically measured at `14px / 27px` with `0.42px` tracking, equivalent to `0.03em`.

Keep the utility typography quiet. Font annotations, credit roles, and affiliations should remain subordinate to the specimen and names.

### Concept Prose

**Measured family:** `'A1 Mincho'`, weight `400`.

The Concept passage uses a spacious Japanese Mincho treatment:

- Desktop: `30px / 66px`, with `3.6px` tracking.
- Mobile: `18px / 36px`, with `2.16px` tracking.
- Tracking is consistently `0.12em`.
- The explanatory footnote remains `14px / 27px`, with `0.42px` tracking, at both inspected widths.

This passage is deliberately more expansive than ordinary supporting copy. Preserve its generous leading and composed line breaks rather than applying the compact Interview style everywhere.

### Editorial English and Graphic Lettering

The `View More` link declares `'Pietro Display Pro Light Italic'`, weight `400`. Its measured size is `30px` on desktop and `24px` on mobile, with a `36px` line height at both widths.

The visible navigation and `Follow us` caption also have a delicate italic editorial character. Their exact rendered families are not established by the supplied measurements. Do not attribute every English label to Pietro solely because that family is verified on the Interview link.

Section headings and the project lockup have measurable visual boxes but empty extracted heading text. Preserve their proportions using authorized artwork where available. A generic serif heading is an implementation fallback, not an exact font identification.

### Lyric Specimen Families

The page assigns families to individual linked phrases or smaller runs. Representative declarations include:

| Source family declaration | Observed role |
| --- | --- |
| `'Ryumin Medium KL'` | Opening lyric run |
| `'Yu Gothic Pr6N D'` | Another opening run |
| `Kumoyaji` | Short opening phrase |
| `'Kasumi Shirafuji Medium'` | A later lyric run with a corresponding blue family label |
| `'TBUDMincho M'` | Adjacent Mincho specimen |
| `'Shuei ShogoMincho'` | The run beginning `今日も` |
| `'Kakumin Bold'` | The following `何も` run |
| `'Kamome Ryuso'` | The following longer phrase |
| `UDTypos510` | A subsequent full phrase |
| `'Gothic MB101 Bold'`, `NOW-MU`, `Suzumushi`, `Takafuta`, `'White Alice'` | Further short and long specimen runs |

These are content-specific assignments. They should not be combined into a single fallback stack or distributed randomly. Preserve the relationship between the phrase, its displayed family label, and its font-detail destination.

Some source families encode weight in their names while the computed `font-weight` remains `400`. Applying an additional `700` would not faithfully reproduce that setup.

### Type Scale

| Role | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Base interface container | `16px` | `16px` | Measured; not the size of all descendants |
| Concept prose | `30px / 66px` | `18px / 36px` | Measured |
| Concept footnote | `14px / 27px` | `14px / 27px` | Measured |
| Interview title and copy | `14px / 27px` | `14px / 27px` | Measured |
| Interview action | `30px / 36px` | `24px / 36px` | Measured |
| Large lyric glyphs | Approximately `75px` | Approximately `40px` | Desktop visual estimate and mobile dimensional inference; nested glyph styles were not supplied |
| Font annotations | Approximately `11–12px` | Not visually verified | Desktop visual estimate |
| Credit role | Approximately `12px` | Approximately `12px` | Visual estimate |
| Credit name | Approximately `24px` | Approximately `16px` | Visual estimate |
| Credit affiliation | Approximately `10px` | Approximately `10px` | Visual estimate |
| Trademark notes | Approximately `10px` | Approximately `10px` | Visual estimate |

A frequent measured lyric-run width is `77.25px` per character on desktop and `41.25px` on mobile. These are layout advances, not confirmed font sizes. The starter uses `75px` and `40px` as explicit approximations.

## Tokens — Spacing & Shapes

### Spacing Scale

The page relies on a few strong intervals rather than uniformly small padding.

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main section side inset | `150px` | `30px` | Measured in Concept, Interview, and Lyrics |
| Outer identity inset | `30px` | `30px` | Measured opening identity placement |
| Concept top padding | `240px` | `120px` | Measured |
| Concept bottom padding | `231px` | `112px` | Measured |
| Interview top padding | `120px` | `120px` | Measured |
| Interview bottom padding | `111px` | `120px` | Measured |
| Lyrics top padding | `240px` | `120px` | Measured |
| Lyrics bottom padding | `206px` | `102px` | Measured |
| Concept heading-to-prose gap | `75px` | `32px` | Calculated from heading and paragraph rectangles |
| Interview copy inset within section | `21px` additional | `21px` additional | Calculated from paragraph x positions |
| Lyric-run bottom padding | `22px` | `16px` | Measured |
| Typical extra stanza separation | `60px` | `41px` | Calculated from selected consecutive lyric rows |

Use `30`, `60`, `120`, and `240px` as the principal spacing vocabulary. Preserve the measured exceptions when matching the captured page closely; do not force every value onto a rigid scale.

### Shapes

| Element | Treatment | Evidence |
| --- | --- | --- |
| Page sections | Full-width, square boundaries | Captures and measured section boxes |
| Lyric links | Open text runs without card containers | Desktop capture |
| Interview action | `384 × 120px`, radius `120px` | Measured desktop rectangle and radius |
| Mobile Interview action | `330 × 105px`, radius `105px` | Measured mobile rectangle and radius |
| Special Interview shortcut | Small white capsule | Desktop visual evidence; approximately `195 × 30px` |
| Media control | White triangle with a fine circular outline | Visual evidence |
| Mobile menu control | White square, approximately `42 × 42px` | Visual estimate |
| Return arrow | Fine blue vertical shaft and small triangular head | Visual evidence |

The Interview link has a transparent computed background. Border properties were not included, so a particular outline treatment cannot be claimed as measured.

### Layout Measurements

| Region | Desktop | Mobile |
| --- | --- | --- |
| Full document height | `15,821px` | `16,336px` |
| Main start | `y = 0` | `y = 102px` |
| Opening section | `1440 × 810px` | `390 × 571px`, after the header |
| Concept | `y = 810px`, height `1255px` | `y = 673px`, height `1047px` |
| Interview | `y = 2065px`, height `975px` | `y = 1720px`, height `1048px` |
| Lyrics | `y = 3040px`, height `8815px` | `y = 2768px`, height `8110px` |
| Standard inner content width | `1140px` | `330px` |
| Concept heading box | `464 × 121px` | `278 × 75px` |
| Interview heading box | `332 × 61px` | `278 × 49px` |
| Lyrics heading box | `206 × 80px` | `164 × 64px` |
| Footer height | `214px` | `243px` |

Footer heights are calculated from the document and main bounds and corroborated by the bottom captures. Heading-box dimensions should not be translated directly into CSS font sizes.

## Components

### Desktop Identity Rail

**Role:** keeps the project recognizable during the long specimen and credit sections.

The scrolled desktop captures show a narrow identity rail near the left edge: a compact blue-and-gray Morisawa mark at the top, the vertical project title below, and a narrow rotated collaboration descriptor. Its visible logo is approximately `45px` wide. The main content begins at `x = 150px`, providing substantial separation from the rail.

The initial DOM reports the rail at `x = -15px`, while the later screenshots show it inset from the edge. A transform, opacity, and visibility transition is declared. This supports a stateful rail, but does not establish its exact reveal threshold. Do not make the initial negative x position a permanent layout rule.

### Desktop Section Navigation

**Role:** direct access to the long page's main sections.

A compact row sits at the upper right, approximately `30px` from the top and right edges. Its visible labels are `Concept / Interview / Lyrics / About Morisawa Fonts / Credit`. Slash separators and italic lettering create an editorial index rather than a button bar.

The measured link row runs from approximately `x = 943px` to `1410px`. Beneath it, a white `Special Interview` capsule combines the Vaundy wordmark, blue italic text, and a small circular arrow.

The same navigation placement appears in the lyric and credit captures. Its complete appearance over the initial desktop media state is not established.

### Mobile Header and Menu Affordance

**Role:** switches the desktop's peripheral identity into a compact horizontal opening header.

The opening header occupies `102px` vertically. The brand artwork is measured at `201 × 30px`, beginning at `x = 30px`, `y = 36px`. The menu affordance is a small white square at the upper right with two fine blue horizontal strokes.

At the bottom of the page, the menu control remains visible in the same upper-right area while the horizontal brand is absent. This is evidence for a persistent menu affordance, not a fully persistent opaque header.

The DOM contains a mobile navigation list with `330px`-wide link boxes and approximately `54px` vertical pitch. The supplied captures do not show that menu open, so its backdrop, entrance, focus behavior, and dismissal mechanism remain unverified.

### Opening Media and Project Lockup

**Role:** introduces the collaboration through imagery before the written explanation.

The desktop opening section measures exactly `1440 × 810px`, a `16:9` container. A large Morisawa mark occupies an `84 × 85.69px` box at `(30, 30)`. The lower-left project lockup occupies `432 × 149px` at `(30, 631)`, ending `30px` above the section boundary. It combines collaboration branding, the small English descriptor, and the large Japanese title `置き手紙`.

**Capture limitation:** in the supplied desktop opening image, the media imagery is visible only across roughly the left `817px`; the remaining area is blue. The measured section is still full width. The evidence does not establish whether this is a mask state, reveal state, or another rendering condition. Do not infer a permanent 57% media column from this one capture.

On mobile, the composition is clearly reorganized:

1. A `102px` opening header.
2. A visually square `390 × 390px` media area.
3. A pale title strip approximately `181px` high.
4. The blue Concept section beginning at `y = 673px`.

The mobile lockup is measured at `265 × 121px`, inset `30px` from the title strip's top and left. Collaboration text is black and the Japanese title is blue. A thin blue downward arrow sits toward the right.

The white play triangle remains separate from the media imagery. The mobile circular outline is approximately `300px` in diameter. Activation behavior was not tested.

### Concept Statement

**Role:** explains the relationship between music, language, and type.

Use a full-width blue field with white content. The oversized English heading introduces a wide, generously led Mincho passage. Desktop content uses the `150px` inset; mobile uses `30px`.

The desktop paragraph spans the available `1140px` content width. On mobile, the same passage is recomposed into shorter lines within `330px`. Preserve readable sentence groupings instead of shrinking a desktop text image.

The small explanatory note below is a separate typographic tier. It does not inherit the paragraph's `0.12em` tracking.

### Interview Teaser

**Role:** leads into the separate editorial discussion.

The measured section uses the slightly darker pale background, an English heading, a blue participant/title line, a black supporting paragraph, and a large `View More` link to `/interview/`.

On desktop, the text begins at `x = 171px` and is `480px` wide. The action begins at `x = 711px`, giving a `60px` horizontal gap, and measures `384 × 120px`.

On mobile, the copy begins at `x = 51px` and is `309px` wide. The action returns to the main `30px` inset, spans `330px`, and starts `30px` below the paragraph.

There is a substantial interval between this section's heading and its copy in the measured layout. The supplied visual crops do not reveal the intervening imagery, so its subject, crop, arrangement, and effects are not specified here.

### Linked Lyric Specimen

**Role:** turns the song into a browsable collection of typefaces.

The specimen is a flowing text composition. Large black phrases share a baseline, while small blue family labels sit immediately underneath their corresponding runs. Runs may contain a single character or a longer phrase. The visible desktop lines reach broadly across the page, leaving open paper at the right where content is shorter.

Each run should preserve this anatomy:

1. The lyric glyphs, using that run's assigned family.
2. A compact Japanese/English family label beneath.
3. The verified font-detail destination attached to the run.

Observed anchors lead to individual `https://morisawafonts.com/fonts/.../` pages. This is a substantive link system, not decorative typography.

Desktop anchor boxes commonly measure `113px` or `126px` high, including `22px` bottom padding. Mobile examples measure `71px` or `82px`, including `16px` bottom padding. Different label wrapping and run contents contribute to the varying heights.

A longer line is allowed to contain several independently linked typefaces. Keep those annotations attached to their own runs when wrapping. Avoid turning the specimen into a uniform card grid.

The DOM also contains auxiliary font-information labels such as `書体名：`, `読み方：`, and `メーカー：`. No activated detail panel is shown. Its trigger, placement, and populated appearance remain unverified.

### Morisawa Fonts Introduction

**Role:** connects the creative project to the font service.

The rendered text confirms a service introduction, an outbound `Morisawa Fonts` link, a `Points` label, and three numbered explanations covering the library, device use, and installation.

These content groups are established, but their detailed visual arrangement is outside the supplied screenshot coverage and element measurements. Do not assume a three-card layout, icon set, or specific illustration treatment. For a new implementation, extend the measured editorial typography and spacing; label any chosen grid as an adaptation.

### Credit Grid

**Role:** presents a large mixed creative and production roster without visual clutter.

Each entry contains a small English role, a larger name, and an optional smaller inline affiliation. The desktop capture shows four columns beginning around `x = 150`, `390`, `630`, and `870px`, giving an estimated `240px` column pitch. Successive role rows are approximately `90px` apart.

Mobile uses two columns starting around `x = 30` and `195px`, with approximately `61px` row pitch. Names shrink, but role labels stay relatively legible. Reading order remains row by row across the grid.

There are no visible enclosing cards or divider rules. Alignment, repetition, and white space establish the hierarchy. The original roster contains both film-related and web-related roles; a generic `Designer` credit should not be relabeled as website design without further evidence.

### Legal Notes and Return Arrow

**Role:** closes the content quietly before the saturated footer.

Three small gray trademark lines sit below the credits. A fine blue upward arrow occupies the open space at the lower right. Both desktop and mobile preserve substantial breathing room around this area.

The arrow is a visible return-to-top affordance. Its scrolling behavior, duration, and destination handling were not exercised. A semantic anchor to the document start is the recommended implementation.

### Footer

**Role:** closes the page with social destinations and a strong brand field.

The footer is visually blue with white content. At desktop width, `Follow us`, three social symbols, and the copyright line are grouped on the left; a large Morisawa Fonts lockup sits at the lower right. The visible destinations are Twitter, Facebook, and the company's note site.

On mobile, the footer stacks the social group, horizontal brand lockup, and copyright at the same `30px` left inset. The measured footer height increases from `214px` to `243px`.

The captured copyright reads `© 2022 Morisawa Inc.`. This is page content, not the inspection date.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | What can be reused confidently |
| --- | --- | --- |
| Desktop identity rail | Measured `transform`, `opacity`, and `visibility` transitions: `0.625s cubic-bezier(0.77, 0, 0.175, 1)` | The declared duration and easing; trigger and travel distance remain unverified |
| Section navigation | Anchor destinations are present | Real in-page section links; smooth scrolling is not established |
| Interview links | `/interview/` appears in rendered links | A normal link to the interview destination |
| Lyric runs | Individual font URLs appear in rendered links | Phrase-level navigation to font information |
| Media play control | Visible triangle and circular outline | A recognizable play affordance; player implementation and sound behavior are unknown |
| Mobile menu | Closed control is visible; menu links exist in DOM | A mobile navigation entry point; opening behavior is unknown |
| Font-information UI | Labels and incomplete fields exist in DOM | An auxiliary information structure; no verified hover or tap behavior |
| Return arrow | Visible upward arrow | A return affordance; animation is unverified |

The desktop and mobile media captures contain different imagery. This does not establish a particular loop, playback sequence, autoplay policy, or interaction-triggered change.

Many sampled elements report `animation: none` and a generic `transition: all`. Those samples do not describe every descendant, pseudo-element, media element, or script-driven change. Do not interpret them as proof that the page is entirely static.

For an adaptation, reserve the measured `625ms` easing for the identity transition. Short underline or opacity feedback can be added to links, but should be labeled as new behavior.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Main paper | `#f6f7f8`, with faint visible texture | Lyrics, credits, and mobile title strip |
| Interview field | Measured `#eef0f2` | Separates the editorial teaser from neighboring sections |
| Blue statement field | Measured `#003cff`, white text | Concept statement and visual brand emphasis |
| Media | Dark or photographic artwork with prominent halftone detail | Opening visual identity |
| Small utility surface | White square or capsule | Menu and interview shortcut |
| Footer | Visually the campaign blue, white identity | Final brand and social destinations |

No general shadow-based elevation system is visible. Surface changes, type scale, and spacing do most of the structural work. The faint texture is visually observable, but its asset, blending method, and opacity were not provided.

## Imagery

The supplied original-page opening captures show two media treatments. Desktop presents a physical book on a warm tabletop with a dense halftone screen. Mobile presents very large cyan Japanese forms with blue depth and glow against black. Both make letters tangible, moving the project beyond conventional typesetting.

Keep the difference between media texture and interface texture. The media can carry strong dot patterns, glow, and dimensional forms; the pale reading surface uses a much quieter grain. A heavy halftone filter across all text would reduce the clarity of the specimen annotations.

### Observed Asset References

No original media or logo asset URLs were supplied. The following are visual references, not invented file paths.

| Asset class | Evidence | Implementation guidance |
| --- | --- | --- |
| Opening book imagery | Original desktop opening capture | Preserve the book, tabletop composition, and visible screen texture when using authorized imagery |
| Dimensional letter imagery | Original mobile opening capture | Preserve the dark background and luminous letter forms; exact media sequence is unknown |
| Morisawa identity | Original header, rail, and footer captures | Use the correct horizontal and compact lockups rather than approximating them with plain text |
| Project title lockup | Original desktop and mobile openings | Retain different overlay and below-media arrangements |
| Section and navigation lettering | Visible labels plus empty extracted heading/link text | Prefer supplied artwork; exact asset type was not established |
| Social symbols | Original footer captures and corresponding links | Preserve recognizable destination symbols and provide accessible names |

Do not apply `image-rendering: pixelated` globally. Visible halftone dots do not prove that the original uses nearest-neighbor scaling.

## Layout & Responsive Behavior

This is a long scrolling document. At the measured desktop width, the Lyrics section accounts for approximately 56% of the full document height; on mobile, approximately 50%. That balance is important: the specimen should remain substantial rather than being compressed into a brief promotional preview.

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Identity | Opening logo plus a narrow rail in later sections | Horizontal opening brand; persistent menu affordance |
| Navigation | Compact upper-right section index | Small menu control; expanded state not captured |
| Opening media | Full-width `16:9` section bounds, with a partial media rendering in the supplied image | Square visible media area |
| Project title | White lockup over the lower-left opening area | Blue title on a separate pale strip |
| Main insets | `150px` | `30px` |
| Concept typography | `30px / 66px` | `18px / 36px` |
| Interview details | Copy and action share a row | Copy followed by a full-width action |
| Lyrics | Several linked runs can share a broad line | Runs wrap across more rows within `330px` |
| Credits | Four columns | Two columns |
| Footer brand | Lower right | Stacked beneath the social group |

Mobile specimen layout is supported by the measured DOM rather than a dedicated mobile lyric screenshot. Some annotations increase their run's width beyond the glyphs alone. A responsive implementation must therefore account for both glyph width and caption width.

The actual source breakpoint was not supplied. The starter uses `900px` as a recommended breakpoint, with an additional narrow-screen adjustment. These values must not be presented as recovered source CSS.

Reported source custom properties were:

| Property | Desktop | Mobile |
| --- | --- | --- |
| `--vw` | `1440px` | `390px` |
| `--vh` | `1000px` | `844px` |
| `--sw` | `1` | `1.04` |
| `--sh` | `1` | `1.3291338582677166` |

Their calculation rules were not supplied. Copying these snapshot values would not produce a general responsive system.

## Do’s and Don’ts

### Do

- Keep `#003cff` as the primary structural accent, supported by pale paper, black, and white.
- Give the lyric specimen enough space to dominate the browsing experience.
- Keep each font label and destination attached to its corresponding phrase.
- Preserve the large contrast between lyric glyphs and small blue annotations.
- Use the measured Mincho prose treatment for the Concept section.
- Retain the `150px` desktop and `30px` mobile section insets at the inspected sizes.
- Recompose the mobile opening into header, square media, and title strip.
- Preserve four-column desktop credits and two-column mobile credits.
- Use authentic logo artwork when available and authorized.
- Treat the desktop partial media rendering as a documented uncertainty.

### Don’t

- Don’t turn the lyric specimen into a set of rounded feature cards.
- Don’t replace every phrase with one generic Japanese font and claim equivalent fidelity.
- Don’t mistake a link container's computed `16px` for the visible lyric size.
- Don’t infer heading font families from empty extracted heading text.
- Don’t introduce cyan interface buttons because cyan appears inside a media frame.
- Don’t add shadows, glossy panels, or decorative gradients to the reading surface.
- Don’t assume font-detail popovers, autoplay, audio, or menu transitions were tested.
- Don’t infer an intentional narrow desktop hero from the partial capture.
- Don’t invent asset paths or copy the current root URL as a populated font-detail destination.
- Don’t treat every production credit as a website-specific role.

## Recommended Implementation Additions

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

- Give the menu and play controls explicit accessible names and a minimum `44px` interactive target.
- Provide text equivalents for graphic navigation and title assets.
- Make font runs keyboard-operable links with visible focus and descriptive accessible names.
- If font details appear on hover, also support focus and touch without blocking the underlying font link.
- Keep an accessible reading sequence for the lyrics, avoiding duplicate announcements from decorative glyph fragments.
- Provide reduced-motion behavior and a static media poster where appropriate.
- Use a clear user action before audible playback.
- Check legal-copy contrast and increase very small annotations where needed.
- Load licensed font files intentionally; CSS family names alone do not supply the fonts.
- Reserve media dimensions to reduce layout shifts while assets load.

## Agent Prompt Guide

### Quick Color Reference

- Main paper: `#f6f7f8`.
- Interview surface: `#eef0f2`.
- Primary ink: `#000000`.
- Campaign field, font annotations, and directional accents: `#003cff`.
- Reversed content: `#ffffff`.
- Keep artwork colors separate from interface tokens.

### Overall Prompt

“Create an editorial music-and-type microsite inspired by the current Vaundy × Morisawa Fonts project. Use pale paper `#f6f7f8`, black typography, and saturated blue `#003cff`. Begin with prominent media and a lower-left Japanese project lockup. Follow with a spacious white-on-blue Concept statement, an editorial interview teaser, and an extensive linked lyric specimen. Set lyric phrases at a monumental scale with small blue Japanese/English typeface labels underneath. Use a narrow desktop identity rail, compact italic section navigation, a four-column credit roster, and a blue footer. On a 390px phone, switch to a horizontal opening header, square media, a separate pale title strip, 30px content insets, and two-column credits. Keep surfaces flat and make font assignments content-specific.”

### Example Component Prompts

1. **Lyric run:** “Create a linked Japanese phrase with approximately 75px desktop glyphs and an 11–12px blue typeface caption below. Keep the label inside the same link, preserve its font-detail destination, and allow neighboring runs to compose a shared line without card borders.”
2. **Concept:** “Build a full-width `#003cff` section with white editorial lettering and Japanese Mincho prose. At 1440px use 150px side insets, 240px top padding, and 30px text on 66px leading with 0.12em tracking. At 390px use 30px side insets, 120px top padding, and 18px text on 36px leading.”
3. **Mobile opening:** “Place a horizontal brand in a 102px opening header with a small white menu square at the upper right. Follow with square media, a white triangular play control, and a pale title strip with blue Japanese title lettering and a thin downward arrow.”
4. **Credits:** “Build an unboxed production roster with four desktop columns and two mobile columns. Place a small English role above a larger name and a tiny inline affiliation. Use generous row spacing and no shadows or dividers.”
5. **Footer:** “Create a saturated blue footer with a small white italic `Follow us` caption, three recognizable social symbols, a quiet copyright line, and a white-and-gray brand lockup. Align the brand lower right on desktop and stack it beneath the social links on mobile.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source code. It uses the measured colors and major spacing values, estimated lyric and credit sizes, and a recommended `900px` breakpoint. English heading typography is a serif fallback because the original heading artwork was not supplied. The pill outline and link feedback are recommended treatments.

Supply authorized brand and media assets separately. Register licensed fonts before expecting the named families to render. Menu state, playback, and any font-detail UI require separate behavior.

```css
:root {
  /* Measured palette */
  --campaign-blue: #003cff;
  --paper: #f6f7f8;
  --paper-muted: #eef0f2;
  --ink: #000;
  --white: #fff;

  /* Observed family declarations with practical fallbacks */
  --font-ui: 'Aoto Gothic Regular', system-ui, sans-serif;
  --font-mincho: 'A1 Mincho', 'Yu Mincho', serif;
  --font-action: 'Pietro Display Pro Light Italic', Georgia, serif;
  --font-editorial-fallback: Georgia, 'Times New Roman', serif;

  --outer-inset: 30px;
  --section-inset: clamp(30px, 10.4167vw, 150px);
  --section-space: 240px;
  --concept-size: 30px;
  --concept-leading: 66px;
  --copy-size: 14px;
  --copy-leading: 27px;

  /* Estimated specimen scale */
  --lyric-size: 75px;
  --annotation-size: 12px;
  --lyric-bottom: 22px;
  --stanza-gap: 60px;

  /* Measured rail transition */
  --rail-duration: 625ms;
  --rail-ease: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 16px;
}

img, video, svg { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }

.section {
  padding: var(--section-space) var(--section-inset);
  scroll-margin-top: 90px;
}

/* Fallback text headings; use original artwork for exact shapes. */
.section-heading {
  margin: 0 0 90px;
  font: 400 80px / 1 var(--font-editorial-fallback);
}

.mobile-header { display: none; }

.desktop-nav {
  position: fixed;
  z-index: 30;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  font: italic 16px / 1.2 var(--font-editorial-fallback);
}

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

.identity-rail {
  position: fixed;
  z-index: 30;
  top: 30px;
  left: 30px;
  width: 45px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-45px);
  transition:
    transform var(--rail-duration) var(--rail-ease),
    opacity var(--rail-duration) var(--rail-ease),
    visibility var(--rail-duration) var(--rail-ease);
}

/* Recommended state wiring; the original threshold is unknown. */
.is-scrolled .identity-rail {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.hero {
  position: relative;
  color: var(--white);
  background: var(--campaign-blue);
}

.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-media > img,
.hero-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-brand {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 30px;
  width: 84px;
}

.hero-caption {
  position: absolute;
  z-index: 2;
  left: 30px;
  bottom: 30px;
}

.hero-title {
  margin: 12px 0 0;
  font: 400 108px / 1 var(--font-mincho);
}

.play-control {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: min(450px, 70%);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  color: var(--white);
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.play-control::before {
  content: '';
  width: 64px;
  height: 64px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(8%);
}

.concept {
  padding-bottom: 231px;
  color: var(--white);
  background: var(--campaign-blue);
}

.concept .section-heading {
  margin-bottom: 75px;
  font-size: 120px;
}

.concept-copy {
  margin: 0;
  padding-bottom: 33px;
  font-family: var(--font-mincho);
  font-size: var(--concept-size);
  font-weight: 400;
  line-height: var(--concept-leading);
  letter-spacing: 0.12em;
}

.concept-note {
  margin: 0;
  font: 400 14px / 27px var(--font-mincho);
  letter-spacing: 0.03em;
}

.interview {
  padding-block: 120px 111px;
  background: var(--paper-muted);
}

/* Place the supplied interview visual before this details row. */
.interview-details {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 384px);
  gap: 60px;
  margin-left: 21px;
  align-items: start;
}

.interview-copy {
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  letter-spacing: 0.03em;
}

.interview-copy h3 {
  margin: 0 0 6px;
  color: var(--campaign-blue);
  font: inherit;
}

.interview-copy p { margin: 0; }

.pill-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 20px;
  border: 1px solid currentColor;
  border-radius: 120px;
  color: var(--campaign-blue);
  background: transparent;
  font: italic 400 30px / 36px var(--font-action);
  text-decoration: none;
}

.lyrics { padding-bottom: 206px; }
.lyric-stanza + .lyric-stanza { margin-top: var(--stanza-gap); }

.lyric-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.lyric-run {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
  padding-bottom: var(--lyric-bottom);
  color: var(--ink);
  text-decoration: none;
}

.lyric-glyphs {
  display: block;
  font-family: var(--run-font, var(--font-mincho));
  font-size: var(--lyric-size);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

.font-caption {
  display: block;
  color: var(--campaign-blue);
  font-family: var(--font-ui);
  font-size: var(--annotation-size);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.lyric-run--shuei { --run-font: 'Shuei ShogoMincho'; }
.lyric-run--kakumin { --run-font: 'Kakumin Bold'; }

.credits-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 44px;
  max-width: 960px;
  margin: 0;
}

.credit { min-width: 0; padding-right: 12px; }
.credit dt { font-size: 12px; line-height: 16px; }
.credit dd { margin: 0; font-size: 24px; line-height: 30px; }
.credit small { font-size: 10px; }

.legal-notes {
  margin-top: 110px;
  color: #767676;
  font-size: 11px;
  line-height: 1.8;
}

/* Legal size and contrast are recommended accessibility adjustments. */
.site-footer {
  display: grid;
  grid-template-areas: 'follow brand' 'copyright brand';
  grid-template-columns: 1fr auto;
  gap: 28px;
  min-height: 214px;
  padding: 76px 30px 30px;
  color: var(--white);
  background: var(--campaign-blue);
}

.footer-follow { grid-area: follow; }
.footer-brand { grid-area: brand; align-self: end; width: 303px; }
.footer-copyright { grid-area: copyright; margin: 0; font-size: 13px; letter-spacing: 0.1em; }
.follow-label { margin: 0 0 10px; font: italic 20px / 1.2 var(--font-editorial-fallback); }
.social-links { display: flex; align-items: center; gap: 20px; }
.social-links a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }

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

@media (hover: hover) {
  .lyric-run:hover .font-caption,
  .desktop-nav a:hover { text-decoration: underline; }
}

@media (max-width: 900px) {
  :root {
    --section-inset: 30px;
    --section-space: 120px;
    --concept-size: 18px;
    --concept-leading: 36px;
    --lyric-size: 40px;
    --lyric-bottom: 16px;
    --stanza-gap: 41px;
  }

  .desktop-nav, .identity-rail, .hero-brand { display: none; }

  .mobile-header {
    display: flex;
    align-items: center;
    height: 102px;
    padding: 30px;
  }

  .mobile-brand { display: block; width: 201px; }

  .menu-toggle {
    position: fixed;
    z-index: 40;
    top: 29px;
    right: 29px;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    color: var(--campaign-blue);
    background: var(--white);
  }

  .menu-toggle::before, .menu-toggle::after {
    content: '';
    width: 12px;
    height: 1px;
    background: currentColor;
  }

  .hero-media { aspect-ratio: 1; }
  .play-control { width: min(300px, calc(100% - 90px)); }
  .play-control::before { width: 48px; height: 48px; }

  .hero-caption {
    position: relative;
    inset: auto;
    min-height: 181px;
    padding: 30px;
    color: var(--ink);
    background: var(--paper);
  }

  .hero-title { color: var(--campaign-blue); font-size: 68px; }
  .section-heading { margin-bottom: 42px; font-size: 64px; }
  .concept { padding-bottom: 112px; }
  .concept .section-heading { margin-bottom: 32px; font-size: 80px; }
  .interview { padding-block: 120px; }
  .interview-details { grid-template-columns: 1fr; gap: 30px; margin-left: 0; }
  .interview-copy { margin-left: 21px; }
  .pill-link { min-height: 105px; border-radius: 105px; font-size: 24px; }
  .lyrics { padding-bottom: 102px; }
  .credits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .credit dd { font-size: 16px; line-height: 19px; }
  .legal-notes { margin-top: 60px; }

  .site-footer {
    grid-template-areas: 'follow' 'brand' 'copyright';
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 243px;
    padding: 44px 30px 26px;
  }

  .footer-follow { margin-bottom: 20px; }
  .footer-brand { width: 201px; }
}

@media (max-width: 360px) {
  .hero-title { font-size: 58px; }
  .lyric-glyphs { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .identity-rail { transition: none; }
}
```

The scaffold intentionally allows content-driven heights. Larger recommended social targets and more legible legal text may make the footer taller than the captured original. The complete `16:9` desktop media fill is a recommended stable implementation, not a claim about the partial raster state in the supplied opening capture.

Use the following specimen anatomy to keep glyphs, captions, and destinations connected. Add licensed font definitions separately.

```html
<section id="lyrics" class="section lyrics" aria-labelledby="lyrics-heading">
  <h2 id="lyrics-heading" class="section-heading">Lyrics</h2>
  <div class="lyric-stanza">
    <div class="lyric-line">
      <a class="lyric-run lyric-run--shuei"
         href="https://morisawafonts.com/fonts/115/">
        <span class="lyric-glyphs" lang="ja">今日も</span>
        <span class="font-caption">秀英初号明朝 / Shuei Shogo Mincho</span>
      </a>
      <a class="lyric-run lyric-run--kakumin"
         href="https://morisawafonts.com/fonts/40/">
        <span class="lyric-glyphs" lang="ja">何も</span>
        <span class="font-caption">カクミン B / Kakumin Bold</span>
      </a>
    </div>
  </div>
</section>
```

Use `concept`, `interview`, `lyrics`, `about-morisawa-fonts`, and `credit` as the matching section IDs. Render credit entries as role/name groups, such as a `dt` and `dd` inside each `.credit`. Use real buttons for menu and playback actions; CSS alone does not implement those controls.

### Tailwind v4 Token Mapping

Optional mapping for an implementation already using Tailwind v4. This does not identify the original site's framework. Define the custom properties above first.

```css
@theme inline {
  --color-campaign: var(--campaign-blue);
  --color-paper: var(--paper);
  --color-paper-muted: var(--paper-muted);
  --color-ink: var(--ink);

  --font-interface: var(--font-ui);
  --font-statement: var(--font-mincho);
  --font-editorial: var(--font-editorial-fallback);

  --text-specimen: var(--lyric-size);
  --text-annotation: var(--annotation-size);
  --text-statement: var(--concept-size);

  --spacing-page: var(--section-inset);
  --spacing-section: var(--section-space);
  --spacing-stanza: var(--stanza-gap);
  --radius-action: 120px;
}
```

## Sources & Evidence

- **Original and final page:** https://okitegami.morisawafonts.com/ — supplied HTTP status `200`, page title, rendered text, links, element rectangles, computed styles, and original-page captures.
- **Capture date:** October 1, 2026, 16:11:25.347 UTC, corresponding to October 2, 2026, 01:11:25.347 JST.
- **Desktop evidence:** `1440 × 1000` viewport; opening media, a later lyric passage, and lower credits/footer captures. Reported document height: `15,821px`.
- **Mobile evidence:** `390 × 844` viewport; opening header/media/title and lower credits/footer captures. Reported document height: `16,336px`.
- **Section destinations:** the root page exposes `#concept`, `#interview`, `#lyrics`, `#about-morisawa-fonts`, and `#credit`.
- **Original-page attribution:** the Credit section explicitly names 吉田 竜二 (SISAN) as `Front-end engineer`. Other displayed roles include broader creative and film-production responsibilities; their web-specific scope is not established.
- **Observed link evidence:** `/interview/`, individual Morisawa Fonts detail URLs, the Morisawa Fonts service, and three social destinations are present. Their destination pages were not inspected for this reference.

The supplied capture process waited for document loading, visible image decoding, and sampled layout/text stability, and traversed intermediate scroll positions. It temporarily paused perpetual animations during readiness checks and resumed them afterward. This improves capture stability but does not prove that all delayed content or interactions were exercised.

No menu activation, media playback, sound behavior, font-detail activation, keyboard flow, or return-arrow action was documented. Exact asset URLs, complete stylesheets, nested lyric-glyph measurements, and the source breakpoint were not supplied. SharedWorkers and service workers were disabled during the provided inspection. This document describes the current supplied evidence and does not reconstruct an earlier design.