# LINE GROUND — Style Reference

> A black design monograph presented on a white digital stage, punctuated by vivid green typography.

**Original URL:** [ground.line.me/ja/](https://ground.line.me/ja/)
**Final URL:** [ground.line.me/ja/](https://ground.line.me/ja/)
**Theme:** predominantly white and black, with green accents and a pale gray culture scene; no theme selector was verified.
**Inspected:** September 17, 2026, 05:24:39 JST, through the supplied browser evidence. Recorded retrieval: `2026-09-16T20:24:39.458Z`.
**Viewports:** desktop `1440 × 1000` and narrow viewport `390 × 844`, in CSS pixels.
**Scope:** five original-page captures covering the desktop opening, a culture scene, and the closing composition, plus narrow opening and closing views. Rendered text and computed-style samples also expose the chapter navigation, project sequence, mission statements, and remarks content. Those additional interfaces were not independently opened or visually inspected in every state.

LINE GROUND presents LINE's design work and culture as an extended editorial publication. Its opening image is a nearly black book with oversized white GROUND lettering and a small 2021 date. A compact header and a circular chapter affordance surround it with substantial white space. The closing scene repeats the cover beside a bold Japanese statement, giving the experience a clear bookend structure.

The strongest contrast is between restrained navigation and large editorial content. A culture capture pairs enormous green lettering with an edge-to-edge monochrome office photograph. Elsewhere, the rendered document contains project narratives, six Creative Mission interludes, repeated display words, and contributor remarks. This is a design showcase with a publication metaphor; its component system should follow that editorial purpose.

The supplied narrow captures preserve much of the desktop composition. They also show overlapping header labels and clipped closing content. These are observed limitations, not a polished mobile layout to silently reinterpret as the original design.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements can belong to offscreen or concealed elements; visibility is stated separately.
- **Estimated** means a dimension or appearance was judged from an original-page screenshot. These are approximate bounds, not extracted source declarations or exact pixel samples.
- **Derived** means a relationship was calculated from the supplied measurements. A two-viewport relationship does not establish the complete responsive formula.
- **Recommended** means an implementation choice for a new adaptation. The CSS scaffold, responsive repairs, accessibility behavior, and new selector names fall into this category.
- Font-family values identify computed stacks. Actual font-file loading and per-character fallback resolution were not supplied.
- Text inside an article is content evidence. For example, the article's discussion of a `24 × 24px` icon grid does not establish the grid used by this website's chapter control.
- The printed 2021 date belongs to the currently displayed cover. It is not the inspection date and does not imply that this reference reconstructs an earlier website.

## Tokens — Colors

### Default Palette

The following hexadecimal values are exact source custom-property values unless marked otherwise. Their presence in the stylesheet is distinct from their visibility in a particular capture.

| Name | Value | Source token / implementation alias | Role and evidence |
| --- | --- | --- | --- |
| White Canvas | `#ffffff` | `--color-white` / `--ground-paper` | Visually dominant opening and closing background; source value confirmed |
| Black Ink | `#000000` | `--color-black0` / `--ground-ink` | Header text, closing statement, chapter graphics, and footer |
| Cool Gray | `#e9eaed` | `--color-gray` / `--ground-gray` | Source neutral consistent with the pale culture-stage field |
| LINE Green | `#06c755` | `--color-green0` / `--ground-green` | Source brand accent; selected JP language option computes to this color; visually consistent with the culture headline |
| Bright Green | `#00e05b` | `--color-green100` / `--ground-green-bright` | Computed color of offscreen project-overview introduction and mission copy |
| Mission Green | `#00b76f` | No supplied source variable / `--ground-green-mission` | Converted from measured `rgb(0, 183, 111)` on sampled mission-detail text; not established as a general interface accent |

Keep white and black dominant. Green is most distinctive when it changes the scale or emphasis of an editorial statement. The opening does not require a green primary button.

### Additional Source Colors

| Source variable | Exact value | Interpretation limit |
| --- | --- | --- |
| `--color-black50` | `#111111` | Declared dark neutral; a specific visible surface was not mapped |
| `--color-black100` | `#151519` | Declared dark neutral; do not assume it is the cover's flat background |
| `--color-black200` | `#1d1d21` | Declared dark neutral; visible usage not independently established |
| `--color-black300` | `#444453` | Declared gray; visible usage not independently established |
| `--color-skyblue` | `#00b7df` | Declared secondary color, not prominent in the supplied original-page captures |

The cover contains photographic or rendered tonal variation. Its charcoal, near-black symbols, and soft shadow should remain part of the artwork treatment rather than becoming a set of invented flat UI colors.

A black full-viewport section also exists in the DOM sample. It does not establish a selectable dark theme or override the visibly white opening.

## Tokens — Typography

### English Identity and Display Stack

**Source variable:** `--font-lineEN`

```css
'LINESeedSansEN', 'LINESeedSansKR', sans-serif
```

The visible GROUND header link uses this stack at weight `800`. Its broad, heavy capitals provide the main identity cue in the otherwise very small header.

Use this stack for equivalent English identity elements when the fonts are available and authorized. The culture headline's individual computed style was not supplied, so its exact font assignment should not be asserted solely from appearance.

### Japanese Text Stack

**Source variable:** `--font-lineJP`

```css
'SFPro', 'Arial', 'Noto Sans JP', sans-serif
```

This is the measured body stack and the stack on sampled Japanese introduction and award text. The closing statement appears as bold Japanese sans-serif text, but its particular element was not included in the computed-style sample.

The body computes to `10px / 18px`, weight `400`, with `-0.3px` tracking. That base value is not the visible size of every paragraph: important descendants have much larger styles.

### Utility and Chapter Stack

**Source variable:** `--font-lineKR`

```css
'LINESeedSansKR', 'LINESeedSansEN', sans-serif
```

The language indicator, chapter links, project counters, and sampled English mission text use this stack. The measured weights are generally `700`.

### Type Scale

| Role | Desktop | Narrow viewport | Weight / tracking | Evidence status |
| --- | --- | --- | --- | --- |
| Header GROUND | `28px / 28px` | `28px / 28px` | `800`, `-0.28px` | Measured and visible |
| Current JP indicator | `16px / 16px` | `16px / 16px` | `700`, `-0.16px` | Measured and visible |
| Language options | `16px / 16px` | `16px / 16px` | `700`, `-0.16px` | Measured; expanded interface not shown |
| VIEW ALL PRODUCTS label | Approximately `16px` | Approximately `16px` | Visually bold | Screenshot estimate; sampled anchor's inherited `10px` is not a measurement of the visible child lettering |
| Chapter navigation | `74.1px / 74.1px` | `62.5404px / 62.5404px` | `700`, approximately `-0.03em` | Measured offscreen links |
| Overview introduction / mission copy | `27.8px / 50.04px` | `23.4632px / 42.2338px` | `700`, `-0.01em` | Measured staged content |
| Mission-detail statement | `37px / 51.8px` | `31.228px / 43.7192px` | `700`, `-0.03em` | Measured staged content |
| Project counter and title | `14.8px / 14.8px` | `12.4912px / 12.4912px` | `700`, `-0.01em` | Measured detail-interface elements |
| Award annotation | `13px / 19.5px` | `10.972px / 16.458px` | `700`, `-0.01em` | Measured detail content |
| Culture display heading | Approximately `120–140px` | Not visually inspected | Heavy sans-serif | Desktop screenshot estimate |
| Closing Japanese statement | Approximately `28px / 48px` | Appears similarly large and remains clipped | Visually bold | Screenshot estimate; not the measured overview paragraph |
| OPEN BOOK cue | Approximately `10px` | Not visibly established | Compact uppercase | Desktop screenshot estimate |
| Footer | Approximately `14px` | Approximately `12px` | Regular sans-serif | Screenshot estimate |

Several overview and article wrappers compute to `font-size: 0px`. Their descendants and artwork still contain content. Do not use those wrapper values as the intended reading size.

The DOM also contains a `140px / 140px`, weight-800 GROUND paragraph with transparent text color. It measures about `632px` wide at both viewports and extends beyond the narrow viewport. This is evidence of a separate staged element, not the size of the visible header or the lettering printed on the cover.

## Tokens — Spacing & Shapes

**Source root size:** `10px` at both inspected viewports.
**Visual density:** sparse outer frame, large isolated artwork, and dense editorial statements within selected scenes.

A complete source spacing scale was not provided. Use the measured coordinates below as stronger evidence than an assumed 8px grid.

### Measured Interface Geometry

| Element | Desktop `1440 × 1000` | Narrow `390 × 844` | Interpretation |
| --- | --- | --- | --- |
| GROUND link rectangle | `x 655.05`, `y 36`, `129.78 × 28px` | `x 130.05`, `y 36`, `129.78 × 28px` | Centered in the visible viewport; unchanged size |
| Products-link rectangle | `x 46.30`, `y 34`, `171.19 × 30px` | `x 39.06`, `y 34`, `171.19 × 30px` | Label width remains unchanged |
| Current JP rectangle | `x 1374.94`, `y 41`, `18.77 × 16px` | `x 332.17`, `y 41`, `18.77 × 16px` | Right edge follows the outer inset |
| CHAPTERS anchor | `x 1353.70`, `y 913.70`, `40 × 40px` | `x 310.94`, `y 764.94`, `40 × 40px` | Equal right and bottom insets within each viewport |
| Outer control inset | Approximately `46.30px` | Approximately `39.06px` | Measured from anchor bounds |
| Language-option padding | `5px` | `5px` | Measured per option |
| Header element width | `1440px` | `1280px` | Narrow header container exceeds the viewport, despite viewport-relative child positions |

The header element itself measures zero height in the sample. Its positioned children define the visible header footprint; zero height should not be interpreted as an absent interface.

### Screenshot Geometry

| Element | Estimated bounds | Reusable relationship |
| --- | --- | --- |
| Desktop opening cover | `x ≈505`, `y ≈219`, `431 × 586px`, excluding shadow | Centered horizontally; center near `51.2%` of viewport height |
| Narrow opening cover | `x ≈14`, `y ≈185`, `363 × 494px`, excluding shadow | Nearly full width while retaining its portrait ratio |
| Cover proportion | Width / height approximately `0.735` | Preserve the artwork ratio; do not use a generic square product tile |
| Desktop OPEN BOOK rule | Approximately `1 × 61px`, beginning near `y 882` | A hairline directional cue below the caption |
| Culture split | Image begins near `x 745` | Approximately `52%` text field and `48%` image field in this captured state |
| Culture indicator | Approximately `277px` long near `x 93`, `y 953` | Fine gray track with a short black segment |
| Desktop closing cover | `x ≈311`, `y ≈293`, `312 × 423px` | Smaller, flatter book presentation |
| Desktop closing text | Starts near `x 720`, width approximately `480–490px` | Text begins at the viewport midpoint |
| Closing cover-to-text gap | Approximately `97px` | Broad separation between object and statement |

### Shapes and Depth

- **Book:** square corners and a precise portrait outline.
- **Page fields:** flat rectangular areas without rounded containers.
- **Chapter graphic:** concentric circles around a white center and small downward chevron; a more solid black-ring appearance is visible in the closing scene.
- **Rules:** approximately 1px visual weight in the opening cue and culture indicator.
- **Shadow:** soft and displaced primarily to the right and below the opening book. Exact blur, opacity, and whether it is baked into the asset are unknown.

A practical adaptation can use `4, 8, 16, 24, 40, 48, 96px` as a supporting spacing scale. This is a recommendation, not an extracted source-token list.

## Components

### Persistent Header

**Role:** identity, entry to the project collection, and language context.

The visible anatomy is three independent anchors: VIEW ALL PRODUCTS at the left, GROUND centered, and JP at the right. There is no visible enclosing bar, bottom border, pill, or contrasting navigation surface. The header sits directly over white or photographic scene content.

The GROUND link points to `https://ground.line.me/ja/index.html`. The products control and language options use `javascript:;` in the supplied link list. Their destinations or event-handler results cannot be established from those hrefs.

The DOM includes KR, JP, and EN options. The option labeled JP computes to green, while the collapsed JP indicator visible in the screenshots is black. Do not display every option permanently merely because each has a measured rectangle.

At the narrow viewport, the products link spans approximately `x 39–210`, and the brand spans `x 130–260`. Their rectangles overlap by about `80px`, matching the visible text collision. A new implementation should explicitly resolve that collision.

### Opening Book Stage

**Role:** introduce the publication as a tangible design object.

The book is the only large object on a white viewport. Its cover combines white GROUND lettering, a small 2021 date, charcoal material, and near-black symbols including rounded character-like forms, a speech-bubble shape, polygons, a starburst, and bars. Subtle tonal differences suggest a gloss-on-matte material contrast, although the physical printing method is unverified.

The desktop cover is approximately `431 × 586px`. There is about `155px` of clear vertical space between the header wordmark's lower edge and the cover's upper edge. The rightward shadow adds physical depth without establishing a general card-elevation system.

Below the book, OPEN BOOK appears above a long vertical hairline. It is an invitation to enter the publication. No supplied click trace establishes whether activation opens a cover, advances the scroll position, or triggers another presentation.

Keep the cover as artwork. Replacing its lettering and symbols with ordinary HTML text would lose its material and compositional detail.

### Chapter Control and Chapter Navigation

**Role:** a compact, persistent access point to the editorial structure.

The measured CHAPTERS target is a `40 × 40px` square anchor near the lower-right corner. Inside it, the visible artwork is circular. The square anchor's computed border radius does not describe the shape of the graphic.

In the opening capture, thin concentric rings surround a white center and downward chevron. In the closing capture, a thick black outer region creates a denser appearance. The culture capture shows an intermediate-looking ring treatment, but a progress-driven animation was not verified.

The associated DOM contains five chapter labels: ABOUT, PROJECTS, CULTURE, REMARKS, and IN CONCLUSION. The links are positioned offscreen in the sampled state and use very large bold type. Their open-state surface, entrance movement, focus behavior, and closing interaction were not supplied.

For an adaptation, retain the compact disk and large chapter typography. Implement its navigation behavior explicitly rather than assuming the icon is simply a scroll-to-next button.

### Project Overview and Detail Sequence

**Role:** organize the design publication's case studies.

The rendered document exposes a 30-position editorial sequence combining an introduction, project entries, and six Creative Mission interludes. The overview contains short Japanese project titles and green mission statements. Detailed content includes product names, counters such as `02/30`, article copy, award annotations, and Next links naming the following entry.

Measured counters and compact project names use approximately `14.8px`, weight `700`, on desktop. Award annotations use `13px / 19.5px`. Larger introduction text uses `27.8px / 50.04px`.

Many associated rectangles lie far outside the viewport or above it. This supports a staged spatial composition, but it does not prove a particular carousel, modal, drag gesture, or page-turn mechanism. The supplied captures do not establish a visible card grid for the project overview.

An implementation should preserve the hierarchy of index label, current position, substantial editorial content, and next-entry affordance. Exact article layouts require additional visual evidence.

### Creative Mission Statements

**Role:** introduce principles between project stories.

The overview samples use bright green `#00e05b` Japanese text. Separate mission-detail samples use `#00b76f`, with a larger English statement and accompanying Japanese text. One sampled paragraph uses `37px / 51.8px`, weight `700`, at a width of about `666.69px` on desktop.

These measurements establish a bold statement treatment with generous leading. They do not establish a universal green background, a complete panel composition, or the typography of every nested Japanese span.

For reuse, let mission statements interrupt the sequence through type scale and controlled color. Avoid adding a generic bordered quote card without supporting visual evidence.

### Culture Split Scene

**Role:** connect design culture with a physical working environment.

The desktop capture is divided near `x 745`. A pale gray field occupies the left portion; a monochrome office photograph fills the right portion from top to bottom. The photograph features a large white bear-shaped sculpture close to the camera, with a table, chairs, ceiling lighting, and wall imagery behind it.

The DOM identifies the nearby section as LINE CULTURE and includes the heading Growth and Development. In the screenshot, only portions of the enormous green lettering remain visible along the left edge. Record this as a captured clipped composition. The complete settled heading position and any horizontal movement are unverified.

A thin track with a short black segment sits near the lower-left corner. Its appearance suggests an indicator, but neither its interaction nor its mapping to content was tested.

The photograph has no card frame, corner radius, or surrounding gutter. Its crop and proximity provide the scene's visual energy.

### Remarks Content

**Role:** present perspectives on LINE's design.

The rendered text includes a set of named contributors, professional roles, and Japanese remarks. Matching name links are present. This establishes the content model, but the supplied original-page screenshots do not show the section's arrangement.

Do not infer portrait cards, a quote carousel, active tabs, or a particular background treatment from the text alone. The people named in this section are not thereby established as website production credits.

### Closing Composition and Footer

**Role:** return to the book and conclude with a design statement.

The desktop scene places a smaller, nearly flat cover to the left of a broad Japanese paragraph. The cover is approximately `312 × 423px`; the text begins near the horizontal midpoint of the viewport. The paragraph is visually bold, approximately `28px`, with a line rhythm near `48px`.

The closing image has little or no clearly visible cast shadow compared with the opening. Preserve that quieter ending rather than automatically reusing the full opening shadow.

At bottom left, the footer contains © LINE, a thin vertical separator, and LINE CREATIVE with a small northeast arrow. The supplied DOM identifies `https://creative.line.me/` as the link destination. This footer is visible in the closing captures; it is not established as a permanent bar throughout the experience.

On the narrow capture, the closing cover is mostly clipped beyond the left edge. Only a segment about `112px` wide remains visible, over a height of approximately `357px`. The paragraph starts near `x 195` and continues beyond the right edge instead of becoming a readable stacked layout.

## Tokens — Motion & Interaction

| Element or treatment | Direct evidence | What remains unverified |
| --- | --- | --- |
| Language options | Computed `transition: color 0.5s` | Trigger, expanded-state behavior, and resulting navigation |
| Chapter links | Computed `transition: color 0.5s` | Opening animation, selection behavior, and focus management |
| Anonymous detail-interface links | Computed `transition: background 0.5s` | Icon identity, hover endpoint, and activation result |
| Book entry | Visible OPEN BOOK caption and directional rule | Click response, cover rotation, page turning, or scroll linkage |
| Chapter disk | Different ring appearances across supplied scenes | Progress mapping, animation duration, or morphing mechanism |
| Culture scene | Clipped display text, photograph, and line indicator | Translation direction, snapping, autoplay, or slider controls |
| Repeated display text | Repeated ENJOY, THE, CHALLENGES, and product names in rendered text | Marquee behavior, stacking animation, speed, or timing |
| Long-form traversal | Browser capture procedure traversed scroll positions | Exact offsets, timeline implementation, and whether site-specific snapping occurred |

Many sampled nodes report `animation: none` or only `transition: all` without a usable duration. These records do not establish the absence of JavaScript, ancestor, or artwork animation. Conversely, duplicated text and offscreen coordinates do not prove that animation is running.

No animation library, rendering technology, audio behavior, hover transformation, or drag gesture can be named from the supplied evidence.

**Recommended adaptation:** begin with a complete native scrolling document and working chapter anchors. Add scene transformations only when their intended behavior is defined. Use the measured `500ms` color-transition duration where appropriate; treat any new movement duration as a new design decision. Provide a static reduced-motion presentation that retains every article and chapter.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Opening and closing canvas | Flat white | Makes the book and typography carry the composition |
| Culture text field | Pale cool gray | Connects the green heading with the monochrome photograph |
| Culture photograph | Edge-to-edge image crop | Creates a large environmental scene |
| Book | Near-black artwork with subtle material contrast | Primary visual object and publication metaphor |
| Opening book shadow | Soft, offset depth | Separates the physical object from the white stage |
| Header | Transparent-looking overlay without a visible container | Maintains identity across different scene backgrounds |
| Chapter disk | Fine rings or a solid black outer region | Compact persistent navigation marker |
| Footer | Unboxed small text and a thin divider | Quiet closing attribution and related-site link |

There is no visible general system of rounded cards, translucent panels, or floating toolbar containers in the supplied original-page captures. Depth is concentrated on the opening book.

## Imagery

The visual system alternates between a carefully isolated publication object and large photographic environments. The cover supplies subtle black-on-black detail; the culture image supplies scale, spatial depth, and a recognizable character-shaped object.

### Book Artwork

Retain the full portrait cover, its white title, the 2021 date, and its low-contrast symbols. Do not brighten the symbols until they become a separate high-contrast illustration layer. Their restrained visibility is part of the object's material character.

The opening and closing presentations differ in scale and apparent shadow. Treat those as presentation variants of the publication, while leaving the exact asset relationship unverified.

### Photography

The observed culture image is monochrome or strongly desaturated. It is cropped tightly enough that the large sculpture extends beyond the right and lower boundaries. That crop is integral to the visible composition.

For an adaptation, choose photography with a strong foreground form and quieter architectural depth. A small centered office photo inside a card would not reproduce the observed scale.

### Interface Graphics

The chapter control uses concentric rings, a central disk, and a tiny chevron. The footer uses a small external-link arrow. Their rendering format—CSS, SVG, raster image, or another method—was not supplied.

### Observed Asset References

| Asset or graphic | Original-page evidence | Asset URL status |
| --- | --- | --- |
| GROUND 2021 cover | Desktop and narrow opening and closing captures | No asset URL supplied |
| Office and white sculpture photograph | Desktop culture capture | No asset URL supplied |
| Chapter ring graphic | Lower-right control across captures | No asset URL or implementation supplied |
| Footer northeast arrow | Closing captures | No asset URL supplied |

Use authorized assets when available. No filename, image format, native resolution, or font download path can be recovered reliably from these screenshots alone.

## Layout & Responsive Behavior

### Desktop Composition

The desktop opening is centered around a book, not a block of marketing copy. Small utility labels occupy the top corners, while the wordmark remains centered independently of their widths. A chapter control occupies the lower-right corner.

The culture capture expands into a near-half-width photographic split. The closing composition returns to white, with the cover left of a large statement and a small footer below. These scene changes establish rhythm through scale, image placement, and whitespace.

The supplied desktop document height is `44,739px`, about `44.7` viewport heights. This records the current document geometry; transformed or staged sections mean it should not be interpreted as that many ordinary content screens.

### Narrow Capture: Actual Behavior

At `390 × 844`:

- The wordmark stays `28px`, and JP stays `16px`.
- The products link retains its approximately `171px` width, producing the measured overlap with the centered wordmark.
- The opening book grows to about `93%` of the viewport width while keeping its portrait proportion.
- The chapter target remains `40 × 40px`, inset approximately `39px` from the right and bottom.
- The closing scene remains horizontally composed and clips both book and text.
- A partial black or green circular shape is visible at the right edge near `y 657` in the narrow captures. Its identity is unresolved; do not invent a cursor or control behavior for it.
- The document height is approximately `37,557px`, about `44.5` viewport heights.

These captures establish a narrow-viewport rendering problem. They do not establish how every physical phone, user-agent route, orientation, or browser would behave.

### Derived Scaling Relationship

Several sampled content sizes change by exactly the viewport-height ratio:

```text
844 / 1000 = 0.844
74.1 × 0.844 = 62.5404
27.8 × 0.844 = 23.4632
37 × 0.844 = 31.228
```

The cover estimates show a similar relationship: `586 × 0.844 ≈ 495px`, close to the observed narrow height of `494px`.

This supports a height-sensitive scaling system for parts of the page. It does not prove a global `vh` formula: the header type remains unchanged, and some container widths exceed the narrow viewport.

### Recommended Reflow

For a new implementation, retain desktop scale while introducing a real narrow layout:

1. Put the brand and language on the first header row and the products link on a second row.
2. Keep the opening cover within the available width, with a small minimum side margin.
3. Stack the closing cover above the statement and allow the section to grow vertically.
4. Stack the culture heading and photograph without clipping essential text.
5. Preserve the chapter disk's visible size while increasing its interactive target to at least `44 × 44px`.
6. Keep transformed or hidden content out of the keyboard focus order until it is active.

The breakpoint and reflow in the Quick Start are recommendations. They are not presented as existing source behavior.

## Do’s and Don’ts

### Do

- Make the black publication object the opening's primary visual event.
- Preserve wide white margins on desktop and the compact, unboxed header.
- Use the exact source white, black, gray, and green values where their roles are established.
- Keep the header wordmark heavy and modest in size compared with editorial display typography.
- Preserve the cover's subtle black-on-black symbols and square silhouette.
- Concentrate depth on the opening book rather than applying shadows to every component.
- Use large, tightly cropped photography for the culture scene.
- Retain the circular chapter motif and minimal line indicators.
- Separate visible screenshot findings from offscreen DOM measurements.
- Record the current narrow-view clipping honestly and label repairs as adaptations.

### Don’t

- Don't replace the publication structure with a generic hero, feature-card grid, and conversion-button sequence.
- Don't reinterpret VIEW ALL PRODUCTS as a shopping-cart or checkout flow.
- Don't turn the opening book into a rounded thumbnail card.
- Don't replace the nuanced cover with a flat black rectangle and ordinary text.
- Don't assume the black DOM section means the page has a dark-mode setting.
- Don't use the root Times value or zero-size wrapper text as the visible typography system.
- Don't assign the hidden `140px` GROUND paragraph to the header or culture heading.
- Don't infer page-turning, parallax, draggable navigation, or autoplay from static captures.
- Don't apply article-specific design-system specifications to the website's own controls.
- Don't preserve header overlap or inaccessible clipping as a requirement for a usable mobile adaptation.

## Recommended Implementation Additions

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

- Use real links for destinations and buttons for state changes instead of copying `javascript:;` hrefs.
- Give the chapter disk an accessible name, a visible focus state, and an adequate hit area. If it opens a panel, expose its expanded state and manage focus deliberately.
- Make language choices keyboard-accessible and identify the current language semantically. Keep the collapsed indicator visually distinct from the expanded options.
- Provide an accessible project index and direct access to all editorial sections even when visual transitions are disabled.
- Mark decorative repeated text as hidden from assistive technology while retaining one readable instance.
- Give the book meaningful alternative text, and describe the culture photograph according to its editorial purpose.
- Avoid using normal-sized white text on the bright greens without checking contrast. Black remains the dependable text color on those accents.
- Reserve image dimensions before decoding. Prioritize the opening cover and defer nonessential offscreen media without delaying access to text.
- Preserve sufficient line length and font size in Japanese paragraphs. Allow the closing section to exceed one viewport on small screens.
- Disable or simplify JavaScript-driven motion as well as CSS transitions when reduced motion is requested.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ffffff`.
- Main text and navigation: `#000000`.
- Culture neutral field: `#e9eaed`.
- Principal green accent: `#06c755`.
- Bright overview statement green: `#00e05b`.
- Sampled mission-detail green: `#00b76f`; use only when reproducing that specific treatment.
- Book: supplied dark artwork with tonal detail, not a uniform CSS fill.

### Overall Prompt

“Create a publication-led design showcase inspired by the observed LINE GROUND page. Begin with a portrait black book isolated on a white viewport, including subtle black-on-black shapes, large white cover lettering, and a soft rightward shadow. Use an unboxed header with a compact heavy wordmark centered between a products index link and a language indicator. Place a small concentric-ring chapter control at the lower right. Introduce a culture scene with enormous green typography, a pale gray field, and an edge-to-edge monochrome office photograph. Close with a smaller cover beside bold Japanese editorial text and a minimal footer. Preserve the desktop whitespace and establish a readable stacked layout on narrow screens. Do not invent unverified page-turn or autoplay behavior.”

### Example Component Prompts

1. **Opening book:** “At a 1440 × 1000 viewport, center an approximately 431 × 586px portrait cover near x 720 and y 512. Keep its corners square and surround it with white space. Add a tiny OPEN BOOK caption and a thin vertical rule below. Use the authorized artwork rather than recreating its printed lettering as interface text.”
2. **Header:** “Use a 28px, weight-800 GROUND wordmark centered independently of a left products link and right 16px language label. Keep the surface unboxed. Below a chosen mobile breakpoint, move the products link to a second row so it cannot collide with the wordmark.”
3. **Culture scene:** “Create a near 52/48 split between pale gray editorial space and a tightly cropped monochrome office photograph. Use a huge green English heading as the main typographic event. Keep the photograph flush to the scene edges and use a fine lower-left indicator only if a real navigation state exists.”
4. **Chapter control:** “Draw a small black-and-white concentric-ring disk with a white center and tiny downward chevron. Place the visible graphic inside a keyboard-operable target of at least 44px. Supply an explicit chapter-navigation behavior and accessible label.”
5. **Closing statement:** “On desktop, position a roughly 312px-wide book left of a bold Japanese paragraph beginning near the viewport midpoint. Use approximately 28px type and 48px line spacing, generous separation, and a small lower-left copyright footer. Stack the elements on mobile and keep the entire paragraph readable.”

## Quick Start

### CSS Custom Properties

This is a recommended static scaffold, not recovered source code. It uses measured colors and font stacks, approximate desktop geometry, and a deliberate mobile repair. It keeps a conventional root font size and uses explicit pixel values rather than copying the original 10px-root rem assumptions.

The `svh` sizing is a new implementation choice informed by the observed height-related proportions. The `48rem` breakpoint is also a recommendation. No book animation, project viewer, chapter panel, or progress tracking is implemented by this CSS.

Expected structure: a `.ground-page` wrapper, a header containing the three named controls, an opening section containing the cover and cue, a two-child culture section, and a closing section containing its cover, statement, and footer. Use a `.ground-chapter-mark` span inside the chapter control. Supply authorized image URLs; none were provided in the evidence.

```css
:root {
  /* Exact observed palette values */
  --ground-paper: #ffffff;
  --ground-ink: #000000;
  --ground-gray: #e9eaed;
  --ground-green: #06c755;
  --ground-green-bright: #00e05b;
  --ground-green-mission: #00b76f;

  /* Computed source stacks; font files are not bundled here */
  --ground-font-en: 'LINESeedSansEN', 'LINESeedSansKR', sans-serif;
  --ground-font-jp: 'SFPro', 'Arial', 'Noto Sans JP', sans-serif;
  --ground-font-utility: 'LINESeedSansKR', 'LINESeedSansEN', sans-serif;

  --ground-text-brand: 28px;
  --ground-text-utility: 16px;
  --ground-text-statement: 28px;
  --ground-leading-statement: 1.7143;

  /* Recommended fits to the supplied geometry */
  --ground-edge: clamp(24px, 4.63svh, 46.3px);
  --ground-cover-width: min(43.1svh, calc(100vw - 32px));
  --ground-closing-cover-width: 31.2svh;
  --ground-color-duration: 500ms;
}

.ground-page,
.ground-page * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.ground-page {
  color: var(--ground-ink);
  background: var(--ground-paper);
  font-family: var(--ground-font-jp);
}

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

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

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

.ground-header {
  position: fixed;
  z-index: 20;
  inset: 34px var(--ground-edge) auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 30px;
}

.ground-products {
  justify-self: start;
  font: 700 16px/30px var(--ground-font-jp);
  white-space: nowrap;
}

.ground-brand {
  justify-self: center;
  font: 800 var(--ground-text-brand)/1 var(--ground-font-en);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ground-language {
  justify-self: end;
  font: 700 var(--ground-text-utility)/1 var(--ground-font-utility);
  letter-spacing: -0.01em;
}

/* Optional expanded options; rendering and behavior need implementation. */
.ground-language-options a {
  display: inline-flex;
  padding: 5px;
  transition: color var(--ground-color-duration);
}

.ground-language-options [aria-current] {
  color: var(--ground-green);
}

.ground-opening {
  position: relative;
  min-height: 100svh;
  background: var(--ground-paper);
}

.ground-cover {
  position: absolute;
  top: 51.2%;
  left: 50%;
  width: var(--ground-cover-width);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 0;
}

/* Add only when the image does not already include its cast shadow. */
.ground-cover.needs-shadow {
  filter: drop-shadow(16px 12px 16px rgb(0 0 0 / 28%));
}

.ground-open-cue {
  position: absolute;
  top: 86.4%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translateX(-50%);
  font: 700 10px/12px var(--ground-font-jp);
  white-space: nowrap;
}

.ground-open-cue::after {
  content: '';
  width: 1px;
  height: clamp(24px, 6.2svh, 62px);
  background: currentColor;
  opacity: 0.6;
}

.ground-chapters {
  position: fixed;
  z-index: 30;
  right: calc(var(--ground-edge) - 2px);
  bottom: calc(var(--ground-edge) - 2px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ground-ink);
  cursor: pointer;
}

/* Approximation of the visible motif, not the original graphic. */
.ground-chapter-mark {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    var(--ground-paper) 0 1px,
    var(--ground-ink) 1px 2px
  );
}

.ground-chapter-mark::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--ground-paper);
}

.ground-chapter-mark::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Set this state explicitly; automatic scene tracking is not included. */
.ground-chapters[data-appearance='solid'] .ground-chapter-mark {
  background: var(--ground-ink);
}

.ground-culture {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 100svh;
  background: var(--ground-gray);
}

.ground-culture-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 100px clamp(24px, 6.4vw, 92px);
}

.ground-culture-title {
  margin: 0;
  color: var(--ground-green);
  font: 700 clamp(64px, 9vw, 130px)/1 var(--ground-font-en);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.ground-culture-photo {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
  object-position: center;
}

.ground-conclusion {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 100svh;
  padding-block: 110px;
  background: var(--ground-paper);
}

.ground-conclusion-cover {
  justify-self: end;
  width: var(--ground-closing-cover-width);
  height: auto;
  margin-inline-end: 9.7svh;
  border-radius: 0;
}

.ground-statement {
  width: min(490px, calc(100% - var(--ground-edge)));
  margin: 0;
  font-family: var(--ground-font-jp);
  font-size: var(--ground-text-statement);
  font-weight: 700;
  line-height: var(--ground-leading-statement);
  overflow-wrap: anywhere;
  line-break: strict;
}

.ground-footer {
  position: absolute;
  left: var(--ground-edge);
  bottom: var(--ground-edge);
  display: flex;
  align-items: center;
  gap: 18px;
  font: 400 14px/1 var(--ground-font-jp);
}

.ground-footer-divider {
  width: 1px;
  height: 12px;
  background: rgb(0 0 0 / 30%);
}

/* Recommended mobile reflow, replacing the observed collisions. */
@media (max-width: 48rem) {
  .ground-page {
    --ground-edge: 20px;
  }

  .ground-header {
    top: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
  }

  .ground-brand {
    grid-area: 1 / 1;
    justify-self: start;
  }

  .ground-language {
    grid-area: 1 / 2;
  }

  .ground-products {
    grid-area: 2 / 1 / 3 / -1;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }

  .ground-open-cue {
    top: auto;
    bottom: 24px;
  }

  .ground-culture {
    grid-template-columns: minmax(0, 1fr);
  }

  .ground-culture-copy {
    padding: 128px 24px 64px;
  }

  .ground-culture-title {
    font-size: clamp(44px, 12vw, 72px);
  }

  .ground-culture-photo {
    height: 65svh;
    min-height: 0;
  }

  .ground-conclusion {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 32px;
    padding: 128px 24px 112px;
  }

  .ground-conclusion-cover {
    justify-self: center;
    width: min(56vw, 280px);
    margin: 0;
  }

  .ground-statement {
    justify-self: center;
    width: min(100%, 32rem);
    font-size: 20px;
    line-height: 1.8;
  }

  .ground-footer {
    bottom: 32px;
    gap: 14px;
    font-size: 12px;
  }
}

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

The scaffold intentionally provides readable static culture text rather than reproducing an unresolved clipped animation state. Prepare the photograph's crop and monochrome treatment in the asset pipeline or an explicitly chosen image treatment. Do not add a second shadow to an already shadowed cover export.

This CSS has not been executed against a running implementation. Confirm wrapping after loading the actual fonts and assets, and implement the navigation, focus behavior, and any JavaScript motion separately.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-ground-paper: var(--ground-paper);
  --color-ground-ink: var(--ground-ink);
  --color-ground-gray: var(--ground-gray);
  --color-ground-green: var(--ground-green);
  --color-ground-green-bright: var(--ground-green-bright);
  --color-ground-green-mission: var(--ground-green-mission);

  --font-ground-en: var(--ground-font-en);
  --font-ground-jp: var(--ground-font-jp);
  --font-ground-utility: var(--ground-font-utility);

  --text-ground-brand: var(--ground-text-brand);
  --text-ground-utility: var(--ground-text-utility);
  --text-ground-statement: var(--ground-text-statement);

  --spacing-ground-edge: var(--ground-edge);
  --spacing-ground-cover: var(--ground-cover-width);
  --spacing-ground-closing-cover: var(--ground-closing-cover-width);
}
```

## Sources & Evidence

- **Inspected original and final page:** [LINE GROUND](https://ground.line.me/ja/). The supplied browser record reports HTTP `200` and the same original and final URL.
- **Capture date:** `2026-09-16T20:24:39.458Z`, equivalent to September 17, 2026, 05:24:39 JST.
- **Original-page desktop captures:** three `1440 × 1000` images showing the opening book, culture split scene, and closing composition.
- **Original-page narrow captures:** two `390 × 844` images showing the opening and closing, including visible header collision and content clipping.
- **Rendered DOM and computed styles:** supplied text, link destinations, source custom properties, element rectangles, font stacks, type measurements, and selected transition declarations at both viewports. These establish exact values where labeled measured, including values on offscreen elements.
- **Original-page links:** the visible wordmark points to [the Japanese index](https://ground.line.me/ja/index.html), and the closing LINE CREATIVE link points to [LINE Creative](https://creative.line.me/). These destinations were present in the supplied evidence; they were not separately browsed for this reference.
- **Capture-method limits:** the supplied process waited for loading, image decoding, and sampled layout stability within finite limits. It paused perpetual animation during readiness checks and resumed it afterward. SharedWorkers and service workers were disabled. These procedures do not prove that delayed or interactive content was fully exercised.
- **Unverified:** complete asset inventory, actual font-file resolution, intermediate viewport behavior, opened chapter and language interfaces, product-viewer interactions, keyboard and touch behavior, motion timelines, and the implementation behind clipped or transformed content.

This reference describes the current page through the supplied original-page evidence. Screenshot estimates, derived scaling relationships, and recommended implementation changes remain explicitly separate from measured source values.