# NOOG — Style Reference

> Black golf equipment presented through fashion photography, technical chapters, and generous editorial space.

**Original URL:** [noog.jp/pages/lp](https://noog.jp/pages/lp)  
**Final URL:** [noog.jp/pages/lp](https://noog.jp/pages/lp) — unchanged; recorded HTTP status `200`.  
**Theme:** alternating white, photographic, cool-gray, and charcoal sections within one page.  
**Inspected:** September 17, 2026, Japan Standard Time. The supplied retrieval timestamp is September 16, 2026, at `20:22:48.047 UTC`, equivalent to September 17 at `05:22:48.047 JST`.  
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.  
**Scope:** the current NOOG brand and iron-product narrative, including its opening composition, product copy, three technical chapters, craftsmanship and interview content, repeated purchase information, social/story content, and footer. Visual captures cover desktop opening, a technical-section transition, desktop footer, mobile opening, and mobile footer. Additional sections are documented through supplied rendered text and computed element measurements.

NOOG combines a restrained black-and-white editorial system with large photographs of people, golf clubs, manufacturing, and the course. Japanese serif headlines provide delicacy; heavy English display lettering and chapter numbers provide weight. Small English annotations and readable Japanese sans-serif paragraphs make the technical material feel organized without enclosing it in conventional cards.

The page moves through several scales: a viewport-sized photographic opening, offset text columns, numbered explanations, a broad outdoor image, a dark craftsmanship section, a substantial interview, and an oversized footer wordmark. The green LINE controls form a distinct commercial layer over this quieter composition. Preserve that hierarchy: photography establishes character, typography organizes the story, and conversion controls remain recognizable utility elements.

## How to Read This Reference

- **Measured** means a value is present in the supplied computed styles or element rectangles. Dimensions are CSS pixels unless stated otherwise.
- **Visual estimate** means a position, size, or color is approximated from an attached current-page capture. These estimates are not pixel samples or recovered CSS declarations.
- **Calculated** means a result is derived from the supplied measurements, such as the usable text width after padding.
- **Recommended** means implementation guidance for a new build. Suggested breakpoints, fallback typography, accessibility improvements, and Quick Start behavior are not claims about the original implementation.
- Computed font stacks identify declared families. They do not prove which font file supplied every rendered glyph.
- The supplied element list includes offscreen navigation and ancillary widget elements. Their presence does not establish a visible state or a component's importance to the design.
- Image layering, individual glyph styling, and some decorative surfaces are not represented by the sampled parent elements. A transparent background or inherited `16px` font size can therefore describe a wrapper rather than its visible artwork.

## Tokens — Colors

### Default Palette

Token names below are implementation aliases, not recovered source variable names.

| Name | Value | Alias | Evidence and role |
| --- | --- | --- | --- |
| Paper | `#FFFFFF` | `--noog-paper` | Measured body and several section backgrounds; also reversed text in dark or photographic regions |
| Ink | `#000000` | `--noog-ink` | Measured primary text; visually used for the wordmark and large numerals |
| Charcoal | `#1B1B1B` | `--noog-charcoal` | Measured craftsmanship background; the footer visually uses a closely matching charcoal |
| Product Gray | `#CACFD9` | `--noog-product` | Measured background of the second Product section on both viewports |
| Secondary Ink | `#252525` | `--noog-secondary` | Measured descriptions beneath the three feature-summary items |
| Quiet Letter Gray | approximately `#B6B6B6` | `--noog-quiet` | Visual estimate for subdued portions of the opening slogan; layering may affect its appearance |
| Menu Bronze | approximately `#A48777` | `--noog-menu` | Representative visual estimate for the muted brown menu square; its apparent tone varies between captures |
| Inline LINE Green | `#00B900` | `--noog-line` | Measured background of the rectangular in-page LINE links |
| Floating LINE Green | approximately `#00C800` | `--noog-float-green` | Visual estimate for the brighter circular floating control; its exact computed fill was not supplied |

The opening desktop capture has a pronounced pale veil, and the mobile opening contains overlapping photographic subjects. The opacity, compositing method, and duration of these appearances are unknown. Do not turn this captured wash into a permanent page-wide gray filter.

Blue sky, green turf, hot metal, and copper-colored club details belong to the imagery. They are not evidence of a broad interface accent palette. Likewise, the provided root properties include review-widget and slider colors that are not established as visible core-page tokens.

### Theme Presets

No selectable theme system was evidenced. The following treatments coexist within the document:

| Treatment | Surface | Text and emphasis |
| --- | --- | --- |
| Editorial explanations | White | Black Japanese copy, large black numerals, small English annotations |
| Outdoor interlude | Full-width photograph | White text placed over the image |
| Craftsmanship | Charcoal | White display headings and reading text |
| Product reprise | Cool gray | Black section label; product-copy colors change between desktop and mobile |
| Footer | Visually charcoal | White navigation and an oversized black wordmark |

Use these as section treatments rather than a user-controlled light/dark switch.

## Tokens — Typography

### Copperplate — English Display and Numerals

- **Measured stack:** `copperplate, sans-serif`.
- **Roles:** English section titles, technical chapter numerals, feature-summary numerals, and navigation.
- **Measured weights:** `700` for large titles and numbers; `300` for sampled navigation links.
- **Character:** broad, emphatic lettering with a small-cap appearance in navigation.
- **Limitation:** the logo's exact outlines are not established by the text stack. Reuse authorized logo artwork when available.

### Japanese Serif — Editorial Headlines

- **Measured stack:** `YuMincho, 'Noto Serif JP', serif`.
- **Measured weight:** `400`.
- **Roles:** manifesto, product statements, feature titles, technical chapter names, craftsmanship headline, and interview quotation.
- **Character:** fine strokes and compact leading against large surrounding spaces.

The serif treatment carries much of the site's elegance. Preserve the contrast between these regular-weight Japanese headlines and the heavy English numerals.

### Noto Sans — Reading Text and Utility Labels

- **Measured stack:** `'Noto Sans', sans-serif`.
- **Typical weight:** `400` for paragraphs; `700` for coupon and LINE labels.
- **Typical reading rhythm:** `16px / 28.8px`, equivalent to `1.8` line height.
- **Additional sizes:** `18px / 32.4px` for the introduction and some mobile craftsmanship copy; `14px / 25.2px` for interview answers and purchase details.

The root properties also mention `'Noto Sans Japanese'` and weight `500`, but the sampled page elements compute to the stack and weights above. Use the rendered element measurements as the authority for these components.

### Inter — English Annotations

- **Measured stack:** `Inter, sans-serif`.
- **Roles:** labels such as `One Length`, `Forged`, and `Carbon Shafts`, plus the interviewee's Romanized name.
- **Typical chapter annotation:** `12px / 18px`, weight `300`.
- **Interview name annotation:** `12px / 12.6px`, weight `400`.

### Type Scale

Values below are measured unless identified as estimates.

| Role | Desktop | Mobile | Notes |
| --- | --- | --- | --- |
| Introduction headline | `70px / 70px` | `40px / 41px` | Japanese serif, weight 400 |
| First product headline | `70px / 70px` | `36px / 37px` | Mobile text is arranged over three lines |
| Main benefit statements | `50px / 52px` | `30px / 30px` | Desktop examples use `-2px` tracking |
| Technical chapter numeral | `105px / 105px` | `68px / 68px` | Tracking `-5.25px` desktop, `-3.5px` mobile |
| Technical chapter Japanese name | `60px / 60px` | `36px / 37.8px` | Regular Japanese serif |
| Technical chapter English annotation | `12px / 18px` | `12px / 18px` | Inter, weight 300 |
| Technical detail title | Usually `30px / 31.5px` | Usually `28px / 28px` | The first carbon title is `26px / 31.5px` on mobile |
| Large English section title | `92.8px`, with section-specific leading | `42px`, often `33.6px` leading | Desktop Product uses 90px leading; other sections differ |
| Product-reprise English title | `64px / 64px` | `42px / 31.2px` | Distinct from the first Product title |
| Main reading paragraph | `16px / 28.8px` | `16px / 28.8px` | Reading size is preserved on mobile |
| Introduction paragraph | `18px / 32.4px` | `18px / 32.4px` | Mobile has additional horizontal inset |
| Interview question | `22px / 23.1px` | `22px / 23.1px` | Sans-serif, weight 400 |
| Interview answer | `14px / 25.2px` | `14px / 25.2px` | Sans-serif, weight 400 |
| Technical item code | `16px / 16.8px` | `16px / 16.8px` | Parenthesized notation such as `( 03-01 )` |
| Inline LINE label | `16px / 28.8px` | `16px / 28.8px` | Weight 700 |
| Inline coupon copy | `13px / 19.5px` | `13px / 19.5px` | Weight 700 |
| Sampled primary menu link | `18px / 23.4px` | `26px / 36.4px` | Offscreen navigation measurements, not a verified open menu |

**Opening slogan caveat:** the sampled `NO`, `OLD`, and `GOLF.` paragraph wrappers report an inherited `16px` font size, which does not explain their visible glyph scale. Their combined measured bounds are approximately `244.64 × 195.52px` on desktop and `152.58 × 130.78px` on mobile. Use those bounds as composition references. Any plain-text font size used to approximate the slogan is a recommendation, not a recovered source value.

## Tokens — Spacing & Shapes

**Base system:** no universal spacing unit was established. The evidence contains deliberate component-specific values rather than a consistent four- or eight-pixel grid.

**Density:** broad section intervals and image fields surround compact reading columns. Small captions and utility labels sit close to their associated heading or control.

### Spacing Scale

| Use | Measured value | Interpretation |
| --- | --- | --- |
| Common mobile side gutter | `20px` | Produces a 350px content width at 390px |
| Mobile introduction paragraph inset | `30px` per side within its box | Produces a calculated 290px reading width |
| Desktop product paragraph gap | `40px` | Between the sampled explanatory paragraphs |
| Mobile product paragraph gap | Approximately `28.8px` | One body-text line height |
| Technical title-to-body gap | `50px` desktop, `45px` mobile | Derived from adjacent element bounds |
| Mobile introduction title-to-paragraph gap | `90px` | Maintains an unusually spacious opening to the prose |
| Introduction section padding | `354px 0 295px` desktop; `100px 0` mobile | Measured on the section; child positioning may alter apparent spacing |
| First Product top padding | `288px` desktop; `120px` mobile | Large chapter transition |
| Technical section top padding | `185px` desktop; `122px` mobile | Applies to the containing technical section |
| Interview section padding | `304px 0 200px` desktop; `98px 0 100px` mobile | Long-form editorial breathing room |

Do not reproduce document coordinates as fixed section heights. Content wrapping, image ratios, and loading can change the overall page length.

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Inline LINE button | `0` | Measured |
| Menu square | Square corners | Visible in both viewports |
| Photographs | Square corners | Visible in supplied captures |
| Floating LINE control | Circle | Visible; approximately 130px desktop and 80px mobile diameter |
| Main editorial regions | Unboxed | Visible captures show no general rounded-card system |

A rounded ancillary widget button occurs in the DOM sample, but it is not visible as a core component in the supplied captures. It should not define the site's shape language.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Opening section | `1440 × 1000px` | `390 × 844px` | Measured |
| Opening split | Two approximately 720px-wide halves | Two approximately 422px-high halves | Visual structure, calculated from equal division |
| Menu control | `90 × 90px` | `60 × 60px` | Measured |
| Menu padding | `39px 32px` | `24px 17px` | Measured; both leave a 26 × 12px inner area |
| Common content span | `1240px`, starting at x=100 | `350px`, starting at x=20 | Measured recurring bounds |
| Introduction paragraph | `420px` wide at x=680 | 350px outer box; 290px usable width | Measured and calculated |
| Technical explanation | `350px` wide, usually at x=990 | `350px` wide at x=20 | Measured |
| Interview reading column | `370px` wide | `350px` wide | Measured |
| Inline LINE link | `224 × 60.8px` | `350 × 60.8px` | Measured, rounded |
| Header logo artwork | Approximately `114 × 28px` | Approximately `93 × 22px` | Visual estimate; not the header element's box |
| Footer photograph | Approximately `265 × 265px` | Approximately `210 × 210px` | Visual estimate |
| Document height | `24,501.81px` | `29,051.59px` | Measured root-element height |

The source root gutter variable is `4rem` on desktop and `1.25rem` on mobile. The principal desktop editorial content nevertheless begins at x=100, while the opening annotation begins at x=64. These are distinct alignments; a single global desktop gutter does not reproduce the page.

## Components

### Brand Header and Menu Trigger

**Role:** identify the brand while leaving the photographic opening largely unobstructed.

The black NOOG mark sits at the upper left. Its visible position is approximately x=64, y=66 on desktop and x=20, y=30 on mobile. The header element itself measures `243 × 90px` on desktop and `133 × 60px` on mobile; those are not logo-artwork dimensions.

A muted brown square occupies the top-right corner: `90px` on desktop and `60px` on mobile. Two thin, unequal white horizontal strokes create the menu symbol. The control retains the same corner position in the supplied scrolled captures, supporting a persistent viewport-control interpretation.

The measured button background is transparent, so its visible brown may come from a nested or decorative layer. A direct background fill is a reasonable adaptation. The open menu, close icon, focus behavior, and dismissal behavior were not exercised.

### Opening Photographic Composition

**Role:** introduce the brand through equipment, people, and material rather than a conventional explanatory headline block.

The opening occupies exactly one inspected viewport. Desktop photography is divided at the horizontal midpoint of the page width. The supplied desktop frame shows manufacturing imagery on the left and a seated, formally dressed man holding a club on the right.

The mobile composition changes to two stacked fields. Its capture contains a standing golfer in the upper field and a seated portrait with an enlarged club head in the lower field, with visible image overlap. The supplied evidence does not establish whether the media are videos, timed image layers, or another implementation.

The three-line `NO / OLD / GOLF.` slogan sits across the dividing seam. Its desktop wrapper begins near x=612.68 and y=402.24; the combined composition is centered vertically and approximately 15px right of the viewport center. On mobile it begins near x=118.71 and y=356.61 and is horizontally centered. White and subdued gray letter groups connect the phrase visually to the NOOG identity.

The small Japanese reading label `( ノーグ )` anchors the lower-left corner: x=64 with a 70px bottom clearance on desktop, and x=20 with a 30px bottom clearance on mobile.

For a static implementation, choose one intentional media state with readable lettering. Reproducing every translucent overlap in the captured frame would not establish the original sequence.

### Introduction / Brand Manifesto

**Role:** move from photographic identity into the brand's viewpoint.

The heading `ゴルフをアップデートする。` uses the largest regular Japanese serif scale: `70px` desktop and `40px` mobile. Desktop text blocks are offset toward the center and right, leaving substantial empty space on the left. The introduction paragraph occupies a 420px column at x=680.

On mobile the heading aligns to the 20px page gutter. The paragraph's outer box remains 350px wide but has 30px internal padding on both sides. Its actual text therefore sits between x=50 and x=340. The `18px / 32.4px` reading size remains unchanged. Preserve this inset as a deliberate editorial variation rather than forcing every paragraph onto one edge.

### Product Presentation and Purchase Cluster

**Role:** explain the irons and provide a route to purchase.

The first Product section combines an English section label, a Japanese parenthetical label, a large serif benefit statement, explanatory paragraphs, and purchase information. Desktop English heading bounds are tall and narrow at the right side, consistent with a vertical display treatment. Mobile uses a horizontal `42px` heading at x=20.

The explanatory desktop paragraphs are 360px wide and use white computed text. On mobile they become black text in a 350px column. The mobile layout therefore changes the copy's presentation context as well as its size and position. The supplied captures do not show the complete painted background of this section.

The purchase cluster contains the observed `¥214,800` price, tax notation, five-club set information, an inline product link, a coupon message, and a rectangular green LINE link. Price and offer details describe the captured page and should be treated as editable commerce content.

The LINE link measures `224 × 60.8px` on desktop and expands to `350 × 60.8px` on mobile. It uses square corners, `15px 19px` padding, white bold text, and the measured `#00B900` fill. The destination recorded for the purchase link is `/products/one-length-irons`; the checkout experience was not inspected.

### Three-Part Feature Summary

**Role:** preview the technical argument before the detailed chapters.

Each repeated group contains:

1. A heavy English-style numeral: `01`, `02`, or `03`.
2. A small Inter annotation: `One Length`, `Forged`, or `Carbon Shafts`.
3. A Japanese serif feature name.
4. A short sans-serif benefit description.

Desktop groups are distributed horizontally. The sampled text boxes start at x=221, 536, and 851. On mobile they form a vertical sequence, with 265px-wide text boxes beginning at x=57 and repeated numeral positions 228px apart.

The summary numeral scales from `50px` to approximately `36.3px`; the Japanese label scales from `40px` to approximately `29px`. These measurements differ from the much larger chapter headings below. The DOM measurements alone do not establish enclosing card borders or backgrounds.

### Technical Chapter Heading and Detail Row

**Role:** turn product features into an indexed editorial explanation.

The page contains five One Length items, five Forged items including the photographic closing item, and three Carbon Shafts items. Chapter headings pair a `105px` numeral with a `12px` English annotation and a `60px` Japanese name on desktop. Mobile uses `68px`, `12px`, and `36px` respectively.

In the desktop carbon capture, the composition has four zones:

- Chapter identity at the left, beginning around x=100.
- Parenthesized item code near x=450.
- Product photograph beginning around x=560, approximately 390px wide by visual estimate.
- A 350px explanation column beginning at x=990.

The code, image, and title share a strong upper alignment. The body starts 50px below the title's box. A related first-chapter arrangement is shifted approximately 15px right, so these coordinates describe a recurring composition rather than a universal fixed grid.

Mobile text follows a clear sequence: item code, serif title, then paragraph. The code and title are separated by 20px; the paragraph begins 45px below the title. All three use the 350px content span. Mobile middle-section imagery was not supplied as screenshots, so its exact crop and placement remain unverified.

Use parenthesized codes as navigation through the argument, not as colorful badges. A new implementation should use semantic headings for the chapter and item titles even where sampled source elements are paragraphs.

### Outdoor Material-Aging Interlude

**Role:** interrupt the technical explanation with a physical, outdoor view of the product.

The desktop middle capture shows a gloved hand extending from the left and holding several dark irons diagonally across blue sky and distant mountains. White explanatory text sits in the lower-right part of the photograph.

That paragraph is measured at x=883 with a width of 457px and `16px / 28.8px` type. The corresponding item is `( 02-05 )`, describing the appearance of the clubs as their finish changes with use. The carbon chapter begins on a clean white field below it.

The screenshot shows only part of this photographic section. Its visible 557px portion is not evidence that the complete banner has a 557px fixed height. Preserve the left-side subject and right-side reading area through art direction and responsive cropping.

### Craftsmanship Section

**Role:** connect the product story to manufacturing and handwork.

This section has a measured `#1B1B1B` background with white type. Desktop English heading bounds form a tall column toward the left, while the Japanese headline and paragraph are offset farther right. The `Craftman / Ship` text uses the source's displayed wording.

The desktop Japanese headline is `70px / 73.5px`; the paragraph is `16px / 28.8px` in a 400px column at x=700. On mobile, the English title becomes a horizontal two-line block at `42px`. The Japanese statement becomes `40px / 42px`, and the reading paragraph increases to `18px / 32.4px` in a 290px column at x=50.

The page names 共栄ゴルフ工業株式会社 as a product co-development and manufacturing partner. The long section geometry reserves considerable space beyond the text, but the supplied screenshots do not establish every manufacturing image or its placement.

### Interview Article

**Role:** add a detailed human account of the product's development.

The section presents a serif opening quotation, company name, Japanese personal name, small Romanized name, and five question-and-answer passages. The named interviewee is 坂本 敬祐, with the displayed Romanization `Keisuke Sakamoto`.

Desktop reading columns are 370px wide. Earlier passages are positioned at x=800; later passages shift to x=270. Mobile brings the text into the standard 350px column at x=20. The complete section grows from approximately 3010px to 4477px in the supplied measurements.

Questions use `22px / 23.1px` sans-serif text, while answers use `14px / 25.2px`. The lead quotation uses a regular Japanese serif. All answers are present in the rendered text; an accordion interaction was not evidenced. Preserve the long-read character and varied placement rather than compressing the section into testimonial cards.

### Product Reprise, Social Section, and Story

**Role:** repeat the purchase opportunity after the supporting narrative, then broaden the brand context.

The second Product section uses the measured cool-gray `#CACFD9` surface. Its English title is `64px` desktop and `42px` mobile. The serif product statement changes from white computed text on desktop to black on mobile. The price, product link, coupon copy, and rectangular LINE control repeat.

The social section introduces another large Japanese statement, descriptive copy, and a `NOOG Official Instagram` link. The DOM also records six additional links to the same account. Their exact visual arrangement is not established by the supplied captures.

The Story text explains the brand name and concludes with the `NO, OLD GOLF` idea. Its full text is evidenced, but its detailed typography and media layout are outside the supplied element sample. Extend the documented type hierarchy without presenting an invented Story composition as an observation.

### Floating LINE Control

**Role:** maintain a prominent friend-registration route while the visitor reads.

The visible control consists of a short coupon message above a bright green circle, a small club image, a two-line Japanese label, and a white arrow. Its approximate desktop diameter is 130px, positioned 40px from the right and bottom in the middle capture. On mobile it is approximately 80px wide, 20px from the right and 30px from the bottom in the opening capture.

The circle overlays the editorial content and is visually much louder than the surrounding page. Its fill appears brighter than the measured inline LINE links. Keep the circular and rectangular variants as separate component treatments.

Visibility differs between the supplied captures: the circle is visible in the desktop middle and mobile opening, but absent from the supplied footer views and desktop opening. A timing rule, scroll threshold, or footer-detection mechanism cannot be established from these states.

### Footer and Page-Top Affordances

**Role:** finish the narrative with navigation and a final brand impression.

The desktop footer places a square course photograph near the horizontal center, a left-aligned navigation list, small copyright text at the lower left, and an upward arrow at the lower right. An enormous black NOOG wordmark spans the bottom portion of the charcoal field, with portions cropped by its edges.

The mobile footer keeps the square photograph centered, moves the navigation to a 20px left inset, and reorients the oversized wordmark into a vertical strip along the right edge. The photograph shows a club head in this capture, whereas the desktop capture shows a golfer on the course. The selection mechanism is unknown.

Visible footer navigation includes `Top`, `Product`, `About`, three indented technical chapters, `Craftmanship`, `Interview`, `SNS`, `Story`, and `公式オンラインストア`. Repeated strings in the DOM are not two visible navigation rows; their exact layering or interaction purpose was not established.

A separate white strip below the charcoal footer contains a small right-aligned `PAGE / TOP` label. Its visible height is approximately 94px on desktop and 82px on mobile. Both this label and the parenthesized upward arrow are page-top affordances; their click behavior was not tested.

## Tokens — Motion & Interaction

| Treatment | Evidence | Implementation implication |
| --- | --- | --- |
| Header entrance | Computed animation: `0.5s 3.5s forwards headerFadeIn` on both viewports | A named entrance animation is evidenced; its keyframes were not supplied |
| Link transitions | Many sampled links report `0.3s` | Duration is evidenced; the changing properties and visual endpoints are unverified |
| Opening media overlap | Multiple subjects overlap in the mobile frame; desktop has a pale composite appearance | Layered or changing media are suggested, but sequence, duration, easing, and media format are unknown |
| Section navigation | Same-page fragment destinations are present | Section targets are known; smooth scrolling, snapping, and focus movement were not tested |
| Menu panel | Navigation content is positioned at or beyond the right viewport edge | An offscreen arrangement is evidenced; an opened state and its animation were not captured |
| Floating LINE link | Visible link and destination are supplied | Navigation target is known; activation was not exercised |
| Footer photograph variation | Different subjects appear across desktop/mobile footer captures | Do not assume an autoplay slideshow or hover swap |
| Page-top controls | Visible arrow and `PAGE TOP` text | Intended affordance is apparent; activation and scroll duration are unverified |

The observation process allowed initial rendering and finite-animation settling, traversed intermediate scroll positions, and temporarily paused perpetual animations during readiness checks before resuming them. This improves capture stability but does not establish complete media cycles, interaction states, or all delayed content.

Most sampled paragraphs report no animation. Repeated `transition: all` entries without a supplied duration do not establish visible motion. No particular animation library, parallax system, custom cursor, or scroll-smoothing engine can be identified from this evidence.

**Recommended motion approach:** begin with a fully readable static composition. Use short, restrained feedback for links and controls. If reproducing the original media behavior is required, obtain a direct sequence recording before selecting timings. Provide reduced-motion behavior and avoid making content availability depend on an entrance delay.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main reading canvas | White with black text | Technical explanations and long-form editorial content |
| Photographic field | Edge-to-edge imagery, sometimes with reversed text | Scale, atmosphere, and product context |
| Product reprise | Solid cool gray | Distinguishes the repeated commercial section |
| Craftsmanship field | Measured charcoal with white type | Material and manufacturing emphasis |
| Footer | Visually charcoal with black oversized artwork | Strong closing identity without a bright color change |
| Menu trigger | Muted brown square | Persistent navigation marker |
| Inline conversion control | Flat green rectangle | Friend-registration action within purchase information |
| Floating conversion control | Bright green circle | Persistent action emphasis in selected captured states |

The core captured composition does not use a general shadow-elevation system. Separation comes from scale, empty space, image boundaries, and changes in field color. Root shadow variables alone are not evidence that editorial elements should become raised cards.

## Imagery

Photography carries the brand's distinctive character. The opening combines formal studio portraiture, golf clothing, enlarged equipment, and industrial material. The outdoor interlude adds bright sky and distant landscape while retaining the dark clubs as its primary subject.

Product imagery emphasizes the club's surface, machining, shaft, and large identification details. In the mobile opening, the enlarged club head becomes a compositional object across the lower image field. In the desktop technical capture, a close-up of the carbon shaft sits beside the explanatory text.

Keep photography sharp and naturally rendered. Preserve the contrast between cool studio backgrounds, dark equipment, warm manufacturing light, and outdoor blue/green. The captured introductory haze should not become a filter applied to all images.

### Observed Asset References

No original hero, product-photo, footer-photo, or logo asset URL was supplied. The following table identifies visible subjects and locations, not downloadable filenames.

| Visible subject | Evidence location | Design role |
| --- | --- | --- |
| Manufacturing scene and seated portrait | Desktop opening capture | Opposed photographic fields |
| Standing golfer, seated portrait, enlarged club head | Mobile opening capture | Vertically rearranged, overlapping opening imagery |
| Gloved hand holding several irons | Desktop middle capture | Full-width outdoor interlude |
| Dark carbon-shaft close-up | Lower part of desktop middle capture | Technical detail illustration |
| Golfer on a course | Desktop footer capture | Small photographic counterpoint to the huge wordmark |
| Club face against a pale background | Mobile footer capture | Square product image above navigation |
| NOOG wordmark | Opening and footer captures | Small identity mark and oversized decorative artwork |
| Small club image within green control | Visible floating LINE control | Product-specific detail within the action |

Use authorized photographs and wordmark artwork when available. A generic golf stock image will not reproduce the relationship between fashion styling, black equipment, and industrial craft. The exact crop must be selected separately for the horizontal desktop panels and vertical mobile arrangement.

## Layout & Responsive Behavior

This is a long scrolling document. The measured heights are approximately 24.5k CSS pixels on desktop and 29.1k on mobile. The menu and floating action behave visually as viewport-level controls in the supplied states, while the narrative continues through normal page sections.

Desktop composition depends on offset alignments. A recurring 1240px span begins at x=100, but the introduction paragraph, chapter codes, technical illustrations, and interview columns use different internal starting positions. Large blank areas are part of the editorial hierarchy.

Mobile changes several relationships rather than shrinking the desktop page uniformly:

| Relationship | Desktop observation | Mobile observation |
| --- | --- | --- |
| Hero fields | Side by side | Stacked vertically |
| Slogan | Across the central vertical seam | Across the central horizontal seam |
| Menu | 90px square | 60px square |
| Standard reading column | Often 350–420px, deliberately offset | Usually 350px at x=20 |
| Introduction reading column | 420px | 290px usable width after internal padding |
| Large English section headings | Several have tall, narrow bounds | Horizontal 42px headings |
| Feature summary | Three horizontal groups | Three vertical groups |
| Technical title and body | Beside the image and item code | Code, title, and paragraph share the left edge |
| Product explanatory copy | White computed text in the first desktop section | Black computed text on mobile |
| Inline LINE link | 224px wide | 350px wide |
| Footer wordmark | Oversized horizontal artwork | Oversized vertical strip at the right |

The desktop technical explanation width and mobile content width both measure 350px, which helps preserve readable line lengths. Mobile therefore retains the `16px / 28.8px` body scale while reducing headline sizes and rearranging the surrounding media.

No tablet screenshot or exact media-query source was supplied. The Quick Start's `64rem` breakpoint is a recommendation. Intermediate widths should be tested for reading-column fit, image crops, chapter-grid compression, and floating-control collisions.

## Do’s and Don’ts

### Do

- Preserve the shift from large photographic fields to carefully indexed technical explanations.
- Pair regular Japanese serif headlines with heavy Copperplate-style display lettering and numerals.
- Keep main reading text around the measured `16px / 28.8px` rhythm.
- Use the measured white, black, charcoal, and product-gray surfaces as the foundation.
- Maintain generous desktop offsets and deliberate mobile reading insets.
- Retain the chapter number, English annotation, Japanese name, and parenthesized item-code hierarchy.
- Art-direct the hero separately for horizontal desktop and stacked mobile fields.
- Keep the menu square and the main photographs sharply cornered.
- Treat LINE green as a specific conversion color.
- Preserve the footer's contrast between a small square photograph and a very large cropped wordmark.

### Don’t

- Don't turn every explanation into a rounded feature card.
- Don't replace the Japanese serif headlines with uniformly bold sans-serif text.
- Don't infer visible slogan size from its wrapper's inherited `16px` declaration.
- Don't apply the pale opening capture's appearance as a global image filter.
- Don't use the footer wordmark as a substitute for readable navigation.
- Don't assume the mobile page is a proportional miniature of desktop.
- Don't carry white desktop product text into a light mobile reading region without checking its context.
- Don't treat vendor color and shadow variables as the visible brand system.
- Don't invent hero timings, menu animations, parallax, or image-carousel behavior.
- Don't hardcode the captured price and coupon as permanent design tokens.

## Recommended Implementation Additions

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

- Give the menu button an accessible name, `aria-expanded`, and a relationship to the controlled navigation. Manage focus and Escape dismissal if it opens an overlay.
- Use real headings for chapter and item titles, with decorative duplicated text excluded from the accessibility tree.
- Provide one readable accessible representation of the hero slogan, regardless of how its visible letters are split into layers.
- Add visible keyboard focus treatment that works on white, charcoal, photography, and green.
- Contrast-test both green controls. For normal-size white text, a darker alternative such as `#007A00` is a recommended accessible variant, not the source color.
- Give the floating action enough clearance to avoid covering headings, links, and reading text at narrow widths or increased text zoom.
- Keep essential content visible without animation and respect reduced-motion preferences. If moving media are used, provide an appropriate pause mechanism and static fallback.
- Use responsive image sources and explicit intrinsic dimensions. Prioritize the opening assets and defer distant media without allowing layout shifts.
- Preserve useful fragment navigation and focus behavior across the long document. Make both page-top affordances keyboard-operable if both are retained.
- Keep price, offer, destination links, and product availability in editable content rather than embedding them in decorative assets.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#FFFFFF`.
- Primary lettering: `#000000`.
- Craftsmanship field: measured `#1B1B1B`; use the same as a footer approximation.
- Product reprise: measured `#CACFD9`.
- Inline LINE action: measured `#00B900`.
- Floating circle: approximately `#00C800`; exact source fill unverified.
- Menu square: approximately `#A48777`; a visual estimate.
- Subdued hero lettering: approximately `#B6B6B6`; compositing is unverified.

### Overall Prompt

“Create a long Japanese golf-brand and product-story page inspired by the supplied current NOOG evidence. Use white and charcoal editorial fields, cool-gray product staging, sharp-cornered photography, regular Japanese serif headlines, heavy Copperplate-style English titles and chapter numerals, Inter annotations, and Noto Sans reading text. Begin with a viewport-height photographic diptych and a centered three-line NO OLD GOLF. slogan crossing the seam. On mobile, stack the two photographic fields and keep the slogan across their horizontal division. Follow with offset reading columns, numbered technical chapters, a full-width outdoor photograph, craftsmanship content, a substantial interview, and repeated purchase information. Use a muted brown square menu and distinct green LINE actions. Finish with a square photograph, left-aligned navigation, and a dramatically cropped black wordmark on charcoal. Keep motion optional until its sequence is verified.”

### Example Component Prompts

1. **Hero:** “Build a 1440 × 1000 desktop composition with two equal photographic fields, a small black wordmark at upper left, a 90px muted brown menu square at upper right, and a roughly 245 × 196px three-line slogan across the central seam. At 390 × 844, stack the fields, use a 60px menu square, and reduce the slogan composition to roughly 153 × 131px. Use one intentional static media state.”
2. **Technical chapter:** “Create an open white editorial section headed by a 105px black chapter number, a 12px Inter English annotation, and a 60px Japanese serif title. Place parenthesized item codes, square-cornered product photography, and 350px reading columns across the desktop layout. Use 30px serif item titles and 16px/1.8 body text. On mobile, reduce the numeral to 68px and align the code, title, and body to a 20px gutter.”
3. **Outdoor interlude:** “Use a wide photograph with a gloved arm and dark irons extending diagonally from the left, blue sky, and distant landscape. Place a 457px white reading column toward the lower right on desktop. Choose a mobile crop that retains both the clubs and a legible text region; do not infer a fixed banner height from a cropped screenshot.”
4. **Purchase cluster:** “Create a compact price-and-details block with a product link, a centered coupon message, and a square-cornered green LINE link. The green link is approximately 224 × 61px on desktop and 350 × 61px on a 390px phone. Use 16px bold action text, 15px vertical padding, and a separate circular floating variant.”
5. **Footer:** “Create a charcoal footer with a centered square photograph, white left-aligned navigation, indented technical chapter links, small copyright text, and an upward arrow. Put an oversized black wordmark behind the content, spanning the bottom on desktop and forming a cropped vertical strip at the right on mobile. Keep navigation above the decorative artwork.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. It uses measured colors and type stacks, explicitly estimated decorative colors, and recommended responsive rules. It does not bundle fonts or images, reproduce the original media sequence, or implement a menu controller.

Supply authorized logo and photographic assets. The plain-text slogan sizes approximate the measured composition; exact wordmark and slogan outlines require appropriate artwork or verified glyph styling. The footer rotation is an implementation choice for reproducing the observed orientation.

Suggested structure: `.chapter` contains `.chapter-heading` and `.chapter-rows`; each `.feature-row` contains `.feature-code`, `.feature-copy`, and `.feature-media`. The scaffold places feature media after the text on mobile as a recommended arrangement because the original mobile media placement was not visually supplied.

```css
:root {
  /* Measured core colors */
  --noog-paper: #ffffff;
  --noog-ink: #000000;
  --noog-charcoal: #1b1b1b;
  --noog-product: #cacfd9;
  --noog-secondary: #252525;
  --noog-line: #00b900;

  /* Visual estimates */
  --noog-menu: #a48777;
  --noog-quiet: #b6b6b6;
  --noog-float-green: #00c800;

  /* Computed family stacks; font files are not bundled */
  --noog-sans: 'Noto Sans', sans-serif;
  --noog-serif: YuMincho, 'Noto Serif JP', serif;
  --noog-display: copperplate, sans-serif;
  --noog-latin: Inter, sans-serif;

  /* Mobile values and implementation aliases */
  --noog-gutter: 20px;
  --noog-menu-size: 60px;
  --noog-chapter-size: 68px;
  --noog-section-space: 100px;
  --noog-lockup-width: 152.58px;
  --noog-float-size: 80px;
  --noog-footer-photo: 210px;
  --noog-link-duration: 300ms;
}

body {
  margin: 0;
}

.noog-page,
.noog-page *,
.noog-page *::before,
.noog-page *::after {
  box-sizing: border-box;
}

.noog-page {
  color: var(--noog-ink);
  background: var(--noog-paper);
  font: 400 16px/1.8 var(--noog-sans);
}

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

.noog-container {
  width: min(1240px, calc(100% - var(--noog-gutter) * 2));
  margin-inline: auto;
}

.noog-section {
  padding-block: var(--noog-section-space);
}

.noog-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero-media {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hero-media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.noog-brand {
  position: absolute;
  z-index: 3;
  top: 30px;
  left: 20px;
  width: 93px;
}

.hero-slogan {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--noog-lockup-width);
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--noog-paper);
  font: 700 48px/0.9 var(--noog-display);
}

.hero-slogan > span {
  display: block;
}

.hero-slogan .quiet {
  color: var(--noog-quiet);
}

.hero-caption {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 30px;
  margin: 0;
  color: var(--noog-paper);
  font-size: 14px;
  line-height: 1.05;
}

.noog-menu {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: var(--noog-menu-size);
  height: var(--noog-menu-size);
  padding: calc((var(--noog-menu-size) - 12px) / 2)
    calc((var(--noog-menu-size) - 26px) / 2);
  border: 0;
  border-radius: 0;
  background: var(--noog-menu);
  cursor: pointer;
}

.noog-menu::before,
.noog-menu::after {
  content: '';
  display: block;
  flex: 0 0 2px;
  width: 26px;
  background: var(--noog-paper);
}

.noog-menu::after {
  width: 13px;
}

.english-title {
  margin: 0;
  font: 700 42px/0.8 var(--noog-display);
  letter-spacing: 0.02em;
}

.japanese-title {
  margin: 0;
  font: 400 40px/1.025 var(--noog-serif);
}

.intro-copy {
  width: calc(100% - 60px);
  max-width: 420px;
  margin: 90px auto 0;
  font-size: 18px;
  line-height: 1.8;
}

.chapter {
  display: grid;
  gap: 58px;
}

.chapter-number {
  margin: 0 0 0 -4px;
  font: 700 var(--noog-chapter-size)/1 var(--noog-display);
  letter-spacing: -3.5px;
}

.chapter-annotation {
  margin: 0;
  font: 300 12px/18px var(--noog-latin);
}

.chapter-title {
  margin: 0;
  font: 400 36px/1.05 var(--noog-serif);
}

.chapter-rows {
  display: grid;
  gap: 80px;
  min-width: 0;
}

.feature-row {
  display: grid;
  grid-template-areas: 'code' 'copy' 'image';
  gap: 20px;
  min-width: 0;
}

.feature-code {
  grid-area: code;
  margin: 0;
  font-size: 16px;
  line-height: 1.05;
}

.feature-copy {
  grid-area: copy;
  min-width: 0;
}

.feature-copy h3 {
  margin: 0;
  font: 400 28px/1 var(--noog-serif);
}

.feature-copy p {
  margin: 45px 0 0;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.feature-media {
  grid-area: image;
  min-width: 0;
  margin: 30px 0 0;
}

.feature-media img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.craftsmanship {
  color: var(--noog-paper);
  background: var(--noog-charcoal);
}

.product-reprise {
  background: var(--noog-product);
}

.purchase-cluster {
  display: grid;
  gap: 16px;
  width: min(100%, 350px);
  margin-inline-start: auto;
}

.purchase-details {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.coupon-copy {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.line-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 15px 19px;
  border-radius: 0;
  color: var(--noog-paper);
  background: var(--noog-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  text-decoration: none;
}

/* Recommended higher-contrast alternative */
.line-cta--accessible {
  background: #007a00;
}

.line-float {
  position: fixed;
  z-index: 20;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: var(--noog-float-size);
}

.line-float > p {
  margin: 0 0 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.line-float > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--noog-paper);
  background: var(--noog-float-green);
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.noog-footer {
  position: relative;
  isolation: isolate;
  min-height: 788px;
  overflow: hidden;
  padding: 80px 20px 90px;
  color: var(--noog-paper);
  background: var(--noog-charcoal);
}

.footer-photo {
  width: var(--noog-footer-photo);
  aspect-ratio: 1;
  margin: 0 auto 70px;
  object-fit: cover;
}

/* Apply to transparent, black wordmark artwork */
.footer-wordmark {
  position: absolute;
  z-index: -1;
  top: 70px;
  left: 100%;
  width: 700px;
  max-width: none !important;
  transform: rotate(90deg);
  transform-origin: 0 0;
  pointer-events: none;
}

.footer-nav {
  display: grid;
  gap: 6px;
  width: fit-content;
  font: 300 20px/1.25 var(--noog-display);
}

.footer-nav a {
  color: inherit;
  text-decoration: none;
}

.footer-subnav {
  display: grid;
  gap: 4px;
  margin: 8px 0 8px 18px;
  font-size: 16px;
}

.footer-copyright {
  position: absolute;
  left: 20px;
  bottom: 30px;
  margin: 0;
  font: 400 12px/1.4 var(--noog-sans);
}

.footer-up {
  position: absolute;
  right: 20px;
  bottom: 30px;
  color: inherit;
}

.page-top-strip {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 82px;
  padding-top: 20px;
  background: var(--noog-paper);
  color: var(--noog-ink);
  font: 400 16px/1 serif;
  text-align: center;
}

/* Recommended focus and hover feedback */
.noog-page :focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #fff;
}

.noog-page a {
  transition: opacity var(--noog-link-duration);
}

@media (hover: hover) {
  .noog-page a:hover {
    opacity: 0.8;
  }
}

/* Recommended breakpoint; the original threshold is unknown */
@media (min-width: 64rem) {
  :root {
    --noog-gutter: clamp(40px, 6.944vw, 100px);
    --noog-menu-size: 90px;
    --noog-chapter-size: 105px;
    --noog-lockup-width: 244.64px;
    --noog-float-size: 130px;
    --noog-footer-photo: 265px;
  }

  .noog-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .noog-brand {
    top: 66px;
    left: 64px;
    width: 114px;
  }

  .hero-slogan {
    left: calc(50% + 15px);
    font-size: 74px;
    line-height: 0.88;
  }

  .hero-caption {
    left: 64px;
    bottom: 70px;
    font-size: 16px;
  }

  .japanese-title {
    font-size: 70px;
    line-height: 1;
  }

  .intro-copy {
    width: 420px;
    margin-inline: auto 19.35%;
  }

  .chapter {
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
    gap: clamp(40px, 6.944vw, 100px);
  }

  .chapter-number {
    margin-left: 0;
    letter-spacing: -5.25px;
  }

  .chapter-annotation,
  .chapter-title {
    margin-left: 10px;
  }

  .chapter-title {
    font-size: 60px;
    line-height: 1;
  }

  .chapter-rows {
    padding-top: 227px;
  }

  .feature-row {
    grid-template-areas: 'code image copy';
    grid-template-columns: 70px minmax(0, 1.114286fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  .feature-copy h3 {
    font-size: 30px;
    line-height: 1.05;
  }

  .feature-copy p {
    margin-top: 50px;
  }

  .feature-media {
    margin: 0;
  }

  .purchase-cluster {
    width: 224px;
  }

  .line-float {
    right: 40px;
    bottom: 40px;
  }

  .line-float > p {
    font-size: 12px;
  }

  .line-float > a {
    font-size: 14px;
  }

  .noog-footer {
    min-height: 794px;
    padding: 236px 50px 40px;
  }

  .footer-photo {
    margin-bottom: 0;
  }

  .footer-wordmark {
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: none;
  }

  .footer-nav {
    position: absolute;
    left: 50px;
    bottom: 112px;
  }

  .footer-copyright {
    left: 50px;
    bottom: 40px;
  }

  .footer-up {
    right: 60px;
    bottom: 40px;
  }

  .page-top-strip {
    min-height: 94px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .noog-page *,
  .noog-page *::before,
  .noog-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The scaffold intentionally leaves the navigation controller, floating-control visibility policy, actual media changes, and chapter image selection to application logic. Its opacity hover treatment is a recommended addition; only the original links' transition duration was measured.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-noog-paper: var(--noog-paper);
  --color-noog-ink: var(--noog-ink);
  --color-noog-charcoal: var(--noog-charcoal);
  --color-noog-product: var(--noog-product);
  --color-noog-menu: var(--noog-menu);
  --color-noog-line: var(--noog-line);

  --font-noog-sans: var(--noog-sans);
  --font-noog-serif: var(--noog-serif);
  --font-noog-display: var(--noog-display);
  --font-noog-latin: var(--noog-latin);

  --text-noog-body: 16px;
  --text-noog-body--line-height: 1.8;
  --text-noog-caption: 12px;
  --text-noog-caption--line-height: 1.5;
  --text-noog-chapter: var(--noog-chapter-size);
  --text-noog-chapter--line-height: 1;

  --spacing-noog-gutter: var(--noog-gutter);
  --spacing-noog-menu: var(--noog-menu-size);
  --radius-noog-flat: 0px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [NOOG | ノーグ](https://noog.jp/pages/lp). The supplied record reports the same original/final URL and HTTP `200`.
- **Recorded retrieval:** `2026-09-16T20:22:48.047Z`, corresponding to September 17, 2026, in Japan. Individual screenshot shutter times were not supplied.
- **Desktop evidence:** `1440 × 1000` viewport; opening, middle technical transition, and footer captures; rendered text, links, computed properties, and sampled element rectangles. Measured document height: `24,501.8125px`.
- **Mobile evidence:** `390 × 844` viewport; opening and footer captures; rendered text, links, computed properties, and sampled element rectangles. Measured document height: `29,051.59375px`.
- **Navigation evidence:** original-page fragment links identify Top, Product, About, three technical chapters, craftsmanship, interview, social, and story destinations. Product, official-store, LINE, and Instagram destinations were recorded as links, without inspecting their destination experiences.
- **Interaction scope:** the supplied process observed initial rendering and traversed scroll positions. No menu opening, hover sequence, keyboard traversal, purchase flow, or page-top activation was documented.
- **Limitations:** the full stylesheet, image source URLs, animation keyframes, media timeline, tablet layout, and several painted middle-section compositions were not supplied. Computed styles establish the sampled elements, not every nested glyph, pseudo-element, or background layer. Footer dimensions and decorative colors are explicitly identified as visual estimates.

This reference describes the current page represented by the supplied inspection. The CSS and prompts translate its documented visual relationships into a reusable implementation while keeping unverified behavior separate from observed design.