# THE QOLY — Style Reference

> A broad white canvas frames a dark training studio, with fine rules and compact editorial details.

**Website:** [theqoly.com](https://theqoly.com/)
**Original URL:** https://theqoly.com/
**Final URL:** https://theqoly.com/
**Response:** HTTP 200; no redirect recorded.
**Theme:** white interface with charcoal typography, cool dark photography, muted blue-gray category labels, and a restrained red membership accent.
**Inspected:** October 2, 2026, at 04:45 JST / October 1, 2026, at 19:45:05 UTC, according to the supplied capture record.
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px.
**Scope:** the current homepage, including its header, hero, news strip, About section, nine-item media collection, three destination panels, desktop promotional overlay, trial-training banner, and footer. Five original-page screenshots and two rendered DOM/computed-style snapshots were supplied. Linked pages and account flows were not inspected.

THE QOLY is presented as a women-only fitness studio combining HIIT and boxing. This is a multi-page business homepage with an active editorial section, studio information, and separate membership and reservation destinations. Its navigation and substantial footer are integral to the design.

The most distinctive relationship is between very generous white space and tightly cropped, dark fitness photography. On desktop, a small service statement occupies the otherwise open left half of the hero, while a tall photograph fills the right. The interface avoids oversized display copy: fine text, understated capsule controls, square image boundaries, and thin rules give the photography room to dominate.

Further down, the page becomes denser. Portrait article cards combine category stamps, white underlined titles, dates, and circular arrows directly over images. Mobile preserves the generous rhythm but changes the composition: a divided utility header, a wide hero image above its caption, a single column of media cards, and a long footer directory.

## How to Read This Reference

- **Measured** values come from the supplied rendered element rectangles or computed styles. They are CSS pixels unless otherwise stated.
- **Estimated** values come from visual inspection of the original-page screenshots. Image boundaries, unreported border colors, and nested text styles are not equivalent to measured CSS declarations.
- **Derived** values are calculations from the supplied measurements, such as composited colors or distances between elements.
- **Recommended** values belong to the reusable implementation. Breakpoints, accessibility additions, and CSS recipes are not claims about the original source.
- Token names below are descriptive aliases. The provided custom properties do not expose a complete site design system.
- A computed font-family identifies the requested stack; it does not prove which font rendered every glyph. This particularly matters for Japanese text assigned a Latin display family.
- DOM text includes offscreen navigation and repeated news entries. Their presence does not mean they were simultaneously visible or that an interaction was exercised.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White | `#FFFFFF` | `--color-page` | Measured header and news-link background; visually the main canvas and footer surface. The body itself reports a transparent background. |
| Charcoal | `#353538` | `--color-ink` | Measured body, navigation, headings, and ordinary link color. Use as the primary interface ink. |
| Media wash | `rgba(53, 53, 56, 0.05)` | `--color-media-wash` | Measured media-section background. |
| Composited media surface | approximately `#F5F5F5` | `--color-media` | Derived by compositing the media wash over white. Useful for a direct-color implementation. |
| Membership red | `#C81528` | `--color-membership` | Measured membership-link text. The screenshot also shows a red outline, but its exact border color was not supplied. |
| Category blue-gray | approximately `#9BA9C3` | `--color-category` | Screenshot estimate for rectangular labels such as `店舗情報`, `ブログ`, and `ニュース`. |
| Quiet gray | approximately `#999999` | `--color-muted` | Screenshot estimate for dates in the white news strip and other subdued details. |
| White over imagery | `#FFFFFF` | `--color-on-photo` | Measured trial-banner link color and visibly used for article overlays. |
| Photographic blue-green | approximately `#17363D` | Reference only | Descriptive approximation of dark studio imagery, not an observed solid UI token. |

The accent hierarchy is narrow. Red marks the membership path; blue-gray organizes articles; most other controls remain charcoal and white. Strong yellow, turquoise, pink, and green occur inside article imagery, not as a general interface palette.

The visible rules are approximately 1px and usually dark charcoal or pale gray. Their exact computed colors were not included. Reusing the ink color for dark borders is a recommendation.

### Theme Presets

No theme selector or alternate interface palette is evidenced. Dark photographs and the trial banner are local image treatments within the white page.

The provided source properties include `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px`. These library defaults do not establish a visible blue accent or 44px arrow controls. Neither belongs in the reconstructed visual palette without further evidence.

## Tokens — Typography

### Japanese Interface and Body

- **Measured family:** `"Noto Sans JP", sans-serif` on the body, navigation, and inspected link wrappers.
- **Measured base:** `16px`, weight `400`, line-height `18.4px`.
- **Character:** clean, compact Japanese sans-serif text with generous surrounding space.
- **Important limitation:** the body line-height is not proof that every paragraph or nested card title uses the same line-height. Those descendants were not all measured.

### English Section Labels and Hero Heading

- **Measured family:** `proxima-nova, sans-serif` on the H1 and section H2 elements.
- **Weights:** `900` for the H1; `800` for English section labels.
- **Section labels:** uppercase, modest in size, with tracking rather than dramatic scale.
- **Japanese H1:** the requested family is recorded, but the actual Japanese glyph fallback is unknown. Do not claim that Proxima Nova supplies those glyphs.

### Brand Artwork

The header uses a black loop emblem, a strongly tracked THE QOLY wordmark, and a small CREATIVE BODY STUDIO line. The footer uses the wordmark arrangement without the large emblem seen in the header.

Treat these as supplied identity artwork. No logo font name or asset URL was provided, and ordinary text with added tracking is not an exact replacement.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| Body and ordinary link wrapper | `16px / 18.4px` | Same | `400`; normal tracking | Measured |
| Membership / reservation label | `11px / 12.65px` | Same | `400`; normal tracking | Measured |
| Primary navigation | `12px / 14px` | Offscreen menu links use the same scale | `400`; `0.96px`, equivalent to `0.08em` | Measured |
| Desktop nested navigation | `12px / 14px` | Mobile links use `0.96px` tracking | Desktop tracking `0.6px`; 11px child indent | Measured; visible open state unverified |
| Service H1 | `18px / 20.7px` | `10px / 11.5px` | `900`; desktop `1.8px`, mobile `1.2px` tracking | Measured |
| English section H2 | `18px / 18px` | Same | `800`; `1.44px` tracking | Measured |
| Standard section-button wrapper | `16px / 18.4px` | Same | `400` | Measured wrapper; inner label can differ |
| Article overlay title | About `14px / 24px` | Not separately measured | Visually bold and underlined | Desktop screenshot estimate |
| Article date | About `12px` | Not separately measured | Visually heavy | Desktop screenshot estimate |
| Trial-banner copy | About `16px / 30px` | Not visually captured | Visually bold | Desktop screenshot estimate |
| Footer Japanese statement | About `24px` | Reflows to two lines in DOM text | Regular appearance | Desktop screenshot estimate |
| Footer English statement | About `12px` | Not separately measured | Heavy uppercase | Desktop screenshot estimate |

The current hero text is `女性限定ジム　グループレッスン／パーソナルトレーニング`. It is a compact service statement, not a large promotional headline. Preserve that visual scale when creating a faithful reference. For a new implementation, the 10px mobile treatment warrants a readability review rather than automatic reuse for all headings.

## Tokens — Spacing & Shapes

**Density:** sparse at the section level, compact inside controls and article metadata.
**Geometry:** square content blocks, fine rules, circular arrow glyphs, and elongated capsule buttons.
**Spacing system:** the measurements do not establish a single universal base unit. Use role-specific tokens rather than forcing the design into an assumed 8px grid.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header brand / page-edge alignment | 50px left | Brand link starts at 29px | Measured |
| Hero horizontal inset | Photo ends 50px from right edge | 20px on each side | Screenshot estimate |
| Main media heading alignment | x = 170px | x = 20px | Measured |
| Footer directory inset | 50px outer page frame | 30px | Measured / screenshot alignment |
| Desktop utility-button gap | 15px | Buttons stack in the header | Derived from rectangles |
| Standard trial-button gap | 20px | 20px vertical gap | Derived |
| About section padding | `200px 0` | `147px 0 158px` | Measured |
| Media section padding | `147px 0 200px` | `120px 0 150px` | Measured |
| Destination-panel padding | 50px | `50px 20px 40px` | Measured |
| Desktop media-card shell gap | About 50px | See row-pitch note below | Derived with estimated 1px shell borders |
| Standalone mobile footer rows | Not applicable | 28px top, 30px bottom | Measured on lower directory links |

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Hero image and article cards | Square | Screenshot; article links report `0px` |
| News strip | `0px` | Measured |
| Desktop utility links | `26px` | Measured; height is also 26px |
| Standard section links | `50px` | Measured; typical height is 50px |
| Mobile trial links | `50px` | Measured; height increases to 60px |
| Small arrow discs | Circular; about 20px across | Screenshot estimate |
| Promotional overlay | Square panel with a circular close control | Screenshot |

The mobile header is visually a rectangular divided grid. Its underlying action anchors still report a 26px radius, so the overall appearance must not be inferred from that property alone: the surrounding rules define the visible cells.

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Header | `1440 × 130px` | `390 × 90px` | Measured |
| Header home-link box | `172 × 80px`, at `(50,25)` | `129 × 60px`, at `(29,15)` | Measured |
| Hero photo | About `670 × 710px`, at `(720,130)` | About `350 × 285px`, at `(20,244)` | Screenshot estimate |
| H1 rectangle | About `535 × 20.69px`, at `(92.53,474.66)` | `350 × 11.5px`, at `(20,544.75)` | Measured |
| News-link rectangle | `1072 × 80px`, at `(318,890)` | `350 × 123px`, at `(20,680)` | Measured |
| About section | Starts at y = 1000; height `798.83px` | Starts at y = 844; height `1056.69px` | Measured |
| Media section | Height `1934.64px` | Height `4840.88px` | Measured |
| Article inner link | `328 × 401.55px` | `328 × 439.875px` | Measured |
| Article outer shell | About `330 × 403.55px` | About `330 × 441.875px` | Derived assuming visible 1px borders |
| Standard About / media-list button | `260 × 50px` | `300 × 50px` | Measured |
| Destination panel | Approximately `480–481 × 570px` | `390 × 529px` | Measured |
| Trial buttons | `260 × 50px` | `330 × 60px` | Measured |
| Entire footer, including trial banner | `909px` high | `1804px` high | Measured |
| Document height | `5212.47px` | `10132.56px` | Measured |

Desktop article-link x positions are 171, 551, and 931px: a 380px column pitch. Row starts are 453.55px apart. On mobile, all article links start at x = 31px, with a 479.875px row pitch. The mobile pitch leaves 40px between measured inner links, or approximately 38px between their bordered outer shells.

## Components

### Desktop Header

**Role:** identity, primary site navigation, and two account actions.

The white header is 130px high. Its home-link box sits at x = 50px, y = 25px. Two small utility capsules occupy the upper right at y = 31px: membership first, reservation second. Their measured dimensions are approximately 104 × 26px and 116 × 26px, separated by 15px.

A second row of navigation begins around x = 715px and y = 85px. It contains About, programs, usage/pricing, media, FAQ, and studio information. The row uses 12px text and 0.08em tracking. The usage/pricing item shows a small disclosure mark in the screenshot; child destinations are present in the DOM. The trigger and open-state styling were not tested.

The current lower-page captures do not show a persistent header. Fixed or sticky behavior is not established by the supplied data.

### Mobile Header and Closed Menu State

**Role:** keep membership and reservation visible while compacting the site directory.

At 390px, the header becomes a 90px-high horizontal grid with thin outer and internal rules:

- A broad left identity cell containing the 129 × 60px home-link box.
- A roughly 102px-wide middle column containing stacked membership and reservation cells.
- A 90px-wide right menu cell with a small hamburger glyph and the label `メニュー`.

The membership anchor measures 100 × 43px and the reservation anchor 100 × 44px. The apparent rectangular cells are more important than copying the desktop capsule silhouette into this location.

The DOM contains `閉じる` and a complete mobile directory, but its links begin at x = 420px, beyond the 390px viewport. This supports an offscreen closed state. No open-menu screenshot or click sequence was supplied, so panel travel, overlay treatment, focus behavior, and close behavior remain unverified.

### Hero Composition

**Role:** establish the studio atmosphere and identify the service.

On desktop, the photo starts exactly at the viewport midpoint in the screenshot and ends 50px from the right edge. Its approximate 670 × 710px frame shows a dark gym interior, strength equipment, and angular ceiling lights. The H1 is centered within the open left half, vertically aligned near the photo's midpoint.

The image is tall, square-cornered, and visually self-contained. There is no text overlay on it and no large filled hero button. Membership and booking stay in the header; the news strip sits below the hero image.

On mobile, the order changes to image, service caption, then news. The visible image shows a woman boxing and uses a wider crop, approximately 350 × 285px. Its top is around y = 244px, leaving substantial white space beneath the 90px header. The service caption follows approximately 15px below the image.

Different subjects appear in the two captures. This does not establish whether the hero uses video, rotating images, or breakpoint-specific media. Use the observed crops as layout evidence and treat the media mechanism as unknown.

### News Strip

**Role:** surface recent articles without overwhelming the opening composition.

The desktop strip is a thin bordered white rectangle, 1072 × 80px, aligned with the hero's right edge. Its anatomy is:

1. A small square image at the left, approximately the strip's inner height.
2. A date and blue-gray category label above the title.
3. An underlined article title.
4. A small outlined circular arrow near the right edge.
5. Three slim horizontal progress segments beneath the panel.

The inspected link padding is `0 60px 0 98px`. At 390px, the strip becomes 350 × 123px with `17px 23px 17px 142px` padding. The left image grows to roughly 121px square, and the title wraps into several lines in the remaining width. The arrow moves toward the lower-right corner.

Several repeated article links share the same measured rectangle, and the screenshots show different active stories. Together with the segmented indicator and exposed slider-related variables, this is consistent with a carousel. Its autoplay interval, transition type, indicator operability, and pause behavior are not verified.

### About Section

**Role:** introduce the studio philosophy and direct visitors to more information.

The section contains the English label ABOUT US, a Japanese companion label, the statement `私たちは自分も世界ももっと強くできる`, explanatory copy about HIIT and boxing, and an About link.

The desktop H2 and button share x ≈ 889.66px, indicating a right-positioned information column. The button is 260 × 50px. On mobile, the H2 begins at x = 20px and the button becomes 300 × 50px, centered at x = 45px.

The section has unusually generous vertical padding: 200px on desktop, and 147px above / 158px below on mobile. Its main artwork is not shown in the supplied screenshot selection. The DOM and animation record establish content, alignment, and a background animation declaration, but not the appearance of the missing artwork.

### Media Section and Article Cards

**Role:** provide a substantial editorial index for studio news, health information, recruitment, and community activity.

A very pale gray section contains the English label THE QOLY MEDIA, a Japanese companion label, a short introduction, nine image-led cards, and a centered media-index button.

At desktop size, cards form three columns and three rows. Their outer shells are approximately 330px wide, separated by about 50px. The desktop collection aligns near x = 170px within a broader content frame of approximately 1100px.

Each card uses a single linked image surface rather than a separate white text panel:

- Square corners and a fine dark perimeter.
- Full-frame photography or existing promotional artwork.
- A small blue-gray category stamp near the upper-left, approximately 20px from the left and 30px from the top.
- A darkened lower image region supporting white text.
- A bold, underlined, multiline article title near the lower-left.
- A compact date below the title.
- A white circular arrow near the lower-right.

The exact overlay gradient and title descendant styles were not supplied. A bottom-weighted dark gradient is a practical approximation, not a measured source declaration.

The visible topics include a mango smoothie, staff recruitment, a running event, a vitamin article, personal-training results, and healthy food. These deliberately varied images add color and human detail to an otherwise restrained interface.

On mobile, the cards retain a 328px inner-link width and form one column. They become taller: 439.875px rather than 401.55px. Preserve this change in proportion instead of merely dropping desktop cards into a narrower grid.

### Capsule Links and Circular Arrows

**Role:** provide consistent navigation affordances at several scales.

There are two distinct button scales:

- **Utility actions:** 26px high on desktop, with 11px labels and very restrained padding.
- **Section actions:** generally 260 × 50px on desktop, 300 × 50px in mobile content sections, and 330 × 60px in the mobile trial banner.

Labels are centered. A small circular arrow sits independently near the right edge. The circle is approximately 20px across in the screenshots; it is not the entire click target.

The trial banner pairs a transparent white-outlined button with a white-filled button. Membership uses red text and a red outline on white. Ordinary navigation uses charcoal and white.

### Three Destination Panels

**Role:** offer prominent routes to About, programs, and pricing after the media collection.

The panels form a full-width, three-column row on desktop. Each is approximately 480px wide and 570px high, with 50px padding. Thin vertical rules separate them. The supplied lower-page screenshot shows their bottom descriptions immediately above the trial banner.

On mobile, the panels stack vertically. Each measures 390 × 529px with `50px 20px 40px` padding.

The DOM establishes linked headings and short descriptions. The upper visual content of these panels is not visible in the provided screenshots; do not invent particular illustrations, photographs, or hover reveals for them.

### Desktop Promotional Overlay

**Role:** promote a personal-training results page.

A 230 × 220px bordered panel appears at x = 50px, y = 750px in both the opening and media desktop screenshots. At the 1000px viewport height, this places it 30px above the bottom edge, consistent with fixed placement.

The upper area contains cropped results artwork; the lower white area contains an underlined text link. A small circular close affordance overlaps the upper-right corner. The recorded destination is `https://www.lblp.jp/theqoly/`; that page was not inspected.

The panel is absent from the supplied mobile capture and the desktop footer capture. Its hiding conditions and close behavior are unknown. Do not assume it persists across all scroll positions or that dismissal is remembered.

### Trial-Training Banner

**Role:** reassure new visitors and offer two next steps before the site directory.

The desktop banner is approximately 462px high, derived from the supplied screenshot and footer geometry. It spans the page and uses a darkened fitness photograph with white copy aligned to the x = 170px content line.

The copy forms four short lines. Beneath it, `はじめての方へ` and `よくある質問` appear in two 260 × 50px capsules with a 20px gap. The first is transparent with a white outline; the second is white with charcoal text.

At mobile size, the measured buttons are 330 × 60px and stack with a 20px vertical gap. The supplied mobile screenshots do not show the banner itself, so the mobile crop and exact text placement cannot be specified visually.

### Footer Directory and Brand Area

**Role:** provide comprehensive navigation, repeat the brand statement, and expose social and account destinations.

On desktop, the white footer places the wordmark at left and five compact navigation groups across the right. Groups cover About, programs, usage/pricing, studio information, and general links. Child links use a small leading chevron. Underlined links and broad spacing provide structure without card backgrounds.

The Japanese brand statement appears in a larger regular style, followed by the heavy uppercase line WE CAN MAKE OURSELVES AND THE WORLD STRONGER. A row of five monochrome social symbols sits near the lower-left, while the membership and reservation capsules repeat at the lower-right. A thin horizontal rule precedes centered copyright text.

On mobile, the directory becomes a vertical sequence within 30px side margins. Lower standalone links occupy 73–74px-high rows separated by dark rules. The two account actions become equal-width 157.5 × 50px capsules with a 15px gap. The wordmark appears centered below them, followed by centered social symbols, a rule, and copyright.

Measured social-link boxes grow from 15px high on desktop to 18px on mobile. The YouTube box is wider: 19px and 22px respectively. These are visible icon dimensions, not evidence of adequately sized touch targets.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Utility links | `0.2s cubic-bezier(0, 1, 0.8, 1)` | A short transition is defined; the changing properties and end states were not supplied. |
| Standard section links | `0.3s cubic-bezier(0, 1, 0.8, 1)` | A shared 300ms transition timing is present. Hover appearance remains unverified. |
| Footer navigation / social links | Same 300ms easing | Consistent transition timing, without a demonstrated interaction. |
| About background | `60s linear infinite bg-x-scroll` | A continuous background animation is declared. The name suggests horizontal travel, but keyframes, distance, and visual motif were not provided. |
| Offscreen mobile menu links | `0.3s cubic-bezier(0, 1, 0.8, 1) forwards fadeOut` | A fade-out animation is recorded in the closed/offscreen state. Opening behavior was not exercised. |
| News strip | Repeated links at identical coordinates; segmented indicator; different visible stories | Strong evidence of a carousel-like presentation, but no verified interval, swipe behavior, or transition duration. |
| Hero media | Different subjects in desktop and mobile captures | Media variation is visible; playback, looping, and asset selection are unknown. |
| Promotional close control | A close glyph is visible | Dismissal is an apparent affordance, not a tested interaction. |

Many other elements report only `transition: all`. That alone does not prove motion or establish a nonzero duration.

The capture process waited for finite motion and layout stability, while perpetual animations were temporarily paused during readiness checks and then resumed. This makes the images useful for settled layout analysis, but it does not document a complete motion sequence.

For an adaptation, keep interaction feedback restrained. The measured 200–300ms timing and shared easing are reusable; image zooms, parallax, spring motion, and elaborate menu choreography would be additions.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | White | Creates the broad negative space around the opening composition and footer. |
| Editorial section | Very pale charcoal wash over white | Groups the substantial article collection. |
| Hero media | Cool, dark photograph with square edges | Establishes the studio atmosphere. |
| Article card | Full image with dark lower treatment | Supports white title, date, category, and arrow overlays. |
| Utility / section control | Fine outline or white fill; capsule geometry | Gives navigation a quiet, repeatable form. |
| Trial banner | Darkened full-width photograph | Creates a strong tonal transition before the footer. |
| Promotional overlay | White rectangle, fine dark border | Separates a small promotional unit from the scrolling page. |

There is no visible general-purpose shadow or elevation system. Separation comes from space, thin borders, image contrast, and changes in background tone.

## Imagery

The hero photography is cool, dark, and architectural. Gym equipment, mirrors, ceiling lights, black sportswear, and close crops communicate training intensity without filling the interface with decorative graphics. The mobile boxing frame emphasizes a person in action; the desktop frame emphasizes the studio environment.

The media collection is broader and more colorful. It includes food, staff portraits, recruitment graphics, community photographs, and results artwork. Preserve that editorial variety. Applying the hero's dark blue-green grade to every article would erase meaningful differences between subjects.

Article imagery is cropped to portrait frames. Embedded text in promotional images is part of the asset and may already be dense; the HTML title still appears over the lower image region. Choose crops that protect useful faces and subjects while leaving room for the overlay text.

The trial banner uses a wide fitness photograph with a strong dark treatment, creating enough contrast for white copy and the outlined button. Its exact overlay opacity was not measured.

### Observed Asset References

No reliable image `src`, video URL, logo file path, or font file URL was supplied. The references below describe visible assets rather than inventing filenames.

| Asset role | Observed content | Handling guidance |
| --- | --- | --- |
| Header identity | Loop emblem, THE QOLY wordmark, small studio descriptor | Fit the complete artwork inside the measured home-link box; avoid recreating the logo with a guessed font. |
| Desktop hero | Dark equipment room and angular ceiling lighting | Use a tall cover crop with square edges. |
| Mobile hero | Woman boxing against a dark studio background | Use the wider observed crop; media-selection behavior remains unknown. |
| Media thumbnails | Smoothie, recruitment image, group run, staff, results artwork, food | Maintain content-specific color and focal points. |
| Promotional overlay | Personal-training results artwork | Treat as image content, not interface typography to be regenerated. |
| Trial banner | Fitness portrait with reflective surroundings | Use a wide crop and an explicitly tested contrast treatment. |
| Footer identity | Horizontal wordmark and studio descriptor | Approximately 200px wide in the screenshots; preserve its intrinsic proportions. |
| Social symbols | Twitter, Facebook, Instagram, YouTube, TikTok | Use recognizable monochrome marks with accessible link names. |

## Layout & Responsive Behavior

The measured section order is unchanged between desktop and mobile: opening composition, About, media collection, three destination panels, then footer with trial banner and directory.

| Region | Desktop behavior | Mobile behavior |
| --- | --- | --- |
| Header | Large identity at left; account actions above a horizontal menu at right | Divided 90px header with stacked account actions and a menu cell |
| Hero | Service statement left, tall photograph right | Wide photograph above a small service caption |
| Opening news | Shallow 1072px-wide strip aligned right | Taller 350px strip with a larger thumbnail and wrapped title |
| About | Information aligned toward the right | Heading at 20px inset and centered 300px button |
| Media | Three columns, nine cards total | One column; cards remain approximately 330px wide and become taller |
| Destination links | Three full-width columns | Three stacked full-width panels |
| Trial actions | Two side-by-side capsules | Two stacked 330px-wide capsules |
| Footer | Brand area and compact navigation groups across the page | Ruled vertical directory, account pair, centered identity and social row |
| Promotional panel | Visible in top and media captures | Not present in supplied mobile evidence |

The About section starts at y = 1000 on desktop and y = 844 on mobile. Thus, the opening composition occupies one viewport in both inspected states. This is an observed relationship; the exact source height formula is unavailable.

Do not interpolate all measurements uniformly. The header becomes shorter, the hero switches orientation, the news strip becomes taller, cards keep approximately the same width, and large section buttons become wider. The footer also changes ordering and navigation treatment.

Only two viewport sizes were supplied. The original breakpoint, tablet layout, narrow-phone behavior, and landscape behavior are unknown. A 900px layout switch in the Quick Start is an implementation choice, not a recovered source breakpoint. Test intermediate widths, long Japanese titles, increased text size, and browser zoom.

## Do’s and Don’ts

### Do

- Preserve the broad white margins and the small scale of navigation and section labels.
- Keep the desktop hero asymmetrical, with the photograph beginning near the viewport midpoint.
- Use charcoal `#353538` as the primary interface ink and reserve red for membership.
- Keep square image boundaries, fine rules, and capsule navigation controls.
- Distinguish the compact 26px desktop utility links from the larger section buttons.
- Retain category, title, date, and arrow as separate layers inside each article card.
- Preserve the three-column desktop media collection and its single-column mobile counterpart.
- Use the current service statement as the hero reference, with its measured desktop/mobile scale clearly documented.
- Keep the editorial photographs varied in subject and color.
- Include the full footer directory and repeated account actions when extending the homepage.
- Label inferred crops, gradients, and breakpoints as implementation choices.

### Don't

- Don't replace the opening composition with an oversized centered headline and a large filled red CTA.
- Don't round article cards, add soft shadows, or introduce a general elevation system.
- Don't use the slider library's blue default as the brand color.
- Don't convert every section into a uniform card grid.
- Don't apply the same dark image grade to all article assets.
- Don't treat repeated DOM entries as multiple visible news cards.
- Don't infer video autoplay or carousel timing from still frames.
- Don't describe an offscreen menu inventory as a tested open-menu design.
- Don't use the 10px mobile H1 size as a general accessibility recommendation.
- Don't reproduce the desktop promotional panel on mobile without making an explicit product decision.
- Don't invent missing About artwork, destination-panel imagery, font files, or asset paths.

## Recommended Implementation Additions

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

- Keep small visual icons inside larger keyboard- and touch-operable targets. Use at least 44px interaction areas where practical, particularly for menu, social, close, and carousel controls.
- Implement the mobile menu as a real disclosure or dialog with a labeled trigger, `aria-expanded`, keyboard access, Escape handling, and appropriate focus management. Remove closed content from interaction rather than relying only on offscreen positioning.
- If the news strip rotates automatically, provide pause behavior and prevent inactive or duplicated slides from creating redundant keyboard stops.
- If hero media is video, provide an appropriate static poster and respect reduced-motion preferences. Its media type is currently unknown.
- Test the estimated blue-gray category fill against white text. Darken it if necessary; the supplied badge color is a visual estimate, not an accessibility-approved token.
- Review the very small mobile hero caption and muted date text at actual device scale. Permit wrapping or larger type where needed.
- Preserve a visible focus ring and meaningful image alternatives. When a linked card's adjacent title already describes an image, an empty image alternative can prevent redundant announcements.
- Give hero and article media explicit dimensions or aspect ratios, load below-the-fold images lazily, and supply crops appropriate to their different frames.
- Ensure long article titles cannot overlap the date or arrow. Use a deliberate text-area budget or grow the card; avoid silent clipping of essential information.
- Treat promotional dismissal and near-footer visibility as explicit implementation requirements, because the original conditions are unverified.

## Agent Prompt Guide

### Quick Color Reference

- Page, header, footer, and ordinary button fill: `#FFFFFF`.
- Primary text and suggested dark rules: `#353538`.
- Media-section wash: `rgba(53, 53, 56, 0.05)`, approximately `#F5F5F5` over white.
- Membership text: measured `#C81528`; reuse for its outline only as an adaptation.
- Category stamp: estimated `#9BA9C3`; verify contrast before production use.
- Text over article and trial photography: white.
- Dark blue-green belongs to photographic art direction, not a required global surface token.

### Overall Prompt

“Create a multi-page women's fitness studio homepage inspired by the current THE QOLY composition. Use a white canvas, charcoal text, fine dark rules, square photographic frames, compact tracked navigation, and restrained capsule links. At 1440px, place a small service statement in the open left half of the hero and a tall, dark studio photograph in the right half, followed by a shallow bordered news strip aligned to the right. Build a pale-gray editorial section with nine portrait image cards in three columns. Each card needs a muted blue-gray category stamp, a white underlined title, a date, and a small circular arrow over a darkened lower image region. Follow with three destination panels, a dark trial-training banner, and a comprehensive footer. At 390px, use a divided 90px header, a wide hero image above its caption, a single media column, stacked destination panels, and a ruled footer directory. Keep membership red and booking charcoal. Treat exact breakpoints, media playback, and menu choreography as implementation decisions requiring verification.”

### Example Component Prompts

1. **Desktop header:** “A 130px white header with a 172 × 80px identity box at a 50px left inset. Place two 26px-high outlined account capsules at the upper-right, and a second row of 12px Japanese navigation beneath. Use generous separation, fine borders, and no shadow.”
2. **Mobile header:** “A 390 × 90px white header divided by thin charcoal rules into identity, stacked account actions, and a 90px menu cell. Membership is red; reservation and the menu are charcoal. The menu icon has a small text caption.”
3. **Hero:** “At desktop size, balance a compact 18px service statement in an open white left half against a tall dark gym photograph on the right. At mobile size, change to a 350 × 285px image with a small caption below. Preserve large vertical breathing room.”
4. **Article card:** “A square-cornered portrait image card about 330px wide. Add a blue-gray category stamp near the top-left, a dark lower image treatment, white underlined Japanese title, compact date, and a white 20px arrow disc. Keep the entire card as one link.”
5. **Trial banner:** “A full-width darkened fitness photograph with four short lines of white reassurance copy. Below, pair a transparent white-outlined capsule with a white-filled capsule. Stack the two actions on mobile.”
6. **Mobile footer:** “A white footer with 30px side margins, underlined navigation in rows separated by fine charcoal rules, a side-by-side membership and reservation pair, then a centered wordmark, five monochrome social symbols, a rule, and small copyright text.”

## Quick Start

### CSS Custom Properties

This is a reusable static layout recipe, not recovered source CSS. It uses the measured colors, type declarations, button sizes, and endpoint proportions. The 900px breakpoint, rounded card ratios, border-color aliases, image overlays, and hover treatment are recommendations. Load the appropriate font and identity assets separately; the code does not supply missing media or implement menu/carousel behavior.

The hero assumes `.hero__stage` contains a heading followed by a media element. The CSS changes their visual order on mobile. The header is positioned over the opening section as an implementation choice that fits the captures, not as a claim about the original positioning rule.

```css
:root {
  /* Measured colors and a derived opaque media surface. */
  --color-page: #fff;
  --color-ink: #353538;
  --color-media-wash: rgb(53 53 56 / 5%);
  --color-media: #f5f5f5;
  --color-membership: #c81528;
  --color-on-photo: #fff;

  /* Screenshot estimates; verify contrast before production use. */
  --color-category: #9ba9c3;
  --color-muted: #999;
  --color-soft-rule: #d8d8d8;

  /* Requested source families; actual font files are not included. */
  --font-body: 'Noto Sans JP', sans-serif;
  --font-heading: proxima-nova, sans-serif;
  --text-nav: 12px;
  --text-utility: 11px;
  --text-section: 18px;
  --tracking-nav: 0.08em;

  --page-inset: 50px;
  --content-width: 1100px;
  --header-height: 130px;
  --rule: 1px solid var(--color-ink);
  --radius-pill: 50px;
  --ease-qoly: cubic-bezier(0, 1, 0.8, 1);
  --motion-fast: 200ms;
  --motion-link: 300ms;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-page);
  font-family: var(--font-body);
  font-size: 16px;
}
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.content-shell {
  width: min(var(--content-width), calc(100% - 100px));
  margin-inline: auto;
}
.section-label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-section);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}
.reading-copy { line-height: 1.85; }

/* Shared navigation controls. */
.action, .pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--rule);
  background: var(--color-page);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    color var(--motion-link) var(--ease-qoly),
    background-color var(--motion-link) var(--ease-qoly);
}
.action {
  height: 26px;
  padding: 0 18px 1px;
  border-radius: 26px;
  font-size: var(--text-utility);
  line-height: 12.65px;
  transition-duration: var(--motion-fast);
}
.action--join {
  color: var(--color-membership);
  border-color: currentColor;
}
.action--reserve { padding-right: 30px; }
.pill {
  width: 260px;
  height: 50px;
  max-width: 100%;
  border-radius: var(--radius-pill);
  font-size: 13px; /* Estimated inner-label scale. */
}
.circle-arrow {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-soft-rule);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.pill > .circle-arrow,
.action > .circle-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.action > .circle-arrow { right: 4px; }

/* Static desktop header. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: var(--header-height);
  background: var(--color-page);
}
.header-brand {
  position: absolute;
  left: 50px;
  top: 25px;
  width: 172px;
  height: 80px;
}
.header-brand img { width: 100%; height: 100%; object-fit: contain; }
.header-actions {
  position: absolute;
  right: 50px;
  top: 31px;
  display: flex;
  gap: 15px;
}
.header-nav {
  position: absolute;
  right: 50px;
  top: 85px;
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.08em;
}
.header-nav a { text-decoration: none; }
.header-menu { display: none; }

/* Endpoint approximation: 670 x 710 image at 1440 x 1000. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 780px;
}
.hero__stage {
  position: absolute;
  inset: 130px 50px 160px 0;
  display: grid;
  grid-template-columns: 50vw minmax(0, 1fr);
}
.hero__title {
  align-self: center;
  justify-self: center;
  margin: 0;
  padding-inline: 32px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.1em;
}
.hero__visual { margin: 0; min-height: 0; overflow: hidden; }
.hero__visual img,
.hero__visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__news {
  position: absolute;
  right: 50px;
  bottom: 30px;
  width: calc(80% - 80px);
}
.news-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 0 60px 0 98px;
  border: var(--rule);
  background: var(--color-page);
  text-decoration: none;
}
.news-link__image {
  position: absolute;
  inset: 0 auto 0 0;
  width: 78px;
  height: 100%;
  object-fit: cover;
}
.news-link__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted);
}
.category {
  display: inline-block;
  padding: 3px 9px;
  color: #fff;
  background: var(--color-category);
  font-size: 11px;
  line-height: 1.2;
}
.news-link__title {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-link > .circle-arrow {
  position: absolute;
  right: 20px;
  top: calc(50% - 10px);
}
.news-progress {
  position: absolute;
  top: calc(100% + 15px);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.news-progress span { height: 1px; background: var(--color-soft-rule); }
.news-progress .is-active { background: var(--color-ink); }

.about-section { padding: 200px 0; }
.media-section { padding: 147px 0 200px; background: var(--color-media); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
  width: min(100%, 1090px);
  margin-top: 60px;
}
.media-card {
  position: relative;
  display: block;
  aspect-ratio: 330 / 404;
  overflow: hidden;
  border: var(--rule);
  color: #fff;
  background: var(--color-ink);
  text-decoration: none;
}
.media-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Recommended approximation; original gradient was not measured. */
  background: linear-gradient(180deg, transparent 28%, rgb(0 0 0 / 78%) 100%);
}
.media-card > .category {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 20px;
}
.media-card__body {
  position: absolute;
  z-index: 1;
  inset: auto 20px 28px;
}
.media-card__title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.media-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
}
.media-card .circle-arrow { color: var(--color-ink); background: #fff; border: 0; }
.media-more { display: flex; justify-content: center; margin-top: 80px; }

.site-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-tile {
  display: block;
  min-height: 570px;
  padding: 50px;
  border-right: var(--rule);
}
.route-tile:last-child { border-right: 0; }

/* Assign --trial-image to an approved image URL in the implementation. */
.trial-banner {
  padding: 144px 0 98px;
  color: #fff;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%)),
    var(--trial-image, none);
  background-position: center;
  background-size: cover;
}
.trial-copy { margin: 0; font-size: 16px; font-weight: 700; line-height: 30px; }
.trial-actions { display: flex; gap: 20px; margin-top: 50px; }
.pill--on-photo { color: #fff; background: transparent; border-color: #fff; }

/* Suggested footer structure with mobile reordering. */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'brand nav'
    'statement nav'
    'social actions'
    'copyright copyright';
  gap: 40px;
  padding: 80px 50px 28px;
}
.footer-brand { grid-area: brand; width: 200px; }
.footer-statement { grid-area: statement; }
.footer-nav { grid-area: nav; display: flex; gap: 55px; }
.footer-nav a { font-size: 12px; line-height: 14px; letter-spacing: 0.08em; }
.footer-nav__group a { display: block; }
.footer-nav__group a + a { margin-top: 23px; }
.footer-actions { grid-area: actions; display: flex; justify-content: flex-end; gap: 15px; }
.footer-social { grid-area: social; display: flex; align-items: center; gap: 12px; }
.footer-social svg { display: block; height: 15px; width: auto; }
.footer-copyright {
  grid-area: copyright;
  margin: 0;
  padding-top: 28px;
  border-top: var(--rule);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
}

/* Recommended feedback, not a verified original hover state. */
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (hover: hover) {
  .pill:not(.pill--on-photo):hover { color: #fff; background: var(--color-ink); }
}

/* Recommended breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 900px) {
  :root { --page-inset: 20px; --header-height: 90px; }
  .content-shell { width: calc(100% - 40px); }
  .site-header { border-block: var(--rule); }
  .header-brand { left: 29px; top: 14px; width: 129px; height: 60px; }
  .header-nav { display: none; }
  .header-actions {
    inset: 0 90px 0 auto;
    width: 102px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    border-inline: var(--rule);
  }
  .header-actions .action { height: auto; padding: 0; border: 0; border-radius: 0; }
  .header-actions .action:first-child { border-bottom: var(--rule); }
  .header-actions .circle-arrow { display: none; }
  .header-menu {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 90px;
    border: 0;
    background: #fff;
    color: var(--color-ink);
    font-size: 11px;
  }
  .hero__stage {
    inset: calc(50% - 178px) 20px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .hero__visual { order: 0; width: 100%; aspect-ratio: 70 / 57; }
  .hero__title {
    order: 1;
    align-self: stretch;
    padding: 0;
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0.12em;
  }
  .hero__news { right: 20px; bottom: 41px; width: calc(100% - 40px); }
  .news-link { display: block; min-height: 123px; padding: 17px 23px 17px 142px; }
  .news-link__image { width: 121px; }
  .news-link__meta { gap: 10px; }
  .news-link__title { line-height: 1.4; }
  .news-link > .circle-arrow { top: auto; right: 6px; bottom: 6px; }
  .news-progress { top: calc(100% + 20px); }
  .about-section { padding: 147px 0 158px; }
  .media-section { padding: 120px 0 150px; }
  .media-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 330px;
    gap: 38px;
    margin-inline: auto;
  }
  .media-card { aspect-ratio: 330 / 442; }
  .media-more { margin-top: 58px; }
  .pill { width: 300px; }
  .site-routes { grid-template-columns: minmax(0, 1fr); }
  .route-tile { min-height: 529px; padding: 50px 20px 40px; border-right: 0; border-top: var(--rule); }
  .trial-banner { padding: 100px 0 70px; }
  .trial-banner .content-shell { width: calc(100% - 60px); }
  .trial-actions { flex-direction: column; gap: 20px; }
  .trial-actions .pill { width: 100%; height: 60px; }
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'statement' 'nav' 'actions' 'brand' 'social' 'copyright';
    padding: 70px 30px 28px;
  }
  .footer-nav { display: block; }
  .footer-nav__group { padding: 28px 0 30px; border-bottom: var(--rule); }
  .footer-actions .action { flex: 1; height: 50px; }
  .footer-brand { justify-self: center; margin-top: 40px; }
  .footer-social { justify-content: center; gap: 18px; }
  .footer-social svg { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .action, .pill { transition: none; }
  .about-section { animation: none; }
  /* Pause any added carousel or video behavior in its controller too. */
}
```

The CSS intentionally does not fabricate the missing About artwork, destination-panel imagery, open-menu state, or promotional dismissal logic. At intermediate widths, tune the hero's stage height and switch the media grid earlier if necessary; its supplied measurements are endpoint references, not a complete responsive specification.

A card can use the following semantic structure. `YOUR_APPROVED_IMAGE_URL` is an explicit implementation placeholder, not an observed source asset path.

```html
<a class='media-card' href='https://theqoly.com/media/new-smoothie/'>
  <img src='YOUR_APPROVED_IMAGE_URL' alt='' loading='lazy'>
  <span class='category'>店舗情報</span>
  <div class='media-card__body'>
    <h3 class='media-card__title'>
      【千葉駅・千葉中央駅近く】女性専用ジムのトロピカルマンゴースムージー登場！
    </h3>
    <div class='media-card__meta'>
      <time datetime='2026-07-25'>2026.07.25</time>
      <span class='circle-arrow' aria-hidden='true'>›</span>
    </div>
  </div>
</a>
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. They do not imply that the original website uses Tailwind. The category color remains an estimate.

```css
@theme inline {
  --color-qoly-page: #fff;
  --color-qoly-ink: #353538;
  --color-qoly-media: #f5f5f5;
  --color-qoly-membership: #c81528;
  --color-qoly-category: #9ba9c3;

  --font-qoly-body: 'Noto Sans JP', sans-serif;
  --font-qoly-heading: proxima-nova, sans-serif;

  --text-qoly-utility: 11px;
  --text-qoly-nav: 12px;
  --text-qoly-section: 18px;

  --spacing-qoly-mobile-inset: 20px;
  --spacing-qoly-footer-inset: 30px;
  --spacing-qoly-desktop-inset: 50px;
  --spacing-qoly-card: 330px;

  --radius-qoly-utility: 26px;
  --radius-qoly-pill: 50px;
  --ease-qoly: cubic-bezier(0, 1, 0.8, 1);
}
```

## Sources & Evidence

- **Original and final page:** [THE QOLY](https://theqoly.com/). The supplied capture reports HTTP 200 and the same original/final URL.
- **Capture timestamp:** October 1, 2026, 19:45:05.008 UTC, equivalent to October 2, 2026, 04:45:05.008 JST.
- **Desktop evidence:** 1440 × 1000 viewport; opening, media-grid, and lower-page screenshots; rendered text, link destinations, computed styles, and element rectangles. Measured document height: 5212.46875px.
- **Mobile evidence:** 390 × 844 viewport; opening and lower-footer screenshots; rendered text, link destinations, computed styles, and element rectangles. Measured document height: 10132.5625px.
- **Observed state coverage:** settled initial rendering and scrolled page positions. No supplied click, hover, menu-open, carousel-control, membership, reservation, or dismissal sequence was documented.
- **Capture limitations:** the initial observation lasted at least five seconds. Readiness checks used a 15-second overall limit, a five-second pending-image limit, and up to ten seconds per scroll position. Perpetual animations were paused during readiness checks and resumed afterward. These checks do not prove that all delayed content appeared. SharedWorkers and service workers were disabled.
- **Design limitations:** asset URLs, complete stylesheets, animation keyframes, nested text styles, and intermediate responsive breakpoints were not supplied. Some sections are documented by DOM geometry without a corresponding screenshot. This reference uses the supplied evidence only; no additional browsing or command execution was performed.

This document describes the current captured homepage. Measurements, screenshot estimates, derived values, and recommended implementation choices are identified separately throughout.