# Onion Inc. — Style Reference

> A red typographic poster wrapped around a long, staggered filmstrip of commercial work.

**Website:** [onionion.co.jp](https://www.onionion.co.jp/)
**Original URL:** https://www.onionion.co.jp/
**Final URL:** https://www.onionion.co.jp/
**Theme:** observed light-gray canvas with red typography; the visible desktop theme control reads WHITE.
**Inspected:** September 29, 2026, from supplied browser evidence retrieved at 12:56:19.848 UTC / 21:56:19.848 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate and production-portfolio homepage, including its persistent navigation, opening statement, project filmstrips, news list, and footer. Project pages, the expanded mobile menu, contact forms, and the BLACK theme were not inspected.

Onion combines oversized red lettering, a flat gray background, and sequences of commercial imagery. The opening statement, JOYFULL IS THE STRONGEST, behaves like a tightly composed poster. Small Japanese copy occupies the space above IS. Below it, project titles sit among landscape frames rather than above a conventional card grid. Each image has a tiny red code-like caption, while project information uses large titles, small client names, and underlined category links.

The desktop identity is anchored by a 96px header and a matching left rail. Mobile replaces that rail with a centered wordmark in a 48px header, but retains the horizontally extended project composition. The page closes with news, an enormous Onion Inc. wordmark, repeated navigation, and a large CONTACT link. The site's character comes from scale, cropping, repeated images, and precise red rules; it does not depend on shadows or elaborate surface treatments.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and element rectangles. Unless otherwise stated, measurements are CSS pixels.
- **Derived** values are calculations from those measurements, such as the distance between consecutive rows.
- **Estimated** values come from the current screenshots where corresponding computed styles were not supplied. These include hero letter sizes, footer typography, and the logo's yellow.
- **Recommended** values describe a practical new implementation. They are not recovered source declarations.
- All custom property names in this document are implementation aliases. The supplied custom-property extraction was empty.
- The evidence includes three desktop captures and two mobile captures. Lower-page components are visually documented, but their individual computed styles are not included in the supplied element samples.
- A visible control, a declared transition, and a demonstrated interaction are different kinds of evidence. Unexercised behavior remains unverified.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Onion Red | `#d0102c` / `rgb(208, 16, 44)` | `--color-ink` | Measured body text, navigation, project titles, and logo-tile background; visually also used for rules and arrows |
| Light Gray | `#e0e0e0` / `rgb(224, 224, 224)` | `--color-paper` | Measured body and header background, plus reversed CONTACT lettering |
| Logo Yellow | Approximately `#ffcc00` | `--color-logo-accent` | Screenshot estimate for the two circular logo forms; an exact computed value was not supplied |
| Image colors | Content-dependent | No global token | Natural colors in commercial frames; not a secondary interface palette |

Use the measured red and gray as the main pair. WHITE is a control label, not evidence that the background is pure white. The logo's yellow is a localized identity accent; it does not appear as a general button, category, or section color.

The screenshots make some red edges appear brighter than the computed RGB value. Use the supplied computed value for implementation rather than inferring a replacement from image display or compression.

### Theme Presets

| State | Evidence | What can be specified |
| --- | --- | --- |
| WHITE | Visible desktop control and the recorded light presentation | Gray `#e0e0e0` canvas with red `#d0102c` interface |
| BLACK | Label present in desktop rendered text | Palette, image treatment, transition, and persistence are unverified |
| Mobile color controls | A COLOR label appears in the menu-related DOM sample | Closed-menu screenshots do not establish the appearance or operation of those controls |

Do not invent a black-theme palette from its name. A reproduction of the observed state only needs the documented light presentation.

## Tokens — Typography

### General Sans — English Navigation and Project Titles

**Measured stack:** `YakuHanJP, 'General Sans', sans-serif`.

The desktop navigation, English project titles, desktop rail wordmark, and mobile header wordmark use this stack at weight `600`. The lettering has broad, solid forms and normal tracking. Most navigation labels are uppercase, while project titles preserve their supplied capitalization and line breaks.

Use General Sans where it is explicitly supported by the evidence. The individual hero and footer text declarations were not included; using the same family for those elements is a reasonable implementation approximation, not a separately verified font assignment.

### Noto Sans JP — Japanese Titles and Project Details

**Measured stack:** `YakuHanJP, 'Noto Sans JP', sans-serif`.

The body uses weight `500`. Sampled Japanese project titles, client names, categories, and image codes use weight `600`. Client names written in English also use this stack in the sampled project modules; do not automatically assign every Latin string to General Sans.

YakuHanJP appears first in the declared stacks. The evidence does not include font files, loading declarations, or per-glyph font-resolution results.

### Hero Lettering

The opening statement is a composed typographic unit with three scales:

1. JOYFULL occupies most of the first line.
2. Small Japanese copy sits above IS in the narrow right-hand area.
3. THE STRONGEST spans the second line.

Preserve the source spelling JOYFULL. The desktop copy reads “楽しむ力は / 最強だ。”; the mobile observation reads “楽をするな。 / 楽しむんだ。”. Different captures contain different copy, but the evidence does not establish whether this is responsive selection, randomization, or a timed change.

The sampled hero container has weight `600`, but its individual lettering declarations are absent. Estimate the large word at roughly 230–240px on desktop and 68–72px on mobile. Estimate the second line at roughly 135–145px and 39–42px respectively. These are visual calibration ranges, not measured font sizes.

### Type Scale

| Role | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Body | `15px / 27px`, weight 500 | `13.52px / 25.688px`, weight 500 | Measured; line-height ratios 1.8 and 1.9 |
| Primary desktop navigation | `25px / 95px`, weight 600 | Replaced by closed-menu header | Measured; the 95px line box vertically centers text in the header |
| Menu-associated navigation | Not applicable | `17px / 30px`, weight 600 | Measured DOM styling; expanded appearance unverified |
| Header CONTACT text | `20px / 26px`, weight 600 | Menu-associated CONTACT uses `17px / 22.1px` | Measured; mobile contact control is not visible in the closed header |
| Rail / header wordmark | `53px / 53px` | `26px / 26px` | Measured General Sans |
| English project title | `50.6003px / 50.6003px` | `24.96px / 24.96px` | Measured General Sans, weight 600 |
| Japanese or mixed project title | `47.4378px / 47.4378px` | `22.88px / 22.88px` | Measured Noto Sans JP, weight 600 |
| Client name | `13.7042px / 17.8155px` | `10.4px / 13.52px` | Measured Noto Sans JP, weight 600 |
| Project category | `14.7584px / 16.2343px` | `11.44px / 12.584px` | Measured; visually underlined |
| Image code | `10.5417px / 10.5417px` | Computed `10.4px / 10.4px` | Measured; mobile rendered box is smaller than the computed line box |
| SCROLL / PAGE TOP | `10px / 18px` | Not visible in the captured mobile shell | Measured General Sans |
| News title | Approximately 28px | Approximately 13–14px | Screenshot estimate |
| Footer CONTACT | Approximately 80px | Approximately 40px | Screenshot estimate |
| Footer wordmark | Approximately 280–300px | Approximately 120px | Screenshot estimate |

The mobile image-code rectangle is about `8.325px` high despite a computed `10.4px` font size. Its width is also approximately 80% of its parent frame width. This suggests a scaled presentation, but the responsible transform was not included. Do not report 8.325px as the declared font size.

### Typography Rules

- Keep project-title line-height at `1`; intentional line breaks provide the rhythm.
- Retain normal tracking for the measured navigation and project typography.
- Use size and placement to establish hierarchy. Most visible text is red and moderately heavy.
- Treat the image codes as tiny sans-serif labels. Their technical appearance is not evidence of a monospace font.
- The HTML root's reported Times default does not describe the visible interface. The body and component declarations supply the actual sans-serif styling.

## Tokens — Spacing & Shapes

**Structure:** a rigid desktop frame around a wide, cropped content field.
**Density:** exceptionally large display type, compact metadata, and closely joined image sequences separated by open horizontal bands.
**Root size:** measured at a conventional `16px`; there is no evidence of an unusual root-unit system.

### Spacing Scale

These values describe observed relationships rather than a recovered global spacing scale.

| Relationship | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header height | `96px` | `48px` | Measured |
| Left content offset | `96px` | `0px` | Measured |
| First desktop navigation start | `x = 156px` | Not applicable | Measured; 60px beyond the rail |
| Hero top padding | `105.417px` | `52px` | Measured |
| Hero bottom padding | `126.501px` | `62.4px` | Measured |
| Hero inset inside content region | Approximately `57.44px` each side | Approximately `17.22px` each side | Derived from rectangles |
| Project information side padding | Approximately `31.625px` | `26px` | Derived from title and module positions |
| Title-to-client gap | Approximately `10.53px` | Approximately `10.39px` | Derived from measured rectangles |
| First-to-second work-band pitch | `222.078px` | `140.25px` | Derived |
| Work module total height | `185.188px` | `119.453px` | Measured |
| Clear gap between work bands | `36.891px` | `20.797px` | Derived from pitch minus module height |
| News / footer outer inset | Approximately `48px` inside the content region | Approximately `21px` | Screenshot estimate |
| Desktop header CONTACT right clearance | `35px` | Not applicable | Derived from its measured rectangle |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Image frames | Square corners | Current screenshots |
| Project title modules | Unboxed, square layout areas | Current screenshots and rectangles |
| Logo tile | Square | Measured 96 × 96px and 48 × 48px |
| Header CONTACT | Capsule, source radius `9999px` | Measured |
| Mobile MENU | Small capsule | Screenshot estimate, approximately 74 × 24px |
| Footer arrow | Circular outline | Approximately 66px desktop and 34px mobile in screenshots |
| Rail theme control | Narrow vertical capsule | Screenshot observation |

Rules appear approximately 1px thick. Border declarations for those rules were not supplied. There is no visible general-purpose corner-radius or shadow system for portfolio content.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Content region width | `1344px` | `390px` |
| Hero region | `x 96, y 96`, size `1344 × 557.563px` | `x 0, y 48`, size `390 × 225.359px` |
| Hero lettering container | `x 153.438, y 201.406`, size `1229.109 × 324.656px` | `x 17.219, y 100`, size `355.547 × 109.453px` |
| Works region start | `y 653.563px` | `y 273.359px` |
| Works region height | `7140.672px` | `4471.734px` |
| First project information module | `420 × 185.188px` | `224.094 × 119.453px` |
| Standard frame module | `295.156 × 185.188px` | `178.875 × 119.453px` |
| Estimated image area within frame | Approximately `295.156 × 166.025px` | Approximately `178.875 × 100.617px` |
| Document height | Approximately `9158.02px` | Approximately `5631.25px` |

Image-area heights above assume the approximately 16:9 ratio visible in the complete frames. They are calculated approximations, not separate measured image-element bounds.

## Components

### Persistent Desktop Header

**Role:** keeps the main corporate destinations and contact route available while the project sequence fills the page.

The header spans the viewport and is 96px high. Its leftmost 96px square contains the yellow circular logo on red. Navigation starts at x = 156px, leaving a 60px interval after the logo column. The visible destinations are WORKS, NEWS, COMPANY, MEMBERS, and RECRUIT. WORKS, NEWS, and MEMBERS have small raised counts: 50, 8, and 38 in the inspected state.

At the right, CONTACT sits in a red capsule with gray text and a fine right-pointing arrow. The measured capsule is approximately `178.47 × 50px`, positioned at `x 1226.53, y 23`. Its measured padding is `10px 51px 10px 23px`, reserving extra space for the arrow.

A fine red bottom rule joins the header to the rail. The header appears in the same viewport position across upper and lower captures. Its persistent behavior is visually supported; the actual `position` declaration was not included.

Use data-driven counts. They are content indicators, not decorative constants that should be copied into an unrelated portfolio.

### Desktop Identity Rail

**Role:** provides continuous brand presence, theme access, and page-position cues.

A gray rail occupies the left 96px below the logo tile, separated from content by a fine red vertical rule. The red Onion wordmark is rotated clockwise and centered around the viewport's vertical midpoint. Its measured text size is 53px; the combined wordmark and trademark link has a rotated bounding rectangle of approximately `53 × 171.28px`.

Near the bottom, a narrow red capsule shows WHITE with a circular indicator. Beneath it, the upper capture shows SCROLL and a downward arrow; lower captures show PAGE TOP and an upward arrow. The photographs and work rows are visually clipped behind the rail's boundary.

These states establish the labels and visual placement. Theme switching, the threshold for changing the scroll cue, and page-top scrolling behavior were not exercised.

### Mobile Header

**Role:** compresses the desktop shell while preserving three distinct identity and navigation anchors.

The mobile header is 48px high. A `48 × 48px` logo tile occupies the left edge. Onion with a small trademark is centered across the full 390px viewport; its combined measured bounds are approximately `99.63 × 26px`, starting at x = 145.19. A red MENU capsule sits near the right edge with small reversed lettering and two short horizontal strokes.

The desktop navigation row and left rail are absent from the visible closed state. MENU and CLOSE both appear in extracted text, and menu-associated links have measured styles, but no expanded-menu screenshot or click result was supplied. Do not infer an overlay size, backdrop, entrance direction, or focus behavior from those hidden or inactive elements.

For a new implementation, keep the visual capsule compact while giving its button a larger touch target.

### Opening Statement

**Role:** introduces the company's tone before the portfolio starts.

The statement fills approximately 91% of the available content width at both inspected sizes. Its horizontal composition matters more than any one estimated font size: JOYFULL takes most of the top line, the Japanese copy and IS form a narrow right-hand group, and THE STRONGEST forms a second broad line.

Desktop gives this composition generous breathing room: the hero starts beneath the 96px header, the text begins around y = 201px, and the first project row begins around y = 654px. Mobile keeps the same hierarchy with text beginning at y = 100px and work beginning around y = 273px.

There is no visible hero photograph, paragraph, or large conversion button. Keep the opening focused on the statement and let the work provide the imagery immediately below it.

### Staggered Work Filmstrip

**Role:** presents production work as a continuous sequence of images and titles.

The feed is composed of horizontal bands containing two kinds of modules: project information and landscape image frames. A project's frames can continue into a later band, and the following project's title can appear midway through that band. This is visible in the transition from the JR-EAST work to CORPORATE BRAND FILM.

At desktop, the first title module begins at x = 96 and ends at x = 516. Image modules then begin at x = 516, 811.156, 1106.313, and 1401.469. The final module extends beyond the viewport. The next band begins with an image at x ≈ 68.516 and places the next project's title module at x ≈ 658.828.

Mobile retains this extended composition. Its first title module ends at x ≈ 224.094, followed by a 178.875px image that extends past the 390px viewport. In the next band, two image frames precede the CORPORATE BRAND FILM information module, which begins at x ≈ 350.313 and is mostly offscreen.

Preserve these key relationships:

- Images touch horizontally within a band.
- Information modules introduce their own internal side padding.
- Bands have clear vertical separation.
- Title-module widths vary with content.
- Different bands begin at different horizontal positions.
- Projects are not necessarily contained within a single visible row.

The exact wrapping, positioning, or motion algorithm is unavailable. Static rectangles do not prove that these bands are draggable, autoplaying, or linked to vertical scroll.

### Project Information Module

**Role:** introduces a project within the image sequence.

The module stacks a large title, a small client name, and an underlined category near its bottom. There is no surrounding card fill, border, or shadow. Titles use deliberate short lines: CORPORATE / BRAND FILM, XIAOMA / Ginza, and “明日のDESIGN。 / 地域と駅の未来” are observed examples.

English titles use General Sans at `50.6003px / 1` on desktop and `24.96px / 1` on mobile. Japanese and sampled mixed-language titles use Noto Sans JP at `47.4378px / 1` and `22.88px / 1`. Client labels remain much smaller. The shared module height aligns categories with the lower portion of neighboring image modules.

The project destination and category destination are distinct. For example, the first project links to `/works/JR-ashitanodesign09/`, while its TV CM label links to `/works/movie/`. Sampled WEB CM and OTHER labels also link to `/works/movie/`; do not infer separate category URLs from their labels.

In an implementation, use sibling project and category links rather than nesting anchors. The supplied extraction reports empty link text for many project hit areas, but that alone is not a complete accessibility-name audit.

### Image Frame and Code Caption

**Role:** makes each production feel like a sequence of selected shots.

Each module consists of a square-cornered landscape frame and a tiny red code below it. The image appears close to 16:9. On desktop, the complete module is `295.156 × 185.188px`; on mobile it is `178.875 × 119.453px`.

Captions contain strings such as `66:0F:74`, `31:A4:C5`, and `20:F7:4D`. Their meaning is not documented. They should not be described as playback timestamps, asset hashes, or status indicators. The strings differ across the desktop and mobile observations, which does not establish a particular update mechanism.

Multiple frames link to the same project. The experience therefore emphasizes browsing scenes before entering a project detail page. No in-place playback action, sound control, or media player was demonstrated.

In the middle desktop capture, several image areas are blank or reveal only narrow fragments while titles and captions remain visible. Their cause is unresolved. Treat this as a capture limitation or runtime state, not a requirement to design permanently missing images.

### News Section

**Role:** provides current corporate information after the long work sequence.

Desktop uses a broad left area for the section navigation and a right-aligned list. In the lower capture, ALL with a thin arrow sits around x = 144, while dates begin around x = 575 and article titles around x = 628. The list is unboxed and relies on vertical spacing rather than full-width row separators.

Each item contains a date, a small two-stroke marker, a linked Japanese title, and an underlined category. The rendered text includes three entries dated 2026.01.09, 2024.05.09, and 2024.01.25. The latest title is “当社代表名を騙る不審なメールについて”. Categories include INFORMATION and PRESS RELEASE.

Mobile converts this into a single-column section with approximately 21px side insets. NEWS and ALL share the top line. Dates sit above their articles, and title/category content is indented to make room for the small marker. The longer recruitment title wraps to two lines while maintaining the same left edge.

Keep article titles readable and naturally wrapping. The work feed's horizontal cropping should not carry over to news content.

### Footer Wordmark, Navigation, and Contact

**Role:** ends the portfolio with a second large statement of identity and clear onward navigation.

A fine red rule separates the footer from news. Desktop shows an enormous Onion Inc. wordmark spanning nearly the content width. Beneath it are the five primary navigation links, followed by a large CONTACT label paired with a circular outlined arrow.

The bottom row contains PRIVACY POLICY, HANDLING OF PERSONAL INFORMATION, INFORMATION SECURITY POLICY, and a right-aligned copyright. The visible copyright reads © 2022 Onion Inc; that year is footer content, not the inspection or redesign date.

Mobile retains the oversized wordmark instead of fitting the complete phrase into the screen. The supplied DOM repeats Onion Inc. four times, while the screenshot shows a cropped portion. This supports a repeated horizontal wordmark treatment, but not a verified animation speed or direction. Primary footer navigation remains on one small horizontal line. CONTACT is approximately 40px, policies stack vertically, and copyright moves below them at the left.

## Tokens — Motion & Interaction

| Element or behavior | Supplied evidence | Interpretation and limitation |
| --- | --- | --- |
| Header CONTACT | `0.5s cubic-bezier(0.075, 0.82, 0.165, 1)` on the link and inner text | Measured transition declaration; changed properties and hover endpoint are unverified |
| Project titles | `0.7s cubic-bezier(0.075, 0.82, 0.165, 1)` | Measured transition declaration; no demonstrated transform or reveal endpoint |
| Persistent shell | Header and rail remain at the same viewport positions in separate scroll captures | Persistent presentation supported; positioning declaration not supplied |
| Work-band movement | Staggered positions and offscreen frames | Exact movement, autoplay, drag, and scroll mapping unverified |
| Mobile footer wordmark | Repeated text and horizontal cropping | Looping composition suggested; temporal animation not demonstrated |
| WHITE / BLACK | Labels are present | State-switching outcome and persistence unverified |
| MENU / CLOSE | Both labels appear in mobile DOM | Closed state captured; opening and closing not tested |
| SCROLL / PAGE TOP | Different labels visible at different page positions | State distinction supported; activation behavior unverified |
| Japanese hero copy and frame codes | Differ between observations | Variation supported; cause and cadence unknown |

The sampled elements generally report `animation: none`. This does not rule out JavaScript animation, ancestor transforms, pseudo-elements, or animation on unsampled nodes. Likewise, a bare `transition: all` is not evidence of a meaningful animated effect without a duration and changed state.

For a new implementation, the two recorded easing durations are useful starting points for modest interface transitions. Define only necessary transition properties. Any image-reveal choreography, footer marquee, or horizontal movement would require an explicitly designed behavior beyond the verified evidence.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid light gray | Continuous background for hero, work, news, and footer |
| Persistent shell | Same gray with fine red boundaries | Establishes navigation and the desktop content frame |
| Project information | Transparent against the page | Allows type to interrupt the image sequence without becoming a card |
| Image frame | Full-color rectangular imagery | Supplies narrative and visual variety |
| Primary header action | Red capsule with gray text | Makes CONTACT distinct within the navigation |
| Footer action | Large red text and an outlined circle | Creates emphasis through scale rather than a filled panel |
| Logo tile | Red square with yellow circular forms | Concentrates the secondary brand color in one small area |

There is no visible general elevation system. Avoid introducing gray cards, drop shadows, frosted navigation, or gradient section backgrounds when extending this visual language.

## Imagery

The imagery comes from advertising and production work. The first project uses multiple scenes from a railway or station setting, including people in public interiors and workspace activity. The following brand-film frames show a suited man and city architecture. Later visible frames include domestic interiors, performers, retail imagery, and illustrated advertising content.

Use several different shots from one project, keeping their shared landscape proportions. Repetition is editorial: it gives the impression of a filmstrip or production contact sheet. A single cover image per project would lose much of the observed rhythm.

Frames are square-cornered and mostly unadorned. Their captions sit below the imagery rather than as badges on top. Some images look soft or low contrast in the captures, but no filter or opacity declaration was supplied. Preserve the approved source imagery instead of applying an invented global wash.

### Observed Asset References

No image `src`, `srcset`, native-resolution, or media-file URLs were included in the supplied evidence. The following are project destinations associated with visible content, not image download locations or separately inspected pages.

| Content | Observed destination | Current-page use |
| --- | --- | --- |
| JR-EAST, “明日のDESIGN。地域と駅の未来” | [Project link](https://www.onionion.co.jp/works/JR-ashitanodesign09/) | First title module and opening station scenes |
| BLOCK VALUE, CORPORATE BRAND FILM | [Project link](https://www.onionion.co.jp/works/BLOCKVALUE/) | Following title module and city/character frames |
| Hinokiya, “Z空調” | [Project link](https://www.onionion.co.jp/works/Hinokiya/) | Subsequent title module and domestic commercial frames |
| DMM Books | [Project link](https://www.onionion.co.jp/works/DMM-Books/) | Mid-page project label and partially visible advertising frames |

The original logo asset should be supplied separately for implementation. The evidence supports its appearance but does not provide an asset path. CSS can reproduce the surrounding frame and proportions; it does not supply the company's identity or production imagery.

## Layout & Responsive Behavior

### Desktop Composition

The 1440px viewport is divided into a 96px rail and a 1344px content field. The header spans both. The hero is inset within the content field, while the portfolio extends to and beyond its visible edges. News and the footer return to conventional internal margins of approximately 48px.

The document is long: approximately 9158px. The works region alone occupies about 7141px. This establishes the page as a portfolio-led corporate homepage, with news and contact information following the work rather than interrupting it with repeated conversion panels.

### Mobile Composition

At 390px, the rail disappears and the header halves to 48px. The wordmark moves into the header center and a menu button replaces desktop navigation. The hero retains its two-line graphic structure with approximately 17px side insets.

The project feed remains horizontally extended. It does not become a stack of full-width cards. Image widths reduce from about 295px to 179px, while title sizes approximately halve. The first title module is about 224px wide, leaving room for only part of its neighboring frame in the viewport.

News becomes a readable single-column list. Footer policies stack, but the large wordmark remains cropped and the five primary footer links remain on one line in the 390px capture.

### Scaling Relationships

| Relationship | Observed change | Implication |
| --- | --- | --- |
| Header | 96px → 48px | A structural shell change |
| Content left offset | 96px → 0px | Mobile reclaims the rail width |
| English project title | 50.6003px → 24.96px | Nearly half-size lettering |
| Frame width | 295.156px → 178.875px | Frames retain more relative size than titles |
| Work-band pitch | 222.078px → 140.25px | Compact but still separated horizontal bands |
| Client label | 13.7042px → 10.4px | Metadata shrinks less than project headings |
| Hero region height | 557.563px → 225.359px | A substantially shorter opening on mobile |

These relationships cannot be reproduced accurately by scaling the entire desktop page with one transform. The exact source breakpoint and interpolation formulas were not supplied. The Quick Start uses a recommended 1100px shell breakpoint to leave room for the complete desktop navigation, with endpoint values based on the two measured viewports.

Only the two stated viewports were visually inspected. Tablet, landscape phone, browser zoom, and intermediate widths remain unverified.

## Do’s and Don’ts

### Do

- Start with the measured red `#d0102c` and light gray `#e0e0e0`.
- Preserve the 96px desktop shell and the 48px mobile header relationship.
- Use very large display lettering alongside compact client, category, and code labels.
- Keep JOYFULL, IS, the Japanese copy, and THE STRONGEST in their distinct positions.
- Interleave project information with multiple landscape frames.
- Let title-module widths vary with their content.
- Preserve square image corners, close horizontal joins, and clear space between bands.
- Retain the mobile filmstrip composition while ensuring every project remains reachable.
- Use underlines for categories and policy links where shown, plus fine arrows for navigation.
- Give the footer enough scale to function as a final brand statement.

### Don't

- Don't replace the work sequence with equal-width rounded cards.
- Don't assume one visible band equals one project.
- Don't change WHITE mode to a pure-white background.
- Don't spread the logo's yellow across unrelated interface controls.
- Don't substitute a monospace face for the measured sans-serif image codes.
- Don't treat the partial mid-page imagery as a permanent empty-card design.
- Don't invent autoplay, drag, parallax, or reveal timings from static captures.
- Don't claim the BLACK theme or expanded menu has been visually verified.
- Don't shrink the mobile footer wordmark merely to fit the whole name on one line.
- Don't use repeated contact panels, elevated surfaces, or decorative gradients that dilute the continuous gray field.

## Recommended Implementation Additions

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

- **Reachable work:** provide keyboard and touch access to frames and titles beyond the viewport. Native horizontal scrolling is a practical fallback when the original positioning mechanism is unavailable.
- **Stable content:** reserve approximately 16:9 image space and keep titles and links available if imagery fails to load. Do not leave essential content dependent on an entrance animation.
- **Accessible names:** give every project-image link a useful name based on its project and, where helpful, its scene. Avoid making a decorative code its only accessible label.
- **Menu behavior:** implement a real button with expanded-state reporting, predictable focus management, Escape handling when appropriate, and a minimum 44px touch target around the small visual pill.
- **Readable small text:** evaluate the smallest client labels, codes, dates, and policies at actual device size. The supplied red/gray pair calculates to approximately 4.2:1 contrast; normal-size text should be reviewed against a 4.5:1 target. A darker functional-text variant is an option for an accessible adaptation.
- **Reduced motion:** provide a stable layout and pause mechanism if continuous horizontal motion or a footer marquee is introduced. Hide duplicate decorative wordmarks from assistive technology.
- **Focus visibility:** use a strong red outline and ensure focused controls are not obscured by the persistent header or rail.
- **Image delivery:** use responsive image sizes and defer offscreen loading while retaining explicit dimensions. A long sequence of production frames benefits from careful loading behavior.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and persistent shell: measured `#e0e0e0`.
- Text, fine rules, arrows, and main filled controls: measured `#d0102c`.
- Reversed header-action text: measured `#e0e0e0`.
- Logo accent only: approximately `#ffcc00`; use the approved logo asset for accuracy.
- Imagery: full-color commercial frames, without an invented global filter.
- Content surfaces: flat and unboxed, with no general shadow system.

### Overall Prompt

“Create a corporate film-production portfolio inspired by the observed Onion homepage. Use a light-gray `#e0e0e0` canvas, red `#d0102c` typography, a square red logo tile, and a persistent 96px desktop header with a matching left identity rail. Build a large two-line typographic statement with a narrow Japanese-copy and IS group beside the first word. Below it, compose staggered horizontal filmstrip bands that interleave variable-width project information with adjacent 16:9 frames and tiny red code captions. Use General Sans for English navigation and project titles, and Noto Sans JP for Japanese titles and metadata. At 390px, use a 48px header with centered branding and a compact menu pill, while retaining the horizontally extended work bands. End with an unboxed news list, an oversized footer wordmark, small navigation, and a large CONTACT link. Treat any motion beyond the documented transition durations as a separate design decision.”

### Example Component Prompts

1. **Desktop shell:** “A 96px gray header with a 96px red logo tile at the left, bold red uppercase navigation with tiny raised counts, and a red CONTACT capsule at the right. Continue the left column as a gray identity rail with a rotated red wordmark and a fine red boundary.”
2. **Project sequence:** “Build a horizontal sequence of project information and landscape frames. Place a two-line 50.6px English title, a 13.7px client name, and an underlined 14.8px category in an unboxed module. Follow it with touching 295px-wide frames and small red captions. Let the project continue into the next staggered band.”
3. **Mobile filmstrip:** “At 390px, keep frames around 179px wide and title modules sized to their text. Use 25px English titles or 22.9px Japanese titles. Preserve visible edge cropping, but give users a keyboard- and touch-accessible way to reach offscreen projects.”
4. **News:** “Create a gray news section with red text, date labels, a small two-stroke article marker, Japanese linked headlines, and underlined categories. Use a left section-navigation area on desktop and a single-column list on mobile. Add no cards or shadows.”
5. **Footer:** “Create a fine red top rule, an enormous red Onion Inc. wordmark, a compact row of primary links, and a large CONTACT label with a circular outlined arrow. Keep the mobile wordmark oversized and cropped; stack policy links beneath the contact area. Do not assume an animation is required.”

## Quick Start

### CSS Custom Properties

This is an implementation foundation, not recovered source CSS. Measured endpoint tokens are separated from estimated hero/footer styling. The 1100px breakpoint, native horizontal scrolling, focus treatment, and reduced-motion rules are recommendations.

Supply the actual fonts and approved imagery separately; no font or image asset URLs were available in the evidence. The CSS assumes this structure:

- `.site-header` contains `.brand-tile`, `.desktop-nav`, `.contact-pill`, `.mobile-brand`, and `.menu-button`.
- `.identity-rail` sits outside `.page-body`.
- `.page-body` contains `.hero`, `.works`, `.news`, and `.page-footer`.
- `.hero-lockup` contains a first line with `.hero-word` and `.hero-side`, followed by `.hero-bottom` with two word-group spans.
- Each `.work-band` contains a `.work-track` of `.work-info` and `.work-frame` modules. Project and category links are siblings.
- Each frame contains an image and `.frame-code`. Each news article contains a date, `.news-link`, and `.news-category`.

The work tracks below start from reachable content rather than implementing an undocumented shifting algorithm. Curated initial scroll positions can supply staggered views. Menu state, theme changes, and any continuous movement require separate behavior implementation.

```css
:root {
  /* Measured interface colors; estimated logo accent */
  --color-paper: #e0e0e0;
  --color-ink: #d0102c;
  --color-logo-accent: #ffcc00;

  /* Measured declared font stacks */
  --font-display: YakuHanJP, 'General Sans', sans-serif;
  --font-content: YakuHanJP, 'Noto Sans JP', sans-serif;
  --weight-body: 500;
  --weight-strong: 600;

  /* Measured desktop endpoints */
  --header-height: 96px;
  --rail-width: 96px;
  --body-size: 15px;
  --body-leading: 1.8;
  --hero-inset: 57.44px;
  --hero-top: 105.417px;
  --hero-bottom: 126.501px;
  --work-inset: 31.625px;
  --frame-width: 295.156px;
  --module-height: 185.188px;
  --band-gap: 36.891px;
  --work-title-en: 50.6003px;
  --work-title-jp: 47.4378px;
  --client-size: 13.7042px;
  --category-size: 14.7584px;
  --code-size: 10.5417px;
  --title-client-gap: 10.54px;

  /* Derived or visually estimated layout values */
  --caption-gap: 8.615px;
  --section-inset: 48px;
  --rule: 1px;
  --radius-pill: 9999px;

  /* Measured transition timing; endpoints need implementation */
  --ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
  --motion-control: 500ms;
  --motion-title: 700ms;
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-content);
  font-size: var(--body-size);
  font-weight: var(--weight-body);
  line-height: var(--body-leading);
}

a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 30px;
  height: var(--header-height);
  padding-inline: calc(var(--rail-width) + 60px) 35px;
  border-bottom: var(--rule) solid var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
}

.brand-tile {
  position: absolute;
  inset: 0 auto auto 0;
  display: grid;
  place-items: center;
  width: var(--header-height);
  height: var(--header-height);
  background: var(--color-ink);
}

.brand-tile img { width: 78%; height: auto; }

.desktop-nav,
.footer-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

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

.desktop-nav { font-size: 25px; line-height: 1; }
.desktop-nav sup { margin-inline-start: 3px; font-size: 9px; }

.contact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: 178.47px;
  height: 50px;
  margin-inline-start: auto;
  padding-inline: 23px 16px;
  border-radius: var(--radius-pill);
  color: var(--color-paper);
  background: var(--color-ink);
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity var(--motion-control) var(--ease-out);
}

.mobile-brand,
.menu-button { display: none; }

.identity-rail {
  position: fixed;
  inset: var(--header-height) auto 0 0;
  z-index: 20;
  width: var(--rail-width);
  border-right: var(--rule) solid var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
}

.rail-brand {
  position: fixed;
  top: 50%;
  left: calc(var(--rail-width) / 2);
  display: flex;
  align-items: baseline;
  gap: 5px;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 53px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.rail-brand sup { font-size: 12px; }

.rail-tools {
  position: absolute;
  bottom: 35px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 28px;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1.8;
}

.rail-cue { writing-mode: vertical-rl; }

.page-body {
  min-width: 0;
  margin-inline-start: var(--rail-width);
  padding-block-start: var(--header-height);
}

.hero { padding-block: var(--hero-top) var(--hero-bottom); }

.hero-lockup {
  container-type: inline-size;
  width: calc(100% - 2 * var(--hero-inset));
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
}

/* Estimated display styling, not measured child declarations */
.hero-first-line {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.hero-word {
  font-size: 19.3cqw;
  line-height: 0.78;
  white-space: nowrap;
}

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
}

.hero-copy {
  font-family: var(--font-content);
  font-size: clamp(9px, 2.1cqw, 27px);
  line-height: 1.1;
}

.hero-is { font-size: 11.2cqw; line-height: 0.8; }

.hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: 0.25em;
  margin-block-start: 0.6cqw;
  font-size: 11.2cqw;
  line-height: 0.96;
  white-space: nowrap;
}

.works {
  display: grid;
  gap: var(--band-gap);
  min-width: 0;
}

/* Recommended reachable fallback for the extended filmstrips */
.work-band {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-ink) var(--color-paper);
  scroll-padding-inline: var(--work-inset);
}

.work-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
}

.work-info {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--module-height);
  padding-inline: var(--work-inset);
  font-weight: var(--weight-strong);
}

.work-project-link { display: block; text-decoration: none; }

.work-title {
  font-family: var(--font-display);
  font-size: var(--work-title-en);
  font-weight: var(--weight-strong);
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}

.work-title--jp {
  font-family: var(--font-content);
  font-size: var(--work-title-jp);
}

.work-client {
  margin-block-start: var(--title-client-gap);
  font-size: var(--client-size);
  line-height: 1.3;
}

.work-category {
  margin-block-start: auto;
  padding-block: 6px;
  font-size: var(--category-size);
  line-height: 1.1;
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.work-frame {
  display: block;
  flex: 0 0 var(--frame-width);
  width: var(--frame-width);
  min-height: var(--module-height);
  text-decoration: none;
}

.work-frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.frame-code {
  margin-block-start: var(--caption-gap);
  font-family: var(--font-content);
  font-size: var(--code-size);
  font-weight: var(--weight-strong);
  line-height: 1;
}

/* News and footer values below are visual approximations */
.news {
  display: grid;
  grid-template-columns: 32% minmax(0, 1fr);
  gap: 32px;
  padding: 100px var(--section-inset) 48px;
}

.news-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
}

.news-heading h2 { font-size: 48px; line-height: 1; }
.news-all { font-size: 44px; text-decoration: none; }
.news-item + .news-item { margin-block-start: 56px; }
.news-date { display: block; font-size: 18px; line-height: 1.3; }

.news-link {
  position: relative;
  display: block;
  margin-block-start: 18px;
  padding-inline-start: 53px;
  font-size: 28px;
  font-weight: var(--weight-strong);
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.news-link::before,
.news-link::after {
  content: '';
  position: absolute;
  left: 0;
  height: 1px;
  background: currentColor;
}

.news-link::before { top: 0.45em; width: 27px; }
.news-link::after { top: 0.75em; width: 14px; }

.news-category {
  display: inline-block;
  margin-block-start: 10px;
  margin-inline-start: 53px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-strong);
  text-decoration: underline;
}

.page-footer {
  min-width: 0;
  padding: 40px var(--section-inset) 48px;
  border-top: var(--rule) solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
}

.footer-wordmark-window { overflow: hidden; }

.footer-wordmark {
  width: max-content;
  font-size: clamp(120px, 20.5vw, 295px);
  line-height: 0.9;
  white-space: nowrap;
}

.footer-nav { margin-block-start: 16px; font-size: 25px; }

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-block-start: 44px;
  font-size: 80px;
  line-height: 1;
  text-decoration: none;
}

.arrow-circle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 66px;
  height: 66px;
  border: var(--rule) solid currentColor;
  border-radius: 50%;
  font-size: 24px;
}

.footer-legal {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-block-start: 44px;
  font-size: 10px;
  line-height: 1.6;
}

.footer-legal a { text-decoration: none; }
.footer-copyright { margin-inline-start: auto; }

/* Recommended shell breakpoint; not recovered from source */
@media (max-width: 1100px) {
  :root {
    --header-height: 48px;
    --rail-width: 0px;
    --body-size: 13.52px;
    --body-leading: 1.9;
    --hero-inset: 17.22px;
    --hero-top: 52px;
    --hero-bottom: 62.4px;
    --work-inset: 26px;
    --frame-width: 178.875px;
    --module-height: 119.453px;
    --band-gap: 20.797px;
    --work-title-en: 24.96px;
    --work-title-jp: 22.88px;
    --client-size: 10.4px;
    --category-size: 11.44px;
    --code-size: 10.4px;
    --title-client-gap: 10.4px;
    --caption-gap: 8.44px;
    --section-inset: 20.8px;
  }

  .site-header { padding-inline: 48px 15px; }
  .desktop-nav, .contact-pill, .identity-rail { display: none; }

  .mobile-brand {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: baseline;
    gap: 5px;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
  }

  .mobile-brand sup { font-size: 8px; }

  /* The visual pill is 24px high within a 44px button target. */
  .menu-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 74px;
    min-height: 44px;
    margin-inline-start: auto;
    padding-inline: 12px;
    border: 0;
    color: var(--color-paper);
    background: transparent;
    font-size: 10px;
    font-weight: var(--weight-strong);
    cursor: pointer;
  }

  .menu-button::before {
    content: '';
    position: absolute;
    inset: 10px 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
  }

  .hero-is { font-size: 8.8cqw; }
  .hero-bottom { margin-block-start: 18px; }

  .news {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 64px 56px;
  }

  .news-heading { flex-direction: row; align-items: center; }
  .news-heading h2 { font-size: 26px; }
  .news-all { font-size: 22px; }
  .news-item + .news-item { margin-block-start: 32px; }
  .news-date { font-size: 9px; }
  .news-link { margin-block-start: 8px; padding-inline-start: 26px; font-size: 13.52px; }
  .news-link::before { width: 12px; }
  .news-link::after { width: 6px; }
  .news-category { margin-inline-start: 26px; font-size: 12px; }

  .page-footer { padding-block: 20px 24px; }
  .footer-wordmark-window { margin-inline: calc(-1 * var(--section-inset)); }
  .footer-wordmark { font-size: 120px; }
  .footer-nav { gap: 20px; flex-wrap: wrap; margin-block-start: 24px; font-size: 12px; }
  .footer-contact { gap: 16px; margin-block-start: 24px; font-size: 40px; }
  .arrow-circle { width: 34px; height: 34px; font-size: 18px; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: 4px; margin-block-start: 32px; }
  .footer-copyright { margin-block-start: 12px; margin-inline-start: 0; }
}

/* Recommended interaction additions */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

.work-frame:focus-visible { outline-offset: -3px; }

@media (hover: hover) {
  .contact-pill:hover { opacity: 0.85; }
  .work-project-link:hover .work-title { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contact-pill, .work-title { transition: none; }
  .work-track, .footer-wordmark { animation: none; }
}
```

The CSS deliberately leaves the mobile image codes at their measured computed size rather than reproducing the smaller rendered scale. It also allows footer navigation to wrap on widths where the captured single-line arrangement would no longer fit. These are practical adaptations.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-onion-paper: var(--color-paper);
  --color-onion-ink: var(--color-ink);
  --color-onion-logo: var(--color-logo-accent);

  --font-onion-display: var(--font-display);
  --font-onion-content: var(--font-content);

  --text-project-en: var(--work-title-en);
  --text-project-jp: var(--work-title-jp);
  --text-project-client: var(--client-size);
  --text-project-category: var(--category-size);
  --text-frame-code: var(--code-size);

  --spacing-onion-header: var(--header-height);
  --spacing-onion-rail: var(--rail-width);
  --spacing-project-inset: var(--work-inset);
  --spacing-film-frame: var(--frame-width);
  --spacing-film-band: var(--band-gap);

  --radius-onion-pill: 9999px;
  --ease-onion-out: cubic-bezier(0.075, 0.82, 0.165, 1);
}
```

## Sources & Evidence

- **Inspected original and final homepage:** [https://www.onionion.co.jp/](https://www.onionion.co.jp/). The supplied browser record reports HTTP 200 with no URL change.
- **Capture date:** September 29, 2026; supplied retrieval timestamp `2026-09-29T12:56:19.848Z`. This document analyzes that recorded current page rather than independently reopening the website.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport, with opening, middle-work, and lower-page captures. The measured document height is approximately 9158px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport, with opening and news/footer captures. The measured document height is approximately 5631px.
- **Rendered DOM and computed styles:** support the red/gray palette, declared font stacks, component font sizes, header and work-module dimensions, link destinations, and two transition timings. Hero-child, news, and footer computed styles were not fully supplied. No source custom properties or media-file URLs were provided.
- **Page identity:** the original page title is “株式会社オニオン | Onion Inc.” and the footer identifies Onion Inc. No website-production credit was established by the inspected homepage evidence.
- **Capture procedure:** the supplied record describes an initial observation of at least five seconds, bounded waits for layout, finite motion, and image decoding, and traversal of intermediate scroll positions. Perpetual animations were temporarily paused during readiness checks and resumed. These procedures do not guarantee that every delayed or animated element reached a semantically complete state.
- **Inspection limitations:** menu and theme controls were not exercised; project and policy destinations were recorded but not visited; no temporal recording establishes image playback, work-band movement, or a footer loop. Some mid-page images appear partially revealed or absent. SharedWorkers and service workers were disabled in the capture environment.

All proposed breakpoints, CSS class names, accessible fallbacks, estimated display sizes, and additional interaction treatments are implementation guidance. They should not be mistaken for recovered source code or verified original behavior.