# HELLO MOBILITY — Style Reference

> A miniature electric city in white, framed by forest-green type and expansive space.

**Website:** [hellomobility.jp](https://www.hellomobility.jp/)
**Original URL:** https://www.hellomobility.jp/
**Final URL:** https://www.hellomobility.jp/
**Theme:** light; white and cool gray surfaces with dark green text and small green accents.
**Inspected:** October 2, 2026, 04:24:51 JST — supplied retrieval timestamp: October 1, 2026, 19:24:51.220 UTC.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current Japanese service and brand homepage: opening composition, OUTLINE, LINEUP, APP, FOR FUTURE, NETWORKS, contact entry, navigation, and footer. Visual captures cover the desktop opening, desktop usage instructions, desktop footer, mobile opening, and mobile footer. Rendered DOM and computed styles provide additional evidence for the intervening sections.

HELLO MOBILITY presents its service through a luminous world of miniature vehicles, charging infrastructure, buildings, and smartphones. Most objects are white; deep green tires, seats, and typography provide structure, while mint details suggest electricity and connectivity. Large Lato headlines sit beside small navigation labels and carefully spaced Japanese text. The page feels spacious and engineered, with little visible interface chrome.

Its structure is a long service website with several distinct reading modes. A compact desktop navigation rail accompanies a large opening image. Explanatory sections use offset columns; the APP section pairs a small illustrated scene with widely separated instructions. The future-facing section introduces a cool gray background. A monumental, faint circular text treatment closes the page around a centered brand signature.

## How to Read This Reference

- **Measured** means a value reported by the supplied rendered DOM or computed styles. Coordinates describe the recorded layout state.
- **Derived** means arithmetic applied to those measurements, such as the distance between two text boxes.
- **Estimated** means a visual approximation from an original-page screenshot. These values were not sampled with a pixel-analysis tool.
- **Recommended** means guidance for a new implementation, including the CSS adaptation below. It is not evidence of original behavior.
- Semantic token names are aliases introduced by this reference. Original custom-property names are included where available.
- Computed font-family names establish declared styling. They do not identify the font that supplied every Japanese glyph when a Latin family was declared.
- The mobile opening contains no visible vehicle artwork in the supplied capture. Its cause is unknown. Treat this as a captured state, not proof that the artwork is intentionally removed on phones.
- Menu opening, carousel activation, hover states, app downloads, and external destinations were not exercised in the supplied evidence.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token / source | Role and evidence |
| --- | --- | --- | --- |
| White | `#FFFFFF` | `--color-canvas` | Measured body, content-section, and footer background. The primary interface surface. |
| Forest Ink | `#1E322F` | `--color-ink` / `--s-color-659df305` | Measured hero copy, navigation labels, usage instructions, and mobile menu-button fill. |
| Electric Green | `#07BE78` | `--color-accent` / `--s-color-949aa7f6` | Measured APP step numbers. Use as a precise, small accent rather than a large background field. |
| Cool Fog | `#EFF2F3` | `--color-fog` / `--s-color-9688f038` | Measured FOR FUTURE background. The mobile hero field looks similar, but its painted layer was not isolated in the supplied styles. |
| Reading Charcoal | `#333333` | `--color-body` | Measured desktop OUTLINE prose and FOR FUTURE text. Not all body text uses Forest Ink. |
| Utility Gray | `#777F8B` | `--color-muted` / `--s-color-06a4a4d6` | Measured notes, overall lineup counter, PAGE TOP, and privacy link. |
| Pale Counter Gray | `#CDD1D2` | `--color-counter-muted` | Measured inactive-looking denominator and dash in lineup item numbering. Actual state semantics were not tested. |
| Copyright Gray | `#D0D0D0` | `--color-copyright` | Measured footer copyright. Visually very subdued against white. |
| Orbit Gray | approximately `#F0F0F0` | `--color-orbit` | Estimated appearance of the oversized circular footer lettering. Exact SVG fill was not supplied. |

The logo's visible green and the rendered mint highlights are image colors. Do not assume they are exact matches for the CSS step-number accent. Likewise, the desktop hero's white field includes lighting, material shading, and cast shadows; one flat background token cannot describe the entire image.

### Other Declared Colors

| Source property | Value | Evidence limit |
| --- | --- | --- |
| `--s-color-b092c7d8` | `#E4E8E9` | Declared neutral; a specific rendered role was not established. Suitable as a recommended subtle divider alias. |
| `--s-color-0b9dca7a` | `#F0FFFA` | Declared pale mint; visible application not established. |
| `--s-color-3b9dbf1f` | `#4AB8D1` | Declared blue; visible application not established. |
| `--s-color-1dbb8ddc` | `#FE2C09` | Declared red; no corresponding primary action treatment is demonstrated. |

Repeated transparent `--g-color-*` properties and gradient-position properties occur in computed transition lists. Their presence does not establish a visible gradient-based design system.

### Theme Presets

Only the light presentation is evidenced. No theme selector or alternate dark palette was supplied.

## Tokens — Typography

### Lato — Display and Utility Text

**Measured family:** `Lato`, also declared through `--s-font-9d9e02e5`.

Lato carries the English opening slogan, section headlines, navigation labels, counters, and footer utilities. The headline system combines a 700-weight opening slogan with 900-weight explanatory headings. Most tracking is normal; PAGE TOP is a deliberate exception at `0.1em`.

Several Japanese subtitles and APP instructions also report Lato as their computed family. The evidence does not identify the fallback face used for Japanese characters in those elements. For a new implementation, an explicit `Lato, 'Noto Sans JP', sans-serif` stack is recommended for mixed-language display text.

### Noto Sans JP — Japanese Reading Text

**Measured family:** `'Noto Sans JP'`, declared through `--s-font-53a74b0e`.

The hero introduction, OUTLINE prose, vehicle descriptions, and FOR FUTURE prose use this family explicitly. Reading copy is generally 400–500 weight; the hero introduction uses 700 and vehicle titles use 600. Generous line heights keep long Japanese passages visually open.

### Type Scale

All numeric values below are measured. Size and line height are in CSS pixels.

| Role | Desktop size / line height | Mobile size / line height | Weight | Declared family and notes |
| --- | --- | --- | --- | --- |
| Hero slogan | `68 / 81.6` | `39 / 46.8` | 700 | Lato; two lines at both inspected widths |
| Hero Japanese introduction | `16 / 25.6` | `16.88 / 27.008` | 700 | Noto Sans JP |
| OUTLINE, LINEUP, APP kicker | `14 / 19.6` | `12 / 16.8` | 700 | Lato |
| Main OUTLINE, LINEUP, APP heading | `56 / 67.2` | `36 / 43.2` | 900 | Lato |
| Standard Japanese section subtitle | `20 / 28` | `18 / 25.2` | 700 | Lato declaration; Japanese fallback unresolved |
| OUTLINE prose | `15 / 28.5` | `15 / 28.5` | 500 | Noto Sans JP; mobile adds `1.5px` tracking |
| OUTLINE closing statement | `20 / 36` | `20 / 36` | 900 | Lato declaration |
| Overall lineup counter | `20 / 28` | `20 / 28` | 900 | Lato; Utility Gray |
| Vehicle title | `28 / 33.6` | `28 / 33.6` | 600 | Noto Sans JP |
| Vehicle description | `15 / 27` | `16.88 / 30.384` | 400 | Noto Sans JP |
| PREV / NEXT label | `20 / 28` | `20 / 28` | 400 | Lato |
| APP introduction | `16 / 22.4` | `16 / 30.4` | 400 desktop; 500 mobile | Lato desktop; Noto Sans JP mobile |
| Step number | `10 / 14` | `10 / 14` | 900 | Lato; Electric Green |
| Step title | `20 / 28` | `20 / 28` | 700 | Lato declaration |
| Step instruction | `16 / 27.2` | `15.6 / 26.52` | 700 | Lato declaration |
| Instruction note | `14 / 19.6` | `14 / 19.6` | 400 | Lato declaration; Utility Gray |
| FOR FUTURE kicker | `14 / 19.6` | `14 / 19.6` | 700 | Lato; does not shrink with the other kickers |
| Who we are? | `56 / 67.2` | `56 / 67.2` | 900 | Lato; retains desktop size on mobile |
| FOR FUTURE prose | `14 / 30.8` | `14 / 30.8` | 500 | Noto Sans JP; line-height ratio `2.2` |
| NETWORKS heading | `56 / 78.4` | `36 / 50.4` | 700 | Lato |
| Footer brand sentence | `20 / 28` | `18 / 25.2` | 700 | Lato declaration |
| PAGE TOP | `20 / 28` | `14 / 19.6` | 700 | Lato; tracking `2px` desktop, `1.4px` mobile |
| Privacy link | `14 / 19.6` | `14 / 19.6` | 700 | Lato |
| Copyright | `10 / 14` | `10 / 14` | 700 | Lato |
| Desktop rail labels | `10 / 14` | Not visible in closed mobile header | 700 | Lato |

Do not reduce the entire mobile type system by one multiplier. The source preserves vehicle titles, step titles, notes, and the future-section headline while changing other roles independently.

### Icons and Brand Lettering

The supplied page includes a Material Icons font declaration. Extracted ligature names include `keyboard_arrow_left`, `keyboard_arrow_right`, `arrow_forward`, and `drag_handle`. The mobile trigger visibly uses two short horizontal lines inside a dark circle. These ligature strings are icon implementation data, not words to display in ordinary text.

The HELLO MOBILITY, OpenStreet, and HELLO CYCLING wordmarks are artwork. Preserve their proportions rather than recreating them with the page's text font.

## Tokens — Spacing & Shapes

There is no demonstrated universal spacing variable. Repeated 8px-related distances coexist with much larger editorial intervals.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero introduction to slogan | `8px` | `8px` | Derived from text-box edges |
| Section kicker to heading | `8px` | `8px` | Derived for OUTLINE and LINEUP |
| Heading to subtitle | `8px` | `8px` | Derived |
| OUTLINE subtitle to body | `48px` | `24px` | Derived |
| OUTLINE paragraph separation | `32px` | `32px` in consecutive text groups | Derived; intervening imagery can create larger gaps |
| OUTLINE closing-statement separation | `56px` | `56px` | Derived |
| Rail logo to navigation | `24px` | Not applicable | Header gap and measured boxes |
| Rail row spacing | `20px` row height + `8px` gap | Not applicable | Derived 28px row pitch |
| Step number to title | `8px` | `8px` | Derived from numeral and title boxes |
| Step title to instruction | `16px` | `8px` | Derived |
| Step instruction to note | `16px` | `8px` | Derived |
| OUTLINE opening inset | `200px` | `160px` | Section top to kicker |
| APP opening inset | `230px` | `100px` | Section top to kicker |
| FOR FUTURE opening inset | `200px` | `160px` | Section top to kicker |
| PAGE TOP label to vertical rule | `16px` | `8px` | Measured link gap; rule visible in captures |

In the desktop APP sequence, the space after one text group and before the next title is approximately 200–216px. This unusually large interval is part of the composition. It should not be replaced by ordinary card padding.

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Text blocks and section wrappers | Square; sampled radius `0px` | Measured |
| PREV / NEXT buttons | Unboxed, sampled radius `0%` | Measured |
| Mobile menu trigger | `60 × 60px`, radius `80px` | Measured; renders as a circle |
| Partially visible contact artwork panel on mobile | Rounded lower corners, approximately `16px` | Screenshot estimate only |
| Phones, tires, and illustrated objects | Rounded 3D geometry | Image content, not CSS component radii |

### Layout Measurements

| Element | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Main hero text left edge | `72px` | `19.5px` | Both equal 5% of viewport width |
| Hero slogan box | `560.78 × 163.19px` | `322.14 × 93.59px` | Measured text bounds |
| Hero text-section bottom | `950px` | `801.80px` | Both approximately 95% of viewport height |
| Separate opening stage height | `1300px` | `1097.19px` | Approximately 130% of viewport height; overlaps the text section |
| Rail/header logo box | `100 × 96.38px` at `(40, 40)` | `80 × 77.11px` at `(32, 32)` | Measured |
| Mobile menu trigger | Not visible in supplied desktop captures | `(298, 40.55)`, `60 × 60px` | Measured; 32px right clearance |
| OUTLINE / LINEUP heading left edge | `216px` | `19.5px` | 15% desktop, 5% mobile |
| OUTLINE first prose width | `508.20px` | `351px` | Mobile uses 90% of viewport width |
| APP text left edge | `803.69px` | Headings and text groups are centered within the page | Desktop right column |
| APP instruction width | Approximately `320–379px` | Approximately `328–351px` | Depends on the text block |
| APP scene in desktop capture | Approximately `340px` wide | Not visually established | Estimated visible artwork bounds |
| PAGE TOP link box | `576 × 124px` | `156 × 77.59px` | Width equals 40% of each viewport |
| Footer height | `1000px` | `741.42px` | Measured section bounds |

The matching viewport ratios are derived observations. The supplied evidence does not expose the original `vh`, `vw`, or breakpoint declarations.

## Components

### Desktop Identity and Navigation Rail

**Role:** continuous brand recognition and section access during a long scroll.

The desktop header occupies a narrow transparent rail at 40px from the top and left. Its measured width is 100px and total height is 252.38px. A stacked green symbol and dark wordmark sit above five compact links: OUTLINE, LINEUP, APP, FOR FUTURE, and CONTACT.

Each navigation row contains a small dark dot inside an approximately 20px-wide leading slot, an 8px gap, and a 10px Lato label. The dot itself appears approximately 6px across. Rows have 20px layout height and a 28px pitch. There is no surrounding panel, rule, or shadow.

The rail remains at the same screen position across the supplied desktop opening, middle, and footer captures, supporting persistent positioning. The source links target `#outline`, `#lineup`, `#ap`, and `#for_future`; CONTACT points directly to `https://www.openstreet.co.jp/contact#main`. Do not replace the observed APP fragment with an invented `#app` destination when reproducing its links.

### Mobile Header and Menu Trigger

**Role:** retain identity while replacing the desktop rail with a compact navigation affordance.

The mobile header measures 390 × 141.11px with 32px padding. The brand link is 80px wide. At the upper right, a 60px dark green circle contains a small pale two-line glyph. Its center aligns vertically with the logo block.

The trigger is visible at the same upper-right position in the mobile opening and footer captures. The top-left logo is absent from the footer capture. Preserve this visible distinction; the evidence does not prove the exact mechanism that hides or scrolls the logo away.

The expanded menu was not captured. Its content layout, transition, backdrop, focus handling, and closing behavior remain unverified.

### Opening Hero

**Role:** establish the service's electric-mobility world before detailed explanation.

The desktop image fills the visible field with a white miniature city. A large scooter floats in front of an oversized upright smartphone. A bicycle occupies the left-middle area; a compact car and charging structure sit farther back on the right; another small vehicle fills the lower-right foreground. Mint rings, a lightning symbol, and slender accents connect the objects visually.

The scene uses substantial scale differences and overlapping objects. Its lower-left region stays light enough to hold the copy. The introduction is a two-line Japanese paragraph, followed after 8px by the two-line slogan, “HELLO MOBILITY, / HELLO NEW LIFE.” The slogan is real DOM text, measured at 68px Lato, weight 700, rather than lettering baked into the illustration.

At 1440 × 1000, the introduction begins at `(72, 727.63)` and the slogan at `(72, 786.81)`. The text section ends at y = 950px. A separate opening-stage element extends to y = 1300px, so the first screen is only part of the opening allocation.

At 390 × 844, the copy remains near the bottom, beginning at x = 19.5px. The Japanese introduction starts at y = 646.20px and the English slogan at y = 708.20px. The supplied mobile capture shows a cool, empty field above the text. No visible evidence establishes whether the desktop scene has been intentionally suppressed, has not loaded, or depends on an uncaptured rendering state.

### Bilingual Section Heading

**Role:** connect a compact navigation category to an expressive English title and a Japanese explanation.

The standard anatomy is:

1. Small uppercase category label.
2. An 8px gap.
3. Heavy English heading, often broken over two lines.
4. Another 8px gap.
5. A smaller Japanese subtitle.

OUTLINE uses “What is / HELLO MOBILITY?” and LINEUP uses “Which would you / like to ride?” APP uses “How to Use.” The standard heading drops from 56px to 36px on mobile, while Japanese subtitles drop from 20px to 18px.

FOR FUTURE is an exception: its centered “Who we are?” remains 56px on mobile. Its subtitle also remains 20px. A reusable implementation needs a separate variant for this group.

### OUTLINE Reading Section

**Role:** explain the service through narrative copy and supporting imagery.

The desktop reading column begins at x = 216px. The first prose block is approximately 508px wide, with 15px medium-weight Noto Sans JP and a 28.5px line height. Paragraph groups are separated by 32px. A stronger final invitation uses 20px type with a 36px line height and additional separation.

On mobile, text starts at x = 19.5px and occupies up to 351px. The prose keeps its size and line height but adds 1.5px tracking and changes from desktop charcoal to dark green. Its line breaks also differ. A large interval between early and later text groups is compatible with intervening visual content, but the exact mobile artwork placement is not shown in the supplied captures.

Do not compress this section into a grid of short feature cards. Its identity comes from continuous reading, narrow text measures, and space around the illustration.

### Mobility Lineup

**Role:** present vehicle options through an image-led selector.

The DOM contains a section-heading group, an overall “01 - 02” counter, repeated vehicle entries, and actual PREV and NEXT buttons. Unique observed vehicle labels include “超小型EV” and “電動アシスト自転車.” Each entry includes a small numeric label, a dash and denominator, a 28px vehicle title, a descriptive paragraph, and image markup.

Repeated offscreen entries indicate duplicated presentation content, not seven distinct vehicle categories. Some item counters read “03 – 02”; preserve this as an evidence inconsistency rather than inferring a third currently offered category.

Desktop caption copies occupy a diagonal progression in their measured coordinates. Mobile copies occupy a horizontal row: successive copies are 344px apart, and the visible caption block starts at x = 38px with 314px width. These positions describe snapshot geometry, not a verified animation path.

PREV and NEXT are transparent buttons approximately 74–75px wide and 28px high. Their child labels use 20px regular Lato. The measured gap between buttons is 60px on desktop and 40px on mobile. The source includes directional Material Icons ligatures.

No supplied screenshot shows the full selector, and no button activation is recorded. Autoplay, drag support, loop timing, slide transitions, and selected-state behavior are unverified.

### APP Illustration and Instruction Sequence

**Role:** explain the registration, borrowing, and return workflow.

The desktop capture pairs an approximately 340px-wide station illustration on the left with a narrow instruction column beginning near x = 804px. The illustration combines a horizontal phone, a raised charging canopy, a mint location pin, a thin circular orbit, and fine connecting lines. The white scene sits directly on the white page without a card border.

The right column contains widely separated instruction groups. Each group starts with a tiny green number aligned beside a 20px title. A bold paragraph follows after 16px; supplementary information uses regular 14px gray text and another 16px separation. Visible titles are “会員登録,” “借りる,” and “返却する.” The later DOM also contains “04” and “早速アプリをダウンロード！” as a download invitation.

The artwork's sticky behavior or step-by-step replacement is not established by a single middle-page capture. Reproduce the visual pairing without claiming a scroll-synchronized illustration sequence.

On mobile, the number-title groups are horizontally centered, with body boxes spanning approximately 328–351px. Title-to-body and body-to-note spacing shrink to 8px. The section remains long, approximately 2360px, rather than becoming a tightly packed list.

**Content discrepancy:** the mobile “借りる” paragraph repeats registration instructions, whereas desktop describes choosing a station and reserving a vehicle. This is a difference in the supplied current text, not a design convention to reuse.

### App Download Links

**Role:** move visitors from the service explanation to the mobile application.

The mobile DOM contains two store links after the fourth numbered invitation. Both link boxes are 50px high. The first is approximately 150.78px wide and the second 162.5px, with a 16px gap. Together they form a centered row approximately 329px wide.

Observed destinations are the HELLO MOBILITY Apple App Store URL and a Google Play URL with application ID `jp.co.helloscooter`. Neither destination was opened. The desktop link extraction does not establish an equivalent visible badge row, so do not invent a desktop QR code or alternate download interaction.

### FOR FUTURE and NETWORKS

**Role:** move from practical usage to the platform's broader transport and energy context.

FOR FUTURE switches the page to `#EFF2F3`. Its centered heading group sits above left-aligned explanatory passages. Desktop prose starts near x = 266.41px, with a first body measure of approximately 561.47px. The 14px text uses a particularly open 30.8px line height. Larger statements use 20px type and 36px line height; they become 18px and 32.4px on mobile.

The NETWORKS group appears within this larger section. Desktop measurements show its English heading and Japanese subtitle arranged side by side with a 24px gap, followed by three linked partner marks on one row. On mobile, the heading and subtitle stack and the three partner link boxes form a centered vertical list. Each mobile partner box is 232px wide, with 56px gaps between successive boxes.

Partner logos retain their own proportions and identity. This area is a network directory, not evidence of website production credits.

### Contact Entry

**Role:** direct both service and business inquiries to the external contact page.

The observed anchor points to `https://www.openstreet.co.jp/contact#main`. Its content includes CONTACT, two lines of Japanese explanation, an arrow ligature, and duplicated internal content. Duplication alone does not prove a rollover animation.

On mobile, the anchor is 292.5px wide, centered at x = 48.75px. The footer capture reveals the bottom of a matching-width illustration panel above the footer: a tilted phone, mint paper plane, and communication imagery. Its lower corners appear gently rounded.

The anchor begins above its nominal section boundary in both DOM snapshots: by 150px on desktop and 250px on mobile. This supports an overlapping composition. Desktop child text bounds are unusually narrow and heavily wrapped, so they should not be treated as a reliable specification for the intended final title layout without another visual capture.

### Brand Footer

**Role:** end the page with a memorable brand image and quiet utility navigation.

The desktop footer is a 1000px-tall white field. Large pale text follows a circular path, extending beyond the screen edges. Inside that arc, the two-line Japanese brand sentence is centered above the HELLO MOBILITY mark. The sentence begins approximately 412px below the footer's top. The logo below appears approximately 100px wide.

The supplied footer markup contains an SVG with `viewBox='0 0 500 500'` and a circular path of radius 200 around `(250, 250)`. This confirms curved vector text geometry. It does not confirm that the text rotates.

Near the bottom, OpenStreet and HELLO CYCLING marks sit on the left, PAGE TOP occupies the center, and the privacy link and copyright sit on the right. The original footer displays the OpenStreet wordmark, a link to its official website, and the copyright name “OpenStreet Co., Ltd.”

PAGE TOP is visually small but occupies a much larger anchor. Its label uses gray tracked capitals above a thin vertical line. The measured desktop link is 576px wide and 124px tall; the line appears approximately 80px tall.

The mobile footer reorganizes into three levels: centered brand statement and mark; centered PAGE TOP; then a full-width partner-logo row and a separate legal block. Thin horizontal rules separate the lower rows. The partner marks remain side by side. The privacy link and copyright align 24px from the left. The PAGE TOP line is approximately 50px tall.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| General element transitions | Frequently `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A common declared transition timing; no specific hover transformation is demonstrated |
| Body background | `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | Background transition is declared; its triggering condition is unknown |
| Loader | Body text includes a 50px circular loader, 2px border, `#4DD2A1`, white right border, and `1s infinite linear` rotation | Source declaration only; a visible loading sequence was not captured |
| Desktop navigation | Same rail position in opening, middle, and footer captures | Persistent visual placement is supported |
| Mobile trigger | Same upper-right position in opening and footer captures | Persistent trigger placement is supported; expanded state is unknown |
| Section links | Fragment destinations are present | Navigable anchors are evidenced; smooth scrolling and scroll-spy states are not |
| Vehicle selector | Repeated offscreen entries and PREV / NEXT buttons | Selector structure is evidenced; activation behavior and timing are unverified |
| Circular footer text | SVG circular path and curved lettering | Shape is verified; rotation, speed, and direction are not |
| 3D opening scene | One settled desktop frame | Rendering technology, animation, camera movement, and interactivity are unknown |

A transition declaration is not a record of an interaction. Avoid describing the site as having parallax, continuous rotation, animated 3D, or scroll-linked scene changes without further evidence.

**Recommended adaptation:** use the observed 300ms easing for modest color and opacity feedback. Keep decorative motion optional, provide reduced-motion behavior, and leave important text visible without animation initialization.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | White | Continuous reading surface and background for pale illustrations |
| Hero visual field | White-to-cool-gray rendered world | Establishes depth through image lighting and object overlap |
| Text groups | Transparent, unboxed | Maintains an editorial rather than card-based layout |
| Future section | Flat `#EFF2F3` | Marks a thematic change within the long page |
| Mobile navigation trigger | Solid dark green circle | A concentrated, high-contrast control |
| Footer orbit | Very pale gray vector lettering | Large-scale decoration behind the brand signature |
| Footer utilities | White, with fine rules on mobile | Separates partner identities and legal information |

The images contain shadows, but the interface does not demonstrate a general shadow-based elevation system. Keep rendered object shadows inside the artwork instead of adding floating shadows to every content block.

## Imagery

The dominant imagery is polished 3D illustration with miniature-city proportions. White molded surfaces, rounded vehicle bodies, dark green rubber and seats, mint electrical details, and soft environmental lighting create a coherent world. Objects cast directional shadows that establish a ground plane without requiring colored panels behind them.

The opening uses a layered perspective composition with an oversized phone as the central organizing object. Supporting scenes are more diagrammatic: exploded station layers, a location pin, orbit lines, and a phone used as a physical base. The partially captured contact illustration continues the phone-and-mint-object vocabulary.

Preserve these relationships when commissioning replacement artwork:

- Use white and cool gray for most of the object area.
- Reserve deep green for tires, seats, recesses, and other structural details.
- Use mint for energy, location, and communication cues.
- Leave a quiet lower-left region for desktop hero copy.
- Keep small explanatory illustrations surrounded by substantial white space.
- Retain smooth image rendering; pixelation and halftone textures are not part of this visual language.

### Observed Asset References

These URLs occur in the supplied original-page DOM. Attribute dimensions do not establish decoded file dimensions. No asset was separately fetched for this reference.

| Reference | Observed URL or markup | Evidence and limitation |
| --- | --- | --- |
| OUTLINE image | `https://storage.googleapis.com/studio-design-asset-files/projects/4yqBX8bMWj/s-2060x1596_v-frms_webp_2a9fe4f6-acaf-466a-8214-2ebb2ab320d0_small.webp` | Image markup inside OUTLINE; attributes specify 2060 × 1596. Its exact visible composition is not shown in the supplied OUTLINE captures. |
| APP image | `https://storage.googleapis.com/studio-design-asset-files/projects/4yqBX8bMWj/s-600x600_v-fs_webp_2880fa56-a358-4607-ade6-59a7c6e65f05_small.webp` | Image reference inside APP; attributes specify 600 × 600. Exact correspondence to the captured station scene was not independently established. |
| HELLO CYCLING footer mark | `https://storage.googleapis.com/studio-design-asset-files/projects/4yqBX8bMWj/s-782x100_v-fs_webp_f7bc6050-07c4-42b7-901c-66688276159a_small.webp` | Image inside the footer link to HELLO CYCLING; attributes specify 782 × 100. |
| Footer circular lettering | Inline SVG, 500 × 500 viewBox, radius-200 circular path | Direct geometric evidence; no separate image file required |
| Hero and main brand mark | Visible in original-page screenshots | Complete asset URLs were not supplied; do not invent paths or identify a rendering library |

Use authorized artwork and logos when available. CSS can reproduce the layout, typography, and circular lettering, but it cannot replace the identity supplied by the 3D scenes.

## Layout & Responsive Behavior

### Page Allocation

Measured section bounds below are rounded to two decimal places. They describe the captured layout, not recommended fixed section heights.

| Region | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Opening stage | `0 / 1300px` | `0 / 1097.19px` |
| OUTLINE | `1300 / 1411.97px` | `1097.19 / 1843.86px` |
| LINEUP | `2711.97 / 1261.97px` | `2941.05 / 770.36px` |
| APP | `3973.94 / 2315.03px` | `3711.41 / 2360.36px` |
| FOR FUTURE, including NETWORKS | `6288.97 / 2565.52px` | `6071.77 / 3121.69px` |
| Contact section wrapper | `8854.48 / 263.14px` | `9193.45 / 178.5px` |
| Footer | `9117.63 / 1000px` | `9371.95 / 741.42px` |

The total document height is 10117.63px on desktop and 10113.38px on mobile. Their similar totals conceal significant internal reflow: OUTLINE and FOR FUTURE become longer, while LINEUP and the footer become shorter.

### Desktop Composition

The main reading sections begin well to the right of the narrow rail, commonly at 15% of the viewport width. The hero copy uses a different 5% inset. APP reverses the emphasis by placing its text in a right-hand column. FOR FUTURE centers its heading while retaining a left-aligned reading measure below.

Avoid applying one centered max-width container indiscriminately. The changing left edges and image-to-text relationships are part of the page's rhythm.

### Mobile Composition

The regular text measure becomes 90% of the viewport, leaving 19.5px on each side at 390px. The header has its own larger 32px inset. APP step-title groups center horizontally, partner links stack in NETWORKS, and footer utilities become full-width rows.

The hero retains its low text placement and two-line slogan despite the absence of visible artwork. Its 39px slogan fits within approximately 322px. Most section headings become 36px, but “Who we are?” remains 56px. Japanese reading text is not uniformly reduced; some vehicle descriptions are larger on mobile than desktop.

The supplied mobile screenshot does not expose the middle-page image sequence. Exact image ordering, mobile scene replacement, and sticky behavior should remain open implementation questions.

### Breakpoint Limits

Only two viewport widths were supplied. The original breakpoint, tablet behavior, landscape behavior, safe-area handling, and text-zoom response are unknown. The 768px breakpoint in the Quick Start is a recommended implementation choice, not a recovered source value.

## Do’s and Don’ts

### Do

- Build the palette around white, cool gray, and `#1E322F`.
- Keep `#07BE78` concentrated in small indicators and accents.
- Pair heavy Lato display text with well-spaced Japanese reading copy.
- Preserve the 8px relationships within bilingual heading groups.
- Use different layout anchors for the hero, reading sections, APP column, and footer.
- Keep the desktop navigation rail compact and visually transparent.
- Preserve large intervals between APP instruction groups.
- Let the 3D artwork supply depth, scale contrast, and visual density.
- Use pale circular footer lettering as a large decorative layer.
- Treat mobile typography and footer organization as component-specific changes.
- Record missing media and untested interactions as limitations.

### Don’t

- Don’t flatten the entire site into a generic centered hero and repeated card grid.
- Don’t substitute a bright green page background for the restrained accent system.
- Don’t treat the declared red and blue variables as demonstrated action colors.
- Don’t add glass panels, glossy UI gradients, or pervasive card shadows.
- Don’t reduce all mobile type with a single scaling factor.
- Don’t infer currently available vehicle categories from every object in the hero illustration.
- Don’t treat cloned carousel entries as separate content.
- Don’t reproduce the mobile borrowing-copy discrepancy in a new implementation.
- Don’t describe the blank mobile hero as an intentional responsive feature without verification.
- Don’t invent an expanded menu, rotating footer, autoplay carousel, or 3D interaction and label it observed.

## Recommended Implementation Additions

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

- Use a semantic `h1` for the opening slogan and proper headings for APP and other section titles. Several source display elements are paragraphs.
- Give the menu trigger an accessible name, `aria-expanded`, and an associated navigation panel. Implement keyboard access, Escape handling, and focus restoration.
- Preserve the small visual navigation labels while enlarging their interactive areas. The observed rail rows and selector buttons are only 20px and 28px high respectively.
- Hide decorative orbit lettering and duplicate visual layers from assistive technology. Keep one readable copy of each meaningful label.
- Supply accessible names for linked partner logos and app-store badges; several extracted image links have empty text.
- Provide a stable poster or fallback image for hero media, especially on mobile. Keep essential copy visible if media fails.
- Keep vehicle selectors usable without autoplay, and ensure offscreen cloned content does not create duplicate keyboard stops.
- Verify text contrast for small green numerals, gray notes, and footer legal text. The pale orbit may remain decorative, but meaningful information should stay readable.
- Use responsive spacing and natural content height under text zoom instead of fixing every section to its measured capture height.
- Maintain one content source for desktop and mobile instructions to prevent copy divergence.

## Agent Prompt Guide

### Quick Color Reference

- Primary canvas: `#FFFFFF`.
- Main headings, hero text, and mobile trigger: `#1E322F`.
- Small step accents: `#07BE78`.
- Future-section surface: `#EFF2F3`.
- Long desktop reading copy: `#333333`.
- Notes and footer utilities: `#777F8B`.
- Decorative circular lettering: approximately `#F0F0F0`.
- Shadows belong mainly to rendered imagery, not UI cards.

### Overall Prompt

“Create a spacious Japanese electric-mobility service website inspired by the supplied HELLO MOBILITY reference. Use a white canvas, deep forest-green text `#1E322F`, cool gray sections `#EFF2F3`, and small green accents `#07BE78`. Build a compact persistent desktop logo-and-dot navigation rail. Pair a large white miniature-city illustration with a two-line Lato slogan anchored low on the left. Use heavy English section headings, smaller Japanese subtitles, narrow reading columns, and generous vertical intervals. Give the usage section a small 3D station scene beside a right-hand numbered instruction column. End with oversized pale circular lettering around a centered brand signature. On mobile, use a circular dark menu trigger, 5% content gutters, component-specific type sizes, and stacked footer utilities. Do not invent unverified original interactions.”

### Example Component Prompts

1. **Desktop navigation:** “A transparent 100px-wide navigation rail positioned 40px from the top and left. Place the supplied stacked brand mark above five 10px bold Lato links. Each row has a tiny dark green dot in a 20px slot, an 8px gap, and a 28px row pitch. No panel, border, or shadow.”
2. **Bilingual heading:** “A small uppercase Lato category label, an 8px gap, a 56px weight-900 English heading at 1.2 line height, another 8px gap, and a 20px Japanese subtitle. Reduce the standard heading to 36px and subtitle to 18px on mobile.”
3. **Usage instructions:** “An unboxed white section with a small white-and-mint 3D station illustration on the left. Place instructions in a narrow right column. Use 10px green numerals beside 20px dark titles, 16px bold descriptions at 1.7 line height, and 14px gray notes. Leave approximately 200px between text groups on desktop.”
4. **Footer:** “A tall white footer with a huge cropped circle of very pale uppercase lettering. Center two lines of Japanese brand copy above the supplied logo. Along the bottom, align partner marks left, a tracked PAGE TOP label and thin vertical line centrally, and legal links right. Stack these utility regions on mobile.”
5. **Supporting artwork:** “Create a white miniature charging station floating above a horizontal smartphone. Use rounded molded forms, dark green recesses, mint energy details, a mint location pin, a fine circular orbit, and soft directional shadows. Keep the surrounding background white and leave ample empty space. This is replacement artwork, not an original asset reconstruction.”

## Quick Start

### CSS Custom Properties

This CSS is an implementation adaptation, not an extracted stylesheet. Measured colors and typography are combined with recommended responsive rules. The 768px breakpoint, intermediate scaling, grid construction, and footer-orbit positioning are recommendations. Load authorized Lato and Noto Sans JP font files separately; fallback fonts will change text widths.

The hero assumes an optional `.hm-hero-art` image inside `.hm-hero-field`. Without artwork, the field remains a readable cool-gray fallback. This does not prescribe intentionally hiding media on mobile. The menu panel and carousel behavior require separate accessible implementation.

```css
:root {
  /* Measured palette, with descriptive aliases. */
  --color-canvas: #fff;
  --color-ink: #1e322f;
  --color-accent: #07be78;
  --color-fog: #eff2f3;
  --color-body: #333;
  --color-muted: #777f8b;
  --color-counter-muted: #cdd1d2;
  --color-copyright: #d0d0d0;

  /* Declared neutral reused for recommended rules. */
  --color-rule: #e4e8e9;

  /* Visual estimate for decorative lettering. */
  --color-orbit: #f0f0f0;

  /* Explicit fallback stacks are an adaptation. */
  --font-display: 'Lato', 'Noto Sans JP', sans-serif;
  --font-reading: 'Noto Sans JP', sans-serif;
  --text-hero: 68px;
  --text-section: 56px;
  --text-subtitle: 20px;
  --text-kicker: 14px;
  --text-body: 15px;
  --text-step: 16px;
  --text-note: 14px;
  --text-small: 10px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --section-space: 200px;
  --content-width: 70%;
  --hero-gutter: 5vw;
  --motion-duration: 300ms;
  --motion-ease: cubic-bezier(0.4, 0.4, 0, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-reading);
}

img { display: block; max-inline-size: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

.hm-header {
  position: fixed;
  z-index: 20;
  inset-block-start: 40px;
  inset-inline-start: 40px;
  inline-size: 100px;
}

.hm-brand { display: block; inline-size: 100px; }
.hm-brand img { inline-size: 100%; block-size: auto; }

.hm-nav {
  display: grid;
  gap: 8px;
  margin-block-start: 24px;
}

.hm-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 20px;
  text-decoration: none;
  font: 700 10px/14px var(--font-display);
}

.hm-nav a::before {
  content: '';
  flex: 0 0 20px;
  block-size: 20px;
  background: radial-gradient(circle, currentColor 3px, transparent 3.5px)
    center / 20px 20px no-repeat;
}

.hm-menu { display: none; }

.hm-hero {
  position: relative;
  min-block-size: 130vh;
  min-block-size: 130svh;
  isolation: isolate;
}

.hm-hero-field {
  position: absolute;
  inset: 0 0 auto;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--color-fog);
  z-index: -1;
}

.hm-hero-art {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.hm-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-block-size: 95vh;
  min-block-size: 95svh;
  margin-inline: var(--hero-gutter);
  padding-block-start: 180px;
}

.hm-hero-intro {
  margin: 0;
  font: 700 16px/1.6 var(--font-reading);
}

.hm-hero-title {
  margin: 0;
  font: 700 var(--text-hero)/1.2 var(--font-display);
}

.hm-section { padding-block: var(--section-space) 160px; }
.hm-inner { inline-size: var(--content-width); margin-inline: auto; }

.hm-kicker {
  margin: 0 0 8px;
  font: 700 var(--text-kicker)/1.4 var(--font-display);
}

.hm-title {
  margin: 0 0 8px;
  font: 900 var(--text-section)/1.2 var(--font-display);
}

.hm-subtitle {
  margin: 0;
  font: 700 var(--text-subtitle)/1.4 var(--font-display);
}

.hm-prose {
  max-inline-size: 508px;
  margin-block-start: 48px;
  color: var(--color-body);
  font: 500 15px/1.9 var(--font-reading);
}

.hm-prose p { margin: 0; }
.hm-prose p + p { margin-block-start: 32px; }

.hm-statement {
  margin-block-start: 56px;
  font: 900 20px/1.8 var(--font-display);
}

/* Recommended grid approximating the desktop APP alignment. */
.hm-app-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
}

.hm-app-art {
  inline-size: min(340px, 100%);
  margin: 64px auto 0;
}

.hm-step + .hm-step { margin-block-start: 200px; }

.hm-step-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font: 700 20px/28px var(--font-display);
}

.hm-step-number {
  color: var(--color-accent);
  font: 900 10px/14px var(--font-display);
}

.hm-step-body {
  margin: 0;
  max-inline-size: 380px;
  font: 700 var(--text-step)/1.7 var(--font-display);
}

.hm-note {
  margin: 16px 0 0;
  color: var(--color-muted);
  font: 400 14px/1.4 var(--font-display);
}

.hm-lineup-title {
  margin: 10px 0;
  font: 600 28px/1.2 var(--font-reading);
}

.hm-lineup-description {
  margin: 0;
  font: 400 15px/1.8 var(--font-reading);
}

.hm-selector-controls {
  display: flex;
  justify-content: flex-end;
  gap: 60px;
}

.hm-selector-controls button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  min-block-size: 44px;
  color: var(--color-body);
  background: transparent;
  font: 400 20px/28px var(--font-display);
  cursor: pointer;
}

.hm-store-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-block-start: 40px;
}

.hm-store-links img { block-size: 50px; inline-size: auto; }

.hm-future { background: var(--color-fog); color: var(--color-body); }
.hm-future > .hm-inner { inline-size: 63%; }
.hm-future-heading { text-align: center; }
.hm-future .hm-prose { max-inline-size: 562px; font-size: 14px; line-height: 2.2; }

.hm-networks-heading {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hm-network-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  margin-block-start: 60px;
}

.hm-network-links a { max-inline-size: 265px; }

.hm-footer {
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
  background: var(--color-canvas);
}

/* Orbit size and placement are visual approximations. */
.hm-footer-orbit {
  position: absolute;
  inset-block-start: 140px;
  inset-inline-start: 50%;
  inline-size: 140vw;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.hm-footer-orbit text {
  fill: var(--color-orbit);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

.hm-footer-message {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: max-content;
  max-inline-size: 90%;
  text-align: center;
}

.hm-footer-message p {
  margin: 0;
  font: 700 20px/1.4 var(--font-display);
}

.hm-footer-logo { inline-size: 100px; margin: 24px auto 0; }

.hm-footer-bottom {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40vw minmax(0, 1fr);
  align-items: center;
  padding-inline: 40px;
}

.hm-footer-partners {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hm-footer-partners a { min-inline-size: 0; }
.hm-footer-partners a:first-child { flex: 0 1 171.5px; }
.hm-footer-partners a:last-child { flex: 0 1 196.5px; }

.hm-page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--color-muted);
  text-decoration: none;
  font: 700 20px/28px var(--font-display);
  letter-spacing: 0.1em;
}

.hm-page-top::after {
  content: '';
  inline-size: 1px;
  block-size: 80px;
  background: currentColor;
}

.hm-legal { text-align: right; }
.hm-legal a { color: var(--color-muted); font: 700 14px/1.4 var(--font-display); }
.hm-legal p { margin: 8px 0 0; color: var(--color-copyright); font: 700 10px/1.4 var(--font-display); }

/* Recommended focus and feedback; original states were not tested. */
:where(a, button):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 5px;
}

.hm-nav a, .hm-selector-controls button {
  transition: color var(--motion-duration) var(--motion-ease);
}

@media (hover: hover) {
  .hm-nav a:hover, .hm-selector-controls button:hover {
    color: var(--color-accent);
  }
}

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (max-width: 767px) {
  :root {
    --content-width: 90%;
    --text-hero: clamp(30px, 10vw, 48px);
    --text-section: 36px;
    --text-subtitle: 18px;
    --text-kicker: 12px;
    --text-step: 15.6px;
    --section-space: 160px;
  }

  .hm-header {
    position: absolute;
    inset: 0 0 auto;
    inline-size: 100%;
    padding: 32px;
  }

  .hm-brand { inline-size: 80px; }
  .hm-nav { display: none; }

  .hm-menu {
    position: fixed;
    inset-block-start: max(40.55px, env(safe-area-inset-top, 0px));
    inset-inline-end: 32px;
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 60px;
    padding: 0;
    border: 0;
    border-radius: 80px;
    color: white;
    background: var(--color-ink);
    cursor: pointer;
  }

  .hm-menu-lines {
    inline-size: 15px;
    block-size: 6px;
    border-block: 1px solid currentColor;
  }

  .hm-hero-intro { font-size: 16.88px; }
  .hm-section { padding-block-end: 100px; }
  .hm-prose { margin-block-start: 24px; color: var(--color-ink); letter-spacing: 0.1em; }

  .hm-app-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hm-app-art { inline-size: min(300px, 100%); margin-block-start: 0; }
  .hm-step + .hm-step { margin-block-start: 96px; }
  .hm-step-heading { justify-content: center; margin-block-end: 8px; }
  .hm-step-body { margin-inline: auto; }
  .hm-note { margin-block-start: 8px; }

  .hm-lineup-description { font-size: 16.88px; }
  .hm-selector-controls { justify-content: center; gap: 40px; }

  .hm-future > .hm-inner { inline-size: 90%; }
  .hm-future .hm-kicker { font-size: 14px; }
  .hm-future .hm-title { font-size: clamp(36px, 14.36vw, 56px); }
  .hm-future .hm-subtitle { font-size: 20px; }
  .hm-future .hm-prose { color: var(--color-body); letter-spacing: normal; }

  .hm-networks-heading { flex-direction: column; gap: 0; text-align: center; }
  .hm-network-links { flex-direction: column; gap: 56px; }
  .hm-network-links a { inline-size: 232px; }

  .hm-footer { min-block-size: 0; padding-block-start: 240px; }
  .hm-footer-orbit { inline-size: 220vw; inset-block-start: 55px; }
  .hm-footer-orbit text { font-size: 26px; }

  .hm-footer-message {
    position: relative;
    inset: auto;
    transform: none;
    margin-inline: auto;
  }

  .hm-footer-message p { font-size: 18px; }
  .hm-footer-logo { inline-size: 80px; }

  .hm-footer-bottom {
    position: relative;
    inset: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    margin-block-start: 80px;
  }

  .hm-page-top {
    order: 1;
    inline-size: 40vw;
    justify-self: center;
    gap: 8px;
    font-size: 14px;
    line-height: 19.6px;
  }

  .hm-page-top::after { block-size: 50px; }

  .hm-footer-partners {
    order: 2;
    justify-content: space-between;
    padding: 16px;
    border-block: 1px solid var(--color-rule);
  }

  .hm-footer-partners a:first-child { flex-basis: 155.53px; }
  .hm-footer-partners a:last-child { flex-basis: 178.45px; }
  .hm-legal { order: 3; padding: 24px 24px 48px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-nav a, .hm-selector-controls button { transition: none; }
  .hm-footer-orbit { animation: none; }
  html { scroll-behavior: auto; }
}
```

The mobile APP spacing in this starter is deliberately a readable adaptation; it does not recreate unverified illustration changes between the source's widely separated steps. Use measured artwork and complete mobile captures before matching that sequence more closely.

### Circular Footer Markup

This uses the same evidenced circle geometry with recommended decorative semantics. Text placement and repetition are an approximation; no rotation is added.

```html
<svg class='hm-footer-orbit' viewBox='0 0 500 500'
     aria-hidden='true' focusable='false'>
  <defs>
    <path id='hm-footer-circle'
      d='M 250,250 m -200,0 a 200,200 0 1,1 400,0 a 200,200 0 1,1 -400,0'
      fill='none' />
  </defs>
  <text>
    <textPath href='#hm-footer-circle'>
      HELLO MOBILITY, HELLO NEW LIFE. HELLO MOBILITY, HELLO NEW LIFE.
    </textPath>
  </text>
</svg>
```

Keep this SVG inside `.hm-footer`, behind the message and utility elements. Use a unique path ID if multiple footers or previews appear in the same document.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. The original site's use of Tailwind is not established. Define the custom properties above first.

```css
@theme inline {
  --color-canvas: #ffffff;
  --color-ink: #1e322f;
  --color-accent: #07be78;
  --color-fog: #eff2f3;
  --color-body: #333333;
  --color-muted: #777f8b;
  --color-rule: #e4e8e9;

  --font-display: 'Lato', 'Noto Sans JP', sans-serif;
  --font-reading: 'Noto Sans JP', sans-serif;

  --text-hero: var(--text-hero-size, 68px);
  --text-section: var(--text-section-size, 56px);
  --text-note: 14px;
  --spacing-editorial: 200px;
  --radius-control: 999px;
}
```

Apply responsive utility variants explicitly; the mapping does not encode every measured mobile exception. The CSS and markup were not executed or browser-tested as part of this evidence-only analysis.

## Sources & Evidence

- **Original and final website:** [https://www.hellomobility.jp/](https://www.hellomobility.jp/). The supplied browser observation reports HTTP 200 and no URL change.
- **Capture time:** `2026-10-01T19:24:51.220Z`, equivalent to October 2, 2026, 04:24:51.220 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; original-page captures of the opening, APP instructions, and footer; rendered text, links, section bounds, element rectangles, custom properties, and computed styles.
- **Mobile evidence:** 390 × 844 CSS pixels; original-page opening and footer captures; equivalent rendered DOM and computed-style evidence for the complete document.
- **Readiness protocol:** the supplied inspection waited at least five seconds initially and checked document loading, finite animation completion, sampled layout and text stability, and visible image decoding, subject to bounded timeouts. Perpetual animations were paused for readiness checks and resumed. Intermediate scroll positions were traversed. SharedWorkers and service workers were disabled.
- **Observed states:** settled opening, middle-page desktop instructions, and lower-page footer compositions. Link and button presence is documented; activation outcomes were not supplied.
- **Limitations:** the mobile hero artwork is absent from its capture; expanded navigation, carousel transitions, hover feedback, continuous motion, and destination pages remain unverified. Middle-page imagery has stronger desktop than mobile visual coverage. Both snapshots report an empty document title; this reference's title follows the visible brand identity.

This document describes the current page represented by the supplied captures and DOM. It uses no independent browsing or file inspection. Measurements, screenshot estimates, and implementation recommendations are identified separately.