MANERUBETA
スタジオディテイルズ｜ブランドファームのコーポレートサイトのWebサイトプレビュー

DESIGN REFERENCE

スタジオディテイルズ｜ブランドファームのコーポレートサイト

コーポレートサイトポートフォリオブランディングデザイン会社ダークトーンモノクロタイポグラフィ明朝体動画背景制作実績横スクロールレスポンシブ

黒とグレーを基調に、巨大な欧文タイポグラフィ、明朝体、モノクロの背景映像とカラーの事例写真を組み合わせたコーポレートサイト。

オリジナルサイトを見る
ジャンル
デザイン・広告・制作
元の業種
ブランディング・デザイン制作
デザイン分析日
2026/9/12

design.md

ダウンロード

STUDIO DETAILS — Style Reference

Silver lettering, charcoal panels, and monochrome film give a brand firm the presence of an editorial title sequence.

Website / Original URL: www.details.co.jp Final URL: https://www.details.co.jp/ Theme: dark throughout the supplied states; no theme selector was evidenced. Inspected: September 12, 2026. Supplied browser retrieval: 2026-09-12T08:08:04.802Z, equivalent to 17:08:04.802 JST. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage: opening composition, project index, Approach section, Knowledge rail, recruitment and contact panels, navigation, and footer. The contact form is documented only from its DOM presence; its open state and submission flow were not exercised.

STUDIO DETAILS presents its business through scale, restraint, and image selection. An enormous English statement occupies the left side of a dark opening frame. Small Japanese navigation and a quiet Contact control hold the upper edge. The headline is pale gray rather than white, and the supporting Japanese copy uses a distinctly editorial Mincho face.

Below the opening, the site becomes a project and knowledge index. Large project photographs introduce color into the otherwise neutral interface. Compact charcoal information panels sit over the desktop photography, while generous dark intervals separate major sections. The footer returns to monochrome background imagery and combines recruitment, contact, office addresses, social links, and a prominent wordmark.

This is a corporate homepage with portfolio and editorial functions. Its reusable character comes from the relationship between oversized graphic lettering, small navigation, carefully spaced Japanese copy, photographic work, and understated controls.

How to Read This Reference

  • Measured values come from the supplied rendered DOM, computed styles, custom properties, and element rectangles. Measurements are in CSS pixels unless stated otherwise.
  • Visual estimates describe the five supplied original-page stills: three desktop captures and two mobile captures. Estimated image dimensions and visible letter heights are not stylesheet declarations.
  • Calculated values are derived from reported measurements. They are identified separately from source formulas.
  • Recommendations describe adaptations for a new implementation. The CSS starter is an adaptation, not recovered source code.
  • Source variables retain their supplied names. Other token names are descriptive aliases.
  • Some offscreen children have coordinates displaced from their visible parent panels. These may reflect transforms or reveal states. Use settled screenshots for painted alignment; do not reproduce every sampled document coordinate as an absolute position.
  • A computed 16px font on a heading wrapper does not establish the size or font of its visible graphic lettering. This distinction is particularly important for the hero and large English section labels.

Tokens — Colors

Default Palette

Name Value Source or implementation token Role and evidence
Charcoal canvas #1e1e1e Source --color-bg; alias --surface Computed body, Projects, Knowledge, and recruitment/contact surfaces; also visible in the scrolled header
Silver text #a0a0a0 Source --color-text; alias --ink Measured text color across navigation, copy, controls, and headings
Deep scene #121212 Alias --scene Computed Approach background; darker than the main section canvas
Secondary charcoal #282828 Source --color-bg-gray; alias --surface-raised Measured desktop Approach link fill; a small tonal change rather than elevation
Black rule #000000 Source --color-border; alias --rule Fine separators; also the computed main background and desktop Knowledge control fill
Passive gray #646464 Source --color-text-passive Declared passive text token; a specific visible assignment was not established
Transparent black rgba(0, 0, 0, .5) Source --color-transparent-black Declared overlay color; its precise application to the captured backgrounds was not established

The interface has no evidenced chromatic action color. A declared --swiper-theme-color: #007aff is present, but the supplied interface does not establish blue as a visible brand accent. Exclude it from the working palette.

Project photography supplies the color: the ACSL frame has cool blue-gray tones, while the ISURU SANDESICA frame introduces pale walls and warm wood. These are image colors, not reusable button or category tokens.

Color Behavior

Keep text and media on separate layers. The measured silver is already subdued; adding opacity to a parent containing both text and imagery would darken the lettering again.

On a flat #1e1e1e surface, #a0a0a0 has an approximately 6.38:1 calculated contrast ratio. The passive #646464 is approximately 2.82:1 against that surface. Neither calculation establishes readability over changing imagery. The busy desktop footer particularly needs frame-dependent contrast checks in a new implementation.

Tokens — Typography

Japanese Editorial Text

  • Measured family: MFW-PA1MinchoStdN-Regular, serif.
  • Measured weights: 400 for navigation and small categories; 700 for the hero statement, section descriptions, Japanese section labels, and Knowledge titles.
  • Tracking: generally 0.05em; navigation uses 0.2em; Japanese section labels use 0.1em.
  • Character: fine Mincho strokes and measured spacing create a literary, considered tone.
  • Implementation caution: the family name contains Regular even where computed weight is 700. The supplied evidence does not identify a separate bold font file or establish whether weight synthesis occurs.

Latin Titles and Utilities

  • Measured family: optima-nova-lt-pro, serif.
  • Measured weight: 400.
  • Roles: project names, Contact, View All, View More, small scrolling labels, social links, addresses, and footer utility text.
  • Tracking: normal on most of these elements.
  • Character: softly flared, humanist letterforms connect the restrained controls to the expressive English identity.

