MANERU

日本のWebデザインを、AIの制作リファレンスに。

Eat, Play, Sleep inc.｜企画・制作・編集プロダクションのWebサイトプレビュー

DESIGN REFERENCE

Eat, Play, Sleep inc.｜企画・制作・編集プロダクション

コーポレートサイトポートフォリオ制作会社編集・出版カルチャーダークトーン大きなタイポグラフィセリフ体非対称レイアウト写真中心粒子テクスチャレスポンシブ

地域とカルチャーに根ざす制作会社のコーポレートサイト。粒子感のある暗い背景、大胆なセリフ体、左右にずらした制作実績、紙色の巨大な問い合わせエリアが特徴です。

オリジナルサイトを見る
ジャンル
デザイン・広告・制作
元の業種
企画・制作・編集・出版
デザイン分析日
2026/9/24

design.md

ダウンロード

Eat, Play, Sleep inc. — Style Reference

Monumental editorial lettering over a lived-in workshop, followed by an expansive portfolio on dark, grainy paper.

Website: eat-play-sleep.org Original URL: https://eat-play-sleep.org/ Final URL: https://eat-play-sleep.org/ Theme: predominantly dark, with a prominent pale contact section Inspected: September 24, 2026, Japan Standard Time; supplied retrieval timestamp September 23, 2026, at 21:25:56.516 UTC Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels Scope: the current corporate homepage: identity, opening statement, introduction, capabilities, selected projects, members, publishing, operated media, contact destination, and persistent publication-services promotion. Visual captures cover the desktop opening, project sequence, and contact area, plus the mobile opening and media-to-contact boundary. Other sections are supported by the supplied rendered DOM and computed measurements, with more limited visual coverage.

Eat, Play, Sleep inc. presents its planning, production, editing, publishing, and media activities through an editorial composition. The opening photograph shows an informal workshop filled with timber, shelving, folding chairs, printed matter, and everyday objects. Large, narrow, high-contrast serif lettering occupies the right side. The phrase “BUY A CULTURE” is subdued and crossed out between “BE LOCAL” and “MAKE A CULTURE.” A smaller “WITH YOUR LOVE!” signs off below.

The rest of the homepage uses warm near-black, cream lettering, muted brown-gray descriptions, and occasional orange-red category pills. Project images have square corners and generous separation. Their widths and vertical positions vary, giving the portfolio the rhythm of a magazine spread. The closing contact section reverses the dominant contrast: an enormous dark “Contact Us” spans a pale, visibly textured field.

全文を表示閉じる

Eat, Play, Sleep inc. — Style Reference

Monumental editorial lettering over a lived-in workshop, followed by an expansive portfolio on dark, grainy paper.

Website: eat-play-sleep.org Original URL: https://eat-play-sleep.org/ Final URL: https://eat-play-sleep.org/ Theme: predominantly dark, with a prominent pale contact section Inspected: September 24, 2026, Japan Standard Time; supplied retrieval timestamp September 23, 2026, at 21:25:56.516 UTC Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels Scope: the current corporate homepage: identity, opening statement, introduction, capabilities, selected projects, members, publishing, operated media, contact destination, and persistent publication-services promotion. Visual captures cover the desktop opening, project sequence, and contact area, plus the mobile opening and media-to-contact boundary. Other sections are supported by the supplied rendered DOM and computed measurements, with more limited visual coverage.

Eat, Play, Sleep inc. presents its planning, production, editing, publishing, and media activities through an editorial composition. The opening photograph shows an informal workshop filled with timber, shelving, folding chairs, printed matter, and everyday objects. Large, narrow, high-contrast serif lettering occupies the right side. The phrase “BUY A CULTURE” is subdued and crossed out between “BE LOCAL” and “MAKE A CULTURE.” A smaller “WITH YOUR LOVE!” signs off below.

The rest of the homepage uses warm near-black, cream lettering, muted brown-gray descriptions, and occasional orange-red category pills. Project images have square corners and generous separation. Their widths and vertical positions vary, giving the portfolio the rhythm of a magazine spread. The closing contact section reverses the dominant contrast: an enormous dark “Contact Us” spans a pale, visibly textured field.

How to Read This Reference

  • Measured means a value appears in the supplied rendered DOM or computed-style evidence. Dimensions are CSS pixels, rounded where appropriate.
  • Derived means a calculation from those measurements, such as a column ratio or spacing between element rectangles.
  • Visual estimate means an approximate reading of the supplied current-page captures. It is not an extracted CSS declaration or a sampled color.
  • Recommended means guidance for a new implementation. The Quick Start uses recommended implementation rules to reproduce the observed relationships.
  • Token names are descriptive aliases unless a source custom property is explicitly identified.
  • A computed font-family declaration does not identify the font used for every glyph. This distinction matters for Japanese text declared with Poppins.
  • Static captures establish appearance and some persistent positioning. They do not establish menu transitions, hover outcomes, carousel controls, video playback, or dismissal persistence.

Tokens — Colors

Default Palette
Name Value Suggested token Evidence and role
Warm Near-Black #120e09 --eps-dark Measured body and root-section background; source variable --s-color-e0981e61: #120e09ff. Also used for category text and the contact helper label.
Warm Paper #f7f4ed --eps-paper Measured primary text and header Contact fill. A useful approximation for the pale contact field, whose own background value was not included in the sampled elements.
Muted Brown-Gray #8a807b --eps-muted Measured descriptions, supporting paragraphs, member roles, and skill labels.
Category Orange-Red #fc4020 --eps-accent Measured project-category pill fill. Use as a small classification accent.
Brown Ink #231815 --eps-ink Measured header Contact text and mobile member names. Recommended approximation for dark display lettering on paper.
Navigation White #ffffff --eps-nav-white Measured desktop text links such as Works and Publishing.

The screenshots appear darker and more neutral than a large flat swatch of #120e09. Photography, darkening, and visible texture affect the final appearance. Preserve the measured base color without pretending that the exact grain opacity or image-darkening method has been recovered.

