# PLAID ALPHA — Style Reference

> A restrained consulting website punctuated by vivid organic shapes and delicate orbital linework.

**Website:** [alpha.plaid.co.jp](https://alpha.plaid.co.jp/)
**Original URL:** https://alpha.plaid.co.jp/
**Final URL:** https://alpha.plaid.co.jp/
**Theme:** light sections with a dark footer; blue and orange graphic accents appear in the supplied current captures.
**Inspected:** September 12, 2026, at 12:17:10.837 UTC / 21:17:10.837 JST.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current service-brand homepage, including its opening composition, navigation, strengths, service overview, case studies, news, seminars, contact area, and footer. Visual coverage includes three desktop captures and two mobile captures; rendered DOM and computed styles provide additional coverage through the document. Linked pages and opened interaction states were not inspected.

PLAID ALPHA presents CX, data, and AI consulting through a combination of editorial restraint and expressive geometry. Large, thin English lettering sits against compact Japanese explanations. Cool gray surfaces carry generous empty space, fine rules, and sweeping curves. A saturated organic shape dominates the opening scene, while photography becomes the focus in the case-study section.

The desktop composition reserves a substantial left area for persistent navigation and starts most editorial content at one quarter of the viewport width. Case studies shift a further 60px to the right and extend horizontally beyond the visible frame. On mobile, the opening artwork and its explanatory typography become separate stacked regions, navigation becomes a circular menu control, and content rails retain a preview of the next item.

This is a service website with multiple content destinations. Preserve its information architecture and changing content scales when adapting the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements belong to the recorded viewport and capture state.
- **Declared** means a custom property is present in the original-page evidence. Its existence does not establish every place it is used.
- **Estimated** means a visual approximation from the original-page screenshots. No additional pixel-sampling tools were used.
- **Calculated** means arithmetic derived from supplied measurements, such as the gap between adjacent cards.
- **Recommended** means guidance for a new implementation. The Quick Start uses these adaptations where the original implementation is unavailable.
- Token names beginning with `--alpha-` are descriptive implementation aliases, not original source variable names.
- Several prominent English labels are visible in screenshots but absent from extracted text. Their containing anchors report generic 16px text styles; those values do not measure the visible lettering. Exact display-font attribution remains unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Evidence | Role / implementation alias |
| --- | --- | --- | --- |
| Hero Gray | `#d0d0d0` | Declared `--s-color-a09e510c`; visually consistent with the opening field | Opening artwork canvas; `--alpha-hero` |
| Cool Canvas | `#dfe4ea` | Measured body, strengths, and works backgrounds; declared `--s-color-acbc22be` | Primary cool gray section surface; `--alpha-canvas` |
| Pale Surface | `#f1f4f6` | Declared `--s-color-31a831d9` | Available pale background token; exact contact-layer assignment is unverified |
| Service Surface | `#f2f4f6` | Measured service-section background at both viewports | Slightly lighter content field; `--alpha-surface` |
| Lower Section Base | `#f3f3f3` | Measured enclosing news/seminar/contact section | Base beneath lower-page content and decoration; `--alpha-lower` |
| White | `#ffffff` | Declared `--s-color-a195dbfe`; measured badges and reversed labels | Contact panel, client badges, menu disc, footer lettering; `--alpha-white` |
| Deep Ink | `#202020` | Measured footer and section-link fills | Main dark surfaces; `--alpha-ink` |
| Desktop Text | `#333333` | Measured Japanese paragraphs and headings | Standard desktop text; `--alpha-text` |
| Charcoal | `#303030` | Declared `--s-color-0f8c89ad`; measured mobile card text and seminar status | Secondary text implementation value; `--alpha-charcoal` |
| Date Gray | `#666666` | Measured desktop case-study and news dates | Muted metadata; `--alpha-muted` |
| Signal Orange | `#ff3c1e` | Declared `--s-color-30809ae3`; orange graphics visible in current captures | Organic artwork, floating discs, and form emphasis; `--alpha-orange` |
| Signal Blue | `#005aff` | Declared `--s-color-22994956`; blue artwork and keyword visible on desktop | Alternative graphic accent; `--alpha-blue` |
| Fine Gray | `#9f9f9f` | Declared `--s-color-65b41d36` | Recommended approximation for fine decorative strokes; `--alpha-line` |
| Supporting Grays | `#b0b0b0`, `#d2d7dd` | Declared `--s-color-88982333`, `--s-color-408ffeed` | Available neutral values; individual uses were not established |

The service background is measured as `#f2f4f6`, despite the nearby declared pale token being `#f1f4f6`. Keep those facts separate. Likewise, the enclosing lower section computes to `#f3f3f3`, while the contact screenshot appears cooler. The supplied data does not fully identify every intervening background layer.

### Accent Behavior

The desktop opening capture shows a blue organic shape and the blue word `TECHNOLOGY`. The mobile opening capture shows an orange shape with a different silhouette. Orange discs also appear in the desktop works and lower-page captures.

These establish multiple current appearances. They do not establish a selectable theme, a viewport-dependent color rule, or a verified animation sequence. A reusable implementation should expose the scene accent as a state variable without assuming that blue belongs exclusively to desktop or orange exclusively to mobile.

The large colored area belongs to the artwork. Section-navigation CTAs remain dark. Avoid making every link, badge, or button compete with the hero accent.

## Tokens — Typography

### Confirmed Latin Typography

**Source family:** `Montserrat`, declared through `--s-font-4cbfcfcd` and measured on `WITH` and the copyright line.

- `WITH`: 44px, weight 500, 44px line height, normal tracking on desktop.
- Copyright: 12px desktop / 13px mobile, weight 500, line height equal to font size.
- Copyright tracking: −0.72px desktop / −0.78px mobile, equivalent to `-0.06em`.

Montserrat is a supported family for these text elements. Using it for reconstructed display headings is a recommendation, not proof of the original graphical lettering's font.

### Confirmed Japanese Typography

**Source family:** `Noto Sans JP`, declared through `--s-font-7d8b391a` and measured throughout the main content.

Body text is generally 14px with substantial leading. Main Japanese introductions use weight 500; case-study titles use weight 600. The hero explanation is unusually small at 10px with 20px leading on both inspected viewports.

One strengths caption computes to generic `sans-serif`; most other Japanese captions explicitly compute to Noto Sans JP. The root element's `Times` value is not representative of the visible designed interface.

### Display Lettering

The opening slogan, large section titles, navigation labels, and brand graphics have thin strokes, broad geometric forms, and tight spacing. The small identity mark contrasts a bold `PLAID` with a lighter `ALPHA`; the large introductory brand treatment is uniformly thin.

Retain authorized wordmark and heading artwork when available. Do not infer a precise typeface from an empty anchor's inherited font declaration.

### Type Scale

| Role | Desktop | Mobile | Weight / leading | Status |
| --- | --- | --- | --- | --- |
| Opening `CX GROWTH PARTNER` | Approximately 64px equivalent | Approximately 44px equivalent | Thin visual strokes; tightly stacked lines | Estimated graphic scale |
| Large `WORKS` heading | Approximately 90px equivalent | Not visually measured | Thin uppercase lettering | Desktop estimate |
| Desktop navigation | Approximately 36px equivalent | Replaced by menu control in supplied state | Visible graphic boxes approximately 30px high | Estimated lettering; measured boxes |
| Large introductory brand | Approximately 60px equivalent over two lines | Approximately 50px equivalent on one line | Thin, compact leading | Estimated |
| `WITH` | 44px | Not visible in extracted mobile text | 500 / 1 | Measured desktop |
| Hero Japanese statement | 24px | 24px | 400 / 24px desktop, 36px mobile | Measured |
| Hero explanation | 10px | 10px | 400 / 20px | Measured |
| Strengths/service introduction | 36px | 24px | 500 / 54px desktop, 36px mobile | Measured |
| Individual strength heading | 24px | 24px | 500 / 36px; `-0.03em` tracking | Measured |
| General explanatory copy | 14px | 14px | 400 / 25.2–30.8px | Measured |
| Section captions | 14px | 14px | 400 / 14px | Measured |
| Case-study title | 24px | 18px | 600 / 36px desktop, 27px mobile | Measured |
| Client-name badge | 12px | 12px | 400 / 16.8px | Measured |
| Case-study date | 14px | 12px | 500 desktop, 400 mobile; leading 1 | Measured |
| Case-study hashtags | 14px | 14px | 400 / 21px | Measured |
| News title | 14px | 14px | 400 / 28.14px | Measured |
| News category | 12px | 13px | 400 / 1.5 | Measured |
| Seminar status / title | 12px / 14px | 12px / 14px | Status 400 / 1; title 500 / 1.5 | Measured |
| Section CTA label | 14px | 13px | 500 / 1.5 | Measured |
| Footer links | 12px | 13px | 400 / 1.5 | Measured |

The contrast between very large English display forms and small Japanese information is fundamental. Avoid enlarging every text tier together.

## Tokens — Spacing & Shapes

There is no verified universal spacing formula. The evidence instead shows recurring 18px, 24px, 30px, 36px, 60px, 90px, 120px, and 180px relationships.

### Spacing Scale

| Relationship | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main content left edge | Usually 360px | 30px | Measured |
| Works content left edge | 420px | 30px | Measured |
| Desktop navigation left edge | 60px | Not applicable | Measured |
| Outer vertical rule | Approximately 30px from left | Approximately 15px from left | Screenshot estimate |
| Adjacent content-card gap | 30px | 30px | Calculated from card rectangles |
| Client badge inset over works image | 24px top and left | Badge moves into text flow | Measured desktop relationship |
| Client badge padding | `10px 15px 11px` | Same declared padding | Measured |
| Strength heading to description | 20px | 20px | Calculated |
| Strength introduction to paragraph | 36px | 36px | Calculated |
| Service introduction to paragraph | 36px | 60px | Calculated |
| Section caption to introductory headline | 90px | 60px | Calculated for strengths/service |
| Works date to title | 24px after date line | Badge intervenes; 18px gaps | Calculated |
| Hashtag spacing | 14px horizontal, 8px between wrapped lines | Same | Calculated |
| CTA bottom to next main section | 180px | 120px | Calculated for strengths and works |
| Footer outer padding | `132px 40px 45px` | `60px 30px 45px` | Measured |

### Border Radius

| Element | Value | Evidence / interpretation |
| --- | --- | --- |
| Section navigation pill | 180px | Measured; visually a capsule |
| Client badge | 90px | Measured; visually a capsule |
| Works image | Approximately 30px | Screenshot estimate; the enclosing link itself measures 0px radius |
| Contact panel | Approximately 30px | Screenshot estimate |
| Mobile form field | Approximately 12px | Estimate from the partially visible field |
| Submit button | Approximately 45px | Estimate from its approximately 90px height |
| Mobile menu | Visible circle, 64px layout box | Circle visible in screenshot; button element itself reports 0px radius and transparent background |
| Structural sections and footer | 0px | Measured |

The mobile menu demonstrates why parent styles cannot describe all visible shapes: its circular white treatment is supplied within or through the control's graphical layers.

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Status |
| --- | --- | --- | --- |
| Complete document | 9355.66px high | 10196.28px high | Measured snapshot geometry |
| Complete hero section | 1440 × 810px | 390 × 1164.39px | Measured |
| Mobile artwork field | Not applicable | Approximately 390 × 488px | Screenshot estimate; only part of the complete hero |
| Strengths section | 2143.69px high | 3109px high | Measured |
| Service section | 1202.84px high | 1375.31px high | Measured |
| Works section | 1405.23px high | 1122.17px high | Measured |
| First works card | 840 × 659.25px | 282 × 455.94px | Measured link bounds |
| Works image | Approximately 840 × 472px | Approximately 282 × 159px | Desktop visual/geometry estimate; mobile ratio approximation |
| News/seminar card width | 320px | 282px | Measured |
| Strengths CTA | 300 × 95px | 300 × 101.5px | Measured |
| Works CTA | 300 × 95px | 322 × 101.5px | Measured |
| News/seminar CTA | 300 × 95px | 257 × 101.5px | Measured |
| Contact panel width | Approximately 900px | Approximately 330px | Screenshot estimate |
| Footer | 270px high | 333.20px high | Measured |
| Footer logo link box | 309 × 30px | 270 × 26.20px | Measured |

Document and section heights describe the recorded content state. They should not become fixed heights in a content-managed implementation.

## Components

### Identity and Desktop Navigation Rail

**Role:** establish the brand and provide direct access to the site's main destinations.

The opening identity mark sits near the upper left, approximately 60px from the desktop edge and 30px from the top. Its visible size is approximately 155 × 15px. It does not appear in the supplied lower desktop captures.

Seven navigation labels form a separate vertical group: `STRENGTH`, `SERVICE`, `WORKS`, `SEMINAR`, `NEWS`, `RECRUIT`, and `CONTACT`. The measured anchors begin at x = 60px and have visible-content boxes approximately 30px high, with 18px gaps. In the opening capture, the first anchor starts at y = 621px and the last ends at y = 940px.

The group remains at the same screen position in the works capture. In the footer capture, it moves upward by approximately the footer's 270px height and ends above the dark surface. This supports a persistent rail constrained by the main content region; the exact positioning implementation was not supplied.

The links point to dedicated routes, with recruitment pointing to `https://recruit.plaid.co.jp/plaid-alpha`. A small blue dot appears beside the first navigation label in the opening image. Its active, hover, or decorative meaning was not verified.

### Mobile Menu Control

**Role:** compact access to navigation.

A measured 64 × 64px button sits at x = 296px, y = 30px, leaving 30px clearance from the right edge. The visible control is a white circle containing two short dark horizontal strokes. It remains near the upper right in the mobile form-tail capture.

The header wordmark is approximately 185px wide in the opening phone image. It sits independently of the menu circle.

No opened menu, close state, focus behavior, or navigation transition is included in the evidence. A new implementation must supply those behaviors explicitly.

### Opening Hero Composition

**Role:** communicate the brand's combination of business expertise and technology through a distinctive visual field.

The desktop hero is a measured 810px tall at 1440px wide, matching a 16:9 rectangle at this viewport. That proportion is observed, not a verified responsive formula.

Its anatomy has five layers:

1. A flat medium-gray field.
2. A large saturated organic silhouette near the center.
3. Fine orbital curves crossing both the silhouette and surrounding empty space, with a small central pivot dot.
4. The upper-left `CX GROWTH PARTNER` slogan and the `WITH TECHNOLOGY` line.
5. A lower-right brand introduction with thin stacked lettering, a Japanese statement, and a compact explanation.

In the desktop screenshot, the blue silhouette occupies approximately x = 430–1000px and y = 171–733px. The pivot is near the hero center at x = 720px, y = 405px. The curves extend far beyond the colored mass; they should not be clipped tightly around it.

The introductory text ends at x = 1380px, preserving a 60px right inset. Its Japanese statement is measured at 24px. The supporting paragraph occupies approximately 465 × 60px, set at 10px / 20px.

A horizontal rule runs approximately 30px above the desktop hero's bottom edge. The left vertical rule continues into later sections.

On mobile, the graphic field ends around y = 488px and the remaining hero becomes a white text region. The slogan begins around y = 548px; a large single-line `PLAID ALPHA` treatment follows around y = 790px. The Japanese statement begins at the measured y = 902.39px and the explanation at y = 1004.39px. Preserve this substantial reordering rather than scaling the desktop overlap down uniformly.

### Section Heading Assembly

**Role:** create a consistent editorial entry into each content area.

The visible works header combines a long thin rule, a very large English title, and the small Japanese caption `支援実績`. The title is left aligned and sits close beneath the rule. A much larger gap separates the caption from the first image.

Most sections align at x = 360px on desktop. Works uses x = 420px for its heading and cards. Mobile captions align at x = 30px.

The DOM confirms captions for strengths, services, works, news, seminars, and contact. Only the supplied screenshots establish the exact painted appearance of the visible English headings. Reuse the measured caption system while treating unmeasured display sizes as an adaptation.

### Strengths Narrative

**Role:** explain three complementary approaches to customer experience work.

The introduction uses a two-line Japanese headline at 36px / 54px on desktop, followed after 36px by a 14px paragraph with 30.8px leading. The paragraph is approximately 602px wide.

The three detailed text blocks start at x = 871px on desktop. Their headings use 24px / 36px, weight 500, and `-0.03em` tracking. Descriptions follow after 20px at 14px / 25.2px.

On mobile, the introduction becomes 24px / 36px and the paragraph fills a 330px column. Detailed text uses an additional inset: x = 60px with a 270px width. The section becomes substantially taller, retaining large intervals between the detailed blocks.

The provided screenshots do not show the detailed graphics occupying the remaining space. Do not invent a specific diagram, icon system, or chart. For an adaptation, pair each explanation with a separately authored visual only when its content and role are defined.

### Service Overview

**Role:** describe support from CX strategy through design, implementation, and growth.

The desktop headline occupies a narrow 360px column at x = 360px and spans three lines at 36px / 54px. Its description is approximately 353px wide, set at 14px / 28px. This concentrated text column leaves a broad neighboring region in the section.

On mobile, the headline becomes 24px / 36px and remains deliberately narrow at 240px. The paragraph expands to the available 330px content width and follows after 60px.

The desktop CTA is a confirmed link to `/service`. Its label is present in the mobile evidence, but a corresponding mobile anchor is not included in the supplied extraction; activation there remains unverified.

### Section CTA Pill

**Role:** lead from a homepage summary to a dedicated section.

Desktop CTAs are measured at 300 × 95px, with a `#202020` fill, 180px radius, and `36px 40px` padding. Their child labels are white, 14px / 21px, weight 500. Examples include `サービスをもっと見る` and `支援実績をもっと見る`.

Mobile labels reduce to 13px / 19.5px, while the pills become approximately 101.5px tall. Widths vary by component: 300px for strengths, 322px for works, and 257px for the shorter news/seminar label. Do not describe the original as having one universal mobile button width.

The visual emphasis comes from the large capsule and the empty space around it. There is no observed icon or shadow needed to explain this component.

### Case-Study Rail

**Role:** foreground substantial client work through large images and editorial titles.

At desktop, cards begin at x = 420, 1290, and 2160px. Each is 840px wide, giving a calculated 30px gap. The screenshot shows one dominant image and a cropped preview of the next card at the right edge.

The first image shows three people in a bright office with plants and open shelving. A white client-logo panel occupies its lower-right corner. A small white client-name capsule sits 24px from the image's top and left edges. Whether the logo panel is baked into the image or separately layered is not established.

Below the image, the card contains a date, a substantial Japanese title, and plain hashtags. The enclosing card remains transparent against the section surface; only the image has visibly rounded corners.

Desktop text anatomy:

- Date: 14px, weight 500, `#666666`.
- Title: 24px / 36px, weight 600, starting 24px after the date line.
- Tags: 14px / 21px, starting 24px after the title, with 14px horizontal gaps and 8px wrap gaps.

On mobile, cards measure 282px wide and start at x = 30, 342, and 654px. The client capsule moves below the date into normal text flow. Date, badge, title, and tags are separated by 18px gaps. Titles reduce to 18px / 27px; hashtags retain their 14px size.

Both an internal case-study URL and an external editorial URL are recorded at the first card's same bounds. The effective activated target was not tested. A new implementation should give each destination an unambiguous semantic link.

Horizontal arrangement is confirmed. Dragging, autoplay, arrow controls, pagination, and snapping behavior are not confirmed.

### News Cards

**Role:** provide recent announcements and editorial updates.

Desktop cards occupy three 320px columns at x = 360, 710, and 1060px, separated by 30px. A date and category share a metadata line; the title sits below in 14px text with approximately double leading.

The sampled desktop card heights differ: approximately 310px, 172px, and 144px. Their metadata also starts at different vertical positions. Media and reveal completeness were not established for all items, so do not turn this uneven sample into an intentional missing-image pattern.

On mobile, the cards form a horizontal row of 282px items at a 312px pitch. Dates become 12px while categories increase to 13px. The body copy remains 14px / 28.14px.

### Seminar Cards

**Role:** introduce on-demand learning content.

The desktop geometry repeats the three 320px columns used by news. Each measured card is approximately 257px tall. The hierarchy places a media region above the status `オンデマンド配信`, followed by a 14px, weight-500 title.

Status text uses 12px / 12px. The title follows after 24px on desktop and 18px on mobile. Mobile cards measure 282px wide and remain horizontally arranged.

The media contents are not shown in the supplied section captures. Do not infer speaker portraits, illustration styles, or banner colors from the linked seminar topics.

### Contact Panel and Form Tail

**Role:** provide a direct inquiry path after the site's explanatory and editorial content.

The contact introduction uses 14px text with 30.8px desktop leading and 28px mobile leading. The visible form surface is white with approximately 30px rounded corners, placed within a pale gray field.

The desktop bottom capture shows a mostly blank panel approximately 900px wide, from x = 360 to 1260px. This does not establish an intentionally empty form. The form interior is absent from the supplied element records.

The mobile capture provides a visible form tail within a panel approximately 330px wide. Its anatomy includes a partially visible rounded field, the label `個人情報取り扱い`, the orange required marker `必須`, an unselected circular agreement control beside `同意する`, an underlined orange privacy link, and a dark `送信する` button.

The inner left edge is approximately x = 58px, or 28px inside the panel. The submit button is approximately 258 × 90px. There is approximately 120px of pale background below the panel before the footer.

Field inventory, control semantics, validation, consent enforcement, submission, and success/error states were not exercised. Preserve the visible hierarchy without fabricating the remaining form.

### Footer

**Role:** close the page with a strong identity surface and corporate utility links.

The footer is a full-width `#202020` block. Desktop padding is measured at `132px 40px 45px`; its total height is 270px. The white logo link measures 309 × 30px. Underlined utility links sit toward the lower left, and the copyright is aligned to the lower right.

On mobile, padding changes to `60px 30px 45px` and the footer grows to approximately 333px. The logo becomes 270px wide. A measured 120px interval separates the logo's bottom from the first utility-link row. The first two links share a line, the privacy link occupies the next line, and the copyright follows below.

The original-page footer displays `©PLAID, INC. ALL RIGHTS RESERVED.` and an operating-company link labeled `運営会社` pointing to `https://plaid.co.jp/`. It also links to KARTE and the privacy policy. No production-credit statement was identified in the inspected original-page evidence.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| General element transitions | Repeated `0.3s cubic-bezier(0.4, 0.4, 0, 1)` declarations | A common transition duration/easing is defined; exact triggered properties and outcomes were not exercised |
| Body background transition | `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | Background changes have a defined transition; trigger and color sequence are unknown |
| Hero geometry and accent | Different silhouettes and colors across current desktop/mobile captures | Multiple appearances are confirmed; cycle, timing, and input dependence are unverified |
| CSS animation field | Sampled element records report `animation: none` | Does not rule out motion inside SVG, script-rendered graphics, pseudo-elements, or unsampled nodes |
| Navigation persistence | Same desktop position through works; upward displacement near footer | Rail remains available through scrolling and appears bounded before the footer |
| Mobile menu | Button and persistent screen placement visible | Open/close behavior and animation were not tested |
| Content rails | Card rectangles extend beyond viewport width | Horizontal arrangement and next-item previews are supported; movement controls are unverified |
| Floating colored discs | Visible above works media and near the lower-page left margin | Presence is confirmed; cursor following, click behavior, and status meaning are unknown |
| Contact interaction | Consent and submit controls visible on mobile | Form outcomes and validation are unverified |

Use the measured easing for short interface transitions in an adaptation, but define specific properties rather than reproducing the source's extensive generic transition declarations. The many transparent gradient-related custom properties are not evidence of a visible gradient aesthetic.

**Recommended motion addition:** if an animated scene is required, let only the organic silhouette and a few orbit groups move slowly, keeping copy stable. An 8–12 second cycle is a possible design choice, not a measured source value. Supply a static reduced-motion state and avoid deriving essential information from changing color.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Opening artwork field | Medium gray, flat saturated shape, fine linework | Brand expression |
| Strengths and works | Cool gray `#dfe4ea` | Spacious editorial background |
| Service area | Measured `#f2f4f6` | Quiet section separation |
| Lower section base | Measured `#f3f3f3`, with additional visible pale treatment | News, seminars, and contact grouping |
| Client badge | Small white capsule | Readable company identification |
| Case-study body | Transparent against the section | Keeps the image dominant |
| Contact panel | Large rounded white surface | Groups form controls |
| Section CTA | Dark filled capsule | Navigation emphasis |
| Footer | Solid dark field with white identity and links | Strong page ending |

The supplied views show no prominent elevation-shadow system. Separation comes from surface changes, typography, thin rules, image crops, and rounded boundaries.

## Imagery

The hero's identity comes from a flat organic silhouette intersected by a network of fine curves. Its shape is irregular and substantial, with several rounded lobes. The orbital lines vary in angle and extent, crossing through the center and continuing into the surrounding page. A small neutral pivot dot anchors the otherwise loose geometry.

Keep the shape opaque and the curves visually delicate. Glossy lighting, volumetric shading, gradients, and soft glow would change the observed character.

In works, imagery changes to natural photography and product-interface material. The first current card uses a bright group portrait with a client logo panel; the partially visible second card shows dashboard-like interface graphics. These images retain their own colors. They are not recolored into the gray-and-accent palette.

The lower desktop screenshot includes an orange disc approximately 96px in diameter, while the works capture includes a much smaller orange disc above the first image. Their role is unknown; they should not be recreated as functional controls without further evidence.

### Observed Asset References

The following filenames appear in original-page CSS background references. The shared directory is:

`https://storage.googleapis.com/studio-design-asset-files/projects/NxqgnE0mO1/`

| Context | Observed filename | Evidence limit |
| --- | --- | --- |
| Strengths section background | `s-1440x2072_d1a722b9-7a2e-4327-927b-49ba50af25a8.svg` | CSS reference recorded; full SVG contents not opened |
| Service section background | `s-1440x1102_1f675dfd-80bc-4fb5-bdf9-07115643cdce.svg` | CSS reference recorded in mobile evidence |
| Works section background | `s-1440x1709_ee8af4f5-e2aa-4c32-a886-ddc62f67d274.svg` | CSS reference recorded in mobile evidence |
| Lower section background | `s-1439x3641_1e07ba3e-adf7-4638-9f9d-1732f8a694b2.svg` | CSS reference recorded in mobile evidence |
| Mobile menu graphic | `s-42x42_02a74eb9-c8fd-4633-9a2a-9ea33709642b.svg` | Referenced by a measured 64px button |

Dimensions embedded in filenames are not independently verified native dimensions. Complete hero-scene and case-study photograph URLs were not supplied. Do not invent paths or infer authorship from asset hosting.

## Layout & Responsive Behavior

### Desktop Structure

Most content begins at x = 360px, exactly 25% of the inspected 1440px width. With a 60px right inset, the usual editorial area spans 1020px. News and seminar cards divide it into three 320px columns with two 30px gaps.

Works begins at x = 420px and uses a much larger card width. This extra inset is visible in both the heading and image alignment. Preserve the distinction between the general content edge and the works edge.

The hero temporarily uses the full width for its overlapping composition. The footer also spans the full page, independently of the editorial inset.

### Mobile Structure

The left content edge becomes 30px and ordinary paragraphs use the remaining 330px width. Detailed strength text narrows further to 270px with 60px outer insets.

The hero's gray art field and white copy field stack vertically. The Japanese statement remains 24px but changes from a single 24px line box to a 72px block with 36px leading. Its explanation remains 10px / 20px and wraps into a measured 100px block.

Works, news, and seminars retain horizontally arranged cards instead of all becoming vertical lists. At 390px, cards are 282px wide with 30px gaps. The next item starts at x = 342px, leaving a 48px viewport preview where the rail reaches the edge.

Client badges move from the upper-left image overlay into the text sequence below the date. Footer links wrap and the copyright moves below them. Buttons retain substantial vertical padding even when their labels become slightly smaller.

### Breakpoint Evidence

The supplied inline stylesheet excerpt includes a `max-width: 1280px` rule for responsive line breaks. It does not establish that every navigation or layout change happens at 1280px. Only the 1440px and 390px layouts were visually inspected.

The Quick Start recommends a 1280px navigation-rail switch and a 767px phone layout switch. These are implementation choices requiring intermediate-width testing.

### Content and Overflow

Do not hardcode the observed total page height. Allow Japanese copy, client names, and form content to grow naturally. Keep horizontal overflow local to the content rails, and ensure the final card is reachable.

Keep the desktop navigation constrained to the main region so it does not sit over footer utility links. On phones, preserve menu contrast against both gray art and white form surfaces.

## Do’s and Don’ts

### Do

- Preserve the combination of cool gray fields, fine curves, and a concentrated saturated accent.
- Use large, thin English display forms beside compact Japanese information.
- Keep Noto Sans JP's measured hierarchy: 36px desktop introductions, 24px detailed headings, and 14px body copy.
- Reserve the desktop left area for navigation and offset works beyond the usual content edge.
- Keep case-study images large, approximately 16:9, and visibly rounded.
- Place case-study text directly on the section background.
- Move client badges beneath the date in the mobile card layout.
- Retain next-item previews in mobile content rails.
- Give section CTAs large dark capsule silhouettes and substantial surrounding space.
- End with a full-width dark footer and a prominent reversed wordmark.

### Don't

- Don't use an anchor's generic 16px font value as the size of its graphical navigation label.
- Don't claim that all prominent lettering is Montserrat; only specific live-text uses are confirmed.
- Don't make blue and orange a hardcoded desktop/mobile color rule.
- Don't label floating discs as cursors, pagination, or active indicators without interaction evidence.
- Don't turn the works section into several small boxed cards with white bodies and shadows.
- Don't replace the orbital network with unrelated stock technology illustrations.
- Don't apply glossy shading or gradients to the flat hero silhouette.
- Don't shrink the entire desktop hero into the phone viewport without rearranging its parts.
- Don't reproduce the blank desktop form area as intentional content.
- Don't invent menu transitions, carousel autoplay, or form success states.

## Recommended Implementation Additions

These are recommendations for an adaptation, not verified features of the original:

- Give graphical navigation links accessible text names and preserve semantic heading structure when display artwork is used.
- Implement the mobile menu with an accessible name, expanded state, keyboard access, and appropriate focus return. If it is modal, provide Escape dismissal and focus containment.
- Keep a visible focus indicator around cards, footer links, menu controls, and pills.
- Make content rails keyboard reachable and provide explicit navigation controls when needed; avoid requiring drag gestures.
- Reserve media dimensions before decoding to prevent the uneven card geometry seen in the partial DOM sample.
- Use meaningful client-image alternatives and keep decorative orbit SVGs out of the accessibility tree.
- Consider increasing the hero's 10px explanation to at least 12–14px for readability. This intentionally changes the measured scale.
- Use at least 16px input text on phones, visible labels, and explicit validation messages. Check small orange form text for sufficient contrast.
- Provide a static scene when reduced motion is requested. If script-driven graphics are added, stop their update loop as well as their CSS animation.
- Resolve competing card destinations into clear, separate link targets.

## Agent Prompt Guide

### Quick Color Reference

- Opening field: declared `#d0d0d0`.
- Main cool section canvas: measured `#dfe4ea`.
- Service surface: measured `#f2f4f6`.
- Lower enclosing section: measured `#f3f3f3`.
- Main text: `#333333`; mobile card text includes `#303030`.
- Footer and section pills: `#202020` with white lettering.
- Graphic accents: `#005aff` and `#ff3c1e`, treated as scene states.
- Fine-line approximation: `#9f9f9f`.

### Overall Prompt

“Create a Japanese CX consulting service homepage inspired by the current PLAID ALPHA composition. Use cool gray section fields, dark text, very large thin English display headings, and compact Noto Sans JP body copy with generous leading. On wide screens, reserve a left navigation rail and begin editorial content around one quarter of the viewport width. Build a full-width gray opening scene with an opaque organic silhouette, delicate intersecting orbital curves, and a central pivot dot. Place the English slogan upper left and a compact brand explanation lower right. Follow with spacious strengths and service narratives, an oversized horizontal case-study rail, smaller news and seminar collections, a rounded white inquiry panel, and a dark footer. On phones, separate the hero artwork from the white text region, replace the rail with a 64px circular menu control, retain horizontal card previews, and move case-study client badges below their dates. Treat motion and untested controls as separately specified implementation work.”

### Example Component Prompts

1. **Hero scene:** “Build a flat gray art field with a vivid blue organic silhouette, intersecting fine gray orbital curves, and a small center dot. Keep the composition spacious and the artwork opaque. Support orange as an explicit alternative accent state. Use a static fallback; do not imply a measured animation timeline.”
2. **Desktop navigation:** “Create seven thin uppercase navigation labels in a left rail, beginning 60px from the edge at a 1440px viewport. Keep an approximately 48px vertical pitch. Constrain persistence to the main content so the rail moves above the footer.”
3. **Case-study card:** “Create an 840px desktop case-study card on a cool gray canvas. Use a large rounded 16:9 image, a small white client capsule at its upper left, a muted date below, a 24px semibold Japanese title, and plain 14px hashtags. At a 390px viewport, use a 282px card, move the capsule below the date, and reduce the title to 18px.”
4. **Section CTA:** “Create a dark capsule approximately 300 × 95px with a centered white Japanese label at 14px, weight 500. Use no shadow or decorative icon. Allow the phone version to remain about 102px tall with a 13px label.”
5. **Contact panel:** “Create a white inquiry panel with approximately 30px corners on a pale gray field. On phones, use 30px outer margins and approximately 28px inner padding. Group a clearly labeled agreement control, an underlined privacy link, and a large dark submit capsule. Define validation and submission states separately.”
6. **Footer:** “Create a flat #202020 footer with a reversed horizontal wordmark, underlined utility links, and a small copyright line. Use 40px desktop side padding. On phones, use 30px sides, a 270px wordmark, substantial space before the links, and copyright beneath the wrapped link rows.”

## Quick Start

### CSS Custom Properties

This CSS is a reusable adaptation, not extracted source CSS. It preserves measured colors and key dimensions while approximating graphical lettering with Montserrat. Load Montserrat and Noto Sans JP separately through the project's chosen font delivery method; the fallbacks below are intentional.

Expected structure: `.alpha-main` contains `.alpha-rail > nav`, `.alpha-hero`, and the content sections. `.alpha-footer` follows outside `.alpha-main`. Put section headings in `.section-inner`; place a works track directly in its section so it can extend to the right viewport edge. The hero scene expects an SVG with `.scene-blob`, `.scene-orbit`, and `.scene-pivot` classes. Artwork, menu behavior, and form handling require separate implementation.

```css
:root {
  /* Measured or declared source colors */
  --alpha-hero: #d0d0d0;
  --alpha-canvas: #dfe4ea;
  --alpha-surface: #f2f4f6;
  --alpha-lower: #f3f3f3;
  --alpha-white: #ffffff;
  --alpha-ink: #202020;
  --alpha-text: #333333;
  --alpha-charcoal: #303030;
  --alpha-muted: #666666;
  --alpha-blue: #005aff;
  --alpha-orange: #ff3c1e;
  --alpha-line: #9f9f9f;
  --alpha-line-soft: #d2d7dd;
  --alpha-scene-accent: var(--alpha-blue);

  /* Display-font use is an approximation */
  --alpha-font-display: Montserrat, Arial, sans-serif;
  --alpha-font-body: 'Noto Sans JP', sans-serif;
  --alpha-text-body: 14px;
  --alpha-text-intro: 36px;
  --alpha-text-card: 24px;
  --alpha-text-cta: 14px;

  /* Desktop geometry; aliases are not source variables */
  --alpha-gutter: 60px;
  --alpha-rule-left: 30px;
  --alpha-content-left: 25vw;
  --alpha-section-space: 180px;
  --alpha-card-width: 840px;
  --alpha-card-gap: 30px;
  --alpha-radius-media: 30px;
  --alpha-radius-pill: 180px;
  --alpha-ease: cubic-bezier(0.4, 0.4, 0, 1);
  --alpha-ui-duration: 300ms;
}

[data-accent='orange'] {
  --alpha-scene-accent: var(--alpha-orange);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--alpha-text);
  background: var(--alpha-canvas);
  font-family: var(--alpha-font-body);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.alpha-main {
  position: relative;
  isolation: isolate;
}
.alpha-main::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 var(--alpha-rule-left);
  border-left: 1px solid var(--alpha-line);
  pointer-events: none;
  z-index: 4;
}

/* Recommended bounded persistence, approximating the captures */
.alpha-rail {
  position: absolute;
  inset: 0 auto 60px 60px;
  width: 220px;
  z-index: 10;
}
.alpha-rail nav {
  position: sticky;
  top: max(30px, calc(100dvh - 384px));
  display: grid;
  gap: 12px;
}
.alpha-rail a {
  width: fit-content;
  font-family: var(--alpha-font-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.055em;
  text-decoration: none;
}

.alpha-menu {
  display: none;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 64px;
  height: 64px;
  place-content: center;
  gap: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--alpha-white);
  color: var(--alpha-ink);
  cursor: pointer;
  z-index: 20;
}
.alpha-menu::before,
.alpha-menu::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

.alpha-hero {
  position: relative;
  min-height: 56.25vw;
  background: var(--alpha-hero);
}
.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--alpha-hero);
  color: var(--alpha-scene-accent);
}
.hero-scene::after {
  content: '';
  position: absolute;
  inset: auto 0 30px;
  border-top: 1px solid var(--alpha-line);
}
.hero-scene svg { width: 100%; height: 100%; }
.scene-blob { fill: currentColor; }
.scene-orbit {
  fill: none;
  stroke: var(--alpha-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.scene-pivot { fill: var(--alpha-line); }
.hero-brand {
  position: absolute;
  top: 30px;
  left: var(--alpha-gutter);
  width: 155px;
  z-index: 2;
}
.hero-title {
  position: absolute;
  top: 80px;
  left: var(--alpha-gutter);
  margin: 0;
  font: 400 64px / 0.95 var(--alpha-font-display);
  letter-spacing: -0.06em;
}
.hero-with {
  position: absolute;
  top: 229px;
  left: var(--alpha-gutter);
  margin: 0;
  font: 500 44px / 1 var(--alpha-font-display);
}
.hero-with span { color: var(--alpha-scene-accent); }
.hero-intro {
  position: absolute;
  right: var(--alpha-gutter);
  bottom: 60px;
  width: 465px;
  text-align: right;
}
.hero-name {
  margin: 0;
  font: 400 60px / 0.9 var(--alpha-font-display);
  letter-spacing: -0.055em;
}
.hero-name span { display: block; }
.hero-statement {
  margin: 26px 0 15px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.hero-description {
  margin: 0;
  font-size: 10px;
  line-height: 2;
}

.alpha-section {
  padding-block: var(--alpha-section-space);
  background: var(--alpha-canvas);
}
.alpha-section--service { background: var(--alpha-surface); }
.alpha-section--lower { background: var(--alpha-lower); }
.alpha-section--works {
  --alpha-content-left: calc(25vw + 60px);
}
.section-inner {
  margin-left: var(--alpha-content-left);
  margin-right: var(--alpha-gutter);
  min-width: 0;
}
.section-heading {
  border-top: 1px solid var(--alpha-line);
  padding-top: 24px;
}
.section-title {
  margin: 0;
  font: 400 clamp(52px, 6.25vw, 90px) / 1
    var(--alpha-font-display);
  letter-spacing: -0.055em;
}
.section-caption { margin: 10px 0 0; font-size: 14px; line-height: 1; }
.section-intro { margin-top: 90px; }
.intro-title {
  margin: 0;
  font-size: var(--alpha-text-intro);
  font-weight: 500;
  line-height: 1.5;
}
.body-copy {
  max-width: 602px;
  margin: 36px 0 0;
  font-size: var(--alpha-text-body);
  line-height: 2.2;
}
.strength-copy h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
}
.strength-copy p { margin: 20px 0 0; font-size: 14px; line-height: 1.8; }
.service-copy { max-width: 360px; }
.service-copy .body-copy { line-height: 2; }

.alpha-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(300px, 100%);
  min-height: 95px;
  padding: 36px 40px;
  border: 0;
  border-radius: var(--alpha-radius-pill);
  background: var(--alpha-ink);
  color: var(--alpha-white);
  font-size: var(--alpha-text-cta);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--alpha-ui-duration) var(--alpha-ease);
}
.section-action { margin-top: 60px; }

/* Native overflow and proximity snapping are recommended additions */
.works-track {
  display: flex;
  gap: var(--alpha-card-gap);
  margin: 90px 0 0 var(--alpha-content-left);
  padding: 0 var(--alpha-gutter) 8px 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.work-card {
  position: relative;
  display: flex;
  flex: 0 0 var(--alpha-card-width);
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}
.work-media {
  order: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--alpha-radius-media);
}
.work-company {
  position: absolute;
  top: 24px;
  left: 24px;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 10px 15px 11px;
  border-radius: 90px;
  background: var(--alpha-white);
  font-size: 12px;
  line-height: 1.4;
}
.work-date {
  order: 2;
  margin-top: 32px;
  color: var(--alpha-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.work-title {
  order: 4;
  margin: 24px 0 0;
  font-size: var(--alpha-text-card);
  font-weight: 600;
  line-height: 1.5;
}
.work-tags {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}
.updates-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 90px var(--alpha-gutter) 0 var(--alpha-content-left);
}
.update-card { min-width: 0; color: inherit; text-decoration: none; }
.update-title { margin: 24px 0 0; font-size: 14px; line-height: 2.01; }
.seminar-status { margin: 20px 0 0; font-size: 12px; line-height: 1; }
.seminar-title { margin: 24px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; }

/* Panel padding and input styles are implementation recommendations */
.contact-panel {
  width: min(900px, 100%);
  margin-top: 60px;
  padding: 60px;
  border-radius: 30px;
  background: var(--alpha-white);
}
.contact-panel :is(input:not([type='checkbox']), textarea, select) {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--alpha-line-soft);
  border-radius: 12px;
  background: var(--alpha-white);
  color: var(--alpha-text);
  font-size: 16px;
}
.consent { display: flex; align-items: start; gap: 8px; font-size: 13px; }
.consent input { width: 18px; height: 18px; margin: 0; }
.form-required, .form-privacy { color: var(--alpha-orange); }
.form-privacy { text-decoration: underline; text-underline-offset: 2px; }
.form-submit {
  width: min(258px, 100%);
  min-height: 90px;
  padding: 24px;
  background: var(--alpha-charcoal);
}

.alpha-footer {
  padding: 132px 40px 45px;
  background: var(--alpha-ink);
  color: var(--alpha-white);
}
.footer-logo { display: block; width: 309px; }
.footer-meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 45px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.footer-links a { font-size: 12px; line-height: 1.5; text-decoration: underline; }
.footer-copyright {
  margin: 0;
  font: 500 12px / 1 var(--alpha-font-display);
  letter-spacing: -0.06em;
}

/* Recommended thresholds; only 1440px and 390px were inspected */
@media (max-width: 1280px) {
  :root { --alpha-content-left: 60px; }
  .alpha-section--works { --alpha-content-left: 60px; }
  .alpha-rail { display: none; }
  .alpha-menu { display: grid; }
  .alpha-hero { min-height: max(640px, 56.25vw); }
}

@media (max-width: 767px) {
  :root {
    --alpha-gutter: 30px;
    --alpha-rule-left: 15px;
    --alpha-content-left: 30px;
    --alpha-section-space: 120px;
    --alpha-card-width: min(282px, calc(100vw - 60px));
    --alpha-text-intro: 24px;
    --alpha-text-card: 18px;
    --alpha-text-cta: 13px;
  }
  .alpha-section--works { --alpha-content-left: 30px; }
  .alpha-hero {
    display: grid;
    grid-template-areas: 'scene' 'title' 'intro';
    min-height: 0;
    background: var(--alpha-white);
  }
  .hero-scene {
    position: relative;
    grid-area: scene;
    height: 488px;
  }
  .hero-scene::after { bottom: 15px; }
  .hero-brand { top: 42px; width: 185px; }
  .hero-title {
    position: static;
    grid-area: title;
    margin: 60px 30px 0;
    font-size: 44px;
  }
  .hero-with { display: none; }
  .hero-intro {
    position: static;
    grid-area: intro;
    width: auto;
    margin: 160px 30px 60px;
    text-align: left;
  }
  .hero-name { font-size: 50px; line-height: 1; }
  .hero-name span { display: inline; }
  .hero-statement { margin: 60px 0 30px; line-height: 1.5; }
  .hero-description { max-width: 272px; }
  .section-title { font-size: 52px; }
  .section-intro { margin-top: 60px; }
  .body-copy { line-height: 2; }
  .strength-copy { margin-inline: 30px; }
  .service-copy { max-width: none; }
  .service-copy .intro-title { max-width: 240px; }
  .service-copy .body-copy { margin-top: 60px; }
  .alpha-pill { min-height: 101.5px; padding: 40px 16px; }
  .works-track { margin-top: 90px; }
  .work-company {
    position: static;
    order: 3;
    max-width: 100%;
    margin-top: 18px;
  }
  .work-date { color: var(--alpha-charcoal); font-size: 12px; font-weight: 400; }
  .work-title, .work-tags { margin-top: 18px; }
  .updates-track {
    display: flex;
    margin-top: 60px;
    margin-right: 0;
    padding-right: 30px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .update-card { flex: 0 0 var(--alpha-card-width); scroll-snap-align: start; }
  .seminar-title { margin-top: 18px; }
  .contact-panel { padding: 28px; }
  .alpha-footer { padding: 60px 30px 45px; }
  .footer-logo { width: 270px; }
  .footer-meta { display: block; margin-top: 120px; }
  .footer-links { width: min(270px, 100%); gap: 14px; }
  .footer-links a { font-size: 13px; }
  .footer-links a:last-child { flex-basis: 100%; }
  .footer-copyright { margin-top: 16px; font-size: 13px; }
}

/* Recommended accessible interaction treatments */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (hover: hover) {
  .alpha-pill:hover { background: var(--alpha-charcoal); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .alpha-pill { animation: none !important; transition: none !important; }
  .works-track, .updates-track { scroll-behavior: auto; }
}
```

The CSS deliberately leaves the hero static. Its 488px phone artwork height, display-type substitutions, and intermediate breakpoints are approximations. Use content-driven section heights. The generic pill is normalized to a 300px maximum; add component variants if reproducing the measured 322px works and 257px news/seminar mobile widths is required.

For the responsive works anatomy, keep `.work-media`, `.work-date`, `.work-company`, `.work-title`, and `.work-tags` as siblings inside one `.work-card` link. The company label can then switch from an absolute overlay to a normal-flow item without duplicating its text.

### Tailwind v4 Token Mapping

Optional mapping for a project already using Tailwind v4. These are adaptation tokens and do not identify the original site's framework. Define the custom properties above first.

```css
@theme inline {
  --color-canvas: var(--alpha-canvas);
  --color-hero: var(--alpha-hero);
  --color-surface: var(--alpha-surface);
  --color-ink: var(--alpha-ink);
  --color-body: var(--alpha-text);
  --color-signal-blue: var(--alpha-blue);
  --color-signal-orange: var(--alpha-orange);
  --color-rule: var(--alpha-line);

  --font-display: var(--alpha-font-display);
  --font-body: var(--alpha-font-body);
  --text-body: var(--alpha-text-body);
  --text-intro: var(--alpha-text-intro);
  --text-case: var(--alpha-text-card);
  --text-cta: var(--alpha-text-cta);

  --spacing-gutter: var(--alpha-gutter);
  --spacing-section: var(--alpha-section-space);
  --spacing-card-gap: var(--alpha-card-gap);
  --radius-media: var(--alpha-radius-media);
  --radius-pill: var(--alpha-radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [PLAID ALPHA](https://alpha.plaid.co.jp/). Both supplied URLs are identical; the reported HTTP response is 200.
- **Capture timestamp:** September 12, 2026, `2026-09-12T12:17:10.837Z`, equivalent to 21:17:10.837 JST.
- **Desktop visual evidence:** three 1440 × 1000 captures covering the opening hero, works rail, and contact-panel tail/footer.
- **Mobile visual evidence:** two 390 × 844 captures covering the opening artwork/text arrangement and contact-form tail/footer.
- **Rendered evidence:** supplied visible text, link destinations, custom properties, computed styles, and element rectangles for both viewports. Snapshot document heights are approximately 9356px desktop and 10196px mobile.
- **Inspection process:** the supplied browser report describes an initial observation of at least five seconds, bounded waits for document load, visible image decoding, finite animation completion, and sampled layout stability. Perpetual animations were paused during readiness checks and resumed afterward. Scrolling traversed intermediate viewports. SharedWorkers and service workers were disabled.
- **Limits:** readiness checks do not prove that delayed or embedded content is complete. The desktop contact panel and some news-media geometry are incomplete evidence. Menu opening, pointer response, horizontal-rail controls, link activation, form validation, and submission were not demonstrated. Scene timing and implementation were not supplied. No additional browsing, commands, file access, or linked-page inspection was performed for this reference.

All site-specific observations above describe the supplied current original-page evidence. Estimates and implementation recommendations are identified separately from measured values.