These are actual computed family names, not suggested substitutes. Using them in CSS does not load the fonts. A new project needs an authorized font source or an explicitly chosen fallback.

Graphic Headline and Wordmarks

The opening reads as three composed lines: DETAILS is, A BRAND, and FIRM. Small connecting words sit inside the larger composition. The letterforms include pronounced stroke variation and an angular, crossbar-free A shape.

The H1 wrapper reports sans-serif, 16px, but its measured rectangle is 701.23 × 467.75px on desktop and 360 × 240.13px on mobile. The actual lettering implementation and font were not supplied. Treat it as a composed brand graphic until its source asset is available; do not identify its font from the wrapper or assume it is ordinary live Optima text.

The two H1 rectangles have approximately the same 1.499:1 calculated aspect ratio. Visible large capitals are approximately 130–136px high on desktop and 66–70px on mobile, estimated from the screenshots. These are visible glyph heights, not CSS font sizes.

Type Scale

Role Desktop measurement Mobile measurement Weight / tracking
Project category 10px / 10px 10px / 10px 400; 0.05em
Knowledge category 12px / 12px 12px / 12px 400; 0.05em
Footer headings and addresses 12px / 15.996px Same 400; normal
Primary navigation 14px / 14px Same 400; 0.2em
Footer Japanese links 14px / 21px Same 400; 0.2em
Header Contact 16px / 19.2px 14px / 19.6px 400; normal
Japanese section label 18px / 30.006px 17px / 28.339px 700; 0.1em
Hero Japanese statement 19.5242px / 29.2863px 18px / 27px 700; 0.05em
Section introductions 24px / 36px 18px / 27px 700; 0.05em
Project English title 24px / 24px Same 400; normal
Knowledge title 24px / 36px 18px / 27px 700; 0.05em
View All / View More 24px / 24px Same 400; normal
Recruitment/contact description 24px / 36px 18px / 27px 700; 0.05em

Visual estimate: desktop project descriptions appear around 20px / 30px. Their computed typography was not included in the sampled elements.

The visible English section labels also need caution. Their wrappers report 16px, but the Projects wrapper measures 257 × 150px on desktop and 192.75 × 112px on mobile. Preserve the graphic composition or inspect its actual children before assigning a live-text display size.

Tokens — Spacing & Shapes

Density: very large media and section intervals around small controls and compact metadata. Geometry: mostly rectangles, subtle 4px corners, black hairlines, and isolated circular media controls.

Spacing Scale

There is no demonstrated universal 8px grid. The measured layout combines several distinct scales.

Use Desktop Mobile Status
Main content inset 77.25px 20px Measured
Project image outer inset About 18px 20px project link inset Desktop visual estimate; mobile measured
Navigation item gap 18px 10px Calculated from link rectangles
Contact label/icon gap 14px 8px Computed
Hero graphic-to-copy gap 70px 40px Calculated from element rectangles
Desktop project panel inset About 30px Caption moves below media Visual estimate supported by panel/content widths
Mobile project item gap — 20px Calculated
Knowledge item gap 18px 10px Calculated
Knowledge horizontal text inset 38.125px 21px Calculated
View All section height 300px 220px Measured
Footer top padding 250px 100px Computed
Action panels to footer columns 150px 100px Calculated

The desktop 77.25px inset equals approximately 5.3646vw at the inspected width. That ratio is a calculation, not the recovered source formula. A 2000px maximum content-width token is declared, but wider layouts were not inspected.

Shapes and Controls

Element Geometry Evidence
Desktop project caption link 290px wide; 4px radius Computed
Mobile project link 350px wide; 0px radius Computed
Knowledge card 4px radius Computed
Desktop Approach link 4px radius Computed
Mobile Approach link 0px radius Computed
Recruitment/contact pair 4px on outer corners; square shared edge Computed
Media control 25 × 25px; 50% radius Computed; pause glyph visible
Desktop Knowledge arrow buttons 50 × 50px; rounded outer corners Computed
Contact plus tile Approximately 16 × 16px, softly rounded Visual estimate
Project divider and action-panel seam Approximately 1px, black Visual estimate

Key Layout Measurements

Element Desktop Mobile
Header 1440 × 71px 390 × 58px
Contact button 106 × 44px 93 × 41px
Navigation link 68 × 71px 52 × 60px
Hero graphic position x: 77.25; y: 146 x: 20; y: 76
Hero graphic rectangle 701.23 × 467.75px 360 × 240.13px
Hero copy top 683.75px 356.13px
First content section begins 1000px 844px
Knowledge card 456 × 635.33px 260 × 446.88px
Recruitment panel 642.25 × 519px 350 × 230px
Contact panel 642.25 × 519px 350 × 284px
Footer wordmark link box 237 × 21.33px 350 × 31.5px

These rectangles document the sampled state. They should not become fixed heights for arbitrary replacement copy.

Components

Persistent Header

Role: maintain identity, navigation, and contact access while the page changes underneath.

The opening header is transparent over the background. A small angular brand mark sits left, five Japanese destinations occupy the center, and Contact sits right with a compact filled plus tile. The observed destinations are 企業, 方法, 事例, 採用, and 知見.

In the scrolled captures, the header has a solid charcoal surface and the left mark becomes the full STUDIO DETAILS wordmark. It remains at the top in the supplied scrolled states. Its exact positioning rule and switching threshold were not supplied.

The brand link has a measured width transition of 600ms, a 200ms delay, and cubic-bezier(.65, 0, .35, 1). This supports an expanding identity treatment; it does not establish every stage of the switch.

Mobile Navigation Bar

Role: preserve direct access to all primary destinations without a collapsed menu in the observed opening state.