Several container nodes report #333333, while their text children report paper or muted gray. Use the text-node values for visible typography. Parent defaults are not additional accent colors.

Palette Application

The orange-red is concentrated in small project-category links. The primary contact treatments use paper and dark ink. Bright color therefore identifies the type of work without competing with its imagery.

The pale contact area is an observed section treatment. No selectable light/dark theme control is evidenced. The publishing section has measured dark text, but its complete surrounding surface is not shown in the supplied screenshots; do not derive its exact background from text color alone.

Tokens — Typography

Poppins — Navigation and English Information

Measured family: Poppins, exposed through source variable --s-font-bd948197.

Regular Poppins appears in desktop navigation and compact controls. Weight 600 appears in English capability titles and the ANTENNA and PORTLA names. These larger English labels use tight tracking, typically -0.05em.

Project headings also report Poppins as their computed family, including headings containing Japanese. The actual Japanese fallback face is not identified by the supplied font-family field. Do not describe those Japanese glyphs as Poppins.

Japanese Gothic Families

Two source families are directly measured:

  • '秀英角ゴシック金 B JIS2004', through --s-font-be9ea16d, appears in section labels, the main introductory paragraph, project descriptions, category labels, and member information.
  • '秀英角ゴシック金 M JIS2004', through --s-font-bf9194c7, appears in capability descriptions, small introductory copy, and some utility text.

The B family sometimes has computed weight 400, while other uses specify 600 or 900. Preserve the distinction between the named font face and the CSS weight. A face with B in its name is not evidence that every instance has font-weight: 700.

The property 'ヒラギノ角ゴ W8 JIS2004' is registered in the supplied custom properties, but its use is not established by the sampled text elements.

Display Serif — Family Unverified

The opening statement and “Contact Us” use tall, narrow serif forms with strong thick/thin contrast. Long vertical strokes, sharp terminals, and tightly composed words create the main visual impact.

Their exact font family, font size, tracking, and rendering format are not supplied. The lettering is visible in screenshots but absent from the corresponding sampled text-style records. It may use live text or artwork; the evidence does not resolve that implementation.

The Times declaration on HTML and BODY does not identify this display face. For a faithful implementation, use authorized lettering artwork or an independently verified, licensed face. The generic serif in the Quick Start is only a fallback.

Wordmark

The linked brand has measured bounds of 310 × 32px on desktop and 200 × 20.64px on mobile. Its rounded geometric lettering should be treated as a logo, not recreated by assuming the navigation font is an exact match. The asset format and URL are not provided.

Type Scale

All values in this table are measured unless noted otherwise. Size and line height are shown as size / line-height.

Role Desktop Mobile Family / weight Tracking
Primary navigation 14 / 14px Replaced by Menu Poppins / 400 Normal
Company Guide and Contact labels 12 / 12px Not visible in closed navigation Poppins / 400 Normal
Menu label Not visible 11 / 11px Poppins / 400 Normal
Production descriptor 12 / 12px 10 / 10px Japanese B family / 400 Normal
Main introductory paragraph 20 / 40px 16 / 32px Japanese B family / 400 Normal
Section labels 24 / 33.6px 16 / 22.4px Japanese B family / 400 Normal
Capability Japanese label 16 / 22.4px 12 / 16.8px Japanese B family / 600 Normal
Capability English title 38 / 53.2px 28 / 39.2px Poppins / 600 -0.05em
Capability description 12 / 24px 12 / 24px Japanese M family / 600 Normal
Project title 36 / 46.8px 24 / 31.2px Computed Poppins / 600; Japanese glyph face unverified Normal
Project description 12 / 20.4px 12 / 20.4px Japanese B family / 400 Normal
Project category 12 / 12px 10 / 10px Japanese B family / 400 Normal
Member name 20 / 20px 20 / 20px Japanese B family / 900 Normal
Member role 12 / 18px 10 / 15px Japanese B family / 900 Normal
Member skill labels 12 / 18px 12 / 18px Japanese M family on desktop; Poppins on mobile / 400 0.07em
Publication title 28 / 39.2px 20 / 28px Japanese B family / 500 Normal
Read More 14 / 23.8px 10 / 17px Poppins / 600 Normal
Media name 52 / 52px 36 / 36px Poppins / 600 -0.05em
Media description 12 / 20.4px 12 / 20.4px Japanese B family / 600 Normal
Contact helper 24 / 33.6px 16 / 22.4px Japanese B family / 400 Normal
Copyright 10 / 14px 10 / 14px Poppins / 400 Normal
Display Lettering Estimates
Element Desktop visual estimate Mobile visual estimate
Opening statement Main visible capital height approximately 100px; longest line approximately 860px wide Main visible capital height approximately 50px; lettering block approximately 230px wide
Opening sign-off Visible letter height approximately 30–35px Approximately 16–18px
Contact Us Visible lettering approximately 1260px wide and 275px high Approximately 330px wide and 70–75px high

These are visible letter bounds, not CSS font sizes. Font metrics and any artwork view box can produce substantially different layout-box dimensions.

Tokens — Spacing & Shapes

Density: small information text surrounded by large images and substantial open space.

Alignment: desktop uses several distinct rails: a 50px header inset, 90px main content inset, narrow side notes, and larger image blocks. Mobile consolidates most content into a 330px column with 30px side gutters.

Spacing Scale
Relationship Desktop Mobile Evidence
Header horizontal inset 50px 30px Measured
Main content inset 90px 30px Measured across project and media elements
Gap between ordinary desktop navigation links 40px Not applicable Derived from adjacent link rectangles
Company Guide to Contact gap 15px Not applicable Derived
Section label to introductory copy, sampled project section 90px 40px Derived from element boundaries
Project image to title 60px 20px Derived
Project title to description 20px 10px Derived
Project description to category pills 30px 20px Derived
Gap between adjacent category pills 12px 12px Derived
Category row to next project image, sampled mobile sequence Varies 40px Derived
PORTLA content end to contact link start 200px 100px Derived from document rectangles
Promotion bottom clearance 50px 30px Derived from viewport and link bounds

