# TOMMY VERSE — Style Reference

> A design company’s journey from outer space to a local street, told through photography, cartoon characters, and pixel scenery.

**Original URL:** [https://tommy-verse.jp/](https://tommy-verse.jp/)
**Final URL:** [https://tommy-verse.jp/](https://tommy-verse.jp/)
**Theme:** dark cosmic scenes, aqua and green story sections, and a white information layer; no user-selectable theme was verified.
**Inspected:** October 2, 2026, at 00:18 JST, from the supplied browser inspection recorded at `2026-10-01T15:18:09.839Z`.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current corporate homepage, including its desktop loading state, mobile opening composition, photographic transition, pixel landscape, services, work and blog listings, contact information, and footer. Some intermediate sections are documented through rendered DOM measurements without a corresponding supplied screenshot. Linked pages and activated controls were not inspected.

TOMMY VERSE uses an expansive illustrated journey to introduce a working design company. A photographic star field surrounds planets, a large Earth, floating cartoon figures, and small decorative objects. The mobile opening pairs this scene with a white Japanese slogan and a yellow brand signature. Later, a real street in Narita and a person in an orange astronaut suit connect the fantasy to the company’s local identity. Pixel trees, buildings, characters, and roads carry the story into the work section.

The interface remains recognizable throughout this visual variety. Deep navy `#001e5a` supplies the main text and identity color; saturated yellow `#ffc300` marks speech bubbles, navigation panels, and controls. White capsules, circular section links, bold Japanese typography, and compact category pills provide a consistent vocabulary. The white footer resolves the busy journey into an orderly directory without losing the character illustrations or conversational humor.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and element rectangles. Measurements refer to the recorded state at each viewport.
- **Visual estimates** come from the five original-page captures. They describe visible proportions and artwork, rather than recovered CSS declarations.
- **Derived** values are simple calculations from measured rectangles, such as the gap between adjacent cards.
- **Recommended** values and behaviors are implementation guidance. The Quick Start uses new selectors and an adapted layout; it is not the original stylesheet.
- **Source variables** are identified explicitly. Other token names are descriptive implementation aliases.
- The desktop opening image shows a loader. The mobile opening image shows the composed hero. A settled desktop hero layout is therefore not established by the original-page screenshots.
- Some navigation elements have negative vertical coordinates in the DOM sample. They belong to an offscreen navigation structure and must not be treated as visible footer or open-menu measurements.
- A computed font stack establishes a declaration, not proof that every named font downloaded successfully. Empty-text heading elements also prevent reliable font identification for artwork-based lettering.

## Tokens — Colors

### Default Palette

| Name | Value | Token | Evidence and role |
| --- | --- | --- | --- |
| Deep Navy | `#001e5a` | `--tv-navy`; source `--base-text-color` | Measured body text color; visible in logos, navigation, footer text, and dark controls |
| Bright Yellow | `#ffc300` | `--tv-yellow`; source `--base-link-color` | Measured footer panels, category treatment in the offscreen navigation, and carousel buttons; visually repeated in speech bubbles |
| White | `#ffffff` | `--tv-white` | Measured body/footer background and circular section-link surfaces; visible hero capsules and reversed lettering |
| Service Aqua | `#91dcd7` | `--tv-aqua` | Measured background of the services story section |
| Transition Aqua | `#92ddd6` | `--tv-aqua-transition` | Measured background of the photographic arrival section; photography covers much of the visible area |
| Service Cyan | `#23aabe` | `--tv-service-accent` | Measured text-wrapper color inside the circular service link |
| Works Green | `#016e14` | `--tv-works-accent` | Measured text-wrapper color inside the circular works link |

The near-black star field, photographic blue Earth, orange spacesuit, and vivid green terrain contain many additional asset colors. Their exact colors were not supplied as reusable CSS tokens. In particular, `#016e14` is a measured works-link text color, not a measurement of the brighter pixel landscape.

### Contextual Color States

| Context | Visible treatment | Confidence |
| --- | --- | --- |
| Opening mobile header | White identity on the dark scene; white About capsule; blue planet graphic | Screenshot observation |
| Scrolled header | White background, navy identity and navigation, yellow About capsule | Desktop and mobile screenshot observation |
| Hero service card | White capsule, navy Japanese label, yellow English label, product artwork | Mobile screenshot observation |
| Footer directory | Yellow panels, navy main labels, white secondary labels and white category pills | Screenshot observation; panel and pill fills also measured |
| Return-to-top choices | Navy pills with yellow labels | Screenshot observation |

These are contextual treatments within one page. The evidence does not establish a light/dark preference switch.

WordPress preset colors, gradients, and shadows also appear among the custom properties. Their presence alone does not establish their use in this design. They are excluded from the site palette.

## Tokens — Typography

### Japanese Interface and Narrative Copy

**Measured body stack:** `'Noto Sans JP', 'Noto Sans CJK', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif`.

Sampled headings use a shorter stack beginning with `'Noto Sans JP', 'Noto Sans Japanese'`, followed by Meiryo and sans-serif fallbacks. Most visible navigation, narrative paragraphs, and card titles use weight `700`; the services story heading uses `900`.

The effect is sturdy and friendly. Long line heights and intentional line breaks give the narrative room to breathe, while wide heading tracking makes short Japanese statements feel emphatic.

### Selected Latin and Numeric Text

**Measured family:** `'Montserrat Alternates', sans-serif`.

This family is explicitly declared on the telephone link and a sampled copyright paragraph. The telephone uses weight `600`; the copyright sample uses `700`. Do not extend that evidence to every English label or the large brand wordmark.

### Wordmarks and Artwork Lettering

The header and footer wordmarks sit in heading elements with no extracted text. The mobile hero heading is also empty in the text extraction while the screenshot clearly displays the slogan `愛のことを まじめに語る 世界をつくりたい。` and a yellow TOMMY VERSE signature.

Treat these as artwork-dependent elements for reproduction. Their exact display typefaces and asset formats are not established. The small pixel-style English line in the green section is visually distinct, but no font family was identified for it.

### Type Scale

All numbers below are measured computed values unless otherwise stated.

| Role | Desktop | Mobile | Weight and tracking |
| --- | --- | --- | --- |
| Root font size | `10px` | `10px` | A source sizing convention, not the reading-copy size |
| Primary desktop navigation | `14px / 14px` | Not visible in compact header | `700`; `0.3px` tracking |
| Introductory narrative | `18px / 37.998px` | `12.48px / 24.96px` | `700`; `0.1em` tracking |
| Services story heading | `44px / 64.856px` | `26.7429px / 38.376px` | `900`; `0.14em` tracking |
| Services narrative | `16px / 36px` | `12.48px / 24.96px` | `700`; `0.1em` tracking |
| Service section label | `36px / 36px` | `20.8px / 20.8px` | `700`; `0.3px` tracking |
| Service scene item label | `16px / 21.04px` | `11.44px / 15.0436px` | `700`; `0.3px` tracking |
| Hero service Japanese label | `14px / 21px` in desktop DOM sample | `10.4px / 15.6px` | `700`; `0.06em` tracking |
| Grounded-world heading | `44px / 64.856px` | `24.96px / 37.1904px` | `700`; unusually wide `0.3em` tracking |
| Grounded-world narrative | `16px / 36px` | `12px / 24px` | `700`; `0.1em` tracking |
| Work title | `16px / 24px` | `12px / 18px` | `700`; `0.3px` tracking |
| BLOG heading | `44px / 44px` | `33.28px / 33.28px` | `600`; `0.08em` tracking |
| Blog entry title | `16px / 26.08px` | `10px / 16.3px` | `700`; `0.3px` tracking |
| CONTACT heading | `47px / 47px` | `33.28px / 33.28px` | `700`; `0.1em` tracking |
| Telephone link | `38px / 38px` | `26px / 26px` | Montserrat Alternates `600`; `0.08em` tracking |
| Footer panel main label | `20px / 20px` | `16px / 16px` | `700`; `0.3px` tracking |
| Footer category pill | `10px / 10px` | `12px / 12px` | `700`; `0.3px` tracking |
| Footer company information | `11px / 17.93px` | `10px / 18px` | `700`; `0.3px` tracking |

The mobile design does not shrink every role equally: category labels increase from 10px to 12px while narrative and headline sizes decrease. Preserve that distinction when creating responsive tokens.

**Recommended:** increase the smallest reading text when accessibility and extended reading matter more than exact visual matching. The observed mobile 10–12.48px values should not automatically become the default text size of a new site.

## Tokens — Spacing & Shapes

### Spacing Scale

The evidence shows several repeated dimensions, but does not establish a single universal spacing formula.

| Use | Desktop | Mobile | Basis |
| --- | --- | --- | --- |
| Initial header horizontal inset | `21.312px` | `17.16px` | Computed padding |
| Initial header top padding | `20px` | `16px` | Computed padding |
| Hero service-card gap | Unverified in settled layout | `15px` | Derived from 290px pitch and 275px card width |
| Work-card gap | `10px` | `10px` | Derived from adjacent card positions |
| Blog-card horizontal gap | `14px` | About `12.44px` | Derived from adjacent card positions |
| Mobile blog row gap | — | `30px` | Derived from row positions and card height |
| Footer panel gap | `10px` | `10px` | Measured panel-header positions and heights |
| Footer title inset from panel left | `98px` | `85px` | Computed padding |
| Footer category-group inset | `36px` | `23px` | Derived from panel and first-pill positions |
| Category-pill horizontal padding | `15px` each side | `15px` each side | Computed padding |
| Category-pill vertical padding | `7px` each side | `5px` each side | Computed padding |
| Footer top padding | `70px` | `45px` | Computed padding |

### Border Radius

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header About capsule | `20px` | `20px` | Computed |
| Hero service anchor | `50px` in sampled DOM | `40px` | Computed; settled desktop composition remains unverified |
| Footer directory panel | `20px` | `10px` | Computed header corners and visible panel treatment |
| Category pills | `12px` | `12px` | Computed |
| Information-card anchors | `50px` | `30px` | Computed |
| Large section links | `50%` | `50%` | Computed circles |
| Work carousel arrows | `50%` | `50%` | Computed circles |

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Initial header box | `1440 × 60px` | `390 × 44px` |
| Header logo box | `202 × 35.19px` | `119 × 21.14px` |
| Header About capsule | `166.45 × 40px` | `115.16 × 28px` |
| Settled hero service card | Not established | `275 × 95px`; active card at `x = 57.5px`, `y = 518px` |
| About circular link | `329.03px` diameter | `207.98px` diameter |
| Service circular link | `329.03px` diameter | `206.69px` diameter |
| Works circular link | `320px` diameter | `200px` diameter |
| Work card | `338px` wide; `331–389px` sampled heights | `245px` wide; `238–284px` sampled heights |
| Work carousel arrow | `55 × 55px` | `40 × 40px` |
| Blog card | `323 × 319.08px` | `169.28 × 183.48px` |
| Blog archive circle | `170px` diameter | `148.19px` diameter |
| Footer wordmark box | `565 × 77px` | `312 × 42.52px` |
| Footer About panel | `907.80 × 80px` | `351 × 85px` |
| Form contact link | `380 × 100px` | `296.39 × 77px` |
| Recorded document height | `10763.28px` | `10118.23px` |

The desktop footer’s visible content spans approximately `x = 108px` to `1332px`, or 1224px / 85% of the viewport. Mobile directory panels span 351px / 90% of the viewport. Mobile services copy uses a narrower 312px / 80% column.

Document heights describe the inspected states. They are not recommended fixed page heights.

## Components

### Persistent Header

**Role:** preserve company identity and navigation throughout the illustrated journey.

The desktop arrangement is a left-aligned symbol and wordmark, five navigation links, an About capsule labeled `ウラも、オモテも`, and a blue planet graphic at the far right. The measured initial header is 60px high. The scrolled desktop screenshots show a compact white strip approximately 63px high; this is a different visible state from the initial transparent header sample.

On mobile, the five text links disappear from the visible header. The 119px-wide identity remains at left, followed by the 115px-wide About capsule and the planet graphic. The measured initial box is 44px high; the light screenshot is approximately 45px high.

The dark-scene state uses a white identity and white capsule. The scrolled state uses navy identity and a yellow capsule on white. Keep the planet’s photographic blue coloring independent of this palette change.

The planet’s activation behavior was not tested. An offscreen duplicate navigation structure exists in the DOM, but the evidence does not prove that clicking the planet opens it.

### Opening Loading State

**Role:** present the site’s world while assets or opening content are being prepared.

The desktop loading capture fills the viewport with a photographic galaxy. Near the center, a small cartoon astronaut is paired with a yellow circular speech bubble reading `ふわふわ 読み込み中`. The rest of the screen is intentionally sparse.

The bubble is approximately 70–75px across in the supplied desktop image. This is a visual estimate. Loading duration, progress semantics, dismissal logic, and astronaut motion were not established.

This state should remain distinct from the completed opening scene. The current page has substantial rendered content and a completed mobile hero; the loader alone is not evidence that the site is unavailable.

### Cosmic Opening Scene

**Role:** communicate the company’s attitude before presenting its services.

The mobile composition places the slogan above a large Earth. The headline occupies the upper central region, beginning around 103px from the top. A small curved English line and a yellow brand signature sit beneath the main Japanese lettering.

The image layers include a dense photographic star field, several shaded planets, small illustrated orbiting objects, a cartoon astronaut with a yellow speech bubble, a satellite, and an Earth that meets a colorful illustrated lower world. A small yellow train appears near the bottom of the supplied viewport.

The Earth’s upper edge is around 405px from the top in the mobile capture, a visual estimate. The service carousel overlaps the planet at a measured `y = 518px`.

Preserve this overlap: headline, Earth, service capsule, and foreground decoration occupy different layers of the same scene. The result depends on composited artwork rather than a single rectangular hero photograph.

### Hero Service Capsule

**Role:** offer a practical entry into services within the opening illustration.

At 390px wide, one 275 × 95px white capsule is centered with portions of neighboring cards visible at both sides. Consecutive cards are 290px apart, giving a 15px gap. The active package-design card has product artwork at left, a small yellow English label, and a bold navy Japanese label.

The Japanese label starts 90px from the card’s left edge in the mobile sample. The corner radius is 40px. Product photography uses ordinary smooth image rendering, separate from the pixel scenery.

The six services are web production, package design, logo design, pamphlet design, branding/total production, and video/photography. Repeated anchors and offscreen positions support a carousel structure, but autoplay timing, swipe handling, and looping behavior were not exercised.

The hero links contain `.php` routes while later service links use extensionless routes. These are observed link destinations, not verified navigation outcomes.

### Narrative Copy and Circular Section Links

**Role:** alternate the illustrated journey with readable company statements and clear onward navigation.

The introductory copy is white, bold, and generously spaced. Desktop text uses 18px type with approximately 38px line height. Mobile uses 12.48px type with 24.96px line height and an approximately 36.4px left inset.

The About link is a large white circle: approximately 329px across on desktop and 208px on mobile. Its content combines a small English lead-in, a larger section name, and a Japanese phrase. Similar circles recur for services and work, with section-specific accent colors.

Use these as substantial illustrated signposts within the scene. Their measured transform transitions are described below; no specific hover scale was verified.

### Services World

**Role:** group six offerings into an illustrated setting.

The section has a measured aqua background of `#91dcd7`, a weight-900 headline, an explanatory paragraph, a smaller Service heading, and individual service anchors with generous space allocated below their labels.

Desktop anchor widths are approximately 205.63px. Three horizontal positions occur around `x = 401.19`, `617.17`, and `833.16px`, but later items occupy staggered vertical positions. This is not sufficient evidence for a uniform three-by-two card grid.

On mobile, the anchors form two uneven columns. The first three begin at `x = 39px`; the remaining three begin around `x = 207.47px`, with the right column starting substantially lower. Each anchor is approximately 143.52px wide. Preserve the sense of objects placed within a scene when adapting this section.

The exact service illustrations and complete section composition are not shown in the supplied screenshots. The aqua surface, typography, dimensions, and staggered positions are supported by the DOM.

### Photographic Arrival and Pixel Landscape

**Role:** connect imaginative world-building to the company’s location and work.

The desktop middle capture shows a real street lined with traditional buildings and signs. A person in an orange astronaut suit stands near the center. A yellow circular callout reads `運良く 千葉成田市に 着きました`.

At the bottom, pixel trees and characters overlap the photograph. A saturated green field, a curved road, and pixel architecture introduce the next section. The white heading `地に足つけて、ぶっとびたい。` sits over the green area with very wide tracking.

The transition is an overlap of media styles: photographic architecture, a real spacesuit, illustrated speech, and visibly blocky scenery. Keep hard pixel edges on the pixel assets while leaving the photograph smooth.

The photographic section’s measured height is approximately 970px on desktop and 700px on mobile. The next works section begins about 45px before that section’s measured bottom at both sizes. This supports a layered transition rather than a hard edge between independent panels.

### Work Carousel

**Role:** expose project examples while continuing the illustrated green-world section.

Each work anchor contains a media region, project title, service categories, and industry information. Desktop cards are 338px wide with a 10px gap. Mobile cards are 245px wide with the same gap. Heights vary with metadata density.

Titles are white, 16px/24px on desktop and 12px/18px on mobile. They begin 253px below the card top on desktop and 182px below it on mobile. Those offsets describe media plus spacing; they do not prove an exact image aspect ratio.

Yellow circular Previous and Next buttons measure 55px on desktop and 40px on mobile. Repeated project anchors and cards positioned outside the viewport are consistent with a carousel track. No arrow click, drag, or autoplay result was recorded.

### Blog Preview

**Role:** show the company’s updates and provide a route to the archive.

The blog section uses a measured white background and navy text. On desktop, an introductory block approximately 325px wide sits beside a horizontal sequence of 323px-wide article anchors. A yellow 170px archive circle belongs to the introductory area.

On mobile, the introduction precedes a two-column, two-row article layout. Each card is approximately 169.28px wide, the column gap is about 12.44px, and the row gap is 30px. The archive circle follows the articles and reduces to approximately 148px.

Article anatomy is media, date, title, and category. The supplied text lists four entries. Their dates are content, not evidence of when the present visual design was produced.

### Seminar, Q&A, and First-Visit Links

**Role:** provide supporting information before contact.

The desktop DOM places three anchors side by side, each approximately 401 × 595px with a 50px radius. Each contains a Japanese title, an English label, and explanatory text.

Mobile turns these into stacked 351px-wide horizontal blocks approximately 133–137px high with 30px corners. Explanatory paragraphs no longer appear in the visible mobile text extraction, although they remain in anchor text in the element evidence.

The seminar entry displays COMING SOON and links to `#`. Treat it as an unavailable or informational state; the evidence does not establish a working seminar destination. Surface artwork and exact backgrounds for these cards are not visible in the supplied screenshots.

### Contact Block

**Role:** provide direct telephone and form entry points.

The measured desktop contact area is 810px wide. The phone content and form link are arranged horizontally. The mobile content width is approximately 296.39px and the form link follows the telephone information.

The CONTACT heading is white. The telephone is navy Montserrat Alternates, 38px on desktop and 26px on mobile. The form label is bold navy, measuring 18px on desktop and 16px on mobile.

The DOM includes a `tel:` link and a contact-page link. No phone action or form submission was tested. The complete backdrop is not supplied as a screenshot, so its appearance should not be inferred from text colors alone.

### Footer Identity and Directory Panels

**Role:** resolve the long narrative into a comprehensive site directory.

The desktop footer begins with a large navy wordmark, a compact company/address/telephone block, and a separate oversized symbol at the right. The original page identifies the company as `株式会社トミーバース`.

Below, a utility-link column sits at left and three yellow panels sit at right. Each panel combines:

1. A character illustration near the left edge.
2. A bold navy thematic label, such as `ウラも、オモテも`.
3. A smaller white descriptor naming the section.
4. A small navy circular arrow at the far right.
5. For services and work, a separate group of white category links below the heading.

The first panel is 80px high on desktop. The complete service and work panels appear approximately 131px and 160px high in the screenshot; those two total heights are visual estimates. The work panel is taller because its categories wrap.

On mobile, the panels become 351px wide, their corners reduce to 10px, and the secondary label sits under the main label. The title area is 85px high. The visible work panel is approximately 250px tall, including five rows of category pills and bottom clearance.

The category links are independent destinations. In a new implementation, keep them as siblings of the main panel link rather than nesting links inside another anchor.

### Utility Links and Return-to-Top Conversation

**Role:** provide ordinary navigation and a memorable ending.

Utility links pair a yellow circular arrow with bold navy text. The desktop list sits to the left of the directory panels. On mobile it follows the panels as a single vertical list.

The return prompt asks `このページの一番上に戻りますか？` and offers `はい` and `いいえ`. A character riding a horse accompanies a yellow bubble reading `馬で？`.

Desktop spreads the choices across the page with dotted navy leaders and a central prompt. Mobile removes that broad horizontal treatment, places the two navy choice pills together under the prompt, and keeps the horse illustration to the right. Copyright moves to a centered position below this scene.

The Yes anchor points to `#top`. The No anchor uses `javascript:void(0)`. The evidence does not establish smooth-scroll timing, a horse animation, or a response to No.

## Tokens — Motion & Interaction

### Measured Declarations

| Target | Recorded value | What the evidence establishes |
| --- | --- | --- |
| Header entrance | `0.6s linear forwards fade` | A named animation declaration; keyframes were not supplied |
| Mobile hero heading | `transform 0.5s cubic-bezier(0.17, 0.88, 0.30, 1.28) 0.8s` | A transform transition with overshoot easing and an 800ms delay |
| General links | `0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Repeated transition duration and easing; individual endpoints are not established |
| Category links | `color 0.4s cubic-bezier(0.61, 1, 0.88, 1), background 0.4s cubic-bezier(0.61, 1, 0.88, 1)` | Color/background transition declarations |
| Circular section links | `transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Transform transition; no measured hover scale |
| Service labels | `transform 0.4s` | A transform transition declaration |
| Work and blog titles | `color 0.4s cubic-bezier(0.61, 1, 0.88, 1)` | Text-color transition declaration |
| Work carousel buttons | `0.4s` | Transition duration; navigation behavior was not exercised |

The source also exposes `--easeOutQuad` and `--easePopUp`, matching the general-link and mobile-heading easing curves above. Other declared easing variables do not establish additional visible effects by themselves.

### Observed States and Limits

- The supplied captures establish a desktop loader, a completed mobile hero, and light headers over scrolled content.
- Horizontal service-card positions, repeated anchors, and work arrows support carousel anatomy. They do not establish whether movement is automatic or user-driven.
- Static images do not prove continuous planet rotation, parallax, scroll scrubbing, astronaut floating, or a WebGL implementation.
- Scroll capture readiness checks waited for finite motion and temporarily paused perpetual animation during stability checks. This process does not provide a frame-by-frame motion record.
- Hover endpoints, menu opening, keyboard behavior, reduced-motion support, and return-to-top activation remain unverified.

**Recommended motion direction:** use the observed 400ms easing for small interface transitions and reserve the overshooting entrance for a small number of prominent scene elements. Give decorative motion a static alternative. Animation should preserve access to the directory and contact links while artwork loads.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Space canvas | Photographic dark galaxy with blue and purple detail | Establish the opening world |
| Hero service surface | White, deeply rounded capsule | Separate useful service links from a busy scene |
| Services world | Flat aqua behind typography and scene objects | Introduce a new chapter without losing the illustration language |
| Arrival scene | Full-width local photograph with overlapping foreground artwork | Connect the fantasy to a real place |
| Work world | Bright green pixel terrain, roads, trees, and buildings | Continue the narrative around project examples |
| Blog and footer | White canvas, navy text, ample open space | Improve scanning near informational content |
| Directory panels | Flat yellow with white pills and navy labels | Group deep navigation |
| Circular controls | Yellow or navy fills, simple contrasting arrows or text | Maintain a consistent action vocabulary |

The supplied footer does not use a general elevation or shadow system. Separation comes from flat color, rounded silhouettes, spacing, and illustration overlap. The hero capsules have visible separation from the scene, but no shadow parameters were supplied.

## Imagery

The visual identity comes from intentionally different media sharing the same world:

- **Astronomical photography or rendered imagery:** star fields, Earth, and shaded planets.
- **Local photography:** the Narita street and an orange-suited astronaut placed within a recognizable real environment.
- **Cartoon illustration:** astronauts, speech bubbles, unusual characters, and the rider at the end of the page.
- **Pixel artwork:** trees, buildings, creatures, roads, and portions of the globe’s surrounding world.
- **Commercial artwork and photography:** the products inside service capsules and the media regions of work and blog entries.

Yellow circular speech bubbles act as a bridge between the different media. The recurring navy and yellow interface provides the second bridge. Preserve these two relationships when adding new artwork.

Use smooth interpolation for photos and shaded planets. Apply `image-rendering: pixelated` only to assets intended to have hard pixel edges. A global pixelation rule would damage product photography, logos, and the street scene.

### Observed Asset References

Asset URLs, filenames, and file formats were not included in the supplied original-page evidence. The following references identify visible artwork without inventing paths.

| Asset family | Original-page evidence | Implementation treatment |
| --- | --- | --- |
| Galaxy background | Desktop loading capture and mobile hero | Full-scene background with controlled cropping |
| Earth and surrounding world | Mobile hero | Large layered artwork behind the service rail |
| Header identity and planet graphic | Desktop middle/footer and both mobile captures | Separate assets with dark/light identity variants as needed |
| Loading astronaut and yellow bubble | Desktop loading capture | Compact central state illustration |
| Package-design product image | Mobile hero capsule | Smooth product cutout inside white surface |
| Narita street and astronaut photograph | Desktop middle capture | Wide photographic chapter with a protected central subject |
| Pixel trees, architecture, and characters | Desktop middle capture | Foreground layers that cross section boundaries |
| Footer character illustrations | Desktop and mobile footer captures | Small identifiers attached to major navigation groups |
| Horse and rider | Desktop and mobile footer captures | Closing scene beside the return prompt |

Use authorized artwork when available. CSS can recreate the interface geometry, but the specific characters and composed scenes carry much of this site’s identity.

## Layout & Responsive Behavior

### Page Structure

The homepage is a long corporate narrative with several destinations, not a single-purpose campaign page. The rendered sequence is:

1. Opening space scene and service links.
2. Company introduction and About link.
3. Illustrated transition and aqua services world.
4. Photographic arrival in Narita.
5. Green works world and project carousel.
6. Another scene transition into the blog preview.
7. Seminar, Q&A, and first-visit information.
8. Contact options.
9. Identity, directory panels, utility links, and the return-to-top scene.

The recorded document is about 10,763px tall on desktop and 10,118px on mobile. Some mobile sections grow while others become much shorter. This is a composed responsive layout, rather than a uniformly scaled desktop page.

### Observed Responsive Changes

| Area | Desktop | Mobile |
| --- | --- | --- |
| Header | Full navigation, 202px identity | Compact identity, About capsule, planet graphic |
| Hero | Initial capture remains a loader | Completed layered hero with one centered service capsule |
| Narrative | Larger type and broad scene placement | Smaller type, revised line breaks, narrower inset copy |
| Services | Three horizontal anchor positions with staggered later content | Two uneven columns with substantial vertical offset |
| Large circular links | Approximately 320–329px | Approximately 200–208px |
| Work rail | 338px cards; 55px arrows | 245px cards; 40px arrows |
| Blog | Intro beside a horizontal article sequence | Intro, two-by-two article grid, then archive circle |
| Support links | Three tall adjacent blocks | Three compact stacked blocks |
| Contact | Phone and form side by side | Phone above form link |
| Footer | Utility column beside wide directory panels | Directory panels followed by utility links |
| Return prompt | Wide dotted leaders and separated choices | Compact grouped choices, horse at right, copyright below |

### Capture-State Cautions

The desktop DOM sample reports hero service anchors approximately 1072.19px wide and 130px high, arranged vertically. The desktop opening screenshot is still a loading state, while the mobile screenshot shows a horizontal carousel. Those desktop rectangles should not be promoted into a specification for the settled hero.

Likewise, negative-position navigation elements contain white panels and yellow chips, whereas the visible footer contains yellow panels and white chips. They are separate instances with different contextual styling.

The exact responsive breakpoints and scaling formulas were not supplied. Fractional mobile type values are consistent with responsive scaling, but do not establish a particular viewport-unit formula. Any breakpoint in the Quick Start is a recommendation.

## Do’s and Don’ts

### Do

- Keep `#001e5a` and `#ffc300` as the stable interface colors across different scene palettes.
- Compose artwork in layers so planets, characters, service cards, and section edges overlap meaningfully.
- Retain the connection between cosmic fantasy and recognizable local photography.
- Use bold Japanese text with spacious narrative line heights and intentional heading tracking.
- Repeat circles, capsules, yellow speech bubbles, and compact arrow markers.
- Preserve the mobile service-card proportions and visible neighboring cards.
- Let category pills wrap according to their labels.
- Distinguish the services scene’s staggered placement from a regular card grid.
- Keep commercial links easy to find within the narrative and again in the footer.
- Treat photographic and pixel assets with different rendering settings.

### Don’t

- Don’t reduce the homepage to a space-themed hero followed by unrelated generic sections.
- Don’t treat the loader as the completed desktop design.
- Don’t infer a settled desktop carousel layout from temporary element bounds.
- Don’t assign a guessed font to the brand wordmark or hero lettering.
- Don’t apply the WordPress preset palette or shadow tokens simply because they are declared.
- Don’t flatten every image into the same illustration style.
- Don’t assume the planet graphic is a verified menu or theme control.
- Don’t invent parallax speeds, autoplay intervals, or return-to-top animation behavior.
- Don’t nest the footer category links inside a larger panel anchor.
- Don’t make the essential navigation depend on completion of decorative motion.

## Recommended Implementation Additions

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

- Provide an accessible text equivalent for artwork-based headings and a meaningful name for the home-link logo.
- Give every actual icon-only control an accessible name. Establish the planet graphic’s intended behavior before implementing it as a control.
- Keep decorative characters out of the accessibility tree unless their speech conveys necessary information.
- Offer visible keyboard focus and larger touch targets around the compact pills and header controls. The observed 22px category pills and 28px About capsule are visually small targets.
- Use navy for small explanatory text on yellow when stronger contrast is needed; the original footer shows small white descriptors on yellow.
- Make carousel items reachable without dragging, and prevent duplicated loop items from producing duplicate keyboard or screen-reader stops.
- Supply a reduced-motion mode that displays the composed scenes immediately and stops optional repeated animation.
- Give the loading state a reliable exit path and keep critical navigation available if a decorative image fails.
- Preserve the reading and focus order when moving footer panels, blog content, or contact links between layouts.
- Implement Yes as a real top anchor. Give No an explicit, understandable behavior if the choice is retained.

## Agent Prompt Guide

### Quick Color Reference

- Primary text and identity: navy `#001e5a`.
- Primary accent and directory panels: yellow `#ffc300`.
- Footer and capsule surfaces: white `#ffffff`.
- Services chapter: aqua `#91dcd7`.
- Service circular-link accent: cyan `#23aabe`.
- Works circular-link accent: green `#016e14`.
- Space, terrain, and photographic colors: supplied artwork; avoid substituting unrelated preset gradients.

### Overall Prompt

“Create a Japanese design-company corporate homepage inspired by TOMMY VERSE. Build a long illustrated journey from a photographic galaxy and large Earth to a local street photograph and bright pixel landscape, ending in a clear white footer. Anchor the interface in navy #001e5a, yellow #ffc300, and white. Use bold Noto Sans JP for ordinary Japanese text, spacious narrative line heights, circular section links, white service capsules, and yellow speech bubbles with cartoon characters. Include services, project examples, company information, blog updates, support links, and contact options. On a 390px phone, center a 275 × 95px service capsule over the Earth with adjacent cards peeking into view. Finish with yellow directory panels, wrapping white category pills, and a playful return-to-top scene. Treat the exact illustrations and brand lettering as supplied assets.”

### Example Component Prompts

1. **Mobile opening:** “Compose a 390px-wide space scene with a compact white identity, white About capsule, and blue planet graphic across the top. Place supplied white Japanese headline artwork above a yellow brand signature. Put a large Earth below, then overlap it with a white 275 × 95px package-design capsule at approximately y=518px. Keep product photography smooth and surrounding pixel artwork crisp.”
2. **Photographic transition:** “Create a wide chapter showing a traditional Japanese street and a person in an orange astronaut suit. Add a yellow circular speech bubble. Let pixel trees, creatures, and a bright green landscape rise over the photograph’s lower edge. Place a widely tracked white Japanese statement over the terrain.”
3. **Footer directory panel:** “Build a flat yellow rounded panel with a small character at left, navy section title, smaller descriptor, and a navy circular arrow at right. Place separate white category links below. Use 20px corners on desktop and 10px on mobile; allow the label pills to wrap naturally.”
4. **Responsive blog preview:** “Use a white surface and navy typography. On desktop place a short introduction and circular yellow archive link beside a horizontal sequence of article previews. On a 390px phone, move the introduction above a two-column grid with approximately 169px cards, then place the archive circle below.”
5. **Closing interaction:** “Place a horse-and-rider illustration beside a conversational return-to-top prompt. Use navy Yes/No pills with yellow labels. Spread the desktop prompt across dotted leaders; group the controls on mobile. Implement the top anchor normally and keep optional character animation separate from navigation.”

## Quick Start

### CSS Custom Properties

This CSS is an implementation adaptation using a conventional root font size. The navy, yellow, aqua, selected dimensions, and transition curves come from measured evidence. Breakpoints, desktop hero placement, hover endpoints, and unmeasured gaps are recommendations.

Provide authorized images through normal image elements and the `--tv-hero-image` custom property. No asset URLs were supplied. The CSS does not implement the original loader, carousel engine, or any unverified scene animation.

```css
:root {
  /* Measured site colors */
  --tv-navy: #001e5a;
  --tv-yellow: #ffc300;
  --tv-white: #ffffff;
  --tv-aqua: #91dcd7;
  --tv-aqua-transition: #92ddd6;
  --tv-service-accent: #23aabe;
  --tv-works-accent: #016e14;

  /* Declared font families; load authorized font files separately. */
  --tv-font-jp: 'Noto Sans JP', 'Noto Sans CJK',
    'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  --tv-font-latin: 'Montserrat Alternates', sans-serif;

  --tv-weight-bold: 700;
  --tv-weight-heavy: 900;
  --tv-space-small: 10px;
  --tv-space-medium: 20px;
  --tv-radius-panel: 20px;
  --tv-radius-pill: 12px;
  --tv-radius-hero: 50px;
  --tv-header-height: 60px;
  --tv-content-width: min(85vw, 1224px);

  /* Desktop hero card width is a proposed adaptation. */
  --tv-hero-card-width: 360px;
  --tv-ease-out: cubic-bezier(.25, .46, .45, .94);
  --tv-ease-color: cubic-bezier(.61, 1, .88, 1);
  --tv-ease-pop: cubic-bezier(.17, .88, .30, 1.28);
  --tv-duration: 400ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--tv-navy);
  background: var(--tv-white);
  font-family: var(--tv-font-jp);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .3px;
}

img {
  display: block;
  max-inline-size: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.pixel-art {
  image-rendering: pixelated;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  min-block-size: var(--tv-header-height);
  padding: 6px max(17px, 1.48vw);
  color: var(--tv-white);
  background: transparent;
}

.site-header.is-light {
  color: var(--tv-navy);
  background: var(--tv-white);
}

.header-brand {
  flex: 0 0 202px;
  inline-size: 202px;
}

.primary-nav {
  display: flex;
  gap: 10.5px;
  margin-inline-start: auto;
}

.primary-nav a {
  padding: 10px 8px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.header-about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 166px;
  min-block-size: 40px;
  padding-inline: 19px;
  border-radius: 20px;
  color: var(--tv-navy);
  background: var(--tv-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.is-light .header-about {
  background: var(--tv-yellow);
}

.header-planet {
  flex: 0 0 48px;
  inline-size: 48px;
  block-size: 48px;
  object-fit: contain;
}

/* Hero geometry outside the mobile sample is an adaptation. */
.cosmic-hero {
  position: relative;
  isolation: isolate;
  min-block-size: 900px;
  padding-block-start: 105px;
  overflow: clip;
  color: var(--tv-white);
  background-color: var(--tv-navy);
  background-image: var(--tv-hero-image, none);
  background-position: center top;
  background-size: cover;
}

.hero-title-art {
  position: relative;
  z-index: 2;
  inline-size: min(75vw, 620px);
  margin-inline: auto;
}

.hero-earth {
  position: absolute;
  z-index: 1;
  inset-block-start: 330px;
  inset-inline-start: 50%;
  inline-size: min(72vw, 720px);
  max-inline-size: none;
  transform: translateX(-50%);
}

.scene-prop {
  position: absolute;
  pointer-events: none;
}

.hero-rail {
  position: absolute;
  z-index: 3;
  inset: 560px 0 auto;
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-inline: max(20px,
    calc((100% - var(--tv-hero-card-width)) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.hero-card {
  flex: 0 0 var(--tv-hero-card-width);
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  min-block-size: 130px;
  padding: 10px 20px;
  border-radius: var(--tv-radius-hero);
  color: var(--tv-navy);
  background: var(--tv-white);
  text-decoration: none;
  scroll-snap-align: center;
}

.hero-card img {
  max-block-size: 110px;
  object-fit: contain;
}

.hero-card-eyebrow {
  display: block;
  color: var(--tv-yellow);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-card-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}

.story-heading {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.474;
  letter-spacing: .14em;
}

.story-heading.is-grounded {
  font-weight: 700;
  letter-spacing: .3em;
}

.story-copy {
  font-size: 16px;
  font-weight: 700;
  line-height: 2.25;
  letter-spacing: .1em;
}

.service-world {
  background: var(--tv-aqua);
}

.section-orb {
  display: grid;
  place-content: center;
  inline-size: 329px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--tv-navy);
  background: var(--tv-white);
  text-align: center;
  text-decoration: none;
  transition: transform var(--tv-duration) var(--tv-ease-out);
}

.work-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.work-card {
  flex: 0 0 338px;
  color: var(--tv-white);
  text-decoration: none;
  scroll-snap-align: center;
}

.work-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.slider-arrow {
  display: grid;
  place-items: center;
  inline-size: 55px;
  block-size: 55px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--tv-navy);
  background: var(--tv-yellow);
  cursor: pointer;
}

.contact-phone,
.footer-copyright {
  font-family: var(--tv-font-latin);
}

.contact-phone {
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
}

.site-footer {
  padding-block-start: 70px;
  color: var(--tv-navy);
  background: var(--tv-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    'links panels'
    'copyright panels'
    'return return';
  column-gap: 56px;
  row-gap: 56px;
  inline-size: var(--tv-content-width);
  margin-inline: auto;
}

.footer-panels {
  grid-area: panels;
  display: grid;
  align-content: start;
  gap: 10px;
  min-inline-size: 0;
}

.nav-panel {
  overflow: hidden;
  border-radius: var(--tv-radius-panel);
  background: var(--tv-yellow);
}

.nav-panel-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 14px;
  min-block-size: 75px;
  padding: 12px 20px 12px 36px;
  text-decoration: none;
}

.nav-panel.is-simple .nav-panel-heading {
  min-block-size: 80px;
}

.nav-panel-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-inline-size: 0;
}

.nav-panel-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.nav-panel-description {
  color: var(--tv-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.nav-panel-arrow {
  display: grid;
  place-items: center;
  inline-size: 25px;
  block-size: 25px;
  border-radius: 50%;
  color: var(--tv-yellow);
  background: var(--tv-navy);
  font-size: 12px;
  line-height: 1;
}

.category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7.5px;
  padding: 0 36px 32px;
}

.category-link {
  display: inline-block;
  max-inline-size: 100%;
  padding: 7px 15px;
  border-radius: var(--tv-radius-pill);
  color: var(--tv-navy);
  background: var(--tv-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    color var(--tv-duration) var(--tv-ease-color),
    background-color var(--tv-duration) var(--tv-ease-color);
}

.footer-links {
  grid-area: links;
}

.footer-utility-link {
  display: flex;
  align-items: center;
  gap: 15px;
  min-block-size: 53px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.utility-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  block-size: 25px;
  border-radius: 50%;
  color: var(--tv-navy);
  background: var(--tv-yellow);
  font-size: 12px;
}

.footer-copyright {
  grid-area: copyright;
  margin: 0;
  font-weight: 700;
}

.return-scene {
  grid-area: return;
  position: relative;
  min-block-size: 150px;
}

.return-choice {
  display: inline-grid;
  place-items: center;
  min-inline-size: 115px;
  min-block-size: 45px;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  color: var(--tv-yellow);
  background: var(--tv-navy);
  font-weight: 700;
  text-decoration: none;
}

/* Recommended hover endpoint; only source timing was verified. */
@media (hover: hover) {
  .category-link:hover {
    color: var(--tv-white);
    background: var(--tv-navy);
  }
}

/* Recommended accessible focus, including over complex artwork. */
:where(a, button):focus-visible {
  outline: 3px solid var(--tv-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--tv-white);
}

/* Proposed breakpoint; the source breakpoint was not supplied. */
@media (max-width: 1050px) {
  .primary-nav {
    display: none;
  }

  .header-about {
    margin-inline-start: auto;
  }
}

/* Mobile values target the inspected 390px composition. */
@media (max-width: 760px) {
  :root {
    --tv-header-height: 44px;
    --tv-radius-panel: 10px;
    --tv-radius-hero: 40px;
    --tv-content-width: 90vw;
    --tv-hero-card-width: 275px;
  }

  .site-header {
    gap: 10px;
    padding: 6px 17px;
  }

  .header-brand {
    flex-basis: 119px;
    inline-size: 119px;
  }

  .header-about {
    min-inline-size: 115px;
    min-block-size: 28px;
    padding-inline: 13px;
    font-size: 10px;
  }

  .header-planet {
    flex-basis: 32px;
    inline-size: 32px;
    block-size: 32px;
  }

  .cosmic-hero {
    min-block-size: 860px;
    padding-block-start: 103px;
  }

  .hero-earth {
    inset-block-start: 405px;
    inline-size: 350px;
  }

  .hero-rail {
    inset-block-start: 518px;
  }

  .hero-card {
    min-block-size: 95px;
  }

  .hero-card img {
    max-block-size: 75px;
  }

  .hero-card-title {
    font-size: 10.4px;
    line-height: 1.5;
  }

  .story-heading {
    font-size: 26.7429px;
    line-height: 1.435;
  }

  .story-heading.is-grounded {
    font-size: 24.96px;
    line-height: 1.49;
  }

  .story-copy {
    font-size: 12.48px;
    line-height: 2;
  }

  .section-orb {
    inline-size: 208px;
  }

  .work-card {
    flex-basis: 245px;
  }

  .work-card-title {
    font-size: 12px;
  }

  .slider-arrow {
    inline-size: 40px;
    block-size: 40px;
  }

  .contact-phone {
    font-size: 26px;
  }

  .site-footer {
    padding-block-start: 45px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'panels'
      'links'
      'return'
      'copyright';
    gap: 28px;
  }

  .nav-panel-heading,
  .nav-panel.is-simple .nav-panel-heading {
    min-block-size: 85px;
    padding-inline: 23px;
  }

  .nav-panel-labels {
    display: block;
  }

  .nav-panel-title {
    display: block;
    font-size: 16px;
  }

  .nav-panel-description {
    display: block;
    margin-block-start: 5px;
    font-size: 12px;
  }

  .category-links {
    gap: 5px 6.5px;
    padding: 0 23px 35px;
  }

  .category-link {
    padding-block: 5px;
    font-size: 12px;
  }

  .footer-links {
    padding-inline: 16px;
  }

  .footer-utility-link {
    min-block-size: 41px;
    font-size: 16px;
  }

  .footer-copyright {
    padding-block: 20px 24px;
    text-align: center;
    font-size: 13px;
  }

  .return-choice {
    min-inline-size: 74px;
    min-block-size: 36px;
    padding-inline: 16px;
    font-size: 12px;
  }
}

/* Recommended static mode for any added decorative motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scene-prop,
  .hero-title-art,
  .section-orb,
  .category-link {
    animation: none !important;
    transition: none !important;
  }
}
```

### Minimal Component Markup

This example keeps the directory’s main destination and category links separate. Insert the authorized character artwork into the indicated slot.

```html
<section class="nav-panel" aria-label="Selected work navigation">
  <a class="nav-panel-heading" href="/works/">
    <span class="nav-panel-character" aria-hidden="true">
      <!-- Insert authorized character artwork here. -->
    </span>
    <span class="nav-panel-labels">
      <span class="nav-panel-title">タネも、シカケも</span>
      <span class="nav-panel-description">制作実績</span>
    </span>
    <span class="nav-panel-arrow" aria-hidden="true">→</span>
  </a>
  <nav class="category-links" aria-label="Project categories">
    <a class="category-link" href="/works/works_cate/website/">
      WEBサイト
    </a>
    <a class="category-link" href="/works/works_cate/package-design/">
      パッケージデザイン
    </a>
    <a class="category-link" href="/works/works_cate/logo/">
      ロゴ
    </a>
  </nav>
</section>
```

### 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-tommy-navy: var(--tv-navy);
  --color-tommy-yellow: var(--tv-yellow);
  --color-tommy-white: var(--tv-white);
  --color-tommy-aqua: var(--tv-aqua);
  --color-tommy-cyan: var(--tv-service-accent);
  --color-tommy-green: var(--tv-works-accent);

  --font-japanese: var(--tv-font-jp);
  --font-latin-accent: var(--tv-font-latin);

  --radius-directory: var(--tv-radius-panel);
  --radius-category: var(--tv-radius-pill);
  --radius-service-capsule: var(--tv-radius-hero);

  --spacing-header: var(--tv-header-height);
  --spacing-service-capsule: var(--tv-hero-card-width);
  --ease-tommy-out: var(--tv-ease-out);
  --ease-tommy-pop: var(--tv-ease-pop);
}
```

## Sources & Evidence

- **Original and final website:** [https://tommy-verse.jp/](https://tommy-verse.jp/). The supplied inspection records HTTP 200 and no change of URL. The document title is `千葉のホームページ制作・ブランディングならトミーバース`.
- **Capture timestamp:** `2026-10-01T15:18:09.839Z`, equivalent to October 2, 2026, 00:18:09.839 JST.
- **Desktop evidence:** 1440 × 1000 CSS pixels; supplied images show the loading scene, photographic/pixel transition, and footer. The DOM reports a document height of approximately 10,763px.
- **Mobile evidence:** 390 × 844 CSS pixels; supplied images show the completed cosmic opening and lower footer. The DOM reports a document height of approximately 10,118px.
- **Computed evidence:** rendered text, link destinations, custom properties, element dimensions, font stacks, typography, fills, padding, border radii, and selected transition/animation declarations for both viewports.
- **Inspection method:** the supplied browser process waited for document load, finite animation, sampled text/layout stability, and visible-image decoding within stated time limits. It traversed intermediate scroll positions. Shared workers and service workers were disabled.
- **Limits:** no additional browsing or commands were used for this reference. Linked destinations, hover states, menu activation, carousel controls, form behavior, return-to-top choices, and continuous scene motion were not exercised. Asset paths, complete keyframes, exact breakpoints, and a settled desktop opening screenshot were not supplied.

This reference describes the current homepage represented by those captures. Visual estimates, capture-state uncertainty, and implementation recommendations are labeled separately from measured original-page evidence.