# JXL Inc. — Style Reference

> A photographic project ledger with a moving strip of Tokyo time at its edge.

**Website:** [jxl.co.jp](https://jxl.co.jp/)
**Original URL:** https://jxl.co.jp/
**Final URL:** https://jxl.co.jp/
**Theme:** white canvas, black typography and rules, full-color photography
**Inspected:** September 13, 2026, Japan Standard Time
**Evidence timestamp:** September 12, 2026, 19:06:06.849 UTC / September 13, 2026, 04:06:06.849 JST
**Viewports:** 1440 × 1000 desktop; 390 × 844 mobile
**Scope:** the current corporate and portfolio homepage: initial project list, News, Company, the persistent information ribbon, and the lower mobile contact form. Member, menu, filter, and other below-fold details are additionally documented through supplied rendered DOM measurements. Project detail pages and linked destinations were not inspected.

JXL uses a restrained black-and-white interface to organize highly varied commercial photography. The identity comes from the combination of a soft, irregular wordmark and a precise ledger: vertical dates, narrow image columns, large regular-weight project titles, small dashed category labels, and fine horizontal rules. Color belongs primarily to the commissioned work and office photographs.

The desktop composition is deliberately uneven. Projects occupy the broad left region, beginning below a substantial blank header area. News and Company start immediately at the top of a narrower right region. A thin, moving vertical ribbon separates them. On mobile, that ribbon moves to the outer right edge, News precedes Projects, and each project becomes a title-and-image stack beside its vertical date. This is a corporate portfolio with an integrated inquiry route; its opening composition is an index rather than a conventional promotional hero.

## How to Read This Reference

- **Measured** means reported by the supplied rendered DOM or computed styles. Measurements are CSS pixels unless otherwise stated.
- **Visually estimated** means inferred from the current screenshots. Image bounds, corner radii, ribbon typography, and tag typography were not included as individual computed-style records.
- **Calculated** means arithmetic using measured coordinates or dimensions. Such calculations do not establish the original CSS formula.
- **Recommended** means implementation guidance or an approximation for a new build. The breakpoint, scrolling implementation, and optional marquee timing in Quick Start are recommendations.
- **Source variables** are explicitly identified. Other token names are descriptive aliases for reuse.
- **DOM presence is not proof of visibility.** The evidence includes menu content with white foregrounds and several 1 × 1px elements that are absent from the visible initial composition.
- **Font-family evidence identifies the declared stack**, not the particular font file used for every rendered glyph.

| Evidence | Available scope | Main limitation |
| --- | --- | --- |
| Three desktop captures, 1440 × 1000 | Initial project ledger, News, Company, moving ribbon | No visibly different desktop scroll position or opened menu |
| Mobile opening capture, 390 × 844 | Header, News, Projects heading, first project title | First project image only begins at the lower edge |
| Mobile lower-page capture, 390 × 844 | Mail, Inquiry, consent, SEND, persistent header and ribbon | Name field and Contact heading are above the capture |
| Desktop and mobile rendered DOM | Text, links, section geometry, font styles, selected transitions, source variables | Not a complete stylesheet, asset inventory, or interaction trace |

## Tokens — Colors

### Default Palette

| Name | Value | Token | Role and evidence |
| --- | --- | --- | --- |
| Canvas White | `#ffffff` | Source `--color-white`; alias `--jxl-paper` | Measured body background; visible canvas throughout the initial page |
| Type Black | `#000000` | Source `--color-black`; alias `--jxl-ink` | Measured primary text; visible logo, rules, dates, and icons |
| Field Gray | `#eeeeee` | Source `--color-gray`; alias `--jxl-field` | Declared source color; visually consistent with the large mobile form fields. Input computed backgrounds were not supplied |
| Guide Gray | Approximately `#dddddd` | Recommended `--jxl-guide` | Visually estimated faint vertical guides above the desktop project rows |
| Ribbon Label Gray | Approximately `#aaaaaa` | Recommended `--jxl-muted` | Visually estimated labels such as TODAY, LOCATION, WEATHER, and JXL inside the ribbon |
| Pale SEND Appearance | Approximately `#e4e4e4`–`#e6e6e6` | State appearance, not a confirmed source token | Visible mobile empty-form button. Its computed base background is black; the mechanism producing its pale appearance was not included |

White and black define the interface. The warm brown, gold, blue-green, skin tones, and dark cosmetic packaging belong to photographs and campaign artwork. They are not a set of interchangeable UI accent colors.

### Defined State Colors

The following source variables exist, but their presence must not be mistaken for a visible default palette or a verified theme switcher.

| Source variable | Value | Evidence boundary |
| --- | --- | --- |
| `--color-hover-gray` | `#cccccc` | Declared; the supplied captures do not establish which hovered elements use it |
| `--color-form-red` | `#ff0000` | Also measured on empty, zero-height form feedback containers; no visible validation error was captured |
| `--color-neon` | `#bdff00` | Declared; no confirmed visible application in the supplied states |
| `--color-neon-link` | `#ffff00` | Declared; no confirmed visible application in the supplied states |

Do not introduce neon sections, yellow link fills, or a dark theme solely because these variables exist. The current visible page is monochrome around full-color images.

## Tokens — Typography

### Primary Sans-Serif Stack

- **Measured source family:** `"ABC Helveesti", "Noto Sans JP", sans-serif`.
- **Measured weight:** `400` across the sampled headings, project titles, paragraphs, dates, filters, and buttons.
- **Character:** direct, compact, and editorial. Hierarchy comes from size, position, and whitespace rather than heavy heading weights.
- **Tracking:** section headings and project titles use `-0.02em`; body paragraphs and vertical dates use normal tracking in the supplied records.
- **Implementation alias:** `--jxl-font`.

The HTML element reports Times, but the body and sampled interface elements explicitly use the sans-serif stack. Times is not the observed content typeface. The wordmark is a distinct graphic form; recreating it by typing JXL in the body font would lose its identity.

### Type Scale

| Role | Desktop | Mobile | Tracking | Evidence |
| --- | --- | --- | --- | --- |
| Section heading: News, Company, Member, Contact | `48px / 48px` | `48px / 48px` | `-0.96px` | Measured, weight 400 |
| Projects heading | `48px / 48px`, in a 1 × 1px box | `48px / 48px`, visible | `-0.96px` | Measured; desktop heading is not visibly displayed |
| Project title | `28px / 33.6px` | `24px / 28.8px` | `-0.56px` / `-0.48px` | Measured |
| News and company prose | `20px / 24px` | `20px / 24px` | Normal | Measured |
| Project date | `20px / 20px` | `20px / 20px` | Normal | Measured; rotation is visible |
| Member name and role | `20px / 20px` | `20px / 20px` | Normal | Measured; mobile roles can wrap to 40px-high boxes |
| Instagram / Google Maps link text | `20px / 20px` | `20px / 20px` | Normal on sampled anchors | Measured |
| SEND label | `20px / 20px` | `20px / 20px` | `-0.4px` | Measured |
| General inherited text / LOAD MORE | `16px / 16px` | `16px / 16px` | LOAD MORE: `-0.32px` | Measured |
| Consent policy link | `15px / 22px` | `14px / 20px` | Normal | Measured |
| DATE / IMAGE / TITLE guides | `9px / 9px` | Not visible | Normal | Measured |
| Project category stamps | Approximately `14px` | Approximately `10px` | Visually compact | Screenshot estimate |
| Vertical ribbon | Approximately `14px` | Approximately `14px` | Visually compact | Screenshot estimate |
| Filter options | `32px / 32px` | `32px / 32px` | `-0.64px` | Measured in menu DOM; open appearance unverified |
| Menu / Filter labels | `20px / 20px` | `20px / 20px` | `-0.4px` | Measured in menu DOM |
| Empty form feedback containers | `20px / 24px` | `14px / 16.8px` | Normal | Measured styles; no visible message |

The mobile hierarchy remains unusually large. Section headings stay at 48px and prose stays at 20px; the primary reduction is the project title from 28px to 24px. Preserve that relationship instead of shrinking the entire page proportionally.

### Text Treatment

English section labels are short and prominent. Japanese descriptions and campaign names remain ordinary text rather than being converted into image headings. Project titles combine Japanese and English naturally, including the full-width separator `／`. Utility text uses uppercase presentation: DATE, IMAGE, TITLE, PHOTO PRODUCE, GRAPHIC, TALENT, CONTACT, and SEND.

Several Japanese section subtitles occupy 1 × 1px boxes in the supplied DOM. They should not be added as visible secondary captions when reproducing the captured appearance.

## Tokens — Spacing & Shapes

**Density:** compact utility details and tight text leading, balanced by large unfilled areas.
**Common inset:** 12px.
**Root size:** a conventional measured 16px; there is no evidence of an unusual miniature-rem system.

### Spacing Scale

| Use | Value | Status |
| --- | --- | --- |
| Padding on sampled member social links | `4px` | Measured |
| Filter option padding | `8px 8px 4px` | Measured in menu DOM |
| Main content inset | `12px` | Measured across sections and project rows |
| Company heading-to-paragraph gap | `22px` | Calculated from desktop and mobile element bounds |
| Mobile right-side reservation | `24px` | Measured main padding; visually occupied by the ribbon |
| Mobile Projects heading padding | `12px 0 24px` | Measured |
| Desktop information-section bottom padding | `40px` | Measured |
| Mobile information-section bottom padding | `80px` | Measured |
| Project section bottom padding | `94px` | Measured at both sizes |
| Mobile opening clearance | `200px` | Measured main top padding and News start |
| Desktop project ledger opening depth | `276px` | Measured project padding and guide height |
| Company photo gap | Approximately `12px` | Screenshot estimate |

These values form several component-specific rhythms. The 200px and 276px opening spaces should not become universal section padding.

### Border Radius and Rules

| Element | Value | Status / interpretation |
| --- | --- | --- |
| Project and information sections | `0` radius | Measured sampled section boxes |
| Horizontal project separators | Approximately `1px`, solid black | Visually observed |
| Vertical project column separators | Approximately `1px`, dashed | Visually observed; lighter above the populated rows |
| Category stamps | Square corners, approximately `1px` dashed border | Visually observed |
| Campaign and office images | Approximately `8px` radius | Visually estimated |
| Form fields | Approximately `8px` radius | Visually estimated |
| Consent checkbox | Approximately `20 × 20px`, small rounded corners | Visually estimated |
| SEND button | Source radius `159984px` | Measured; effectively a full pill. Use `9999px` in an adaptation |

The rounded image corners soften the ledger without turning each project into a floating card. Horizontal rules and alignment remain the primary structure.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Header box | `1440 × 94px` | `390 × 94px` | Measured; visible controls occupy only part of that box |
| Logo link | `147 × 64px`, at `(12, 12)` | `147 × 64px`, at `(12, 15)` | Measured |
| Menu button | `64 × 64px`, at `(860, 12)` | `64 × 64px`, at `(290, 15)` | Measured |
| Project section width | `921px` | `366px` | Measured |
| Project inner rule width | `897px` | `342px` | Calculated from 12px side insets |
| Desktop DATE / IMAGE / TITLE columns | `50 / 253 / 594px` | Not retained as three columns | Measured guide boxes |
| Project title text box | `569px` wide, starting at x = 328 | `280px` wide, starting at x = 62 | Measured |
| First project row | `332px` high, y = 276 | `626.73px` high, y = 620 | Measured |
| Second project row | `186.20px` high | `296.84px` high | Measured |
| Third project row | `167.13px` high | `301.31px` high | Measured |
| Information section width | `465px`, starting at x = 960 | `366px`, starting at x = 0 | Measured |
| Information text width | `441px` | `342px` | Measured |
| Ribbon | Approximately x = 936–960 | Approximately x = 366–390 | Screenshot geometry; mobile width also matches reserved padding |
| First company photograph | Approximately `441 × 294px` | Not visible in supplied mobile frames | Desktop screenshot estimate |
| LOAD MORE button | `897 × 120px` | `342 × 120px` | Measured |
| SEND button | `441 × 80px` | `342 × 80px` | Measured |

At desktop, the visible ribbon starts at approximately 65% of viewport width: `936 / 1440 = 0.65`. This is a calculated correspondence at one width, not proof of a source `65vw` rule.

## Components

### Identity Header

**Role:** persistent brand recognition and access to navigation.

The black JXL graphic sits close to the top-left edge. Its rounded, irregular forms contrast with the straight grid below. A three-stroke menu mark sits near the right edge of the project side on desktop and near the right edge of the usable content area on mobile.

The menu button has a measured 64px square interaction box; its visible strokes occupy only roughly 36–40px of that area. Preserve the larger target. The DOM supplies the accessible label `メニューを開く` and a corresponding close control labeled `メニューを閉じる`.

The header remains visible in the lower mobile form capture. The fields can visually pass beneath its region; that capture does not support assuming an opaque white header bar. Header and main elements have measured transform transitions, but the conditions that move them were not exercised.

### Desktop Ledger Guides

**Role:** establish the alignment system before any project content appears.

The upper-left region is mostly white. Tiny DATE, IMAGE, and TITLE labels sit near the bottom of a 276px-high guide area, immediately above the first project rule. Faint dashed vertical lines continue through this blank area at the date and image boundaries.

The measured guide columns are 50px, 253px, and 594px inside an 897px-wide content region. The desktop Projects heading is present in a 1 × 1px box and does not function as a visible section title.

On mobile, these three column labels disappear. A visible 48px Projects heading, with 12px top and 24px bottom padding, introduces the list instead.

### Project Row

**Role:** a single linked entry into a production case study.

Each measured project entry is an anchor spanning the project section width, including its date, image, tags, title, and arrow affordance. Internal side padding places the row rules 12px from the section edges.

**Desktop anatomy:**

1. A narrow left date column with sideways uppercase date text.
2. A 253px image column with about 12px side padding, producing an approximately 229px-wide image.
3. A flexible title region, separated by a dashed vertical rule.
4. Small category stamps above a regular-weight 28px title.
5. A small right-pointing arrow near the lower-right corner.
6. A thin horizontal rule separating the row from the next project.

Row height follows content and imagery. The first portrait campaign occupies 332px, while the next landscape campaign occupies about 186px. Short titles leave considerable white space beside taller images. Do not force uniform-height cards.

**Mobile anatomy:** retain the narrow date strip, but place category stamps and the 24px title above the image within the remaining width. The title begins at x = 62 and has a measured 280px text width. Its full campaign name wraps across six lines in the first project. The photograph begins just below the visible opening frame.

The first three displayed entries are dated 2024, 2025, and 2021. The visible order is not chronological; preserve the supplied content order unless a separate sorting requirement exists.

### Category Stamps

**Role:** compact production classifications.

PHOTO PRODUCE, GRAPHIC, and TALENT appear as narrow, unfilled, square-cornered labels with dashed black outlines. They sit tightly together above the project title. Their approximate text size changes from 14px on desktop to 10px on mobile.

The labels belong to the overall project anchor in the supplied link evidence. Separate menu filter links also exist, but there is no evidence that each visible project stamp is independently clickable. Do not nest filter anchors inside a project anchor.

### Vertical Dates and Row Arrows

**Role:** indexing and directional cues.

Dates use 20px regular text, visually rotated clockwise so the year and month read down the left strip. The first visible date is presented as `2024-SEP`. A dashed separator marks the edge of that strip.

Small arrows sit low and right within desktop rows. Some are thin and some appear more solid in the supplied frames. That variation is visible, but it does not establish hover, active, or animated states. Use a compact arrow affordance without inventing a state model from stroke differences alone.

### News Block

**Role:** surface a current announcement and a direct inquiry route.

On desktop, News begins at the top of the right region, with its 48px heading at `(972, 12)`. The date is split into three short lines, followed by a 20px / 24px announcement and an underlined CONTACT link. The current announcement concerns recruitment for production coordination and producer roles.

The section has a measured 296px desktop height and 40px bottom padding. On mobile, it starts at y = 200, occupies 336px, and uses 80px bottom padding. The visible mobile sequence is heading, stacked date, announcement, then CONTACT. A fine rule separates it from Projects below.

CONTACT resolves to `https://jxl.co.jp/#contact`. The destination is confirmed by the rendered anchor; the scrolling effect after activation was not tested.

### Company Block

**Role:** explain the business, provide location and social access, and show the working environment.

The current original page identifies JXL Inc. as a company producing graphic visuals and coordinating photography for video and digital content. Its Company block uses the same 48px heading and 20px / 24px prose as News.

The desktop sequence is:

1. Section rule and Company heading.
2. Short business description.
3. Underlined INSTAGRAM link.
4. Postal address over two lines.
5. Underlined GOOGLE MAPS link.
6. Large office photographs stacked with a small gap.

The first office photograph begins around `(972, 602)` and measures approximately 441 × 294px. It shows a glass entrance with the white JXL mark, a warm interior, reflections, and people beyond the glass. The second photograph starts around y = 908 and is only partially visible in the desktop frames.

Use normal text links and photography rather than a separate promotional callout card. The address and links share the section’s 441px desktop or 342px mobile content width.

### Member List

**Role:** present the people behind the production work.

The DOM contains five member entries with a name, a bracketed role, and an Instagram link. The roles are Producer or Photo Producer. These are company staff roles, not evidence of website design or development authorship.

Measured desktop text begins at x ≈ 1198.69 within the right section and occupies about 214.31px. Mobile text begins at x = 190.5 and occupies 163.5px. This supports a side-by-side member composition with text in the right portion, but the supplied visible captures do not show the member imagery or its crop.

Names and roles use 20px / 20px. On mobile, `[Photo Producer]` occupies a 40px-high box because it wraps. Preserve content-driven height. Do not invent portrait styles, hover reveals, or biographies absent from the evidence.

### Contact Form

**Role:** collect an inquiry within the same page.

The DOM identifies three required fields: Name, Mail, and Inquiry. Required-field annotations are present in the text evidence, but the supplied element records do not resolve how all annotations are visually exposed.

The lower mobile capture shows a full-width gray Mail field, a much taller gray Inquiry textarea, a centered privacy consent row, and a wide SEND pill. Field corners are visually about 8px. The Mail field is approximately 80px tall; the Inquiry area is approximately 320px tall and shows a native resize grip at the lower-right corner.

The consent checkbox is approximately 20px square. The policy link is underlined, followed by the rest of `プライバシーポリシーに同意する`. The measured mobile policy typography is 14px / 20px. SEND is a measured 342 × 80px pill with 20px text.

**State distinction:** SEND appears pale gray in the empty-form screenshot, while its computed base colors are white text on black. This is consistent with an unavailable or attenuated state, but neither the disabled attribute nor the responsible opacity value was supplied. Do not claim a verified enabling condition.

Empty feedback containers have red text styles and a 200ms grid-row transition. No validation message, submission result, network behavior, or success screen was inspected.

### Vertical Information Ribbon

**Role:** give the page a continuous ambient identity and a strong vertical boundary.

The narrow white strip contains repeated sequences of TODAY, the date, LOCATION, Tokyo time with UTC+9, WEATHER, a weather value, JXL, and short brand phrases such as BEHIND EVERY MOMENT and JOHANSHIN-XL. Small circular and weather-like symbols punctuate the text.

Labels are light gray and values are black. The text is rotated to read downward. The strip lies between the desktop regions and at the far-right edge on mobile, retaining roughly the same 24px width.

Across the desktop captures, the text sequence advances upward while the project and information blocks remain in the same positions. Displayed seconds progress from 04:06:01 to 04:06:03. The lower mobile frame also shows an updated time. This establishes visible ribbon motion and changing displayed time; it does not establish an exact animation duration, weather provider, or synchronization mechanism.

### Menu and Filters

**Role:** section navigation and archive filtering.

The rendered DOM includes Menu links for Projects, Company, News, and Member, plus Filter options for years and the Photo Produce, Graphic, and Talent categories. There are also privacy and Instagram links.

Filter links have observed destinations such as `https://jxl.co.jp/?filter=2024#projects` and `https://jxl.co.jp/?filter=Photo%20Produce#projects`. They use measured 32px / 32px text with `8px 8px 4px` padding. The source defines 40ms color and background-color transitions.

On desktop, the measured Menu section is 360px wide at `(12, 200)`, and the filter area is positioned near the lower-right of the menu DOM. On mobile, the menu section is 366px wide and the filters wrap across multiple lines below it.

These are measurements of underlying menu content. The menu was not visibly opened in the supplied captures. Its background, compositing, entrance sequence, focus management, and filter result behavior remain unverified. White computed menu text alone does not prove a black full-screen overlay.

### LOAD MORE

**Role:** continue the archive beyond the eight initially represented projects.

The button spans the inner project width and is 120px high at both measured viewports. Its sampled box has transparent background, black 16px text, and square corners. It follows the eighth project with a 12px gap.

Activation was not inspected. Do not invent pagination size, loading indicators, error handling, or automatic infinite scrolling.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Header transform | `0.8s cubic-bezier(0.19, 1, 0.22, 1)` | Measured transition definition; trigger and travel distance unverified |
| Main transform | `0.8s cubic-bezier(0.19, 1, 0.22, 1)` | Same measured timing; do not assign it to every scroll or menu action |
| Filter foreground and background | `0.04s linear` | Measured transition definition; endpoint colors unverified |
| CONTACT and sampled social / map / policy link backgrounds | `0.04s linear` | Measured quick background transition; hover appearance not captured |
| Form feedback grid rows | `0.2s cubic-bezier(0.19, 1, 0.22, 1)` | Measured on empty feedback containers; reveal not exercised |
| SEND opacity | `0.1s linear` | Measured transition; actual state opacity values unavailable |
| Information ribbon translation | Text advances upward across desktop captures | Visually observed continuous effect; duration, easing, and loop extent unknown |
| Time display | Seconds differ across captures | Display updates observed; update implementation unknown |
| Noise-related source variable | `--noise-bg-position` differs between desktop and mobile records | Declared values exist; this alone does not prove visible animated noise |

Many sampled elements report `animation: none`. That result applies to those sampled elements, not necessarily to the ribbon track, pseudo-elements, or script-driven behavior.

The capture process allowed at least five seconds of initial observation, waited for settled visible content, and resumed perpetual animations after readiness checks. It was not an exhaustive interaction test. Hover, menu opening, filter selection, project navigation, form validation, and submission remain outside the verified scope.

**Recommended motion approach:** preserve the moving ribbon as the ambient effect, keep ordinary link feedback very short, and use the measured transform easing only for implemented transitions that actually need it. Provide a reduced-motion state that leaves the information legible without perpetual translation.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Page canvas | Solid white | Broad negative space and the shared background for all sections |
| Project ledger | Same white, black horizontal rules, dashed vertical separators | Information structure without card elevation |
| Header guide area | White with faint dashed column lines | Carries the grid through the empty opening space |
| Category stamps | Transparent fill, dashed black outline | Small classification markers |
| Photographs | Full color, modest rounded corners | Main source of color and visual specificity |
| Form fields | Pale gray fill, rounded corners, no obvious visible border | Large input surfaces |
| SEND | Computed black base and white label; pale captured state | The major filled action shape |
| Ribbon | White strip with a fine boundary and black/gray text | Persistent moving information and layout division |

There is no visible general-purpose shadow, gradient, glass, or floating-card system. Do not infer menu or overlay surfaces from transparent child elements in an unopened state.

## Imagery

The photographs preserve their individual campaign identities. The first visible project is a tall architectural advertisement with a wood building and blue-green sky. The second uses a close cosmetic portrait, dark product packaging, and embedded campaign lettering. The third shows a warm, gold-toned hotel interior. Their different orientations create the changing row heights.

Campaign typography belongs to the artwork. Keep it within the supplied image rather than duplicating it as additional interface text. Display photography with normal smoothing; there is no evidence for pixelated rendering, halftone conversion, or global monochrome filtering.

The desktop images appear approximately 229px wide, with heights of 308px, 162px, and 143px for the first three entries. These are visual estimates of displayed boxes. Original asset dimensions, file formats, and `object-fit` rules were not supplied, so exact cropping cannot be established. For an adaptation, start with `width: 100%; height: auto` and retain each approved asset’s composition.

The office image supplies a warmer, more personal counterpoint to the archive. Its glass, reflections, timber tones, and softly visible people communicate a working place without adding another UI color scheme.

### Observed Asset References

No original image `src` values or logo asset paths were included. The links below are observed contextual destinations, not image download URLs, and their detail pages were not opened.

| Image / graphic | Original-page context | Visible treatment |
| --- | --- | --- |
| JXL wordmark | [Homepage](https://jxl.co.jp/) | Black, soft irregular lettering; measured link box 147 × 64px |
| Good NeighborWood campaign | [Project link](https://jxl.co.jp/projects/0008/) | Tall architecture advertisement, approximately 229 × 308px on desktop |
| Primavista BLACK campaign | [Project link](https://jxl.co.jp/projects/0024/) | Landscape cosmetic artwork, approximately 229 × 162px |
| The Okura Tokyo campaign | [Project link](https://jxl.co.jp/projects/0005/) | Warm hotel interior, approximately 229 × 143px |
| Office entrance and following office image | [Company section](https://jxl.co.jp/#company) | Large rounded photographs in the right information region |
| Menu strokes, arrows, and ribbon symbols | Homepage interface | Small black graphic marks; asset formats unknown |

Use authorized originals when available. The CSS shell can reproduce the ledger, but generic stock photography and a typeset replacement logo will not reproduce the same identity.

## Layout & Responsive Behavior

### Desktop Composition

The left project section spans x = 0–921. Its visible rules run from x = 12–909. The ribbon is approximately x = 936–960, leaving a small clearance after the project region. Information sections start at x = 960 and end at x = 1425, with content inset to x = 972–1413.

News starts at y = 0, Company at y = 296, Member at y = 1242, and Contact at y ≈ 2487.44 in the measured desktop section coordinates. Projects begin their populated rows at y = 276. This offset is a defining feature: the right side is already informative while the left side remains mostly blank above the archive.

The desktop document height is reported as 1000px even though the project section is approximately 2634.91px tall and the information sections extend to approximately 3411.44px. This supports a viewport-contained composition with internal overflow or transformed content. The exact scroll owners, independent wheel behavior, and synchronization were not supplied. Quick Start uses separate scrollable regions as an explicit implementation choice.

### Mobile Composition

At 390px wide, the main grid is 366px wide with 24px reserved on the right. Content has 12px horizontal insets, leaving 342px for information text and form controls. The ribbon stays visible at the outer right edge.

| Section | Mobile start y | Measured height |
| --- | --- | --- |
| Opening clearance | `0` | `200px` before News |
| News | `200px` | `336px` |
| Projects | `536px` | `3876.06px` |
| Company | `4412.06px` | `878px` |
| Member | `5290.06px` | `1044.50px` |
| Contact | `6334.56px` | `962px` |

The resulting mobile document is approximately 7296.56px tall. These positions depend on the currently supplied content and should not be hardcoded as section coordinates.

The mobile visual order is News → Projects → Company → Member → Contact. Projects change from three desktop columns to a narrow date strip plus stacked information and imagery. The 48px section headings remain large, the body stays at 20px, and the first project title wraps to six lines.

The lower mobile capture is consistent with the document’s end: SEND appears around viewport y = 684, corresponding to its measured document y ≈ 7136.56 after roughly 6452.56px of scrolling. Both header controls and the ribbon remain visible there.

### Breakpoint and Intermediate Widths

Only 1440px and 390px widths were supplied. The original breakpoint, tablet layout, landscape behavior, safe-area handling, and scrollbars were not established. The zero-valued `--scrollbar-width` variable does not prove a cross-browser scrollbar policy.

**Recommended:** begin with a 960px breakpoint for this adaptation, then test the long mixed-language project titles and information column. Keep the 24px ribbon reserved in layout rather than overlaying readable content. Test the mobile order with keyboard navigation and assistive technology; visual CSS reordering should not produce a confusing reading sequence.

## Do’s and Don’ts

### Do

- Build around exact white and black, allowing photographs to supply most color.
- Use regular-weight sans-serif headings and titles with the measured tight tracking.
- Preserve the wide blank desktop ledger opening and the immediate information at the right.
- Keep vertical dates, dashed category stamps, and thin row rules together as one indexing system.
- Allow project heights to vary with title length and image proportion.
- Keep the whole project entry a coherent link target.
- Retain the 24px vertical information strip on both desktop and mobile.
- Put News before Projects in the mobile visual sequence.
- Keep 48px section headings and 20px prose on the inspected phone size.
- Use modest rounding for images and fields, reserving a full pill for SEND.
- Preserve ordinary underlined links for contact, social, map, and privacy access.
- Distinguish defined CSS transitions from interactions actually demonstrated.

### Don’t

- Don’t replace the opening archive with a generic headline, hero image, and conversion button.
- Don’t convert the portfolio into equal-height cards or a multi-column thumbnail gallery.
- Don’t crop every campaign to the same square or landscape ratio.
- Don’t use bold type everywhere to manufacture hierarchy.
- Don’t turn category labels into colorful pills.
- Don’t recolor the default page with the unverified neon variables.
- Don’t infer a black menu overlay from white menu text in the DOM.
- Don’t claim arrow variations are hover states without interaction evidence.
- Don’t treat the pale SEND capture as a confirmed validation state machine.
- Don’t scale down every mobile dimension, especially the logo, headings, and body text.
- Don’t add shadows, gradients, or glass surfaces to separate sections that are already separated by rules.
- Don’t invent asset filenames, portrait treatments, weather integrations, or project-detail behavior.

## Recommended Implementation Additions

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

- Preserve the observed menu button’s accessible name, and add a tested expanded state, focus return, and keyboard dismissal for an implemented menu.
- Make the project anchor’s accessible name understandable without requiring every decorative category and date to be repeated. Avoid nested interactive stamps.
- Retain a visible focus indicator on all links, buttons, and form controls.
- Associate Name, Mail, and Inquiry with real labels and required semantics. Connect validation messages through `aria-describedby` and expose them only when relevant.
- Provide a clear, testable unavailable SEND state and explicit submission progress, failure, and success feedback.
- Pause or stop perpetual ribbon motion for reduced-motion users. Avoid announcing a changing clock every second to screen readers.
- Hide duplicated marquee copies from assistive technology while keeping a concise, nonduplicated version of useful location information available.
- Evaluate the readability of the 9px desktop guides and approximately 10px mobile tags. Increase their size when necessary without weakening the date/image/title hierarchy.
- Supply image dimensions to reserve space, meaningful alt text where appropriate, and responsive image variants. Preserve campaign lettering and composition.
- Test nested desktop scrolling, touch scrolling, anchor destinations, and keyboard access before adopting the suggested two-pane implementation.
- Check the fixed header against focused fields and anchored headings; ensure useful content is not obscured at narrow widths or increased text zoom.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and section surfaces: `#ffffff`.
- Main text, rules, wordmark, dates, and arrows: `#000000`.
- Form fields: source gray `#eeeeee`, consistent with the captured appearance.
- Faint guide lines: approximately `#dddddd`, an adaptation estimate.
- Ribbon utility labels: approximately `#aaaaaa`, an adaptation estimate.
- SEND base: black with white text; the captured empty-form state appears pale.
- Validation: source `#ff0000`, reserved for actual feedback.
- Neon variables exist but have no verified visible role in the supplied states.

### Overall Prompt

“Create a corporate portfolio for a photography production company using a white canvas, black regular-weight sans-serif typography, fine solid row rules, dashed vertical separators, and small dashed category stamps. Use the declared stack ABC Helveesti, Noto Sans JP, sans-serif when licensed assets are available. On a 1440px desktop, place a roughly 921px project region at the left, a narrow vertical information ribbon near 65% of the viewport, and a roughly 465px information region at the right. Leave about 276px of open space above the project rows with tiny DATE, IMAGE, and TITLE guides. Start News and Company immediately at the top of the right region. Each project combines a sideways 20px date, an approximately 229px-wide photograph in its own aspect ratio, category stamps, and a 28px regular title. Use 48px section headings and 20px prose. On a 390px phone, reserve 24px at the right for the ribbon, place News before Projects, and stack project titles and images beside the date strip. Keep the brand mark and menu control visible, with large gray inquiry fields and an 80px-high SEND pill near the end of the page.”

### Example Component Prompts

1. **Project row:** “Build a full-width white linked ledger row with a 50px date column, a 253px media column containing an uncropped-width campaign image, and a flexible text column. Use a 28px / 1.2 regular title below small square dashed category stamps. Add a fine top rule and a small lower-right arrow. Let the image determine row height.”
2. **Mobile project:** “Retain a narrow sideways-date strip and place compact category stamps, a 24px / 1.2 mixed Japanese-English title, and the campaign image vertically beside it. At 390px viewport width, reserve 24px for the right ribbon and use 12px section insets. Do not truncate the long title.”
3. **Information section:** “Use a white section with a fine black separator, a 48px regular heading, 20px / 24px prose, and plain underlined links. For Company, stack office photographs with approximately 8px corner rounding and a 12px gap. Keep the section visually continuous with News.”
4. **Ribbon:** “Create a 24px-wide vertical white information strip containing downward-reading uppercase labels and black values for date, Tokyo location, time, weather, and brand phrases. Use gray labels and small monochrome symbols. Animate the sequence upward with a seamless loop, marking the timing as an implementation choice and providing reduced-motion behavior.”
5. **Contact form:** “Build Name and Mail inputs and a tall Inquiry textarea on pale gray rounded surfaces. Use generous field heights, regular 20px labels, a centered consent checkbox with an underlined privacy link, and a full-width 80px SEND pill. Provide explicit accessible validation and submission states; do not infer them from visual opacity alone.”

## Quick Start

### CSS Custom Properties

This is an adaptation of the supplied evidence, not recovered source code. It uses the measured type sizes, 12px insets, 24px ribbon reservation, and desktop dimensions. The 960px breakpoint, `65vw` split, separate desktop scrolling regions, estimated radii, hover-color assignment, and disabled opacity are recommended choices. The optional ribbon loop uses an illustrative 40-second duration because original timing was unavailable.

The CSS expects `.jxl-layout` to contain `.jxl-projects` and `.jxl-information`. The information wrapper contains `.jxl-news`, `.jxl-company`, `.jxl-members`, and `.jxl-contact`. On mobile, `display: contents` allows the visible section order to change. Validate the final accessibility-tree and keyboard order when building the markup.

A `.project-row` link contains `.project-date` with a `time` element, `.project-media` with an image, `.project-info` with tags and a title, and a decorative `.project-arrow`. Supply image dimensions and approved assets separately. Font declarations below do not download or license fonts.

```css
:root {
  /* Measured source colors */
  --jxl-paper: #fff;
  --jxl-ink: #000;
  --jxl-field: #eee;
  --jxl-hover: #ccc;
  --jxl-error: #f00;

  /* Visual estimates for this adaptation */
  --jxl-guide: #ddd;
  --jxl-muted: #aaa;
  --jxl-radius: 8px;

  /* Declared source font stack */
  --jxl-font: 'ABC Helveesti', 'Noto Sans JP', sans-serif;
  --jxl-weight: 400;
  --jxl-text-section: 48px;
  --jxl-text-project: 24px;
  --jxl-text-body: 20px;
  --jxl-text-date: 20px;
  --jxl-text-guide: 9px;
  --jxl-text-tag: 10px;
  --jxl-text-ribbon: 14px;
  --jxl-tight: -0.02em;

  /* Measured dimensions and adaptation geometry */
  --jxl-inset: 12px;
  --jxl-ribbon: 24px;
  --jxl-header: 94px;
  --jxl-control: 64px;
  --jxl-open-mobile: 200px;
  --jxl-open-desktop: 276px;
  --jxl-date-column: 38px;
  --jxl-image-column: 253px;
  --jxl-section-bottom: 80px;
  --jxl-split: 65vw;

  /* Measured transition definitions */
  --jxl-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --jxl-motion-shell: 800ms var(--jxl-ease);
  --jxl-motion-link: 40ms linear;
  --jxl-motion-feedback: 200ms var(--jxl-ease);
  --jxl-motion-opacity: 100ms linear;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--jxl-ink);
  background: var(--jxl-paper);
  font-family: var(--jxl-font);
  font-size: 16px;
  font-weight: var(--jxl-weight);
}

button,
input,
textarea {
  font: inherit;
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--jxl-ink);
  outline-offset: 4px;
}

.jxl-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: calc(100% - var(--jxl-ribbon));
  height: var(--jxl-header);
  pointer-events: none;
  transition: transform var(--jxl-motion-shell);
}

.jxl-logo,
.jxl-menu-button {
  position: absolute;
  top: 15px;
  display: block;
  pointer-events: auto;
}

.jxl-logo {
  left: var(--jxl-inset);
  width: 147px;
  height: 64px;
}

.jxl-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jxl-menu-button {
  right: var(--jxl-inset);
  width: var(--jxl-control);
  height: var(--jxl-control);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.jxl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--jxl-open-mobile) var(--jxl-ribbon) 0 0;
  transition: transform var(--jxl-motion-shell);
}

.jxl-projects {
  grid-row: 2;
  min-width: 0;
  padding: 0 var(--jxl-inset) 94px;
}

.jxl-information {
  display: contents;
}

.jxl-news { grid-row: 1; }
.jxl-company { grid-row: 3; }
.jxl-members { grid-row: 4; }
.jxl-contact { grid-row: 5; }

.ledger-head {
  display: none;
}

.section-title {
  margin: 0 0 22px;
  font-size: var(--jxl-text-section);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--jxl-tight);
}

.jxl-projects > .section-title {
  margin: 0;
  padding: 12px 0 24px;
  border-top: 1px solid var(--jxl-ink);
}

.project-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--jxl-date-column) minmax(0, 1fr);
  grid-template-areas:
    'date info'
    'date media';
  margin-inline: calc(-1 * var(--jxl-inset));
  padding-inline: var(--jxl-inset);
  color: inherit;
  text-decoration: none;
}

.project-row::before {
  position: absolute;
  top: 0;
  right: var(--jxl-inset);
  left: var(--jxl-inset);
  border-top: 1px solid var(--jxl-ink);
  content: '';
}

.project-date {
  grid-area: date;
  margin: 0;
  padding-top: 12px;
  border-right: 1px dashed currentColor;
}

.project-date time {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
  font-size: var(--jxl-text-date);
  line-height: 1;
  text-transform: uppercase;
}

.project-info {
  grid-area: info;
  min-width: 0;
  padding: 12px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.project-tag {
  padding: 1px 3px;
  border: 1px dashed currentColor;
  font-size: var(--jxl-text-tag);
  line-height: 1.2;
  text-transform: uppercase;
}

.project-title {
  margin: 12px 0 0;
  font-size: var(--jxl-text-project);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--jxl-tight);
  overflow-wrap: anywhere;
}

.project-media {
  grid-area: media;
  min-width: 0;
  margin: 0;
  padding: 0 0 12px 12px;
}

.project-media img,
.company-photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--jxl-radius);
}

.project-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 20px;
  line-height: 1;
}

.load-more {
  display: block;
  width: 100%;
  min-height: 120px;
  margin-top: 12px;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 16px;
  letter-spacing: var(--jxl-tight);
  text-transform: uppercase;
  cursor: pointer;
}

.info-section {
  position: relative;
  min-width: 0;
  padding: 12px 12px var(--jxl-section-bottom);
  scroll-margin-top: var(--jxl-header);
}

.info-section::before {
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  border-top: 1px solid var(--jxl-ink);
  content: '';
}

.info-copy {
  margin: 0 0 8px;
  font-size: var(--jxl-text-body);
  line-height: 1.2;
}

.news-date {
  margin: 24px 0 10px;
  font-size: 20px;
  line-height: 1;
}

.news-date span {
  display: block;
}

.text-link {
  display: inline-block;
  font-size: 20px;
  line-height: 1.2;
  text-underline-offset: 4px;
  transition: background-color var(--jxl-motion-link);
}

.company-address {
  margin-top: 22px;
  font-style: normal;
}

.company-photos {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.form-field {
  display: block;
  margin-bottom: 24px;
}

.form-field label {
  display: block;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.2;
}

.form-field :is(input, textarea) {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 16px;
  border: 0;
  border-radius: var(--jxl-radius);
  color: var(--jxl-ink);
  background: var(--jxl-field);
  font-size: 20px;
  line-height: 1.2;
}

.form-field textarea {
  min-height: 320px;
  resize: vertical;
}

.form-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 48px 0 24px;
  font-size: 14px;
  line-height: 20px;
}

.form-consent input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--jxl-ink);
}

.form-submit {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 80px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  color: var(--jxl-paper);
  background: var(--jxl-ink);
  font-size: 20px;
  line-height: 1;
  letter-spacing: var(--jxl-tight);
  text-transform: uppercase;
  transition: opacity var(--jxl-motion-opacity);
  cursor: pointer;
}

.form-submit:disabled {
  /* Suggested approximation of the pale captured state. */
  opacity: 0.1;
  cursor: default;
}

.form-feedback {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--jxl-error);
  font-size: 14px;
  line-height: 1.2;
  transition: grid-template-rows var(--jxl-motion-feedback);
}

.form-feedback > div {
  min-height: 0;
  overflow: hidden;
}

.form-feedback.is-visible {
  grid-template-rows: 1fr;
}

.jxl-ribbon {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  width: var(--jxl-ribbon);
  height: 100dvh;
  overflow: hidden;
  border-left: 1px solid var(--jxl-ink);
  background: var(--jxl-paper);
}

.jxl-ribbon-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.jxl-ribbon-sequence {
  flex: none;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  white-space: nowrap;
  font-size: var(--jxl-text-ribbon);
  line-height: 23px;
  text-transform: uppercase;
}

.jxl-ribbon-label {
  color: var(--jxl-muted);
}

/* Optional: exactly two equal, sufficiently long sequence copies.
   Hide the duplicate from assistive technology.
   The 40-second timing is recommended, not measured. */
.jxl-ribbon.is-animated .jxl-ribbon-track {
  animation: jxl-ribbon-loop 40s linear infinite;
}

@keyframes jxl-ribbon-loop {
  to { transform: translateY(-50%); }
}

@media (hover: hover) {
  .text-link:hover {
    /* Recommended endpoint; source hover assignment was unverified. */
    background: var(--jxl-hover);
  }
}

/* Recommended breakpoint; only 390px and 1440px were inspected. */
@media (min-width: 960px) {
  :root {
    --jxl-text-project: 28px;
    --jxl-text-tag: 14px;
    --jxl-date-column: 50px;
    --jxl-section-bottom: 40px;
  }

  .jxl-header {
    width: var(--jxl-split);
  }

  .jxl-logo,
  .jxl-menu-button {
    top: 12px;
  }

  .jxl-layout {
    grid-template-columns:
      calc(var(--jxl-split) - 15px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 39px;
    height: 100dvh;
    padding: 0 15px 0 0;
    overflow: hidden;
  }

  .jxl-projects {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .jxl-information {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
  }

  .ledger-head {
    display: grid;
    grid-template-columns:
      var(--jxl-date-column) var(--jxl-image-column) minmax(0, 1fr);
    height: var(--jxl-open-desktop);
    font-size: var(--jxl-text-guide);
    line-height: 1;
    text-transform: uppercase;
  }

  .ledger-head > span {
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
  }

  .ledger-head > span + span {
    padding-left: 12px;
    border-left: 1px dashed var(--jxl-guide);
  }

  .jxl-projects > .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
  }

  .project-row {
    grid-template-columns:
      var(--jxl-date-column) var(--jxl-image-column) minmax(0, 1fr);
    grid-template-areas: 'date media info';
  }

  .project-media {
    padding: 12px;
  }

  .project-info {
    border-left: 1px dashed currentColor;
  }

  .project-title {
    margin-top: 20px;
  }

  .jxl-news::before {
    display: none;
  }

  .form-consent {
    font-size: 15px;
    line-height: 22px;
  }

  .form-feedback {
    font-size: 20px;
  }

  .jxl-ribbon {
    right: auto;
    left: var(--jxl-split);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jxl-ribbon.is-animated .jxl-ribbon-track {
    animation: none;
  }

  .jxl-header,
  .jxl-layout,
  .text-link,
  .form-submit,
  .form-feedback {
    transition: none;
  }
}
```

Menu state, filters, LOAD MORE, contact submission, clock updates, and any weather data require application logic. The CSS intentionally does not invent those behaviors. The illustrative desktop pane layout also needs browser testing with scrollbars and keyboard navigation before production use.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: var(--jxl-paper);
  --color-ink: var(--jxl-ink);
  --color-field: var(--jxl-field);
  --color-guide: var(--jxl-guide);
  --color-muted: var(--jxl-muted);
  --color-form-error: var(--jxl-error);

  --font-jxl: var(--jxl-font);

  --text-section: var(--jxl-text-section);
  --text-project: var(--jxl-text-project);
  --text-copy: var(--jxl-text-body);
  --text-date: var(--jxl-text-date);
  --text-guide: var(--jxl-text-guide);
  --text-tag: var(--jxl-text-tag);

  --spacing-inset: var(--jxl-inset);
  --spacing-ribbon: var(--jxl-ribbon);
  --spacing-control: var(--jxl-control);
  --spacing-header: var(--jxl-header);

  --radius-media: var(--jxl-radius);
  --radius-field: var(--jxl-radius);
}
```

## Sources & Evidence

- **Inspected original and final page:** [JXL Inc.](https://jxl.co.jp/). The supplied browser evidence reports HTTP 200 and the same original and final URL.
- **Capture date:** September 13, 2026 JST. Supplied retrieval timestamp: `2026-09-12T19:06:06.849Z`, equivalent to `2026-09-13 04:06:06.849 JST`.
- **Desktop evidence:** three current-site captures at 1440 × 1000, showing the initial project ledger, News, Company, header controls, and different ribbon positions and clock values.
- **Mobile evidence:** two current-site captures at 390 × 844, showing the opening News/Projects sequence and the lower contact form with persistent header controls and ribbon.
- **Rendered DOM and computed styles:** measurements for both viewports, including the declared font stack, text sizes, section dimensions, link destinations, source color variables, and selected transition definitions. These support the values explicitly labeled measured.
- **Original-page identity evidence:** the page title, Company description, and copyright text identify JXL Inc. The member entries establish staff roles only.
- **Observed behavior:** the ribbon visibly changes position across desktop captures, displayed seconds change, and the lower mobile capture shows persistent controls after scrolling. Other interaction results were not supplied.
- **Inspection limits:** no additional browsing or commands were used for this reference. Linked project pages, social profiles, map destinations, and the privacy page were not opened. Exact asset URLs, complete stylesheets, original breakpoints, menu appearance, hover endpoints, form behavior, and desktop scroll ownership remain unverified. SharedWorkers and service workers were disabled during the supplied inspection, so their behavior is outside this evidence.

This document describes the current homepage supported by the supplied captures and rendered-page evidence. Screenshot estimates, calculated relationships, and implementation recommendations are distinguished from measured original-page values throughout.