# FDM — Style Reference

> Architecture presented through large type, open white space, and photographs that meet the edges of the page.

**Original URL:** [https://fdms.co.jp/](https://fdms.co.jp/)
**Final URL:** [https://fdms.co.jp/](https://fdms.co.jp/)
**Theme:** light; white surfaces, charcoal text, gray rules, and natural photographic color.
**Inspected capture:** October 2, 2026, 03:35:34.537 JST — October 1, 2026, 18:35:34.537 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current corporate homepage, including its opening statement and featured image, project-category galleries, footer navigation, and contact information. Rendered DOM evidence additionally covers events, hospitality content, magazine entries, and carousel metadata. Menu panels, linked pages, forms, and carousel interactions were not exercised in the supplied evidence.

FDM combines a broad corporate information architecture with the presentation of an architectural portfolio. Large English headings introduce services and editorial sections; smaller Japanese text explains them. A compact geometric wordmark, fine horizontal rules, restrained outline controls, and generous white intervals provide consistency across a long page. Architectural photographs supply warmth through timber, stone, upholstery, daylight, and planted interiors.

The defining relationship is between inset text and expansive media. Desktop headings align to a 50px page inset, while project photographs begin at the left viewport edge and form three adjoining square panels. On mobile, text moves to a 13px inset, the project strip retains two columns, and utility information becomes a sequence of full-width rows. The result is an extensive browsing experience with multiple destinations, rather than a single conversion sequence.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, and custom properties. Decimal values are CSS pixels unless stated otherwise.
- **Visual estimates** describe screenshot geometry where an element measurement was not supplied. They are identified as estimates.
- **Derived values** are calculations from supplied measurements, such as the width remaining beside three project cards.
- **Source tokens** retain their original custom-property names. Other token names are descriptive implementation aliases.
- **Recommendations** and the Quick Start are adaptations. Their breakpoints, fallback behavior, accessibility additions, and unverified interaction states are not claims about the original implementation.
- The source root size is **10px on desktop and 5.2px on mobile**. Component rules also change between these layouts; scaling every desktop value by 0.52 would not reproduce the mobile site.
- DOM text includes repeated carousel entries and labels for states that are not visibly active. Those repetitions are not additional visible content sections.

## Tokens — Colors

### Default Palette

| Name | Value | Source token / implementation alias | Role and evidence |
| --- | --- | --- | --- |
| White canvas | `#ffffff` | Source `--theme-background`, `--color-white`; alias `--color-canvas` | Measured body and header background; also the visible control and footer surface |
| Charcoal ink | `#202020` | Source `--theme-text`, `--color-black`; alias `--color-ink` | Measured headings, body text, controls, and wordmark color |
| Structural rule | `rgba(0, 0, 0, .6)` | Source `--theme-border`; alias `--color-rule` | Declared border color, consistent with the fine gray separators in the captures |
| Secondary text | `#666666` | Source `--color-gray-2`; alias `--color-secondary` | Measured event descriptions and project-category subtitles |
| Metadata gray | `#888888` | Source `--color-gray-4`; alias `--color-meta` | Measured featured-content labels, event dates, and office metadata |
| Light neutral | `#eeeeee` | Source `--color-light` | Declared supporting color; no major filled surface using it was established in the captures |

The structural rule composites to approximately `#666666` over white. That is a calculated opaque equivalent, not a separate source border declaration. Keep text color and translucent border color semantically distinct, especially if the background changes.

### Additional Declared Colors

| Source token | Value | Interpretation |
| --- | --- | --- |
| `--color-gray-1` | `#444` | Supporting gray; specific use not established |
| `--color-gray-3` | `rgba(0, 0, 0, .6)` | Supporting translucent gray |
| `--color-gray-5` | `rgba(238, 238, 238, .6)` | Supporting translucent light gray |
| `--color-gray-6` | `#747474` | Supporting gray; specific use not established |
| `--color-gray-7` | `#9b9b9b` | Supporting gray; specific use not established |
| `--color-accent` | `#ef4e34` | Declared orange-red; a prominent use was not verified in the supplied views |
| `--color-green` | `#14ac00` | Declared green; a visible semantic assignment was not verified |

The observed interface is predominantly monochrome. Do not make the declared orange-red a universal action fill or assign green to property status without further evidence. Framework color, gradient, and shadow presets in the DOM are not evidence that those treatments appear on this homepage.

## Tokens — Typography

### Display and Latin Interface Type

- **Computed family:** `fdm, "Noto Sans JP", sans-serif`.
- **Source token:** `--font-fdm`.
- **Measured weight:** `500` across the sampled display headings, project labels, and pill controls.
- **Character:** broad, direct sans-serif lettering with tight display leading. Its visual strength comes primarily from size and the selected face.
- **Limitation:** `fdm` is the supplied CSS family name. Font binaries, the underlying typeface identity, licensing, and character coverage were not supplied.

Do not replace the measured weight with `700` simply because the headline looks bold. Use the authorized original font when available and evaluate any fallback by its line breaks and overall width.

### Japanese Text

- **Computed family:** `"Noto Sans JP", sans-serif`.
- **Source token:** `--font-ja`.
- **Measured weight:** `500`.
- **Body tracking:** `0.4px` on desktop; `0.208px` on mobile.
- **Desktop navigation tracking:** `1.12px`, equivalent to `0.08em` at 14px.

The document root reports a browser serif family, but the visible body and sampled interface elements override it. The root family is not the site's visual typography.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Notes |
| --- | --- | --- | --- |
| Opening statement | `74.4348px / 74.4348px` | `40.56px / 42.64px` | Measured `h1`; two lines on desktop, four on mobile |
| Major section heading | `74.4348px / 72.5739px` | `40.56px / 42.64px` | Measured category and Event headings; desktop leading is approximately `0.975` |
| Event title | `20px / 36px` | `16.64px / 26.52px` | Japanese family; tracking `1.5px` desktop and `0.78px` mobile |
| Project title | `18px / 18px` | `14.56px / 14.56px` | Display stack; measured title boxes also contain top padding |
| Body and category subtitle | `14px / 28px` | `14.56px / 24.96px` | Mobile body text is slightly larger, despite the smaller root size |
| Desktop navigation | `14px / 21px` | Not visible in the mobile header | Weight `500`, tracking `1.12px` |
| Pill label | `13px / 13px` | `13.52px / 13.52px` | Applies to measured About and View controls |
| Latin metadata | `12px / 12px` | `10.4px / 10.4px` | Dates, project metadata, and featured-content category labels |
| Event office metadata | `12px / 24px` | `10.4px / 20.8px` | Japanese family |
| Contact / Message heading | Approximately `24px` | Approximately `20px` | Visual estimates from footer captures; no corresponding computed sample supplied |

The contrast between approximately 74px headings and 12–14px utility text is central to the desktop design. Avoid inserting several competing medium-size heading levels throughout the galleries.

## Tokens — Spacing & Shapes

### Responsive Unit

The following source values and equivalents are measured or directly calculated:

| Property | Desktop source / equivalent | Mobile source / equivalent |
| --- | --- | --- |
| Root font size | `10px` | `5.2px` |
| `--side-padding` | `5rem` = `50px` | `2.5rem` = `13px` |
| `--header-default-height` | `12rem` = `120px` | `13rem` = `67.6px` |
| `--header-sticky-height` | `8rem` = `80px` | `11rem` = `57.2px` |
| Initial `--header-dynamic-height` | `12rem` | `13rem` |

Only the two supplied viewport endpoints are known. The root-size formula and original media-query thresholds were not provided.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Main horizontal inset | `50px` | `13px` | Computed header padding and text positions |
| Primary navigation gap | Approximately `30px` | Navigation hidden | Derived from adjacent link rectangles |
| Gap between header utility controls | `10px` | Approximately `26px` | Derived from measured control rectangles |
| Pill padding | `9.5px 25px` | `9.88px 26px` | Computed About and View links |
| Opening statement top clearance below header | `149px` | Approximately `87.36px` | Derived from header bottom and `h1` position |
| Mobile statement-to-About gap | Not a vertical stack | `26px` | Derived from `h1` bottom and About-link top |
| Category heading-to-subtitle gap | `26px` | Approximately `20.8px` | Derived from sampled category rectangles |
| Subtitle-to-project-image gap | `60px` | Approximately `41.58px` | Derived from Full Order rectangles |
| Project title top padding | `42px` | `20.8px` | Computed |
| Project metadata padding | `68px 20px 40px` | `31.2px 15.6px 19.24px` | Computed |
| Paired gallery-arrow gap | `15px` vertically | Approximately `10.4px` horizontally | Derived from button rectangles |

This is not a uniform eight-point spacing system. Large section intervals coexist with compact controls and carefully scaled metadata.

### Border Radius and Rules

| Element | Observed treatment |
| --- | --- |
| Photographs and project links | Square corners; sampled project links report `0px` radius |
| Desktop pills | `100px` radius, producing a capsule at 34px height |
| Mobile About / View pills | `52px` radius at approximately 35.27px height |
| Carousel arrows | `50%` radius; circular |
| Mobile header utilities | `0px` radius with transparent backgrounds and no visible pill outline |
| Section and footer dividers | Approximately 1px visible rules; thickness is a screenshot estimate |

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Initial header | `1440 × 120px` | `390 × 67.59375px` measured |
| Wordmark | `100 × 31.15625px`, x = `50px` | `78 × 24.296875px`, x = `13px` |
| Statement box | x = `50px`, y = `269px`, `1159.125 × 148.875px` | x = `13px`, y = `154.953125px`, `364 × 170.5625px` |
| About link | `130.875 × 34px` | `134.5625 × 35.265625px` |
| Hero-image start | Approximately y = `488px` | Approximately y = `436px` |
| Visible mobile hero frame | Full width; desktop bottom outside opening capture | Approximately `390 × 390px` |
| Standard project-card width | `446.65625px` | `195px` |
| Standard project-card total height | `638.65625px` with supplied metadata | `301.59375px` with supplied metadata |
| Gallery arrangement | Three cards across approximately `1340px`, plus a `100px` control rail | Two cards across `390px`; controls below |
| Circular controls | `34 × 34px` | Approximately `35.36 × 35.36px` |
| Recorded document height | `12265px` | `8814px` |

Document heights describe the recorded page state, not fixed layout targets. Cards without date/location metadata have shorter measured content.

## Components

### Persistent Header

**Role:** brand identity, service navigation, and access to contact and site navigation.

The desktop header is a white strip with a fine bottom rule. The home-linked wordmark sits 50px from the left edge. Seven primary entries occupy the center: an About button followed by housing, renovation, hospitality, special construction, case-study, and property-sales destinations. Contact and Menu sit at the right as small outlined capsules.

The measured navigation extends approximately from x = 356.86px to x = 1083.14px, centering it around the viewport midpoint. The asymmetric empty spaces around the logo and utilities can be reproduced with three grid columns: flexible left, intrinsic-width navigation, flexible right. Right-align the utility group inside its column.

The initial desktop height is 120px. Scrolled screenshots show the compact header at approximately 80px, consistent with the source sticky-height token. The exact scroll threshold and positioning implementation were not supplied.

On mobile, the wordmark is 78px wide and the full navigation disappears. The visible utilities become plain text: Contact and Menu. Contact replaces the desktop Japanese label `お問合せ`; these mobile controls have transparent backgrounds and no visible capsule outline. The source also contains Close and `戻る`, but the appearance and behavior of their active states were not inspected.

### Opening Statement

**Role:** establishes the company's position before introducing the work.

Use a large text block on white containing the actual statement:

> We are building the fundamentals of your life with everyone.

At desktop width, the first line ends after “fundamentals”; the second contains “of your life with everyone.” The statement and the small `FDMについて` capsule share one horizontal region. There is a measured 50px gap between the heading box and the About-link box. The link sits near the heading's lower edge, with its bottom approximately 10px above the heading-box bottom.

On mobile, the statement wraps into four lines:

> We are building the  
> fundamentals of  
> your life with  
> everyone.

The About link moves below the statement, aligns right, and preserves substantial white space before the photograph. There is no introductory paragraph, colored badge, or overlaid text in the captured opening composition.

### Featured Image and Caption Controls

**Role:** gives a project or editorial feature the largest visual area on the page.

The opening image begins at the viewport edges below the white statement block. The supplied current view shows a tall, bright residential interior: a timber-lined stair zone on the left, extensive glazing on the right, suspended cone-shaped lights, and seating below. The mobile crop is approximately square and retains the relationship between stairs, daylight, lights, and furniture.

A caption area below the image contains a small category label, linked Japanese title, paired circular arrows, a fractional count, and an outlined View link. The captured text reports `1 of 4`.

On desktop, the category begins at x = 50px and its title follows at approximately x = 120px. The arrows and View link sit toward the right. On mobile, category and title stack within the 13px inset; arrows move to the left of a lower control row and View sits at the right. The measured mobile arrows begin at x = 13px and x = 58.75px.

The available evidence establishes multiple feature records and navigation controls. It does not establish autoplay, crossfading, swipe support, or slide duration.

### Event Rows

**Role:** presents timely visits, openings, and property announcements.

The rendered DOM contains an Event heading, a View All destination, and three whole-link event rows. Each row groups a Japanese title, descriptive content, date range, office, and View label; an ongoing-status label appears on one record.

Desktop rows use `display: flex` and `20px 50px` padding. The first two measured rows are approximately 254.39px high; the longer third row is 292px. Title boxes begin near x = 541.34px with a width of 360px, while description boxes begin near x = 988.02px with a width of approximately 401.98px. The leading region is not documented by an image-element measurement, so its exact media dimensions should not be inferred from these text boxes.

Mobile rows switch to `display: block` with `31.2px 13px 20.8px` padding. Titles use 16.64px type and precede the date/office line. Long descriptions are absent from the supplied mobile rendered-text view, although their text remains in the link evidence. The View All label is visually shortened on mobile.

Keep the event entry as a coherent destination. If the entire row is an anchor, the internal View treatment should be a noninteractive label rather than a nested link.

### Project-Category Heading

**Role:** marks a service category and introduces its project strip.

Observed categories include Full Order, Concept House, Renovation, and Building Construction. Each combines a large English heading with a smaller gray Japanese explanation. For example, Renovation uses `お部屋の修理・改良`.

Desktop category headings align to the 50px inset. A small View capsule sits at the far right beside the subtitle region. The measured heading-to-subtitle interval is 26px; the subtitle is followed by approximately 60px before the project images.

On mobile, sampled category text uses the same 40.56px display size as the opening statement. The category View link appears after the project cards with the carousel controls. Treat this as a placement change, not a removed destination.

Some offscreen heading rectangles in the DOM are horizontally displaced. They do not establish the final resting alignment or a permanent half-width heading column. The visible desktop Renovation heading is left aligned.

### Project Gallery and Control Rail

**Role:** makes multiple built projects comparable through equally sized photographs.

The desktop strip contains three adjoining square photographs. Each sampled card is 446.65625px wide. Together they occupy approximately 1340px starting at the left viewport edge. The remaining 100px forms a white control rail on the right.

This is a distinctive asymmetry: the media band's width equals the ordinary inset-content width, but it is positioned flush left rather than centered with 50px margins on both sides.

Two 34px circular arrows are stacked in the rail with a 15px gap. Their measured vertical positions center the pair against the complete card height, including the caption area, rather than against the photograph alone. Thin vertical rules continue the divisions between cards into their white captions.

At 390px, each card is 195px wide, giving two visible columns. The side rail disappears from the measured arrangement. Controls move below the cards, with approximately 15.6px between the card bottom and button top.

Full Order and Concept House report six groups on desktop and nine on mobile. Renovation reports four and five respectively. These counts are consistent with the change from three visible projects to two. Repeated and negative-positioned DOM entries indicate carousel duplication or positioning; do not render those duplicates as extra editorial records.

### Project Card

**Role:** links one architectural image and its compact identifying information.

The entire measured card is an anchor. Its anatomy is:

1. A square photographic region, approximately 446.66px high on desktop or 195px on mobile.
2. A centered project title, with 42px desktop or 20.8px mobile top padding.
3. A small date/location metadata block, separated from the title by substantial internal padding.

The source card-title leading is very tight: 18px at 18px type on desktop and 14.56px at 14.56px on mobile. Some title boxes are constrained despite long content. Their complete overflow behavior was not supplied. For a reusable implementation, allow wrapping and increase leading where needed rather than reproducing inaccessible clipping.

Some Concept House entries contain the status `成約済み`. The text is verified; its badge color and detailed visual treatment are not established by the supplied screenshots.

### Hospitality and Magazine Sections

**Role:** extends the homepage beyond construction services into operated spaces and editorial content.

The rendered document includes Hotel & Restaurant, a Japanese explanatory line, a named property, Official Site and View destinations, and a `1 of 7` count. A substantial property description appears in desktop rendered text but not in the mobile text view. The section's complete visual composition was not included in a dedicated screenshot, so image proportions and text placement remain unverified.

Magazine groups article titles with dates, category labels such as Tips, Career, News, and Philosophy, and a View All destination. Desktop text exposes a longer repeated sequence and a `1 of 4` count; mobile text exposes three article entries. Do not infer the mobile paging mechanism from text order alone.

These sections should retain their distinct content purposes. They are not interchangeable testimonial or promotional-card slots.

### Footer Navigation

**Role:** provides company, office, owner-service, and social destinations.

The desktop footer remains white and unusually spacious. Four groups—FDM, Office, Owner, and Social—begin at approximately x = 50px, 331px, 621px, and 1243px in the supplied capture. The broad separation before Social is deliberate visual breathing room.

Group headings appear around 14px; secondary links are approximately 12–13px and gray. These footer type sizes are visual estimates. Link rows are spaced roughly 33px apart. The groups contain company and recruiting information, five office destinations, owner services, and social links.

Mobile rendered text retains the four group headings but does not expose their desktop link lists. This is consistent with a collapsed presentation, but no disclosure interaction was exercised. An accordion is a reasonable implementation recommendation, not a verified original behavior.

### Contact and Message Directory

**Role:** offers three action destinations and separates telephone services by purpose.

Desktop Contact and Message occupy adjacent regions. In the supplied screenshot, Contact begins at x = 50px and Message near x = 585px. Their headings are approximately 24px. Fine rules and generous row heights organize the information without boxes or background changes.

Contact contains `お問合せ`, `資料請求`, and `来場予約`, linking to the contact, information-request, and reservation pages. Mobile turns these into full-width rows approximately 75–76px high, with labels inset 13px and a right-pointing arrow near the opposite edge.

Message separates a service label, operating hours, and telephone number:

| Source service label | Hours shown | Number shown |
| --- | --- | --- |
| `代表電話番号` | `9:00 - 17:30` | `097-514-0007` |
| `新築住宅・リノベーションに関するお問合せ` | `9:00 - 17:30` | `0120-686-588` |
| `賃貸物件ご入居者様専用ダイヤル` | `9:00 - 17:30` | `097-546-1980` |

On desktop, hours and numbers occupy separate horizontal positions. On mobile, the service label is at the left and hours stack above the number in a right column beginning around x = 221px. Rows are approximately 100–120px high in the screenshot, with longer Japanese labels wrapping over multiple lines. The Message heading has a generous white interval above it.

Telephone text is visible, but `tel:` links were not established by the supplied link inventory.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| Header height | `height 0.3s ease-out` | A 300ms height transition is defined; expanded and compact appearances are supported by captures and tokens |
| Wordmark opacity | `opacity 0.3s ease-out` | An opacity transition is defined; the triggering state and target opacity were not inspected |
| Pill controls | Computed serialization `0.3s ease-out, opacity, transform` | Transition declarations exist; complete per-property timing and visual endpoints are not established |
| Circular carousel controls | Computed serialization `0.3s ease-out, opacity, transform, visibility` | Visibility and transform-related state changes are represented; actual feedback was not exercised |
| Source easing token | `--ease-out-cubic: cubic-bezier(.33, 1, .68, 1)` | Declared easing curve; assignment to a particular observed reveal was not established |
| Carousel navigation | Arrow buttons, counters, repeated entries, and offscreen cards | Carousel structure is evidenced; autoplay, looping configuration, dragging, and timing remain unverified |
| Menu / Contact panels | Buttons and alternative labels exist | Opening layout, animation, focus behavior, and dismissal behavior remain unverified |

A computed `transition: all` without a supplied nonzero duration is not proof of visible animation. Likewise, a declaration of `animation: none` on sampled elements does not rule out script-driven transforms elsewhere.

The capture process waited for document readiness, visible image decoding, and sampled geometric stability. It also traversed intermediate scroll positions and handled perpetual animations during readiness checks. These safeguards do not prove that every deferred reveal or interaction was inspected.

The desktop footer capture contains some interrupted divider lengths, and the middle capture includes a partially visible preceding heading. Their causes were not established. Do not invent a line-drawing animation, sticky-section choreography, or scroll-scrubbing timeline from those still frames.

**Recommended adaptation:** preserve the evidenced short, restrained transition vocabulary. Use visible content as the default state, add clear keyboard focus, and disable optional movement when reduced motion is requested.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid white | Continuous background for a long corporate homepage |
| Persistent header | Opaque white with a fine bottom rule | Maintains navigation clarity over scrolled content |
| Statement and section headers | White fields with large charcoal type | Provides pauses between dense photographic regions |
| Project media | Rectangular natural-color photography | Carries material, spatial, and emotional information |
| Project captions | White with fine vertical divisions | Continues the gallery grid below the images |
| Actions | White or transparent, thin outline, compact label | Signals navigation with minimal visual weight |
| Contact directory | White rows divided by fine rules | Makes dense practical information easy to scan |

No general shadow-based elevation system is visible. Rounded shapes are concentrated in controls; photographs and content regions remain square. No dark theme or theme switch was established.

## Imagery

The current photographs emphasize inhabitable architectural space. In the opening image, vertical timber slats and stair treads balance broad glazing and sculptural lighting. The mobile view retains furniture at the bottom, which helps communicate scale and daily use rather than presenting only architectural surfaces.

The supplied Renovation strip shows three contrasting interiors: a dim sleeping space with warm illumination and a pebble-lined floor zone, a pale room with timber flooring and sliding screens, and an exposed-timber commercial interior. Their different lighting conditions are allowed to coexist. A heavy shared color filter would remove useful distinctions between projects.

Use photography at substantial sizes, with square gallery crops and clean edges. Preserve vertical architectural lines and choose focal positions deliberately when cropping. The opening desktop image extends below the first viewport; its complete aspect ratio was not directly measured. The square mobile frame is visually supported.

Timber brown, pale stone, gray fabric, and plant green belong to the images. They are not additional interface tokens. Avoid adding matching brown panels or green buttons simply because those colors appear in the photography.

### Observed Asset References

| Visual role | Evidence location | Asset limitation |
| --- | --- | --- |
| FDM wordmark | Header at [the homepage](https://fdms.co.jp/) | Graphic is visible and measured; its file URL was not supplied |
| Featured residential interior | Opening homepage captures | Desktop and mobile crops are visible; binary image URL and intrinsic dimensions were not supplied |
| Featured project destination | [Project linked by the opening caption](https://fdms.co.jp/case/new-home-full-order/10661/) | This is an observed link destination, not an inspected image resource |
| Renovation photography | Middle desktop homepage capture | Three visible images; their exact file paths and individual project associations were not supplied |
| Interface arrows and plus signs | Header, galleries, and mobile contact rows | Appearance is visible; SVG, font, or CSS construction was not established |

Use authorized image and logo assets when available. Do not invent original asset paths or pass a project-page URL as an image source. The geometric wordmark should remain artwork rather than being approximated with ordinary text.

## Layout & Responsive Behavior

The page is a long sequence of corporate and editorial destinations. Its rendered order is: opening statement and feature, Event, Full Order, Concept House, Renovation, Building Construction, an architectural statement and all-cases link, Hotel & Restaurant, Magazine, and the footer directory.

### Observed Desktop-to-Mobile Changes

| Area | Desktop | Mobile |
| --- | --- | --- |
| Header | Full centered navigation; outlined Contact and Menu controls | Logo plus plain-text Contact and Menu |
| Header dimensions | 120px initial, 80px compact token | Approximately 67.6px initial, 57.2px compact token |
| Text inset | 50px | 13px |
| Opening statement | Two lines, About link alongside | Four lines, About link underneath and right aligned |
| Hero media | Full-width image continuing below the first viewport | Approximately square full-width image |
| Feature caption | Category and title share a horizontal region | Category and title stack |
| Event rows | Flex composition with visible descriptions | Block composition; long descriptions absent from rendered-text view |
| Project strip | Three approximately 446.66px cards plus right control rail | Two 195px cards with controls beneath |
| Category View link | Near subtitle at upper right | Below the cards with controls |
| Footer navigation | Four expanded link groups | Group headings remain; link lists are not exposed in the captured text |
| Contact actions | Left column beside Message | Full-width divided rows before Message |
| Telephone directory | Service, hours, and number spread horizontally | Service on left; hours and number stacked on right |

The mobile version reorganizes information instead of shrinking the desktop page. In particular, body text remains about 14.56px and project cards remain paired. Replacing the galleries with a single-column list would change the observed browsing rhythm.

Exact tablet layouts and source breakpoints are unknown. For a new implementation, choose breakpoints based on navigation fit, title wrapping, and usable project captions. Intermediate-width behavior should be tested rather than inferred from the two captured endpoints.

## Do’s and Don’ts

### Do

- Use white `#ffffff` and charcoal `#202020` as the principal interface pair.
- Keep large English headings close to the measured size and weight relationship.
- Pair those headings with smaller Japanese explanatory text and metadata.
- Preserve the contrast between inset headings and photographs that meet the viewport edge.
- Use three adjoining project images on desktop and two on the inspected mobile layout.
- Reserve the desktop gallery's right edge for a narrow, white control rail.
- Keep project photographs square and caption regions free of shadows.
- Make About and View controls compact outlined capsules.
- Retain the spacious footer and clearly separated telephone services.
- Treat mobile navigation, gallery controls, and contact rows as deliberate layout changes.

### Don't

- Don't turn the homepage into a generic sequence of feature cards and repeated oversized calls to action.
- Don't apply rounded corners to every image or content block.
- Don't use the declared accent colors as dominant fills without evidence of their role.
- Don't infer a commercial font name from the appearance of the `fdm` family.
- Don't copy source rem values into a conventional 16px-root project without conversion.
- Don't reduce all mobile typography in proportion to the root-size change.
- Don't inset the desktop project strip symmetrically when reproducing its flush-left composition.
- Don't display duplicated carousel records as additional projects.
- Don't claim autoplay, parallax, menu animations, or hover effects from still captures alone.
- Don't hard-code clipped headings, incomplete dividers, or offscreen transform positions as the resting layout.

## Recommended Implementation Additions

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

- Preserve the small visible controls while providing at least approximately 44px touch targets through layout space or carefully separated hit areas.
- Give previous/next buttons explicit accessible names and associate each control set with its gallery.
- Make carousel content keyboard reachable; hide nonactive duplicate slides from focus and assistive technology if a looping implementation requires clones.
- Keep Menu and Contact panel state explicit with `aria-expanded` and `aria-controls`. If an overlay is modal, implement appropriate focus management and dismissal.
- Use a real link for each project card and avoid nested interactive elements inside whole-link event rows.
- Make telephone numbers callable with `tel:` links while preserving their visible formatting.
- Check small gray text against its background. The observed `#888888` is too light for ordinary small-text AA contrast on white; `#666666` is a practical adaptation for essential metadata.
- Allow long project titles and service labels to wrap without fixed-height clipping.
- Reserve image dimensions to prevent layout movement. Load the opening image promptly and defer below-the-fold media appropriately.
- Support reduced motion and keep content visible if animation code fails.
- Use semantic disclosure controls if adapting mobile footer groups into accordions; that behavior was not verified on the original.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and control surfaces: `#ffffff`.
- Main type and wordmark: `#202020`.
- Fine rules: `rgba(0, 0, 0, .6)`.
- Secondary explanatory text: `#666666`.
- Observed small metadata: `#888888`; consider `#666666` for essential small text.
- Photographic color: natural timber, stone, fabric, and daylight; do not convert these into UI fills.
- Shape vocabulary: square photographs, thin dividers, capsule links, circular arrows.

### Overall Prompt

“Create a Japanese architecture company's corporate homepage inspired by the observed FDM design. Use a white canvas, charcoal text, fine gray rules, large medium-weight English sans-serif headings, and smaller Japanese descriptions. Build a persistent header with a geometric logo, centered desktop service navigation, and compact outlined utilities. Place a large two-line English statement above an edge-to-edge architectural photograph. Follow with events, project categories, hospitality, editorial content, and a spacious contact directory. Project galleries use three adjoining square photographs with a narrow right-side control rail on desktop, and two columns with controls beneath on mobile. Use 50px desktop text insets and approximately 13px insets at 390px width. Keep imagery square, actions small, and surfaces free of shadows. Treat unverified menu and carousel behavior as implementation choices.”

### Example Component Prompts

1. **Header:** “A white architecture-company header, 120px tall at a 1440px viewport, with a 100px-wide graphic logo at the left, seven centered navigation entries, and 34px-high outlined Contact and Menu pills at the right. Use a single fine bottom rule. On a 390px phone, reduce the logo to 78px and show plain-text Contact and Menu.”
2. **Opening statement:** “A spacious white region with a charcoal English statement at approximately 74.4px, weight 500, and line-height 1. Place a small outlined About link near the lower right. On mobile, use approximately 40.56px type with 42.64px leading, four natural lines, and a right-aligned About link below.”
3. **Project gallery:** “An architecture gallery with three touching square image panels occupying the first 1340px of a 1440px canvas. Add a 100px white rail with two vertically stacked circular arrow controls. Continue thin vertical divisions through white captions with centered titles and small date/location metadata. At 390px, show two 195px-wide panels and move controls below.”
4. **Contact directory:** “A white footer directory with Contact on the left and a wider Message region on the right. Use fine rules and generous row spacing. On mobile, stack full-width contact links with right arrows, followed by telephone rows with the service label left and opening hours above the number right.”
5. **Architectural imagery:** “Choose natural-color photographs that explain lived spatial relationships: timber stairs, glazing, sculptural lights, stone or timber floors, and furniture for scale. Crop gallery images square, preserve vertical lines, and avoid heavy overlays or decorative rounded frames.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted source code. It uses ordinary pixel-based tokens without changing the project's root font size. The desktop and mobile endpoint values follow the evidence; the 1100px and 767px breakpoints are recommended starting points. The desktop hero ratio of `16 / 9` is an implementation choice because the complete original image rectangle was not supplied.

The CSS expects a header containing a brand, primary navigation, and utility group; an intro containing a heading and link; and project sections containing a section heading, horizontal track, optional control rail, and mobile control row. Native horizontal scrolling provides a basic gallery fallback. Menu behavior, arrow-button logic, counters, and compact-header state require separate implementation.

The `fdm` family must be supplied through an authorized font resource to reproduce its metrics. No font file URL is implied by this example.

```css
:root {
  /* Measured interface colors */
  --color-canvas: #fff;
  --color-ink: #202020;
  --color-rule: rgba(0, 0, 0, .6);
  --color-secondary: #666;
  --color-meta: #888;

  /* Observed family names; font resources are not bundled */
  --font-display: fdm, 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --weight-medium: 500;
  --body-size: 14px;
  --body-leading: 28px;
  --tracking: .4px;
  --display-size: clamp(40.56px, 5.17vw, 74.4348px);
  --display-leading: 1;
  --section-leading: .975;
  --button-size: 13px;
  --project-title-size: 18px;
  --meta-size: 12px;

  /* Desktop measurements */
  --page-gutter: 50px;
  --header-height: 120px;
  --header-compact-height: 80px;
  --logo-width: 100px;
  --button-pad-y: 9.5px;
  --button-pad-x: 25px;
  --circle-size: 34px;
  --rail-width: 100px;
  --radius-pill: 100px;
  --rule-width: 1px;
  --motion-ui: 300ms ease-out;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--weight-medium);
  line-height: var(--body-leading);
  letter-spacing: var(--tracking);
}

button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--header-height);
  padding-inline: var(--page-gutter);
  background: var(--color-canvas);
  border-bottom: var(--rule-width) solid var(--color-rule);
  transition: height var(--motion-ui);
}

/* An application sets this state; the source threshold is unknown. */
.site-header[data-compact='true'] {
  height: var(--header-compact-height);
}

.brand { justify-self: start; }
.brand img, .brand svg {
  display: block;
  width: var(--logo-width);
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: .08em;
}

.primary-nav a { text-decoration: none; }
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-display);
  font-size: var(--button-size);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 50px;
  padding: 149px var(--page-gutter) 70px;
}

.intro h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-weight: var(--weight-medium);
  line-height: var(--display-leading);
}

.intro-link {
  align-self: end;
  justify-self: end;
  margin-bottom: 10px;
}

.hero-media {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-top: var(--rule-width) solid var(--color-rule);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-section { padding-top: 96px; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title .' 'summary action';
  align-items: end;
  gap: 26px 40px;
  padding: 0 var(--page-gutter) 60px;
}

.section-heading h2 {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-weight: var(--weight-medium);
  line-height: var(--section-leading);
  overflow-wrap: anywhere;
}

.section-summary {
  grid-area: summary;
  margin: 0;
  color: var(--color-secondary);
}

.section-heading .section-link { grid-area: action; }

.project-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  border-top: var(--rule-width) solid var(--color-rule);
}

/* Native scrolling is a recommended fallback, not a source claim. */
.project-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
}

.project-card {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  border-inline-end: var(--rule-width) solid var(--color-rule);
}

.project-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
}

.project-title {
  margin: 0;
  padding: 42px 20px 0;
  font-family: var(--font-display);
  font-size: var(--project-title-size);
  font-weight: var(--weight-medium);
  /* Additional leading allows long titles to wrap safely. */
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.project-meta {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 68px 20px 40px;
  font-family: var(--font-display);
  font-size: var(--meta-size);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.carousel-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.circle-button {
  display: grid;
  place-items: center;
  width: var(--circle-size);
  height: var(--circle-size);
  padding: 0;
  border: var(--rule-width) solid var(--color-rule);
  border-radius: 50%;
  color: var(--color-ink);
  background: var(--color-canvas);
  cursor: pointer;
}

.carousel-mobile-controls { display: none; }

.footer-navigation {
  display: grid;
  grid-template-columns: 21% 21.6% 1fr 11%;
  padding: 120px var(--page-gutter);
}

.footer-navigation h3 {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: var(--weight-medium);
}

.footer-navigation ul { margin: 0; padding: 0; list-style: none; }
.footer-navigation a {
  display: inline-block;
  color: var(--color-secondary);
  font-size: 13px;
  line-height: 33px;
  text-decoration: none;
}

.contact-directory {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3.3fr);
  gap: 48px;
  padding: 0 var(--page-gutter) 100px;
}

.directory-title {
  margin: 0;
  padding-bottom: 34px;
  border-bottom: var(--rule-width) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  border-bottom: var(--rule-width) solid var(--color-rule);
  text-decoration: none;
}

.message-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  min-height: 80px;
  padding-block: 24px;
  border-bottom: var(--rule-width) solid var(--color-rule);
}

.message-details {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
}

.message-details a { white-space: nowrap; text-decoration: none; }

/* Recommended focus and link feedback; original endpoints unverified. */
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .primary-nav a:hover,
  .footer-navigation a:hover { text-decoration: underline; }
}

/* Recommended navigation-fit breakpoint. */
@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav { display: none; }
}

/* Mobile endpoint adaptation, calibrated to the supplied 390px view. */
@media (max-width: 767px) {
  :root {
    --page-gutter: 13px;
    --header-height: 67.6px;
    --header-compact-height: 57.2px;
    --logo-width: 78px;
    --body-size: 14.56px;
    --body-leading: 24.96px;
    --tracking: .208px;
    --display-size: 40.56px;
    --display-leading: 1.05128;
    --section-leading: 1.05128;
    --button-size: 13.52px;
    --button-pad-y: 9.88px;
    --button-pad-x: 26px;
    --circle-size: 35.36px;
    --project-title-size: 14.56px;
    --meta-size: 10.4px;
    --radius-pill: 52px;
  }

  .header-actions { gap: 26px; }
  .header-actions .pill {
    padding: 10.4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .intro {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 87.36px var(--page-gutter) 49.4px;
  }
  .intro-link { margin-bottom: 0; }
  .hero-media { aspect-ratio: 1; }

  .project-section { padding-top: 88px; }
  .section-heading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'summary';
    gap: 20.8px;
    padding-bottom: 41.6px;
  }
  .section-heading .section-link { display: none; }
  .project-carousel { grid-template-columns: minmax(0, 1fr); }
  .project-track { grid-auto-columns: 50%; }
  .carousel-rail { display: none; }
  .project-title { padding: 20.8px 13px 0; }
  .project-meta { padding: 31.2px 15.6px 19.24px; }

  .carousel-mobile-controls {
    display: flex;
    align-items: center;
    gap: 10.4px;
    padding: 15.6px var(--page-gutter) 0;
  }
  .carousel-mobile-controls .section-link { margin-left: auto; }

  /* Expanded groups remain usable until disclosure behavior is added. */
  .footer-navigation {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 64px;
  }

  .contact-directory {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 0 78px;
  }
  .directory-title {
    padding: 56px var(--page-gutter) 38px;
    font-size: 20px;
  }
  .contact-row {
    min-height: 76px;
    padding-inline: var(--page-gutter);
  }
  .message-row {
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    gap: 0;
    min-height: 100px;
    padding: 28px var(--page-gutter);
  }
  .message-details { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .project-track { scroll-behavior: auto; scroll-snap-type: none; }
}
```

Use separate desktop and mobile labels for the header Contact control while preserving one accessible control name. Connect both gallery-control placements to the same gallery state. The mobile category link in the lower control row should use the same destination as its desktop counterpart.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: #fff;
  --color-ink: #202020;
  --color-rule: rgba(0, 0, 0, .6);
  --color-secondary: #666;
  --color-meta: #888;

  --font-display: fdm, 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;

  --text-display: var(--display-size);
  --text-copy: var(--body-size);
  --text-project: var(--project-title-size);
  --text-meta: var(--meta-size);
  --text-control: var(--button-size);

  --spacing-page: var(--page-gutter);
  --spacing-header: var(--header-height);
  --spacing-rail: var(--rail-width);
  --radius-capsule: var(--radius-pill);
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://fdms.co.jp/](https://fdms.co.jp/). The supplied browser record reports HTTP 200 and no change between original and final URL. The page title identifies FDM株式会社.
- **Capture timestamp:** October 1, 2026, `18:35:34.537Z`, corresponding to October 2, 2026, `03:35:34.537 JST`.
- **Desktop evidence:** 1440 × 1000 viewport; opening, middle-page Renovation, and footer screenshots; recorded document height 12265px.
- **Mobile evidence:** 390 × 844 viewport; opening and lower contact-directory screenshots; recorded document height 8814px.
- **Rendered evidence:** page text, link destinations, selected element rectangles, computed typography and spacing, transition declarations, and custom properties at both viewport sizes. Full Order and Concept House card measurements establish the three-column desktop and two-column mobile geometry.
- **Observed navigation destinations:** company information, events, housing and renovation case indexes, hospitality, magazine, contact, information request, and reservation links. Their presence is verified; their destination pages were not inspected for this reference.
- **Interaction scope:** initial observation and scrolling are documented. No supplied action log verifies menu opening, contact-panel opening, carousel clicks, touch dragging, hover endpoints, keyboard operation, or form submission.
- **Limitations:** no source stylesheet files, complete selector rules, font binaries, direct image asset URLs, tablet captures, or production-credit evidence from the inspected original page were supplied. Some offscreen rectangles may reflect deferred presentation states. Measurements describe the recorded current page; recommendations and code are explicitly adaptive.