# FUJIBO Holdings — Style Reference

> Expansive gray space, tightly stacked extended lettering, documentary photography, and quiet red circles.

**Website:** [www.fujibo.co.jp](https://www.fujibo.co.jp/)
**Original URL:** https://www.fujibo.co.jp/
**Final URL:** https://www.fujibo.co.jp/
**Response:** HTTP 200; no redirect reported.
**Theme:** light gray content canvas, white lettering over imagery, and a near-black footer.
**Inspected:** October 2, 2026, 05:52 JST; supplied retrieval timestamp: October 1, 2026, 20:52:11.051 UTC.
**Viewports:** desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px.
**Scope:** the current Japanese corporate homepage. Visual evidence covers the desktop opening, Journal section, and footer, plus the mobile opening and footer. Rendered DOM measurements cover the intervening homepage sections. Linked pages and expanded navigation were not separately inspected.

FUJIBO presents a diversified manufacturing group through an editorial hierarchy: a full-height photographic opening, spacious company and business introductions, an asymmetric journal, investor and sustainability gateways, current announcements, and a substantial contact/footer sequence. This is a corporate information hub with several audiences and destinations.

The visual identity depends on a few repeated relationships. Extended English headings use very tight tracking and compressed line spacing, while Japanese explanatory text has generous leading. Photographs have square corners and sit directly on a pale gray canvas. Red appears sparingly in outlined categories, the large scroll circle, and a narrow desktop edge marker. The ending changes scale again: a sunset panorama carries an outlined contact circle above a dark navigation field with a subdued red glow.

## How to Read This Reference

- **Measured** means a value explicitly present in the supplied computed styles or element rectangles. Dimensions are CSS pixels and are rounded where readability benefits.
- **Derived** means arithmetic from those measurements, such as column gaps or the relationship between mobile sizes and a 414-unit baseline.
- **Visual estimate** means an appearance judged from the supplied current-page screenshots. Image ratios, ring strokes, and gradient strength are identified accordingly.
- **Recommended** means a choice for a new implementation. The CSS below is an adaptation, not recovered source code.
- **Source tokens** are identified explicitly. Other custom properties are descriptive implementation aliases.
- A DOM rectangle does not establish that an element was visibly painted. Both opening screenshots omit the innovation heading even though the measured DOM contains its text and layout box. The cause is unverified.
- The root element reports `Times`, but the body and content override it with sans-serif stacks. Browser-default serif is not the page’s observed typography.

## Tokens — Colors

### Default Palette

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Editorial Gray | `#ededed` | Measured HTML background, `rgb(237, 237, 237)` | Main page canvas and Journal background |
| Charcoal | `#272727` | Source `--black`; measured body color | Main headings, Japanese copy, ordinary links |
| FUJIBO Red | `#c1212b` | Source `--red`; measured category text | Category outlines/text and restrained accent treatment |
| Footer Black | `#0e0e0e` | Measured footer and lower-footer background | Dark closing navigation field |
| White | `#ffffff` | Measured navigation, hero, portal, and footer text | Reversed identity and text over dark or photographic areas |
| Metadata Gray | `#888888` | Measured Journal dates and navigation-panel policy text | Secondary metadata |
| Inactive White | `rgba(255,255,255,0.5)` | Measured desktop `EN` link | Secondary language option in the opening header |
| Inactive Charcoal | `rgba(39,39,39,0.5)` | Measured secondary-navigation `EN` link | Secondary language option in the DOM navigation structure |

### Palette Behavior

The body itself is transparent over the gray HTML canvas. Article entries do not need separate white card backgrounds: image boundaries, type scale, and spacing establish their grouping.

The blue opening frame, warm meeting-room wood, and orange sunset belong to imagery. They are not additional interface palette tokens.

The lower footer visibly develops a red glow toward the right and bottom. Its precise gradient syntax, stops, and opacity are absent from the evidence. A radial gradient using the measured red is a reasonable **recommended approximation**.

Several footer links and the copyright line compute to white locally but look much dimmer in the screenshots. Ancestor opacity or other compositing may explain this; those properties were not supplied. Do not treat the local color declaration as a measurement of final rendered contrast.

## Tokens — Typography

### Body and Japanese Copy

**Measured stack:** `YakuHanJP, aktiv-grotesk, 'A+EqpB-游ゴシック体 Pr6N M', sans-serif`.

The body uses weight `400`. Long explanatory paragraphs are spacious, particularly the company introduction at `20px / 44px` on desktop. Journal descriptions and portal copy use `16px / 28.8px`.

The body’s inherited `14px / 14px` is a utility baseline, not the paragraph rhythm. Copy components override it.

### Navigation and Japanese Headlines

**Measured stack:** `YakuHanJP, aktiv-grotesk, 'A+EqpB-游ゴシック体 Pr6N B', sans-serif`.

Navigation, article headings, and category labels use the named B face while reporting CSS weight `400`. Preserve the distinction between the family name and the numeric weight; changing every such element to `700` would not be a faithful transcription.

### English Display Headings

**Measured stack:** `YakuHanJP, aktiv-grotesk-extended, 'A+EqpB-游ゴシック体 Pr6N B', sans-serif`.

- Weight: `500`.
- Line height: consistently approximately `0.86`.
- Letter spacing: consistently `-0.06em`.
- Main roles: innovation statement, About Us, Our Business, FUJIBO Journal, Investors, Sustainability, and news headings.

The extended letterforms supply breadth while the negative tracking makes them compact. Preserve explicit line breaks in the three-line innovation statement and two-line business and Journal headings. Do not apply this compressed leading or tracking to Japanese prose.

These are measured CSS family declarations. The evidence does not independently establish which font file supplied every glyph. A fallback sans-serif will change widths and wrapping.

### Type Scale

Values below are measured. Paired numbers indicate font size / line height.

| Role | Desktop | Mobile | Tracking / notes |
| --- | --- | --- | --- |
| Main innovation H1 | `70 / 60.2px` | `41.449 / 35.646px` | `-0.06em`; DOM present, not visible in opening captures |
| Major section H2 | `68 / 58.48px` | `43.333 / 37.267px` | `-0.06em` |
| News section H2 | `54 / 46.44px` | `37.681 / 32.406px` | `-0.06em` |
| Investor / sustainability H2 | `48 / 41.28px` | `39.565 / 34.026px` | `-0.06em` |
| Footer innovation heading | `56 / 48.16px` | `35.797 / 30.786px` | `-0.06em` |
| Featured Journal headline | `34 / 47.6px` | `26.377 / 36.928px` | Normal tracking; `1.4` leading |
| Secondary Journal headline | `22 / 30.8px` | `20.725 / 29.014px` | Normal tracking; `1.4` leading |
| Company introduction | `20 / 44px` | `15.072 / 33.159px` | `2.2` leading |
| Journal description / portal copy | `16 / 28.8px` | `13.188 / 23.739px` | `1.8` leading |
| Header navigation | `14 / 14px` | Hidden in opening header | B family; weight `400` |
| Footer navigation | `15 / 18.75px` | `13.188 / 16.486px` | Compact text within generous row spacing |
| Hero subtitle | `13 / 19.5px` | `10.362 / 15.543px` | Regular body stack |
| Footer subtitle | `13 / 19.5px` | `9.420 / 14.130px` | Regular body stack |
| Featured category | `12 / 12px` | `11.304 / 11.304px` | Outlined pill |
| Secondary category | `10 / 10px` | `9.420 / 9.420px` | Smaller outlined pill |
| Journal date | `11 / 11px` | `10.362 / 10.362px` | `#888888` |
| Contact-circle label | `16 / 25.6px` | `10.362 / 16.580px` | Two centered lines |
| Footer copyright | `10 / 10px` | `7.536 / 7.536px` | Visually subdued; exceptionally small on mobile |

The very small mobile metadata and copyright sizes are observations, not accessibility recommendations.

## Tokens — Spacing & Shapes

### Source Variables and Scaling

The supplied custom properties contain:

```css
/* Reported source values, not a complete scaling formula */
--red: #c1212b;
--black: #272727;
--max-width: 10000;
/* Desktop snapshot */
--width: 1440;
/* Mobile snapshot */
--width: 414;
```

The unitless `--max-width: 10000` must not be interpreted as a verified 10000px content container. Its use was not supplied.

Many mobile values closely follow a **derived** scale of `390 / 414 ≈ 0.942029`:

- `30 × scale ≈ 28.26px`: common mobile side inset, measured as `28.25px` after layout rounding.
- `60 × scale ≈ 56.52px`: menu circle.
- `46 × scale ≈ 43.33px`: main section heading.
- `130 × scale ≈ 122.46px`: scroll circle.
- `170 × scale ≈ 160.14px`: contact circle.

This strongly supports a 414-based mobile sizing pattern, but the actual source formula and breakpoint were not provided. Desktop and mobile also use different design values: the desktop scroll circle is 230px, not merely a scaled mobile circle.

### Spacing Measurements

| Relationship | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Common content side inset | `160px` | `28.25px` | Measured |
| Header side inset | `60px` | `28.25px` | Measured |
| Main news content width | `1120px` | `333.5px` | Measured |
| Main header navigation gaps | Approximately `30px` between the first categories | Navigation hidden | Derived from link rectangles |
| About section top padding | `200px` | `103.623px` | Measured |
| Journal column gap | `150px` | Single column | Derived: left column ends at 520; feature begins at 670 |
| News column gap | `100px` | Sections separated vertically by about `47.1px` | Derived |
| Secondary Journal article gap | `122px` | `52.75px` | Derived from article rectangles |
| Category-to-date gap | `14px` | About `13.19px` | Derived |
| Large desktop section intervals | Often `180–200px` | Commonly about `92–96px` | Derived from recorded section boundaries |
| Footer navigation row pitch | `39.75px` | `34.375px` | Derived |

These relationships do not establish a universal 8px spacing system. The design uses substantial composition-specific offsets.

### Geometry

| Element | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Menu circle | `60 × 60px` | `56.516 × 56.516px` | Measured; radius `50%` |
| Hero scroll circle | `230 × 230px` | `122.453 × 122.453px` | Measured; radius `50%` |
| Contact circle | `300 × 300px` | `160.141 × 160.141px` | Measured; radius `50%` |
| Featured category pill | About `81.52 × 30px` | About `76.86 × 28.36px` | Measured; radius `500px` |
| Secondary culture pill | About `72.25 × 24px` | About `68.17 × 22.72px` | Measured; radius `500px` |
| Editorial images | Square corners | Square corners | Visually observed |
| Header separator | Fine translucent line | Not visible as a full-width rule | Visual observation; exact stroke not supplied |
| Large circle outlines | Approximately `2px` | Approximately `2px` | Visual estimate |

The hero scroll circle extends approximately 27px below the opening viewport at both sizes. It is deliberately cropped by the visible opening composition.

## Components

### Corporate Header

**Role:** identity, primary corporate navigation, language selection, and menu access.

At desktop, the header is a transparent `1440 × 120px` strip with `60px` horizontal padding. The logo link measures `120 × 26px` at `(60,49)`. Primary navigation begins around x=596 and includes `企業情報`, `事業内容`, `投資家情報`, `サステナビリティ`, and `採用情報`, followed by contact and language utilities.

The language selector uses 12px text. `JA` is white and `EN` is white at 50% alpha. The circular `MENU` control occupies `(1320,29)` with a 60px diameter. A fine white/translucent separator crosses the bottom of the desktop header.

On mobile, the header becomes an inset composition at `(28.25,28.25)` with a width of `333.5px`. The logo link is about `103.61px` wide; the menu circle sits at x=305.23. The full navigation and language row are absent from the visible opening header.

The mobile footer capture still shows the menu control near the upper-right corner, while the header logo is absent. This supports persistent menu access, but does not establish the exact positioning code or scroll-direction logic.

### Expanded Navigation — DOM Evidence Only

The rendered DOM contains a deeper navigation structure: company information and its subpages, four business divisions, investor resources, sustainability topics, recruitment destinations, Journal, news, contact, and policy links.

Desktop submenu entries report 13px text, while major entries report 16px. Mobile major entries report approximately 15.07px with substantial vertical padding. The mobile link inventory is shallower than the desktop inventory.

No expanded-menu screenshot or click result was supplied. Some menu-related rectangles have transformed-looking coordinates despite the menu being absent from the visible opening. Do not reconstruct an open-state layout, transform angle, backdrop, focus behavior, or closing animation from those rectangles alone.

### Full-Viewport Opening

**Role:** establishes scale and the innovation theme before the information sections.

The opening section measures exactly one captured viewport: `1440 × 1000px` on desktop and `390 × 844px` on mobile.

The current desktop frame has a pale blue, softly banded visual on the left half and a darker scene of hands holding a smartphone on the right. The dividing edge is approximately at x=720. The phone screen and defocused lights provide small areas of brightness within the dark half. The mobile frame shows the pale blue visual across the width. The evidence cannot distinguish cropping, alternate media, or a different sequence state.

The DOM contains the three-line H1 `THE / FOCUS ON / INNOVATION` and the subtitle `Leading the future with high value organic materials technology.` Its desktop H1 box begins at `(120,687.94)` and measures approximately `459.13 × 180.56px`. The mobile H1 box begins at `(28.25,638.66)` and measures approximately `297.88 × 106.92px`.

Neither opening capture visibly paints that heading or subtitle. Their existence and computed typography are verified; their reveal sequence and intended stable visibility are not. A new implementation should keep essential heading text available by default and progressively enhance any entrance effect.

### Oversized Scroll Circle

**Role:** links from the opening to the company introduction.

A large, unfilled red ring contains a very small downward arrow. Its anchor target is `/#about`. On desktop it sits at `(1089,797)`; on mobile it sits at `(239.30,748.55)`. The contrast between a large ring and tiny arrow is part of the composition.

The destination is verified from the href. Smooth scrolling, hover expansion, magnetic movement, and custom cursor behavior were not exercised. Give a recreated control an accessible name rather than relying on the arrow alone.

### About Us

**Role:** introduces the group’s history and business scope.

The desktop text column is `370px` wide at x=260. A small Japanese section label precedes the 68px English heading. The main Japanese paragraph uses six spacious lines at `20px / 44px`, followed by the `企業情報へ` link to `/corporate/`.

On mobile, the section aligns to the standard 28.25px gutter and uses a 333.5px column. The heading is 43.33px and the paragraph is 15.07px with 33.16px leading.

The mobile paragraph begins about 437px after the heading’s bottom. The supplied visual crops do not show what occupies this intervening region. Its existence is measured, but its imagery or decorative content should remain unspecified.

### Our Business Directory

**Role:** routes visitors to four business divisions.

The desktop directory occupies a `460px` column at x=670 within a wider section. The English title breaks into `Our` and `Business`. Four links pair an index `(01)` through `(04)`, a Japanese division name, and an English name:

- `研磨材事業` — Polishing Pad Business.
- `化学工業品事業` — Industrial Chemicals Business.
- `生活衣料事業` — Lifestyle Apparel Business.
- `化成品・金型事業` — Chemical Products and Mold Business.

Each desktop link is 141px high with 31px top padding. On mobile, the directory fills the 333.5px content width; rows become approximately 164.84px high with 24.49px top padding. The directory remains a sequence of large links rather than becoming compact category chips.

The section’s left-side desktop visual treatment is outside the supplied screenshot crops. Do not invent a particular factory image, diagram, or product rendering.

### FUJIBO Journal Composition

**Role:** gives corporate stories an editorial hierarchy.

This is the clearest asymmetric content arrangement in the supplied visual evidence. The desktop section starts at x=160 and extends to the right viewport edge. A 360px left rail holds the heading and two secondary articles. A 770px featured article starts at x=670, leaving a 150px gap between the columns.

The feature begins 112px below the section’s top. The first secondary article starts lower still, beneath the two-line heading. This stagger is intentional: the two columns do not share a uniform card baseline.

The feature’s photograph reaches the right edge, but its text is only 610px wide, ending at x=1280. Preserve this difference between image width and reading width. The first secondary image is approximately `360 × 240px`; the large image is approximately `770 × 513px`. These 3:2 proportions are supported by the screenshots and surrounding geometry, rather than supplied image-element measurements.

On mobile, all three stories use the same 333.5px column. Their order becomes heading, featured story, first secondary story, second secondary story, and archive link. The feature retains a larger headline and its descriptive paragraph.

### Journal Article Anatomy

Each story is a single destination link containing:

1. A square-cornered landscape photograph.
2. A metadata row with a red outlined category pill and gray date.
3. A Japanese headline.
4. A descriptive paragraph on the featured story only.

The featured desktop story links to `/topics/8605/`, carries `カルチャー`, and is dated `2025.10.27`. Its 34px headline wraps across three measured lines. The description uses 16px text with 1.8 leading.

Secondary stories link to `/topics/8199/` and `/topics/8016/`, with `カルチャー` and `働き方` labels. Their desktop headlines use 22px text. The photographs show a meeting discussion and two women talking in an office.

For the feature, the category row begins approximately 50px after the photograph; the headline begins 32px after the pill’s bottom. Secondary desktop stories use approximately 36px between image and metadata, then 20px between the metadata and headline.

There is no visible card fill, encompassing border, rounded image treatment, or drop shadow. The entire story should remain one clear link; the category pill is metadata, not a nested button.

### Outlined Category and Date

The feature pill uses `12px / 12px` text, padding `9px 12px 7px`, and a `500px` radius. The secondary pill uses `10px / 10px` text and padding `7px 12px 5px`. The total heights are consistent with a roughly 1px outline on each side; the outline is visible, while its border declaration was not included.

Dates use `#888888` and 11px text. They align beside the pills rather than sitting above the article as a separate heading. Use the same red for categories; do not assign a new color to each topic.

### Investor and Sustainability Gateways

**Role:** provides prominent entrances for two major stakeholder interests.

Desktop measurements show two adjacent `640 × 600px` links beginning at x=0 and x=640. The combined block ends at x=1280, leaving a 160px right-side margin. Each text column starts 100px inside its panel and is 370px wide.

Each link groups a Japanese label, a 48px English heading, and a 16px paragraph with white text. The supplied crops do not show the panel backgrounds, so their precise imagery must remain unspecified.

On mobile, the links stack vertically. Each measures approximately `361.75 × 395.66px`, reaching the left viewport edge while retaining the standard right margin. Text begins at x=28.25 and is 305.25px wide. This asymmetric bleed survives the change to one column.

### IR News and News Lists

**Role:** makes current investor disclosures and general announcements accessible without overpowering the editorial sections.

The desktop region uses two 510px columns separated by 100px, within the standard 1120px content width. Each has a Japanese label, a 54px English heading, five dated entries, and an archive link.

Each measured row is approximately 89–93px high and reserves 48px on the right. The entries combine a date, category, title, and sometimes a file-size suffix. Some links lead directly to external disclosure documents or site-hosted documents; preserve that distinction in link semantics.

On mobile, IR News precedes News in a single 333.5px column. Headings reduce to 37.68px; rows are approximately 85.72–90.03px high with 37.68px right padding. The two list sections are separated by about 47px.

The extraction does not expose row-border styling or the exact right-side icon. Do not claim a particular arrow or document icon as observed. A new implementation can add a restrained destination indicator with an accessible label.

### Related Brand Links

Three links follow the news lists: `B.V.D.ブランドサイト`, `ANGLEオンラインショップ`, and `ふくのわプロジェクト`.

Desktop links measure approximately `320.53 × 76px` and are arranged horizontally with about 65px between them. Mobile links stack at the full 333.5px content width, approximately 49.92px high, with roughly 10.36px gaps.

Treat these as outward routes from the corporate site. The supplied evidence does not establish a product grid, embedded shop, or commerce flow on this page.

### Contact Panorama

**Role:** closes the content with a broad brand statement and a direct contact destination.

The desktop contact band is 550px high. A sunset skyline fills the width, with dark building silhouettes along the lower edge. White innovation typography is placed at x=160. A 300px outlined circle at x=980 contains the two-line label `ご依頼やご相談の / お問い合わせ` and links to `/inquiry/`.

The circle is unfilled and visually integrated with the photograph. A much larger, faint circular arc also crosses the image as a decorative motif. Its exact diameter and implementation are not supplied.

On mobile, the full band is approximately 518.11px high. The heading begins at x=28.25, while the contact circle moves below and to the right at x=201.61. The final mobile screenshot crops the upper part of this band; the partial heading is a viewport crop, not evidence of an intentionally clipped heading component.

### Corporate Footer

**Role:** provides a compact sitemap and closes the brand sequence.

The lower desktop footer is a separate 550px field on `#0e0e0e`. Its content begins approximately 140px below the top. The logo sits at x=160; three navigation groups begin at x=670, 894, and 1118. Links cover corporate information, the four divisions, and Journal/news/contact. Policy links and copyright form a lower row.

The background develops a dark red glow at the lower-right. White text is strongest in the primary navigation, with policies and copyright visibly subdued. The logo remains an image mark, not ordinary italicized text.

The mobile footer is also approximately 518.11px high and uses two columns beginning at x=28.25 and x=194.98. The first row contains corporate and business links. The second contains Journal/news/contact on the left and policies on the right. The logo moves below the link groups, followed by copyright. This is a deliberate rearrangement rather than a compressed desktop footer.

## Tokens — Motion & Interaction

The evidence includes computed transition declarations, but no recorded click or hover sequence. Treat the following as available styling vocabulary, not verified behavior timelines.

| Element | Measured declaration | What it establishes |
| --- | --- | --- |
| Header | `transform 0.3s` | Header transform changes can transition; trigger and direction unknown |
| Desktop primary links | `height 0.3s, color 0.3s` | Height and color states exist in the styling |
| Language links / menu control | `color 0.3s` | Short color transitions |
| Mobile header logo | `opacity 0.3s, visibility 0.3s` | Styling supports changing logo visibility |
| Desktop business links | `opacity 0.3s` | Opacity transition declared; endpoint unverified |
| Several secondary-navigation items | `opacity 0.5s, transform 0.5s` | Potential entrance or state transitions in the menu structure |
| Hero subtitle | `opacity 0.2s cubic-bezier(0.32, 0, 0.67, 0)` | Exact opacity-transition timing is supplied |
| Desktop investor gateway | `border 0.3s` | A border transition is declared; changed border not observed |
| Desktop sustainability gateway | `opacity 0.3s` | An opacity transition is declared |
| Desktop footer links | `opacity 0.3s` | Short opacity changes are supported |

Many other elements report only `transition: all`, without a useful nonzero duration in the supplied record. That is not evidence of a visible animation. The sampled elements also report `animation: none`; this does not rule out media playback, pseudo-element animation, or JavaScript-driven motion elsewhere.

A narrow red marker appears at different vertical positions along the right desktop edge. Its DOM identity and whether it is a scrollbar or another indicator are unverified.

The current images provide no reliable timing for a hero media sequence. Autoplay, looping, sound, parallax, pointer-following circles, menu opening, keyboard operation, and reduced-motion behavior remain untested. For an adaptation, short 200–300ms color or opacity transitions fit the measured vocabulary; elaborate effects should be separate, explicitly designed additions.

## Surfaces

| Layer | Observed appearance | Design function |
| --- | --- | --- |
| Main canvas | Flat `#ededed` | Keeps the long information page calm and continuous |
| Editorial article | Same canvas as surrounding section | Hierarchy through scale, image, and spacing |
| Photographic opening | Full viewport; pale and dark image regions | Establishes visual scale before dense information |
| Category label | Transparent fill, red outline and text | Small editorial classification |
| Circular controls | Transparent centers and fine outlines | Navigation and contact without heavy button fills |
| Contact panorama | Darkened sunset image with white type | Brand statement and final contact route |
| Lower footer | Near-black field with visible red glow | Dense navigation and visual closure |

No general shadow-based elevation system is visible. Broad photographic fields, unboxed text, and a small number of circles do most of the structural work.

## Imagery

The supplied current imagery is photographic and grounded in ordinary environments. The opening contrasts a pale blue banded surface with a darker smartphone scene. Journal photographs show boardroom furniture, a meeting discussion, and an office conversation. The footer expands outward to a sunset city skyline.

The feature image is notably a largely empty meeting room, with black chairs and warm wood surfaces. This creates an institutional setting without relying on a posed portrait. The smaller office images introduce human interaction at a more intimate scale.

Use square corners, landscape framing, and strong differences in image scale. Journal photographs are approximately 3:2, with the feature more than twice the width of the secondary desktop images. The full-width opening and footer require separate crop decisions; they should not inherit the Journal ratio.

The panorama is visibly dark enough to support white type, but its exact overlay opacity is unknown. Preserve skyline silhouettes and cloud texture when choosing a crop. Do not convert the pale blue hero area into a flat UI color token or assume that it depicts a specific material process.

### Observed Asset References

No image, video, logo, or font-file URLs were supplied. The following URLs identify page context or link destinations, not asset files.

| Visual | Context / destination | Verified appearance |
| --- | --- | --- |
| White FUJIBO mark | `https://www.fujibo.co.jp/` | Header and footer logo |
| Opening visual | `https://www.fujibo.co.jp/` | Pale blue banded area; desktop smartphone scene |
| Featured Journal image | `https://www.fujibo.co.jp/topics/8605/` | Meeting-room table and black chairs |
| Secondary Journal image | `https://www.fujibo.co.jp/topics/8199/` | Participants at a meeting table |
| Secondary Journal image | `https://www.fujibo.co.jp/topics/8016/` | Two women conversing in an office |
| Contact background | Homepage contact band | Sunset clouds and city silhouettes |

Use approved original assets when available. The supplied screenshots do not justify invented media filenames or assumptions about asset formats.

## Layout & Responsive Behavior

### Measured Layout Comparison

| Region | Desktop: 1440 × 1000 | Mobile: 390 × 844 |
| --- | --- | --- |
| Document height | `7397.70px` | `7997.08px` |
| Opening section | `1440 × 1000px` | `390 × 844px` |
| Standard content | 1120px wide, x=160 | 333.5px wide, x=28.25 |
| Header | Full-width 120px strip | Inset logo and menu composition |
| About text | 370px wide, x=260 | 333.5px wide, x=28.25 |
| Business directory | 460px wide, x=670 | 333.5px wide, x=28.25 |
| Journal | 360px rail + 150px gap + 770px feature | One column; feature first |
| Journal feature copy | 610px wide | 333.5px wide |
| Investor / sustainability links | Two adjacent 640 × 600px panels | Two stacked 361.75 × 395.66px panels |
| News | Two 510px columns, 100px gap | Two sequential sections, each 333.5px wide |
| Related links | Three horizontal entries | Three stacked entries |
| Contact / footer navigation | 550px + 550px | 518.11px + 518.11px |
| Footer organization | Logo plus three navigation columns | Two link columns, then logo and copyright |

### Composition Rules

Desktop alignment is not governed by one universal centered container. The About text uses x=260; Journal and news use x=160; the business list and featured Journal share x=670; gateway panels bleed to the left; the featured Journal image bleeds to the right. Preserve these intentional shifts.

Mobile standardizes most text to a 28.25px gutter but retains selected asymmetry. The gateway panels still touch the left edge, and the contact circle remains right aligned. The Journal simplifies its layout while preserving editorial rank through larger feature type and its description.

Only two viewport sizes are evidenced. Tablet breakpoints, landscape behavior, maximum desktop scaling, safe-area treatment, and intermediate image crops are unknown. The Quick Start uses a **recommended** 64rem layout change and caps its mobile unit above 414px; those are adaptation choices.

## Do’s and Don’ts

### Do

- Use the measured gray, charcoal, red, and near-black as the core interface palette.
- Keep English display headings extended, tightly tracked, and vertically compressed.
- Give Japanese paragraphs generous leading and ordinary tracking.
- Preserve the Journal’s 360px/770px desktop hierarchy and narrower feature text width.
- Let major photographs meet selected viewport edges while text stays inset.
- Use square-cornered photography and unboxed editorial links.
- Keep category labels as small red outlined pills with adjacent gray dates.
- Repeat the outlined-circle motif at distinct scales: menu, scroll, and contact.
- Preserve separate IR and general-news destinations and document-link information.
- Rearrange the footer into two mobile columns with the logo below.
- Distinguish visible screenshot states from text and rectangles merely present in the DOM.

### Don't

- Don't turn this multi-audience corporate homepage into a single conversion funnel.
- Don't replace the Journal with equal-sized rounded cards.
- Don't apply the display heading’s negative tracking to Japanese body copy.
- Don't fill every circle or category pill with red.
- Don't replace the logo with styled text or infer missing image assets.
- Don't force every desktop region into the same centered width.
- Don't treat the absent opening headline as proof that the design intentionally has no headline.
- Don't invent a video loop, parallax system, menu animation, or hover endpoint.
- Don't infer a visible expanded menu from the extracted menu rectangles.
- Don't reproduce the very small copyright and metadata sizes without a readability review.

## Recommended Implementation Additions

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

- Use a real button for menu toggling, with an accessible name, `aria-expanded`, and a controlled navigation region. Add Escape handling and focus management if the menu is modal.
- Give the logo and arrow-only scroll link meaningful accessible names. Keep decorative rings out of the accessibility tree.
- Make the innovation heading visible without JavaScript. Entrance effects should not be a prerequisite for essential text.
- Preserve visible keyboard focus on all story, news, navigation, and circular links.
- If moving imagery is introduced, provide a static fallback and reduced-motion behavior. Do not assume sound is part of the design.
- Review small mobile dates, category labels, contact text, and copyright. Increase their size where needed while preserving their hierarchy.
- Reserve image space with aspect ratios to avoid layout shifts. Treat the opening and panorama as separate responsive crop problems.
- Distinguish document downloads from ordinary page links through accessible text, including file type and size where known.
- Verify contrast across every photographic crop and the footer glow; local computed white alone does not establish sufficient contrast.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#ededed`.
- Main text: `#272727`.
- Categories and restrained accents: `#c1212b`.
- Dates: `#888888`.
- Reversed text and logo: `#ffffff`.
- Footer base: `#0e0e0e`.
- Footer glow: visually observed dark red; exact gradient unmeasured.
- Primary action geometry: large transparent circles with fine outlines.

### Overall Prompt

“Create a Japanese corporate homepage for an industrial materials group using a pale gray `#ededed` canvas, charcoal `#272727` text, restrained red `#c1212b` accents, and a near-black footer. Use extended sans-serif English section headings at approximately 68px on desktop, weight 500, line-height 0.86, and letter-spacing -0.06em. Pair them with Japanese copy at normal tracking and generous leading. Build a full-viewport photographic opening with an inset logo, transparent navigation, circular menu control, and oversized outlined scroll circle. Arrange corporate stories as a 360px left rail and a 770px right feature separated by 150px at a 1440px viewport. Keep images square-cornered and articles unboxed. Follow with investor and sustainability gateways, separate IR and general-news lists, related-brand links, a sunset contact panorama with a large outlined circle, and a dark footer. On mobile, use approximately 28px gutters, place the featured story first, stack the gateway and news sections, and reorganize the footer into two columns. Treat motion as an optional enhancement and keep essential copy visible.”

### Example Component Prompts

1. **Journal feature:** “Create an unboxed corporate article link with a large 3:2 meeting-room photograph. Below it, place a red outlined category pill and an 11px gray date, followed by a 34px Japanese headline with 1.4 leading and a 16px description with 1.8 leading. At desktop, let the image reach the right edge while limiting the copy to 610px.”
2. **Business directory:** “Create four numbered corporate business links in a 460px desktop column. Pair each small parenthesized index with Japanese and English division names. Use 141px rows and generous top padding. On a 390px phone, use a 333.5px column and taller rows rather than compressing the names into chips.”
3. **Contact band:** “Create a 550px desktop panorama using a sunset skyline and white three-line innovation typography. Put a 300px transparent contact circle on the right with a fine pale outline and two centered lines of Japanese text. On mobile, place a roughly 160px circle below the heading, aligned right. Any darkening overlay is an implementation choice.”
4. **Footer:** “Create a near-black corporate footer with a subtle dark red glow at the lower-right, a white logo on the left, and three navigation groups on the right. Use 15px links with about 40px row pitch. On mobile, use two columns for navigation and policies, then place the logo and copyright below.”
5. **Motion enhancement:** “Use short opacity and color transitions around 300ms and respect reduced motion. Keep all primary content visible by default. Do not introduce a specific hero timeline, pointer-following effect, or menu transform without a separately defined interaction design.”

## Quick Start

### CSS Custom Properties

This CSS is a practical adaptation of the measured palette, typography, and composition. It is not the original stylesheet and has not been executed against the original page. Font files and approved photographs must be supplied separately.

The 64rem breakpoint, capped mobile unit, overlay strength, footer gradient, and hover endpoints are **recommendations**. The copyright minimum is intentionally larger than the measured mobile value. Essential text stays visible by default.

The Journal structure assumes `.journal__rail` contains `.journal__intro` and two `.story` links, while `.journal__feature` contains the featured `.story`. Each story contains an image and `.story__body`, with metadata, title, and optional description inside. On mobile, `display: contents` and ordering place the feature before the secondary stories without changing their internal anatomy.

```css
:root {
  --color-canvas: #ededed;
  --color-ink: #272727;
  --color-accent: #c1212b;
  --color-muted: #888888;
  --color-dark: #0e0e0e;
  --color-white: #ffffff;

  --font-body: YakuHanJP, aktiv-grotesk,
    'A+EqpB-游ゴシック体 Pr6N M', sans-serif;
  --font-ui: YakuHanJP, aktiv-grotesk,
    'A+EqpB-游ゴシック体 Pr6N B', sans-serif;
  --font-display: YakuHanJP, aktiv-grotesk-extended,
    'A+EqpB-游ゴシック体 Pr6N B', sans-serif;

  --u: 1px;
  --gutter: clamp(30px, 11.1111vw, 160px);
  --header-inset: clamp(30px, 4.1667vw, 60px);
  --section-space: 180px;
  --journal-gap: clamp(60px, 10.4167vw, 150px);

  --text-body: 14px;
  --text-hero: 70px;
  --text-section: 68px;
  --text-news: 54px;
  --text-feature: 34px;
  --text-story: 22px;
  --text-description: 16px;
  --text-contact: 56px;
  --text-date: 11px;

  --menu-size: 60px;
  --scroll-size: 230px;
  --contact-size: 300px;
  --motion-short: 300ms;
}

* { box-sizing: border-box; }
html { background: var(--color-canvas); }
body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.container {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1120px;
  margin-inline: auto;
}
.display-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.06em;
}
.section-title { font-size: var(--text-section); }
.section-kicker { margin: 0 0 30px; line-height: 1; }

/* Recommended positioning; source position rules were not supplied. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  padding-inline: var(--header-inset);
  color: var(--color-white);
  border-bottom: 1px solid rgb(255 255 255 / 25%);
}
.header-logo { width: 120px; flex-shrink: 0; }
.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--font-ui);
  line-height: 1;
}
.menu-trigger {
  display: grid;
  place-items: center;
  width: var(--menu-size);
  height: var(--menu-size);
  padding: 0;
  border: 2px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.hero__media,
.contact__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__copy {
  position: absolute;
  left: min(8.3333vw, 120px);
  bottom: 86px;
  z-index: 1;
  color: var(--color-white);
}
.hero__title { font-size: var(--text-hero); }
.hero__subtitle {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.circle-link {
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
}
.hero__scroll {
  position: absolute;
  right: calc(var(--gutter) - 39px);
  bottom: -27px;
  z-index: 2;
  width: var(--scroll-size);
  height: var(--scroll-size);
  color: var(--color-accent);
  border-color: rgb(193 33 43 / 55%);
}
.about-copy {
  max-width: 370px;
  font-size: 20px;
  line-height: 2.2;
}
.business-list { max-width: 460px; }
.business-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 24px;
  min-height: 141px;
  padding-top: 31px;
}

.journal {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--journal-gap);
  width: calc(100% - var(--gutter));
  margin: var(--section-space) 0 var(--section-space) var(--gutter);
}
.journal__rail .story { margin-top: 122px; }
.journal__feature { padding-top: 112px; }
.story { display: block; min-width: 0; }
.story img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
.journal__feature .story__body { padding-right: var(--gutter); }
.story__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 20px;
}
.journal__feature .story__meta { margin: 50px 0 32px; }
.category {
  display: inline-block;
  padding: 7px 12px 5px;
  border: 1px solid var(--color-accent);
  border-radius: 500px;
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1;
}
.journal__feature .category {
  padding: 9px 12px 7px;
  font-size: 12px;
}
.story__date {
  color: var(--color-muted);
  font-size: var(--text-date);
  line-height: 1;
}
.story__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-story);
  font-weight: 400;
  line-height: 1.4;
}
.journal__feature .story__title { font-size: var(--text-feature); }
.story__description {
  margin: 30px 0 0;
  font-size: var(--text-description);
  line-height: 1.8;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  margin-block: var(--section-space);
}
.news-title { font-size: var(--text-news); }
.news-list { margin: 60px 0 0; padding: 0; list-style: none; }
.news-row {
  display: flex;
  align-items: center;
  min-height: 89px;
  padding-right: 48px;
}
.brand-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 65px;
  margin-block: 130px 150px;
}
.brand-links a {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding-right: 40px;
  font-family: var(--font-ui);
  font-size: 16px;
}

.contact-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 550px;
  padding: 40px var(--gutter);
  color: var(--color-white);
  background: var(--color-dark);
}
.contact__media { z-index: -2; }
/* Approximate photo darkening; tune to the supplied image. */
.contact-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 35%);
}
.contact__title { font-size: var(--text-contact); }
.contact__subtitle {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.contact__link {
  width: var(--contact-size);
  height: var(--contact-size);
  flex-shrink: 0;
  border-color: rgb(255 255 255 / 45%);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}
.footer-body {
  min-height: 550px;
  padding: 140px var(--gutter) 100px;
  color: var(--color-white);
  /* Visual approximation, not a recovered source gradient. */
  background:
    radial-gradient(ellipse at right bottom,
      rgb(193 33 43 / 45%), transparent 60%),
    var(--color-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 162px));
  grid-template-areas:
    'brand corporate business utility'
    'copyright legal legal legal';
  column-gap: 62px;
  row-gap: 108px;
}
.footer-brand { grid-area: brand; width: 120px; }
.footer-corporate { grid-area: corporate; }
.footer-business { grid-area: business; }
.footer-utility { grid-area: utility; }
.footer-links {
  display: grid;
  align-content: start;
  gap: 21px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.25;
}
.footer-legal {
  grid-area: legal;
  display: flex;
  align-items: start;
  gap: 30px;
  font-size: 14px;
  opacity: 0.55;
}
.footer-copyright {
  grid-area: copyright;
  margin: 0;
  font-size: 10px;
  line-height: 1;
  opacity: 0.3;
}

/* Recommended breakpoint; only the endpoint layouts were measured. */
@media (max-width: 64rem) {
  :root {
    --u: min(1px, calc(100vw / 414));
    --gutter: calc(30 * var(--u));
    --section-space: calc(100 * var(--u));
    --text-body: calc(14 * var(--u));
    --text-hero: calc(44 * var(--u));
    --text-section: calc(46 * var(--u));
    --text-news: calc(40 * var(--u));
    --text-feature: calc(28 * var(--u));
    --text-story: calc(22 * var(--u));
    --text-description: calc(14 * var(--u));
    --text-contact: calc(38 * var(--u));
    --text-date: calc(11 * var(--u));
    --menu-size: calc(60 * var(--u));
    --scroll-size: calc(130 * var(--u));
    --contact-size: calc(170 * var(--u));
  }
  .site-header {
    inset: var(--gutter) var(--gutter) auto;
    height: calc(62 * var(--u));
    padding: 0;
    border: 0;
  }
  .header-logo { width: calc(110 * var(--u)); }
  .header-nav { display: none; }
  .menu-trigger {
    position: fixed;
    top: var(--gutter);
    right: var(--gutter);
  }
  .hero__copy {
    left: var(--gutter);
    bottom: calc(66 * var(--u));
  }
  .hero__subtitle {
    margin-top: calc(22 * var(--u));
    font-size: calc(11 * var(--u));
  }
  .hero__scroll { right: var(--gutter); }
  .about-copy { font-size: calc(16 * var(--u)); }
  .business-row {
    min-height: calc(175 * var(--u));
    padding-top: calc(26 * var(--u));
  }
  .journal {
    width: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .journal__rail { display: contents; }
  .journal__intro { order: 0; }
  .journal__feature { order: 1; padding-top: calc(51 * var(--u)); }
  .journal__rail .story { order: 2; margin-top: calc(56 * var(--u)); }
  .journal__feature .story__body { padding-right: 0; }
  .story__meta {
    gap: calc(14 * var(--u));
    margin: calc(20 * var(--u)) 0;
  }
  .journal__feature .story__meta {
    margin: calc(51 * var(--u)) 0 calc(24 * var(--u));
  }
  .category {
    padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u));
    font-size: calc(10 * var(--u));
  }
  .journal__feature .category {
    padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
    font-size: calc(12 * var(--u));
  }
  .story__description { margin-top: calc(21 * var(--u)); }
  .news-grid { grid-template-columns: 1fr; gap: calc(50 * var(--u)); }
  .news-list { margin-top: calc(39 * var(--u)); }
  .news-row {
    min-height: calc(91 * var(--u));
    padding-right: calc(40 * var(--u));
  }
  .brand-links { grid-template-columns: 1fr; gap: calc(11 * var(--u)); }
  .brand-links a {
    min-height: calc(53 * var(--u));
    font-size: var(--text-body);
  }
  .contact-band {
    display: block;
    min-height: calc(550 * var(--u));
    padding: calc(144 * var(--u)) var(--gutter) calc(80 * var(--u));
  }
  .contact__subtitle {
    margin-top: calc(20 * var(--u));
    font-size: calc(10 * var(--u));
  }
  .contact__link {
    margin: calc(23 * var(--u)) 0 0 auto;
    font-size: calc(11 * var(--u));
  }
  .footer-body {
    min-height: calc(550 * var(--u));
    padding: calc(82 * var(--u)) var(--gutter) calc(20 * var(--u));
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'corporate business'
      'utility legal'
      'brand brand'
      'copyright copyright';
    gap: 0;
  }
  .footer-links { gap: calc(19 * var(--u)); font-size: var(--text-body); }
  .footer-corporate,
  .footer-business { margin-bottom: calc(50 * var(--u)); }
  .footer-utility { margin-bottom: calc(60 * var(--u)); }
  .footer-legal {
    flex-direction: column;
    gap: calc(19 * var(--u));
    font-size: var(--text-body);
  }
  .footer-brand { width: calc(110 * var(--u)); }
  .footer-copyright {
    margin-top: calc(34 * var(--u));
    /* Recommended readability floor; source mobile size was 7.536px. */
    font-size: max(10px, calc(8 * var(--u)));
  }
}

/* Recommended interaction endpoints, not observed hover results. */
@media (hover: hover) {
  .business-row,
  .footer-links a { transition: opacity var(--motion-short); }
  .business-row:hover,
  .footer-links a:hover { opacity: 0.65; }
}
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .menu-trigger,
  .business-row,
  .footer-links a { transition: none; }
}
```

Supply explicit line breaks inside the innovation heading, meaningful alternative text for editorial photographs, and a concise accessible name for each circular control. The CSS does not implement a menu, media timeline, scroll animation, or state-dependent header colors. Those behaviors require separately specified markup and logic.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #ededed;
  --color-ink: #272727;
  --color-accent: #c1212b;
  --color-muted: #888888;
  --color-footer: #0e0e0e;

  --font-corporate: var(--font-body);
  --font-heading: var(--font-display);

  --text-hero: var(--text-hero);
  --text-section-heading: var(--text-section);
  --text-feature-heading: var(--text-feature);
  --text-story-heading: var(--text-story);

  --spacing-page-gutter: var(--gutter);
  --spacing-section-gap: var(--section-space);
  --radius-category: 500px;
}
```

For the hero utility, use a differently named alias if your build emits a self-referencing custom property; for example, rename the underlying implementation token to `--size-hero` and map `--text-hero: var(--size-hero)`. The framework mapping is optional; the plain CSS contains the core layout rules.

## Sources & Evidence

- **Inspected original and final page:** [FUJIBO Japanese homepage](https://www.fujibo.co.jp/). Both URLs are identical; the supplied report records HTTP 200.
- **Capture timestamp:** `2026-10-01T20:52:11.051Z`, equivalent to October 2, 2026, 05:52:11.051 JST.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; opening, Journal, and closing screenshots; rendered text, link destinations, custom properties, computed typography, transitions, and element rectangles. Measured document height: 7397.703125px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; opening and closing screenshots; corresponding rendered DOM and computed measurements. Measured document height: 7997.078125px.
- **Reported capture procedure:** at least five seconds of initial observation; document, image-decoding, finite-animation, and sampled-layout readiness checks within a 15-second overall limit, with a five-second pending-image limit. Intermediate scroll positions were traversed. Perpetual animations were temporarily paused during readiness checks and then resumed. SharedWorkers and service workers were disabled.
- **Interaction scope:** page loading and scrolling are evidenced. No supplied click, hover, keyboard, expanded-menu, language-switch, or destination-page test establishes those behaviors.
- **Visual limitations:** only selected homepage regions have screenshots. Several middle sections are described from DOM geometry and text alone. The initial H1 is present in the DOM but not visibly painted in the opening captures. Media source URLs, exact image crops at other sizes, font-file loading, gradient declarations, pseudo-element styling, and breakpoint rules were not supplied.
- **Analysis method:** this reference uses only the provided current-page captures and rendered evidence. No additional browsing, command execution, file access, or linked-page inspection was performed.

This reference describes the captured current homepage. Measured values, derived relationships, visual estimates, and implementation recommendations are kept distinct.