# neuler pilates — Style Reference

> A sunlit studio portrait inside a narrow column, surrounded by warm grain and persistent booking controls.

**Website / original URL:** [neuler.jp](https://neuler.jp/)
**Final URL:** [https://neuler.jp/](https://neuler.jp/)
**Theme:** light, with white reading surfaces, peach surroundings, orange accents, and a textured taupe footer.
**Inspected:** September 12, 2026. Supplied observation timestamp: `2026-09-12T14:12:10.699Z`, equivalent to 23:12:10.699 JST.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current studio homepage. Visual captures cover the desktop opening, instructor profiles, and footer, plus the mobile opening and footer. Rendered text and element measurements also document the intervening sections. Linked pages, booking completion, menu expansion, and FAQ interactions were not inspected.

neuler pilates presents a private Pilates studio through bright photography, compact Japanese typography, and unusually narrow desktop content. A 540px central strip retains the intimacy of a phone layout while the surrounding desktop space carries navigation and booking. The page is a substantial studio website: facilities, instructors, academic supervision, pricing, trial preparation, questions, news, and access information all support the primary reservation route.

Its strongest visual relationship is between soft photographic light and precise interface geometry. The desktop hero has a tall semicircular crown; the footer returns to a much shallower curve. White trust pills, restrained serif accents, fine separators, and a small orange reservation band supply structure without turning the whole page into a card grid. On mobile, the photograph fills the width and booking becomes a compact banner near the bottom edge.

## How to Read This Reference

- **Measured** values come from supplied rendered element rectangles and computed styles. **Source variables** are custom properties included in that evidence.
- **Derived** values are arithmetic relationships between measured rectangles, such as an inset or repeated gap.
- **Estimated** values describe screenshot appearance where the relevant paint or geometry was not supplied. Estimated colors are not sampled or authoritative brand values.
- **Recommended** values and behaviors belong to the reusable implementation, not necessarily the original website.
- Font stacks are recorded declarations. The evidence does not establish which font rendered every individual glyph.
- The supplied screenshots show settled states. Recorded transitions support specific motion declarations, but do not establish complete animation sequences or interaction outcomes.

## Tokens — Colors

### Default Palette

| Name | Value | Source or suggested token | Evidence and role |
| --- | --- | --- | --- |
| White | `#ffffff` | Source `--color-white` | Source variable and computed background of About, Instructor, FAQ, News, and reservation cards |
| Main Text | `#323232` | Source `--color-text` | Body and desktop navigation text |
| Section Text | `#333333` | Suggested `--color-section-text` | Computed section headings and many paragraphs |
| Strong Text | `#242424` | Source `--color-text-strong` | Small action text inside the hero reservation band |
| Warm Heading | `#886556` | Suggested `--color-heading` | Computed English section labels and feature headings |
| Muted Brown | `#ac8c7e` | Suggested `--color-muted-brown` | Computed academic name detail and news metadata |
| Beige Base | `#ede4db` | Source `--color-beige-bg` | Available source background token; not a measurement of the textured desktop canvas |
| Beige Line | `#d7bfb4` | Source `--color-beige-line` | Available source line token; exact assignment to every visible divider is unverified |
| Gold | `#b27d12` | Source `--color-gold` | Source accent and gradient endpoint |
| Bronze | `#b26112` | Source `--color-bronze` | Source warm accent and orange-gradient endpoint |
| Secondary Gray | `#838383` | Suggested `--color-secondary` | Computed explanatory notes in About |
| Reversed Soft White | `#f2eeec` | Suggested `--color-on-dark-soft` | Computed Plan and Flow labels and the small Flow reservation pill |
| Reversed Detail | `#efe8e6` | Suggested `--color-on-dark-muted` | Computed pricing qualifications and validity details |

### Source Gradients

| Source property | Recorded value | Interpretation |
| --- | --- | --- |
| `--grad-cta-orange` | `linear-gradient(135deg, #f2a43f, #b26112)` | Consistent with the warm orange reservation treatment visible in the captures |
| `--grad-cta-gold` | `linear-gradient(135deg, #ebb659, #b27d12)` | Available gold treatment; exact component assignment is not established |
| `--grad-cta-gold-light` | `linear-gradient(135deg, #ffd182, #b27d12)` | Available lighter gold treatment; exact component assignment is not established |

Several badge text elements report transparent computed text color while appearing orange or gold in the screenshots. This indicates that the ordinary `color` property does not describe their final paint. Background clipping or another paint layer may be involved, but the necessary declarations were not supplied. A solid bronze text color is a dependable approximation for a new implementation.

### Screenshot-Based Surface Estimates

| Surface | Approximation | Evidence limitation |
| --- | --- | --- |
| Peach outer canvas | Around `#fae6d5` | The visible grain produces many local colors; the background layer was not measured |
| Taupe footer | Around `#8a7e73` | Visible in desktop and mobile captures; exact fill and texture composition unavailable |
| Mobile booking banner | Around `#e2c4af` | Visible peach-beige fill; no computed banner background included |
| Profile separators | A fine pale warm gray | Visually apparent; exact stroke color and width were not included |

Keep the distinction between a flat beige token and the finished canvas. A uniform `#ede4db` background alone will not reproduce the warm, finely speckled desktop surroundings.

## Tokens — Typography

### Japanese Interface and Body

**Recorded stack:** `"Gen Interface JP", "GenJP Fallback", "Hiragino Sans", sans-serif`.

This is the principal family for navigation, Japanese section headings, explanatory paragraphs, qualifications, prices, and reservation text. Body copy often uses weight `500`, rather than a very light treatment. Feature paragraphs combine a 15px size with generous line height and positive tracking; instructor biographies use a smaller size with even more vertical breathing room.

### Japanese Hero Display

**Recorded stack:** `"Noto Serif JP", "Noto Serif JP Fallback", "Hiragino Mincho ProN", serif`.

The large three-line statement uses weight `700`, tight tracking, and line height equal to its font size. Its observed text is `身体が整う / パーソナル / マシンピラティス`. The screenshot’s line breaks are central to the composition.

The smaller service-and-location line is the semantic `h1` in the inspected DOM, while the large display statement is an `h2`. This is an observed distinction between visual hierarchy and heading markup, not a recommendation to duplicate that hierarchy in every adaptation.

### English Editorial Accents

**Recorded stack:** `"Libre Baskerville", "Libre Baskerville Fallback", Georgia, serif`.

This family appears in section eyebrows such as About and Instructor, instructor names, news dates, and selected small English details. It adds a quiet editorial character without replacing the Japanese sans-serif reading system.

The visible brand wordmark has a serif appearance, but its production font and asset format are not established by the supplied element records. Use an authorized wordmark asset when reproducing the identity.

### Type Scale

Values apply to both inspected viewports unless a difference is stated.

| Role | Size / line height | Weight | Tracking | Evidence |
| --- | --- | --- | --- | --- |
| Desktop navigation | `16px / normal`; measured line box about `23.39px` | `400` | Normal | Computed |
| Hero location `h1` | `13px / 19.5px` | `500` | `-0.26px`, or `-0.02em` | Computed |
| Hero private-studio line | `15px / 21px` | `500` | Normal | Computed |
| Hero display, desktop | `40px / 40px` | `700` | `-2px`, or `-0.05em` | Computed |
| Hero display, mobile | `39px / 39px` | `700` | `-1.95px`, or `-0.05em` | Computed |
| Trust badge text | `15px / 21px` | `600` | Normal | Computed |
| Trial duration and price in hero band | `16px / 16px` | `600` | Normal | Computed |
| Hero band’s small action label | `10px / 11px` | `500` | Normal | Computed; a small visual label inside a larger linked band |
| English section eyebrow | `12px / 16.8px` | `600` | Normal | Computed |
| Standard Japanese section heading | `20px / 28px` | Usually `500`; Flow, FAQ, and News use `700` | Normal | Computed |
| Feature heading | `17px / 23.8px` | `600` | Normal | Computed |
| Feature paragraph | `15px / 25.5px` | `500` | `1.5px`, or `0.1em` | Computed |
| Instructor name | `16px / 22.4px` | `600` | Normal | Computed, English serif |
| Instructor qualification | `15px / 21px` | `500` | Normal | Computed |
| Instructor biography | `13px / 24.7px` | `500` | `0.65px`, or `0.05em` | Computed |
| About fine print | `12px / 16.8px` | `500` | `1.2px`, or `0.1em` | Computed |
| FAQ answer paragraph | `15px / 27.75px` | `400` | Normal | Computed; visibility of answer wrappers is unverified |
| News category / date | `13px / 15.6px`; `14px / 19.6px` | `500` | Normal | Computed mobile records |

The FAQ button element itself reports `Arial`, `13.3333px`, and weight `400`. Its internal text styling is not fully documented. Do not mistake this isolated browser-button measurement, or the root element’s Times declaration, for the site-wide font system.

## Tokens — Spacing & Shapes

**Observed unit system:** ordinary CSS pixels with a 16px root. The evidence does not expose a comprehensive spacing scale or the original responsive formulas.

### Spacing Relationships

| Use | Value | Evidence |
| --- | --- | --- |
| Header top padding | `14px` | Measured |
| Main content horizontal inset | Desktop `32px`; mobile `24px` | Measured |
| Eyebrow-to-section-heading gap | `8px` | Derived from rectangles |
| Feature heading-to-paragraph gap | `8px` | Derived |
| Feature text indentation beyond the normal inset | `66px` at both sizes | Derived |
| Gap between successive feature groups | `54px` after preceding text in sampled groups | Derived |
| Desktop navigation gap | `18px` between approximately `23.39px` line boxes | Derived |
| Instructor name-to-qualification gap | `24px` | Derived |
| Qualification list-to-biography gap | `12px` | Derived |
| Flow item gap | `16px` | Derived from repeated x positions |
| Common section vertical padding | `24px`, `32px`, or `40px`, depending on section | Measured |
| Trust pill padding | Approximately `6px 14px` | Estimated from visible pill boundaries and measured text |
| Mobile fixed banner outside inset | Approximately `10px` horizontally and `6px` below | Capture estimate |

### Shapes

| Element | Geometry | Evidence |
| --- | --- | --- |
| Desktop hero | A 540px-wide image with a semicircular crown; approximately 270px top corner radii | Capture geometry and measured width; exact radius declaration unavailable |
| Mobile hero | Full-width rectangular crop with no visible arch | Capture |
| Desktop and inline booking cards | `8px` radius | Computed |
| Interview link card | `8px` radius | Computed |
| Before / After section | `32px` border radius | Computed; its transparent recorded background does not establish the painted surface |
| Flow reservation pill | `128px` radius | Computed |
| Trust badges | Fully rounded white pills | Capture |
| Footer crown | Broad shallow arch rising approximately `22–24px` above its sides | Capture estimate |
| Instructor rows | Unboxed white sections separated by fine rules | Capture |

### Layout Measurements

| Element | Desktop `1440 × 1000` | Mobile `390 × 844` |
| --- | --- | --- |
| Central main column | `540px`, x = `450` | `390px`, x = `0` |
| Standard inner content width | `476px` | `342px` |
| Indented feature text width | `410px` | `276px` |
| Header home-link box | `120 × 21.69px`, x = `660`, y = `14` | Same size, x = `135`, y = `14` |
| Mobile menu button | Not present in supplied desktop records | `24 × 27px`, x = `350`, y = `14` |
| Hero section | `540 × 818px`, including `48px` top padding | `390 × 709px`, no top padding |
| Hero photograph area | Approximately `540 × 770px` after top padding | Occupies the `390 × 709px` hero |
| Hero reservation band | `540 × 74px`, y = `818` | `390 × 74px`, y = `709` |
| About section start | y = `892` | y = `783` |
| Desktop booking card | `210 × 163.97px`, x = `1060`, y = `415.02` | Replaced visually by the bottom banner |
| Inline booking card | `492 × 147.97px` | `342 × 149.67px` |
| Interview card | `476 × 134px` | `342 × 117.38px` |
| Flow item text width | `255px` | `255px` |
| Document height | `11455.56px`, reported rounded as `11456px` | `11575.70px`, reported rounded as `11576px` |

These document heights describe the captured state. They are not fixed layout targets, particularly when disclosure content, fonts, or availability information changes.

## Components

### Persistent Identity Header

**Role:** keep the studio identity available throughout the long page.

The wordmark sits at the horizontal center of the viewport, 14px from the top. It remains in that position in the supplied instructor and footer captures. The header has no visible opaque backing strip; underlying biography text and map content can pass behind it.

On mobile, a small three-line menu icon occupies the right side, with its measured button box ending 16px from the viewport edge. The menu’s expanded state, focus behavior, and animation are unverified.

For an adaptation, preserve the centered identity but enlarge the menu’s actual hit area. A subtle backing surface may be appropriate when the logo overlaps busy content; that would be an improvement, not an observed header state.

### Desktop Navigation Rail

**Role:** make the major sections and supporting routes reachable without widening the content column.

Nine links form a left-aligned vertical list. The first begins at x = `189.17`, y = `322.73`; the last ends near y = `677.25`. Together they are vertically centered around the viewport midpoint. The list’s right edge is approximately 100px before the central column’s left edge.

Use plain charcoal text with no enclosing panel. The links mix homepage anchors with separate routes: About, Instructor, Plan, and Information use anchors, while Trial, FAQ, Reservation, News, and Contact lead to dedicated URLs. Their href values are documented, but click outcomes and scrolling behavior were not tested.

The rail remains visible in all three desktop captures. It is absent from the mobile captures.

### Photographic Hero

**Role:** show the atmosphere and assisted nature of the studio’s service immediately.

The desktop image starts below a 48px top allowance and occupies the full 540px column. Its rounded crown frames bright ceiling space above a client stretching on a reformer while an instructor supports her movement. The image remains visually open at the top; the text occupies the lower portion.

The overlay has four levels:

1. A small service-and-location line in nearly opaque white.
2. A short private-studio and audience statement.
3. The three-line bold Japanese serif display statement.
4. Three white trust pills, with two on the first row and one on the second.

On desktop, the display heading begins at x = `482`, y = `546`. On mobile, it begins at x = `22`, y = `432`, slightly outside the standard 24px text inset. Its size changes only from 40px to 39px; the mobile composition is not a uniformly scaled desktop screenshot.

The mobile image starts at the top edge and loses the arch. The tighter crop allows the extended arms and equipment to continue beyond the frame. Preserve the subject’s face and the visible assistance when selecting an image focal point.

### Trust Pills

**Role:** provide compact reassurance immediately below the display statement.

The observed labels are `全員が有資格者`, `お子様連れ歓迎`, and `スポーツ健康科学修士 監修`. They use 15px semibold text inside white capsules, with orange-gold lettering and small gaps.

These are short informational claims, not independently documented buttons. Keep their text compact enough to retain the observed two-plus-one arrangement at 390px. Allow natural wrapping on narrower screens rather than shrinking the text until it becomes unreadable.

### Inline Hero Reservation Band

**Role:** connect the hero directly to the trial route.

A 74px-high orange band follows the photograph. Its entire measured anchor links to `/trial`. On the left, duration and price form a compact two-line group. On the right, a small white pill contains the action label. A white promotional tab overlaps the band’s upper edge.

The band uses `20px 32px` padding on desktop and `20px 24px` on mobile. The main price and duration text are 16px; the tax detail is 13px; the small action label is 10px. The tiny visible label is nested within a much larger clickable band.

The captured price is 5,500 yen for 50 minutes. Treat it as captured content, not a permanent token.

### Persistent and Repeated Booking Cards

**Role:** retain access to the same trial destination during a long information-heavy visit.

| Variant | Anatomy | Evidence |
| --- | --- | --- |
| Desktop rail card | White 210px panel, 8px radius, orange reservation eyebrow, bold action, duration/price, and an availability line | Rectangle and padding measured; visual content captured |
| In-content card | Wider white panel with the same booking hierarchy; 24px outer horizontal inset within the main column | Computed at both viewports |
| Mobile bottom banner | Approximately `370 × 89px`, peach-beige fill, lesson thumbnail at left, compact text in the middle, thin right arrow | Screenshot estimate; stays at the same bottom position in opening and footer captures |

The desktop card uses `32px 24px 32px 26px` padding and sits 70px beyond the main column’s right edge. Its center is close to the viewport’s vertical center. The in-content card uses `24px 24px 24px 26px` padding.

The mobile thumbnail occupies roughly the first 95px, with a soft visual transition into the text area. The banner overlays part of the hero band in the opening capture and remains over the footer in the final capture.

Availability text appears partly clipped and at different horizontal offsets across captures, consistent with a ticker. Its timing, data source, update frequency, and freshness were not supplied. Do not invent a live schedule or hardcode a captured date as ongoing availability.

### Section Heading and Feature Group

**Role:** maintain a repeatable reading rhythm within the narrow column.

The standard heading pairs a small brown English serif eyebrow with a larger Japanese sans-serif heading, separated by 8px. Both align to the 32px desktop or 24px mobile content inset.

The About section then introduces a substantial image area and a series of feature explanations. Sampled feature text is indented another 66px on both viewport sizes. This leaves a distinct leading gutter; the evidence does not identify every decorative element within it.

Feature headings use warm brown at `17px / 23.8px`. Paragraphs use `15px / 25.5px` and `0.1em` tracking. Successive sampled groups have a generous 54px separation after the preceding text. Retain this asymmetry and rhythm rather than replacing the list with equally sized feature cards.

### Before / After and Customer Interview

**Role:** group outcome-oriented content and a customer story before the instructor profiles.

The Before / After wrapper has a measured 32px radius and the normal horizontal section inset. It contains a bilingual heading, a one-trial qualifier, a substantial comparison area, explanatory points, and an individual-results note. The actual comparison image was not included in the visible captures, so its subjects, crop, and internal layout cannot be specified here.

The interview link is a white horizontal flex card with an 8px radius. Desktop padding is `14px 18px 14px 14px` with a 16px gap; mobile padding is `12px 14px 12px 12px` with a 12px gap. It links to `/interview/mai` and contains a story headline and customer name.

The card declares 250ms background-color and border-color transitions. Hover colors and the destination page were not observed.

### Instructor Profile

**Role:** build trust through people, qualifications, and readable biographies.

The visible profile arrangement is deliberately unboxed. A bright rectangular portrait occupies the right portion of the upper area, while the instructor’s English serif name sits low on the left. In the desktop capture, the portrait is approximately 333px wide within the 476px inner column, or about 70%. Its left edge visually fades into white; whether that treatment belongs to the image or a CSS layer is unverified.

Below the image/name area, qualifications form a compact list with muted brown bullets. A biography follows after 12px. Names use 16px English serif, qualifications use 15px sans-serif, and biographies use `13px / 24.7px` with `0.05em` tracking. Fine horizontal rules separate the profiles.

The rendered page includes Kaede, maria, megumi, and Marisa. Preserve content-dependent biography heights. The profiles remain stacked on desktop.

### Academic Supervision Block

**Role:** explain the studio’s stated academic supervision separately from instructor biographies.

The current page names Kentaro Nakashima in this service-content role. The top identity text is positioned toward the right, while the explanatory body uses an additional 24px inset: its measured width is 428px on desktop and 294px on mobile. Warm brown labels distinguish the field of expertise from qualifications.

This is evidence about the studio’s service presentation. It does not establish website production authorship.

### Pricing Section

**Role:** present trial, enrollment, single-session, and package prices within the same reading column.

The section uses reversed white headings and labels. The English eyebrow is `#f2eeec`, and pricing qualifications use `#efe8e6`. The background’s exact paint was not included in the supplied computed records or visible screenshots; a specific dark fill should therefore remain an implementation choice.

Labels sit to the left of price information. Sampled label widths reduce from 200px on desktop to 133px on mobile. Supporting information includes tax inclusion, a trial-day enrollment condition, per-session equivalents, and package validity periods.

Keep this as a structured price list with clearly associated details. The price numerals’ specific font measurements were not included, so do not invent a display-number treatment.

### Trial Flow Strip

**Role:** explain four stages: reservation, arrival/changing, consultation, and the trial lesson.

The DOM establishes a horizontal arrangement. Item text blocks are 255px wide on both viewports, and successive x positions advance by 271px, giving a 16px gap. A small English `scroll` cue appears beside the section heading. Number labels run from 01 to 04, with substantial space above each item’s heading for its upper content.

This supports an intended horizontally navigable strip. It does not prove drag handling, snap behavior, autoplay, or keyboard controls. Offscreen child rectangles are not themselves proof that the entire document has horizontal overflow.

The first item contains a small rounded reservation link. A separate trailing link leads to `/trial` for lesson contents and preparation details.

### FAQ Rows

**Role:** answer common concerns without immediately sending the visitor elsewhere.

Six question headings contain actual button elements. Most measured buttons are 48px high with 12px padding; the first mobile question wraps and becomes 66px high. Answer paragraphs use 15px type and `1.85` line height with `4px 12px 14px` padding.

Answers appear in the extracted DOM, but their rectangles overlap the following question positions. Their presence is not evidence that all answers are visually expanded. The surrounding clipping or disclosure state was not supplied, and no question was exercised.

A new implementation can use accessible disclosures, while retaining the original’s white surfaces, full-row controls, and compact spacing.

### News and Contact

**Role:** show current studio activity and provide a general inquiry route.

News follows the same English-eyebrow/Japanese-heading pattern, with a small list link beside the heading. Three articles are present in the rendered text. Mobile measurements show muted brown serif metadata above a 15px semibold Japanese title. In the first row, the title begins 94px after the link’s left edge, leaving a leading area whose media asset was not supplied.

The Contact section links to `/contact`. Its existence and label are documented, but its detailed visual anatomy is not visible in the supplied captures. Preserve the route and section hierarchy without inventing a form embedded on this homepage.

### Store Information and Map

**Role:** make the physical studio easy to locate.

The captured information includes an address, station walking times, operating hours, and an embedded map. Warm brown labels distinguish fields such as address and opening hours. Small train symbols precede transport lines.

The desktop map aligns to the 476px inner column; the mobile map aligns to the 342px inner column. The desktop capture shows a largely gray map area with only a narrow strip of tiles, while the mobile capture shows a rendered map and marker. This is a capture-dependent loading limitation, not a deliberate gray-map design.

The visible map provider’s controls belong to the embedded map. Their behavior was not tested.

### Curved Footer

**Role:** close the page with a softer, darker surface and a comprehensive route directory.

A shallow curved crown introduces a warm taupe field with fine grain. In both captures, the crown begins approximately 68px below the map’s lower edge. The curve rises only around 22–24px; it is much flatter than the hero arch.

The footer contains a white wordmark, wrapping primary links, a compact white `公式LINE` button with a green brand icon, a fine divider, legal/member/company links, and a copyright line. Desktop content retains the 32px inset; mobile uses 24px. Link groups wrap naturally across the narrow width.

Use the curve and texture to distinguish the footer. It does not need a dense set of separately boxed navigation cards.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | Limit |
| --- | --- | --- |
| Hero location and audience copy | `transition: opacity 1.6s 0.3s` | Duration and delay recorded; trigger and full playback sequence unverified |
| Hero display heading | `transition: opacity 1.6s 0.55s` | Its transition starts 250ms later than the preceding copy if triggered together |
| Interview card | `background-color 0.25s, border-color 0.25s` | Destination colors and pointer state not observed |
| Header, desktop navigation, booking controls | Remain at consistent viewport positions across scroll captures | Persistent placement is observed; exact positioning declarations were not supplied |
| Availability line | Clipped text at differing horizontal offsets | Consistent with a ticker, but duration, easing, and update behavior unknown |
| Flow strip | Horizontal item geometry and a `scroll` cue | Navigation method and snapping unverified |
| FAQ and mobile menu | Button elements present | Open states and transitions unverified |
| Other sampled elements | Often `animation: none` and `transition: all` | These records do not establish a general animation system or meaningful transition duration |

The supplied custom properties also include `--soft: 22%` and `--reveal: 0.001%`. Their consumers were not supplied. Do not convert those names into claims about a particular reveal mask or scroll animation.

The supported motion character is restrained: staggered opacity and a brief color transition. Additional parallax, image zoom, animated counters, or automatic carousels would be new design decisions.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Desktop surroundings | Pale peach with fine grain | Holds the side navigation and booking card around the narrow page |
| Main reading areas | Flat white | Keeps long Japanese text, qualifications, and news readable |
| Hero | Bright studio photography with white overlay text | Communicates the people, equipment, and atmosphere |
| Trust labels | White capsules with warm lettering | Small reassurance markers within the photograph |
| Hero reservation band | Orange-gold appearance with visible texture | Marks the immediate booking route |
| Booking and interview cards | White, 8px corners | Separates a limited number of actionable components |
| Plan and Flow | Reversed light text | Distinguishes practical enrollment content; exact background unverified |
| Footer | Textured taupe with a shallow curved top | Creates a calm closing surface |
| Mobile fixed booking control | Peach-beige banner with photo and arrow | Keeps the trial route close during scrolling |

There is no evidence of a broad elevation scale. The booking controls show subtle visual separation, but exact shadows were not recorded. Most hierarchy comes from white space, changes in surface color, photographic boundaries, and fine rules.

## Imagery

The visible photography is bright, warm, and spatially believable. White walls, window light, pale timber, neutral exercise clothing, and actual Pilates equipment establish the studio atmosphere. The hero shows assisted movement rather than an isolated model posing at the camera. Instructor portraits maintain similar exposure and color temperature.

Preserve these relationships when commissioning or selecting replacement imagery:

- Keep the client’s face, upper-body movement, and the instructor’s supporting gesture legible in both crops.
- Leave calm upper image space for the desktop arch and centered wordmark.
- Favor warm whites and natural skin tones over a heavy sepia filter.
- Keep the grain primarily in decorative surfaces; do not obscure faces or instructional detail with added noise.
- Use responsive crops rather than stretching the photograph.
- Keep portraits rectangular and bright, with generous white space around names and biographies.

### Observed Asset References

| Asset or resource | Evidence | Reuse guidance |
| --- | --- | --- |
| Assisted reformer hero photograph | Visible in desktop and mobile opening captures | Use a full-height cover crop with a verified focal point |
| Instructor portraits | Visible in the desktop profile capture | Preserve bright exposure and the right-weighted composition |
| Booking thumbnail | Visible in both mobile captures | Use a compact crop that remains understandable at roughly 95px wide |
| Header and footer wordmarks | Visible in light and dark contexts | Use the supplied identity artwork; exact asset URLs were not provided |
| Peach and taupe grain | Visible in the outer canvas and footer | Reproduce with an authorized texture layer; exact resource and blend mode unknown |
| Font stylesheet reference | `/fonts/gen-interface-jp/fonts.css` appears in the supplied DOM | Reference observed only; stylesheet contents were not separately opened |

Image filenames and original image URLs were not included in the evidence. No asset path should be invented as though it came from the site. The comparison imagery and most intermediate section media are not visually specified by these captures.

## Layout & Responsive Behavior

The page keeps a single narrow content column on desktop. At 1440px, the 540px main column leaves 450px on each side. The navigation and reservation panel occupy these surroundings without changing the width of the reading content.

At 390px, the main column fills the viewport. Side navigation disappears, a menu control appears at the upper right, and the booking route moves into a bottom banner. The header wordmark remains 120px wide. Standard horizontal padding decreases from 32px to 24px, producing inner widths of 476px and 342px respectively.

Typography changes very little. The hero display decreases by only 1px; section headings, body copy, and instructor text retain their measured sizes. Consequently, mobile adaptation relies on wrapping, crop changes, and vertical content growth. For example, About grows from approximately 2644px to 2808px high, while the media-heavy Before / After group becomes shorter. Do not derive all mobile section heights from a single scale factor.

The 66px feature-text indentation survives on mobile, leaving a 276px text width. The Flow strip also retains 255px items and a 16px gap. These are important exceptions to the otherwise full-width mobile column.

The exact breakpoint and hero height formula were not supplied. `width: min(100%, 540px)` reproduces the two observed main widths, but is an adaptation rather than a recovered source rule. The Quick Start uses a recommended 1200px rail breakpoint and a mobile hero height that reproduces the supplied 390 × 844 capture.

Only one desktop and one mobile viewport were inspected. Tablet layouts, short landscape screens, zoom, enlarged text, and intermediate breakpoint behavior remain unverified.

## Do’s and Don’ts

### Do

- Preserve the 540px desktop reading column and generous surrounding space.
- Treat the desktop side navigation and booking panel as part of the overall composition.
- Use the tall hero arch on desktop and the rectangular full-width crop on mobile.
- Keep the hero’s Japanese serif statement compact, bold, and tightly tracked.
- Pair small English serif eyebrows with readable Japanese sans-serif headings.
- Maintain the 32px desktop and 24px mobile content insets.
- Keep biographies unboxed, with qualifications, fine rules, and generous line height.
- Use white capsules and restrained orange accents to distinguish reassurance and booking.
- Preserve the footer’s shallow crown and muted texture.
- Separate documented source values from screenshot estimates and new implementation choices.

### Don’t

- Don’t widen the desktop hero into a conventional edge-to-edge banner.
- Don’t turn the instructor list or studio features into a desktop card grid.
- Don’t keep the desktop arch on mobile when matching the supplied current layout.
- Don’t replace all three typography roles with one generic family.
- Don’t use source transparent text colors as an instruction to hide badge lettering.
- Don’t assume every available gold gradient is visibly applied to a specific component.
- Don’t reproduce the partly loaded desktop map as a permanent gray panel.
- Don’t infer expanded FAQs from answer text found in the DOM.
- Don’t invent menu transitions, carousel autoplay, or booking availability updates.
- Don’t treat a captured price or date as a timeless design token.

## Recommended Implementation Additions

These recommendations extend the observed design; they are not verified original features.

- Increase the mobile menu’s hit area to at least 44px while retaining its compact visible icon.
- Add visible keyboard focus styles to navigation, booking links, interview cards, and footer links.
- Implement menu and FAQ states with accessible names, expanded-state information, and dependable keyboard operation.
- Reserve enough final-page space for the fixed booking banner and device safe area. Keep focused controls from disappearing behind it.
- Make availability understandable without ticker motion. Show a static fallback when current scheduling data is unavailable.
- Preserve sufficient contrast behind white hero copy across responsive crops; apply a localized image tint if necessary.
- Keep important price conditions readable instead of preserving 10–11px text at all costs.
- Provide a text address and direct map link even while map tiles are loading.
- Support reduced motion, and keep hero text visible when animation initialization fails.
- Give the Flow strip keyboard access and a visible way to move through its four steps without depending exclusively on touch gestures.

## Agent Prompt Guide

### Quick Color Reference

- Reading surfaces: exact white `#ffffff`.
- Main text: source `#323232`; section text commonly computes to `#333333`.
- Editorial brown: measured `#886556`.
- Secondary brown: measured `#ac8c7e`.
- Orange gradient: source `135deg`, `#f2a43f` to `#b26112`.
- Beige source token: `#ede4db`; do not equate it with the finished textured canvas.
- Canvas approximation: `#fae6d5` plus fine grain.
- Footer approximation: `#8a7e73` plus fine grain.
- Mobile booking approximation: `#e2c4af`.

### Overall Prompt

“Create a Japanese private Pilates studio homepage inspired by the current neuler pilates composition. Center a 540px reading column on desktop within a pale peach, finely textured canvas. Place a plain vertical navigation rail at left and a compact white booking card at right. Use a bright photograph of assisted reformer movement inside a tall semicircular hero, a small centered wordmark, a three-line white Japanese serif statement, and white trust capsules with warm orange lettering. Continue into white sections with small Libre Baskerville English eyebrows, Gen Interface JP Japanese text, unboxed instructor profiles, a price list, trial flow, FAQs, news, and access information. Finish with a shallow curved taupe footer. At phone width, remove the hero arch and side rails, keep 24px content insets, show a menu control, and place booking in a compact bottom banner with a photo and arrow. Treat estimated colors and unverified interactions as implementation choices.”

### Example Component Prompts

1. **Hero:** “Build a 540px desktop photo column with a 270px-radius crown and 48px top allowance. Position a compact white location line above a 40px bold Noto Serif JP statement with 1.0 line height and −0.05em tracking. Add three white trust capsules below. At 390px, use a rectangular photo crop and 39px display type. Keep the face and assisting gesture visible.”
2. **Instructor profile:** “Create an unboxed white profile with a bright portrait toward the right, a 16px Libre Baskerville name at the lower left of the portrait area, 15px qualification bullets, and a 13px biography with 24.7px line height. Separate profiles with fine warm-gray rules.”
3. **Booking controls:** “Create a 210px white desktop booking panel with 8px corners, a small bronze reservation label, a bold action, price/duration, and a static availability line. On mobile, use a peach-beige banner inset 10px from the sides, with a small lesson photograph and a thin right arrow. Keep real availability separate from decorative motion.”
4. **Feature group:** “Use a 12px English serif eyebrow above a 20px Japanese sans-serif section title. Indent feature text 66px beyond the normal content inset. Set feature headings in warm brown at 17px and paragraphs at 15px with 1.7 line height and 0.1em tracking. Preserve generous vertical gaps.”
5. **Footer:** “Build a narrow taupe footer with fine grain and a shallow curved crown rising about 24px. Place a white wordmark above wrapping text navigation, a small white LINE button, a fine divider, and secondary links. Use 32px desktop and 24px mobile horizontal padding.”

## Quick Start

### CSS Custom Properties

This is a reusable approximation, not a copy of the original stylesheet. Exact source colors and measured type values are retained where available. Estimated surfaces are named explicitly. The 1200px breakpoint, safe-area handling, focus styles, disclosure markup, and footer curve implementation are recommendations.

Use an authorized hero image and wordmark in the corresponding image elements. Load the recorded font families separately; declaring their names does not load font files. Set `--grain-image` to a project texture if available. Its default produces a flat fallback.

```css
:root {
  /* Recorded source colors */
  --color-white: #fff;
  --color-text: #323232;
  --color-text-strong: #242424;
  --color-beige-bg: #ede4db;
  --color-beige-line: #d7bfb4;
  --color-gold: #b27d12;
  --color-bronze: #b26112;
  --grad-cta-orange: linear-gradient(135deg, #f2a43f, #b26112);
  --grad-cta-gold: linear-gradient(135deg, #ebb659, #b27d12);
  --grad-cta-gold-light: linear-gradient(135deg, #ffd182, #b27d12);

  /* Measured colors exposed as reusable aliases */
  --color-heading: #886556;
  --color-muted-brown: #ac8c7e;
  --color-section-text: #333;
  --color-secondary: #838383;
  --color-on-dark-soft: #f2eeec;

  /* Screenshot estimates, not measured source fills */
  --canvas-estimate: #fae6d5;
  --footer-estimate: #8a7e73;
  --booking-mobile-estimate: #e2c4af;
  --grain-image: none;

  /* Recorded family stacks */
  --font-sans: 'Gen Interface JP', 'GenJP Fallback',
    'Hiragino Sans', sans-serif;
  --font-serif: 'Noto Serif JP', 'Noto Serif JP Fallback',
    'Hiragino Mincho ProN', serif;
  --font-en-serif: 'Libre Baskerville',
    'Libre Baskerville Fallback', Georgia, serif;

  /* Measured proportions and implementation aliases */
  --column-width: 540px;
  --content-inset: 24px;
  --feature-indent: 66px;
  --text-hero: 39px;
  --text-section: 20px;
  --text-feature: 17px;
  --text-body: 15px;
  --text-bio: 13px;
  --text-eyebrow: 12px;
  --radius-card: 8px;
  --radius-section: 32px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  scroll-padding-block: 56px calc(110px + var(--safe-bottom));
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--canvas-estimate);
  background-image: var(--grain-image);
  font-family: var(--font-sans);
  font-size: 16px;
}

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

.site-main,
.site-footer {
  width: min(100%, var(--column-width));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  pointer-events: none;
}

.site-header a,
.site-header button { pointer-events: auto; }

.site-logo { display: block; width: 120px; }
.site-logo img { width: 100%; height: auto; }

/* Recommended hit area around the small visible icon */
.menu-toggle {
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-section-text);
}

.side-nav,
.booking-card--desktop { display: none; }

.hero-stage {
  position: relative;
  min-height: 709px;
  height: 84svh;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-copy {
  position: absolute;
  inset-inline: var(--content-inset);
  bottom: 72px;
  color: #fff;
}

.hero-location {
  margin: 0;
  color: rgb(255 255 255 / 92%);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  transition: opacity 1.6s 0.3s;
}

.hero-context {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 1.6s 0.3s;
}

.hero-title {
  margin: 24px 0 16px -2px;
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  transition: opacity 1.6s 0.55s;
}

.hero-title span { display: block; }

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-bronze);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.trial-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
  padding: 20px var(--content-inset);
  color: #fff;
  background: var(--grad-cta-orange);
  text-decoration: none;
}

.trial-band__price {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.trial-band__note {
  position: absolute;
  top: -16px;
  left: var(--content-inset);
  max-width: calc(100% - 48px);
  padding: 4px 10px;
  border-radius: 3px;
  background: #fff;
  color: var(--color-bronze);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.trial-band__action {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-strong);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
}

.content-section {
  padding: 32px var(--content-inset);
  background: #fff;
}

.section-eyebrow {
  margin: 0 0 8px;
  color: var(--color-heading);
  font-family: var(--font-en-serif);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: 1.4;
}

.section-title {
  margin: 0;
  color: var(--color-section-text);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.4;
}

.feature {
  margin-left: var(--feature-indent);
  margin-top: 54px;
}

.feature h3 {
  margin: 0 0 8px;
  color: var(--color-heading);
  font-size: var(--text-feature);
  font-weight: 600;
  line-height: 1.4;
}

.feature p {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.instructor-profile {
  padding-block: 24px 32px;
  border-bottom: 1px solid var(--color-beige-line);
}

/* Portrait geometry is a screenshot-based approximation */
.instructor-profile__top {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: end;
}

.instructor-profile__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.instructor-profile__name {
  margin: 0;
  font-family: var(--font-en-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.instructor-profile__qualifications {
  margin: 24px 0 12px;
  padding-left: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.instructor-profile__qualifications li::marker {
  color: var(--color-muted-brown);
}

.instructor-profile__bio {
  margin: 0;
  font-size: var(--text-bio);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.interview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--color-beige-line);
  border-radius: var(--radius-card);
  background: #fff;
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s;
}

/* Recommended overflow implementation; source snapping is unknown */
.flow-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-block: 24px 12px;
}

.flow-step { flex: 0 0 255px; }

/* Use these rules with native details/summary disclosures */
.faq-item + .faq-item { margin-top: 6px; }

.faq-item summary {
  min-height: 48px;
  padding: 12px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
}

.faq-answer {
  margin: 0;
  padding: 4px 12px 14px;
  font-size: 15px;
  line-height: 1.85;
}

.booking-card {
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
}

.booking-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bronze);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.booking-title {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.booking-detail,
.booking-availability {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.booking-availability {
  margin-top: 10px;
  color: var(--color-secondary);
}

.booking-card--inline {
  display: block;
  min-height: 148px;
  margin: 56px 24px 54px;
  padding: 24px 24px 24px 26px;
}

.booking-card--mobile {
  position: fixed;
  z-index: 40;
  bottom: max(6px, var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  width: min(calc(100% - 20px), 520px);
  min-height: 89px;
  overflow: hidden;
  background: var(--booking-mobile-estimate);
  box-shadow: 0 6px 20px rgb(70 45 25 / 12%);
}

.booking-card--mobile .booking-photo {
  align-self: stretch;
  width: 95px;
  flex: 0 0 95px;
  object-fit: cover;
}

.booking-card--mobile .booking-copy {
  flex: 1;
  min-width: 0;
  padding-block: 10px;
}

.booking-card--mobile .booking-title { margin-top: 2px; }

.booking-card--mobile .booking-arrow {
  flex: 0 0 auto;
  padding-inline: 12px 24px;
  font-size: 24px;
}

.site-footer {
  position: relative;
  margin-top: 92px;
  padding: 40px var(--content-inset)
    calc(112px + var(--safe-bottom));
  color: var(--color-on-dark-soft);
  background-color: var(--footer-estimate);
  background-image: var(--grain-image);
}

/* Recommended approximation of the shallow captured crown */
.site-footer::before {
  content: '';
  position: absolute;
  inset: -24px 0 auto;
  height: 24px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
  margin-block: 48px 28px;
  font-size: 13px;
  line-height: 1.4;
}

.footer-links a { text-decoration: none; }

.footer-secondary {
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 25%);
}

/* Recommended breakpoint, not a recovered source media query */
@media (min-width: 1200px) {
  :root {
    --content-inset: 32px;
    --text-hero: 40px;
  }

  .menu-toggle,
  .booking-card--mobile { display: none; }

  .side-nav {
    position: fixed;
    z-index: 20;
    top: 50%;
    right: calc(50% + 370px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: 16px;
    line-height: 1.462;
  }

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

  .booking-card--desktop {
    position: fixed;
    z-index: 20;
    top: 50%;
    left: calc(50% + 340px);
    transform: translateY(-50%);
    display: block;
    width: 210px;
    min-height: 164px;
    padding: 32px 24px 32px 26px;
    box-shadow: 0 6px 20px rgb(70 45 25 / 8%);
  }

  .hero { padding-top: 48px; }

  .hero-stage {
    height: 770px;
    min-height: 770px;
    border-radius: 270px 270px 0 0;
  }

  .hero-copy { bottom: 64px; }
  .hero-title { margin-top: 8px; margin-left: 0; }

  .interview-card {
    gap: 16px;
    padding: 14px 18px 14px 14px;
  }

  .site-footer { padding-bottom: 48px; }
}

/* Recommended accessibility additions */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.flow-track:focus-visible {
  outline: 3px solid var(--color-bronze);
  outline-offset: 4px;
}

.site-footer a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero-location,
  .hero-context,
  .hero-title,
  .interview-card {
    transition: none;
  }
}
```

The hero text remains visible by default. A separate enhancement may trigger the recorded opacity transitions after initialization. The CSS does not implement the uninspected mobile menu or scheduling feed. For the suggested native FAQ implementation, use `details` with a `summary` and an answer element; menu state requires its own implementation.

### Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This does not identify the original site’s styling framework. Define the custom properties above first.

```css
@theme inline {
  --color-studio-ink: var(--color-text);
  --color-studio-heading: var(--color-heading);
  --color-studio-bronze: var(--color-bronze);
  --color-studio-beige: var(--color-beige-bg);
  --color-studio-line: var(--color-beige-line);
  --color-studio-canvas: var(--canvas-estimate);
  --color-studio-footer: var(--footer-estimate);

  --font-studio-sans: var(--font-sans);
  --font-studio-display: var(--font-serif);
  --font-studio-editorial: var(--font-en-serif);

  --text-studio-hero: var(--text-hero);
  --text-studio-section: 20px;
  --text-studio-body: 15px;
  --text-studio-bio: 13px;
  --text-studio-eyebrow: 12px;

  --spacing-studio-column: 540px;
  --spacing-studio-inset: var(--content-inset);
  --spacing-studio-feature-indent: 66px;
  --radius-studio-card: 8px;
  --radius-studio-section: 32px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [https://neuler.jp/](https://neuler.jp/). The supplied record reports HTTP `200` with no URL change.
- **Capture date:** September 12, 2026, recorded at `2026-09-12T14:12:10.699Z` / 23:12:10.699 JST.
- **Desktop evidence:** `1440 × 1000` CSS-pixel viewport; opening, instructor, and footer captures; rendered text, link destinations, custom properties, and sampled element rectangles/computed styles.
- **Mobile evidence:** `390 × 844` CSS-pixel viewport; opening and footer captures; rendered text, link destinations, custom properties, and sampled element rectangles/computed styles.
- **Navigation evidence:** homepage anchors and linked routes such as `/trial`, `/faq`, `/reservation`, `/post`, `/contact`, and `/access` were present in the inspected homepage. These destination pages were not separately inspected.
- **Readiness limits:** the supplied procedure observed the initial page for at least five seconds and waited for document load, relevant finite motion, sampled layout/text stability, and image decoding within bounded timeouts. Perpetual animations were paused during readiness checks and resumed afterward. These checks do not establish complete delayed content or exercised interaction behavior.
- **Specific limitations:** desktop map tiles were partly unavailable in the capture; expanded menu and FAQ states were not tested; intermediate section imagery, full paint layers, exact breakpoints, ticker timing, and booking behavior were not supplied. SharedWorkers and service workers were disabled during inspection.

This reference uses the supplied current homepage evidence. No additional pages or resources were opened. Source values, arithmetic derivations, screenshot estimates, and recommended implementation choices are distinguished throughout.