The phone capture moves navigation into a dark bar near the bottom. It contains six evenly distributed links, adding トップ before the five desktop destinations. The bar is approximately 382px wide, starts at x: 4px, and occupies y: 754–814px in the 844px viewport. Each link is 52 × 60px, with 10px gaps and approximately 10px inner side padding.

A short, thin underline marks トップ. The label stays 14px with 0.2em tracking. Contact remains in the top header.

The bottom bar is absent from the supplied mobile footer capture. Its hide/show trigger is unverified; do not describe it as permanently visible throughout the page.

Opening Hero

Role: express the firm's identity before introducing work.

Use a full-viewport opening region with edge-to-edge monochrome imagery. The large three-line statement is aligned left, leaving extensive dark space on desktop. Its supporting source copy is ブランド価値を計測可能にし向上させる、新しいタイプのブランドファームです。.

The composition begins below the header, at y: 146px on desktop and 76px on mobile. The phone graphic retains its proportions and nearly fills the available width: its 360px rectangle leaves 20px at the left and 10px at the right. Standard mobile content later uses symmetric 20px insets.

The supporting sentence is one visible desktop line and two mobile lines. The graphic-to-copy gap contracts from 70px to 40px; the text remains substantial at 18px on mobile.

Desktop adds a small vertical Scroll label near the lower right. A 25px circular pause-style control appears below it. The phone capture omits the Scroll label and places the circular control above the bottom navigation region.

Section Identity Row

Role: mark the transition between Projects, Approach, and Knowledge.

Each section pairs an English identity with a smaller Japanese label, followed by a Japanese explanatory sentence. Desktop alignment is intentionally varied: the Projects label sits toward the right, Approach is composed inside a narrower inset region, and Knowledge places its English identity toward the right with Japanese labeling on the left.

The mobile measurements regularize the arrangement: English identity begins near x: 20px, and the Japanese label sits near the right content edge. Supporting copy reduces from 24px / 36px to 18px / 27px.

Avoid treating the English label wrapper's computed 16px as its visible display size. Its graphic children were not separately identified.

Desktop Project Image and Caption Panel

Role: connect a visual result with its brand category, client name, and project premise.

The final visible project row contains two large photographs: an ACSL drone at left and an ISURU SANDESICA wooden crib at right. Each image is approximately 701px wide, with a narrow dark seam between them and about 18px outside clearance.

Each charcoal information panel sits approximately 30px from the photograph's right and bottom edges. The panel is 290px wide with 4px corners. Its anatomy is:

  1. A small Japanese branding category at 10px.
  2. An English client name at 24px, separated from the category by approximately 11px.
  3. A black horizontal rule.
  4. A short Japanese project description, visually around 20px / 30px.
  5. A thin right-pointing arrow aligned toward the lower right.

The inner text width is 230px, consistent with 30px side insets. Measured panel heights range from 251px to 305px as content changes; the ACSL and ISURU SANDESICA panels are 281px high.

The sampled caption positions group the six projects as VERMICULAR; RINNAI ULTRA FINE BUBBLE with ROHTO; NEWPEACE; and ACSL with ISURU SANDESICA. Only the final paired image row is visually established by the attached project capture. The full photo spans of the other groups remain unverified.

Mobile Project Entry

Role: preserve the same project information in a readable single column.

All six measured project links are 350px wide at x: 20px. They begin at y: 1087px and follow a regular 354.48px pitch, comprising a 334.48px item and a 20px gap in this sample.

The link reserves 174.828px at the top before the text region, consistent with an approximately 2:1 calculated media area at this width. The category starts another 23px below that reserved region. Text then flows below the image; the desktop floating-panel relationship is removed.

The category remains 10px, and the English project title remains 24px. Maintaining title size while changing composition is a defining responsive choice. Do not scale the entire desktop panel down proportionally.

View All Link

Role: provide a quiet transition from selected content to its full index.

View All is a centered 24px Latin label with a thin right arrow and no filled button surface. Its anchor has 20px padding and a measured 154.38 × 76px rectangle.

The surrounding region is intentionally spacious: 300px high on desktop and 220px on mobile. This gives the project grid and Knowledge rail a clear ending without a heavy divider or oversized conversion button.

Approach Scene

Role: introduce the firm's method through a distinct visual interval.

The Approach section uses a deeper computed background, #121212. The supplied desktop project capture reveals the start of a textured dark scene and an inset charcoal block. The DOM establishes the Approach label, Japanese introduction, Brand Design wording, and View More link.

On desktop, the View More link measures 574.5 × 100px, has a #282828 fill, 4px corners, and a 200ms linear background-color transition. On mobile it becomes 390 × 100px, transparent, with square corners.

The section is approximately 1281.59px high on desktop and 1070.33px on mobile. Large sampled padding contributes to these dimensions, but it does not prove pinning, parallax, or scroll-synchronized behavior. The internal Brand Design visual is not sufficiently shown to reconstruct its detailed anatomy.

Knowledge Rail

Role: expose practical writing while keeping the homepage visually paced.

The DOM contains six article links with a category, Japanese title, excerpt, and role/category metadata. They link to external articles. Their horizontal positions establish a rail rather than a wrapping grid.

Desktop cards measure 456px wide with 18px gaps. The first three start at x: 77.25, 551.25, and 1025.25px; the third extends beyond the viewport. On mobile, cards become 260px wide with 10px gaps, starting at 20px, 290px, and 560px. This leaves the next item entering the viewport beside the first.

The text inset changes from 38.125px to 21px. Titles change from 24px / 36px to 18px / 27px. The card radius remains 4px.

