# Doogdesign. — Style Reference

> A quiet white exhibition space where oversized product photographs meet widely tracked, overlapping titles.

**Website:** [doogdesign.jp](https://doogdesign.jp/)
**Original URL:** https://doogdesign.jp/
**Final URL:** https://doogdesign.jp/
**Response:** HTTP 200; no redirect recorded.
**Theme:** white canvas, black interface, gray client labels, and color supplied by product photography.
**Inspected:** October 6, 2026, 01:33 JST. The supplied inspection record is timestamped October 5, 2026, 16:33:34.877 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current Japanese homepage, its first visible project, repeated desktop captures, initial and later mobile image states, rendered navigation destinations, and supplied computed styles. Linked project pages and an opened menu were not inspected.

Doogdesign. presents its product design work as a sequence of photographic exhibits. The visible interface is deliberately sparse: a small serif wordmark, two geometric utility icons, project position, language selection, and three plain navigation links. The project title supplies the typographic scale, while the photograph supplies material, depth, and color.

The defining desktop composition places a large square photograph slightly right of center. A regular-weight sans-serif title begins much farther left and crosses into the image. Its muted client credit sits below with the same left alignment. On mobile, photography becomes a vertical sequence, navigation moves to the top edge, and the utility icons occupy two adjoining black squares at the bottom right. This is a studio portfolio, with project discovery as its main task.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM rectangles and computed styles. They are exact for the recorded viewport, subject to browser rounding.
- **Visual estimates** come from the supplied screenshots. Image boundaries, photographic colors, and control backgrounds were not all represented by measured elements.
- **Calculated** values describe relationships between measured coordinates. They do not establish the original CSS formula.
- **Recommendations** and the Quick Start are implementation guidance, not verified original behavior.
- **Named tokens** are reusable aliases introduced here. Only explicitly identified source properties were present in the evidence.
- The DOM includes offscreen menu content and multiple project captions sharing similar coordinates. Their presence does not mean they were simultaneously visible.

The evidence is sufficient to describe the current visual system. It does not establish every scroll trigger, animation sequence, hover endpoint, menu state, or intermediate responsive breakpoint.

## Tokens — Colors

### Interface Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Gallery White | `#ffffff` | `--doog-canvas` | Visually observed page canvas. The measured HTML and body backgrounds are transparent, so this is the rendered appearance rather than a measured body fill. |
| Interface Black | `#000000` | `--doog-ink` | Measured project titles and navigation text; visually observed desktop icons and mobile control surfaces. |
| Client Gray | `#888888` | `--doog-muted` | Measured client attribution beneath project titles at both viewports. |
| Secondary Menu Gray | `#c9c8c8` | `--doog-menu-muted` | Measured contact, social, and copyright text in the offscreen navigation DOM. Its appearance in an opened menu is unverified. |
| Reversed White | `#ffffff` | `--doog-on-dark` | Visually observed mobile utility glyphs; also measured on offscreen primary menu links. |

The lead photograph contains cool slate gray, pale neutral gray, and charcoal. A representative slate approximation is `#6d7b84`, but this is a **visual estimate of image content**, not a UI accent token. Do not tint the page or navigation blue to imitate the product.

### Theme Behavior

Only the white presentation was captured. No theme selector or dark-mode behavior is evidenced. The black mobile utility dock is a local control surface, not proof of a separate dark theme.

The supplied custom properties include many WordPress preset gradients, colors, and shadows. These are not evidence that the visible homepage uses them. The captured interface has no corresponding rainbow palette, gradient panels, or shadow-based card system.

## Tokens — Typography

### Project Titles and Interface Text

The measured family declaration begins with:

```css
Helvetica, 'Open Sans', Arial,
'Hiragino Kaku Gothic Pro', 'Noto Sans JP',
'Yu Gothic', YuGothic, Meiryo, Osaka,
'MS PGothic', sans-serif
```

This is a shortened transcription of the declared stack; the evidence also includes Japanese-name variants of several fallback families. It does not identify which font file or fallback actually rendered each glyph. Do not describe Open Sans as a verified downloaded brand font.

The project titles use **weight 400**, not bold. Their impact comes from size, generous tracking, tight line height, and overlap with the photograph. Preserve deliberate line breaks such as `Vacuum-insulated` followed by `straw bottle`.

### Wordmark

The visible `Doogdesign.` mark has serif letterforms and a final period. Its enclosing box measures approximately 127 × 24.23px on desktop and 104 × 19.84px on mobile. The supplied DOM does not identify its asset URL or typeface.

Treat the wordmark as brand artwork. The root element's computed `Times` family is not evidence for the logo's font. Use an authorized original asset where available; a generic serif text replacement is only an approximation.

### Type Scale

| Role | Desktop | Mobile | Weight | Tracking | Evidence |
| --- | --- | --- | --- | --- | --- |
| Project title | `63.6px / 63.6px` | `31px / 31px` | 400 | `5px` / `3px` | Measured H2 styles |
| Client credit | `22px / 22px` | `11px / 11px` | 400 | `2px` at both sizes | Measured paragraph styles |
| Visible navigation | `16px / 16px` | `13px / 13px` | 400 | `3px` / `1px` | Measured visible links |
| Selected `Ja` | Same as navigation | Same as navigation | 700 | Same as navigation | Measured; underline also visible |
| Project counter | `16px / 14px` | `13px / 14px` | 300 | `1px` | Measured counter links |
| Base body | `16px / 16px` | `13px / 13px` | 300 | `1px` | Measured body styles |
| Offscreen menu support text | `16px / 16px` | `11px / 11px` | 300 | `1px` | Measured, not visually inspected open |
| Mobile `SCROLL` label | — | `11px / 11px` | 300 | `1px` | DOM evidence; located below the initial viewport |

The title and credit retain a **20px vertical gap** at both inspected sizes. The title size approximately halves on mobile, but that gap does not.

The original root font size is measured at 10px. The Quick Start keeps a conventional root and uses explicit pixel values and custom properties; do not copy presumed source rem values into a different root system.

## Tokens — Spacing & Shapes

### Spacing Scale

There is no supplied evidence of a unified original spacing scale. The following are component-specific measurements suitable for reusable aliases.

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Wordmark top and left inset | `50px` | `20px` | Measured |
| Visible navigation right inset | `50px` | `20px` | Measured |
| Visible navigation bottom/top position | Bottom `50px` | Top `23px` | Measured |
| Project caption left edge | `189.75px` | `51.39px` | Measured |
| Caption left edge as viewport share | Approximately `13.177vw` | Approximately `13.177vw` | Calculated relationship |
| Title-to-client gap | `20px` | `20px` | Calculated from measured text boxes |
| First image side margins | Asymmetric | Approximately `60px` | Screenshot estimate |
| First-to-second image clear gap | Not visible | Approximately `170px` | Screenshot estimate |
| Mobile utility dock right/bottom inset | — | Approximately `20px` | Screenshot estimate |

The shared caption inset is a useful compositional rule. It is supported by both measured viewports, but the original CSS expression was not supplied.

### Border Radius and Elevation

| Element | Treatment | Evidence |
| --- | --- | --- |
| Product image | Square corners; no visible frame | Screenshots |
| Mobile utility buttons | Square adjoining surfaces | Screenshots |
| Desktop icons and links | Unboxed | Screenshots |
| Counter separator | Thin straight rule | Screenshots |
| General cards | No card system visible | Captured homepage scope |
| UI shadows | None visible | Product shadows belong to the photography |

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Document height | `1000px` | Approximately `3434px` | Measured |
| Main content bounds | `10080 × 1000px` | `390 × 3433.66px` | Measured |
| First image frame | Approximately `(366, 107)`, `786 × 786px` | Approximately `(60, 170)`, `270 × 270px` | Screenshot estimate |
| First title box | `(189.75, 415.41)`, `584.39 × 127.19px` | `(51.39, 120)`, `293.86 × 62px` | Measured |
| First client box | Top `562.59px`, height `22px` | Top `202px`, height `11px` | Measured |
| Grid icon box | `(1315, 54)`, `24 × 24px` | `(288, 791)`, `18 × 18px` | Measured anchor boxes |
| Menu glyph box | `(1356, 56)`, `30 × 20px` | `(339, 795)`, `14 × 10px` | Measured anchor boxes |
| Utility dock | No shared filled surface | Approximately `(273, 776)`, `97 × 48px` | Screenshot estimate |

The desktop main width is exactly seven times the viewport width: `10080 / 1440 = 7`. This supports a seven-stage horizontal structure. It does not establish how wheel, drag, keyboard, or automatic advancement operates.

The initial desktop title-and-client group is approximately 169.19px high and vertically centered around y = 500px. The image is also centered vertically. The title extends about 176px to the left of the image boundary, creating the characteristic overlap.

## Components

### Brand Anchor

**Role:** persistent studio identity and a route back to the homepage.

Place the small serif wordmark at the upper left, without a surrounding navigation bar, border, or filled container. Preserve its final period and restrained scale. Its measured wrapper begins at `(50, 50)` on desktop and `(20, 20)` on mobile.

The rendered link points to the homepage. Its extracted text is empty, so the supplied evidence does not establish its accessible name. A meaningful home-link name is a recommended implementation addition.

### Project Presentation Stage

**Role:** introduce a selected design through one dominant photograph, a project title, and its client.

The desktop stage has three layers:

1. A white viewport-sized exhibition area.
2. A large, square, softly lit product photograph placed slightly right of center.
3. A left-aligned title and client group overlapping the photograph.

The initial title is two lines at 63.6px with 5px tracking. The client sits 20px below in 22px gray text. There is no visible category badge, paragraph, purchase control, or framed CTA in the captured stage.

The first image is a close view of a blue-gray bottle lid photographed from above. Its rounded form contrasts with the rectangular image boundary and geometric interface.

### Project Sequence

Seven project/client pairs are present in the rendered homepage. The following routes are evidenced as mobile image-link destinations; their destination pages were not opened.

| Project | Client label | Observed destination |
| --- | --- | --- |
| Vacuum-insulated straw bottle | Tiger Corporation | `/projects/tiger_mtsw/` |
| High-durability water pitcher | MARUKEI | `/projects/mellina-water-pitcher/` |
| Zero Plastic Handle™ | Asahi Industry | `/projects/zero-plastic-handle/` |
| FLATTA | TANNER | `/projects/tanner-flatta/` |
| Wired Lock | TANNER | `/projects/tanner-wired-lock/` |
| Vacuum Insulated Pot PWR | Tiger corporation | `/projects/tiger_corporation_pwr/` |
| MindDuo Max | BenQ corporation | `/projects/mindduo-max/` |

These are project client labels, not website production credits.

On mobile, the first image appears at about y = 170px and the second begins at about y = 610px. The second image is approximately 265px wide, slightly narrower than the first 270px image. Maintain the editorial variation in image framing rather than forcing every asset into an identical cropped card.

### Project Caption Layer

**Role:** identify the currently presented work without competing with the image.

The title and client use a shared left edge. On desktop, the group is vertically centered and intentionally straddles the image boundary. On mobile, the first title begins at y = 120px, about 50px above the first image. Its second line and client credit overlap the upper part of the image area.

Multiple project headings have similar viewport coordinates in the DOM, while only the first caption is visible in the supplied frames. This is consistent with a separately managed caption layer, but the positioning method and visibility logic were not supplied.

**Important capture limitation:** the later mobile frame shows different imagery, including two lamps, while the bottle title, Tiger Corporation label, and `1 — 7` counter remain visible. Do not claim that caption synchronization was verified, or reproduce this mismatch as an intentional design requirement.

### Language and Primary Navigation

**Role:** switch language and access Projects, About, and Service.

On desktop, the visible row sits near the bottom-right corner. The links use 16px regular text, 3px tracking, and no button surfaces. `Ja` is bold and underlined; `En` points to `https://en.doogdesign.jp/`.

On mobile, the same links move into the top row beside the wordmark, using 13px type and 1px tracking. The compact composition has a measurable collision risk: the logo wrapper ends at x = 124px while the navigation begins at x ≈ 122.06px. Their boxes overlap by about 2px at the inspected width.

Record this as an observed constraint. For reuse, allow wrapping or a second navigation row instead of preserving the collision.

### Project Index and Menu Controls

**Role:** provide a direct project-index link and access to extended navigation.

The desktop pair sits at the upper right. The project-index symbol is a 3 × 3 matrix of filled squares. The adjacent menu symbol has three horizontal black strokes. Both are unboxed against white.

On mobile, the controls relocate to the bottom right and reverse to white glyphs on black square surfaces. The dock is approximately 97 × 48px, including a narrow divider. The glyphs shrink, but the surrounding surfaces remain substantial.

The grid link points to `/projects/`; it is not evidence of an in-place grid/list toggle. The menu anchor points to `#`. No opened state or activation result was captured.

### Project Position Indicator

**Role:** show current position within the seven-project sequence.

Desktop anatomy is a current numeral, a short horizontal rule, and the total `7`, positioned near the lower left. The current number begins around x = 52px and the total around x = 114px. A roughly 30px rule separates them.

On mobile, the indicator becomes a vertically oriented group near the right edge, around the middle of the viewport. Its measured text boxes lie near x = 358.36px. Preserve the small scale and delicate rule.

The DOM contains anchors from `#contents1` through `#contents7`, sharing the current-number location. The supplied screenshots show only `1`. Active-state changes, keyboard behavior, and anchor navigation were not exercised.

### Extended Navigation — DOM Evidence Only

**Role:** provide the full site map, contact, and social links.

The offscreen DOM contains HOME / ホーム, PROJECTS / 実績一覧, NEWS / 新着情報, ABOUT / 会社概要, SERVICE / 業務内容, and PUBLICITY / 掲載情報. Contact, Instagram, Facebook, and a copyright line follow.

At desktop size, the six primary links occupy two columns of three rows. The measured column gap is about 80px, with 69px-high link boxes and 35px row gaps. On mobile, they occupy one column, with approximately 45.41px-high boxes and 20px gaps. The mobile content begins 62px inside its offscreen region.

Primary links compute to white and support text to `#c9c8c8`. These values suggest a reversed navigation treatment, but the opened panel background, boundaries, backdrop, close control, and focus behavior were not visually verified. Do not treat this as a fully inspected overlay specification.

## Tokens — Motion & Interaction

| Element or behavior | Supplied evidence | What can safely be concluded |
| --- | --- | --- |
| Body movement | `transition: margin-left 0.4s` | A 400ms margin transition is defined; its trigger and relationship to gallery or menu movement are unverified. |
| Menu anchor | `transition: 0.4s` | A 400ms transition is recorded; the changing properties and end states are not established. |
| Offscreen primary menu links | `transition: opacity 0.3s` | A 300ms opacity transition is defined; hover and active opacity values are absent. |
| Project-number links | `transition: opacity 0.3s` | A 300ms opacity transition is defined; number changes were not captured. |
| Sampled element animations | `animation: none` | No CSS keyframe animation is reported on those sampled elements. This does not exclude JavaScript or unsampled motion. |
| Repeated desktop frames | Same initial bottle composition | No autoplay, advancement interval, or transition sequence can be inferred. |
| Later mobile frame | Different image content, unchanged first caption and counter | Image traversal is visible; coordinated state updates are not verified. |

Many elements report only `transition: all`, without a useful duration in the supplied serialization. Do not turn that into a claim that every element animates.

The capture process waited for document readiness, visible image decoding, and sampled layout stability, within finite limits. It also handled perpetual animations during readiness checks. These checks improve screenshot reliability but do not demonstrate semantic completeness or reveal unexercised interactions.

**Recommended motion direction:** keep optional fades and shifts restrained, using the observed 300–400ms durations as a starting point. Do not add autoplay, parallax, image zoom, spring motion, or wheel hijacking as though they were original behavior. Provide reduced-motion handling for any new transitions.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Flat white | Provides exhibition-like space around the work |
| Product photograph | Neutral studio field with natural material shading | Supplies depth, texture, and most visible color |
| Caption | Unboxed black title and gray client text | Connects the work to its identity while overlapping the photograph |
| Desktop navigation | Plain text and black geometric glyphs | Keeps interface weight low |
| Mobile utility dock | Two square black surfaces with white glyphs | Keeps utilities recognizable above scrolling content |
| Extended menu | White and light-gray text recorded offscreen | Full surface treatment remains unverified |

There is no observed general elevation system. Separate regions through placement, scale, whitespace, and local black/white reversal rather than rounded containers and shadows.

## Imagery

The homepage uses product photography to explain shape and material. The lead image emphasizes the lid's large circular body, broad latch, softly textured plastic, and cool gray finish. Its neutral background and diffuse shadow make the object feel tangible without adding a decorative environment.

The initial mobile frame also reveals part of a pale pitcher photograph. A later frame shows two white lamps at different scales, with slim stems and dark vent-like detail beneath their heads. This demonstrates that not every project uses the same tight square crop: some compositions rely on isolated objects and substantial internal white space.

### Image Treatment

- Preserve soft highlights, restrained saturation, and natural photographic shadows.
- Keep square outer image corners and avoid ornamental borders.
- Retain empty space within the photograph; it is part of the composition.
- Allow the project heading to cross the image boundary where contrast permits.
- Keep original aspect ratios for subsequent work unless an authorized crop is available.
- Use high-resolution raster assets with normal image rendering; pixelation is not part of this design.

### Observed Asset References

| Visual | Evidence | Asset URL status |
| --- | --- | --- |
| Doogdesign. wordmark | Desktop and mobile captures; measured enclosing boxes | Asset URL not supplied |
| Blue-gray bottle lid photograph | Initial desktop and mobile captures | Asset URL not supplied; project destination is `/projects/tiger_mtsw/` |
| Pale pitcher photograph | Lower portion of the initial mobile capture | Asset URL not supplied; second project destination is `/projects/mellina-water-pitcher/` |
| Two lamp images | Later mobile capture; two image links to the same final project are present in the DOM | Asset URLs not supplied; destination is `/projects/mindduo-max/` |
| Grid and menu symbols | Both viewport captures and measured anchor boxes | Implementation technique not supplied |

Project destinations are not image URLs. No image filename, CMS upload path, SVG source, or photographer attribution can be established from this evidence.

## Layout & Responsive Behavior

### Desktop: Horizontal Exhibition Structure

The measured main element spans 10080px horizontally while the document remains 1000px tall. Seven project entries are present, matching seven viewport widths. The visible first stage fills the screen without conventional stacked homepage sections.

At the inspected size, the image is approximately 786px square and its center lies around x = 759px, slightly right of the viewport midpoint at 720px. The caption begins at x = 189.75px. This asymmetry is central to the composition: neither the image nor the text should be centered independently into a generic hero layout.

The wordmark and utility icons occupy the top corners. Project position and primary navigation occupy the bottom corners. This perimeter placement leaves the middle almost entirely to the work.

### Mobile: Vertical Images and Relocated Utilities

The document becomes approximately 3434px tall at 390px wide. The first image is about 270px square, centered with 60px side margins. The next photograph begins around y = 610px, leaving roughly 170px of white space after the first image.

The first title remains comparatively large at 31px and begins at x = 51.39px, slightly left of the image. Its client credit drops to 11px while retaining 2px tracking. The visible primary navigation moves to the top, the utility dock moves to the bottom right, and the project indicator rotates into a vertical orientation near the right edge.

The two supplied mobile frames retain the same visible header, caption, dock, and counter positions while imagery changes. This supports describing those elements as viewport-anchored in the captured states, but the source positioning mechanism and intended caption-update behavior remain unverified.

### Responsive Limits

Only two viewport widths were inspected. No exact media-query breakpoint, tablet composition, landscape-phone behavior, or safe-area handling was supplied.

The source property `--vh` equals `10px` on desktop and `8.44px` on mobile, matching one percent of the respective viewport heights. Its presence does not establish which elements use it or how it responds to browser chrome changes.

For a new implementation, select breakpoints from content fit, test intermediate widths, and explicitly handle the observed mobile brand/navigation collision. The Quick Start uses a proposed 768px layout switch and a separate narrow-header adjustment; these are recommendations.

## Do’s and Don’ts

### Do

- Build the composition around white space, product photography, and overlapping captions.
- Keep project titles regular-weight, tightly led, and widely tracked.
- Preserve the 20px title-to-client gap across the two reference sizes.
- Use black for primary text and `#888888` for source-faithful client labels.
- Retain the serif wordmark as a small, distinct brand element.
- Keep photography square-cornered and allow its internal negative space to remain visible.
- Position desktop controls around the perimeter of the viewport.
- Change the image sequence to a vertical flow on mobile.
- Use a compact black utility dock with white glyphs on mobile.
- Keep project titles, client labels, and counters synchronized in a new implementation.

### Don’t

- Don’t turn the portfolio into a conversion page with invented benefits, testimonials, pricing, or oversized CTAs.
- Don’t replace the presentation with rounded, shadowed project cards.
- Don’t make the large titles bold merely to increase prominence.
- Don’t turn a product's slate color into a global brand accent.
- Don’t copy unused CMS gradient and shadow presets into the visible design.
- Don’t infer a logo font from the root element's `Times` declaration.
- Don’t mistake the project-index link for a verified view-mode toggle.
- Don’t reproduce the captured mobile caption mismatch as an intended interaction.
- Don’t invent menu-open styling, autoplay timing, or scroll choreography.
- Don’t use inline anchor line-box heights as image dimensions or verified touch-target sizes.

## Recommended Implementation Additions

These are recommendations for reuse, not verified features of the original page:

- Give the logo, grid link, and menu control explicit accessible names. Use a button for opening a menu and expose its expanded state.
- Keep interactive targets at least 44 × 44px while preserving the smaller visible glyphs.
- Add a visible keyboard focus outline and keyboard-operable project navigation.
- Keep inactive caption layers out of the accessibility tree. Hidden or offscreen menu content should not remain unintentionally focusable.
- Update the title, client, current project number, and accessible position label from one active-project state.
- Prevent the mobile wordmark/language collision by allowing the navigation to occupy a second row.
- Test the gray client labels against their actual photographic backgrounds. For small text, consider a darker gray such as `#666666` or a placement adjustment when contrast is insufficient.
- Respect reduced motion and avoid advancing projects automatically without a usable pause mechanism.
- Preserve image dimensions before loading and prioritize only the first visible photograph; load later projects progressively.
- Include bottom safe-area clearance around the mobile utility dock.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#ffffff`.
- Titles and primary interface: `#000000`.
- Client labels: `#888888`.
- Mobile utility dock: black fill, white glyphs, square corners.
- Offscreen menu support text: measured `#c9c8c8`, with the opened surface unverified.
- Product colors remain inside the photographs.

### Overall Prompt

“Create a product design studio portfolio using a white exhibition-like canvas, a small serif wordmark, and large neutral studio photographs. At desktop size, place a square product photograph slightly right of center and overlap it with a left-aligned, regular-weight sans-serif project title. Use approximately 64px type, one-to-one line height, 5px tracking, and a 22px gray client label 20px below. Keep small navigation and geometric utility icons at the viewport edges. On mobile, use a vertical photo sequence, approximately 31px titles, a compact top navigation, a vertical project counter near the right edge, and two adjoining black utility squares at the bottom right. Preserve generous space and square image corners.”

### Example Component Prompts

1. **Project stage:** “For a 1440 × 1000 artboard, place an approximately 786px square product photograph around x = 366, y = 107. Start a two-line project title around x = 190, y = 415. Use regular black sans-serif type at 63.6px with 5px tracking; add a gray 22px client label with a 20px gap. Keep the photograph's own shadows and add no UI shadow.”
2. **Mobile project sequence:** “At 390px width, center the first 270px product image with 60px side margins and place its title near x = 51, y = 120. Use 31px regular text with 3px tracking and an 11px gray client label. Continue with generously separated photographs. In the implementation, keep every caption associated with its actual project.”
3. **Utility controls:** “Create a project-index link using a 3 × 3 square matrix and an adjacent three-line menu button. On desktop, use black glyphs without boxes. On mobile, use white glyphs inside adjoining 48px black squares with a fine divider and a 20px bottom-right inset.”
4. **Navigation:** “Use plain tracked text for Ja / En, Projects, About, and Service. Emphasize Ja with bold weight and an underline. Place the row at the bottom right on desktop and at the top on mobile, allowing a second row when necessary to avoid the wordmark.”
5. **Product photography brief:** “Photograph a single designed object against a pale neutral studio background. Emphasize material texture, precise geometry, broad soft highlights, and restrained natural shadows. Leave useful negative space for an overlapping black title. Avoid lifestyle props, colored backdrops, and added graphic effects.”

## Quick Start

### CSS Custom Properties

This is a practical adaptation of the measured first-stage composition, not recovered source CSS. It uses a contained horizontal rail on desktop and ordinary vertical flow on mobile. Its fluid formulas and breakpoints are recommendations.

The mobile captions are attached to their own project blocks, avoiding reliance on the unverified persistent-caption behavior. At narrow widths the navigation moves below the logo; this deliberately resolves the measured collision. Gallery state, counter updates, and an accessible menu controller require application code.

**Markup contract:** use a `.portfolio` wrapper containing a `.brand` image link, `.edge-nav`, `.view-tools`, `.project-position`, and a focusable `.project-rail`. Each `.project` contains a linked `.project-media` image and a `.project-caption` with `.project-title` and `.project-client`. Use nine child spans inside `.icon-grid` and three inside `.icon-menu`. Supply authorized image URLs; none were provided in the inspection evidence.

```css
:root {
  /* Observed interface colors */
  --doog-canvas: #ffffff;
  --doog-ink: #000000;
  --doog-muted: #888888;
  --doog-menu-muted: #c9c8c8;
  --doog-on-dark: #ffffff;

  /* Shortened adaptation of the measured family declaration */
  --doog-font: Helvetica, 'Open Sans', Arial,
    'Hiragino Kaku Gothic Pro', 'Noto Sans JP',
    'Yu Gothic', YuGothic, Meiryo, Osaka,
    'MS PGothic', sans-serif;

  /* Fluid interpolation is recommended, not recovered source CSS */
  --doog-title: clamp(36px, 4.416667vw, 63.6px);
  --doog-title-tracking: 5px;
  --doog-client-size: 22px;
  --doog-nav-size: 16px;
  --doog-nav-tracking: 3px;
  --doog-body-size: 16px;

  /* Measured or screenshot-derived composition aliases */
  --doog-edge: 50px;
  --doog-caption-left: 13.177083vw;
  --doog-caption-gap: 20px;
  --doog-image-size: min(54.583333vw, 78.6svh);
  --doog-image-center: 52.708333vw;
  --doog-link-duration: 300ms;
  --doog-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.portfolio,
.portfolio * {
  box-sizing: border-box;
}

.portfolio {
  position: relative;
  min-block-size: 100svh;
  color: var(--doog-ink);
  background: var(--doog-canvas);
  font-family: var(--doog-font);
  font-size: var(--doog-body-size);
  font-weight: 300;
  letter-spacing: 1px;
}

.portfolio a {
  color: inherit;
}

.brand,
.edge-nav,
.view-tools,
.project-position {
  position: fixed;
  z-index: 20;
}

.brand {
  inset-block-start: var(--doog-edge);
  inset-inline-start: var(--doog-edge);
  inline-size: 127px;
}

.brand img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.project-rail {
  display: flex;
  inline-size: 100%;
  block-size: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}

.project {
  position: relative;
  flex: 0 0 100%;
  min-inline-size: 0;
  block-size: 100%;
  scroll-snap-align: start;
}

.project-media {
  position: absolute;
  inset-inline-start: var(--doog-image-center);
  inset-block-start: 50%;
  display: block;
  inline-size: var(--doog-image-size);
  transform: translate(-50%, -50%);
}

.project-media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 78.6svh;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.project-caption {
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--doog-caption-left);
  inset-block-start: 50%;
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--doog-caption-left) - 24px);
  transform: translateY(-50%);
}

.project-title {
  margin: 0;
  font-size: var(--doog-title);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--doog-title-tracking);
}

.project-client {
  margin: var(--doog-caption-gap) 0 0;
  color: var(--doog-muted);
  font-size: var(--doog-client-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
}

.edge-nav {
  inset-inline-end: var(--doog-edge);
  inset-block-end: var(--doog-edge);
  display: flex;
  align-items: center;
  gap: 27px;
  font-size: var(--doog-nav-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--doog-nav-tracking);
}

.edge-nav a {
  text-decoration: none;
  transition: opacity var(--doog-link-duration);
}

.language-links {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-end: 15px;
}

.edge-nav [aria-current='page'] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.view-tools {
  inset-block-start: 44px;
  inset-inline-end: var(--doog-edge);
  display: flex;
}

.tool {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--doog-ink);
  background: transparent;
  cursor: pointer;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  inline-size: 24px;
  block-size: 24px;
}

.icon-grid > span,
.icon-menu > span {
  display: block;
  background: currentColor;
}

.icon-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  inline-size: 30px;
  block-size: 20px;
}

.icon-menu > span {
  inline-size: 100%;
  block-size: 3px;
}

.project-position {
  inset-inline-start: var(--doog-edge);
  inset-block-end: var(--doog-edge);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 14px;
  letter-spacing: 1px;
}

.position-number {
  min-inline-size: 14px;
  text-align: center;
}

.position-rule {
  display: block;
  inline-size: 30px;
  block-size: 1px;
  background: currentColor;
}

/* Recommended feedback; the original opacity endpoint is unknown. */
@media (hover: hover) {
  .edge-nav a:hover {
    opacity: 0.65;
  }
}

.portfolio :focus-visible {
  outline: 2px solid var(--doog-ink);
  outline-offset: 5px;
}

/* Proposed breakpoint, not an observed source media query. */
@media (max-width: 767px) {
  :root {
    --doog-edge: 20px;
    --doog-title: clamp(24px, 7.948718vw, 31px);
    --doog-title-tracking: 3px;
    --doog-client-size: 11px;
    --doog-nav-size: 13px;
    --doog-nav-tracking: 1px;
    --doog-body-size: 13px;
  }

  .brand {
    inline-size: 104px;
  }

  .edge-nav {
    inset-block-start: 23px;
    inset-block-end: auto;
    gap: 18px;
  }

  .language-links {
    gap: 4px;
    margin-inline-end: 0;
  }

  .project-rail {
    display: block;
    block-size: auto;
    padding-block: 170px 120px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .project {
    block-size: auto;
    margin-block-end: 170px;
  }

  .project:last-child {
    margin-block-end: 0;
  }

  .project-media {
    position: static;
    inline-size: min(400px, calc(100vw - 120px));
    margin-inline: auto;
    transform: none;
  }

  .project-media img {
    max-block-size: none;
  }

  /* Keep each caption connected to its own photograph. */
  .project-caption {
    inset-block-start: -50px;
    transform: none;
  }

  .view-tools {
    inset-block-start: auto;
    inset-block-end: calc(20px + var(--doog-safe-bottom));
    inset-inline-end: 20px;
    gap: 1px;
    background: #666666;
  }

  .tool {
    inline-size: 48px;
    block-size: 48px;
    color: var(--doog-on-dark);
    background: var(--doog-ink);
  }

  .icon-grid {
    inline-size: 18px;
    block-size: 18px;
  }

  .icon-menu {
    inline-size: 14px;
    block-size: 10px;
  }

  .icon-menu > span {
    block-size: 1px;
  }

  .project-position {
    inset-inline-start: auto;
    inset-inline-end: 18px;
    inset-block-start: calc(50% - 6px);
    inset-block-end: auto;
    gap: 4px;
    font-size: 13px;
    writing-mode: vertical-rl;
    transform: translateY(-50%);
  }

  .position-number {
    min-inline-size: 0;
  }

  .position-rule {
    inline-size: 20px;
    block-size: 1px;
  }
}

/* Recommended correction for the observed narrow-header collision. */
@media (max-width: 420px) {
  .edge-nav {
    inset-block-start: 52px;
    inset-inline-start: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
  }
}

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

Use an explicit line break in the first project heading to retain the captured two-line composition. Derive the total counter from the actual project collection. A CSS rail alone does not implement the original gallery's unknown input handling or synchronize the fixed position indicator.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: var(--doog-canvas);
  --color-ink: var(--doog-ink);
  --color-client: var(--doog-muted);
  --color-on-dark: var(--doog-on-dark);

  --font-portfolio: var(--doog-font);
  --text-project: var(--doog-title);
  --text-client: var(--doog-client-size);
  --text-navigation: var(--doog-nav-size);

  --tracking-project: var(--doog-title-tracking);
  --tracking-navigation: var(--doog-nav-tracking);

  --spacing-frame: var(--doog-edge);
  --spacing-caption-gap: var(--doog-caption-gap);
  --radius-project: 0px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [https://doogdesign.jp/](https://doogdesign.jp/). The supplied browser record reports HTTP 200 at the same URL and the document title `Doogdesign. Inc. / Kazuya Koike ‐ プロダクトデザイン事務所`.
- **Inspection timestamp:** October 5, 2026, 16:33:34.877 UTC, equivalent to October 6, 2026, 01:33:34.877 JST.
- **Desktop evidence:** three supplied 1440 × 1000 captures showing the initial bottle composition, plus rendered text, link destinations, element rectangles, computed typography, transitions, and custom properties. Measured document height: 1000px; main width: 10080px.
- **Mobile evidence:** supplied 390 × 844 initial and later captures, plus the mobile DOM/style record. Measured document height: approximately 3434px. The later frame shows changed image content with the first caption and counter still visible.
- **Navigation evidence:** original-page links establish project, company, service, news, publicity, contact, language, and social destinations. Destination pages were not inspected and are not sources for their visual design.
- **Inspection limits:** no opened menu, hover endpoint, keyboard session, autoplay sequence, intermediate breakpoint, image source URL, or font-file verification was supplied. Screenshot image measurements are estimates; inline anchor rectangles are not reliable image-height measurements.

This reference describes the current supplied homepage evidence. Computed values, screenshot estimates, and proposed implementation behavior are identified separately throughout.