These relationships do not establish a universal 10px spacing grid. The page also contains fractional widths and content-dependent heights.

Layout Measurements
Element Desktop at 1440 × 1000 Mobile at 390 × 844
Header bounds 1440 × 100px, at (0, 0) 330 × 36px, at (30, 20)
Logo link 310 × 32px, at (50, 34) 200 × 20.64px, at (30, 27.67)
Company Guide 151.70 × 30px Not visible in closed navigation
Header Contact 100.77 × 30px Not visible in closed navigation
Menu control Not visible 72.38 × 23px
Main content width 1260px 330px
First featured project image link 945 × 708.75px, x = 405px 330 × 247.5px, x = 30px
Sakata project image link 579.59 × 434.69px, x = 90px 330 × 247.5px, x = 30px
Kure project image link 579.59 × 410.69px, x = 770.41px 330 × 233.75px, x = 30px
Gap between middle project columns Approximately 100.81px Single column
Kure image top relative to Sakata image top 360px lower Follows the preceding project
Final featured project image link 945 × 708.75px, x = 90px 330 × 247.5px, x = 30px
Contact link bounds 1260 × 756.38px 330 × 328.98px
Promotion link 300 × 140.06px, x = 70px 351 × 95.64px, x = 19.5px
Document height Approximately 15993px Approximately 10017px

The desktop middle project images each occupy approximately 46% of the content width, leaving approximately 8% between them. Featured images occupy 75%. These are derived proportions at the inspected size, not recovered responsive CSS formulas.

Border Radius
Element Treatment
Project image links Measured 0px; square corners
Project categories Measured 20px radius; capsule appearance
Header Company Guide and Contact Measured 20px radius
Mobile Menu Measured 20px radius
Promotion panel Nearly square corners with a very small apparent rounding; exact value unverified
Promotion close symbol Visually circular, approximately 30px diameter

The close button has a 30 × 30px desktop DOM box. On mobile, the sampled button wrapper measures 363 × 30px, while the visible circular symbol remains small at the right. Do not mistake the wrapper width for the icon diameter.

Components

Persistent Header

Role: maintain identity and access to the wider corporate website.

On desktop, the white wordmark sits at the left while a single navigation line occupies the right. Works, Publishing, Media, About, and News are plain text links. Company Guide is a fine outlined capsule; Contact is a paper-filled capsule with brown text. There is no opaque header bar in the supplied captures.

Measured destinations include /works, /publishing, /#media, /about, /news, and /contact. Company Guide points to an external document viewer. These destinations establish information architecture, not the design or behavior of the destination pages.

On mobile, the full navigation disappears from the visible interface. The logo becomes 200px wide and an outlined Menu button occupies the right side. The header retains approximately 30px side clearance.

The header remains in the same screen region across the supplied scrolled views. Persistent positioning is visually supported; the sampled styles do not include the exact positioning declaration. The Menu open state was not supplied.

Opening Statement

Role: express the company's cultural stance before introducing its services.

Build the composition from a full-width workshop photograph, substantial image darkening, a fade toward the dark page field near the bottom, and right-aligned display lettering. Preserve visible environmental detail: the image should still read as a specific, occupied place.

Desktop lettering has three main lines:

  1. BE LOCAL
  2. BUY A CULTURE, subdued and crossed out
  3. MAKE A CULTURE

The smaller WITH YOUR LOVE! sits below, aligned to the same right edge. The main statement begins around x = 490px at its widest line and finishes near the 90px content inset.

Mobile changes the line composition. BE LOCAL remains one line; BUY A CULTURE becomes two lines; MAKE A CULTURE becomes two lines. The block stays right aligned, around x = 128–360px. The opening photograph is cropped much more tightly, with lettering placed over its lower portion and the dark fade.

The subdued sentence is a graphic rhetorical treatment. There is no evidence that it is a disabled control. The photograph's media type and any slideshow or video behavior are unverified.

Introductory Editorial Spread

Role: explain the production's identity and point of view.

At desktop, a small note starts at x = 90px with a width of 189px and typography of 10 / 15px. The larger statement begins near x = 956px, is approximately 394px wide, and uses 20 / 40px paper-colored Japanese text. Both measured paragraphs start at document y = 1067px.

This arrangement leaves a large interval between a modest side note and a prominent right-hand statement. Avoid automatically centering the main paragraph or stretching it into a conventional full-width introduction.

Mobile uses a 330px-wide statement at x = 30px and 16 / 32px. Its supplied text differs from desktop: the mobile version describes the business's beginnings through ANTENNA. This is an observed content difference, not merely a line-wrap change. A new implementation should make an explicit editorial decision about responsive copy.

Capability Blocks

Role: organize the company's approach into three principles.

Each block contains a small Japanese label, a larger English title, and a compact muted paragraph. The observed pairs are “潮目を読む” / READ THE TIDE, “輪郭を描く” / DRAW YOUR EDGE, and “流儀を育む” / NURTURE THE STYLE.

The English titles use Poppins 600 with -0.05em tracking. Desktop descriptions are approximately 359px wide; mobile descriptions occupy the 330px content column. Their type remains 12 / 24px at both inspected sizes.

Desktop measurements place the capability blocks at the left and a separate company explanation at the far right, approximately 250px wide. On mobile, that explanation appears above the capability sequence. The section label remains aligned toward the right.

The supplied screenshots do not cover the full intervening composition before this section. Large document-coordinate intervals should not be reconstructed as empty space or an invented scroll animation.

Project Feature

Role: show a specific engagement with enough context to communicate its purpose.

The repeated anatomy is an image link, a large title, a smaller description, and one or more category links. The image, title, and paragraph sit directly on the page field. There is no visible enclosing card surface or elevation shadow.

Desktop featured images are 945px wide. The first is pushed right to x = 405px, leaving an introductory note on the left. The last is aligned to the left content rail. Titles occupy approximately 80% of the image width; descriptions occupy approximately 56%.