Desktop has two measured 50px navigation buttons and a 1 / 6 status representation. The mobile evidence retains the counter but does not include equivalent measured arrow buttons. The counter's accessible text has a 1 × 1px rectangle, while repeated number strings appear elsewhere in the DOM; do not render every extracted number as a visible row.

The screenshots do not show this rail in detail. Its precise thumbnail artwork, crop ratio, excerpt truncation, swipe behavior, looping, and automatic advancement are unverified.

Recruitment and Contact Panels

Role: turn the end of the homepage into two clear onward choices.

Desktop uses two adjoining charcoal panels within the main content inset. Each measures 642.25 × 519px; a 1px seam separates them. Only their outside corners are rounded.

Each panel includes a small English title, a larger Japanese description, a monochrome thumbnail, and a fine arrow. The recruitment image shows people together; the contact image shows a hand using a stylus on a screen. Their desktop square thumbnails are approximately 170px wide, estimated from the capture.

The recruitment surface is an anchor to the careers page. The contact surface is a button, consistent with the in-page contact interface present in the DOM. Preserve this semantic distinction.

On mobile the panels stack. Recruitment is 350 × 230px, Contact is 350 × 284px, and the shared divider becomes horizontal. The contact thumbnail visible near the upper right is approximately 76px square. Description text is 18px / 27px; the longer contact copy makes that panel taller.

Contact Surface — DOM Evidence Only

Role: collect an inquiry without an evidenced separate contact-page navigation.

A viewport-sized contact section exists in both snapshots. Its DOM includes the labels Contact, Input, Confirm, and Complete; an inquiry-category selector; a privacy-policy link; and a Confirm button. The header button contains Contact and Close label variants.

These facts support the presence of an in-page contact flow. They do not establish its open appearance, animation direction, validation behavior, focus management, successful submission, or mobile scrolling. Some form descendants are positioned beyond the viewport in the sampled state. Those positions must not be treated as measurements of a settled open dialog.

Footer Directory and Wordmark

Role: provide durable organizational information over the atmospheric closing scene.

Desktop places a modest STUDIO DETAILS wordmark in the left half and three directory groups to its right: Contents, Social Media, and Address. The addresses identify locations in Nagoya, Tokyo, and Osaka. Group headings and address text use the Latin face at 12px / 15.996px; Japanese contents links stay 14px with wide tracking.

On mobile, the directory remains three columns. Their measured widths are approximately 49.63px, 67.63px, and 192.75px, separated by 20px gaps. Long addresses wrap into more lines rather than moving into a full-width section.

The mobile order then changes to a Privacy Policy / Page Top row, a 350px-wide wordmark, and copyright with a small media control. Desktop Page Top is vertical near the right edge; mobile Page Top is horizontal.

The inspected copyright identifies STUDIO DETAILS Inc. The supplied original-page evidence does not establish a current production-credit roster.

Tokens — Motion & Interaction

Recorded Motion Values

Treatment Recorded value What is established
Common mouse enter Source token .1s A declared 100ms timing; individual effects were not exercised
Common mouse leave Source token .2s A declared 200ms timing
Header brand width width .6s cubic-bezier(.65, 0, .35, 1) .2s A width transition with delay is computed on the brand link
Mobile Japanese section labels transform 1.2s and clip-path 1.2s, cubic-bezier(.16, 1, .3, 1), .2s delay A reveal treatment is declared; its exact trigger and path were not recorded
Desktop Approach link background-color .2s linear A surface-color transition is declared
Recruitment/contact panels background-color .2s linear A surface-color transition is declared
Visible Knowledge link samples opacity .2s linear, background-color .2s linear Opacity and surface transitions are declared
Other Knowledge link samples opacity .06s linear A different sampled state exists; do not apply 60ms to the entire rail
Address links background-size .6s cubic-bezier(.33, 1, .68, 1) Background-size animation is declared; the resulting underline appearance was not captured
Contact section visibility visibility 0s linear .4s, opacity 0s linear .4s Delayed state changes exist; this is not evidence of a 400ms opacity fade

The source also declares several easing families. The most relevant recorded ones are out-cubic cubic-bezier(.33, 1, .68, 1), out-expo cubic-bezier(.16, 1, .3, 1), and in-out-cubic cubic-bezier(.65, 0, .35, 1).

Motion Evidence and Limits

The captures show pause glyphs over background imagery and different background compositions between states. This supports a moving-media presentation, but the supplied evidence does not identify the media format, renderer, frame rate, loop duration, audio behavior, or exact playback state changes.

Repeated character pairs occur in navigation and utility DOM text. They are consistent with layered character animation. The screenshots show one readable label, not duplicated letters. A rolling direction, stagger interval, and hover trigger cannot be established from the extracted text alone.

Scroll, Page Top, Contact, and carousel controls are present. No click, keyboard, drag, or submission results were supplied. Their intended roles are clear; their exact behavior remains unverified.

The inspection process waited for finite motion and layout stability and temporarily paused perpetual animations during readiness checks. Consequently, still captures are useful for composition, but they are not a complete motion specification.

Surfaces

Layer Appearance Function
Opening background Deep monochrome photographic/film imagery Atmosphere and scale behind the headline
Scrolled header Solid charcoal with a fine dark lower edge Stable navigation over changing content
Projects and Knowledge #1e1e1e Continuous neutral field for work and writing
Project caption Compact charcoal rectangle over photography Readable metadata and project entry
Approach #121212 with a visibly textured beginning Distinct methodological scene
Approach action #282828 on desktop; transparent on mobile A restrained tonal affordance
Recruitment/contact Adjoining charcoal rectangles Clear onward actions over background imagery
Footer Transparent directory over monochrome imagery Atmospheric close with organizational detail

