# WORDS — Style Reference

> An editorial services company presented like an oversized book jacket: black lettering, white paper, fine rules, and a single fluorescent annotation.

**Website:** [words-inc.co.jp](https://words-inc.co.jp/)
**Original URL:** https://words-inc.co.jp/
**Final URL:** https://words-inc.co.jp/
**Theme:** predominantly white, with charcoal chapter and contact surfaces; no selectable theme was evidenced.
**Inspected:** October 5, 2026, at 05:50:36 JST; supplied retrieval timestamp: October 4, 2026, at 20:50:36.162 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, using three desktop captures, two mobile captures, and rendered DOM/computed-style observations covering the document. Linked detail pages and opened navigation states were not inspected.

WORDS makes typography and composition carry the identity. The opening view combines an enormous vertical wordmark at the left edge, a two-line Japanese statement, and a diagonally positioned white book mockup. The book supplies the only conspicuous bright accent: fluorescent yellow-green highlighting printed into the artwork. A small introduction near the bottom is anchored by a vertical rule and an inverted phrase.

The rest of the homepage develops this editorial language through vertical Japanese labels, numbered workflow steps, chapter links, thin illustrations, customer quotations, and a dense inline sitemap. It is a corporate information hub with explanatory and conversion content, rather than a standalone campaign page. Preserve the alternation between spacious composition and compact reading, and between horizontal paragraphs and vertical headings.

## How to Read This Reference

- **Measured** means supplied DOM geometry or computed styles. Dimensions are CSS pixels unless stated otherwise; some values are rounded for readability.
- **Observed** means visible in an original-page capture. A visual observation does not establish the underlying CSS or asset format.
- **Estimated** means a visual approximation, particularly for artwork colors, line thicknesses, and unsampled graphics. Estimated hexadecimal colors were not obtained by pixel sampling.
- **Recommended** means a reusable implementation choice, not a verified feature of the original website.
- Token names in this document are implementation aliases. The supplied custom properties did not expose a complete site-specific design-token system.
- Desktop and mobile observations are actual separate captures. Intermediate breakpoints, landscape behavior, and very short screens remain unverified.
- The reported viewports include a 15px difference from the measured root widths: 1440 versus 1425px on desktop, and 390 versus 375px on mobile. Main sections nevertheless measured 1440 and 390px. Treat the visible right-edge clipping and gutter as capture conditions, not a recommended layout technique.
- DOM evidence includes navigation content that is not visible in the closed-menu captures. Its existence and computed styles do not prove an observed open-menu appearance.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White Paper | `#ffffff` | `--color-paper` | Visually observed page canvas. Sampled root backgrounds are transparent, so this is not a measured root background declaration. White text is also explicitly measured in chapter headings. |
| Text Black | `#000000` | `--color-ink` | Measured body text, navigation, workflow copy, and footer links. |
| Warm Brand Ink | approximately `#231815` | `--color-brand` | Estimated dark brown-black in the WORDS artwork and inverted introduction phrase. Preserve the original asset color when available. |
| Charcoal | `#292929` | `--color-charcoal` | Measured closing contact-section background. The visible chapter banner has a similar dark appearance, but its exact fill was not sampled. |
| Testimonial Ground | `#f6f6f6` | `--color-soft` | Measured customer-voices section background at both viewports. |
| Reversed Link | `#f5f5f5` | `--color-on-dark` | Measured download and contact link text in the closing band. |
| Index Gray | `#c0c0c0` | `--color-index` | Measured inline sitemap category labels. A similarly pale caret is visible in the hero, but its exact color was not supplied. |
| Secondary Gray | `#868686` | `--color-secondary` | Measured navigation-region tagline; its open-menu presentation was not visually verified. |
| Fine Divider | approximately `#dddddd` | `--color-rule-soft` | Estimated pale divider between desktop workflow columns. |
| Background Wordmark | approximately `#111111` | `--color-watermark` | Estimated giant dark WORDS lettering behind the closing contact message. |
| Fluorescent Annotation | approximately `#dfff00` | `--color-highlight-art` | Estimated highlight inside the book artwork. It is not evidenced as a general interface action color. |

### Palette Behavior

White and black establish almost all reading hierarchy. Dark brown-black belongs primarily to the identity artwork, while charcoal provides a few large changes of surface. Gray separates categories and sections without introducing a colorful navigation system.

Keep the fluorescent accent attached to the editorial object. Reusing it for every link, button, or selected state would materially change the observed balance.

The supplied custom properties include blue framework/library defaults, including `--swiper-theme-color: #007aff` and a blue ring color. Their presence does not demonstrate visible blue UI, and they are not part of the observed page palette.

## Tokens — Typography

### Source Families

The supplied computed styles expose several named Japanese font families. All sampled elements report `font-weight: 400`, including families with `B` or `D` in their names. Do not replace those family choices with a blanket synthetic `700` weight.

| Computed family | Measured assignments | Implementation alias |
| --- | --- | --- |
| `TsukuGoPr5-R, sans-serif` | Base document text, workflow paragraphs, ordinary footer links | `--font-body` |
| `TsukuGoPr5-D, sans-serif` | Desktop navigation, section-heading containers, chapter-heading containers, H1 container, contact links | `--font-heading-container` |
| `TsukuGoPro-B, sans-serif` | Hero company introduction and supporting statement | `--font-intro` |
| `TsukuAOldMinPr6N-B, serif` | Introduction heading, vertical problem labels, workflow titles, solution explanations | `--font-editorial` |
| `TsukuAOldMinPr6N-R, serif` | Customer quotations | `--font-quote` |

**Important distinction:** the hero visibly has strong Mincho-style serifs, while its sampled H1 container reports `TsukuGoPr5-D, sans-serif`. Descendant text-run styles were not supplied. The same caution applies to some large chapter lettering. The exact font responsible for those visible glyphs cannot be established from the parent record alone.

For a visual adaptation, using the independently evidenced editorial serif family for the hero is a reasonable recommendation. It must not be described as a verified H1 declaration.

### Identity and Utility Lettering

The WORDS wordmark is graphic identity, with geometric lettering and an extended divider within the mark. Its font family is not established. Use an approved logo asset rather than approximating it with ordinary text.

`STEP 3` and `STEP 4` appear as narrow uppercase lettering inside dark rectangular tabs. The visible label size is approximately 18px on desktop; its family was not sampled. Small `CHAPTER` labels are visually much smaller, around 10–12px, and may run vertically beside a rule. Those sizes are estimates.

### Type Scale

| Role | Desktop | Mobile | Evidence and tracking |
| --- | --- | --- | --- |
| Hero H1 container | `96px / 105.6px` | `32px / 38.4px` | Measured; normal tracking; visible glyph-family caveat above |
| Hero introduction | `24px / 31.2px` | `16px / 25.6px` | Measured; tracking `1.44px` and `0.96px`, both `0.06em` |
| Introduction question | `24px / 31.92px` | `24px / 31.92px` | Measured editorial serif |
| Standard section heading | `32px / 52px` | `24px / 31.92px` | Measured heading containers |
| Chapter/service heading | `48px / 56px` | `24px / 28px` | Measured containers; generally two lines |
| Workflow vertical title | `24px / 28.8px` | `18px / 25.2px` | Measured editorial serif |
| Workflow paragraph | `16px / 32px` | `14px / 28px` | Measured regular sans-serif |
| Solution explanation | `24px / 40px` | `14px / 22px` | Measured editorial serif |
| Customer quotation | `18px / 37px` | `18px / 37px` | Measured regular editorial serif |
| Desktop primary navigation | `14px / 28px` | Not visible in the header | Measured; mobile navigation content exists separately |
| Closing-band supporting line | `32px / 52px` | `16px / 32px` | Measured |
| Closing-band action | `18px / 36px` | `16px / 16px` | Measured; action-box sizes differ substantially |
| Chapter index link | `24px / 24px` | `16px / 24px` | Measured; desktop tracking `2.4px`, mobile normal |
| Sitemap category label | `16px / 32px` | `16px / 32px` | Measured; pale gray |
| Sitemap link | `14px / 28px` | `12px / 20px` | Measured; mobile tracking `-0.6px` |

The base document is a conventional `16px / 24px`. This site does not require a miniature root unit or global scaling of all typography. Individual components change size and composition between viewports.

## Tokens — Spacing & Shapes

**Density:** very spacious in the hero, diagrams, and chapter navigation; compact within the sitemap and customer quotations.

**Geometry:** square surfaces, straight rules, rectangular labels, and circular arrow details. No general rounded-card or elevated-panel system is visible.

### Spacing Scale

The following values recur in measured padding, dimensions, or derived distances. They are a useful working scale, not confirmed source variables.

| Value | Evidence or use |
| --- | --- |
| `8px` | Derived gap between desktop primary-navigation link boxes |
| `12px` | Desktop navigation horizontal padding; mobile contact-link left padding |
| `16px` | Mobile footer left inset; hero introduction paragraph gap; navigation utility padding |
| `24px` | Desktop testimonial grid gaps; several action-link left insets |
| `32px` | Desktop navigation vertical padding; testimonial text inset derived from card and paragraph geometry |
| `48–56px` | Common compact action heights; mobile menu height is exactly 56px |
| `64px` | Mobile contact-section top padding and testimonial bottom padding |
| `72px` | Mobile chapter-index vertical padding; mobile contact-section bottom padding |
| `96px` | Desktop closing contact-link height |
| `144px` | Desktop contact-section bottom padding; distance from the last workflow paragraph bottom to the following banner |
| `160px` | Desktop testimonial top padding and chapter-index vertical padding |
| `180px` | Desktop contact-section top padding |

### Border Radius and Rules

| Element | Treatment | Evidence |
| --- | --- | --- |
| Sampled links and content containers | `0px` radius | Computed |
| Workflow step tab | Square dark rectangle | Screenshot |
| Hero introduction rule | Approximately 1–2px vertical stroke | Visual estimate |
| Desktop left rail | Approximately 1px stroke at x ≈ 188px | Screenshot |
| Workflow progress line | Approximately 1px with a fine arrow/end mark | Screenshot |
| Workflow column separator | Approximately 1–2px pale gray line | Visual estimate |
| Contact arrow icon | Fine circle enclosing a right arrow | Screenshot; icon geometry not sampled |
| Chapter-banner arrow | Larger circular field with a fine arrow | Partly visible in the desktop capture |

### Layout Measurements

| Element | Desktop measurement | Mobile measurement |
| --- | --- | --- |
| Total document height | `10982.58px`, reported as 10983px | `9996.78px`, reported as 9997px |
| Hero section | `1440 × 1000px` | `390 × 844px` |
| Hero title box | x `432`, y `300`, width `576px` | x `136.5`, y `151.91`, width `192px` |
| Hero introduction text | x `340.80`, width `401.95px` | x `51.30`, width `267.98px` |
| Book-art container | x `884`, y `451.97`, `620 × 680.03px` | x `120.69`, y `270.52`, `312 × 342.20px` |
| Compact header logo link | x `8`, `268 × 76.78px` | x `16`, y `12`, `120 × 34.38px` |
| Menu button | `104 × 88px` | `64 × 56px` |
| Standard section-heading left edge | x `197px` | x `53px` |
| Chapter 1 and 3 link boxes | Two adjacent `625.5 × 835.66px` links, starting x `189px` | Two stacked `390 × 521.03px` links |
| Chapter 2 banner | `1251 × 342.77px`, starting x `189px` | `390 × 312px`, starting x `0` |
| Workflow paragraph | `288px` wide | `319.92px` wide |
| Service link boxes | Two adjacent `625.5 × 750.59px` links | Two stacked `341 × 409.19px` links, starting x `25px` |
| Customer link box | `282 × 406px` | `304 × 441px` |
| Contact band | `512px` high | `313px` high |
| Sitemap text region | Approximately `1060px` wide, starting x `190px` | Approximately `358px` wide, starting x `16px` |
| Footer WORDS logo link | `176 × 50.19px` | `176 × 50.19px` |

The book-art measurements describe its container, including transparent or pale surrounding space. They are not the dimensions of the visible paper object alone.

## Components

### Persistent Header and Menu Control

**Role:** company identity and access to the broader corporate site.

The desktop header places six small navigation links across the upper-right area: `顧問編集者とは`, `サービス`, `お客さまの声`, `編集者紹介`, `お知らせ`, and `会社概要`. Each uses 14px type with a 28px line height and 32px vertical padding. The measured 8px spaces between link boxes make the navigation appear relaxed without large labels.

At the far right, the menu control is represented by approximately five tall, closely spaced vertical hairlines. Its visible motif is much narrower than the measured button box. The desktop control is 104 × 88px; mobile is 64 × 56px. Keep that distinction between decorative stroke width and usable hit area.

Scrolled captures retain the header at the top and show a compact horizontal WORDS logo. The opening captures instead emphasize the giant vertical mark. This establishes persistent header behavior and two visible identity arrangements, but the exact positioning mechanism and switching threshold were not supplied.

The DOM contains `MENU`, `CLOSE`, and extensive navigation content. No opening click or open-menu screenshot was supplied. Do not infer a slide direction, reveal animation, backdrop opacity, focus behavior, or exact expanded layout from the closed state.

### Hero: Vertical Masthead, Statement, and Editorial Object

**Role:** establish the company’s identity and proposition before presenting details.

The composition has four distinct parts:

1. An oversized WORDS graphic runs down the left edge. Its visible letter width is approximately 190px on desktop and 74px on mobile; an extended rule projects farther right.
2. The two-line statement `社長の隣に、` / `編集者を。` sits away from both the top navigation and the wordmark.
3. A narrow vertical caret follows the final phrase. Its presence is visible; blinking or typing timing is not established.
4. A tilted white book mockup occupies the lower-right region, while a short company introduction sits lower and farther left.

Desktop title geometry is x 432px, y 300px, with 96px container type. On mobile it becomes 32px and moves to x 136.5px, y 151.91px. This is a deliberate repositioning, not uniform scaling of the desktop layout.

The book-art container changes from 620px wide to 312px wide. Both measured containers extend beyond the nominal right edge. The visible object is partially clipped by the capture. A new implementation can preserve the crop inside an overflow-clipped hero without creating horizontal document scrolling.

The hero is one viewport tall at both inspected sizes. Its empty areas are part of the composition: do not fill the space above the introduction with feature badges or another call to action.

### Ruled Company Introduction

**Role:** turn the visual proposition into a concise explanation.

A thin dark vertical rule sits to the left of two text blocks. The first identifies `株式会社WORDS` and reverses `「顧問編集者」` to white lettering on a dark rectangular strip. The second explains the support offered to company leaders.

Desktop text is 24px with 31.2px leading and 0.06em tracking. Mobile uses 16px with 25.6px leading and the same proportional tracking. The rule remains separate from the letters, with approximately 24px from rule to text.

The final paragraph ends around y 951px on desktop and y 811px on mobile, leaving about 49px and 33px respectively to the hero’s bottom. Use this bottom anchoring to preserve the opening view’s rhythm.

### Introduction and Problem Statements

**Role:** name three communication problems before explaining the service.

The section begins with a compact serif question and the English label `INTRODUCTION`. The problem labels use vertical Japanese composition. On desktop their text sizes are 24px; on mobile they become 16px.

The three statements are staggered vertically rather than aligned as identical cards. Desktop positions place the middle statement above the outer statements. Mobile retains three separate horizontal positions and uneven vertical starts. Preserve that diagram-like distribution instead of turning this region into three uniform rounded feature cards.

The supplied captures do not show this whole section, so surrounding illustration details and exact image assets are not established.

### Problem-to-Solution Rows

**Role:** pair each concern with a concrete service response.

The heading `顧問編集者が隣にいると…` precedes three rows. Each row pairs a compact vertical problem label with a horizontal serif explanation. Desktop explanation text is 24px / 40px in a region about 703px wide.

Mobile retains the side-by-side relationship. The explanation begins at x 213.5px and measures only 152.5px wide, using 14px / 22px type. The problem label stays to the left at roughly x 89.6px. This is an important responsive exception: not every two-part component becomes a simple vertical stack.

A faithful adaptation should preserve the relationship while checking Japanese line breaks at narrow widths. Wider text or a stacked alternative can be an accessibility improvement, but would be a deliberate deviation.

### Chapter-Cover Links

**Role:** connect the homepage’s narrative to deeper explanations.

Chapter 1 and Chapter 3 form a pair of large links on desktop, each 625.5 × 835.66px. They begin after the left editorial rail. On mobile they become two full-width, vertically stacked links, each 390 × 521.03px. Their near-identical aspect ratios across viewports support treating them as cover-like compositions.

The headings are measured at 48px / 56px on desktop and 24px / 28px on mobile. Their computed text color is white. Each link includes a chapter identifier and `さらに詳しく読む`.

Chapter 2 uses a different format: a broad desktop banner and a 312px-high mobile block. The desktop capture shows a charcoal field, large white lettering, a small vertical `CHAPTER` label, a white rule, a fine outline illustration of a person, and a circular arrow near the right edge.

Only this banner’s artwork is visually represented in the supplied mid-page capture. Do not invent the complete illustrations or exact background fills of the other chapter covers.

### Four-Step Workflow

**Role:** explain the actual service sequence.

The four steps are strategy, interviewing, content production, and publishing/distribution. Desktop presents two columns over two rows; mobile presents one vertical sequence.

Each step combines:

- A small dark `STEP` tab attached to a long horizontal hairline.
- A vertical Japanese serif title centered within a generous upper area.
- A fine outline illustration below the title.
- A horizontal explanatory paragraph with loose leading.

The visible third step uses a document-and-pencil illustration; the fourth uses a paper airplane. Their linework is thin and unfilled. The desktop screenshot shows a pale separator between the two columns, with no surrounding card borders.

Desktop paragraph widths are 288px at 16px / 32px. Mobile paragraphs are wider, about 320px, despite the smaller viewport, because the two-column layout becomes a single column. Their type changes to 14px / 28px. Maintain the paragraph’s 2:1 line-height ratio.

The mobile workflow section is approximately 2434px tall, compared with 1639px on desktop. That increase comes from stacking the four substantial compositions, not from a simple percentage increase in spacing.

### Additional Service Links

**Role:** introduce adjacent offerings without breaking the editorial sequence.

The heading combines a two-line Japanese title with `SERVICE`. The observed destinations include `顧問編集者 for IR`, `〆切手帳`, and a service index.

Desktop service links form two equal large panels. Mobile keeps a 25px left inset and 341px-wide panels, rather than following the full-bleed chapter-cover rule. Headings change from 48px to 24px.

The supplied DOM confirms titles, link targets, sizes, and hierarchy. It does not establish all panel artwork. Do not assume that these are ordinary product cards or copy their imagery from another page.

### Customer Voices

**Role:** present evidence through quotations and named customers.

This section has a measured `#f6f6f6` background. Desktop padding is 160px at the top and 72px at the bottom. Eight customer links form a four-column, two-row layout: each measures 282 × 406px, with 24px gaps.

Each link contains a quotation, a person’s position/name, and a company name. The quotation uses `TsukuAOldMinPr6N-R, serif` at 18px / 37px. Its text region is inset 32px from the link box and measures 218px wide on desktop.

On mobile, the links become a horizontal track of 304 × 441px items. The captured central item begins near x 43px, and its quotation is 240px wide. Adjacent item starts are approximately 339.13px apart, implying about 35.13px of space between boxes in that captured state.

Repeated entries and offscreen coordinates are consistent with a looping carousel arrangement. They do not establish autoplay, swipe behavior, speed, controls, or pause rules. Neither testimonial photography nor the complete inner card surface is visible in the supplied screenshots; do not invent those details from the text records.

### Vertical Chapter Index

**Role:** offer another route into the site’s explanatory content before the final contact area.

The footer begins with seven tall, narrow links covering five chapters, services, and customer voices. Desktop link boxes are approximately 131.6px wide and 651.2px high, using 24px type with 0.1em tracking.

Mobile preserves seven narrow columns rather than stacking them. Each is about 50.1px wide and 344px high, with 16px type. Their proportions and short horizontal text fragments are consistent with vertical composition. Exact decorative details were not included in a screenshot of this section.

Treat this index as a distinctive part of the reading architecture. It is separate from the dense inline sitemap below the contact band.

### Closing Contact Band

**Role:** provide download and contact routes after the explanatory content.

A full-width charcoal field carries enormous, nearly black WORDS lettering behind the foreground content. The left side contains `経営者の言葉がブランドになる` and a larger closing statement. On desktop, two vertically separated action links sit to the right, each introduced by a white vertical rule and followed by a small circled arrow.

The section is measured at 512px high on desktop and 313px on mobile. The desktop screenshot shows only the portion remaining at its scroll position; its visible crop is not the full section height.

Desktop actions have 96px-high boxes, 18px type, and 24px left padding. On mobile they move beneath the copy at x 32px, with 16px type and measured boxes only 18px high. Enlarging those mobile targets is a recommended improvement.

The fixed header appears dark over the dark band in the supplied desktop capture. A new implementation should explicitly manage header contrast over changing surfaces.

### Inline Sitemap and Brand Footer

**Role:** expose the full information architecture and close with company and media identities.

The sitemap is a continuous, wrapping text composition. Pale gray category labels are interspersed with black links separated by slashes. Categories do not become conventional independent footer columns in either capture.

Desktop links use 14px / 28px within an approximately 1060px-wide region. Mobile links reduce to 12px / 20px with `-0.6px` tracking, while category labels remain 16px / 32px. The larger labels influence the mixed inline rhythm; the visible row pitch should not be inferred from link line height alone.

Below the sitemap, the WORDS logo and company name sit left. The illustrated media mark `の言葉` sits right on desktop and below the company identity on mobile. The WORDS logo link remains 176px wide at both sizes.

The media link measures 215 × 63px on desktop. Its mobile anchor spans 358px, but the screenshot shows smaller artwork within it; do not stretch the graphic to fill the entire anchor width.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Primary navigation transition | Computed `0.3s ease-out` | A transition is declared; the changed property and final hover appearance were not exercised. |
| Some navigation and contact colors | Computed `color 0.3s ease-out` | Short color transitions are evidenced. Exact target colors remain unverified. |
| General sampled elements | Many report `transition: all` without a duration | This is not evidence of a visible timed animation. |
| Hero caret | Visible trailing vertical mark | Typing, blinking period, and sequencing are unknown. |
| Header identity arrangement | Compact logo visible in scrolled captures, giant mark in opening captures | Two visual arrangements are evidenced; the threshold and transition are unknown. |
| Mobile customer track | Horizontal positions and duplicate entries | Carousel-like structure is supported; autoplay and user controls are unverified. |
| Menu | Button and alternate navigation content exist in the DOM | Opening/closing behavior was not tested. |
| Sampled CSS animations | Sampled elements report `animation: none` | This does not exclude descendant, pseudo-element, or JavaScript-driven motion. |

The collection process waited for document load, visible image decoding, and bounded layout stability. It also temporarily paused perpetual animations during readiness checks and resumed them afterward. Static captures therefore cannot establish a complete motion specification.

**Recommended adaptation:** use 300ms ease-out color feedback for ordinary links, retain a static caret unless additional motion is intentionally designed, and provide reduced-motion behavior for any added animation. Do not invent scroll parallax, book rotation, or a typewriter sequence and present it as original behavior.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | White, largely unboxed | Gives typography and diagrams room |
| Editorial structure | Fine black or gray rules | Creates alignment without heavy containers |
| Small emphasis | Dark rectangular text reversal | Highlights an editorial term or step number |
| Chapter banner | Charcoal, white type, fine illustration | Marks a change of topic and links to deeper content |
| Customer section | Very pale gray | Separates testimonial content from the main narrative |
| Contact band | Charcoal with a darker giant wordmark | Gives the final actions a strong visual setting |
| Book artwork | White paper object with a soft cast shadow | Adds physicality inside an otherwise flat page |
| Final footer | White with a dense text index and two identities | Combines utility and a restrained closing composition |

The mockup’s shadow belongs to the pictured object. It is not evidence for adding shadows to cards, buttons, or navigation panels.

## Imagery

The verified imagery is editorial and restrained: a white book-like object with vertical Japanese text and fluorescent highlighting, thin outline workflow symbols, a lightly drawn person in the chapter banner, and an illustrated media wordmark.

The hero object is already tilted and shaded in the visible composition. If an asset includes that perspective, crop, and shadow, display it as prepared. Applying another CSS rotation or drop shadow would distort it.

The document-and-pencil and paper-airplane symbols use delicate black strokes on white. The chapter figure uses similarly delicate light strokes on charcoal. Their purpose is to explain and humanize the service while leaving typography dominant.

There is no evidence here for a hero video, a stock-photo collage, full-color gradients, or a large photography system. Customer card images may exist, but the supplied records do not show them clearly enough to specify.

### Observed Asset References

No original image-file URLs were included in the supplied evidence. The references below identify visible artwork without fabricating filenames or asset formats.

| Asset | Original-page evidence | Reuse guidance |
| --- | --- | --- |
| Vertical WORDS identity | Desktop and mobile opening captures | Preserve the graphic’s letterforms, divider, and edge crop |
| Compact horizontal WORDS identity | Scrolled desktop and mobile footer captures | Use the logo artwork; do not substitute a generic sans-serif word |
| White book mockup | Desktop and mobile opening captures | Preserve integrated fluorescent marks, perspective, and shadow |
| Document-and-pencil symbol | Desktop workflow capture, Step 3 | Match the thin, unfilled outline character |
| Paper-airplane symbol | Desktop workflow capture, Step 4 | Keep the fine stroke and large surrounding white space |
| Outline person | Partly visible in the Chapter 2 banner | Preserve the light line on a dark field |
| Giant background WORDS mark | Desktop contact-band capture | Keep low contrast behind readable foreground content |
| `の言葉` media identity | Desktop and mobile footer captures | Preserve the illustration and lettering as one composition |

Use approved artwork or newly created equivalents appropriate to the new brand. CSS can reproduce the layout system, but it cannot supply the identity-specific lettering and illustrations.

## Layout & Responsive Behavior

### Page Structure

The observed homepage sequence is:

1. Viewport-height hero.
2. Three communication problems.
3. Three corresponding service explanations.
4. Chapter 1 and Chapter 3 links.
5. Four-step workflow.
6. Chapter 2 banner.
7. Additional services.
8. Customer voices.
9. Seven-part chapter/service index.
10. Contact band.
11. Inline sitemap and brand footer.

This is a long document with persistent navigation. It is not a fixed application shell with independent content scrolling.

### Multiple Alignment Systems

Desktop does not use one universal centered container. Chapter and workflow content relate to a left rail around x 189px. Section headings often start at x 197px. Customer cards instead span a centered 1200px-wide grid starting at x 120px. The final sitemap uses a narrower 1060px-wide region starting at x 190px.

Preserve these differences. Applying the left-rail offset to every section would misplace the testimonial grid and contact area.

### Responsive Changes

| Component | Desktop | Mobile |
| --- | --- | --- |
| Header | Horizontal navigation plus menu control | Horizontal link row disappears; compact menu control remains |
| Hero identity | Vertical mark dominates the left edge for nearly the captured height | Smaller vertical mark occupies the upper-left portion |
| Hero title | 96px container type, x 30% of viewport | 32px container type, x 35% of viewport |
| Hero object | Lower-right, 620px container width | Beneath the title, 312px container width |
| Hero introduction | Lower-left of the object, 24px type | Near the hero bottom, 16px type |
| Problem statements | Three staggered positions | Three staggered positions retained |
| Solution rows | Vertical label plus wide explanation | Side-by-side relationship retained with narrow explanation |
| Chapter 1 and 3 | Two columns | Full-width stack |
| Workflow | Two columns, two rows | Four sequential blocks |
| Services | Two large adjacent panels | Two inset stacked panels |
| Customer voices | Four columns, two rows | One horizontal track |
| Chapter index | Seven broad vertical links | Seven narrow vertical links |
| Contact actions | Right of the main message | Below the message |
| Sitemap | Continuous inline wrapping | Continuous inline wrapping with smaller links |
| Footer identities | Opposite sides | Stacked, left aligned |

The hero coordinates are consistent with percentage positioning at the inspected sizes, but the original formulas were not supplied. The Quick Start uses calibrated percentages as an adaptation, not a claim about source CSS.

Only two viewport widths were inspected. The proposed 64rem breakpoint below is a recommendation. Validate intermediate widths, text enlargement, short screens, and long translations before treating it as production-ready.

## Do’s and Don’ts

### Do

- Preserve the giant vertical identity, displaced headline, and diagonal editorial object as separate compositional elements.
- Keep large expanses of uninterrupted white around the hero and diagrams.
- Use black text, charcoal bands, fine rules, and restrained gray labels.
- Confine fluorescent color to the book artwork unless deliberately extending the visual system.
- Maintain the distinction between sans-serif explanatory text and editorial serif labels and quotations.
- Respect the measured 400 weights of the named font families.
- Use vertical Japanese writing where it structures the content, especially workflow titles and the chapter index.
- Keep workflow paragraphs loose and narrow on desktop, then wider in the mobile single-column layout.
- Preserve full-width chapter links and inset service links as different mobile components.
- Keep the footer sitemap as a wrapping editorial index.
- Treat the logo and illustrations as assets with their own proportions.
- Distinguish measured DOM geometry from visible artwork bounds.

### Don’t

- Don’t recast the corporate homepage as a generic hero followed by interchangeable feature cards.
- Don’t center every section in the same maximum-width container.
- Don’t fill the hero’s empty space with extra badges or prominent buttons.
- Don’t turn the fluorescent annotation into a universal CTA color.
- Don’t assign a verified font name to the visible hero glyphs based only on the sampled parent.
- Don’t convert every vertical label into horizontal copy on mobile.
- Don’t reduce the entire desktop page proportionally to fit a phone.
- Don’t add rounded corners, glossy gradients, or card elevation throughout.
- Don’t rotate or shadow an already composed book mockup a second time.
- Don’t treat duplicate customer links as proof of autoplay.
- Don’t assume the menu’s open appearance or keyboard behavior was inspected.
- Don’t reproduce capture-related right-edge overflow as required page behavior.

## Recommended Implementation Additions

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

- Give the menu a clear accessible name, `aria-expanded`, and a programmatic relationship to its navigation panel. If it behaves as a modal, implement focus containment, Escape dismissal, and focus return.
- Provide a persistent visible focus indicator for text links, chapter links, and circular-arrow controls.
- Increase the mobile contact targets beyond the measured 18px boxes while preserving their light visual treatment.
- Manage header foreground colors over white and charcoal sections. The supplied dark-on-dark overlap should not become a required behavior.
- Use a darker gray where sitemap categories or copyright text carry necessary information; the observed pale gray has limited contrast against white.
- Keep the headline available as real text. Mark a decorative caret and repeated decorative wordmarks as hidden from assistive technology.
- Provide keyboard-accessible customer navigation. If a looping carousel is introduced, prevent duplicate slides from producing duplicate focus stops and provide pause behavior for automatic movement.
- Retain a usable static customer list and full hero statement when motion is reduced or JavaScript is unavailable.
- Clip decorative hero artwork locally rather than allowing it to enlarge the document’s horizontal scroll area.
- Test Japanese vertical writing with proper punctuation and logical reading order. Use `writing-mode` rather than manually inserting a line break after every character.
- Let long copy increase section height. Measured document and panel heights are reference points, not a reason to clip enlarged text.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: white, `#ffffff`.
- Ordinary text: measured black, `#000000`.
- Brand artwork: approximately `#231815`.
- Closing contact field: measured charcoal, `#292929`.
- Customer-voices background: measured `#f6f6f6`.
- Sitemap category labels: measured `#c0c0c0`.
- Reversed contact links: measured `#f5f5f5`.
- Book annotation: approximately `#dfff00`, confined to artwork.
- Primary action language: text, vertical rules, and fine circled arrows.

### Overall Prompt

“Create a Japanese editorial-services corporate homepage inspired by the observed WORDS composition. Use a white canvas, black text, a huge vertical brand graphic at the left edge, and a displaced two-line Mincho-style statement. Place a tilted white editorial object with fluorescent yellow-green annotations toward the right, and a ruled company introduction near the hero bottom. Continue with staggered vertical problem labels, large chapter links, a two-column numbered workflow with fine outline illustrations, and customer quotations. Use charcoal for major chapter and contact surfaces. On mobile, deliberately reposition the hero, stack the workflow and chapter covers, retain selected vertical writing, and present customer stories in a horizontal track. Finish with a dense inline sitemap and restrained brand identities. Keep corners square, rules fine, and motion limited to behavior explicitly implemented.”

### Example Component Prompts

1. **Hero:** “Build a 1440 × 1000 reference composition with the headline near x 432, y 300, using 96px container type. Put a large vertical brand graphic at the far left and a prepared book mockup in a 620px-wide lower-right container. Place a 24px ruled introduction near the bottom. At 390 × 844, move the headline to roughly x 136.5, y 152 and reduce it to 32px; use a 312px-wide object and a 16px introduction near the bottom. Treat these as measured targets, with flexible overflow handling.”
2. **Workflow:** “Create four editorial workflow steps in a desktop two-column grid. Each step has a dark STEP tab on a hairline, a vertical Japanese serif heading, a delicate outline symbol, and a 288px-wide paragraph at 16px/32px. Stack the steps on mobile, using 18px headings and paragraphs near 320px wide at 14px/28px.”
3. **Chapter banner:** “Create a square-cornered charcoal banner with a white two-line title, a small vertical CHAPTER label beside a fine rule, a lightly drawn human figure, and a circular arrow. Use generous spacing and make the whole banner a meaningful link. Do not add a raised card shadow.”
4. **Customer voices:** “Arrange eight linked customer quotations in a desktop four-column grid on #f6f6f6. Reference link boxes are 282 × 406px with 24px gaps and 32px text insets. Use 18px/37px serif quotation text. On mobile, use 304px-wide items in an accessible horizontal track; do not assume autoplay.”
5. **Footer:** “Make a wrapping text sitemap with pale category labels, small black links, and slash separators. Keep it approximately 1060px wide on desktop and inset by 16px on mobile. Below it, place the primary brand left and an illustrated media identity right; stack them on mobile with substantial white space.”

## Quick Start

### CSS Custom Properties

This is a recommended adaptation, not extracted source CSS. It uses measured type sizes and component dimensions where available, estimated artwork colors where identified, and a proposed 64rem breakpoint. It does not implement menu logic, a looping carousel, hero typing, or scroll-triggered logo switching.

Use a `.words-page` wrapper. The `.hero` contains a prepared vertical `.hero-rail` image, `.hero-title` with two `.hero-line` spans, a prepared `.hero-art` image, and `.hero-summary`. Place the optional `.hero-caret` inside the final line. Workflow items contain a ruler, title slot, icon, and paragraph. Supply approved artwork and font files separately; their URLs were not provided.

The hero’s serif assignment below is a visual recommendation because its exact descendant font was not captured. Other named families come directly from measured assignments.

```css
:root {
  /* Measured interface colors and a visually observed white canvas. */
  --color-paper: #ffffff;
  --color-ink: #000000;
  --color-charcoal: #292929;
  --color-soft: #f6f6f6;
  --color-on-dark: #f5f5f5;
  --color-index: #c0c0c0;
  --color-secondary: #868686;

  /* Visual estimates; prefer original colors within approved assets. */
  --color-brand: #231815;
  --color-rule-soft: #dddddd;
  --color-watermark: #111111;
  --color-highlight-art: #dfff00;

  /* Family identifiers were observed; font files are not bundled here. */
  --font-body: 'TsukuGoPr5-R', sans-serif;
  --font-heading-container: 'TsukuGoPr5-D', sans-serif;
  --font-intro: 'TsukuGoPro-B', sans-serif;
  --font-editorial: 'TsukuAOldMinPr6N-B', serif;
  --font-quote: 'TsukuAOldMinPr6N-R', serif;

  --weight-normal: 400;
  --text-body: 16px;
  --text-section: 32px;
  --text-chapter: 48px;
  --text-quote: 18px;
  --leading-reading: 2;
  --tracking-intro: 0.06em;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-72: 72px;
  --space-144: 144px;
  --space-160: 160px;

  --rule-width: 1px;
  --radius-panel: 0px;
  --rail-width: clamp(120px, 13.125vw, 189px);
  --header-height: 88px;
  --motion-link: 300ms ease-out;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font: var(--weight-normal) 16px/1.5 var(--font-body);
}

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

.words-page a {
  color: inherit;
  text-decoration: none;
}

.words-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  height: var(--header-height);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.compact-logo {
  position: absolute;
  top: 0;
  left: 8px;
  width: 268px;
}

/* The application controls this state; no threshold is implied. */
.site-header[data-hero-active='true'] .compact-logo {
  visibility: hidden;
}

.primary-nav {
  display: flex;
  gap: 8px;
  margin-top: -2px;
}

.primary-nav a {
  display: block;
  padding: 32px 12px;
  font: 400 14px/28px var(--font-heading-container);
  transition: color var(--motion-link);
}

.menu-toggle {
  display: grid;
  place-items: start center;
  width: 104px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.menu-lines {
  width: 17px;
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    currentColor 0 1px,
    transparent 1px 4px
  );
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 760px;
  overflow: clip;
  background: var(--color-paper);
}

/* Supply artwork already arranged in its vertical orientation. */
.hero-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: min(15.45vw, 224px);
  height: auto;
  pointer-events: none;
}

.hero-title {
  position: absolute;
  top: 30%;
  left: 30%;
  z-index: 2;
  width: 6em;
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(60px, 6.6667vw, 96px);
  font-weight: 400;
  line-height: 1.1;
}

.hero-line {
  display: block;
}

/* A static visual marker; original blink timing is unknown. */
.hero-caret {
  display: inline-block;
  width: 0.07em;
  height: 0.95em;
  margin-left: 0.18em;
  vertical-align: -0.06em;
  background: var(--color-index);
}

.hero-art {
  position: absolute;
  top: 45.2%;
  right: -4.444vw;
  width: min(43.056vw, 620px);
  max-width: none !important;
  height: auto;
  pointer-events: none;
}

.hero-summary {
  position: absolute;
  bottom: 49px;
  left: 22%;
  z-index: 2;
  width: 426px;
  max-width: 38%;
  padding-left: 23px;
  border-left: 1px solid var(--color-brand);
  font-family: var(--font-intro);
  font-size: clamp(18px, 1.667vw, 24px);
  line-height: 1.3;
  letter-spacing: var(--tracking-intro);
}

.hero-summary h2,
.hero-summary p {
  margin: 0;
  font: inherit;
}

.hero-summary p {
  margin-top: 16px;
}

.editorial-mark {
  padding-inline: 0.25em;
  color: var(--color-paper);
  background: var(--color-brand);
}

/* Apply this rail only to sections that use it. */
.editorial-shell {
  margin-left: var(--rail-width);
  border-left: 1px solid var(--color-brand);
}

.section-heading {
  margin: 0 0 64px;
  padding-left: 8px;
  font: 400 var(--text-section)/1.625
    var(--font-heading-container);
}

.workflow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 24px min(8.5vw, 132px);
}

.workflow-step {
  min-width: 0;
  padding: 0 24px 144px;
}

.workflow-step:nth-child(even) {
  border-left: 1px solid var(--color-rule-soft);
}

.step-ruler {
  display: flex;
  align-items: center;
  margin-bottom: 48px;
  color: var(--color-brand);
}

.step-ruler::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
}

.step-tag {
  padding: 2px 14px;
  color: var(--color-paper);
  background: var(--color-brand);
  font: 400 18px/1.3 var(--font-body);
  white-space: nowrap;
}

.step-title-slot {
  display: grid;
  place-items: center;
  height: 120px;
}

.step-title {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 400 24px/1.2 var(--font-editorial);
}

.step-icon {
  width: 96px;
  height: 96px;
  margin: 20px auto 48px;
  object-fit: contain;
}

.step-copy {
  width: 288px;
  max-width: 100%;
  margin: 0 auto;
  font: 400 16px/32px var(--font-body);
}

.chapter-band {
  position: relative;
  display: block;
  min-height: 343px;
  padding: 100px;
  color: var(--color-paper) !important;
  background: var(--color-charcoal);
  border-radius: 0;
}

.chapter-band h2 {
  position: relative;
  z-index: 1;
  max-width: 12em;
  margin: 0;
  font: 400 48px/56px var(--font-editorial);
}

.voices {
  padding: 160px 0 72px;
  background: var(--color-soft);
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

/* Geometry only: inner artwork and surfaces need separate evidence. */
.voice-card {
  display: block;
  min-height: 406px;
  border-radius: 0;
}

.voice-quote {
  margin: 0;
  padding-inline: 32px;
  font: 400 18px/37px var(--font-quote);
}

.contact-band {
  position: relative;
  overflow: clip;
  min-height: 512px;
  padding: 136px max(32px, 13.333vw) 144px;
  color: var(--color-on-dark);
  background: var(--color-charcoal);
}

.contact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}

.contact-kicker {
  margin: 0;
  font: 400 32px/52px var(--font-heading-container);
}

.contact-title {
  margin: 12px 0 0;
  font: 400 clamp(32px, 4.2vw, 64px)/1.3
    var(--font-editorial);
}

.contact-actions {
  display: grid;
  gap: 40px;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 0 32px 0 24px;
  border-left: 2px solid currentColor;
  font: 400 18px/36px var(--font-heading-container);
  transition: color var(--motion-link);
}

.arrow-circle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 400 16px/1 sans-serif;
}

.site-footer-inner {
  width: min(1060px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 128px 88px;
}

.sitemap {
  font: 400 14px/28px var(--font-body);
}

.sitemap-group,
.sitemap-group ul,
.sitemap-group li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-category {
  margin-right: 8px;
  color: var(--color-index);
  font: 400 16px/32px var(--font-heading-container);
}

/* Place literal separators in aria-hidden markup between links. */
.sitemap-separator {
  margin-inline: 8px;
}

.footer-identities {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-top: 104px;
}

.footer-logo {
  width: 176px;
  height: auto;
}

.footer-media {
  width: 215px;
  height: auto;
}

@media (max-width: 64rem) {
  :root {
    --rail-width: 0px;
    --header-height: 56px;
    --text-section: 24px;
    --text-chapter: 24px;
  }

  .primary-nav {
    display: none;
  }

  .compact-logo {
    top: 12px;
    left: 16px;
    width: 120px;
  }

  .menu-toggle {
    width: 64px;
    height: 56px;
    margin-right: 24px;
  }

  .hero {
    min-height: 800px;
  }

  .hero-rail {
    width: 22vw;
    max-width: 100px;
  }

  .hero-title {
    top: 18%;
    left: 35%;
    font-size: 32px;
    line-height: 1.2;
  }

  .hero-art {
    top: 32.05%;
    right: -11vw;
    width: 80vw;
  }

  .hero-summary {
    bottom: 33px;
    left: 7%;
    width: 292px;
    max-width: calc(93% - 24px);
    font-size: 16px;
    line-height: 1.6;
  }

  .editorial-shell {
    margin-left: 0;
    border-left: 0;
  }

  .section-heading {
    padding-left: 53px;
    line-height: 1.33;
  }

  .workflow {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 24px;
  }

  .workflow-step {
    padding: 0 0 112px;
  }

  .workflow-step:nth-child(even) {
    border-left: 0;
  }

  .step-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .step-copy {
    width: 320px;
    font-size: 14px;
    line-height: 28px;
  }

  .chapter-band {
    min-height: 312px;
    padding: 60px 41px;
  }

  .chapter-band h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .voices {
    padding-block: 56px 64px;
  }

  /* Accessible native-scroll baseline, not a claimed source carousel. */
  .voice-grid {
    display: flex;
    gap: 35px;
    width: 100%;
    padding-inline: max(24px, calc((100% - 304px) / 2));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .voice-card {
    flex: 0 0 304px;
    min-height: 441px;
    scroll-snap-align: center;
  }

  .contact-band {
    min-height: 313px;
    padding: 64px 32px 72px;
  }

  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .contact-kicker {
    font-size: 16px;
    line-height: 32px;
  }

  .contact-title {
    font-size: 28px;
  }

  .contact-actions {
    gap: 16px;
  }

  /* Recommended larger targets than the captured 18px link boxes. */
  .contact-action {
    min-height: 44px;
    padding-left: 12px;
    font-size: 16px;
    line-height: 1.4;
  }

  .site-footer-inner {
    padding-top: 80px;
  }

  .sitemap {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.6px;
  }

  .sitemap-category {
    letter-spacing: normal;
  }

  .footer-identities {
    flex-direction: column;
    gap: 48px;
    margin-top: 88px;
  }
}

@media (hover: hover) {
  /* Recommended feedback; the exact original hover result is unknown. */
  .primary-nav a:hover,
  .sitemap a:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav a,
  .contact-action {
    transition: none;
  }

  .voice-grid {
    scroll-behavior: auto;
  }
}
```

The CSS intentionally allows content to grow. The recommended larger mobile contact targets can make that band taller than the measured 313px. Add the chapter artwork, workflow arrowheads, contact watermark, and source-specific illustrations through approved assets; they are not generated by these layout rules.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not establish the framework or version used by the original site. Define the properties above first.

```css
@theme inline {
  --color-paper: #ffffff;
  --color-ink: #000000;
  --color-brand: #231815;
  --color-charcoal: #292929;
  --color-soft: #f6f6f6;
  --color-index: #c0c0c0;
  --color-on-dark: #f5f5f5;

  --font-sans: var(--font-body);
  --font-display: var(--font-editorial);
  --font-quotation: var(--font-quote);

  --text-section: 32px;
  --text-chapter: 48px;
  --text-quotation: 18px;

  --spacing-editorial-rail: var(--rail-width);
  --spacing-workflow-copy: 288px;
  --spacing-footer-content: 1060px;

  --radius-panel: 0px;
}
```

## Sources & Evidence

- [WORDS current homepage](https://words-inc.co.jp/): original and final URL in the supplied observation; HTTP status 200. The hero, footer identity, and rendered text identify the company as `株式会社WORDS`.
- **Capture timestamp:** October 4, 2026, 20:50:36.162 UTC / October 5, 2026, 05:50:36.162 JST.
- **Desktop evidence:** 1440 × 1000 viewport; opening view, workflow/Chapter 2 view, and contact/footer view. Rendered document height approximately 10982.58px.
- **Mobile evidence:** 390 × 844 viewport; opening view and bottom-footer view. Rendered document height approximately 9996.78px.
- **Rendered DOM and computed styles:** font-family identifiers, sizes, weights, leading, tracking, padding, element rectangles, sampled colors, transitions, link targets, and document structure. Unsampled descendant styles and artwork pixels are not equivalent to measured parent styles.
- **Original-page destinations:** chapter, service, customer-story, company, download, contact, privacy, and media links establish the homepage’s information architecture. Their destination pages were not independently inspected for this reference.
- **Interaction scope:** scrolling is represented by the supplied captures and collection notes. No menu opening, pointer hover, keyboard navigation, contact submission, or carousel-control interaction was supplied.
- **Collection limitations:** readiness checks used bounded waits, and perpetual animations were temporarily paused during stabilization. SharedWorkers and service workers were disabled. These conditions do not prove complete delayed content, motion behavior, or offline behavior.

This document describes the current homepage evidenced by those captures and records. Exact asset URLs, complete font-run assignments, intermediate responsive rules, and unexercised interactions remain unspecified.