The middle two projects form a staggered pair. Their images are approximately 580px wide, with approximately 101px between columns. The right-hand Kure project begins 360px lower. The Sakata title is approximately 464px wide and its description approximately 325px wide.

On mobile, all four image links are 330px wide and follow a single vertical sequence. The two middle projects retain narrower 231px title and description columns, while the featured projects use 264px columns. This deliberate asymmetry survives the loss of the desktop grid.

The supplied DOM establishes image links and separate category links. It does not establish that every title and description belongs to one large clickable card. In a new implementation, keep category links outside any project-wide anchor to avoid nested links.

Category Pills

Role: provide project classification and navigation to category pages.

Use orange-red #fc4020, dark #120e09 text, and a 20px radius. Measured padding is 6px 9px. Desktop labels use 12 / 12px inside 26px-high pills; mobile labels use 10 / 10px inside 24px-high pills.

Examples include “イベント企画・運営”, “ブランド戦略立案”, “コンテンツ企画・制作”, and “リサーチ設計・実践”. These are links to category URLs, not evidenced in-place filter controls.

Member Sequence

Role: introduce the participating creators and their disciplines.

The rendered content contains six members. Each entry includes a name, role, and English skill labels prefixed with #. Names are 20 / 20px; skill labels are 12 / 18px with 0.07em tracking.

Measured entries share a common vertical position and continue beyond the viewport horizontally. Desktop name origins are spaced approximately 449.69px apart; mobile origins are spaced 264px apart. This supports a horizontal sequence, but does not prove dragging, snapping, autoplay, or a particular carousel library.

The “一覧を見る” link points to /teams. It appears alongside the introductory area in desktop measurements and below the member sequence in the mobile measurements.

Member imagery, complete card surfaces, and rail controls are not visually documented in the supplied captures. Do not invent those details or treat listed staff roles as website-production credits.

Publishing Feature

Role: connect the company's production work with its own publications.

The measured feature links to /publishing and includes a title, supporting copy, and Read More. Its desktop anchor is centered at x = 468px with a width of 504px. The title and description occupy a narrower 350px column within it. Mobile uses the 330px content width.

The title changes from 28 / 39.2px to 20 / 28px. Read More changes from 14 / 23.8px to 10 / 17px. The full feature is tall at both sizes, but its image dimensions and complete visual treatment are not supplied. Do not translate the anchor height into an assumed cover aspect ratio.

Operated Media Feature

Role: introduce ANTENNA and PORTLA as destinations within the company's activities.

Each destination groups an image, a small Japanese descriptor, a strong uppercase name, and a muted description. The names use Poppins 600 at 52 / 52px on desktop and 36 / 36px on mobile, with -0.05em tracking.

The mobile PORTLA capture clearly shows a landscape photograph above the text: dark hills under a gray, cloud-filled sky. The image and text align to the 30px content rail. The descriptor “文化を通じて旅を探求” sits above PORTLA; a compact four-line paragraph follows.

The original page links these features to the respective external publications. Their destination websites were not inspected. Desktop DOM measurements indicate offset placement, but the complete desktop media composition is not shown well enough to prescribe exact image crops or all intermediate offsets.

Contact Field

Role: end the homepage with a large, unmistakable route to contact.

A pale field spans the viewport. The enormous dark Contact Us lettering occupies nearly the entire content width. The Japanese helper “お問い合わせはこちらからどうぞ” is aligned to the right beneath it. A small copyright line sits lower in the section.

At desktop, the contact anchor is 1260px wide and approximately 756px tall. The screenshot shows roughly 200px of pale space above the visible display letters. At mobile, the anchor is 330px wide and approximately 329px tall, with roughly 100px before the letters. These internal clearances are visual estimates.

The DOM places the helper and copyright within the link to /contact. The pale background extends beyond the anchor's horizontal bounds. Implement the background as a full-width section and the content as an inset region.

The persistent promotion obscures some lower contact content in the supplied views. This is part of the observed capture state, not a reason to omit the helper or copyright from an implementation.

Persistent Publication-Services Promotion

Role: provide a secondary route to examples of printed-material production.

The desktop panel is a 300px-wide horizontal composition near the lower left, at x = 70px and 50px above the viewport bottom. Its paper-colored left portion contains Japanese copy and a miniature outlined action; the right portion shows printed work. A small dark circular close symbol overlaps the upper-right corner.

The main visible copy reads “紙もの”づくりの事例をまとめました. The linked destination is /lp-book.

Mobile changes the panel to a 351 × 95.64px composition, centered with 19.5px side margins and 30px bottom clearance. It is wider and much shallower than the desktop panel, with reduced supporting copy. It is not a proportionally scaled version of the desktop artwork.

The promotion remains in the same viewport position across supplied scroll captures. A close button exists, but its activation, animation, persistence across visits, and focus behavior were not exercised. Keep these behaviors explicitly unverified.

Tokens — Motion & Interaction

Measured Transition Declarations
Target Measured declaration What the evidence establishes
Many interface and content elements 0.3s cubic-bezier(0.4, 0.4, 0, 1) A common transition timing is declared; the triggering state changes are not identified.
Body background background 0.5s cubic-bezier(0.4, 0.4, 0, 1) Background interpolation is supported by the stylesheet; no specific scroll threshold or theme mechanism is established.
Project image links 1.2s cubic-bezier(0.4, 0.4, 0, 1) 0.1s A longer transition with a 100ms delay is declared; reveal direction, scale, and opacity endpoints are unknown.
Promotion close button 0.4s cubic-bezier(0.4, 0.4, 0, 1) Button transition timing is present; dismissal behavior is unverified.
Sampled element animations animation: none No CSS keyframe animation was reported for those sampled elements at collection time. This does not rule out script-driven motion, pseudo-elements, or animated images.

The repeated transition lists also include generated gradient properties. Those declarations alone do not demonstrate visibly animated gradients.

