# MI-6 — Style Reference

> A research company presented through soft material-like volumes, exceptionally thin English typography, and precise blue controls.

**Website:** [mi-6.co.jp](https://mi-6.co.jp/)
**Original URL:** https://mi-6.co.jp/
**Final URL:** https://mi-6.co.jp/
**Theme:** light content surfaces, a saturated blue service region, and a dark navy footer.
**Inspected:** September 17, 2026, at 05:05:40.861 JST; supplied retrieval timestamp: September 16, 2026, at 20:05:40.861 UTC.
**Viewports:** 1440 × 1000 and 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, including the hero, client logos, News, Service, Customer Stories, Seminar, miLab, Download, Contact, and footer. Visual captures cover the desktop opening, customer stories, desktop footer, mobile opening, and mobile footer. Supplied rendered DOM and computed styles extend coverage to the remaining homepage sections. Destination pages and opened navigation states were not inspected.

MI-6 combines a restrained corporate information structure with a soft, almost optical material study. The opening image contains large blurred volumes in lavender, cyan, blue, pink, and white. A dark blue, extremely thin English headline stretches across that field. Japanese supporting text is smaller, darker, and substantially heavier. This contrast between expansive English typography and practical Japanese information continues throughout the page.

The homepage is a substantial corporate publishing surface. It introduces three service offerings, presents customer evidence, publishes news and seminars, links to technical articles, and provides document and contact routes. Wide spacing and large English section names separate these different information types. Rounded cards, small geometric markers, blue pills, and an inset white navigation bar provide continuity across the long page.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements are CSS pixels unless stated otherwise.
- **Calculated** means a value is evaluated from a supplied source custom property. A declared token does not prove that a particular component uses it.
- **Visual estimate** means a dimension or treatment is inferred from a supplied screenshot, rather than a sampled element style.
- **Recommendation** means guidance for a new implementation. The Quick Start uses implementation aliases and selected approximations; it is not the original stylesheet.
- The screenshots establish visible composition. DOM entries can include hidden navigation or inactive panel content, so an element rectangle alone does not prove visibility.
- Transition declarations establish available effects, not proof that an interaction was exercised. No click, hover, menu-opening, playback, or dismissal results were supplied.

## Tokens — Colors

### Primary Palette

All hexadecimal values in this table are supplied source tokens. Their component roles are supported by computed styles or the current captures.

| Name | Value | Source token | Role |
| --- | --- | --- | --- |
| Page White | `#fbfbfb` | `--color-bg-white` | Main page canvas; subtly separates pure-white surfaces from the background |
| Surface White | `#ffffff` | `--color-white` | Header interior, news and seminar cards, document cards, reversed text, and circular controls |
| Pale Grey | `#f0f1f6` | `--color-grey` | Customer-story cards and mobile service-panel bodies |
| Action Blue | `#3e64ea` | `--color-blue` | Filled links, selected language/category treatments, service-region background, and Contact panel |
| Display Blue | `#0646a6` | `--color-dark-blue` | Hero headline |
| Heading Blue Grey | `#707fab` | `--color-blue-grey` | Large English section headings and inactive English language link |
| Ink Navy | `#191e2e` | `--color-black` | Main Japanese text and footer background |

The source token named `--color-black` is a deep navy, not pure black. Preserve that distinction when creating text and footer aliases.

### Supporting Source Colors

| Value | Source token | Evidence boundary |
| --- | --- | --- |
| `#0451c4` | `--color-royal-blue` | Declared secondary blue; exact assignments were not established in the sampled elements |
| `#6476a3` | `--color-slate-blue` | Declared muted blue |
| `#68729d` | `--color-steel-blue` | Declared muted blue |
| `#c1cbee` | `--color-blue-grey-light` | Declared pale blue; suitable as an implementation approximation for the promotion outline |
| `#e2eeff` | `--color-light-blue` | Declared light blue |
| `#494ae9` | `--color-media-blue` | Declared media-related blue; exact visible assignment unverified |

The hero's lavender, pink, cyan, and white highlights belong to the imagery. Their exact pixel colors were not measured. Do not replace the solid interface palette with arbitrary colors sampled by eye from the hero.

### Color Distribution

Most reading happens on near-white or pale-grey surfaces with navy text. Blue appears in small, repeated action elements and two much larger regions: the service presentation and Contact panel. The footer provides a decisive navy ending. The pale hero is the only supplied view with extensive multicolored atmospheric imagery.

## Tokens — Typography

### English Display Face

- **Computed family:** `aktiv-grotesk-extended, sans-serif`.
- **Source variable:** `--font-family-en: "aktiv-grotesk-extended", sans-serif`.
- **Display weight:** `250` for the hero and large section headings.
- **Service-name weight:** `400`.
- **Character:** wide, exceptionally light, geometric sans-serif lettering with large open counters.
- **Role:** section identification and brand atmosphere rather than dense reading.

The font family is directly supported by computed styles. Font files and licensing were not supplied. A generic fallback will change headline width and wrapping; declaring the family alone does not install it.

### Japanese Reading Face

- **Computed stack:** `yakuhanjps, "Noto Sans JP", sans-serif`.
- **Source variable:** `--font-family-ja`.
- **Body weight:** `400`.
- **Lead-copy weight:** `500`.
- **Selected language and company label:** measured at `700`.
- **Typical tracking:** `0.04em`.
- **Typical body leading:** `2`.

The generous Japanese line height is important. It gives technical descriptions room to breathe while the English headings remain tightly set at a line height of `1`.

### Type Scale

Values below refer to the sampled elements. Small nested labels can differ from the computed size of their containing link.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Hero English headline | `105 / 105px` | `53.10 / 53.10px` | `250` | Desktop `-0.04em`; mobile `-0.02em` |
| Standard English section heading | `130 / 130px` | `60.63 / 60.63px` | `250` | Desktop `-0.02em`; mobile `-0.04em` |
| Customer Stories heading | `120 / 120px` | `60.63 / 60.63px` | `250` | Desktop `-0.02em`; mobile `-0.04em` |
| Contact heading | `105 / 105px` | `60.63 / 60.63px` | `250` | Desktop `-0.04em`; mobile `-0.04em` |
| Hero Japanese statement | `22 / 44px` | `16.03 / 32.06px` | `500` | `0.04em` |
| Service lead statement | `22 / 44px` | `18.06 / 36.11px` | `500` | Usually `0.04em`; desktop panel copy includes `0.02em` |
| Service name | `24 / 28.8px` | `20.06 / 36.10px` | `400` | Desktop `-0.006em`; mobile `0.04em` |
| Main body | `16 / 32px` | `14.03 / 28.06px` | `400` | `0.04em` |
| News and seminar title | `18 / 36px` | `16.03 / 32.06px` | `400` | `0.04em` |
| Customer-story title | `18 / 28.8px` | `16.03 / 25.65px` | `400` | `0.04em` |
| miLab lead statement | `32 / 51.19px` | `26.08 / 41.74px` | `500` | `0.04em` |
| News category | `14 / 28px` | `13.01 / 26.03px` | `400` | `0.04em` |
| Floating promotion description | `12 / 19.2px` | `11.01 / 17.62px` | `400` | Approximately `0.64px` / `0.56px` |
| Footer company name | `14 / 28px` | `13.01 / 26.03px` | `700` | `0.04em` |
| Footer address | `12 / 21.6px` | `12 / 21.6px` | `400` | `0.04em` |
| Footer legal links | Not separately sampled | `11 / 17.6px` | `400` | `0.04em` |

### Root Size and Hierarchy

The measured root font size is `10px` at both viewports. Source `2rem` therefore means `20px`, not `32px`.

The logo occupies an `h1` container; the large hero statement is an `h2` in the supplied DOM. The empty sampled heading text reflects the image-based logo container and does not establish the logo's accessible name. For a new implementation, provide a meaningful document heading and logo text alternative.

## Tokens — Spacing & Shapes

### Source Scaling

The supplied custom properties derive a numeric viewport width using `tan(atan2(...))`. Their central scaling relationships can be summarized as:

```text
W = viewport width as a number
S = max(1440, W) / 1440
--px = 1px × S
--rem = 1rem × S
--_px = 1px × W / 1440
--_rem = 1rem × W / 1440
```

At both inspected widths, `S = 1`. The normal `--px` and `--rem` units therefore do not shrink below their 1440px basis. The underscored variants do shrink. Other tokens interpolate through `clamp()` expressions, which explains the fractional mobile sizes.

Above 1440px, these source scale factors can grow. A permanently capped 1160px content container is a useful adaptation, but it is not a complete reproduction of the source's large-screen formulas.

### Spacing Scale

Calculated from the supplied expressions using the measured `10px` root:

| Source token | At 1440px | At 390px | Interpretation |
| --- | --- | --- | --- |
| `--spacing-01` | `140px` | `120.28px` | Largest declared spacing tier |
| `--spacing-02` | `120px` | `60.85px` | Broad section/panel spacing tier |
| `--spacing-03` | `100px` | `60.56px` | Large spacing tier |
| `--spacing-04` | `80px` | `60.28px` | Large internal spacing tier |
| `--spacing-05` | `60px` | `40.28px` | Medium spacing tier |
| `--spacing-06` | `40px` | `30.14px` | Component separation tier |
| `--spacing-07` | `30px` | `20.14px` | Compact inset tier |
| `--spacing-08` | `20px` | `20px` | Fixed inset tier |
| `--spacing-09` | `10px` | `10px` | Fixed small gap |
| `--grid-gutter` | `40px` | `20.28px` | Declared grid gutter; actual components can use other gaps |
| `--offset2` | `140px` | `11.83px` | Offset token; mobile editorial content also includes an additional inset |

Do not assign these roles globally without checking a component. For example, mobile news and customer-story cards have a measured `30px` vertical gap even though the declared grid gutter is about `20.28px`.

### Border Radius

| Element or token | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero outer surface | About `40px` | About `20px` | Visual estimate |
| White header interior | About `20px` | About `10px` | Visual estimate; sampled outer header is transparent |
| News, story, seminar, and product-download cards | `20px 20px 40px` | `20px 20px 40px` | Computed three-value shorthand |
| Service-region top corners | `100px` | `40.85px` | Computed |
| Mobile service-panel body | — | `20.28px` | Computed |
| Contact panel | `40px` | `20.28px` | Computed |
| Main filled pill links | `40px` | `30.14px` | Computed |
| Selected language badge | `5px` | `5px` in menu DOM | Computed |
| Source `--border-radius-01` | `40px` | `30.14px` | Calculated token |
| Source `--border-radius-02` | `20px` | `10.14px` | Calculated token |
| Source `--border-radius-03` | About `10px` | `5.07px` | Calculated token |

The card shorthand `20px 20px 40px` expands to **top-left 20, top-right 20, bottom-right 40, bottom-left 20**. The separately declared `--border-radius-04: 2rem 2rem 2rem 4rem` places the larger corner at bottom-left. These are different geometries. Use the measured component radius when recreating a visible card.

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Status |
| --- | --- | --- | --- |
| Document height | `10802.09px` | `13967.42px` | Measured |
| Header rectangle | `x40, y40; 1360 × 75.97px` | `x20.28, y20.28; 349.42 × 40.86px` | Measured |
| Logo link box | `120 × 43.97px` | `80.56 × 34.52px` | Measured; includes `10px` padding |
| Hero surface | About `1400 × 771px`, at `20,20` | About `370 × 460px`, at `10,10` | Visual estimate |
| Hero headline | `x56, y158; 105px` high | `x30.14, y90.95; 159.28px` high | Measured |
| Hero company link | `199 × 80px` | `142.98 × 45.28px` | Measured |
| Client-logo strip | About `1400 × 100px` | About `370 × 60px` | Visual estimate |
| Typical editorial span | `1160px`, from `x140` | `326.34px`, from `x31.83` | Measured across multiple sections |
| News card | `359.98 × 295.59px` | `326.34 × 255.13px` | Measured |
| Customer-story card | `560 × 575.31px` | `326.34 × 430–433px` | Measured |
| Story horizontal gap | `40px` | Single column | Calculated from rectangles |
| Second story vertical offset | `205.09px` below the first | No stagger | Calculated from rectangles |
| Standard section CTA | `260 × 59.97px` | `326.34 × 46.16px` | Measured |
| Footer | `688.77px` high | `1064.13px` high | Measured |

Some sections deliberately use wider spans. Seminar cards occupy approximately 1200px from `x120`, and the blue service presentation uses 100px desktop side padding. Do not force every section into one identical left edge.

## Components

### Floating Navigation Header

**Role:** persistent brand identity and access to the corporate site's main destinations.

The visible surface is a white rounded rectangle inset from all top edges, with a faint diffuse shadow. It remains at the same top position in the supplied scrolled screenshots. This supports a persistent-header presentation; the underlying CSS positioning property was not included in the evidence.

On desktop, the black MI-6 logo sits left. The right-hand group contains company information, service and seminar buttons with small blue downward indicators, news, customer stories, resources, recruitment, language links, and a two-line blue menu icon. Recruitment has a small external-link mark. The active `日本語` link is a compact blue rectangle with white bold text; `English` remains muted blue-grey.

On mobile, the visible header contains the logo and two-line menu icon. The measured menu button is `22 × 22px`, versus `25 × 25px` on desktop. Navigation and language entries also occur in the mobile DOM, but they are not visible in the closed-header capture. Their existence is not evidence that the menu was opened.

The menu DOM contains white rounded rows approximately `309 × 46px`, service and seminar sublinks, a blue contact link, and a miLab promotional block. Use that as structural evidence only; backdrop appearance, opening motion, focus behavior, and submenu activation remain unverified.

### Material-Study Hero

**Role:** establish the company's research direction and visual identity.

The hero is a single large rounded surface with an atmospheric background. Its image contains soft, reflective-looking volumes with intentionally blurred boundaries. Text is crisp and layered above it.

An English heading reads `Towards Data-Driven R&D`. At desktop width it occupies one line at approximately 105px. The Japanese statement sits below and farther inward, starting at `x90` while the English heading starts at `x56`. The quoted phrase `“マテリアルズ・インフォマティクス”` is blue; the remainder is navy.

The lower-right company link pairs the label `MI-6について` with a white circle. The circle is approximately 80px across on desktop and 40px on mobile, with a small blue hexagonal mark at its center.

At 390px, the English headline becomes three lines: `Towards`, `Data-Driven`, and `R&D`. The supporting statement wraps into two lines. The hero ends around 470px down the viewport, leaving room for the client strip and following content. It is not a mandatory full-screen-height composition.

### Client-Logo Strip

**Role:** present customer recognition immediately after the hero.

A white rounded horizontal band contains logos at their natural proportions. The desktop strip is approximately 100px tall; the mobile version is approximately 60px tall. Logos use their own brand colors rather than being normalized to the site's blue.

The right edge fades into a white control area containing an outlined circular pause symbol. The button's measured box is `44 × 44px` at both widths. A separate `導入企業一覧` link sits below the strip, aligned right, with a small blue circular marker.

The visible pause affordance suggests a moving logo-strip design. Playback speed, autoplay conditions, direction, pause response, and looping behavior were not recorded. Different logo selections across captures do not establish those details.

### Shared Action Language

**Role:** make navigation recognizable without using large rectangular buttons everywhere.

Three recurring forms are visible:

1. **Label plus large circle:** used in the hero, with dark text beside a white circle.
2. **Filled blue pill:** used for section destinations and the video promotion, with white text and a small contrasting circular marker toward the right.
3. **Standalone circular endpoint:** used at the lower-right of desktop customer-story cards, with a small white hexagonal mark inside a blue circle.

The standard section pill measures approximately `260 × 60px` on desktop and stretches to the editorial width at approximately `326 × 46px` on mobile. It has asymmetric horizontal padding: more room before the label than after the trailing marker.

Keep the small hexagon and dot motifs. A conventional right-arrow icon on every link would lose an identifiable detail of this page.

### Floating Video Promotion

**Role:** provide access to a highlighted conference recording while the main page remains readable.

The promotion appears near the lower-right corner in the desktop story capture and near the bottom of the mobile opening capture. It is a white, thinly outlined, rounded panel with a small shadow. Its estimated width is 380px on desktop and 370px on the 390px phone.

The upper row contains a roughly `120 × 63px` video thumbnail, a compact two- or three-line description, and a close icon at the top-right. The lower row is a full-width blue pill labeled `動画を視聴する`, measured at 38px high. Its URL points to a recording archive page; embedded playback was not demonstrated.

The mobile panel covers part of the News section in the supplied opening capture. Visibility conditions, entrance timing, dismissal persistence, and whether it follows scrolling were not fully established. The close control is present, but its behavior was not tested.

### News Preview

**Role:** expose recent company activity and category destinations.

The desktop section combines a very large `News` heading, a left category column, and a horizontal sequence of white cards. The sampled category column begins at `x140`; cards begin at `x440`, have a 360px width, and repeat every 400px. Two 30px control buttons are present above the card region. Their actual behavior was not exercised.

Each card contains a date, category, Japanese title, and a compact action area. Cards use 20px padding and the asymmetric `20 / 20 / 40 / 20px` corner treatment. Titles use `18px / 2`, giving technical headlines generous line spacing. The selected `すべて` category has a blue fill; desktop inactive categories have transparent backgrounds in the sampled state.

Mobile changes the structure: categories become a two-column matrix of approximately `138 × 32px` pills, and inactive categories gain pale-grey fills. Three news cards stack vertically with 30px gaps. The desktop DOM contains ten entries, while the mobile preview contains three; the selection or loading policy was not supplied.

Category controls are links to category URLs. Do not assume they are client-side filtering tabs.

### Service Introduction and Blue Service Region

**Role:** explain the company's approach, then differentiate its three offerings.

The introduction uses a large `Service` heading followed by two desktop columns. A medium-weight Japanese lead occupies the left 560px column. The right 560px column contains body text and a blue service link, separated by a 40px gap. On mobile, the lead, body, and full-width link stack in that order.

The subsequent service region is a full-width blue field with large rounded top corners: 100px on desktop and about 40.85px on mobile. Desktop padding is `120px 100px`.

The sampled desktop presentation allocates 600px to Hands-on MI® and 300px each to miHub® and Lab Automation, with 20px gaps. Button-based panel controls and differently colored headings support a selected-panel interpretation. However, panel switching was not exercised. Some inactive-content rectangles extend beyond their narrow panel bounds; they should not be treated as proof that all expanded descriptions are simultaneously visible.

Mobile replaces this arrangement with three fully readable stacked sections. Each has a pale-grey body, roughly 20px corners, and a white rounded title strip about 56px high. Inside are an 18px lead, 14px body copy with double leading, and a full-width blue link. The three sections have measured heights of roughly 575, 547, and 575px, separated by 30px.

Below them, the blue region continues with white explanatory text and a client/MI-6 relationship diagram. The DOM includes a descriptive text alternative explaining a cycle of client challenges and MI-6 hypotheses, practice, and improvement. The diagram's actual artwork was not supplied in a dedicated capture.

### Customer-Story Cards

**Role:** present customer evidence through recognizable people, organizations, and service context.

The desktop layout has two columns, each 560px wide, with a 40px gap. The second card starts approximately 205px lower than the first. The third sits beneath the first with a 40px gap. This creates a deliberately staggered rhythm rather than aligned rows.

Each pale-grey card contains:

- A large landscape team photograph, inset 20px from the outer card.
- A Japanese story title, with slightly more side inset than the image on desktop.
- Two compact metadata rows: white pill labels `社名` and `業界`, followed by their values.
- Blue service references such as miHub® and Hands-on MI® near the bottom-left.
- A blue 60px circular endpoint at the bottom-right in the desktop capture.

The first two photographs show real customer teams in workplace settings. They retain their natural colors, including blue work uniforms and a large red company sign. The card itself supplies the site's visual consistency; the photography is not recolored into a monochrome brand treatment.

On mobile, all three cards become a single column at approximately 326px wide. The stagger disappears, padding remains 20px, and titles use approximately `16px / 1.6`. The sampled card display changes from grid to block. No mobile story screenshot was supplied, so the precise mobile action-icon placement should not be inferred from the desktop view.

### Seminar Cards

**Role:** combine event availability, timing, topic, and service relevance.

Three white cards form a desktop row. Each is approximately `373 × 358px`, with 40px gaps and the same asymmetric corner treatment used elsewhere. Their content includes `受付終了`, a date, a time range, a Japanese title, and topical/service tags.

Mobile stacks these cards at approximately 332px wide with 30px gaps. Heights vary with title length. Keep availability text separate from topic tags so the event's status remains immediately understandable. The supplied records were all closed at inspection; do not hardcode that status as a visual constant.

### miLab Editorial Preview

**Role:** connect the corporate site to its technical publishing activity.

A large `miLab` heading leads into a two-column desktop introduction. The left statement is noticeably larger than ordinary Japanese lead copy: about 32px with 1.6 leading. The right contains explanatory text and a blue destination link. Three article previews follow, with titles, dates, and topic labels.

Mobile stacks the introduction and articles. The miLab destination link appears after the article previews in the supplied mobile text and element order, whereas the desktop link is part of the introduction. Preserve this observed ordering difference if reproducing the homepage closely.

Article-title styles are measured, but the supplied evidence does not establish every preview-image or wrapper detail. Reuse the page's measured typography and card vocabulary without inventing an additional illustration system.

### Download and Contact

**Role:** offer practical next steps after the service and editorial content.

Download begins with a 130px desktop English heading and a short explanation. A white company-overview link is followed by three service-document cards. Desktop document cards measure approximately `360 × 359px`; on mobile they stack at approximately `326 × 326px`. They use blue text, white surfaces, and the common asymmetric corner radius.

These links lead to contact/document-request destinations. Their URLs do not establish immediate file-download behavior.

Contact is a broad blue rounded panel containing a large white English heading, Japanese supporting copy, subtle curved line decoration visible in the desktop capture, and a white circular mail endpoint. Its desktop layout is horizontal; mobile stacks the content within an approximately `366 × 355px` rectangle.

The desktop Contact bounding rectangle was `1218 × 278.25px`, while the supplied screenshot shows a panel closer to the standard editorial span. A transform transition is declared on this element. Treat its rectangle as the recorded rendered bounds, not a guaranteed untransformed width token.

### Footer

**Role:** provide full corporate navigation, identity, and policy information.

The light main content ends with rounded lower corners above the navy footer. The footer element itself has a measured radius of zero. A near-black rounded `TOP` strip sits near the top of the footer, followed by a white MI-6 logo.

On desktop, company identity and address sit left. Company, service, seminar, news, customer-story, resource, recruitment, and miLab links occupy grouped columns. A white-framed certification graphic and Facebook, X, and LinkedIn marks occupy the right side. Legal links and copyright form a widely spaced bottom row.

The footer independently identifies the operator as `MI-6株式会社` and displays `©2026 MI-6 Ltd.`. No production-credit statement was observed in the original-page evidence.

Mobile moves the address above a two-column navigation area. Services and seminars remain side by side; the remaining destinations form short paired rows. A divider separates the navigation from the certification artwork and social links. Policy links wrap across two lines, with copyright below. The mobile navigation is visibly expanded, not an accordion in the supplied capture.

The `TOP` link points to the homepage URL. Smooth scrolling was not verified.

## Tokens — Motion & Interaction

### Declared Motion

| Target | Supplied declaration | Evidence limit |
| --- | --- | --- |
| General interface motion | `--transition-duration: .3s` and `cubic-bezier(.165, .84, .44, 1)` | Source tokens; not every element uses them |
| Hero English heading | `clip-path 0.9s cubic-bezier(1, 0, 0, 1) 0.3s` | A reveal transition is declared; clipping direction and triggering sequence were not recorded |
| Hero Japanese statement | `clip-path 0.7s cubic-bezier(1, 0, 0, 1) 0.5s` | Declaration only |
| Standard action links | `background-color 0.3s cubic-bezier(.165, .84, .44, 1)` | End-state colors were not sampled |
| News, story, and seminar cards | Background and text color, `0.3s` with the standard easing | Hover transition available; actual hover state unverified |
| Language links | Color/background, `0.6s cubic-bezier(.19, 1, .22, 1)` | State styles measured; switching behavior not exercised |
| Desktop service names | `color 0.2s ease-out` | Does not establish panel movement or expansion timing |
| Selected mobile lead paragraphs | `opacity 0.6s cubic-bezier(.39, .575, .565, 1)` with `0.5–0.6s` delays | Entry trigger unverified |
| Company-document link on mobile | Opacity and transform, `0.6s`, with `0.6s` delay | Transform endpoints unverified |
| Contact panel | Opacity and transform `1.6s`; background color `1.6s`; other visual changes `0.3s` | Exact starting/ending scale and trigger were not supplied |
| Mobile menu rows | `border-radius 0.3s` with the standard easing | Menu opening was not visually inspected |
| Footer policy links | `background-size 0.3s` with the standard easing | Underline-like effect is plausible, but endpoint appearance was not sampled |

### Observed Affordances and Limits

The evidence shows persistent header placement, dropdown indicators, menu controls, a logo-strip pause button, news navigation buttons, clickable cards, and a promotion close control. It does not show the results of activating them.

The collection process waited for finite motion and layout stability and temporarily paused perpetual animations during readiness checks. This does not establish that the hero uses video, WebGL, canvas, or a particular continuous animation. The sampled elements generally report `animation: none`; that is not proof that every media layer is static.

For a new implementation, use the measured short color transitions and restrained reveal timings as the motion vocabulary. Add a static reduced-motion state. Avoid inventing elaborate parallax, cursor-following effects, or spring movement as if they were observed features.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | `#fbfbfb` | Neutral reading field across the long homepage |
| Header | Opaque white, rounded, faint diffuse shadow | Persistent navigation separated from imagery and content |
| Hero | Blurred multicolored image inside a rounded frame | Brand atmosphere and initial focus |
| News / seminar / download | White cards | Organize information and links |
| Customer stories | `#f0f1f6`, large photographs | Separate evidence cards from the near-white canvas |
| Service region | `#3e64ea`, rounded top edge | A major narrative change and service differentiation |
| Mobile service panels | Pale-grey body with white title strip | Keep lengthy service descriptions readable inside blue surroundings |
| Contact | Blue rounded panel with white type | Strong final action region |
| Floating promotion | White, pale outline, modest shadow | A separate recording invitation above page content |
| Footer | `#191e2e` with white content | Dense corporate utility and a clear ending |

Elevation is selective. The header, client strip, and floating promotion appear lightly lifted. Customer-story cards rely primarily on tonal contrast and shape. Broad glass blur and heavy shadows are not the page's general card system.

## Imagery

### Hero Treatment

The opening image resembles a close-up study of soft, reflective material. Large rounded masses overlap and fade into each other. Lavender provides the broad field; brighter cyan, blue, pink, and white create local depth. Edges are deliberately defocused, while text remains sharp.

Preserve large-scale variation and quiet zones behind copy. A busy particle field, sharply outlined molecule diagram, or saturated multicolor mesh would change the character. The implementation technology and original media file were not supplied.

### Customer Photography

Customer cards use landscape group portraits in real offices or industrial settings. People, uniforms, company signs, and the workplace remain legible. Crops are close to a 16:9 landscape proportion, though exact image element dimensions were not supplied for every card.

Use consistent image slots without forcing all source photographs into identical color grading. The contrast between natural photography and the controlled blue-grey interface is part of the design.

### Marks and Icons

The MI-6 wordmark is supplied artwork, with black and white variants visible in the header and footer. Client logos retain their colors. Small interface marks include hexagons, dots inside circles, two-line menu strokes, down indicators, external-link marks, a pause symbol, and a mail icon.

The footer's certification artwork remains a compact image inside a white rectangle. Social icons appear as simple white marks on navy.

### Observed Asset References

No direct image, video, or font-file URLs were included in the supplied evidence. The following inventory identifies assets without inventing paths.

| Asset | Observed role | Evidence |
| --- | --- | --- |
| MI-6 dark wordmark | Header identity | Desktop and mobile captures |
| MI-6 white wordmark | Footer identity | Desktop footer capture |
| Abstract material image | Hero background | Desktop and mobile opening captures |
| Client logo collection | Horizontal trust strip | Desktop and mobile opening captures |
| Customer team photographs | Three customer-story cards | Two complete and one partial desktop photograph; corresponding story records in DOM |
| Conference recording thumbnail | Floating promotion | Desktop story and mobile opening captures |
| Relationship diagram | Client/MI-6 process explanation | Descriptive text alternative in rendered DOM; artwork not separately captured |
| Certification artwork | Footer trust block | Desktop and mobile footer captures |

Use authorized originals where available. The Quick Start's gradient is an approximation of the hero atmosphere, not a replacement asset extracted from the website.

## Layout & Responsive Behavior

### Desktop Composition

The page uses several related widths instead of one universal container. The hero and logo strip approach the viewport edges with approximately 20px margins. The persistent header sits farther inward at 40px. Most English section headings and editorial blocks start at 140px, producing a 1160px content span.

Large vertical gaps separate major sections. The News heading begins around document `y1083`, below the first 1000px capture. Its cards occupy a horizontal rail beside categories. Service explanations use paired columns before the full-width blue region. Customer stories use a staggered pair of columns, followed by three-column seminar, article, and download arrangements.

### Mobile Changes

At 390px, the page changes structure as well as scale:

- The header becomes a compact logo/menu bar, inset approximately 20px.
- The hero uses about 10px outer margins and a three-line English headline.
- Editorial content generally has 31.83px side margins and a 326.34px usable width.
- News categories form two columns, followed by three vertically stacked preview cards.
- Service introduction columns become sequential blocks.
- Desktop service controls become three fully expanded reading panels.
- Customer stories lose their stagger and become a single column.
- Seminar, article, and document previews stack vertically.
- Standard section pills stretch to their container width.
- The miLab destination link moves below its article previews.
- Contact becomes vertically arranged.
- Footer navigation retains two columns, followed by a separate trust/social/legal area.

The mobile document is approximately 3165px taller than the desktop document despite smaller text and fewer news previews. Stacking the dense corporate content is the principal reason for the longer page.

### Responsive Boundaries

Only 1440px and 390px widths were supplied. Exact breakpoints, tablet layouts, landscape-phone behavior, ultra-wide behavior, browser zoom, and safe-area handling were not tested. The Quick Start's 1100px navigation breakpoint and 767px content breakpoint are recommendations.

Preserve component proportions rather than shrinking every measurement uniformly. Card padding remains 20px at both inspected sizes; story gaps change from 40px to 30px; the large English headings shrink much more than Japanese body text.

## Do’s and Don’ts

### Do

- Pair very light extended English headings with readable Japanese sans-serif copy.
- Keep `#3e64ea` for action fills and major blue regions, with `#0646a6` for the hero headline.
- Preserve the difference between pure-white surfaces and the `#fbfbfb` page background.
- Give the hero broad, softly blurred material-like imagery and crisp foreground text.
- Keep the inset white navigation bar visually persistent across light and dark sections.
- Use asymmetric card corners with the measured larger bottom-right corner.
- Preserve the desktop story stagger and remove it on mobile.
- Retain natural customer photography and original client-logo proportions.
- Use the small circle, hexagon, and dot vocabulary consistently.
- Treat mobile service panels and footer navigation as substantive responsive structures.

### Don’t

- Don’t reduce the corporate homepage to a hero and a single conversion form.
- Don’t replace the 250-weight English display treatment with bold generic headings.
- Don’t apply the hero's multicolored gradient to every card and button.
- Don’t confuse source `--color-black` with pure black.
- Don’t copy source rem numbers into a 16px-root project without conversion.
- Don’t use the declared bottom-left radius token for cards whose measured larger corner is bottom-right.
- Don’t align all customer cards into uniform desktop rows.
- Don’t make the mobile page a scaled-down desktop service selector with unreadable narrow panels.
- Don’t infer visible menus or expanded panels from hidden DOM rectangles.
- Don’t invent image paths, animation technology, hover endpoints, or playback behavior.

## Recommended Implementation Additions

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

- Give the menu, pause, carousel, and close controls accessible names. Enlarge the 22px menu and 24 × 20px close targets to at least a 44px hit area without enlarging their visible symbols.
- Make menu buttons report their expanded state and connect them to the controlled region. Confirm focus movement and Escape-key behavior when an overlay is used.
- Provide a skip link and sufficient scroll margin for anchored content beneath the persistent header.
- Keep entire-card links keyboard operable without nesting additional interactive controls inside them.
- Allow the recording promotion to be dismissed accessibly. Check that it does not block focused links or essential mobile content.
- If the logo strip moves automatically, make pause functional and provide a reduced-motion/static mode.
- Disable decorative clip reveals and long transform transitions when reduced motion is requested. Content should remain visible without animation.
- Verify contrast for small muted labels separately from large display headings, and provide a visible focus indicator on both light and navy surfaces.
- Supply meaningful photo alternatives and preserve the descriptive text equivalent of the service relationship diagram.
- Load appropriately sized media with reserved dimensions. Keep fallback fonts and delayed image loading from shifting the hero and persistent controls.

## Agent Prompt Guide

### Quick Color Reference

- Page: `#fbfbfb`.
- White surfaces and reversed text: `#ffffff`.
- Customer cards and mobile service bodies: `#f0f1f6`.
- Main text and footer: `#191e2e`.
- Filled actions and blue feature regions: `#3e64ea`.
- Hero headline: `#0646a6`.
- English section headings: `#707fab`.
- Hero imagery: softly blurred lavender, cyan, blue, pink, and white; exact image colors unmeasured.

### Overall Prompt

“Create a Japanese research and materials-informatics corporate homepage using a near-white canvas, blue actions, and a navy footer. Pair an extended English sans-serif at weight 250 with Japanese sans-serif body text at approximately 16px and double line spacing. Begin with a large rounded hero containing softly blurred material-like forms and the headline ‘Towards Data-Driven R&D’. Float an opaque white rounded navigation bar above it. Follow with client logos, News, Service, Customer Stories, Seminar, miLab articles, Download, Contact, and a detailed footer. Use a blue service region, pale-grey customer cards with landscape team photography, small hexagonal marks inside circular endpoints, and generous vertical spacing. Stagger the desktop customer-story columns. On mobile, use a three-line hero headline, stacked service descriptions and cards, full-width pills, and a two-column footer. Keep interaction behavior explicit and accessible.”

### Example Component Prompts

1. **Header:** “Create an inset white navigation bar approximately 76px high on a 1440px desktop. Place the MI-6 wordmark at left, corporate links and compact language controls at right, and a two-line blue menu icon at the end. Use roughly 20px corners and a very soft shadow. At 390px, reduce the visible bar to about 350 × 41px and show only the logo and menu symbol, with an accessible larger hit target.”
2. **Hero:** “Create a rounded, pale lavender material-study hero with large defocused blue and cyan volumes, pink light, and white highlights. Keep the image abstract and quiet behind crisp dark-blue typography. Set the English headline in a very thin extended face at about 105px desktop and 53px mobile. Place a small Japanese statement below and a label-plus-white-circle company link at lower right.”
3. **Customer story:** “Create a 560px pale-grey customer-story card with 20px padding, a landscape workplace team photograph, an 18px Japanese title at 1.6 line height, white company/industry label pills, blue service references, and a 60px blue circular endpoint. Use corner radii 20px 20px 40px 20px. Offset the second desktop column downward by about 205px; use a normal single-column flow on mobile.”
4. **Mobile service panel:** “Inside a saturated blue section with rounded top corners, stack three pale-grey service panels. Each panel has a white rounded title strip, a blue English service name, an 18px Japanese lead, 14px body text with double line spacing, and a full-width blue pill link. Keep all service descriptions readable in normal document flow.”
5. **Footer:** “Create a deep-navy corporate footer with a white wordmark, company/address block, grouped service and seminar links, certification artwork, social icons, and compact policy links. On mobile, keep service and seminar groups side by side, separate the trust area with a fine divider, and wrap legal links above copyright. Preserve the persistent white header above this dark section.”

## Quick Start

### CSS Custom Properties

This is a usable shell and component starter, not a recovered stylesheet. It uses a conventional browser root and pixel-based aliases, preserving the supplied endpoint measurements approximately. The font names are evidenced, but their files must be supplied separately. The hero gradient, shadow parameters, hover endpoints, and breakpoints below are recommended approximations.

The story layout assumes three cards in source order. The header assumes a brand element, desktop navigation, and a menu button. Image selectors expect real authorized assets in the markup; no asset paths are invented here.

```css
:root {
  /* Source colors */
  --mi6-page: #fbfbfb;
  --mi6-white: #ffffff;
  --mi6-grey: #f0f1f6;
  --mi6-blue: #3e64ea;
  --mi6-display-blue: #0646a6;
  --mi6-heading: #707fab;
  --mi6-ink: #191e2e;
  --mi6-outline: #c1cbee;

  /* Evidenced family names; font files are not bundled */
  --mi6-font-ja: yakuhanjps, 'Noto Sans JP', sans-serif;
  --mi6-font-en: 'aktiv-grotesk-extended', sans-serif;
  --mi6-body-size: clamp(14px, calc(13.2958px + 0.1878vw), 16px);
  --mi6-section-size: clamp(60.63px, 9.028vw, 130px);
  --mi6-hero-size: clamp(53.1px, calc(33.82px + 4.943vw), 105px);

  /* Adapted geometry */
  --mi6-outer: clamp(10px, 1.389vw, 20px);
  --mi6-content-max: 1160px;
  --mi6-card-radius: 20px 20px 40px 20px;
  --mi6-section-gap: clamp(120px, 9.722vw, 140px);
  --mi6-shadow: 0 10px 40px rgb(25 30 46 / 5%);

  /* Source transition vocabulary */
  --mi6-duration: 300ms;
  --mi6-ease: cubic-bezier(.165, .84, .44, 1);
  --mi6-reveal-ease: cubic-bezier(1, 0, 0, 1);
}

* { box-sizing: border-box; }

body.mi6-page {
  margin: 0;
  color: var(--mi6-ink);
  background: var(--mi6-page);
  font-family: var(--mi6-font-ja);
  font-size: var(--mi6-body-size);
  line-height: 2;
  letter-spacing: .04em;
}

.mi6-page img { display: block; max-width: 100%; }
.mi6-page button { font: inherit; }
.mi6-page a { color: inherit; }

.mi6-container {
  width: min(var(--mi6-content-max), calc(100% - 64px));
  margin-inline: auto;
}

.mi6-section {
  margin-block: var(--mi6-section-gap);
  scroll-margin-top: 140px;
}

.mi6-section-title {
  margin: 0 0 80px;
  color: var(--mi6-heading);
  font-family: var(--mi6-font-en);
  font-size: var(--mi6-section-size);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -.02em;
}

/* Persistent shell; the exact original positioning rule was not supplied */
.mi6-header {
  position: fixed;
  z-index: 100;
  inset: calc(2 * var(--mi6-outer)) calc(2 * var(--mi6-outer)) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
  padding-inline: 30px 10px;
  border-radius: 20px;
  background: var(--mi6-white);
  box-shadow: var(--mi6-shadow);
}

.mi6-brand { display: block; padding: 10px; }
.mi6-brand img { width: 100px; height: auto; }

.mi6-desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.mi6-desktop-nav a { text-decoration: none; white-space: nowrap; }

.mi6-language-current {
  padding-inline: 10px;
  border-radius: 5px;
  background: var(--mi6-blue);
  color: var(--mi6-white) !important;
  font-size: 14px;
  font-weight: 700;
}

/* A larger hit target is a recommended addition */
.mi6-menu-button {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mi6-menu-button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - 5px);
  width: 25px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--mi6-blue);
  box-shadow: 0 10px 0 var(--mi6-blue);
}

.mi6-hero {
  position: relative;
  isolation: isolate;
  min-height: 771px;
  margin: var(--mi6-outer);
  padding: 138px 36px 120px;
  overflow: hidden;
  border-radius: 40px;
  background: #c9c3e3;
}

/* Approximate atmosphere only; replace with authorized hero media */
.mi6-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px;
  background:
    radial-gradient(ellipse at 22% 76%, #ffffff 0 7%, transparent 26%),
    radial-gradient(ellipse at 15% 62%, #79dded 0 8%, transparent 30%),
    radial-gradient(ellipse at 59% 39%, #527bea 0 10%, transparent 31%),
    radial-gradient(ellipse at 45% 61%, #f2d1ef 0 9%, transparent 31%),
    radial-gradient(ellipse at 80% 84%, #b4a0e9 0 12%, transparent 40%),
    #c9c3e3;
  filter: blur(24px);
}

.mi6-hero-title {
  margin: 0;
  color: var(--mi6-display-blue);
  font-family: var(--mi6-font-en);
  font-size: var(--mi6-hero-size);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -.04em;
}

.mi6-hero-copy {
  max-width: 540px;
  margin: 40px 0 0 34px;
  font-size: 22px;
  font-weight: 500;
  line-height: 2;
}

.mi6-hero-copy strong { color: var(--mi6-blue); font-weight: inherit; }

.mi6-hero-link {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}

.mi6-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--mi6-white);
  background: var(--mi6-blue);
}

.mi6-circle::before {
  content: '';
  width: 11px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.mi6-hero-link .mi6-circle {
  width: 80px;
  color: var(--mi6-blue);
  background: var(--mi6-white);
}

.mi6-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 260px;
  min-height: 60px;
  padding: 14px 14px 14px 29px;
  border-radius: 40px;
  color: var(--mi6-white) !important;
  background: var(--mi6-blue);
  text-decoration: none;
  transition: background-color var(--mi6-duration) var(--mi6-ease);
}

.mi6-pill::after {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 6px solid var(--mi6-white);
  border-radius: 50%;
  background: var(--mi6-blue);
}

.mi6-client-strip {
  display: flex;
  align-items: center;
  gap: 60px;
  height: 100px;
  margin: 40px var(--mi6-outer) 0;
  padding-inline: 40px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--mi6-white);
  box-shadow: var(--mi6-shadow);
}

.mi6-client-strip img { flex: none; max-height: 48px; width: auto; }

.mi6-news-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
}

.mi6-news-categories {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
}

.mi6-category {
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 2;
  text-decoration: none;
}

.mi6-category[aria-current='page'] {
  color: var(--mi6-white);
  background: var(--mi6-blue);
}

/* Native overflow is an implementation option, not verified carousel behavior */
.mi6-news-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 360px;
  gap: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.mi6-news-card {
  min-height: 296px;
  padding: 20px;
  border-radius: var(--mi6-card-radius);
  background: var(--mi6-white);
  text-decoration: none;
}

.mi6-news-card h3 { font-size: 18px; font-weight: 400; line-height: 2; }

.mi6-service-band {
  padding: 120px 100px;
  border-radius: 100px 100px 0 0;
  background: var(--mi6-blue);
}

/* Readable static panels; desktop selection needs separate state logic */
.mi6-service-panel {
  overflow: hidden;
  border-radius: 20px;
  background: var(--mi6-grey);
}

.mi6-service-panel + .mi6-service-panel { margin-top: 30px; }

.mi6-service-panel h3 {
  margin: 0;
  padding: 10px 20px;
  border-radius: 20px;
  color: var(--mi6-blue);
  background: var(--mi6-white);
  font-family: var(--mi6-font-en);
  font-size: 24px;
  font-weight: 400;
}

.mi6-service-panel-body { padding: 30px 20px 40px; }

.mi6-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
}

.mi6-story {
  display: flex;
  flex-direction: column;
  min-height: 575px;
  padding: 20px;
  border-radius: var(--mi6-card-radius);
  background: var(--mi6-grey);
  text-decoration: none;
}

.mi6-story:nth-child(1) { grid-column: 1; grid-row: 1; }
.mi6-story:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; margin-top: 205px; }
.mi6-story:nth-child(3) { grid-column: 1; grid-row: 2; }

.mi6-story-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.mi6-story-title {
  margin: 20px 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.mi6-story-meta { margin: 0 10px 20px; font-size: 12px; }
.mi6-story-meta > div { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.mi6-story-meta dt { padding: 2px 10px; border-radius: 999px; color: var(--mi6-blue); background: white; }
.mi6-story-meta dd { margin: 0; }

.mi6-story-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  color: var(--mi6-blue);
  font-size: 12px;
}

.mi6-contact {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 80px 100px;
  border-radius: 40px;
  color: white !important;
  background: var(--mi6-blue);
  text-decoration: none;
}

.mi6-contact .mi6-section-title { margin: 0; color: inherit; font-size: 105px; }

.mi6-footer { padding-block: 60px; color: white; background: var(--mi6-ink); }
.mi6-footer a { text-decoration: none; }
.mi6-footer-grid { display: grid; grid-template-columns: 1.5fr 3fr 1fr; gap: 40px; }
.mi6-footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.mi6-footer-address { font-size: 12px; line-height: 1.8; }
.mi6-footer-legal { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 100px; font-size: 11px; }

.mi6-promo {
  position: fixed;
  z-index: 90;
  right: 10px;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100% - 20px));
  padding: 20px;
  border: 1px solid var(--mi6-outline);
  border-radius: 20px;
  background: white;
  box-shadow: var(--mi6-shadow);
}

.mi6-promo-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding-right: 28px; }
.mi6-promo-row img { width: 120px; aspect-ratio: 120 / 63; object-fit: cover; border-radius: 10px; }
.mi6-promo-row p { margin: 0; font-size: 12px; line-height: 1.6; }
.mi6-promo .mi6-pill { width: 100%; min-width: 0; min-height: 38px; margin-top: 20px; padding-block: 0; }

/* Recommended states; original hover endpoints were not sampled */
@media (hover: hover) {
  .mi6-pill:hover { background: var(--mi6-display-blue); }
}

.mi6-page :focus-visible {
  outline: 2px solid var(--mi6-display-blue);
  outline-offset: 4px;
}

.mi6-footer :focus-visible,
.mi6-contact:focus-visible { outline-color: white; }

/* Chosen breakpoints, not recovered source breakpoints */
@media (max-width: 1100px) {
  .mi6-desktop-nav { display: none; }
  .mi6-footer-grid { grid-template-columns: 1fr; }
  .mi6-contact { padding-inline: 40px; }
}

@media (max-width: 767px) {
  .mi6-header { height: 40.86px; padding-inline: 5px 4px; border-radius: 10px; }
  .mi6-brand img { width: 60.56px; }
  .mi6-menu-button::before { width: 22px; }
  .mi6-section { scroll-margin-top: 90px; }
  .mi6-section-title { margin-bottom: 60px; letter-spacing: -.04em; }

  .mi6-hero { min-height: 460px; padding: 80.81px 20px 120px; border-radius: 20px; }
  .mi6-hero-title { letter-spacing: -.02em; }
  .mi6-hero-copy { margin: 30.14px 0 0; font-size: 16.03px; }
  .mi6-hero-link { min-height: 45.28px; gap: 14px; }
  .mi6-hero-link .mi6-circle { width: 40px; }

  .mi6-pill { width: 100%; min-width: 0; min-height: 46.16px; padding-block: 9px; border-radius: 30px; }
  .mi6-client-strip { height: 60px; margin-top: 20px; padding-inline: 16px; gap: 40px; border-radius: 10px; }
  .mi6-client-strip img { max-height: 28px; }

  .mi6-news-layout { display: block; }
  .mi6-news-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 10px; padding-inline: 20px; margin-bottom: 60px; }
  .mi6-category { padding: 2px 10px 4px; background: var(--mi6-grey); text-align: center; font-size: 13px; }
  .mi6-news-track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 30px; }
  .mi6-news-card { min-height: 255px; }
  .mi6-news-card h3 { font-size: 16.03px; }

  .mi6-service-band { padding: 41px 11.27px 60.85px; border-radius: 40.85px 40.85px 0 0; }
  .mi6-service-panel h3 { font-size: 20.06px; line-height: 1.8; }

  .mi6-stories { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mi6-story:nth-child(n) { grid-column: auto; grid-row: auto; margin-top: 0; min-height: 0; }
  .mi6-story-title { margin-inline: 0; font-size: 16.03px; }
  .mi6-story-meta { margin-inline: 0; }

  .mi6-contact { flex-direction: column; align-items: stretch; padding: 40px 20px; border-radius: 20px; }
  .mi6-contact .mi6-section-title { font-size: 60.63px; }

  .mi6-footer { padding-block: 40px; }
  .mi6-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .mi6-footer-legal { margin-top: 40px; }
  .mi6-promo-row { gap: 15px; }
  .mi6-promo-row p { font-size: 11.01px; }
}

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

This starter intentionally leaves menu state, carousel playback, promotion dismissal, desktop service selection, and reveal triggers to explicit application logic. The static service-panel treatment is a readable fallback, not a claim that the original desktop panels are all expanded. Use the component measurements above when implementing the selected desktop presentation.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-mi6-page: var(--mi6-page);
  --color-mi6-surface: var(--mi6-white);
  --color-mi6-grey: var(--mi6-grey);
  --color-mi6-blue: var(--mi6-blue);
  --color-mi6-display: var(--mi6-display-blue);
  --color-mi6-heading: var(--mi6-heading);
  --color-mi6-ink: var(--mi6-ink);

  --font-mi6-ja: var(--mi6-font-ja);
  --font-mi6-en: var(--mi6-font-en);

  --text-mi6-body: var(--mi6-body-size);
  --text-mi6-hero: var(--mi6-hero-size);
  --text-mi6-section: var(--mi6-section-size);

  --radius-mi6-card: var(--mi6-card-radius);
  --radius-mi6-panel: 20px;
  --spacing-mi6-card-inset: 20px;
  --spacing-mi6-desktop-gap: 40px;
  --spacing-mi6-mobile-gap: 30px;
}
```

## Sources & Evidence

- [MI-6 current homepage](https://mi-6.co.jp/): original and final URL, HTTP 200, page title, corporate identity, rendered homepage content, link destinations, source custom properties, computed styles, and element rectangles supplied with the inspection.
- **Capture timestamp:** `2026-09-16T20:05:40.861Z`, equivalent to September 17, 2026, at 05:05:40.861 JST. Individual screenshot timestamps were not separately provided.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport, approximately 10802px document height; opening, customer-story, and footer screenshots.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport, approximately 13967px document height; opening and footer screenshots, plus rendered DOM and computed styles for the full homepage.
- **Collection conditions:** the supplied browser process waited for document load, finite visible/reveal animation readiness, sampled layout and text stability, and visible image decoding within stated limits. Perpetual animations were paused for readiness checks and resumed. Intermediate scroll positions were traversed. SharedWorkers and service workers were disabled.
- **Interaction boundary:** navigation, pause, close, panel, and carousel controls are evidenced as elements or visible affordances. No activation-result sequence was supplied. The current captures support persistent header placement, but do not establish every positioning or animation implementation detail.
- **Asset boundary:** no original media-file URLs or font-file URLs were supplied. Hero technology, original image dimensions, hidden panel visibility, exact responsive breakpoints, and delayed-content completeness remain unverified.

This reference describes the current homepage from the supplied original-site evidence. It uses screenshot estimates only where computed values are unavailable and labels new implementation choices separately.