# AIG / ANDO Imagineering Group — Style Reference

> An architectural practice presented as an oversized graphic poster inside a fine white frame.

**Original URL:** [https://www.aig-japan.jp/](https://www.aig-japan.jp/)
**Final URL:** [https://www.aig-japan.jp/](https://www.aig-japan.jp/)
**Theme:** a mid-gray canvas with a peach opening state, white framing, and contrasting graphic colors across the narrative.
**Inspected evidence captured:** September 12, 2026, at 06:01:54 JST; September 11, 2026, at 21:01:54 UTC.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current corporate homepage. Three desktop captures show an opening typographic state, the architecture/structure composition, and the company-profile ending. Two mobile captures show the opening and ending. Rendered DOM evidence additionally covers the introduction, three project chapters, director section, seven testimonials, navigation, and footer. Linked pages and an opened mobile menu were not inspected.

AIG presents a practice spanning architectural and structural design through a graphic narrative. Large Japanese lettering, a faceted teal shape, yellow construction lines, blue stripes, rotated English text, and scattered colored testimonials provide the expressive layer. Small sans-serif labels, white hairlines, and precise company records provide the organizational layer.

The homepage alternates between expansive, viewport-sized compositions and compact information. Its peach opening leaves considerable empty space around cropped lettering. The gray concept composition places text and drawings at deliberately different scales and orientations. Near the end, overlapping testimonial sheets give way to a quiet company profile. Preserve this change in density when adapting the design.

## How to Read This Reference

- **Measured** means supplied computed styles, element rectangles, or custom-property values. Measurements are in CSS pixels unless stated otherwise.
- **Visual estimate** means an approximation from an attached capture, such as a card angle or frame thickness.
- **Derived** means arithmetic based on supplied measurements, such as chapter height divided by viewport height.
- **Recommended** means guidance for a new implementation. The CSS starter uses measured colors and type values alongside explicitly recommended layout rules.
- Computed font stacks establish declared families, not successful loading of every font. Parent typography does not necessarily describe embedded lettering or child elements.
- Some DOM measurements describe offscreen or transformed content. They establish content and geometry at the sampled state, not the complete visible composition or animation path.
- Token aliases introduced below are descriptive implementation names. Source variables are identified separately.

## Tokens — Colors

### Default Palette

| Name | Value | Source / suggested alias | Role and evidence |
| --- | --- | --- | --- |
| Structural Gray | `#b5b5b6` | Source `--color-gray`; alias `--canvas` | Measured body, project-link, testimonial-section, and footer background. Gray is visible in the concept and ending captures. |
| Peach Orange | `#ff9c7e` | Source `--color-peach-orange`; alias `--peach` | Opening field visually corresponds to this token. The seventh testimonial has this exact computed background. |
| White | `#ffffff` | Alias `--white` | Measured navigation and concept-copy color; visually supplies the frame, giant opening lettering, and profile dividers. |
| Almost Black | `#0a0a0a` | Source `--color-almost-black`; alias `--ink` | Measured body and testimonial text. Company values appear in this dark family. |
| Deep Teal | `#005663` | Source `--color-deep-teal`; alias `--teal` | Visually corresponds to the polygon, contour lines, and rotated “What we do?” lettering. Individual graphic fills were not measured. |
| Royal Blue | `#0050ff` | Source `--color-royal-blue`; alias `--blue` | Visually corresponds to the striped diagram, structure label, and Japanese structure lettering. |
| Bright Yellow | `#fff100` | Source `--color-bright-yellow`; alias `--yellow` | Visually corresponds to the architecture label and fine triangular construction lines. |

The gray body color remains present beneath other compositions. Do not infer the visible opening background from the body alone. Likewise, the logo appears white even though its enclosing link reports an almost-black text color.

### Supporting Section Colors

These are section and card colors, not verified user-selectable themes.

| Name | Value | Source variable | Confirmed use |
| --- | --- | --- | --- |
| Violet | `#433774` | `--color-violet` | Computed background of the long design-philosophy section; no attached capture shows that section's complete composition. |
| Soft Lavender | `#9383e4` | `--color-soft-lavender` | Testimonial 1 background. |
| Bronze | `#9a6d45` | `--color-bronze` | Testimonial 2 background. |
| Turquoise Green | `#51ba95` | `--color-turquoise-green` | Testimonial 3 background. |
| Goldenrod | `#f1b93e` | `--color-goldenrod` | Testimonial 4 background. |
| Bright Orange | `#ff5d07` | `--color-bright-orange` | Testimonial 5 background. |
| Light Cyan | `#8ceaf9` | `--color-light-cyan` | Testimonial 6 background, also visible at the top of the desktop ending capture. |
| Peach Orange | `#ff9c7e` | `--color-peach-orange` | Testimonial 7 background, visible above the company profile. |

Other declared colors include light sky blue `#8cbef9`, deep blue `#105098`, light gray `#cbcbcb`, pale gray `#f7f8f8`, and black `#1c1c1c`. Their declaration does not establish a major visible role in these captures. Avoid assigning them invented button or status meanings.

## Tokens — Typography

### Primary Sans-Serif Stack

The measured body stack is:

```css
font-family:
  "HelveticaNowText-Regular",
  Helvetica,
  Arial,
  "FOT-筑紫ゴシック Pr5 M",
  "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro",
  sans-serif;
```

Latin utility text is compact and largely regular-weight. Japanese paragraphs share the same declared stack, with Japanese font candidates later in the sequence. Most measured text uses weight `400`; the testimonial section title uses `500`.

Inter and Noto Sans JP also appear as custom-property declarations, but the sampled elements do not establish them as the active body families. The root element's Times declaration is not evidence that the visible interface uses Times.

### Graphic Lettering and Brand Artwork

The linked AIG mark combines large, thin letters with a small stacked company name. Its measured link box is `147 × 30px` on desktop and `106 × 21.625px` on mobile. Treat this as brand artwork rather than a heading assembled from a guessed font.

The opening Japanese lettering and diagram labels are visually distinct from the utility text. Their individual font declarations were not supplied. Preserve their proportions and letterforms through authorized artwork or a separately verified font choice. Do not use the `16px` values on empty paragraph or heading wrappers as their apparent display size.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking | Evidence |
| --- | --- | --- | --- | --- |
| Body default | `16 / 16px` | `16 / 16px` | `400`, normal | Measured; individual paragraphs override this tight default. |
| Header navigation | `14 / 21px` | Hidden in the captured header | `400`, `-0.28px` | Measured desktop anchors. |
| Introduction English copy | `12 / 14px` | `8 / 9px` | `400`, `0.01em` | Measured. |
| Introduction Japanese copy | `16 / 21px` | `14 / 20px` | `400`, normal | Measured. |
| Concept English copy | `16.8668 / 18.9751px` | `8 / 9px` | `400`, `0.01em` | Measured sampled state. |
| Concept Japanese copy | `16.8668 / 23.1918px` | `16 / 22px` | `400`, normal | Measured sampled state. |
| Project heading | `38 / 38px` | `20 / 20px` | `400`, `0.025em` | Measured on all three project headings. |
| “WHAT FOR AIG?” | `106 / 106px` | `54 / 40px` | `500`, `-0.01em` | Measured; mobile text is broken into three lines. |
| Testimonial paragraph | `14 / 19.6px` | `12 / 14px` | `400`, `0.025em` | Measured on seven cards. |
| “Company Profile” | `14 / 18px` | `12 / 15px` | `400`, `0.01em` | Measured heading. |
| Company record text | Approximately `14px` | Approximately `12px` | Visually regular | Screenshot estimate; individual cells were not sampled. |
| Footer credit links | `12 / 14px` | `8 / 12px` | `400`, `0.01em` | Measured links, rather than their parent paragraph. |
| Opening Japanese lettering | Visible glyphs roughly `130–145px` high | Visible glyphs roughly `110–130px` high | Exact font and CSS size unknown | Visual estimate of the captured lettering, not a font-size measurement. |

The scale is intentionally discontinuous: enormous expressive lettering sits beside very small captions. For an adaptation, retain the hierarchy while increasing essential mobile text where necessary. The measured `8px` English captions should not become a general reading-size recommendation.

## Tokens — Spacing & Shapes

There is no evidenced universal spacing formula. The layout combines fixed pixel insets, viewport-sized chapters, individually positioned artwork, and responsive text dimensions. A conventional root size can be retained in a new implementation.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Main stage side/bottom padding | `16px` | `12px` | Measured introduction and project wrappers. |
| Stage top allowance | `62px` | `48px` | Measured padding; corresponds to the header band. |
| Introduction header padding | `14px 16px 16px` | `8px 12px 10px` | Measured. |
| Introduction inner width | `768px` | `250px` | Measured. |
| Testimonial-title bottom padding | `100px` | `100px` | Measured. |
| Footer top/bottom padding | `48px / 64px` | `52px / 26px` | Measured. |
| Company-profile top space before heading | About `81px` | `57px` | Derived from section and heading rectangles. |
| Progress-marker pitch | About `17px` | About `17px` | Visual estimate. |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Frame and company rules | Approximately `1px`, white | Visual estimate. |
| Testimonial cards | Square corners | Computed `0px` radius and captures. |
| Project stage wrappers | Square corners | Computed `0px` radius. |
| Architecture label | Chamfered upper corners | Visible graphic shape; not a rounded pill. |
| Structure label | Plain rectangle | Visible graphic shape. |
| Teal diagram mass | Faceted near-circle | Visible polygonal artwork. |
| Progress markers | Tiny circles, approximately `4px` | Visual estimate. |

A global `--border-radius: 100vh` exists, but it is not applied to the sampled cards and sections. It is not a reason to round the entire interface.

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Interpretation |
| --- | --- | --- | --- |
| Document height | `33128.6875px` | `28453px` | About 33–34 viewport heights; includes substantial narrative staging. |
| Logo link | `147 × 30px`, at `16,16` | `106 × 21.625px`, at `12,13.1875` | Measured identity scale. |
| Mobile menu button | Not visible in desktop capture | `60 × 48px`, at `330,0` | Measured button box. |
| Introduction header block | `800 × 267.5px`, x=`320` | `274 × 208px`, x=`58` | Measured centered block. |
| Long philosophy section | `10000px` high | `8440px` high | Exactly ten captured viewport heights. |
| Each project chapter | `3000px` high | `2532px` high | Exactly three captured viewport heights. |
| Project link stage | `1440 × 1000px` | `390 × 844px` | One viewport inside each chapter. |
| Director chapter | `3000px` high | `2532px` high | Same three-viewport staging proportion. |
| Company-profile section | `475px` high | `659px` high | Information grows taller when the groups stack. |
| Footer | `140px` high | `114px` high | Different padding and line wrapping. |

These rectangles are snapshots of a composed page. Overlapping document coordinates and transformed elements should not be converted into a simple list of fixed top offsets.

## Components

### Persistent Frame and Desktop Header

**Role:** maintain identity and orientation while the content changes dramatically.

A white hairline runs across the viewport below the header. Two vertical lines sit approximately `16px` inside the desktop edges, with another horizontal rule approximately `16px` above the bottom. On mobile, those side and bottom insets reduce to approximately `12px`.

The header remains at the top in the opening, concept, and ending captures. The AIG mark sits at the far left. Four small white links occupy the right half: “Member,” “Works,” “News,” and “Company.” At desktop, their measured left positions are approximately `734`, `914`, `1082`, and `1246px`; the space between consecutive text boxes is approximately `130px`.

The header visually lets the current scene show through. In the ending capture, a testimonial is visible behind the header area. Avoid adding an opaque gray navigation slab to every section.

Verified destinations are `/member/`, `/works/`, `/news/`, and `/#Company-Profile`. The linked logo points to the homepage. These destinations were recorded, not opened during this analysis.

### Mobile Menu Trigger

**Role:** replace the desktop link row in the narrow header.

The measured button occupies the rightmost `60 × 48px`. Its icon comprises three fine, right-aligned horizontal strokes of decreasing length. The longest stroke is approximately `36px` wide; the shorter lengths are visual estimates.

The mobile screenshot shows the closed trigger only. Additional navigation links exist in the DOM, but their presence does not establish the appearance, opening direction, backdrop, or keyboard behavior of the menu. Implement those behaviors explicitly if recreating the shell.

### Opening Typographic Poster

**Role:** establish the practice's expressive visual identity before the detailed information.

The captured desktop state is almost entirely peach orange. Very large white Japanese lettering crosses the lower part of the frame and extends beyond the left edge. The visible fragment includes “ちてきこうきしん.” Large empty areas above the text are part of this particular captured composition.

The mobile capture retains large lettering rather than fitting the desktop line to the phone. Multiple text fragments occupy the upper and middle screen, with characters and punctuation cropped by both edges. The header and progress rail remain legible as separate visual layers.

Clipping is directly visible. The complete phrase, its original artwork format, motion direction, and final resting position are not established by these stills. Do not treat this captured state as evidence of missing content, or reconstruct unseen lettering from context.

**Adaptation anatomy:** viewport-sized peach field → separate oversized lettering layer with controlled clipping → persistent white frame → header → progress markers. Keep essential explanatory copy available outside the clipped decorative layer.

### Introduction Block

**Role:** explain the firm's combination of architectural and structural design.

This section is documented by DOM measurements rather than a dedicated attached screenshot. Its centered header block is `800px` wide on desktop and `274px` on mobile. The English description occupies an inner width of `768px` or `250px`, with smaller type on mobile.

The Japanese introduction sits in a narrower block: approximately `267px` wide on desktop and `206.75px` on mobile. Preserve the distinction between the broad identity block and the short Japanese reading measure. The surrounding composition and heading artwork were not fully captured, so no additional border, image, or panel fill should be assumed.

### Architecture / Structure Composition

**Role:** visualize the relationship between two design disciplines.

The desktop composition occupies approximately x=`298–1142` and y=`170–880`, leaving generous gray margins within the frame. It is assembled as an overlapping poster, not as a regular feature grid.

Its visible layers are:

- A yellow outlined “architecture” label with clipped upper corners near the upper left.
- A fine yellow diagonal extending from the label through the composition.
- A tall fan of nested triangular yellow lines.
- A solid, faceted teal shape near the upper center.
- Large teal “What we do?” lettering rotated to read down the right side.
- Closely spaced blue horizontal rules in the lower middle.
- Concentric, irregular teal contours overlapping those rules.
- A blue rectangular “structure” label with pale lettering.
- Yellow “建築” and blue “構造” lettering integrated into the drawing.

The Japanese explanation is a narrow white block at x≈`330`, width≈`211px`. The English explanation sits at x≈`956`, width≈`186px`, and is right aligned in the screenshot. Their asymmetry is central to the composition.

The mobile DOM establishes a different text arrangement: the Japanese paragraph becomes approximately `338px` wide at x≈`26`, while the English copy becomes `8px` text in a separate block. No mobile diagram screenshot was supplied, so exact mobile artwork positions remain unverified.

**Recommended construction:** use a scalable SVG for the graphic geometry, with readable copy in independent HTML blocks. Keep linework sharp and preserve intentional intersections. A general-purpose icon library cannot reproduce this artwork.

### Project Chapter

**Role:** introduce a selected work and link to its detail page.

The DOM records three full-viewport links, each inside a three-viewport section. Each contains a project number, title, English and Japanese descriptions, and “Year,” “Place,” and “Texture” metadata.

| Project | Year | Place | Texture | Recorded destination |
| --- | --- | --- | --- | --- |
| “麹町444” | 2022 | “東京都千代田区” | PC | `/works/1563/` |
| “渋原XROSS” | 2026 | “東京都渋谷区” | STEEL | `/works/1564/` |
| “代官山スクエア” | 2024 | “東京都渋谷区” | PC | `/works/1565/` |

The desktop title uses white `38px` type with `0.025em` tracking; mobile uses `20px`. Desktop link padding is `62px 16px 16px`; mobile padding is `48px 12px 12px`. Recorded title positions fall in the lower portion of their stages.

The supplied captures do not show these project compositions. The data supports chapter anatomy and typography, but not claims about photography, image crop, video, image transitions, or hover previews. Preserve a media slot only when actual project assets are available.

### Director Chapter

**Role:** identify the practice's leadership within the narrative.

The rendered text includes “ANDO Kosaku” and “Structural Engineer/General Director.” The chapter occupies three viewport heights at both measured sizes. A large, nearly square heading/artwork wrapper changes from approximately `570 × 573px` to `308 × 310px`.

The wrapper is not sufficient evidence for a portrait, a particular illustration, or its animation. Treat those aspects as unverified rather than supplying a generic executive photograph.

### Testimonial Collage

**Role:** present seven collaborators' perspectives as a collection of individual sheets.

The section title is “WHAT FOR AIG?” in white. Desktop uses a `106px` single-line treatment; mobile breaks it into “WHAT,” “FOR,” and “AIG?” with `54px` type and a tight `40px` line height.

Each card contains a prominent numeral, speaker name, optional organization, thin dark header rules, and a Japanese paragraph. The desktop ending capture clearly shows the peach seventh card tilted clockwise by approximately five degrees, with the cyan preceding card partially visible behind it.

Measured transformed card bounds are approximately `514–539px` wide on desktop and `301–341px` on mobile. These are bounding boxes after transforms, not verified unrotated CSS widths. Desktop cards alternate between left and right positions; mobile cards occupy a much narrower central track.

Desktop paragraphs are around `343–354px` wide and sit beside the numeral region. Mobile paragraphs span approximately `272–280px`, nearly the inner card width, indicating a reorganization of the card body. Their type changes from `14 / 19.6px` to `12 / 14px`.

The cards have flat fills and square corners. Visible overlap, slight rotation, and color changes provide separation. Dragging, swiping, or carousel controls were not demonstrated.

### Company Profile

**Role:** provide exact institutional information after the graphic narrative.

A white horizontal rule introduces the section. On desktop, “Company Profile” runs vertically near x=`96`. Two groups of label/value rows sit to its right. The first starts near x=`166`, the second near x=`783`; both are approximately `565px` wide, with about `52px` between them.

The first group contains eight rows: company name, address, telephone, email, representative, establishment date, capital, and employees. The second contains office registration and professional affiliations. Labels are white, values dark, and each row ends with a fine white rule. The desktop label column is approximately `100px` wide.

On mobile, the heading becomes horizontal at x≈`27`. Both groups form one continuous column approximately `336px` wide. Labels remain beside their values, using approximately `73px` for the label column. Long company names, addresses, credentials, and affiliations wrap naturally. Standard single-line rows are roughly `44px` tall in the screenshot, while multi-line rows expand.

This component uses typography and rules without a surrounding card. Use semantic definition lists for a new implementation. The email and telephone appear as text in the supplied link inventory; clickable contact actions would be an addition.

### Footer

**Role:** close the page with copyright and production attribution.

The footer shares the gray canvas. Desktop text begins around x=`100.55`; mobile begins around x=`24.47`. It is white, small, and left aligned, with underlined production links.

The current footer explicitly states that the website is produced by TRICLE.LTD and designed and developed by TERMINAL INC. This attribution is independently present in both the original-page DOM and the ending captures.

Desktop credit links use `12 / 14px`; mobile links use `8 / 12px`. The mobile version breaks the production and design/development statements onto separate lines. Increasing the mobile credit size is a recommended readability adjustment, not an observed source behavior.

### Vertical Progress Rail

**Role:** provide a small persistent location cue within the long page.

Ten small dots are visible along the right side in the supplied states. Their centers are approximately `17px` apart, near x=`1404` on desktop and x=`366` on mobile. The active mark is brighter than the others. The opening, concept, and ending captures show different active positions.

The rail appears vertically centered around the viewport midpoint. Exact section-to-dot mapping and click behavior are unknown. Do not turn it into a verified navigation feature solely because it resembles pagination.

## Tokens — Motion & Interaction

| Treatment | Supplied value or observation | Evidence limit |
| --- | --- | --- |
| Logo, desktop navigation, and footer-link transition | `opacity 0.6s cubic-bezier(0, .4, .25, 1)` | Measured transition declaration. No hovered screenshot supplied. |
| Testimonial reveal/movement transition | `translate 1.2s cubic-bezier(0, .4, .25, 1), opacity 1.2s cubic-bezier(0, .4, .25, 1)` | Measured on all seven cards at both sizes. Trigger, direction, and travel distance unverified. |
| Hover/selected opacity tokens | `--opacity-hover: .6`; `--opacity-selected: .6` | Declared values; their use on a specific interaction was not exercised. |
| Duration vocabulary | `.6s`, `.8s`, `1.2s`, `1.6s`, `3.2s` | Declared global tokens, not an animation schedule. |
| Delay vocabulary | `0s`, `.1s`, `.2s`, `.6s` | Declared global tokens; element assignments unknown. |
| Alternate easing | `cubic-bezier(0,.4,.4,1)`, `cubic-bezier(0,.6,.25,1)`, `cubic-bezier(.76,0,.24,1)`, `cubic-bezier(.7,0,.1,1)` | Declared under slow, extra-slow, layout, and accordion aliases. No accordion interaction was inspected. |
| Chapter staging | Ten-viewport philosophy section; three-viewport project and director sections | Measured geometry strongly suggests scroll-directed presentation; exact pinning and scrubbing implementation is unavailable. |
| Persistent shell | Header, frame, and rail remain in equivalent screen locations across supplied captures | Visually supported. Exact positioning selectors were not supplied. |

The captures establish a moving-page design vocabulary, but do not document a complete temporal sequence. An `animation: none` value on sampled elements does not rule out JavaScript transforms, child animations, or graphic animation elsewhere.

The capture process waited for finite motion and sampled layout/text stability, with a 15-second overall readiness limit and a five-second pending-image limit. Perpetual animations were paused during readiness checks and resumed afterward. These procedures do not establish animation duration, semantic completeness, or a final resting state for every scene.

No direct evidence establishes scroll locking, mandatory snapping, text-marquee direction, autoplay, sound behavior, or menu animation. Play and sound icon variables exist, but their declaration alone does not prove a visible media player.

**Recommended adaptation:** use the measured 600ms opacity and 1200ms card-transition vocabulary where appropriate. Make any added scroll choreography explicit and retain a readable normal-flow version for reduced motion and script failure.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | Flat `#b5b5b6` | Neutral field for artwork and institutional information. |
| Opening field | Flat peach orange | Strong opening identity behind white oversized lettering. |
| Persistent frame | Fine white rules, visually transparent interior | Unifies changing scenes and defines the viewport boundary. |
| Diagram layers | Solid polygon, fine linework, flat rectangular labels | Expresses structure and architectural relationships. |
| Testimonial sheets | Individual flat colors, square corners, slight rotations | Distinguishes voices and creates a physical collage effect. |
| Company records | Canvas background, white rules, contrasting labels and values | Compact factual reading surface. |

No soft-shadow elevation system, gradient surface system, or glass blur is visible in the attached states. This observation does not cover uninspected menus or linked pages.

## Imagery

The visible image language is graphic and diagrammatic: oversized lettering, faceted geometry, nested triangles, horizontal stripes, irregular contour lines, and bilingual labels. Fine vectors and flat color masses coexist without texture or simulated material shading.

Keep line weights delicate relative to the large graphic forms. The architecture/structure artwork depends on overlap: the yellow diagonal crosses other layers, contour lines sit over blue rules, and lettering changes orientation. Separating every element into an isolated card would remove the central visual relationship.

No photographic asset appears in the five supplied captures. The project and director DOM may correspond to additional media, but its visual treatment and asset URLs were not supplied. Do not infer photographic subjects or grading from the firm's industry.

### Observed Asset References

| Asset or reference | Available evidence | Implementation implication |
| --- | --- | --- |
| AIG logo artwork | Visible in all captures; measured link boxes | Preserve the authorized mark. No asset URL was supplied. |
| Opening Japanese lettering | Visible in desktop and mobile opening states | Exact asset format and font unknown. Keep an independent lettering layer. |
| Architecture/structure composition | Desktop capture | Use authorized artwork or separately authored vectors; original asset paths are unknown. |
| `--icon-enter` | Declared inline SVG data URL | A source icon reference; placement not established. |
| `--icon-arrow-scroll` | Declared inline SVG data URL | “Scroll” exists in page text, but the full control was not visually inspected. |
| `--icon-pulldown` | Declared inline SVG data URL | Declaration only; do not infer an inspected dropdown. |
| `--icon-play`, `--icon-sound-on`, `--icon-sound-off` | Declared inline SVG data URLs | Asset availability does not establish media-player behavior. |

Do not invent production asset filenames. The reusable CSS below supplies the shell and information components; it does not replace the site's distinctive lettering and diagrams.

## Layout & Responsive Behavior

The site changes composition rather than applying a uniform scale factor.

| Aspect | Desktop evidence | Mobile evidence |
| --- | --- | --- |
| Header | Four links in the right half; `147px` logo | Menu trigger; `106px` logo. |
| Frame | Approximately `16px` side/bottom inset | Approximately `12px` side/bottom inset. |
| Opening typography | One captured line across the lower field | Multiple large fragments, cropped at the edges. |
| Introduction | `800px` centered header block | `274px` centered header block. |
| Concept Japanese copy | Narrow `211px` block | Approximately `338px` block. |
| English secondary copy | `12px` introduction; approximately `16.87px` concept | Both measured at `8px`. |
| Project headings | `38px` | `20px`, with revised description line breaks. |
| Testimonials | Alternating horizontal positions; body beside numeral region | Narrow central track; paragraph spans the card interior. |
| Testimonial title | One line | Three tightly stacked lines. |
| Company profile | Vertical caption and two information groups | Horizontal caption and one information column. |
| Footer | Two short desktop lines | Three mobile lines with smaller type. |

The repeated project dimensions maintain a three-viewport chapter at both tested sizes. Company information follows content height instead. This distinction prevents a reading table from inheriting the empty staging space used by graphic chapters.

Only two viewport widths were supplied. The exact source breakpoint, tablet arrangement, landscape behavior, browser-chrome handling, and safe-area behavior are unknown. The starter uses a recommended `48rem` breakpoint and stable viewport units; these are implementation choices, not extracted source rules.

## Do’s and Don’ts

### Do

- Keep the gray `#b5b5b6`, peach `#ff9c7e`, and white frame as the principal visual relationship.
- Use the teal, blue, and yellow together in purposeful diagram compositions.
- Preserve the contrast between oversized graphic lettering and compact factual information.
- Keep the frame and identity present across different narrative states.
- Give the architecture and structure artwork room to overlap and change orientation.
- Preserve the seven testimonial colors and their square, slightly tilted sheet treatment.
- Recompose mobile text blocks and company rows instead of shrinking the entire desktop canvas.
- Use thin rules and alignment to organize company information.
- Distinguish viewport-based graphic stages from content-sized reading sections.

### Don’t

- Don't replace the homepage's narrative with a generic sequence of feature cards and conversion buttons.
- Don't apply the globally declared pill radius to testimonials or company records.
- Don't convert every graphic accent into a UI status color.
- Don't guess the font of the giant lettering from a parent element's computed style.
- Don't add generic architecture photography where no original asset has been inspected.
- Don't interpret a static crop as the complete animation or a missing-content failure.
- Don't infer dragging, playback, menu behavior, or mandatory scroll snapping from suggestive tokens alone.
- Don't use `8px` captions as the default size for essential mobile information.
- Don't add shadows and glossy gradients to the observed flat surfaces.

## Recommended Implementation Additions

These recommendations are not verified features of the original website:

- Give the mobile menu button an accessible name, `aria-expanded`, and an explicit controlled region. Support keyboard operation, Escape, and focus restoration if it opens an overlay.
- Keep the decorative frame noninteractive. If the progress dots become links, provide usable hit areas and accessible section names without overlapping targets.
- Provide complete readable text separately from clipped or vectorized Japanese lettering. Decorative duplicates should be hidden from assistive technology.
- Review contrast for every reading surface. Small white text on the gray and peach fields has limited contrast; use dark essential text or an appropriate contrasting reading surface while retaining white decorative rules.
- Increase tiny English captions and mobile footer text where reading is required. Do not depend on zoom alone to make essential content usable.
- Preserve a normal document-flow version of the narrative. Reduced-motion mode should remove long empty staging intervals and reveal all meaningful text.
- Use definition lists for company records, real links for projects, and visible focus indicators. Make contact values actionable only as an intentional enhancement.
- Ensure testimonial overlaps never permanently cover text. Validate this at narrow widths, with larger text settings, and when motion is disabled.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and company section: `#b5b5b6`.
- Opening field: `#ff9c7e`.
- Frame and expressive reversed lettering: `#ffffff`.
- Main factual text: `#0a0a0a`.
- Architecture/structure artwork: teal `#005663`, blue `#0050ff`, yellow `#fff100`.
- Testimonial sequence: `#9383e4`, `#9a6d45`, `#51ba95`, `#f1b93e`, `#ff5d07`, `#8ceaf9`, `#ff9c7e`.
- Separation: hairlines, overlap, and color; square corners without soft shadows.

### Overall Prompt

“Create a corporate homepage for an architectural and structural design practice inspired by AIG's supplied current-page evidence. Use a mid-gray `#b5b5b6` canvas, a peach `#ff9c7e` opening composition, a persistent fine white viewport frame, a small linked brand mark at the upper left, and compact navigation. Build large graphic scenes with cropped Japanese lettering, teal polygonal forms, yellow construction lines, blue stripes, and rotated English labels. Follow the narrative with seven flat colored testimonial sheets and a precise company profile with white rules. Use the supplied Helvetica Now and Japanese fallback stack where licensed and available. Recompose the layout on mobile: retain expressive lettering, replace navigation with a menu trigger, widen Japanese reading blocks, and stack company information. Treat exact artwork and unobserved interactions as separate implementation requirements.”

### Example Component Prompts

1. **Persistent shell:** “A transparent 62px desktop header with a 147 × 30px brand asset at 16px from the top and left. Place four white 14px links across the right half. Add a 1px white viewport frame with 16px side and bottom insets. At mobile, use a 48px header, a 106px logo, 12px frame insets, and a 60 × 48px menu button.”
2. **Opening poster:** “A viewport-sized flat peach field with huge white Japanese lettering that intentionally extends beyond the visible edges. Preserve generous empty space. Put complete accessible copy outside the clipped decorative layer. Do not invent a motion direction from the reference still.”
3. **Concept diagram:** “Compose a gray architectural poster with a teal faceted mass, nested yellow triangles, a chamfered architecture label, fine blue horizontal rules, and irregular teal contour rings. Rotate ‘What we do?’ down the right side. Place Japanese and English explanations in separate asymmetric blocks.”
4. **Testimonial sheet:** “A square-cornered colored sheet with a prominent dark numeral, name and organization separated by fine dark rules, and a compact Japanese paragraph. Use slight rotation and controlled overlap. On mobile, let the paragraph span the full card interior. Use a 1200ms translate/opacity transition only when an explicit reveal behavior is implemented.”
5. **Company profile:** “A flat gray company-information section with a small white caption, white labels, dark values, and fine white row dividers. Desktop has a vertical caption and two information groups. Mobile has a horizontal caption and one continuous list, with labels remaining beside their wrapping values.”

## Quick Start

### CSS Custom Properties

This is an adaptation, not recovered source CSS. Colors, font candidates, key type sizes, and transition values come from supplied evidence. Selector names, the `48rem` breakpoint, SVG integration, sticky staging, and unrotated card sizes are recommendations. The source's full scroll choreography is not implemented here.

Use `.chapter > .chapter-stage` for an optional staged project. Use normal-flow sections for testimonials and company information. Supply the logo and concept artwork independently; no original asset paths were available.

```css
:root {
  /* Measured source palette and declared graphic colors */
  --canvas: #b5b5b6;
  --peach: #ff9c7e;
  --white: #fff;
  --ink: #0a0a0a;
  --teal: #005663;
  --blue: #0050ff;
  --yellow: #fff100;
  --violet: #433774;
  --lavender: #9383e4;
  --bronze: #9a6d45;
  --green: #51ba95;
  --gold: #f1b93e;
  --orange: #ff5d07;
  --cyan: #8ceaf9;

  --font-body: "HelveticaNowText-Regular", Helvetica, Arial,
    "FOT-筑紫ゴシック Pr5 M", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", sans-serif;

  /* Source-derived dimensions */
  --frame-inset: 16px;
  --header-height: 62px;
  --logo-width: 147px;
  --text-project: 38px;
  --text-quote: 14px;
  --leading-quote: 1.4;
  --text-profile: 14px;
  --text-credit: 12px;
  --rule: 1px;
  --ease-aig: cubic-bezier(0, .4, .25, 1);
  --motion-link: 600ms;
  --motion-card: 1200ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4; /* Recommended readable default */
}

button, input, textarea { font: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; }

.viewport-frame {
  position: fixed;
  z-index: 50;
  top: var(--header-height);
  right: var(--frame-inset);
  bottom: var(--frame-inset);
  left: var(--frame-inset);
  border: var(--rule) solid var(--white);
  border-top: 0;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 51% 49%;
  align-items: start;
  padding: 16px;
  border-bottom: var(--rule) solid var(--white);
  color: var(--white);
  background: transparent;
}

.brand {
  display: block;
  width: var(--logo-width);
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: -4px;
  padding-right: min(8.333vw, 120px);
}

.site-nav a {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand, .site-nav a, .site-footer a {
  transition: opacity var(--motion-link) var(--ease-aig);
}

.menu-toggle {
  display: none;
  border: 0;
  border-radius: 0;
  color: var(--white);
  background: transparent;
}

.menu-lines {
  display: grid;
  justify-items: end;
  gap: 7px;
  width: 36px;
}

.menu-lines span {
  display: block;
  height: 1px;
  width: 36px;
  background: currentColor;
}

.menu-lines span:nth-child(2) { width: 18px; }
.menu-lines span:nth-child(3) { width: 12px; }

.scene, .chapter-stage {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-height) var(--frame-inset)
    var(--frame-inset);
}

.opening-scene {
  position: relative;
  overflow: clip;
  color: var(--white);
  background: var(--peach);
}

/* Recommended static lettering treatment; exact source font unknown. */
.hero-lettering {
  position: absolute;
  left: -2vw;
  bottom: 20%;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(120px, 12vw, 180px);
  font-weight: 400;
  line-height: 1;
}

/* Recommended artwork container; the SVG must supply its composition. */
.concept-art {
  width: min(100%, 850px);
  margin-inline: auto;
}

.concept-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional approximation of measured three-viewport project staging. */
.chapter { min-height: 300svh; }

.chapter-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--canvas);
  text-decoration: none;
}

.project-title {
  margin: 0;
  color: var(--white);
  font-size: var(--text-project);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .025em;
}

.progress-rail {
  position: fixed;
  z-index: 55;
  top: 50%;
  right: calc(var(--frame-inset) + 18px);
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  pointer-events: none; /* Static indicator in this starter */
}

.progress-rail li {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--white);
  opacity: .4; /* Recommended approximation */
}

.progress-rail [aria-current="step"] { opacity: 1; }

.voices {
  padding: 65px 16px 100px;
  overflow: clip;
}

.voices-title {
  margin: 0;
  padding-bottom: 100px;
  color: var(--white);
  font-size: 106px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}

.quote-stack {
  display: grid;
  width: min(100%, 850px);
  margin-inline: auto;
  gap: 24px; /* Readable baseline; overlap requires separate validation. */
}

.quote-card {
  --sheet: var(--peach);
  --tilt: 3deg;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 20px;
  width: min(100%, 512px);
  padding: 16px;
  justify-self: end;
  color: var(--ink);
  background: var(--sheet);
  border-radius: 0;
  rotate: var(--tilt);
  transition: translate var(--motion-card) var(--ease-aig),
    opacity var(--motion-card) var(--ease-aig);
}

.quote-card:nth-child(even) { justify-self: start; }
.quote-card:nth-child(1) { --sheet: var(--lavender); }
.quote-card:nth-child(2) { --sheet: var(--bronze); --tilt: -3deg; }
.quote-card:nth-child(3) { --sheet: var(--green); }
.quote-card:nth-child(4) { --sheet: var(--gold); --tilt: -2deg; }
.quote-card:nth-child(5) { --sheet: var(--orange); }
.quote-card:nth-child(6) { --sheet: var(--cyan); --tilt: 2deg; }
.quote-card:nth-child(7) { --sheet: var(--peach); --tilt: 5deg; }

.quote-number {
  grid-row: span 2;
  font-size: 100px; /* Recommended display size */
  line-height: 1;
}

.quote-person {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding-block: 5px;
}

.quote-body {
  margin: 0;
  font-size: var(--text-quote);
  line-height: var(--leading-quote);
  letter-spacing: .025em;
}

.company-profile {
  border-top: var(--rule) solid var(--white);
  scroll-margin-top: var(--header-height);
}

.company-inner {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  margin-inline: 6.7vw;
  padding-top: 80px;
}

.company-title {
  margin: 0;
  color: var(--white);
  font-size: var(--text-profile);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: .01em;
  writing-mode: vertical-rl;
}

.profile-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
}

.profile-list { margin: 0; }

.profile-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 51px;
  padding: 26px 0 6px;
  border-bottom: var(--rule) solid var(--white);
  font-size: var(--text-profile);
  line-height: 18px;
}

.profile-row:first-child { padding-top: 0; }
.profile-row dt { color: var(--white); }
.profile-row dd { margin: 0; overflow-wrap: anywhere; }

.site-footer {
  padding: 48px 6.98vw 64px;
  color: var(--white);
  background: var(--canvas);
  font-size: var(--text-credit);
  line-height: 14px;
  letter-spacing: .01em;
}

.site-footer p { margin: 0; }
.site-footer a { text-decoration: underline; }

@media (hover: hover) {
  .brand:hover, .site-nav a:hover, .site-footer a:hover {
    opacity: .6;
  }
}

/* Recommended focus treatment; validate contrast on every surface. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 48rem) {
  :root {
    --frame-inset: 12px;
    --header-height: 48px;
    --logo-width: 106px;
    --text-project: 20px;
    --text-quote: 12px;
    --leading-quote: 1.166667;
    --text-profile: 12px;
    --text-credit: 10px; /* Recommended increase from measured 8px */
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) 60px;
    align-items: center;
    padding: 0 0 0 12px;
  }

  .site-nav { display: none; }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 60px;
    height: 48px;
    padding: 0;
  }

  .hero-lettering {
    top: 80px;
    bottom: auto;
    width: 150%;
    font-size: 128px;
    line-height: 1.15;
    white-space: normal;
  }

  .progress-rail { right: 22px; }
  .voices-title { font-size: 54px; line-height: 40px; }
  .voices-title span { display: block; }
  .quote-stack { gap: 36px; }

  .quote-card, .quote-card:nth-child(even) {
    justify-self: center;
    width: min(100%, 296px);
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
    padding: 12px;
  }

  .quote-number { grid-row: auto; font-size: 80px; }
  .quote-body { grid-column: 1 / -1; }

  .company-inner {
    display: block;
    margin-inline: 6.93vw;
    padding-top: 56px;
  }

  .company-title {
    margin-bottom: 36px;
    writing-mode: horizontal-tb;
    line-height: 15px;
  }

  .profile-columns { grid-template-columns: 1fr; gap: 0; }

  .profile-row {
    grid-template-columns: 73px minmax(0, 1fr);
    min-height: 44px;
    padding: 24px 0 4px;
    line-height: 15px;
  }

  .profile-list + .profile-list .profile-row:first-child {
    padding-top: 24px;
  }

  .site-footer { padding: 52px 6.27vw 26px; line-height: 12px; }
}

/* Recommended readable fallback; no hidden content or empty scroll runs. */
@media (prefers-reduced-motion: reduce) {
  .chapter { min-height: auto; }
  .chapter-stage { position: relative; min-height: auto; }
  .quote-card { rotate: none; translate: none; opacity: 1; }
  .hero-lettering {
    position: static;
    width: auto;
    white-space: normal;
    font-size: clamp(40px, 8vw, 80px);
  }
  .brand, .site-nav a, .site-footer a, .quote-card {
    transition: none;
  }
}
```

The testimonial colors are source-derived; the starter's card angles and unrotated widths are approximations. Cards remain separated for a readable baseline. Controlled overlap and scroll reveals need additional implementation and validation. The menu button styling also needs an accessible menu implementation; it does not provide one by itself.

Example semantic markup for the company component:

```html
<section class="company-profile" id="Company-Profile"
  aria-labelledby="company-heading">
  <div class="company-inner">
    <h2 class="company-title" id="company-heading">Company Profile</h2>
    <div class="profile-columns">
      <dl class="profile-list">
        <div class="profile-row">
          <dt>名称</dt>
          <dd>株式会社ANDO Imagineering Group / AIG</dd>
        </div>
        <div class="profile-row">
          <dt>EMAIL</dt>
          <dd>info@aig-japan.jp</dd>
        </div>
      </dl>
      <dl class="profile-list">
        <div class="profile-row">
          <dt>事務所登録</dt>
          <dd>一級建築士事務所 東京都知事登録 第60243号</dd>
        </div>
      </dl>
    </div>
  </div>
</section>
```

The markup uses actual source labels and values solely to demonstrate the component structure. It is a shortened example, not the complete company profile.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This does not identify the original site's framework. Define the custom properties above first.

```css
@theme inline {
  --color-canvas: var(--canvas);
  --color-peach: var(--peach);
  --color-ink: var(--ink);
  --color-teal: var(--teal);
  --color-royal: var(--blue);
  --color-bright-yellow: var(--yellow);
  --color-lavender: var(--lavender);
  --color-bronze: var(--bronze);
  --color-turquoise: var(--green);
  --color-goldenrod: var(--gold);
  --color-bright-orange: var(--orange);
  --color-light-cyan: var(--cyan);

  --font-sans: var(--font-body);
  --text-project: var(--text-project-size, 38px);
  --text-testimonial: var(--text-quote);
  --text-company: var(--text-profile);
  --text-credit-small: var(--text-credit);
  --spacing-frame: var(--frame-inset);
  --spacing-header: var(--header-height);
  --ease-aig: cubic-bezier(0, .4, .25, 1);
}
```

For responsive project text in Tailwind, use explicit utilities such as `text-[20px] md:text-[38px]` with a breakpoint chosen for the implementation, or introduce a separately named responsive source property. Avoid mapping a custom property back to itself.

## Sources & Evidence

- **Original and final website:** [https://www.aig-japan.jp/](https://www.aig-japan.jp/). The supplied inspection reports HTTP `200` and no URL change.
- **Capture timestamp:** `2026-09-11T21:01:54.511Z`, equivalent to September 12, 2026, 06:01:54.511 JST.
- **Desktop evidence:** three attached `1440 × 1000` captures showing the peach opening, architecture/structure diagram, and company-profile ending; supplied rendered text, links, custom properties, and element styles at that viewport.
- **Mobile evidence:** two attached `390 × 844` captures showing the opening and company-profile ending; supplied rendered text, links, custom properties, and element styles at that viewport.
- **Current identity and attribution:** the original-page company profile names ANDO Imagineering Group / AIG. Its visible footer and rendered links explicitly identify production by TRICLE.LTD and design/development by TERMINAL INC.
- **Interaction evidence:** different scroll states, persistent screen framing, responsive geometry, and measured transition declarations. No recorded menu opening, hover demonstration, project-page visit, playback action, or complete animation sequence was supplied.
- **Inspection limitations:** readiness checks and scrolling were performed by the supplied capture process. SharedWorkers and service workers were disabled. Delayed content, unexercised interactions, individual graphic asset paths, exact breakpoints, and successful loading of every declared font remain unverified. No additional browsing, command execution, or file access was performed for this reference.

This document describes the current homepage represented by the supplied evidence. Recommendations and reusable code are adaptations; they are not claims about unobserved original behavior.