Observed and Unverified Behavior
  • The supplied capture process scrolled the page, and the screenshots show persistent header and promotion placement.
  • The Media navigation link targets the homepage's media anchor.
  • Project images, categories, publishing, media destinations, and contact have recorded link destinations.
  • No supplied interaction record establishes menu opening, hover transforms, banner dismissal, member-rail movement, or contact-form behavior.
  • A GIF URL is referenced by a root pseudo-element. Its frames, duration, and precise visual contribution were not inspected.

Recommended motion direction: retain the measured easing for short control feedback. If adding image reveals, keep them subtle and ensure the default content remains visible without scripting. Treat any chosen translation distance, opacity change, or hover zoom as a new design decision. Provide a static texture option and reduced-motion behavior.

Surfaces

Surface Observed appearance Implementation guidance
Main page Very dark, warm base with fine grain Start from #120e09; use restrained texture rather than a large visible pattern.
Opening photograph Darkened documentary image fading toward the page field Keep texture and image detail; tune the scrim against the actual photograph.
Project entries Images and text directly on the canvas Use spacing and differing widths to establish hierarchy.
Category labels Small orange-red capsules Confine the bright accent to compact classification links.
Header utility controls Fine outline or pale fill Keep their compact visual proportions and clear text labels.
Contact section Pale textured field with large dark lettering Make the color reversal a major structural event.
Persistent promotion Pale panel, printed-work image, overlapping dark close circle Keep it separate from the main content flow and make dismissal accessible.

No general card-shadow system is visible in the supplied views. Separation comes from image boundaries, open space, contrast, and the occasional fine outline.

Imagery

Photography carries locality and material detail. The opening workshop feels occupied rather than staged: wooden structure, stored tools and objects, informal seating, and a work surface. The project photographs extend that physical context. The Sakata example combines a publication interface on a tablet with an outdoor setting; the Kure guidebook is photographed against weathered concrete with stones and weeds nearby.

The grain connects photographs, dark fields, and pale paper. Its visual character is fine and irregular. Avoid substituting large halftone dots, conspicuous scratches, or a high-opacity grunge layer.

Maintain the varied image proportions. Three measured project links use a landscape 4:3 ratio. The Kure image uses approximately 1.412:1, slightly wider than 4:3. An arbitrary universal crop would change that composition.

The hero crop needs separate attention on mobile. Preserve recognizable workshop detail behind the right-aligned statement; do not simply shrink the desktop composition into the phone width.

Observed Asset References
Reference Evidence Limitation
https://storage.googleapis.com/studio-design-asset-files/projects/65qmD9j9OV/s-320x240_171de196-4906-415b-b8a0-86bc9fccee81.gif Referenced as a root-section ::before background image in the supplied rendered evidence Asset contents, intrinsic dimensions, frame timing, blend mode, and opacity were not inspected. The filename is not sufficient to verify those properties.
Wordmark, opening photograph, display lettering, project images, promotion artwork Visible in current-page captures Direct asset URLs are not provided.

Use authorized assets when available. Do not substitute project-detail URLs for image URLs or infer image filenames from project titles.

Layout & Responsive Behavior

Desktop Composition

The desktop page is an extended editorial sequence. Its main content spans 1260px, with 90px side gutters at the inspected width. The header has its own wider 1340px usable region within 50px side insets.

Hierarchy comes from offset alignment. Small section labels often sit at the right; compact explanations sit at the left; large images occupy the remaining width. The selected-work sequence alternates a right-aligned 75%-width feature, a staggered pair of 46%-width images, and a left-aligned 75%-width feature.

Descriptions remain materially narrower than their images. Enlarging every paragraph to image width would remove much of the observed rhythm.

Mobile Composition
Element Observed mobile change
Header Full navigation becomes Menu; logo width becomes 200px.
Main gutters Most content uses 30px left and right margins.
Opening statement Right alignment remains; the middle and final phrases each split across two lines.
Main introduction Uses a full 330px paragraph and different supplied copy.
Section labels Reduce from 24px to 16px and remain aligned toward the right.
Capabilities Stack vertically; English titles reduce from 38px to 28px.
Projects Images become 330px wide in one vertical sequence.
Project captions Keep narrower 231px or 264px columns rather than filling every image width.
Members Measured entries still extend horizontally beyond the viewport.
Publishing Feature and text expand to the 330px content column.
Media Image and text stack; media names reduce from 52px to 36px.
Contact Giant lettering fits the 330px content width; helper reduces to 16px.
Promotion Changes aspect ratio and occupies 90% of the viewport width.

The evidence contains a max-width: 1160px rule for responsive line-break handling. It does not establish that 1160px is the navigation or project-layout breakpoint. Intermediate widths, landscape phones, and tablet layouts were not captured.

Recommended: select breakpoints based on when navigation and project columns stop fitting. The Quick Start uses 1160px for navigation and 767px for the compact layout as adaptation choices, not recovered source rules.

The measured document heights are useful capture context. They should not become hardcoded page heights. Content, font loading, imagery, and responsive decisions determine the resulting length.

Do’s and Don’ts

Do
  • Use the measured warm near-black, paper, muted gray, and orange-red palette.
  • Make the display lettering substantially larger than navigation and supporting text.
  • Keep the opening statement right aligned on desktop and mobile.
  • Preserve the subdued, crossed-out BUY A CULTURE treatment as part of the statement.
  • Use documentary photographs with specific places, objects, and material detail.
  • Keep project images square-cornered and directly on the canvas.
  • Preserve the desktop 75% feature widths and the staggered middle pair as compositional relationships.
  • Keep descriptions narrower than their images where the evidence supports it.
  • Retain tight tracking on English capability and media names.
  • Give the pale contact section enough scale and open space to feel like a closing spread.
  • Treat the mobile promotion as a separately composed format.
  • Keep observed values, visual estimates, and new implementation decisions distinguishable.