There is no visible general drop-shadow hierarchy. Separation comes from image boundaries, black rules, negative space, and small changes between dark surfaces.

Imagery

The opening and footer use monochrome imagery with strong darkness, soft detail, and pronounced spatial or textural structure. The desktop opening is an indistinct close-up; the phone opening reveals architectural or studio details, including vertical rails and window-like surfaces. The desktop footer shows a turbulent field of pale fragments and letter-like marks. The phone footer returns to the architectural motif.

These observations do not identify a shared file, a fixed background implementation, or a procedural rendering technique. In particular, do not label the footer effect as WebGL, particles, or a specific simulation without additional evidence.

Project images remain colored and materially specific. The ACSL drone is framed against a cool, light environment; the crib photograph is warm, airy, and softly lit. This alternation between subdued interface and brighter client imagery is central to the page.

Observed Asset References

No image or media asset URLs were supplied. The references below identify subjects and associated page links without inventing filenames.

Asset role Observed subject Reference status
Hero lettering Three-line Details is a brand firm composition H1 text and bounding box supplied; rendering asset unidentified
Opening background Dark monochrome close-up on desktop; architectural detail on mobile Visible in opening captures; media path unavailable
ACSL project image Large black drone with cool blue-gray surroundings Associated DOM destination: /projects/acsl/; destination not separately inspected
ISURU SANDESICA project image Wooden crib in a pale interior Associated DOM destination: /projects/isuru-sandesica/; destination not separately inspected
Recruitment thumbnail Monochrome group scene Visible in desktop footer capture; file path unavailable
Contact thumbnail Hand and stylus in front of a screen Visible in desktop and mobile footer captures; file path unavailable
Desktop closing background Dense swirling texture with letter-like fragments Visible in footer capture; technique unidentified
Mobile closing background Dark architectural motif Visible in footer capture; relationship to opening media unverified
Knowledge thumbnails Not sufficiently shown in supplied stills Do not invent artwork or claim a measured crop ratio

Use authorized brand graphics and media when available. CSS can reproduce the interface structure, but substitute imagery will materially change its character.

Layout & Responsive Behavior

Page Sequence

The document is a long scrolling homepage, not an internally scrolling application shell.

Region Desktop start / height Mobile start / height
Opening 0 / 1000px 0 / 844px
Projects 1000 / 3411.63px 844 / 2569.91px
Approach 4411.63 / 1281.59px 3413.91 / 1070.33px
Knowledge 5693.22 / 1206.33px 4484.23 / 899.88px
Footer 6899.55 / 1318.97px 5384.11 / 1166.94px

Measured document heights are approximately 8218.52px and 6551.05px. These values describe this content and capture state; do not hardcode them as layout requirements.

Responsive Changes That Matter

  • Header: desktop center navigation moves into a six-item bottom bar in the mobile opening. The header height changes from 71px to 58px.
  • Hero: the same approximately 1.499:1 headline composition scales down while maintaining large visual impact. Mobile uses asymmetric 20px / 10px side clearance for the graphic.
  • Copy: Japanese introductory text reduces to 18px / 27px. English project names and index links remain 24px.
  • Projects: desktop image overlays become a single column with text below the media. Mobile project links use symmetric 20px page margins.
  • Approach: the desktop inset filled action becomes a full-width transparent action on mobile.
  • Knowledge: the horizontal rail persists; card width changes from 456px to 260px, with the next card entering the viewport.
  • Footer actions: a horizontal pair becomes a vertical pair with unequal heights according to copy length.
  • Footer directory: three columns persist on mobile. The wordmark moves below the directory and legal controls and expands from a 237px link box to 350px.

Only two viewport widths were inspected. The original breakpoint values, landscape behavior, safe-area strategy, and behavior beyond the declared 2000px content cap are not established. The starter uses an explicitly recommended 800px breakpoint and safe-area support.

Do’s and Don’ts

Do

  • Keep the measured charcoal and silver relationship: #1e1e1e with #a0a0a0.
  • Preserve the hero's composed three-line silhouette and the small connecting words.
  • Pair Japanese Mincho text with the measured humanist Latin face where licensed.
  • Maintain the contrast between enormous identity graphics and small utility navigation.
  • Let project photography retain its color and material detail.
  • Use compact desktop caption panels with category, title, divider, description, and arrow.
  • Recompose project entries for mobile instead of shrinking the overlay.
  • Preserve substantial breathing room around View All links.
  • Keep the Knowledge content horizontal at both evidenced widths.
  • Retain the mobile footer's three-column directory and large concluding wordmark.
  • Keep background-media controls present and understandable in a new implementation.

Don’t

  • Do not replace the gray typography with pure white everywhere.
  • Do not introduce bright category badges or a colored primary-button system.
  • Do not turn every surface into a pill or a heavily rounded card.
  • Do not add general shadows, glass blur, or glossy gradients.
  • Do not grayscale the client photography to match the background media.
  • Do not infer the hero font from its 16px sans-serif wrapper.
  • Do not render duplicated DOM animation characters as duplicated visible labels.
  • Do not copy offscreen transform offsets into static component padding.
  • Do not describe the mobile navigation bar as always visible when the footer capture omits it.
  • Do not claim a particular media engine, carousel gesture, contact animation, or scroll effect without testing it.

