# ECD / Earth Centric Design Lab — Style Reference

> An electric-blue identity sheet with hairline grids, tiny editorial annotations, and full-color project imagery.

**Original URL:** [https://ecdtokyo.jp/](https://ecdtokyo.jp/)
**Final URL:** [https://ecdtokyo.jp/](https://ecdtokyo.jp/)
**Response:** HTTP 200; no redirect recorded.
**Theme:** alternating saturated blue and white sections; no selectable theme was demonstrated.
**Inspected:** September 17, 2026, Japan Standard Time. The supplied retrieval timestamp is September 16, 2026, at 19:40:57.575 UTC, equivalent to September 17 at 04:40:57.575 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels.
**Scope:** the current corporate and portfolio homepage: opening identity, mission, news, six featured projects, contact area, and footer. Visual evidence consists of desktop opening, news/work transition, and footer captures, plus mobile opening and work/footer captures. Rendered DOM measurements cover the intervening sections. Destination pages and menu interactions were not inspected.

ECD organizes its homepage around a strong two-color identity. Saturated blue is both a large background field and the text color on white sections. The opening centers a compact but distinctive ECD identity within a large amount of empty space. Tiny monospaced copy, crosshair marks, and lightly drawn table borders give that space a deliberate, technical character.

The page then alternates between institutional statements and evidence of work. White sections accommodate the mission and project imagery; blue sections hold the opening, news, and closing contact structure. The project photographs and architectural visualization introduce natural color without changing the interface palette. Pill-shaped action links provide the main curved UI geometry within an otherwise square, ruled composition.

This is a long corporate homepage with a portfolio, editorial updates, and links to company sections. Its structure should remain useful for browsing an organization and its work.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed styles. Dimensions are CSS pixels, usually rounded to two decimal places here.
- **Visually observed** descriptions come from the five supplied current-page screenshots. Screenshot estimates are labeled where exact styles were not included.
- **Calculated** values are arithmetic derived from measured rectangles, such as column gaps and section proportions.
- **Recommended** values are implementation choices for a new version. They are not claims about the original stylesheet.
- All custom-property names in this document are implementation aliases. The supplied custom-property collection was empty.
- A computed font-family stack identifies the declared families, not the exact font file used for every glyph. Font downloads and font-file metadata were not supplied.
- Some elements have DOM rectangles without appearing in the screenshots. Their existence does not prove that they were visible, interactive, or occupying normal document flow in the captured state.
- Only two viewport sizes were measured. Intermediate breakpoints, landscape behavior, and the original responsive formulas remain unknown.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| ECD Blue | `#001DD1` / `rgb(0, 29, 209)` | `--ecd-blue` | Measured on the opening, news, and footer backgrounds; also the body text and controls on white sections |
| White | `#FFFFFF` | `--ecd-white` | Measured on the mission/work backgrounds and text on blue sections |
| Quiet white rule | Approximately white at 25–35% opacity | `--rule-on-blue` | Visual estimate for the thin table and row dividers on blue; use 30% as a starting recommendation |
| Action outline | Current foreground color | `--action-stroke` | Visually white on blue and blue on white; exact border declaration was not included |
| Project colors | Asset-dependent | No shared UI token | Natural and artwork-specific colors within the work images |

Use the measured blue for implementation rather than sampling a scaled screenshot. The DOM provides a precise color even when image display or compression changes its apparent intensity.

The palette has no demonstrated secondary accent color. The outlined contact link remains white on blue, while `OUR SERVICE` and `OUR WORK` remain blue on white. A new green sustainability accent would change the observed visual system.

### Color Relationships

- Blue sections: blue background, white copy, white identity artwork, and subdued white rules.
- White sections: white background, blue copy, blue labels, and blue outlined actions.
- Images: retain their original colors. There is no evidence of a universal blue filter across the work portfolio.
- Surface changes occur as clear horizontal section boundaries. No gradient transition or texture was visible.

## Tokens — Typography

### Utility and Editorial Microcopy

**Measured stack:** `'Courier Prime', monospace`.

This stack appears on the copyright line, opening descriptions, compact navigation, the small statements beside or below major content, and the desktop footer manifesto. Most of this material uses 12px type with a very tight 12px line height. Negative tracking makes the microcopy feel compact and typeset rather than like a code editor.

The small annotations are an essential counterweight to the large logo and display graphics. Preserve the scale contrast, but treat legibility improvements as deliberate changes when adapting the design.

### English Headings, Project Titles, and Actions

**Measured stack:** `'Helvetica Neue', Helvetica, Arial, sans-serif`.

Weight 500 is used for the news heading, mission label, project titles, navigation in the separate header structure, and outlined action links. Dates and address text use weight 400.

This is a restrained sans-serif system. The logo lettering is artwork and should not be recreated by typing E, C, and D in the interface font.

### Japanese Body Copy

**Measured stack:** `'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', ヒラギノ角ゴシック, Meiryo, sans-serif`.

The mission paragraph is notably stronger than the surrounding annotations: weight 600, increased tracking, and generous leading. News text and client names use regular weight.

### Type Scale

Values below describe sampled text elements. Minor mobile fractions are retained where useful; they do not establish a particular scaling formula.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Copyright line | 12 / 12px | 12.012 / 12.012px | 400 | Approximately −0.24px |
| Opening business description | 12 / 12px | 10.023 / 10.023px | 400 | −0.24px |
| Opening and footer utility navigation | 12 / 12px | 12.012 / 12.012px | 400 | −0.24px |
| Small statement below news | 12 / 13.8px | 12.012 / 13.814px | 400 | Approximately −0.48px |
| Mission label | 29.952 / 34.445px | 20.007 / 23.008px | 500 | −0.6px |
| Japanese mission paragraph | 18 / 30.6px | 14.001 / 21.842px | 600 | 0.9px desktop; 0.700px mobile |
| NEWS heading | 48 / 55.2px | 24.024 / 27.628px | 500 | Normal |
| News date | 10 / 11.5px | 10.023 / 11.527px | 400 | Normal |
| News title | 13 / 18.2px | 12.012 / 18.018px | 400 | 0.65px desktop; 0.601px mobile |
| Project title | 18 / 27px | 18.018 / 27.027px | 500 | −0.64px |
| Project client | 12 / 18px | 12.012 / 18.018px | 400 | −0.64px |
| Standard outlined action | 16 / 16px | 16.029 / 16.029px | 500 | Normal |
| CONTACT US | 28 / 28px | 28.002 / 28.002px | 500 | Normal |
| Footer address | 10 / 13px | 10.023 / 13.030px | 400 | Normal |
| Desktop footer manifesto | 12 / 12px | Not visible in the mobile capture | 400 | −0.48px |

### Display Artwork and Measurement Limits

The desktop work section contains a very large `WORK` word beside a tiny outlined label. Its sampled H2 wrapper reports a 16px font size and a 108px height. Those values do not describe the large visible letters themselves; an unsampled descendant or graphic treatment may provide them.

Visually, approximately 120px sans-serif type with a tight line box is a reasonable desktop approximation for a new implementation. This is an estimate, not a verified source font size. The mobile H2 wrapper is 43.22px high, but its exact display artwork is outside the supplied mobile screenshots.

The mission section also contains a large empty-text graphic rectangle. Its dimensions are measurable, but its internal artwork and typography are not established by the available screenshots. Do not interpret its inherited 16px font size as the graphic's display scale.

## Tokens — Spacing & Shapes

**Overall density:** extremely spacious identity areas with compact text and navigation at their edges.

**Geometry:** square sections, rectangular images, thin rules, and fully rounded action links. No general rounded-card or shadow system is visible.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main horizontal inset | 20.02px | 10.02px | Measured from section content rectangles |
| Opening rail inset | About 20px | About 10px | Screenshot estimate |
| Inner rail/footer text inset | About 15–16px | About 12–13px | Measured text positions combined with visible cell edges |
| Work column gap | 19.59px | No column gap | Calculated from linked-image rectangles |
| Image-to-title gap | 9.94px | 13.02px | Calculated from adjacent rectangles |
| Work caption horizontal inset | 12.42px within each card | 10.02px from viewport edge | Calculated |
| Gap after client line before next work row | 27px | 32.02px | Calculated |
| Standard pill padding | 12px 24px | 12.012px 24.024px | Measured |
| Standard pill icon gap | 5.92px | 6.006px | Measured |
| Work section bottom padding | 74.88px | 80.03px | Measured |
| News section vertical padding | 63.36px top; 40.31px bottom | About 60.02px on both sides | Measured |

### Border Radius and Rules

| Element | Value | Status |
| --- | --- | --- |
| Standard action links | `1000px` radius | Measured |
| Footer contact link | `1000px` radius | Measured |
| Project images | Square corners | Visible in captures |
| Framed navigation and footer | Square corners | Visible in captures |
| Table dividers | Approximately 1px | Visual estimate; border properties were not supplied |
| Crosshair marks | Approximately 20px across desktop; 14px mobile | Visual estimate |

### Key Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Total document height | 5504.31px | 4958.20px |
| Opening section | 1440 × 1000px | 390 × 844px |
| Logo H1 box | x 545.05, y 265.17; 349.91 × 340.91px | x 100, y 279.30; 190 × 192.03px |
| Opening rail | Approximately x 20, y 838; 1400 × 140px | Approximately x 10, y 710; 370 × 124px |
| Mission section height | 1064.91px | 709.69px |
| News section height | 540.81px | 727.66px |
| Work section height | 1898.59px | 2164.84px |
| Work linked-image region | 690.17 × 404.64px | 390 × 219.02px |
| Contact action | 297.91 × 87.91px | 298.03 × 88.02px |
| Footer section height | 1000px | 512.02px |

The logo rectangles are layout boxes, not confirmed intrinsic asset dimensions. The linked-image rectangles are anchor bounds, not confirmed image-file aspect ratios.

## Components

### Opening Identity Field

**Role:** establish the company identity before introducing its work and institutional content.

A solid blue section fills exactly one viewport at both measured sizes. A copyright line sits near the top center, with crosshair marks near the upper corners. There is no conventional large headline or paragraph beside the central identity.

The logo box is centered horizontally. Its vertical center is approximately 43.56% of the desktop opening height and 44.47% of the mobile opening height. This leaves room for the information rail below while retaining a large empty blue field around the mark.

The white identity combines oversized E, C, and D forms, vertical Japanese naming, a stacked English wordmark, and a globe motif. Use the authorized identity artwork as a coordinated composition; generic text and an unrelated globe icon would lose its specific geometry.

The mobile hero and both footer captures show a white wireframe globe with a simple face. The desktop hero instead shows a blue circular area interrupting the letters at the corresponding location. The supplied evidence does not establish why these states differ. It is not sufficient to specify a rotating globe, an animation duration, or a scroll-driven effect.

### Opening Information Rail

**Role:** place the organization's short statement, navigation, and scroll cue at the bottom of the opening.

On desktop, a thin rectangular frame contains three main columns:

1. A business description in a roughly 480px-wide left cell.
2. A question about creativity and the planet in a roughly 599px-wide middle cell, with `SCROLL` near its bottom.
3. Five stacked navigation rows in a roughly 321px-wide right cell.

The visible labels are `ABOUT`, `MEMBERS`, `WORK`, `SERVICE`, and `OFFICE`. The links lead to separate company pages, not demonstrated anchors within the homepage.

On mobile, the rail becomes two columns, approximately 230px and 140px wide. The left cell contains the shorter business description and the scroll cue; the five navigation rows remain on the right. The desktop question is no longer visible in this opening rail.

The compact navigation has approximately 28px row spacing on desktop and 24–25px on mobile. Text is aligned near the left edge of each cell, not centered. Keep the rule system continuous across the frame.

`SCROLL` is visibly present, but its click behavior was not supplied. Treat it as a demonstrated cue rather than a verified button.

### Separate Header and Mobile Navigation Structure

**Role supported by DOM:** provide additional global navigation.

The desktop DOM includes a 104px-high header with 20px Helvetica Neue-based navigation and a note link. The mobile DOM includes a 62 × 62px button and a navigation structure containing `TOP`, the five company sections, contact, address, and note access. Its menu links report approximately 36px type and 65px-high rectangles.

These structures are not visibly presented as an open menu or persistent conventional header in the supplied screenshots. Their visibility conditions, stacking, scroll trigger, and open/close behavior were not exercised.

Do not add a permanent 104px header above the opening based only on the DOM rectangle. Do not assume that the corner crosshair is the menu trigger. A faithful implementation needs separate interaction evidence before reproducing these behaviors.

### Mission Section

**Role:** explain the organization's purpose and lead to its service offering.

The mission occupies a white section immediately after the opening. The DOM records a large graphic region measuring approximately 1324.91 × 651.95px on desktop and 378.02 × 302.20px on mobile. Its artwork is not sufficiently visible in the supplied captures to specify its internal arrangement.

The text hierarchy beneath that region is established:

- `MISSION` uses medium-weight sans-serif type.
- The Japanese paragraph uses weight 600, positive tracking, and open leading.
- `OUR SERVICE` appears as an outlined blue pill with a right arrow.

Desktop copy occupies a 535.92px-wide block near the right edge, starting around x 884.05. The mission label and action align toward the right side of this composition. On mobile, the label and paragraph begin at the 10px page inset, while the action remains right aligned.

The service link measures approximately 174.63 × 48px on desktop and remains essentially the same size on mobile. It links to `/service/`.

### News Section

**Role:** present company updates without turning them into separate cards.

The blue news section uses a white `NEWS` heading and a table-like list with fine horizontal dividers. On desktop, the list begins around x 500, leaving a substantial left zone empty beneath the section heading. Dates start in the list's first column, titles around x 620, and `READ MORE` sits at the far right when present.

Three entries were recorded: a website renewal notice, a production-service announcement, and an office-party announcement. The first entry is presented without the same linked `READ MORE` treatment as the latter two. Preserve that distinction instead of automatically adding a button to every row.

Mobile changes the row anatomy from a horizontal sequence to a block: date above title, with the reading action following where applicable. Dates remain around 10px; title text becomes approximately 12px with 18px leading. The section grows from 540.81px on desktop to 727.66px on mobile as content wraps.

A right-aligned note action follows the list, paired with the source label `ECDの活動を知る`. A small English statement sits lower and toward the left. The note action is approximately 124 × 49px and uses the same outlined pill language.

### Work Section Heading

**Role:** announce the portfolio and reset the page to white.

The desktop section opens with corner crosshair marks and generous top spacing. A small outlined `WORK` tag sits near the left edge, while a much larger blue `WORK` word begins farther right. A narrow monospaced business statement is aligned to the far right and broken into short lines.

The heading group spans the content width. Its large type is not a substitute for the small label: both scales contribute to the composition.

The mobile DOM records a shorter heading wrapper and a 10px utility statement near it. The exact visual positioning of that heading is not included in the mobile screenshots, so the Quick Start uses a recommended readable arrangement rather than claiming a precise reconstruction.

### Project Preview

**Role:** make each featured project primarily an image-led entry into a case study.

The desktop portfolio has two columns and three rows. Each project consists of:

1. A large rectangular linked image.
2. A small blue square arrow tab at the image's lower-right corner.
3. A blue project title below the image.
4. A smaller blue client label beneath the title.

Images have square corners and no visible card surround. Titles and client names sit on the white section surface. The sampled DOM identifies the image-region links; it does not establish that the entire text-and-image card is clickable.

The first two measured image regions are 690.17px wide with a 19.59px gutter. On mobile, every image spans the full 390px viewport, while titles and client names return to 10px side insets. This edge-to-edge image treatment is a deliberate change from the inset desktop grid.

Project title size stays around 18px on both viewports. The mobile layout therefore adapts by changing the number of columns and image width rather than shrinking all typography.

The arrow tab is visibly about 40px square in the mobile work/footer capture. Treat that size as a visual estimate. Its destination is supported by the parent image link; its hover or movement behavior is not.

### Standard Outlined Action

**Role:** connect sections to service details, the complete work index, or an external editorial destination.

Use a fully rounded outline, medium-weight sans-serif label, and small right arrow. The source standard action has 12px vertical and 24px horizontal padding, approximately a 6px label/icon gap, and a 1000px radius.

`OUR WORK` measures 156.83 × 48px on desktop and 157.11 × 48.08px on mobile. It is aligned to the right after the final project row. The work section leaves approximately 75–80px below it before the blue footer begins.

The source defines transitions for text and background colors, but no activated hover state was supplied. Palette inversion is a suitable recommendation, not a verified endpoint.

### Contact Panel

**Role:** provide the closing primary action.

The contact link sits alone in a large ruled cell. It combines a simple envelope outline and `CONTACT US` in approximately 28px type. The pill remains approximately 298 × 88px at both inspected sizes.

On desktop, the enclosing cell is about 1400px wide and 164px high. On mobile it is about 370px wide and 170px high. The retained button size gives contact much greater relative prominence on the phone.

The recorded destination is `mailto:info@ecdtokyo.jp`. This evidence supports an email link, not an on-site contact form or modal.

### Footer Information Grid

**Role:** close the page with identity, company context, navigation, and contact utilities.

The desktop footer is another full-height blue section, 1000px tall at the inspected viewport. The copyright line and crosshairs repeat near its top. A large empty area separates them from a framed grid beginning around 370px down the footer.

Below the full-width contact cell, the frame divides into a roughly 600px left column and 800px right column:

- The left column contains the large white identity artwork.
- The right column begins with a dense English manifesto in 12px Courier Prime with 12px leading.
- A horizontal navigation strip sits beneath the manifesto, containing the five company links and `BACK TO TOP`.
- The bottom strip contains the address and map link, followed by separate email and note icon cells.

The desktop identity artwork appears about 280px wide, estimated from the screenshot. The manifesto's measured text region is 768.81px wide and 156px high; its surrounding cell leaves substantial unused space below the text.

Mobile rebuilds this composition. The footer becomes 512.02px tall. Its frame begins about 77px below the section start and uses approximately 230px/140px columns beneath the contact row. A smaller identity, visually about 130px wide, sits on the left; navigation becomes six stacked rows on the right. The address occupies the lower-left cell, while the note symbol occupies the lower-right cell.

The long manifesto and separate email-icon cell are not visible in the mobile footer capture. Contact remains available through the large email pill. The visible navigation row pitch is approximately 32–33px, although the sampled mobile anchors report about 36px-high boxes; those rectangles should not be treated as exact painted table tracks.

`BACK TO TOP` is visible, but its implementation and scroll behavior were not recorded.

## Tokens — Motion & Interaction

### Recorded Transition Values

| Element | Computed value | What the evidence establishes |
| --- | --- | --- |
| Header | `0.3s cubic-bezier(0.33, 1, 0.68, 1)` | A transition is configured; visibility trigger and animated properties were not established |
| Mission label and paragraph | `0.3s ease-out` | A transition is configured; no before/after reveal state was supplied |
| Service, work, and note pills | Color and background-color, `0.3s cubic-bezier(0.33, 1, 0.68, 1)` | A palette change can transition; active endpoints were not captured |
| Linked news entries | `0.3s cubic-bezier(0.33, 1, 0.68, 1)` | Transition timing is known; exact effect is unverified |
| Footer contact, map, email, and note links | `0.3s cubic-bezier(0.33, 1, 0.68, 1)` | Transition timing is known; activated appearance is unverified |

A number of sampled elements report `transition: all` without a nonzero duration. That alone is not evidence of a visible animation.

Sampled elements report `animation: none`, but the collection does not comprehensively describe descendants, pseudo-elements, SVG animation, canvas rendering, or JavaScript-driven motion. It therefore cannot establish that the complete site is static.

### Confirmed Navigation Semantics

- Company links point to `/about/`, `/members/`, `/work/`, `/service/`, and `/office/`.
- Project images link to six individual work pages.
- Two news entries link to external articles.
- The large contact action uses an email URL.
- The footer provides a Google Maps destination and a note profile link.

These destinations were extracted from the homepage. They were not followed during this analysis.

### Unverified Behavior

The screenshots do not demonstrate menu opening, header appearance on scroll, image zoom, cursor effects, hover inversion, back-to-top easing, or globe rotation. Preserve these as open implementation questions rather than filling them with invented effects.

For a new implementation, short 300ms color transitions are consistent with the measured timing. Keep decorative motion optional and provide a resolved static logo state. Reduced-motion handling is a recommended addition.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Opening field | Solid blue with white identity and annotations | Establish brand recognition and scale contrast |
| Mission field | White with blue content | Present purpose and service access |
| News field | Blue with white copy and fine dividers | Organize updates as editorial rows |
| Work field | White with blue labels and full-color images | Let project imagery carry detail and variation |
| Closing field | Blue with a lightly ruled information grid | Combine contact, identity, and company navigation |
| Standard action | Transparent or matching-section fill with foreground outline | Indicate navigation without an additional accent color |
| Project arrow | Solid blue square with white arrow | Mark the image as a case-study entry |

The design gains hierarchy from changes in scale, section color, alignment, and boundaries. Soft shadows, floating panels, translucent blur, and gradient fills are not part of the visible system.

## Imagery

### Identity Artwork

The ECD identity is a compact arrangement of oversized white letterforms, vertical Japanese naming, and stacked English wording. A wireframe globe with facial features overlaps the letters in the resolved views. This combination gives an otherwise disciplined layout a playful focal point.

Preserve the artwork's internal spacing and linework. Do not replace it with a generic sustainability illustration, stock Earth photograph, or font-based monogram. The exact asset format and file URL were not supplied.

### Project Imagery

The visible portfolio uses authored project presentation images rather than uniform generic thumbnails:

- **FUTATABI FUTABA FUKUSHIMA:** a warm architectural visualization of a large building, with the project identity integrated into the image.
- **Hi Toilet:** a cool blue architectural/environment image with white brand wording and signage.
- **Tokyo Tokyo:** a partially visible image combining traditional painted imagery and a place scene, with a white arrow on a blue corner tab.

The other three project names and destinations are recorded in the DOM, but their images are not sufficiently visible in the supplied captures to describe their art direction.

Do not apply a common tint, remove branding embedded in the artwork, or replace the images with blue placeholders in a finished design. The natural image variation is a major contrast to the strict interface palette.

### Observed Asset References

No original image-file URLs were included in the supplied evidence. The following are observed page locations and link destinations, not downloadable asset paths.

| Reference | Observed location or destination | Evidence |
| --- | --- | --- |
| ECD identity | Homepage opening and footer | Visible artwork; H1 layout box measured in the opening |
| Crosshair marks | Upper corners of opening, work, and footer captures | Visible decorative marks; implementation method unknown |
| FUTATABI preview | `/work/hotelfutaba/` | Desktop image visible; link and title recorded |
| Hi Toilet preview | `/work/hitoilet/` | Desktop image visible; link and title recorded |
| HOTAMET preview | `/work/shellmet/` | Link, title, and client label recorded |
| Green electricity preview | `/work/kccs/` | Link and source title `生グリーン電力` recorded |
| GREEN JOURNEY preview | `/work/gj/` | Link, title, and client label recorded |
| Tokyo Tokyo preview | `/work/tokyotokyo/` | Partial mobile image visible; link and title recorded |
| Envelope, arrow, and note symbols | Action links and footer cells | Shapes visible; icon font or asset format unverified |

Use authorized original artwork when available. The CSS below describes the page structure; it does not reproduce the identity or project assets.

## Layout & Responsive Behavior

### Section Sequence

| Section | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Opening | 0 / 1000px | 0 / 844px |
| Mission | 1000 / 1064.91px | 844 / 709.69px |
| News | 2064.91 / 540.81px | 1553.69 / 727.66px |
| Work | 2605.72 / 1898.59px | 2281.34 / 2164.84px |
| Footer | 4504.31 / 1000px | 4446.19 / 512.02px |

These are recorded page coordinates, not recommended fixed heights. Content changes, different font rendering, or accessibility adjustments should be allowed to change section height.

### Desktop Composition

Content extends almost across the viewport, leaving roughly 20px side margins. The page does not use a narrow centered article container. A loose modular alignment connects several sections: the news list begins near x 500, the hero's middle cell begins near x 500, and footer details occupy the right-hand portion of the page.

The large identity fields provide vertical breathing room. Within them, text remains small and closely spaced. The work grid then fills most of the page width with images. These changes in density create the rhythm.

### Mobile Composition

Mobile is a rearrangement rather than a uniform reduction:

- The opening stays one viewport tall, while the logo box narrows from about 350px to 190px.
- Main side insets reduce from 20px to 10px.
- The opening rail changes from three columns to two and removes the visible question from that position.
- Mission copy becomes a full-width inset block and reduces from 18px to about 14px.
- News dates and titles stack, increasing the section height.
- Project images become one column and reach both viewport edges.
- Project titles stay approximately 18px.
- Standard actions remain around 48px high; the contact action remains around 298 × 88px.
- The footer changes from a full-height field to a compact information grid and omits its visible manifesto.

The desktop linked-image region has a calculated ratio of approximately 1.706, while the mobile region is approximately 1.781. Because these are anchor bounds, do not assume a single intrinsic image ratio or a verified `object-fit` rule.

### Breakpoint and Height Guidance

The exact breakpoint is unknown. The Quick Start uses 767px as an explicitly recommended breakpoint between the two demonstrated arrangements. Test intermediate tablet widths rather than treating that number as source evidence.

The opening's height matches the viewport in both records, but the underlying CSS unit was not supplied. Using `100svh` with a content-safe minimum height is a recommendation for a new implementation. Do not lock the remaining sections to the measured heights.

## Do’s and Don’ts

### Do

- Use the measured blue `#001DD1` and white as the interface's primary color pair.
- Preserve the alternation of blue identity/editorial fields and white mission/work fields.
- Keep extensive empty space around the opening identity.
- Retain the contrast between tiny Courier Prime annotations and large identity or display artwork.
- Use thin continuous rules to organize the opening rail and footer.
- Keep project images rectangular, prominent, and in their original colors.
- Rebuild the desktop two-column portfolio as edge-to-edge single-column imagery on mobile.
- Keep important action sizes relatively stable across viewports.
- Treat the desktop footer manifesto and mobile footer arrangement as distinct layouts.
- Separate confirmed link destinations from untested interactive behavior.

### Don’t

- Don’t replace the opening with a conventional headline, feature list, and oversized filled CTA.
- Don’t add sustainability-themed green accents that are absent from the interface.
- Don’t put every project inside a rounded, shadowed card.
- Don’t shrink the entire desktop layout proportionally to fit a phone.
- Don’t substitute an unrelated globe or typed letters for the identity artwork.
- Don’t infer the visible display type size from an ancestor's computed 16px font.
- Don’t render the DOM-only header or mobile menu as permanently open.
- Don’t treat the corner crosshairs as confirmed controls.
- Don’t invent image zoom, parallax, globe rotation, or menu animation details.
- Don’t use the measured document heights as inflexible page dimensions.

## Recommended Implementation Additions

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

- Give image links and icon-only links useful accessible names. Empty extracted link text does not by itself prove that the original lacks an accessible name.
- Include an accessible text equivalent for the image-based H1 and meaningful alternatives for project imagery.
- Preserve a visible keyboard focus treatment on both blue and white sections.
- Increase compact navigation targets where feasible. The observed mobile opening rows are only about 24–25px high; a larger target requires allowing the rail to grow.
- Keep utility typography visually secondary without making essential information depend on 10px text. Offer a more readable treatment where content is operationally important.
- If recreating an expandable menu, implement an actual button with expanded state, appropriate focus handling, and a reliable close action. Verify the original trigger before reproducing its appearance.
- Provide a static identity state and honor reduced-motion preferences for any added animation.
- Use responsive image sources and reserve media space before loading. Keep project lettering within the safe crop area.
- Use a real link or button for back-to-top behavior, with an accessible name and reduced-motion-aware scrolling.
- Treat decorative crosshairs and redundant arrows as presentation so they do not add noise to assistive navigation.

## Agent Prompt Guide

### Quick Color Reference

- Brand background and text on white: `#001DD1`.
- Reversed text and white content surfaces: `#FFFFFF`.
- Blue-section structural rules: start with `rgba(255, 255, 255, 0.30)` as a visual approximation.
- Actions: foreground-colored outline, matching section background, no extra accent color.
- Work imagery: original full color.

### Overall Prompt

“Create a corporate and portfolio homepage inspired by the current ECD / Earth Centric Design Lab composition. Alternate solid blue `#001DD1` sections with white sections. Open with a full-viewport blue field, a centered authorized identity mark, a tiny Courier Prime copyright line, corner crosshairs, and a thin ruled information rail at the bottom. Use compact monospaced annotations, medium-weight Helvetica Neue-based headings and controls, and Japanese system sans-serif body copy. Follow with mission content, a blue editorial news list, a white two-column work grid, and a blue contact/footer grid. Use square project images, subtle one-pixel rules, and outlined pill actions. On mobile, make the hero rail two columns, stack news content, extend project images to the viewport edges, and condense the footer into logo/navigation and address/social cells. Do not invent motion or unknown logo artwork.”

### Example Component Prompts

1. **Opening rail:** “Build a thin white-outlined rail on blue. Desktop has a business-description cell, a question-and-scroll cell, and five compact navigation rows. At phone width, keep a description and scroll cue on the left and the five rows on the right. Use left-aligned 12px Courier Prime labels and faint white dividers.”
2. **News list:** “Create a blue company-news section with white type. Offset the desktop list to the right, leaving a broad empty left region. Each row has a small date, a Japanese title, an optional READ MORE link, and a faint bottom rule. Stack date and title on mobile. Avoid independent cards.”
3. **Project preview:** “Place a large square-cornered project image above an 18px blue title and 12px blue client line. Put a small blue square with a white right arrow at the image's lower-right corner. Use two columns with about a 20px gutter on desktop and edge-to-edge images in a single mobile column.”
4. **Contact panel:** “Center an approximately 298 × 88px white-outlined pill in a large blue ruled cell. Pair a simple envelope symbol with CONTACT US in 28px medium-weight sans-serif. Preserve the button's size on mobile and use an email link.”
5. **Footer:** “Create a blue footer with a thin white grid. Desktop has a full-width contact row, a large logo cell at left, and a dense monospaced manifesto, horizontal navigation, and address/icon strips at right. Mobile omits the manifesto, puts the smaller logo beside vertical navigation, and finishes with address and note cells.”
6. **Interaction restraint:** “Use optional 300ms color transitions with cubic-bezier(0.33, 1, 0.68, 1). Treat hover inversion as an implementation recommendation. Keep logo motion, header reveal behavior, and menu transitions unspecified until directly verified.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered source code. Exact colors, declared font stacks, measured action sizes, and observed layout relationships are retained. Rule opacity, the 767px breakpoint, display-word approximation, hover endpoints, and short-viewport safeguards are recommendations.

Class structure: `.hero` contains `.frame-meta`, `.hero-mark`, and `.hero-rail`. The rail contains `.hero-summary`, `.hero-question`, `.hero-scroll`, and `.hero-nav`. A `.work-card` contains `.work-media` with its image and `.work-arrow`, followed by `.work-meta`. The footer grid contains contact, brand, manifesto, navigation, and utility regions. Supply authorized image assets separately; the font declarations do not load font files.

```css
:root {
  /* Measured palette and declared font families. */
  --ecd-blue: #001dd1;
  --ecd-white: #ffffff;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier Prime', monospace;
  --font-jp: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
    'Hiragino Sans', ヒラギノ角ゴシック, Meiryo, sans-serif;

  /* Rounded measurements and reusable aliases. */
  --gutter: 20px;
  --cell-inset: 15px;
  --hero-mark-width: 350px;
  --hero-mark-center: 43.56%;
  --hero-rail-height: 140px;
  --meta-top: 26px;
  --cross-size: 20px;
  --work-column-gap: 20px;
  --work-row-gap: 27px;
  --work-media-ratio: 690.17 / 404.64;
  --radius-action: 1000px;
  --action-height: 48px;
  --contact-width: 298px;
  --contact-height: 88px;

  /* Rule appearance is estimated; timing is measured. */
  --rule-on-blue: rgb(255 255 255 / 30%);
  --motion-ui: 300ms;
  --ease-ui: cubic-bezier(0.33, 1, 0.68, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }

.ecd-site {
  --ink: var(--ecd-blue);
  --surface: var(--ecd-white);
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.15;
}

.ecd-site :where(h1, h2, h3, p) { margin: 0; }
.ecd-site a { color: inherit; text-decoration: none; }
.ecd-site img { display: block; max-width: 100%; }

.blue-field {
  --ink: var(--ecd-white);
  --surface: var(--ecd-blue);
  color: var(--ink);
  background: var(--surface);
}

.white-field {
  --ink: var(--ecd-blue);
  --surface: var(--ecd-white);
  color: var(--ink);
  background: var(--surface);
}

.micro {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: max(640px, 100svh);
}

.frame-meta {
  position: absolute;
  inset-inline: var(--gutter);
  top: var(--meta-top);
  text-align: center;
  font: 400 12px / 1 var(--font-mono);
  letter-spacing: -0.02em;
}

/* Decorative crosshairs; these are not menu controls. */
.frame-meta::before,
.frame-meta::after {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--cross-size);
  height: var(--cross-size);
  transform: translateY(-50%);
  background:
    linear-gradient(currentColor, currentColor)
      center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor)
      center / 1px 100% no-repeat;
}
.frame-meta::before { left: 0; }
.frame-meta::after { right: 0; }

.hero-mark {
  position: absolute;
  left: 50%;
  top: var(--hero-mark-center);
  width: var(--hero-mark-width);
  transform: translate(-50%, -50%);
}
.hero-mark img { width: 100%; height: auto; }

.hero-rail {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: var(--gutter);
  display: grid;
  grid-template-columns: 24fr 30fr 16fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'summary question nav'
    'summary scroll nav';
  min-height: var(--hero-rail-height);
  border: 1px solid var(--rule-on-blue);
  font: 400 12px / 1 var(--font-mono);
  letter-spacing: -0.02em;
}

.hero-summary {
  grid-area: summary;
  padding: 10px var(--cell-inset);
  border-right: 1px solid var(--rule-on-blue);
}
.hero-question {
  grid-area: question;
  padding: 10px var(--cell-inset);
}
.hero-scroll {
  grid-area: scroll;
  padding: 12px var(--cell-inset);
  align-self: end;
}
.hero-nav {
  grid-area: nav;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  border-left: 1px solid var(--rule-on-blue);
}
.hero-nav a {
  display: flex;
  align-items: center;
  padding: 6px 14px;
}
.hero-nav a + a { border-top: 1px solid var(--rule-on-blue); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--action-height);
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-action);
  color: var(--ink);
  background: transparent;
  font: 500 16px / 1 var(--font-sans);
  transition:
    color var(--motion-ui) var(--ease-ui),
    background-color var(--motion-ui) var(--ease-ui);
}

/* Recommended hover endpoint, not a captured source state. */
@media (hover: hover) {
  .ecd-site .pill:hover {
    color: var(--surface);
    background: var(--ink);
  }
}

.mission-copy {
  width: min(100%, 536px);
  margin-left: auto;
}
.mission-label {
  font: 500 30px / 1.15 var(--font-sans);
  letter-spacing: -0.6px;
}
.mission-body {
  margin-top: 24px;
  font: 600 18px / 1.7 var(--font-jp);
  letter-spacing: 0.05em;
}
.section-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.news { padding: 63px var(--gutter) 40px; }
.news-title { font: 500 48px / 1.15 var(--font-sans); }
.news-list { margin-top: 54px; margin-left: 34.286%; }
.news-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding-block: 27px;
  border-bottom: 1px solid var(--rule-on-blue);
}
.news-date { font: 400 10px / 1.15 var(--font-sans); }
.news-copy {
  font: 400 13px / 1.4 var(--font-jp);
  letter-spacing: 0.05em;
}
.news-more { font: 500 12px / 1.4 var(--font-sans); }

.work { padding: 129px var(--gutter) 75px; }
.work-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 120px;
  align-items: start;
  gap: 20px;
  margin-bottom: 32px;
}
.work-tag {
  justify-self: start;
  padding: 2px 4px;
  border: 1px solid currentColor;
  font: 400 12px / 1 var(--font-mono);
}

/* Approximation of the visible display word, not measured type. */
.work-display {
  font: 500 120px / 0.9 var(--font-sans);
  letter-spacing: -0.05em;
}
.work-aside {
  text-align: right;
  font: 400 12px / 1 var(--font-mono);
  letter-spacing: -0.05em;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--work-row-gap) var(--work-column-gap);
}
.work-card { min-width: 0; }
.work-media {
  position: relative;
  display: block;
  aspect-ratio: var(--work-media-ratio);
  overflow: hidden;
}
.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ecd-white);
  background: var(--ecd-blue);
  font: 400 28px / 1 var(--font-sans);
}
.work-meta { padding: 10px 12px 0; }
.work-title {
  font: 500 18px / 1.5 var(--font-sans);
  letter-spacing: -0.64px;
}
.work-client {
  font: 400 12px / 1.5 var(--font-jp);
  letter-spacing: -0.64px;
}
.work-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 74px;
}

.site-footer {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px var(--gutter) 20px;
}
.footer-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 3fr 4fr;
  grid-template-areas:
    'contact contact'
    'brand manifesto'
    'brand nav'
    'brand utility';
  border: 1px solid var(--rule-on-blue);
}
.footer-contact {
  grid-area: contact;
  display: grid;
  place-items: center;
  min-height: 164px;
  border-bottom: 1px solid var(--rule-on-blue);
}
.contact-link {
  width: min(var(--contact-width), calc(100% - 24px));
  min-height: var(--contact-height);
  padding: 28px;
  gap: 24px;
  font-size: 28px;
}
.footer-brand {
  grid-area: brand;
  padding: 15px;
  border-right: 1px solid var(--rule-on-blue);
}
.footer-brand img { width: min(280px, 100%); height: auto; }
.footer-manifesto {
  grid-area: manifesto;
  min-height: 348px;
  padding: 15px;
  border-bottom: 1px solid var(--rule-on-blue);
  font: 400 12px / 1 var(--font-mono);
  letter-spacing: -0.04em;
}
.footer-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule-on-blue);
}
.footer-nav a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 15px;
  font: 400 12px / 1 var(--font-mono);
  letter-spacing: -0.02em;
}
.footer-nav a + a { border-left: 1px solid var(--rule-on-blue); }
.footer-utility {
  grid-area: utility;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 60px;
  min-height: 60px;
}
.footer-address {
  align-content: center;
  padding: 12px 15px;
  font: 400 10px / 1.3 var(--font-sans);
}
.footer-mail,
.footer-note {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--rule-on-blue);
}

/* Recommended focus treatment. */
.ecd-site :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended breakpoint; only 390px and 1440px were measured. */
@media (max-width: 767px) {
  :root {
    --gutter: 10px;
    --cell-inset: 12px;
    --hero-mark-width: 190px;
    --hero-mark-center: 44.47%;
    --hero-rail-height: 124px;
    --meta-top: 14px;
    --cross-size: 14px;
    --work-row-gap: 32px;
    --work-media-ratio: 390 / 219.02;
  }

  .hero-rail {
    grid-template-columns: 23fr 14fr;
    grid-template-areas: 'summary nav' 'scroll nav';
  }
  .hero-summary { border-right: 0; font-size: 10px; }
  .hero-question { display: none; }
  .hero-nav a { padding: 4px 12px; }

  .mission-copy { width: 100%; margin-left: 0; }
  .mission-label { font-size: 20px; }
  .mission-body { font-size: 14px; line-height: 1.56; }

  .news { padding-block: 60px; }
  .news-title { font-size: 24px; }
  .news-list { margin-top: 34px; margin-left: 0; }
  .news-row { display: block; }
  .news-date { margin-bottom: 18px; }
  .news-copy { font-size: 12px; line-height: 1.5; }
  .news-more { display: block; margin-top: 12px; text-align: right; }

  .work { padding-top: 78px; padding-bottom: 80px; }
  .work-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  .work-display { font-size: 48px; }
  .work-aside {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 10px;
  }
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: calc(-1 * var(--gutter));
  }
  .work-meta { padding: 13px 10px 0; }
  .work-actions { margin-top: 45px; }

  .site-footer { min-height: 0; padding-block: 77px 10px; }
  .footer-grid {
    grid-template-columns: 23fr 14fr;
    grid-template-areas:
      'contact contact'
      'brand nav'
      'address note';
  }
  .footer-contact { min-height: 170px; }
  .footer-brand { padding: 12px; }
  .footer-brand img { width: min(130px, 100%); }
  .footer-manifesto,
  .footer-mail { display: none; }
  .footer-nav {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, minmax(32.3px, auto));
    border-bottom: 0;
  }
  .footer-nav a { min-height: 32.3px; padding: 8px 12px; }
  .footer-nav a + a {
    border-left: 0;
    border-top: 1px solid var(--rule-on-blue);
  }
  .footer-utility { display: contents; }
  .footer-address {
    grid-area: address;
    min-height: 60px;
    padding: 10px 12px;
    border-top: 1px solid var(--rule-on-blue);
  }
  .footer-note {
    grid-area: note;
    min-height: 60px;
    border-top: 1px solid var(--rule-on-blue);
  }
}

/* Recommended reduced-motion behavior for this adaptation. */
@media (prefers-reduced-motion: reduce) {
  .ecd-site { --motion-ui: 0ms; }
}
```

The work-media aspect ratios approximate the measured linked regions. Adjust image cropping against the actual assets, especially where artwork contains lettering. The mission graphic and separate navigation menu are intentionally outside this CSS because their full appearance or behavior was not established.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-ecd-blue: var(--ecd-blue);
  --color-ecd-white: var(--ecd-white);
  --color-ecd-rule: var(--rule-on-blue);

  --font-editorial: var(--font-sans);
  --font-utility: var(--font-mono);
  --font-body: var(--font-jp);

  --text-micro: 12px;
  --text-project: 18px;
  --text-contact: 28px;

  --spacing-page: var(--gutter);
  --spacing-cell: var(--cell-inset);
  --spacing-action: var(--action-height);
  --radius-action: 1000px;
}
```

## Sources & Evidence

- [ECD / Earth Centric Design Lab homepage](https://ecdtokyo.jp/): the original and final inspected URL. The supplied record reports HTTP 200 and the page title `ECD｜Earth Centric Design Lab｜地球中心デザイン研究所`.
- **Capture record:** September 16, 2026, 19:40:57.575 UTC; September 17, 2026, 04:40:57.575 JST. Separate timestamps for individual frames were not provided.
- **Desktop evidence:** 1440 × 1000 CSS-pixel viewport; opening, news/work transition, and footer screenshots; rendered document height 5504.31px.
- **Mobile evidence:** 390 × 844 CSS-pixel viewport; opening and work/footer screenshots; rendered document height 4958.20px.
- **DOM and computed styles:** section and element rectangles, font-family stacks, sizes, weights, line heights, tracking, colors, selected padding and radius values, transition declarations, and link destinations. Original image URLs and a complete stylesheet were not supplied.
- **Capture procedure:** the record describes at least five seconds of initial observation, checks for document loading, finite motion, layout/text stability, and image decoding, plus scrolling through intermediate positions. Perpetual animations were temporarily paused for readiness checks and then resumed. These checks do not prove that every delayed or interactive state was captured.
- **Interaction limits:** no completed menu opening, hover/focus comparison, back-to-top action, or destination-page inspection was supplied. The header's visibility behavior and the globe's changing appearance remain unresolved.
- **Rendering limits:** only two viewport widths were recorded; exact breakpoints, source responsive formulas, native image sizes, font-file loading, and all animation mechanisms are unknown. SharedWorkers and service workers were disabled during the recorded inspection.

This reference describes the current homepage shown in the supplied original-page evidence. Measured values, screenshot estimates, and recommended implementation choices are distinguished throughout.