Don’t
  • Don’t flatten every project into an identical, evenly aligned card grid.
  • Don’t apply large rounded corners, glossy gradients, or floating card shadows throughout.
  • Don’t turn every link into an orange-red call-to-action button.
  • Don’t use the HTML Times default as evidence for the display serif.
  • Don’t claim Poppins supplies the Japanese glyphs in project titles.
  • Don’t invent parallax, video, scroll pinning, or a reveal sequence from static captures and transition declarations.
  • Don’t infer member-carousel autoplay or dragging from offscreen rectangles.
  • Don’t infer publication-cover geometry from the full feature-link height.
  • Don’t copy the desktop promotion aspect ratio onto mobile.
  • Don’t let persistent overlays permanently obstruct contact information or keyboard focus.
  • Don’t infer website authorship from the team members' job titles.

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

  • Use semantic headings for the statement, sections, and project titles. If lettering is artwork, supply an equivalent accessible heading without duplicate announcements.
  • Preserve the two-tone visual treatment of the crossed-out phrase while providing a clear text alternative for the complete message.
  • Give the logo link an accessible name. Give the promotion link a descriptive name even when all visible text is embedded in artwork.
  • Implement Menu with an expanded state, a controlled navigation region, keyboard access, and predictable focus return. An overlay menu additionally needs an appropriate focus-management strategy.
  • Retain the small visible Menu capsule and close circle while increasing their usable hit areas to approximately 44px.
  • Provide visible focus indicators for project images and category links. Avoid nested interactive elements.
  • Consider increasing 10–12px supporting text for a new audience, particularly in long Japanese paragraphs. Preserve the hierarchy while testing actual readability.
  • Check muted text against its actual background. A color suitable on the dark field may need adjustment on paper.
  • Keep the promotion dismissible and prevent it from covering the final contact helper or focused controls. Hiding it near the contact section or reserving space are possible adaptations.
  • If the member sequence scrolls horizontally, make all members reachable without relying solely on dragging.
  • Use responsive image sources, declared dimensions, and deliberate object positioning. Keep the main opening image available promptly and defer lower-page assets where appropriate.
  • Provide reduced-motion behavior and a static alternative to animated texture. Do not make content visibility depend on an animation completing.

Agent Prompt Guide

Quick Color Reference
  • Main dark canvas: #120e09.
  • Primary text and pale controls: #f7f4ed.
  • Supporting descriptions: #8a807b.
  • Project-category pills: #fc4020 with #120e09 text.
  • Dark utility text: #231815.
  • Desktop ordinary navigation labels: #ffffff.
  • Pale contact background: use #f7f4ed as a recommended approximation; its exact computed background is unverified.
Overall Prompt

“Create a Japanese creative-production corporate homepage inspired by the observed Eat, Play, Sleep inc. composition. Use a warm near-black canvas, fine irregular grain, cream primary text, muted brown-gray descriptions, and small orange-red project-category pills. Open with a dark documentary photograph of a lived-in workshop and a very large, narrow, high-contrast serif statement aligned to the right. Pair compact Poppins navigation with Japanese Gothic information text. Lay out selected projects as a right-aligned large feature, two staggered medium images, and a left-aligned large feature. Keep image corners square and descriptions narrower than images. End with an oversized dark Contact Us treatment on a pale paper field. On mobile, use 30px content gutters, stack projects, preserve deliberate narrow captions, and replace the header links with Menu. Treat exact display lettering and any unverified animation as separate implementation decisions.”

Example Component Prompts
  1. Header: “A transparent persistent header with a supplied cream wordmark at left, small Poppins navigation at right, an outlined Company Guide capsule, and a pale filled Contact capsule. At 390px, use a 200px-wide logo and a small outlined Menu label within a larger accessible hit target.”
  2. Opening statement: “Place oversized narrow serif lettering over a dark, detailed workshop photograph. Right-align BE LOCAL, a subdued crossed-out BUY A CULTURE, and MAKE A CULTURE, with WITH YOUR LOVE! below. Recompose the two longer phrases into two lines each on mobile. Use authorized lettering artwork or a verified licensed face.”
  3. Project pair: “Two square-cornered landscape photographs on a grainy near-black field. At a 1260px content width, each image is about 580px wide with a 101px gap; start the right image 360px lower. Below each, use a 36px Japanese heading, a much narrower 12px description, and small orange-red category links. Stack the projects on mobile.”
  4. Media feature: “A documentary landscape photograph above a small Japanese descriptor, a tightly tracked uppercase Poppins media name, and a muted compact paragraph. Use a 330px mobile image column and generous dark breathing room below the text.”
  5. Contact field: “A full-width pale textured closing section with dark Contact Us lettering almost filling the inset content width. Add a right-aligned Japanese helper and a small copyright line. Keep enough usable space for both when a secondary promotion is present.”
  6. Promotion: “A persistent printed-material-services panel with Japanese copy on paper at left and a photograph of printed work at right. Use a 300 × 140px desktop format and a separately composed 351 × 96px mobile format. Place a small dark circular close symbol above the upper-right edge and give it a larger accessible target.”

Quick Start

CSS Custom Properties

This is an adaptation, not extracted source CSS. It preserves measured colors, type relationships, project proportions, and endpoint gutters. Breakpoints, scrim opacity, texture strength, and fallback display sizing are recommendations.

Load the named fonts through an authorized source if available. No font files, photographs, logo, or display-lettering assets are bundled with this reference. Use responsive artwork for the opening statement when faithful lettering is required; the CSS does not assume that artwork was the original implementation.