Recommended Implementation Additions

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

  • Keep essential small text on stable dark surfaces. Check contrast against the brightest background frames, especially in the footer.
  • Reserve the passive gray for nonessential information; its calculated contrast against the main surface is insufficient for normal-size essential text.
  • Expand the 25px media-control hit area to at least 44px while retaining the small circular face.
  • Give media, carousel, Contact, and Page Top buttons explicit accessible names. Hide duplicated decorative character layers from assistive technology.
  • Provide visible keyboard focus, a skip link, and a meaningful heading structure behind graphic lettering.
  • If Contact is implemented as a modal, manage focus, Escape, return focus, background inertness, and internal mobile scrolling. Validate the full flow independently.
  • Respect reduced-motion preferences by pausing background media and showing a poster. CSS transition removal alone does not pause a video.
  • Keep media silent unless sound is explicitly requested. Autoplay and sound behavior were not established by this inspection.
  • Supply keyboard-operable controls and meaningful status updates for the Knowledge rail. Do not rely exclusively on dragging.
  • Test fixed navigation against safe areas and short viewports. Reproduce its observed absence at the footer through an intentional, tested visibility rule.
  • Use responsive images and defer below-the-fold media while reserving its dimensions to limit layout shifts.

Agent Prompt Guide

Quick Color Reference

  • Main canvas and panels: #1e1e1e.
  • Main lettering and interface text: #a0a0a0.
  • Approach scene: #121212.
  • Secondary desktop action surface: #282828.
  • Fine dividers and dark controls: #000000.
  • Passive token: #646464, used cautiously.
  • Color emphasis: supplied by project photography, not interface accents.

Overall Prompt

“Create a corporate homepage for a brand firm using charcoal #1e1e1e, silver #a0a0a0, Japanese Mincho typography, and restrained humanist Latin labels. Open with a full-viewport monochrome media scene and a huge, left-aligned three-line graphic statement with small connecting words. Use a transparent opening header with a compact mark, centered Japanese navigation, and a quiet Contact-plus control. Continue into large colored project photographs with compact charcoal caption panels, a deeper dark Approach scene, a horizontal Knowledge rail, and adjoining recruitment/contact panels. Close with monochrome imagery, small directory columns, and a wordmark. On mobile move navigation into a bottom bar, place project captions below their images, stack the action panels, and move the wordmark below the three-column footer directory. Preserve negative space, fine rules, and subtle corners. Treat media timing and untested interactions as implementation decisions rather than recovered facts.”

Example Component Prompts

  1. Hero: “Compose an approximately 1.499:1 three-line English identity graphic in silver over dark monochrome imagery. At 1440px, use a roughly 701px-wide graphic starting 77px from the left and 146px from the top. At 390px, use a 360px graphic starting at 20px and 76px. Place bold Mincho supporting copy 70px below on desktop and 40px below on mobile.”
  2. Project panel: “Place a 290px charcoal caption panel about 30px from the lower-right corner of a large colored project photograph. Use 4px corners, a 10px Japanese category, a 24px Latin client name, a black hairline, Japanese descriptive copy, and a fine arrow. On mobile move the caption below an approximately 2:1 media region within 20px page margins.”
  3. Mobile navigation: “Build a near-full-width charcoal bottom bar with six 14px Japanese links, wide character spacing, 60px-high cells, and a short underline on the current page. Keep Contact in the top header. Make footer-related hiding an explicit behavior to implement and test.”
  4. Knowledge rail: “Create a horizontal editorial rail with 456px desktop cards and 18px gaps, changing to 260px cards and 10px gaps on mobile. Use small Japanese categories and bold Mincho titles at 24/36px on desktop and 18/27px on mobile. Let the next card remain partially visible. Use supplied article artwork; its crop is not prescribed by the evidence.”
  5. Footer actions: “Create two adjoining charcoal recruitment and contact surfaces with small English headings, substantial Japanese copy, monochrome square thumbnails, and a thin shared rule. Use equal 519px desktop heights. Stack them on mobile and let copy determine height.”
  6. Footer directory: “Place Contents, Social Media, and Address in three restrained columns using 12px Latin utilities and 14px tracked Japanese links. Retain three columns at 390px. Follow them with Privacy Policy and Page Top, then a nearly full-width silver wordmark over a dark photographic background.”

Quick Start

CSS Custom Properties

This starter uses measured palette, typography, and component dimensions where available. Its fluid gutter formula, 800px breakpoint, desktop photo aspect ratios, media scrim, rail scrolling, and enlarged hit areas are recommended adaptations. It does not load fonts, provide brand graphics, reproduce the Approach artwork, or implement media/contact/carousel JavaScript.

Use a header containing a brand link, primary navigation, and Contact button. Place an authorized graphic inside the H1 .hero-mark. A project link can contain an image and a .project-caption with heading, description, and arrow regions. The starter recommends one semantic link for each complete project entry. Use .footer-info, .footer-brand, .footer-legal, and .footer-copyright as children of .footer-grid.

:root {
  /* Measured source palette */
  --surface: #1e1e1e;
  --ink: #a0a0a0;
  --scene: #121212;
  --surface-raised: #282828;
  --rule: #000;
  --ink-passive: #646464;
  --scrim: rgb(0 0 0 / 50%);

  /* Measured family names; authorized font loading is separate */
  --font-jp: 'MFW-PA1MinchoStdN-Regular', serif;
  --font-latin: 'optima-nova-lt-pro', serif;
  --tracking-body: .05em;
  --tracking-nav: .2em;
  --tracking-section: .1em;
  --text-category: 10px;
  --text-caption: 12px;
  --text-nav: 14px;
  --text-intro: 24px;
  --text-project: 24px;
  --text-action: 24px;

  /* Adapted scaling calibrated to the supplied desktop viewport */
  --content-max: 2000px;
  --gutter: clamp(20px, 5.364583vw, 107.3px);
  --media-gutter: 18px;
  --hero-width: min(48.697vw, 974px);
  --header-height: 71px;
  --panel-width: 290px;
  --panel-inset: 30px;
  --rail-width: 456px;
  --rail-gap: 18px;
  --radius: 4px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Recorded source timings and easing curves */
  --motion-enter: 100ms;
  --motion-leave: 200ms;
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
  --z-header: 10;
  --z-contact: 11;
  --z-contact-button: 12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
img, video { display: block; max-width: 100%; }

.content {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding-inline: 8px 10px;
  background: transparent;
}

/* Application state must set this attribute. */
.site-header[data-scrolled='true'] {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.brand-link {
  justify-self: start;
  padding: 10px;
  transition: width 600ms var(--ease-in-out-cubic) 200ms;
}

.primary-nav { display: flex; gap: 18px; }
.primary-nav .nav-home { display: none; }
.primary-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: var(--header-height);
  font: 400 var(--text-nav)/1 var(--font-jp);
  letter-spacing: var(--tracking-nav);
}

.contact-button {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  font: 400 16px/1.2 var(--font-latin);
  letter-spacing: normal;
}

.contact-plus {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius);
  color: var(--surface);
  background: var(--ink);
  font: 12px/1 sans-serif;
}

