牛場潤一研究室｜慶應義塾大学理工学部

# Junichi Ushiba Laboratory — Style Reference

> A neuroscience research homepage organized around a looping brain drawing, quiet gray fields, and precise black typography.

**Website:** [brain.bio.keio.ac.jp](https://www.brain.bio.keio.ac.jp/)
**Original URL:** https://www.brain.bio.keio.ac.jp/
**Final URL:** https://www.brain.bio.keio.ac.jp/
**Theme:** light, with gray visual stages, black and white foreground treatments, and a white access/footer state.
**Inspected:** October 5, 2026, Japan Standard Time. The supplied evidence was retrieved on October 4, 2026 at 21:58:29.406 UTC, equivalent to October 5 at 06:58:29.406 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current institutional homepage: opening identity, Mission, Approach, Research, Team, News, Access, and Contact/footer. Visual evidence covers the desktop opening, Approach graphic, desktop ending, mobile opening, and mobile ending. Rendered DOM measurements cover the intervening sections. Linked detail pages and opened control states were not inspected.

Junichi Ushiba Laboratory presents its research through large visual stages rather than dense institutional navigation. An oversized white brain drawing dominates the opening gray field. The laboratory name sits at the upper left, a small English navigation row occupies the upper right, and the Japanese statement “脳を知り、脳を活かす” anchors the lower left. The scale difference between artwork and interface is essential: the drawing supplies expression, while the text and controls remain disciplined.

The rest of the homepage introduces the laboratory's mission, brain–machine interface research, interdisciplinary approach, team, and news before ending with practical location and contact information. Narrow text blocks, vertical English section labels, square outlined MORE links, and generous spacing unify these different content types. Mobile reorganizes the composition: the opening statement moves below the artwork, research labels form a triangular arrangement, news entries stack, and the map moves above the address.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed styles. Measurements describe the two inspected viewport states, not a verified responsive formula.
- **Derived** means a value is calculated from supplied bounds or box dimensions. For example, the MORE link border can be inferred from its outer width, child width, and padding.
- **Estimated** means a visual approximation from an original-page screenshot. Estimated colors were not sampled with a pixel tool.
- **Recommended** means guidance for a new implementation. Breakpoints, accessible enhancements, and the portable CSS below are recommendations unless explicitly identified as measured.
- **Token names** are implementation aliases. The observed source property `--bg-color` is identified separately.
- **Style declarations are not interaction tests.** A transition duration establishes a configured timing, but does not establish its trigger, starting state, or hover endpoint.
- Some sampled bounds reflect positioned or transformed content. Repeated section labels occupy the same viewport area, and certain text boxes do not follow their section's normal document position. Do not reproduce the page by copying every absolute coordinate.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Stage Gray | `#cbcacb` | `--color-stage` | Measured source `--bg-color`; computed background on the opening and narrative sections in the supplied DOM snapshot |
| Black Ink | `#000000` | `--color-ink` | Measured text color; navigation, hero statement, section rails, outlines, and footer content |
| White | `#ffffff` | `--color-paper` | Measured document/footer background and reversed section text; visibly used for the brain drawing and diagram linework |
| Captured Media Gray | Approximately `#c3c3c3` | Optional preview color only | Visual estimate of the opening artwork field; the rendered media field appears darker than the computed section gray |
| Transparent Surface | `transparent` | No separate color token needed | Measured backgrounds on links and text containers; allows the section field to remain continuous |

The palette has no verified brand accent beyond black, white, and gray. Map pins, roads, parks, and provider controls introduce color inside the embedded map. Those colors belong to the map and should not become sitewide button or heading colors.

### Color Behavior

The supplied initial DOM reports gray backgrounds for the main sections, including Access. The later Access screenshots visibly show a white field. Sections also declare `background-color 0.5s` transitions. Together, these support documenting both captured states, but do not establish the complete background-changing logic or its scroll thresholds.

Likewise, the opening gray seen in the image is not an exact visual match to `--bg-color`. An additional rendered layer may contribute to the appearance; its implementation was not provided. Keep the measured section token and the estimated media appearance separate.

No user-selectable theme system was evidenced. Generic CMS color, gradient, and shadow presets in the custom-property dump are not evidence that those treatments appear in the design.

## Tokens — Typography

### Japanese Text

**Measured family stack:**

```css
dnp-shuei-gothic-kin-std, "Yu Gothic", 游ゴシック, YuGothic,
游ゴシック体, "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
"ＭＳ Ｐゴシック", "MS PGothic", sans-serif
```

This is the computed family declaration. The evidence does not independently establish which font file supplied every rendered glyph. Use the first family only when it is available and appropriately licensed; retain the fallback stack.

Japanese headlines are bold, compact, and direct. Introductory paragraphs also use weight `700`, giving short research explanations a strong visual presence. The general body defaults remain regular.

### English Navigation and Labels

**Measured family stack:**

```css
"Helvetica Neue", Helvetica, nimbus-sans,
dnp-shuei-gothic-kin-std, sans-serif
```

English navigation is uppercase and regular weight. Section labels, diagram labels, MORE captions, and CONTACT are bold. Tracking supplies much of their character: approximately `0.1em` for navigation and CONTACT, with a fixed `2px` on the inner MORE caption.

The three-line laboratory wordmark is visible, but its own computed typography was not included. Its desktop text appears approximately 22px and bold; the mobile opening version appears approximately 11–12px. These are visual estimates.

### Type Scale

Values are computed font size / line height, except where marked estimated.

| Role | Desktop 1440px | Mobile 390px | Weight | Tracking or qualification |
| --- | --- | --- | --- | --- |
| Root | `15px / 17.25px` | Same | 400 | Source root, not a conventional 16px root |
| General body | `18px / 36px` | `14px / 24px` | 400 | Component text frequently overrides these values |
| Desktop navigation | `14px / 14px` | Hidden in the closed mobile view | 400 | Label child uses `1.4px` tracking |
| Mobile navigation DOM | Not applicable | `33.28px / 33.28px` | 400 | `3.328px` tracking; links are offscreen at `x = -99999`, not an observed open menu |
| Vertical section label | `24px / 24px` | `12.48px / 12.48px` | 700 | `1.8px` desktop; `1.4px` mobile |
| Hero statement | `50px / 50px` | `36.4px / 43.68px` | 700 | One line on desktop; two on mobile |
| Hero attribution line | `16px / 16px` | `10.4px / 10.4px` | 400 desktop; 700 mobile | Mobile value is unusually small |
| Mission heading | `41.5385px / 58.1538px` | `20.8px / 29.12px` | 700 | Smaller mobile treatment than other section headings |
| Approach, Research, Team heading | `41.5385px / 58.1538px` | `24.96px / 34.944px` | 700 | Approximately 1.4 line height |
| Narrative paragraph | `18px / 36px` | `12px / 21.6px` | 700 | Broad desktop leading; compact mobile copy |
| Research diagram label | `29.5385px / 41.3538px` | `16.64px / 23.296px` | 700 | `0.1em`; desktop rendered bounds indicate additional scaling |
| MORE inner caption | `18px / 18px` | `15.6px / 15.6px` | 700 | `2px` tracking at both sizes |
| News title | `16px / 28px` | `12px / 20px` | 700 | The title is inset inside the linked entry |
| Access address | `16px / 32px` | `12px / 20.5715px` | 700 | Institution heading is larger in the screenshots |
| CONTACT heading | `24px / 24px` | `20px / 20px` | 700 | `2.4px` and `2px` tracking |
| Contact link inner text | `16px / 16px` | `15px / 15px` | 700 | Separate from its wrapper's inherited size |
| Footer attribution/copyright | `14px / 14px` | `12px / 12px` | 400 | Japanese and Latin stacks respectively |

Use the child caption values when implementing MORE and Contact. Copying only the anchor's inherited font size or weight would produce the wrong result.

## Tokens — Spacing & Shapes

The design combines fixed utility dimensions with viewport-dependent text and illustration measurements. The supplied evidence does not expose a single universal spacing formula.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Hero text left inset | `40px` | `15.59375px` | Measured; mobile is approximately 4% of width |
| Narrative section block padding | `120px` | `60px` | Measured on Approach, Research, Team, and News |
| Intro heading-to-paragraph space | Approximately `40px` | Approximately `20px` | Derived from selected text bounds |
| Centered narrative paragraph width | `701.53px` | `291.19px` | Measured |
| Mobile narrative side margin | — | `49.41px` | Measured; deliberately wider than hero margins |
| Approach header-to-graphic space | `80px` | `30px` | Derived from wrapper bounds |
| News horizontal gap | `36.92px` | — | Derived from linked-entry bounds |
| News vertical gap | — | `20px` | Derived between mobile entries |
| News title horizontal inset | `20px` | `15.59px` | Derived from anchor and title bounds |
| Footer top/bottom padding | `60px` | `30px` | Measured |
| Gap from main end to footer start | `120px` | `60px` | Derived from document bounds |

### Border Radius and Rules

| Element | Treatment | Evidence |
| --- | --- | --- |
| MORE links | Square corners; approximately 4px desktop and 2px mobile outline | Radius `0` measured; outline width derived from box dimensions and supported visually |
| Narrative surfaces | Flat, unboxed fields | Original captures and transparent component backgrounds |
| Section label rail | Straight black vertical rule | Visible; approximately 3px desktop and 2px mobile |
| Footer separator | Fine full-width horizontal rule | Visible, approximately 1px |
| Contact link | Underlined horizontal action with arrow | Visible; underline approximately 2px |
| Back-to-top control | Circular outline | Measured radius `50%`; visible outline approximately 2px |

### Layout Measurements

| Element | Desktop | Mobile | Qualification |
| --- | --- | --- | --- |
| Document height | `8113.375px` | `5291.219px` | Measured for the captured states |
| Hero section | `1440 × 1000px` | `390 × 630.797px` | Measured section bounds |
| Hero artwork bounds | Approximately `780 × 670px` | Approximately `340 × 290px` | Screenshot estimates of the white brain drawing |
| Mobile opening media field | — | Approximately `390 × 468px` | Visible field before the statement begins |
| Approach graphic wrapper | `892.609 × 814.141px` | `335.391 × 305.75px` | Measured; proportions are effectively preserved |
| Team text width | `461.531px` | `291.188px` | Measured |
| News entry width | `332.297px` | `291.188px` | Measured |
| MORE link | `300 × 58px` | `156 × 40.375px` | Measured |
| Access map | Approximately `700 × 500px` | Approximately `390 × 280px` visible region | Screenshot estimates; iframe bounds were not included |
| Footer | `1440 × 285px` | `390 × 233px` | Measured |
| Back-to-top circle | `40 × 40px` | `41.594 × 41.594px` | Measured |

The desktop header's sampled wrapper is only 62px high, while the opening logo extends well below it. The mobile header wrapper reports zero height although visible controls occupy the top of the screen. These wrapper heights reflect positioned contents; they are not useful standalone header-height tokens.

## Components

### Persistent Header and Laboratory Identity

**Role:** keep the laboratory identity and seven main destinations available through the long homepage.

The opening desktop identity pairs a thin black brain mark with a three-line wordmark: JUNICHI / USHIBA / LABORATORY. The mark occupies roughly 130 × 110px near the upper-left corner. Navigation begins around `x = 765.55px`, with seven labels and approximately 20px gaps. A small crossed-pen institutional emblem sits at the far right.

Later desktop captures show only a compact brain mark, approximately 65px wide, while the navigation remains in the same upper area. This establishes large and compact identity states. A fixed header is consistent with the captures, but the exact positioning rule and state-change threshold were not supplied.

At 390px, the opening keeps the three-line wordmark and replaces the navigation row with a two-line hamburger icon. The ending shows a compact brain mark on a white strip approximately 67px high. The mobile links remain in the DOM but are positioned far offscreen in the closed state. Their open layout, background, and animation are unverified.

### Opening Hero

**Role:** communicate the laboratory's identity before presenting detailed research content.

The desktop hero fills the inspected 1000px viewport height. A continuous white brain drawing sits centrally, occupying approximately 54% of the screen width. Its uneven overlapping loops create an organic silhouette without fills, shading, or a surrounding frame. The Japanese statement begins at `(40, 866)` and the smaller institutional line begins around `(40, 942)`.

The statement is the only major text in the visual field. There is no prominent hero conversion button. A small muted-speaker symbol appears near the lower-right corner, indicating a media-related control. Its operation and the underlying media technology were not tested.

Mobile separates the artwork and statement. The gray media field ends around `y = 468px`; the heading begins at `y = 488px`, with a deliberate break after “脳を知り、”. The brain expands to approximately 87% of the viewport width. Keep the lower statement left aligned with a roughly 16px inset.

The measured mobile hero section ends at 630.8px, while a similar gray appearance continues into the following section. Do not interpret every visible color seam as a section boundary.

### Vertical Section Rail

**Role:** identify the current narrative section without adding a large horizontal heading above every stage.

A bold uppercase word runs vertically near the left edge, paired with a straight black rule. Desktop labels occupy a 24px-wide text box at `x = 40px`, centered around the viewport's vertical midpoint. Mobile labels are approximately 12.48px wide at `x = 14.55px`, centered around `y = 380px` in the recorded bounds.

The DOM includes MISSION, APPROACH, RESEARCH, TEAM, NEWS, and ACCESS at overlapping viewport positions. The screenshots show one relevant label at a time. An implementation should manage active visibility rather than rendering every rail simultaneously. The switching mechanism was not provided.

### Mission Visual Stage

**Role:** introduce the human purpose of the research.

The heading “人に寄り添うテクノロジーを創造する”, a short bold paragraph, and a MORE link use white foregrounds in the sampled state. The desktop section measures approximately 1938px high, substantially taller than a standard content block. Its text bounds sit within the viewport despite a later section origin, suggesting positioned presentation; the full motion mechanism is not established.

The beginning of this section is visible in the mobile opening capture. Small rectangular research images, including an electrode-covered head form and a cropped human subject, are distributed around dark dots. Only part of the composition is shown. Preserve the relationship between human imagery, instrumentation, and open space without inventing the unseen collage.

The mobile heading is `20.8px`, the paragraph is `12px / 21.6px`, and the text column is `291.19px` wide. This section uses a slightly smaller heading than the later mobile sections.

### Approach Diagram

**Role:** explain the laboratory's combinations of disciplines and practical applications.

A centered introduction leads to a large diagram and a centered MORE link. The visible graphic consists of three connected circular nodes arranged as a triangle. Its labels include “脳科学×AI”, “研究×成果活用”, and “サイエンス×アート”. White outlined illustrations sit inside the rings, including an assistive-device motif and a geometric network. Faint gray background motifs add scientific texture without becoming a second focal point.

The lower two circles in the desktop capture are approximately 355px in diameter. The entire measured graphic wrapper is `892.61 × 814.14px`; on mobile it becomes `335.39 × 305.75px`. The near-identical aspect ratio supports scaling the composition together rather than independently rearranging its individual labels.

The Approach capture shows substantial empty gray space below the outlined MORE link. Preserve this unhurried spacing instead of filling it with additional controls.

### Research Diagram and Introduction

**Role:** relate science, technology, and application design.

The rendered text identifies three groups: SCIENCE, TECHNOLOGY, and APPLICATION DESIGN. On desktop their measured centers lie across one horizontal row. On mobile SCIENCE sits above the other two groups, producing a triangular arrangement. APPLICATION DESIGN wraps onto two lines.

The heading, paragraph, labels, and MORE caption are white in the supplied computed state. Detailed artwork for this section is not visible in the supplied captures, so its exact node shapes, connectors, and textures cannot be specified. Reuse the measured label hierarchy and arrangement without assuming it duplicates the Approach illustration.

### Team Introduction

**Role:** introduce the laboratory's interdisciplinary perspective and provide a route to the team page.

On desktop a large visual area is paired with a right-side text block starting around `x = 830.77px`, with a width of `461.53px`. The heading “領域を越境し / 人間を学ぶ” occupies two lines. A bold paragraph and a left-aligned MORE link follow.

Mobile places the visual stage before the text. The measured visual wrapper is `390 × 291.19px`, followed by a centered `291.19px` text column. The MORE link is centered on mobile. The contents of the visual stage were not shown sufficiently to identify specific portraits or photography treatments.

### News Entry Grid

**Role:** show three recent linked updates and provide a route to the news archive.

Desktop links occupy three equal columns, each approximately `332.30px` wide, with `36.92px` gaps. Their left edges are approximately 184.63px, 553.84px, and 923.06px. Each entry includes a date and Japanese title; the three supplied dates are `2024.07.04`.

Titles use `16px / 28px`, weight `700`, and a 20px horizontal inset. The anchor bounds reserve substantial space above the title, but neither the precise media contents nor their asset URLs were supplied. Do not invent article thumbnails or a fixed crop ratio from these bounds alone.

Mobile uses one column with `291.19px`-wide entries and 20px vertical gaps. Title size decreases to `12px / 20px`, with approximately 15.6px insets. A centered MORE link ends the section. The sampled anchors are transparent and square; an elevated rounded-card treatment is not evidenced.

### MORE Link

**Role:** consistently lead from a homepage preview to its detail page.

The link is a wide, shallow rectangle with a strong outline, no rounding, and a centered uppercase caption. Desktop dimensions are `300 × 58px`; mobile dimensions are `156 × 40.375px`.

Desktop anatomy is consistent with a 4px border, 16px vertical padding, and an 18px-high caption. Mobile anatomy is consistent with a 2px border, 10.4px padding, and a 15.6px caption. The caption remains bold and uses 2px tracking.

Foreground color follows the surrounding section: black in the visible Approach and Access captures, white in sampled Mission and Research styles. The source declares a 0.5-second transition, but the hover colors and other endpoints were not supplied.

### Access Map and Address

**Role:** make the laboratory's physical location easy to understand after the research presentation.

The ending desktop capture uses a white background. Address information sits on the left at approximately `x = 185px`; a roughly 700 × 500px map occupies the right. The map has square edges and no decorative frame. Its provider labels, controls, and attribution remain visible.

The institution heading spans two bold lines. The address and campus name follow with more compact spacing, and a black outlined MORE link sits below them. The source identifies the laboratory at Keio University's Yagami Campus.

Mobile reverses the visual order: a full-width map appears first, followed by a narrower address block beginning around `x = 87px`. The MORE link remains centered at approximately `x = 117px`. This is a genuine ordering change, not just a two-column layout becoming narrower.

Map panning, zooming, opening external directions, and touch behavior were not exercised. Only the visible provider interface is established.

### Contact Footer

**Role:** provide a clear final contact route and institutional attribution.

A fine full-width rule separates the footer. CONTACT is centered in tracked bold Latin text, followed by the underlined Japanese link “お問い合わせはこちら” and a right-pointing arrow. The action is a text link, not another large boxed MORE button.

Desktop attribution and copyright share a centered horizontal line. Mobile presents the institutional emblem and affiliation at the lower left, with the copyright below. The footer's block padding changes from 60px to 30px.

A circular up-arrow link sits at the lower right. Its `href` points to the page's `#` target, supporting its return-to-top purpose. The exact scrolling animation was not tested.

## Tokens — Motion & Interaction

| Treatment | Supplied declaration or evidence | What can be concluded |
| --- | --- | --- |
| Ordinary links | `opacity 0.2s linear` | A short opacity transition is configured; hovered opacity was not supplied |
| MORE links | `transition: 0.5s` | A half-second transition is configured; properties and endpoints are not established by the shorthand alone |
| Section backgrounds | `background-color 0.5s` | Gray and white captured states have a configured color transition; full state logic is unknown |
| Narrative reveal movement | `transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1)` | Configured movement timing; displacement and trigger were not supplied |
| Narrative reveal opacity | `opacity 1s cubic-bezier(0.25, 0.25, 0.75, 0.75)` | Configured fade timing |
| Mobile Approach heading/body | Heading delay `0.2s`; paragraph delay `0.4s` | Staggered declarations are present |
| Mobile Team heading/body | Heading delay `0.2s`; paragraph delay `0.4s` | Same stagger pattern is present |
| Mobile Research body | Delay `0.2s` | A shorter local stagger is present |
| Back-to-top control | `0.2s cubic-bezier(0.25, 0.25, 0.75, 0.75)` | Control transition timing, not evidence of scroll duration |
| Header identity | Large opening state and compact later state | State change is visually supported; timing and threshold are unverified |
| Sound control | Muted-speaker symbol in opening captures | A media-related affordance is visible; playback and sound behavior are unverified |

The opening mobile logo appears stippled, while later compact captures show a continuous line mark. This could reflect an animated state or a separate presentation, but the evidence does not identify the technique. Do not specify particle simulation, SVG morphing, canvas, or video as an established implementation.

The inspection process waited for finite visible animations and sampled layout stability, and temporarily paused perpetual animations during readiness checks. This improves screenshot stability but does not document the entire animation sequence. The sampled elements reporting `animation: none` do not prove that the whole website is static.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Opening stage | Broad gray field with oversized white linework | Establishes identity and visual scale |
| Narrative stage | Gray computed surface with black or white foreground | Supports research explanation and diagram compositions |
| Artwork field | Continuous with the surrounding section | Avoids the appearance of isolated product cards |
| Access ending | White in the scrolled captures | Makes address and map information practical and legible |
| Footer | White with a thin black top rule | Separates the final contact and attribution area |
| Primary detail link | Transparent square rectangle with foreground-colored outline | Provides repeatable navigation without a bright accent |
| Embedded map | Provider-rendered cartography and controls | A functional external visual system inside the restrained page |

No general shadow-based elevation system is evidenced. The graphic circles belong to illustrations or a specific control; they do not imply rounded content cards throughout the site.

## Imagery

The central motif is a brain represented by overlapping continuous loops. Its white stroke is approximately 7–8px thick in the desktop hero and about 3px on mobile, based on visual estimates. The small header mark uses much finer black linework. Preserve this difference in scale rather than applying one stroke width to every instance.

Approach imagery uses white outline rings, simple technical illustrations, a node network, and restrained gray background patterns. The effect is scientific but approachable. It does not rely on glowing interfaces, saturated technology gradients, or decorative metallic rendering.

The visible beginning of Mission combines photography with research equipment and small dots. This establishes a human and experimental dimension, but the supplied images do not show the entire photographic sequence. News and Team media should remain unspecified where only wrapper measurements are available.

### Observed Asset References

No original image, video, SVG, or font-file URLs were included in the supplied evidence. The following are descriptive asset slots, not source filenames.

| Asset slot | Observed content | Implementation guidance |
| --- | --- | --- |
| Primary brain artwork | Large white looping brain silhouette | Preserve its silhouette and internal negative space; use an authorized asset or a separately created equivalent |
| Header brain mark | Fine black version of the laboratory motif | Maintain legibility at both opening and compact sizes |
| Institutional emblem | Crossed-pen mark in desktop header and mobile footer | Use the authorized identity asset rather than a generic substitute |
| Approach illustration | Connected circular nodes, technical motifs, and labels | Keep the diagram proportionate as one composition; provide an accessible text explanation |
| Mission imagery | Partially visible human and electrode-head imagery | Preserve uncrowded placement; do not invent the unseen full arrangement |
| Sound symbol | Small white muted-speaker icon | Supply an accessible control name and real state when implemented |
| Map | Keio Yagami Campus map with provider UI | Use a working embed or an accessible location link, retaining required attribution |

Use smooth antialiasing for the linework. Pixelated image rendering, halftone conversion, or artificial noise would introduce a visual language not established by these captures.

## Layout & Responsive Behavior

### Overall Page Rhythm

The homepage is a long document with section-specific compositions. It should not be implemented as a universal grid of equal-height feature cards.

| Section | Desktop measured height | Mobile measured height | Structural observation |
| --- | --- | --- | --- |
| Hero | `1000px` | `630.80px` | Desktop text overlays the stage; mobile text follows the media field |
| Mission | `1938.45px` | `624px` | Large desktop visual stage; compact mobile composition |
| Approach | `1442.28px` | `680.75px` | Intro, proportionate diagram, and detail link |
| Research | `960.44px` | `671.80px` | Horizontal desktop labels become a mobile triangle |
| Team | `941.53px` | `646.19px` | Desktop side text becomes text below the visual |
| News | `807.22px` | `1200.70px` | Three columns become three vertically stacked entries |
| Access | `618.45px` | `543.98px` | Desktop side-by-side information becomes map-first stacking |
| Footer | `285px` | `233px` | Centered desktop attribution becomes a mobile stack |

These are observed document allocations, not recommended fixed heights. Positioned content and reveal states can influence the relationship between section bounds and visible artwork. Let content determine height in a new implementation unless a specific visual stage requires a controlled minimum.

### Desktop

The 1440px layout uses different widths for different purposes: roughly 702px for narrative copy, 893px for the Approach graphic, and 1071px for the news grid. The left section rail stays outside these main columns. The opening has a much smaller 40px text inset, creating a deliberate difference between the hero and the centered explanatory sections.

Access changes to an asymmetrical two-column arrangement, and the footer returns to a centered composition. Preserve these shifts; placing every section in the same narrow container would flatten the page's rhythm.

### Mobile

At 390px, the hero uses approximately 4% side insets, while narrative text uses approximately 12.67% side margins. This produces a broad opening and a quieter, narrower reading column below it.

The Approach illustration expands to approximately 86% of screen width. News uses the same approximately 74.67%-wide column as narrative copy. Access deliberately breaks out to a full-width map, then contracts to a narrower address block.

The mobile body default is 14px, but narrative paragraphs and news titles are actually 12px in the supplied styles. Do not infer mobile readability from the body default alone.

### Responsive Limits

Only 1440px and 390px widths were inspected. The exact menu breakpoint, tablet compositions, landscape behavior, safe-area handling, and wider-screen caps are unknown. The CSS starter uses a recommended 900px breakpoint and bounded widths; it does not claim to reproduce source media queries.

The source property `--vh` is 10px on desktop and 8.44px on mobile, equal to one percent of each recorded viewport height. Its presence does not establish how every section uses it. In particular, the mobile hero is not a full 844px viewport tall.

## Do’s and Don’ts

### Do

- Let the brain drawing dominate the opening while navigation and controls remain compact.
- Use the measured gray `#cbcacb`, black, and white as the core interface palette.
- Distinguish the gray computed stage from the slightly darker rendered opening media field.
- Pair bold Japanese research statements with restrained, tracked English labels.
- Preserve separate widths for hero text, explanatory copy, diagrams, and news.
- Keep MORE links square, outlined, and proportionally wide.
- Show only the active vertical section label.
- Retain the mobile map-first order and the artwork-before-statement hero composition.
- Keep the diagram's linework clean and its negative space generous.
- Treat the supplied reveal timings as configured values while documenting unknown triggers and endpoints.

### Don’t

- Do not turn the institutional homepage into a single-purpose conversion page.
- Do not replace its varied compositions with identical rounded feature cards.
- Do not introduce bright technology accents based on map colors or unused CMS presets.
- Do not add shadows, glass blur, or glossy gradients to the flat graphic system.
- Do not use the offscreen mobile navigation measurements as proof of an observed open-menu design.
- Do not assume that every gray DOM background remains gray in later scroll states.
- Do not invent asset URLs, photography subjects, animation technology, or production credits.
- Do not stretch the brain drawing to fill a container or crop away its open-ended strokes.
- Do not copy the tiny mobile captions without considering readability in a new implementation.
- Do not treat old news dates as evidence that the current website is discontinued.

## Recommended Implementation Additions

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

- Give the menu, sound control, and return-to-top link explicit accessible names. Expose menu expansion and audio state programmatically.
- Keep the closed mobile menu out of keyboard navigation. If opened as a modal panel, provide focus management, Escape handling, and a clear close control.
- Use one meaningful page-level heading and a logical section hierarchy. The supplied DOM uses several section-label `h1` elements; the visual appearance does not require copying that structure.
- Give repeated MORE links contextual accessible names, such as a name that identifies the Research destination while retaining the visible MORE caption.
- Provide at least a 44px touch target around the approximately 40px mobile MORE and return controls. Keep the visible geometry where possible.
- Consider raising mobile narrative copy from 12px to at least 14px and the 10.4px institutional caption to a more readable size.
- Check contrast over every artwork state. White on a flat `#cbcacb` field is approximately 1.6:1 by calculation, so the captured reversed treatment needs a sufficiently dark local image area or a different text treatment for accessible reading.
- Keep content visible if reveal scripts fail, and provide a reduced-motion state with stable artwork and no delayed text entrance.
- Provide a text explanation for the research diagrams and meaningful alternatives for informative photographs.
- Give the map an accessible title and retain the postal address as selectable text. Preserve provider attribution and offer a clear external directions route where appropriate.

## Agent Prompt Guide

### Quick Color Reference

- Main stage: `#cbcacb`.
- Text, navigation, and black outlines: `#000000`.
- Hero and diagram linework: `#ffffff`.
- Scrolled Access and footer: white in the supplied captures.
- MORE treatment: transparent rectangle with a foreground-colored outline.
- Map colors remain local to the embedded map.
- No verified selectable themes or general accent color.

### Overall Prompt

“Create an institutional neuroscience research homepage inspired by Junichi Ushiba Laboratory. Use broad gray fields, black typography, white continuous-line brain artwork, bold Japanese statements, and compact tracked uppercase English navigation. At desktop, place a large brain drawing in a full-height opening stage, with a three-line laboratory identity at the upper left and the main statement at the lower left. Continue through distinct Mission, Approach, Research, Team, News, and Access sections using vertical section labels, narrow explanatory text, large scientific diagrams, and square outlined MORE links. On a 390px mobile layout, put the opening statement below the artwork, use a two-line menu icon, stack news, and place the full-width map above the address. End with a white Contact footer and a circular return-to-top control. Preserve the measured hierarchy; label any added interactions or accessibility changes as implementation choices.”

### Example Component Prompts

1. **Hero:** “A quiet gray research homepage opening with an oversized white brain drawn from overlapping loops. At 1440 × 1000, keep the artwork approximately 780 × 670px, the black Japanese statement at 50px near the lower-left 40px inset, and a compact navigation row at the top. At 390px, use a roughly 468px-high artwork field and place a two-line 36.4px statement below it.”
2. **Header:** “Create an opening identity with a thin brain mark and a bold three-line laboratory wordmark. Provide a compact mark-only state for later content. Use 14px uppercase Latin navigation with 1.4px tracking and approximately 20px gaps. Mobile shows a two-line hamburger; its opened behavior must be implemented accessibly as a separate state.”
3. **Approach:** “Place a centered research introduction above a triangular composition of three white outlined circular nodes. Use technical line illustrations, connecting strokes, and faint gray scientific patterns. Scale the entire graphic from approximately 893px wide on desktop to 335px at a 390px viewport. Finish with a centered square outlined MORE link.”
4. **News:** “Build three equal desktop news entries approximately 332px wide with 37px gaps. Use a date and bold Japanese title with 20px inner side spacing. At 390px, stack entries in a 291px column with 20px gaps. Leave media contents configurable because their exact imagery and crop ratios are not established.”
5. **Access and footer:** “On a white field, pair a compact bold address block with a large square-edged campus map. On mobile, move the full-width map above the narrower address. Separate the footer with a fine black rule, center CONTACT and an underlined arrow link, then place institutional attribution and a circular up-arrow control near the bottom.”

## Quick Start

### CSS Custom Properties

This is a portable approximation of the observed shell and component relationships. It uses a conventional 16px root with explicit pixel tokens. The 900px breakpoint, bounded container rules, and application class names are recommendations. Artwork, menu behavior, active-rail management, compact-header switching, media playback, and map configuration require separate implementation.

Expected structure: a `.lab-page` contains `.lab-header`, `.hero`, narrative `.lab-section` elements, `.access`, and `.lab-footer`. Place `.hero-media` before `.hero-copy`, and place the map before the address in the Access DOM; desktop grid areas handle its visual order. Add `.is-compact` and `.is-active` only through actual application state.

```css
:root {
  /* Measured palette and declared family names */
  --color-stage: #cbcacb;
  --color-paper: #ffffff;
  --color-ink: #000000;
  --font-jp: dnp-shuei-gothic-kin-std, "Yu Gothic", YuGothic,
    "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo,
    "MS PGothic", sans-serif;
  --font-latin: "Helvetica Neue", Helvetica, nimbus-sans,
    dnp-shuei-gothic-kin-std, sans-serif;

  --text-body: 18px;
  --text-heading: 41.5385px;
  --text-hero: 50px;
  --text-more: 18px;
  --frame-inset: 40px;
  --section-space: 120px;
  --copy-width: 701.54px;
  --wide-width: 1070.74px;
  --more-width: 300px;
  --more-border: 4px;
  --more-padding: 16px;
  --ease-reveal: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-opacity: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; }

.lab-page {
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-jp);
  font-size: var(--text-body);
  line-height: 2;
}

.lab-page a { color: inherit; }
.lab-page img { max-width: 100%; }

.lab-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 32px;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  text-decoration: none;
}

.brand-mark { width: 130px; height: auto; }
.brand-wordmark {
  padding-top: 10px;
  font: 700 22px/1.35 var(--font-latin);
  letter-spacing: 1.5px;
}

.header-tools,
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.desktop-nav { padding-top: 10px; }
.desktop-nav a {
  font: 400 14px/1 var(--font-latin);
  letter-spacing: 1.4px;
  text-decoration: none;
  transition: opacity 200ms linear;
}

.institution-mark { width: 34px; height: auto; }
.lab-header.is-compact .brand-mark { width: 65px; }
.lab-header.is-compact .brand-wordmark { display: none; }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: currentColor;
}
.menu-toggle::before { top: 12px; }
.menu-toggle::after { top: 22px; }

.hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-stage);
}

.hero-media { position: absolute; inset: 0; }
.hero-art {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 54.3%;
  height: 67.2%;
  transform: translateX(-50%);
  object-fit: contain;
}

.hero-copy {
  position: absolute;
  left: var(--frame-inset);
  bottom: 40px;
  right: var(--frame-inset);
}
.hero-title {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1;
}
.hero-subtitle {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1;
}
.mobile-break { display: none; }

.sound-control {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: white;
}

.lab-section {
  position: relative;
  padding-block: var(--section-space);
  background: var(--color-stage);
  transition: background-color 500ms;
}

.section-heading {
  margin: 0;
  text-align: center;
  font-size: var(--text-heading);
  font-weight: 700;
  line-height: 1.4;
}

.section-copy {
  width: min(var(--copy-width), calc(100% - 80px));
  margin: 40px auto 0;
  font-weight: 700;
  line-height: 2;
}

/* Use reversed text only over artwork with sufficient contrast. */
.section--reversed { color: var(--color-paper); }

.section-rail {
  display: none;
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding-left: 8px;
  border-left: 3px solid currentColor;
  font: 700 24px/1 var(--font-latin);
  letter-spacing: 1.8px;
}
.section-rail.is-active { display: block; }

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--more-width);
  max-width: 100%;
  margin: 60px auto 0;
  padding: var(--more-padding);
  border: var(--more-border) solid currentColor;
  border-radius: 0;
  background: transparent;
  font: 700 var(--text-more)/1 var(--font-latin);
  letter-spacing: 2px;
  text-decoration: none;
  transition: color 500ms, background-color 500ms;
}

.approach-art {
  display: block;
  width: min(892.61px, calc(100% - 80px));
  height: auto;
  margin: 80px auto 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36.92px;
  width: min(var(--wide-width), calc(100% - 80px));
  margin-inline: auto;
}
.news-entry {
  display: block;
  min-width: 0;
  text-decoration: none;
  transition: opacity 200ms linear;
}
.news-entry img { display: block; width: 100%; height: auto; }
.news-copy { padding: 20px; }
.news-title { margin: 0; font-size: 16px; line-height: 1.75; }

.access {
  padding-block: 120px;
  background: var(--color-paper);
}
.access-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "info map";
  align-items: center;
  gap: 92px;
  width: min(1094px, calc(100% - 80px));
  margin-inline: auto;
}
.access-info { grid-area: info; }
.access-heading { margin: 0; font-size: 24px; line-height: 2; }
.access-address {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: 2;
}
.access-info .more { margin: 50px 0 0; }
.access-map {
  grid-area: map;
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}

.lab-footer {
  position: relative;
  padding: 60px 40px;
  border-top: 1px solid;
  background: var(--color-paper);
  text-align: center;
}
.contact-heading {
  margin: 0;
  font: 700 24px/1 var(--font-latin);
  letter-spacing: 2.4px;
}
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-block: 14px;
  border-bottom: 2px solid;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.footer-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 60px;
  font-size: 14px;
  line-height: 1;
}
.footer-meta p { margin: 0; }
.copyright { font-family: var(--font-latin); }
.back-to-top {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 200ms var(--ease-opacity);
}

/* Preserve visible content until reveal scripting is ready. */
.reveal {
  transition: transform 600ms var(--ease-reveal),
    opacity 1000ms var(--ease-opacity);
}

/* Recommended keyboard focus treatment. */
.lab-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint; the source breakpoint is unknown. */
@media (max-width: 900px) {
  :root {
    --text-body: 14px;
    --text-heading: 24.96px;
    --text-hero: 36.4px;
    --text-more: 15.6px;
    --frame-inset: 4vw;
    --section-space: 60px;
    --copy-width: 74.6667vw;
    --more-width: 156px;
    --more-border: 2px;
    --more-padding: 10.4px;
  }

  .lab-page { line-height: 24px; }
  .lab-header { padding: 10px 4vw; }
  .brand { gap: 18px; }
  .brand-mark { width: 68px; }
  .brand-wordmark {
    padding-top: 6px;
    font-size: 11.5px;
    letter-spacing: 0.8px;
  }
  .desktop-nav,
  .header-tools > .institution-mark { display: none; }
  .menu-toggle { display: block; }
  .lab-header.is-compact { background: white; }
  .lab-header.is-compact .brand-mark { width: 35px; }

  .hero { min-height: 0; }
  .hero-media {
    position: relative;
    height: 120vw;
  }
  .hero-art {
    top: 20.9%;
    left: 7%;
    width: 86%;
    height: 62%;
    transform: none;
  }
  .hero-copy { position: static; padding: 20px 4vw; }
  .hero-title { line-height: 1.2; }
  .hero-subtitle {
    margin-top: 12px;
    font-size: 10.4px;
    font-weight: 700;
    line-height: 1.2;
  }
  .mobile-break { display: initial; }
  .sound-control { right: 10px; bottom: 10px; }

  .section-heading,
  .section-copy {
    width: var(--copy-width);
    margin-inline: auto;
  }
  .section-copy {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.8;
  }
  .mission .section-heading { font-size: 20.8px; }
  .section-rail {
    top: 45%;
    left: 10px;
    padding-left: 3px;
    border-left-width: 2px;
    font-size: 12.48px;
    letter-spacing: 1.4px;
  }
  .more { margin-top: 30px; }
  .approach-art { width: 86%; margin-top: 30px; }

  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    width: var(--copy-width);
    gap: 20px;
  }
  .news-copy { padding: 15.6px; }
  .news-title { font-size: 12px; line-height: 20px; }

  .access { padding-block: 60px; }
  .access-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 30px;
  }
  .access-map { height: 280px; }
  .access-info { width: min(300px, 55.2vw); }
  .access-heading { font-size: 18px; line-height: 1.7; }
  .access-address {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.7143;
  }
  .access-info .more { margin: 20px auto 0; }

  .lab-footer { padding: 30px 4vw; }
  .contact-heading { font-size: 20px; letter-spacing: 2px; }
  .contact-link { margin-top: 10px; font-size: 15px; }
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    font-size: 12px;
    text-align: left;
  }
  .back-to-top {
    right: 4vw;
    bottom: 4vw;
    width: 41.6px;
    height: 41.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-page *,
  .lab-page *::before,
  .lab-page *::after {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
```

The starter reproduces selected appearance tokens, not the exact animated document geometry. In particular, the original Mission stage, Team artwork composition, research illustration, and hidden menu need their own content and state logic. The menu icon must be rendered as a named button, and the sound button should appear only when connected to working media.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-lab-stage: var(--color-stage);
  --color-lab-paper: var(--color-paper);
  --color-lab-ink: var(--color-ink);
  --font-lab-jp: var(--font-jp);
  --font-lab-latin: var(--font-latin);
  --text-lab-body: var(--text-body);
  --text-lab-heading: var(--text-heading);
  --text-lab-hero: var(--text-hero);
  --text-lab-more: var(--text-more);
  --spacing-lab-section: var(--section-space);
  --spacing-lab-frame: var(--frame-inset);
  --spacing-lab-more: var(--more-width);
  --radius-lab-square: 0px;
}
```

## Sources & Evidence

- **Original and final website:** [Junichi Ushiba Laboratory](https://www.brain.bio.keio.ac.jp/). Both supplied URLs are identical, and the recorded HTTP status is 200. The rendered title, laboratory name, institutional affiliation, postal address, and copyright support the page identity.
- **Capture record:** evidence retrieved at `2026-10-04T21:58:29.406Z`, or October 5, 2026 at 06:58:29.406 JST. Individual image timestamps were not supplied separately.
- **Desktop evidence:** original-page captures at 1440 × 1000 showing the opening, an Approach diagram state, and Access/Contact; supplied rendered text, link destinations, element bounds, custom properties, and computed styles across the homepage.
- **Mobile evidence:** original-page captures at 390 × 844 showing the opening and Access/Contact; corresponding rendered text and computed measurements, including hidden navigation positions and stacked news bounds.
- **Linked destinations recorded, not visited:** `/mission/`, `/approach/`, `/research/`, `/team/`, `/news/`, `/access/`, and `/contact/`. The Mission MORE link uses `/mission` without the trailing slash. Their presence establishes navigation destinations, not the design of those pages.
- **Interaction limits:** scrolling supplied later viewport states, but no opened hamburger menu, tested hover endpoint, audio toggle result, map interaction, or measured return-to-top animation was provided. Font-file resolution and original media asset URLs were not included.
- **Readiness limits:** the collection process waited for document load, finite animations, sampled stability, and visible-image decoding under time limits. Perpetual animations were paused during checks and resumed. Delayed content, complete media sequences, and unexercised states remain unverified.

This reference describes the supplied current homepage evidence. All estimated geometry, unresolved state behavior, and recommended implementation choices are identified separately from measured values.