:root {
  /* Measured colors */
  --eps-dark: #120e09;
  --eps-paper: #f7f4ed;
  --eps-muted: #8a807b;
  --eps-accent: #fc4020;
  --eps-ink: #231815;
  --eps-nav-white: #ffffff;

  /* Measured family names with recommended fallbacks */
  --eps-latin: 'Poppins', sans-serif;
  --eps-jp: '秀英角ゴシック金 M JIS2004', sans-serif;
  --eps-jp-strong: '秀英角ゴシック金 B JIS2004', sans-serif;
  --eps-display: serif; /* Placeholder; source display face is unknown. */

  /* Recommended interpolation between inspected endpoints */
  --eps-gutter: clamp(30px, 6.25vw, 90px);
  --eps-section-space: clamp(100px, 13.89vw, 200px);
  --eps-header-inset: 50px;
  --eps-pair-gap: 8%;
  --eps-stagger: 360px;

  --eps-project-size: 36px;
  --eps-capability-size: 38px;
  --eps-media-size: 52px;
  --eps-section-size: 24px;
  --eps-pill-radius: 20px;
  --eps-rule: 1px;

  /* Measured timing; state changes remain implementation choices. */
  --eps-ease: cubic-bezier(0.4, 0.4, 0, 1);
  --eps-ui-duration: 300ms;
  --eps-image-duration: 1200ms;
  --eps-image-delay: 100ms;

  /* Supply an authorized static texture if desired. */
  --eps-grain-image: none;
  --eps-grain-opacity: 0.06;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--eps-paper);
  background: var(--eps-dark);
  font-family: var(--eps-jp);
}

img, svg { max-width: 100%; }
img { display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.eps-container {
  width: calc(100% - var(--eps-gutter) - var(--eps-gutter));
  margin-inline: auto;
}

/* Recommended decorative layer; it must not intercept input. */
.eps-grain {
  position: relative;
  isolation: isolate;
}
.eps-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--eps-grain-image);
  background-repeat: repeat;
  opacity: var(--eps-grain-opacity);
}

.eps-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  min-height: 100px;
  padding-inline: var(--eps-header-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.eps-logo { display: block; width: 310px; flex: none; }
.eps-logo img { width: 100%; height: auto; }
.eps-nav, .eps-nav-links, .eps-header-actions {
  display: flex;
  align-items: center;
}
.eps-nav, .eps-nav-links { gap: 40px; }
.eps-header-actions { gap: 15px; }
.eps-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--eps-nav-white);
  font: 400 14px / 1 var(--eps-latin);
  text-decoration: none;
}
.eps-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 25px;
  border: var(--eps-rule) solid rgb(247 244 237 / 35%);
  border-radius: var(--eps-pill-radius);
  font: 400 12px / 1 var(--eps-latin);
  text-decoration: none;
}
.eps-pill--filled {
  color: var(--eps-ink);
  background: var(--eps-paper);
  border-color: var(--eps-paper);
}
.eps-menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--eps-paper);
  background: transparent;
  cursor: pointer;
}
.eps-menu-toggle span {
  display: block;
  padding: 5px 20px;
  border: 1px solid rgb(247 244 237 / 35%);
  border-radius: 20px;
  font: 400 11px / 1 var(--eps-latin);
}

.eps-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
}
.eps-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.eps-hero::before {
  /* Recommended scrim values; tune to the actual photograph. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 40%) 0%,
    rgb(0 0 0 / 42%) 55%,
    var(--eps-dark) 100%
  );
}
.eps-hero-inner {
  padding-block: 32vh 120px;
  padding-block-start: 32svh;
}
.eps-hero-statement {
  width: 68.6%;
  margin-inline-start: auto;
  text-align: right;
}
.eps-hero-lettering,
.eps-hero-lettering img {
  display: block;
  width: 100%;
  height: auto;
}
.eps-hero-signoff {
  margin: 48px 0 0;
  font: 400 clamp(20px, 3vw, 42px) / 1 var(--eps-display);
}

.eps-section { padding-block: var(--eps-section-space); }
.eps-section-label {
  margin: 0 0 90px;
  text-align: right;
  font: 400 var(--eps-section-size) / 1.4 var(--eps-jp-strong);
}
.eps-small-copy {
  color: var(--eps-muted);
  font: 600 12px / 2 var(--eps-jp);
}
.eps-capability-title {
  margin: 0;
  font: 600 var(--eps-capability-size) / 1.4 var(--eps-latin);
  letter-spacing: -0.05em;
}

.eps-work { min-width: 0; }
.eps-work--feature { width: 75%; }
.eps-work--right { margin-inline-start: auto; }
.eps-work-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--eps-pair-gap);
  align-items: start;
  margin-block: 120px 90px;
}
.eps-work--offset { margin-block-start: var(--eps-stagger); }
.eps-work-image {
  display: block;
  text-decoration: none;
  border-radius: 0;
}
.eps-work-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.eps-work-title {
  width: 80%;
  margin: 60px 0 20px;
  font: 600 var(--eps-project-size) / 1.3 var(--eps-latin);
  font-family: var(--eps-latin), var(--eps-jp-strong);
  overflow-wrap: anywhere;
}
.eps-work-description {
  width: 56%;
  margin: 0;
  color: var(--eps-muted);
  font: 400 12px / 1.7 var(--eps-jp-strong);
}
.eps-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 30px;
}
.eps-category {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--eps-pill-radius);
  color: var(--eps-dark);
  background: var(--eps-accent);
  font: 400 12px / 1 var(--eps-jp-strong);
  text-decoration: none;
}

.eps-media-name {
  margin: 0;
  font: 600 var(--eps-media-size) / 1 var(--eps-latin);
  letter-spacing: -0.05em;
}
.eps-media-description {
  margin-block: 15px 0;
  color: var(--eps-muted);
  font: 600 12px / 1.7 var(--eps-jp-strong);
}

.eps-contact {
  padding: var(--eps-section-space) var(--eps-gutter) 90px;
  color: var(--eps-ink);
  background: var(--eps-paper);
}
.eps-contact-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.eps-contact-lettering,
.eps-contact-lettering img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.eps-contact-fallback {
  /* Approximate only; replace or retune after choosing the display face. */
  margin: 0;
  font: 400 clamp(60px, 18vw, 260px) / 1.05 var(--eps-display);
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.eps-contact-helper {
  margin: 30px 0 0;
  color: var(--eps-dark);
  text-align: right;
  font: 400 var(--eps-section-size) / 1.4 var(--eps-jp-strong);
}
.eps-copyright {
  margin: 100px 0 0;
  color: var(--eps-dark);
  font: 400 10px / 1.4 var(--eps-latin);
}

.eps-promotion {
  position: fixed;
  z-index: 30;
  left: 70px;
  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  width: 300px;
}
.eps-promotion-link,
.eps-promotion-link picture,
.eps-promotion-link img {
  display: block;
  width: 100%;
}
.eps-promotion-link img { height: auto; }
.eps-promotion-close {
  /* A 44px target around the observed 30px visual circle. */
  position: absolute;
  top: -21px;
  right: -19px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--eps-paper);
  background: transparent;
  cursor: pointer;
}
.eps-promotion-close::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgb(247 244 237 / 60%);
  border-radius: 50%;
  background: var(--eps-ink);
}
.eps-promotion-close span { font: 300 24px / 1 sans-serif; }