.hero, .site-footer {
  position: relative;
  isolation: isolate;
}
.hero { min-height: 100svh; }

.media-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.media-layer > :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recommended local scrim; adjust against the actual media. */
.media-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.hero-content { padding: 146px var(--gutter) 100px; }
.hero-mark {
  width: var(--hero-width);
  aspect-ratio: 1.499 / 1;
  margin: 0;
  line-height: 0;
}
.hero-mark > :is(img, svg) { width: 100%; height: auto; }
.hero-copy {
  width: var(--hero-width);
  max-width: 100%;
  margin: 70px 0 0;
  font: 700 19.5242px/1.5 var(--font-jp);
}
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 135px;
  writing-mode: vertical-rl;
  font: 12px/1.2 var(--font-latin);
}

/* Recommended 44px hit area around the measured 25px face. */
.media-toggle {
  position: absolute;
  right: max(4px, calc(var(--gutter) - 9.5px));
  bottom: max(20px, calc(var(--gutter) - 9.5px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
}
.media-toggle::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--surface);
}
.media-toggle > * { position: relative; }

.section-intro {
  font: 700 var(--text-intro)/1.5 var(--font-jp);
}
.section-label {
  font: 700 18px/1.667 var(--font-jp);
  letter-spacing: var(--tracking-section);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: min(calc(100% - 2 * var(--media-gutter)), 1964px);
  margin-inline: auto;
}
.project { position: relative; display: block; min-width: 0; }

/* Desktop crops and optional wide spans are adaptation choices. */
.project-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.project--wide { grid-column: 1 / -1; }
.project--wide .project-image { aspect-ratio: 2 / 1; }
.project-caption {
  position: absolute;
  right: var(--panel-inset);
  bottom: var(--panel-inset);
  width: var(--panel-width);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}
.project-heading { padding: 30px 30px 28px; }
.project-category {
  margin: 0 0 11px;
  font: 400 var(--text-category)/1 var(--font-jp);
}
.project-title {
  margin: 0;
  font: 400 var(--text-project)/1 var(--font-latin);
  letter-spacing: normal;
}
.project-description {
  padding: 24px 30px 30px;
  border-top: 1px solid var(--rule);
  font: 400 20px/1.5 var(--font-jp);
}
.project-description p { margin: 0; }
.project-arrow { display: block; margin-top: 12px; text-align: right; }

.index-action {
  display: grid;
  place-items: center;
  min-height: 300px;
}
.index-action a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 20px;
  font: 400 var(--text-action)/1 var(--font-latin);
  letter-spacing: normal;
}

.approach { background: var(--scene); }
.approach-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  font: 400 24px/1 var(--font-latin);
  transition: background-color 200ms linear;
}

/* Native scrolling and snap are recommended starter behavior. */
.knowledge-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-width);
  gap: var(--rail-gap);
  overflow-x: auto;
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
}
.knowledge-card {
  min-width: 0;
  min-height: 635.33px;
  overflow: hidden;
  border-radius: var(--radius);
  scroll-snap-align: start;
  transition: opacity 200ms linear, background-color 200ms linear;
}

/* Recommended media ratio; the original crop was not established. */
.knowledge-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.knowledge-body { padding: 27px 38.125px 38.125px; }
.knowledge-category { margin: 0; font: 12px/1 var(--font-jp); }
.knowledge-title { margin: 10px 0 0; font: 700 24px/1.5 var(--font-jp); }
.knowledge-excerpt { font: 16px/1.75 var(--font-jp); }