/* Recommended keyboard feedback, not an observed source treatment. */
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended breakpoints; only the endpoint layouts were inspected. */
@media (max-width: 1160px) {
  .eps-nav { display: none; }
  .eps-menu-toggle { display: inline-flex; align-items: center; }
}

@media (max-width: 767px) {
  :root {
    --eps-gutter: 30px;
    --eps-section-space: 100px;
    --eps-project-size: 24px;
    --eps-capability-size: 28px;
    --eps-media-size: 36px;
    --eps-section-size: 16px;
  }
  .eps-header {
    inset: 20px 30px auto;
    min-height: 36px;
    padding: 0;
    gap: 16px;
  }
  .eps-logo { width: 200px; max-width: calc(100% - 90px); }
  .eps-hero { min-height: 780px; min-height: max(740px, 92svh); }
  .eps-hero-inner { padding-block: 38svh 90px; }
  .eps-hero-statement { width: 70%; }
  .eps-hero-signoff { margin-block-start: 36px; }
  .eps-section-label { margin-block-end: 40px; }
  .eps-work--feature { width: 100%; }
  .eps-work-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    margin-block: 40px;
  }
  .eps-work--offset { margin-block-start: 0; }
  .eps-work-title { width: 70%; margin-block: 20px 10px; }
  .eps-work-description { width: 70%; }
  .eps-work--feature .eps-work-title,
  .eps-work--feature .eps-work-description { width: 80%; }
  .eps-work-tags { margin-block-start: 20px; }
  .eps-category { font-size: 10px; }
  .eps-media-description { margin-block-start: 10px; }
  .eps-contact { padding-bottom: 30px; }
  .eps-copyright { margin-block-start: 60px; }
  .eps-promotion {
    left: 5%;
    width: 90%;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .eps-site *, .eps-site *::before, .eps-site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Use .eps-site on the page wrapper for the reduced-motion rule. Use .eps-work--feature.eps-work--right for the first large project, .eps-work-pair around the two middle projects, .eps-work--offset on the right member of that pair, and .eps-work--feature for the final large project. Keep images at their natural aspect ratios.

For the promotion, supply separate desktop and mobile sources in a picture element. The CSS intentionally does not stretch one image between the two observed formats. Put a real button beside the link, give it an accessible dismissal label, and wire its handler to hide the promotion. If implementing Menu, connect the visible control to an accessible navigation panel; the closed-state CSS alone is not a complete menu implementation.

The Quick Start leaves original reveal behavior and the member rail unimplemented because their interaction models were not verified. It also requires a deliberate solution for promotion overlap near contact. Those decisions should be tested at both inspected viewport sizes.

Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This is not evidence that the original site uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-eps-dark: var(--eps-dark);
  --color-eps-paper: var(--eps-paper);
  --color-eps-muted: var(--eps-muted);
  --color-eps-accent: var(--eps-accent);
  --color-eps-ink: var(--eps-ink);

  --font-eps-latin: var(--eps-latin);
  --font-eps-jp: var(--eps-jp);
  --font-eps-jp-strong: var(--eps-jp-strong);
  --font-eps-display: var(--eps-display);

  --text-eps-project: var(--eps-project-size);
  --text-eps-capability: var(--eps-capability-size);
  --text-eps-media: var(--eps-media-size);
  --text-eps-section: var(--eps-section-size);

  --spacing-eps-gutter: var(--eps-gutter);
  --spacing-eps-section: var(--eps-section-space);
  --radius-eps-pill: var(--eps-pill-radius);
  --ease-eps: var(--eps-ease);
}

Sources & Evidence

  • Inspected original and final page: Eat, Play, Sleep inc.. The supplied observation reports HTTP 200 and the same original and final URL.
  • Capture timestamp: September 23, 2026, at 21:25:56.516 UTC, equivalent to September 24, 2026, at 06:25:56.516 JST.
  • Desktop evidence: 1440 × 1000 CSS pixels; current-page captures of the opening, selected projects, and contact field; rendered text, link destinations, custom properties, computed styles, and element rectangles.
  • Mobile evidence: 390 × 844 CSS pixels; current-page captures of the opening and the PORTLA-to-contact boundary; corresponding rendered text and computed measurements.
  • Collection conditions: the supplied process waited for document loading, visible image decoding, and sampled layout/text stability. Initial observation lasted at least five seconds. Finite animations were awaited within bounded time limits; perpetual animations were temporarily paused during readiness checks and resumed. SharedWorkers and service workers were disabled.
  • Interaction scope: supplied scrolling and persistent-position observations only. Menu opening, link destinations after navigation, banner dismissal, hover states, member-rail controls, and contact submission were not exercised in the provided evidence.
  • Visual limitations: the supplied screenshots do not show every section. Exact display-font identity, artwork source files, texture compositing, intermediate responsive behavior, and animation endpoints remain unverified. Computed measurements for unpictured sections are reported without inventing their missing imagery or surfaces.

This reference describes the current homepage represented by the supplied captures and rendered evidence. CSS adaptations and accessibility recommendations are clearly separated from observations.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る