.site-footer { padding: 250px var(--gutter) 20px; }
.action-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--rule);
}
.action-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 519px;
  padding: 38px 30px 30px;
  border: 0;
  background: var(--surface);
  text-align: left;
  transition: background-color 200ms linear;
}
.action-title { margin: 0; font: 400 24px/1 var(--font-latin); }
.action-copy { margin: 44px 0 0; font: 700 24px/1.5 var(--font-jp); }
.action-image {
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 170px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'brand info' 'copyright legal';
  align-items: center;
  gap: 100px 18px;
  margin-top: 150px;
}
.footer-brand { grid-area: brand; width: 237px; justify-self: center; }
.footer-info {
  grid-area: info;
  display: grid;
  grid-template-columns: 100.5px 100.5px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.footer-info h3 {
  margin: 0 0 22px;
  font: 400 12px/1.333 var(--font-latin);
}
.footer-info p,
.footer-info a,
.footer-legal,
.footer-copyright {
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 1.333;
  letter-spacing: normal;
}
.footer-info .jp-link {
  font: 400 14px/1.5 var(--font-jp);
  letter-spacing: var(--tracking-nav);
}
.footer-info ul { list-style: none; margin: 0; padding: 0; }
.footer-info li + li { margin-top: 5px; }
.footer-info li a { display: flex; align-items: center; min-height: 34px; }
.footer-legal { grid-area: legal; display: flex; justify-content: space-between; }
.footer-copyright { grid-area: copyright; margin: 0; }

/* Recommended focus and hover feedback. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
@media (hover: hover) {
  .action-card:hover,
  .knowledge-card:hover { background: var(--surface-raised); }
  .approach-link:hover { background: #303030; }
}

/* Recommended breakpoint; the original breakpoint was not supplied. */
@media (max-width: 800px) {
  :root {
    --gutter: 20px;
    --media-gutter: 20px;
    --hero-width: calc(100vw - 30px);
    --header-height: 58px;
    --text-intro: 18px;
    --rail-width: 260px;
    --rail-gap: 10px;
  }

  .site-header { grid-template-columns: 1fr auto; padding-inline: 10px; }
  .contact-button { gap: 8px; font-size: 14px; line-height: 1.4; }
  .primary-nav {
    position: fixed;
    inset-inline: 4px;
    bottom: calc(30px + var(--safe-bottom));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    height: 60px;
    padding-inline: 10px;
    border-radius: var(--radius);
    background: var(--scene);
  }
  .primary-nav .nav-home { display: flex; }
  .primary-nav a { width: auto; height: 60px; }
  .primary-nav a[aria-current='page']::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 10px);
    width: 20px;
    height: 1px;
    background: var(--ink);
  }
  .primary-nav[data-hidden='true'] { visibility: hidden; pointer-events: none; }

  .hero-content { padding: 76px 10px 190px 20px; }
  .hero-copy { margin-top: 40px; font-size: 18px; }
  .scroll-cue { display: none; }
  .hero .media-toggle { right: 4px; bottom: calc(120.5px + var(--safe-bottom)); }
  .section-label { font-size: 17px; }

  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project--wide { grid-column: auto; }
  .project-image,
  .project--wide .project-image { aspect-ratio: 2.002 / 1; border-radius: 0; }
  .project-caption {
    position: static;
    width: auto;
    border-radius: 0;
    background: transparent;
  }
  .project-heading { padding: 23px 0 0; }
  .project-category { margin-bottom: 10px; }
  .project-description { padding: 14px 0 0; border: 0; font-size: 18px; }
  .index-action { min-height: 220px; }
  .approach-link { border-radius: 0; background: transparent; }

  .knowledge-card { min-height: 446.88px; }
  .knowledge-body { padding: 20px 21px 24px; }
  .knowledge-title { margin-top: 20px; font-size: 18px; }

  .site-footer { padding-top: 100px; }
  .action-pair { grid-template-columns: 1fr; }
  .action-card { min-height: 0; padding: 24px 20px 50px; }
  .action-copy { margin-top: 78px; font-size: 18px; }
  .action-image { top: 24px; right: 20px; bottom: auto; left: auto; width: 76px; }

  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: 'info' 'legal' 'brand' 'copyright';
    gap: 24px;
    margin-top: 100px;
  }
  .footer-info { grid-template-columns: max-content max-content minmax(0, 1fr); gap: 20px; }
  .footer-brand { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-link,
  .approach-link,
  .action-card,
  .knowledge-card { transition: none; }
  .knowledge-rail { scroll-behavior: auto; scroll-snap-type: none; }
  /* JavaScript must separately pause media and expose a static poster. */
}

The header state attributes, mobile navigation visibility, graphic identity switch, and media button require application logic. Supply readable content by default; any reveal animation should be an enhancement that cannot leave content hidden if scripting fails.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-canvas: var(--surface);
  --color-silver: var(--ink);
  --color-deep-scene: var(--scene);
  --color-panel-hover: var(--surface-raised);
  --color-hairline: var(--rule);
  --font-editorial: var(--font-jp);
  --font-brand: var(--font-latin);
  --text-project-name: var(--text-project);
  --text-section-copy: var(--text-intro);
  --spacing-content-inset: var(--gutter);
  --spacing-project-panel: var(--panel-width);
  --spacing-knowledge-card: var(--rail-width);
  --radius-panel: var(--radius);
}

Sources & Evidence

  • Inspected original and final page: STUDIO DETAILS. Both supplied URLs are identical; recorded HTTP status is 200. The rendered document title is STUDIO DETAILS | We are Brand firm.
  • Capture record: September 12, 2026, 08:08:04.802 UTC / 17:08:04.802 JST. Viewports were 1440 × 1000 and 390 × 844 CSS pixels.
  • Visual evidence: three supplied original desktop captures covering the opening, the final project row and Approach boundary, and the footer; two supplied original mobile captures covering the opening and footer.
  • Rendered evidence: page text, destination links, custom properties, element rectangles, computed font families and sizes, colors, padding, radii, and transition declarations for both viewports. Reported document heights are approximately 8218.52px and 6551.05px.
  • Observed state changes: the header remains at the top in scrolled captures and changes from compact mark to wordmark; the mobile opening has a bottom navigation bar that is absent in the supplied footer state. Different background compositions and pause-style controls are visible. These observations do not constitute playback or click testing.
  • Inspection limitations: analysis used only the supplied evidence. Linked pages, article destinations, media files, fonts, and the privacy document were not opened. Contact submission, carousel operation, hover effects, keyboard behavior, sound, and reduced-motion behavior were not exercised. Intermediate widths and wider desktop layouts were not inspected.

This reference describes the current homepage represented by the supplied capture record. Exact values, visual estimates, calculated relationships, and recommended adaptations are separated throughout; unshown graphics and untested behavior remain explicitly unresolved.

← デザイン一覧に戻る