# DRAFT — Style Reference

> Architecture presented as a photographic exhibition: quiet typography, expansive white space, and deliberately uneven compositions.

**Website:** [draft.co.jp](https://draft.co.jp/)
**Original URL:** https://draft.co.jp/
**Final URL:** https://draft.co.jp/
**Theme:** white editorial canvas with black typography; reversed white text over the photographic hero.
**Inspected:** September 23, 2026, Japan Standard Time. Supplied capture timestamp: September 22, 2026, 17:44:43.143 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current corporate and portfolio homepage, including its photographic hero, project collections, two Featured Journal sections, project-category links, footer, closed navigation control, and visible cookie notice. Project destinations, the open navigation state, and consent actions were not inspected.

DRAFT gives architectural photography nearly all of the visual prominence. The opening screen pairs a full-viewport image with one restrained serif sentence, a small floating identity panel, and compact project information. Below it, black captions sit above square-cornered photographs on white. Image sizes and proportions vary, while neighboring projects repeatedly share a common bottom edge.

This is a long corporate portfolio with editorial updates and company navigation. Its structure is a sequence of projects and journal entries, rather than a short conversion funnel. The defining contrast is between the atmosphere of the photography and the precise, economical interface around it.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Measurements belong to the two captured viewport sizes.
- **Derived** means a value is calculated from those measurements, such as a gutter, shared baseline, or image ratio.
- **Estimated** means a visual approximation from the supplied original-page captures. Estimated colors were not extracted from source declarations or sampled with an image tool.
- **Recommended** means guidance for a new implementation. It is not evidence of an existing feature.
- Token names introduced here are implementation aliases unless explicitly identified as source custom properties.
- Font-family declarations identify the recorded CSS stacks. No font files, font-loading diagnostics, or complete stylesheet were supplied.
- The mobile middle-page layout is supported by DOM measurements; the supplied mobile images visually show the hero and footer.

The extensive WordPress preset registry is not the page's design system. Its many fonts, gradients, colors, and shadows do not establish their use in the rendered interface. Likewise, the sampled `Times` family on body elements and link wrappers does not override the explicit Graphik and PP Eiko declarations on their visible text descendants.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Canvas White | `#ffffff` | `--color-canvas` | Measured HTML/body background; also source `--color-white: #fff` |
| Interface Black | `#000000` | `--color-ink` | Measured project text, category links, and footer text; also the hero section's underlying background |
| Reversed White | `#ffffff` | `--color-on-image` | Measured hero heading color |
| Footer Mist | approximately `#f6f6f6` | `--color-panel` | Estimated pale-gray footer panel, visibly distinct from the surrounding white page |
| Fine Rule | approximately `#e6e6e6` | `--color-rule` | Estimated journal and footer separators |
| Secondary Gray | approximately `#888888` | `--color-muted` | Estimated journal descriptions and subdued footer annotations |
| Navigation Shade | translucent black | `--color-nav-shade` | Visually observed dark panel behind the hero wordmark and menu control; exact alpha is unavailable |

**Recommended approximations:** begin with `rgb(0 0 0 / 28%)` for the navigation panel and adjust against the actual photograph. Treat any hero darkening layer separately; its opacity and implementation were not supplied.

The brown timber, warm interior lighting, blue sky, garden greens, and reflective silver surfaces belong to the project imagery. They are not a set of UI accent colors. Keep links and category controls monochrome so different projects can introduce different photographic palettes without changing the interface.

### Palette Behavior

The hero uses reversed white lettering over a dark-looking photograph. The portfolio and journal return to white with black typography. The footer introduces a very light gray enclosure, and the cookie notice remains white over both photography and page content.

No user-selectable color theme or dark-mode interaction was evidenced.

## Tokens — Typography

### PP Eiko — Hero Statements

- **Recorded family:** `PPEiko-Light, sans-serif`.
- **Recorded weight:** `300`.
- **Desktop:** `24px`, `36px` line height, `0.6px` tracking.
- **Mobile:** `20px`, `25px` line height, `0.5px` tracking.
- **Character:** fine, high-contrast serif forms that read as an editorial caption over a photograph.

The source stack ends in `sans-serif`, despite the displayed face's serif appearance. A serif fallback in a new implementation is a deliberate adaptation, not a transcription of that source stack.

The measured desktop Yokohama heading occupies a 477.27px-wide element centered across the viewport. On mobile, all sampled hero heading wrappers are 312px wide, or 80% of the viewport. The Hibiya statement wraps into three visible lines. Its wrapper is 90px high even though the recorded heading line height is 25px; do not infer the entire internal line layout from the parent line-height value alone.

### Graphik Semibold — Project Names

- **Recorded stack:** `GraphikSemibold, MFW-YuGoPr6N-Bold, sans-serif`.
- **Recorded CSS weight:** `400`.
- **Desktop project captions:** `16px / 20px`.
- **Mobile project captions:** `13px / 13px`.

The face name carries the semibold treatment. Applying an additional bold weight to these named faces could change the result. Use the actual wordmark artwork for DRAFT; it is not an ordinary heading set in this stack.

### Graphik Medium — Navigation and Metadata

- **Recorded stack:** `GraphikMedium, MFW-YuGoPr6N-Medium, sans-serif`.
- **Recorded CSS weight:** `400`.
- **Roles:** project categories, section labels, category pills, footer links, and the cookie notice's OK control.
- **Tracking:** normal for the sampled utility text.

The Japanese font names are recorded family identifiers. They should not be replaced with a guessed Japanese typeface when documenting the original.

### Type Scale

| Role | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Hero statement | `24px / 36px`, weight 300 | `20px / 25px`, weight 300 | Measured |
| Hero project name | approximately `20px` | approximately `16px` | Screenshot estimate |
| Project-card title | `16px / 20px` | `13px / 13px` | Measured |
| Project category | `11px / 11px` | `7px / 7px` | Measured |
| Featured Journal / See All Journal | `16px / 16px` | `16px / 16px` | Measured |
| Journal article headline | approximately `13px`, multiline | Exact child style unavailable | Desktop screenshot estimate |
| Projects Category label | `13px / 13px` | `9px / 9px` | Measured |
| Category link | `16px / 16px` | `11px / 11px` | Measured |
| Footer primary link | `16px / 16px` | `16px / 16px` | Measured |
| Footer secondary link | `13px / 15.6px` | Not visible in mobile footer | Measured desktop style and responsive observation |
| Footer English link | `11px / 11px` | `13px / 13px` | Measured |
| Privacy Policy | `11px / 11px` | `11px / 11px` | Measured |
| Cookie OK button | Child style not supplied | `13px`, normal line height | Measured mobile style |

The original mobile project metadata is unusually small at 7px. Preserve that fact in a fidelity specification, but use a larger minimum in a new production interface. The Quick Start deliberately uses 11px metadata on mobile.

## Tokens — Spacing & Shapes

**Density:** small labels and tightly grouped metadata surrounded by generous space between image groups.

**Recurring dimensions:** 16px and 24px horizontal spacing, 60px and 80px project-row spacing, and much larger clearance before the footer panel. These are observed repetitions, not proof of a single underlying spacing formula.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Project-gallery outer inset | `24px` | `16px` | Measured |
| Project horizontal gap | `24px` | `16px` | Measured |
| Project vertical gap | `80px` | `60px` | Measured container gap |
| Hero-to-first-project clearance | `80px` | `64px` | Derived from section coordinates |
| Caption inset from image's left edge | `24px` | approximately `15.16px` | Derived from title and card coordinates |
| Desktop title-to-category clearance | `12px` | Varies with title wrapping | Derived from sampled title/category boxes |
| Category-pill gap | `16px` | `12px` | Derived from link coordinates |
| Category-label-to-pills clearance | `64px` | `28px` | Derived |
| Footer outer top padding | `180px` | `150px` | Measured |
| Footer outer bottom padding | `24px` | `24px` | Measured |
| Footer-panel inner inset | approximately `48px` | approximately `32px` | Desktop horizontal geometry and screenshot estimate |

### Border Radius

| Element | Treatment | Status |
| --- | --- | --- |
| Project photographs and card wrappers | Square corners | Observed; sampled card radius is `0px` |
| Journal image treatment | Square corners | Visually observed |
| Desktop category pills | `25px` radius | Measured |
| Mobile category pills | `50px` radius | Measured; larger than needed to form a capsule |
| Footer panel | Approximately `8px` | Estimated |
| Cookie notice | Approximately `8px` | Estimated |
| Hero navigation panel | Small rounded rectangle | Observed; exact radius unavailable |
| Menu control's visible dark disc | Circle, about `40px` diameter | Visual shape; mobile button box measures `40 × 40px` |

The sampled menu button itself reports a zero border radius. The circular appearance may belong to an inner or decorative layer; a directly rounded button is an implementation approximation.

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 |
| --- | --- | --- |
| Hero section | `1440 × 1000px` | `390 × 844px` |
| Project content width | `1392px` | `358px` |
| First project row | `546.08px`, `359.11px`, `438.80px` cards | Two `171px` cards |
| First project section starts | Document Y `1080px` | Document Y `908px` |
| Full-width project card | `1392px` wide | `358px` wide |
| Journal article box | `288px` wide, five across | `234.16px` wide, extending horizontally beyond the viewport |
| Hero View link box | `136.28 × 45px` | `100 × 40px` |
| Footer panel | Approximately `968 × 670px` | Approximately `296 × 736px` |
| Footer navigation | Four approximately `200px` columns with `24px` gaps | One centered list |
| Footer DRAFT logo link | `139px` wide | `97px` wide |
| Cookie notice | Approximately `448 × 64px` | Approximately `294 × 64px` |

At mobile width, the ordinary project width follows the measured relationship `(390 - 2 × 16 - 16) / 2 = 171px`. The image catalog remains two columns on the inspected phone; it does not collapse entirely into one-column cards.

## Components

### Floating Identity and Menu Control

**Role:** keeps the brand and primary navigation entrance visible without placing a full-width header over the photograph.

A white DRAFT wordmark and a compact vertical three-mark menu symbol share a translucent dark enclosure, centered near the top of the hero. The menu symbol sits within a darker circular area.

On mobile, the logo link measures `97 × 20px` at X 122.5, Y 42. The button measures `40 × 40px` at X 243.5, Y 32. Their boxes have a 24px horizontal gap. The surrounding panel is approximately 193px wide and 56px high, beginning around Y 24. The desktop enclosure is visually slightly larger, approximately 213px wide and 64px high.

The open menu was not captured. Navigation destinations appear in the DOM, but those entries do not establish the visible layout or animation of an expanded menu. The header is also absent from the supplied scrolled captures; its exact scroll-visibility or sticky behavior remains unverified.

### Photographic Project Hero

**Role:** introduces the portfolio through a project image and a short spatial narrative.

The hero fills exactly one captured viewport at both sizes. Its anatomy is:

1. A photographic image filling the screen.
2. A centered editorial sentence in light PP Eiko.
3. A project name in a stronger sans-serif treatment.
4. Compact Category and Spec information on desktop.
5. A small View link with a right arrow and a fine bottom rule.
6. The floating identity panel above the composition.

The desktop capture shows YOKOHAMA TIMBER WHARF and the sentence “A Proposal for a New Yokohama Lifestyle.” The close crop emphasizes intersecting timber members and a dark horizontal balcony edge. The sentence sits at the viewport's vertical center, while the project name and supporting information occupy a separate bottom strip.

The mobile capture shows Hibiya Central Building and the three-line sentence “A Space of Tranquility / Amidst the Hustle / and Bustle of the City.” The project name and View link move into the central stack below the statement. The Category and Spec text exists in the mobile DOM but is not visible in this screenshot.

Six hero narratives and matching View links are present in the evidence, covering Yokohama, Hibiya, TAIYO INK, MIKAN SHIMOKITA, OCA TOKYO, and +SHIFT NOGIZAKA. Treat these as alternative scenes in the showcase. The evidence does not establish a slide interval, transition duration, swipe behavior, or manual scene selector.

### View Link

**Role:** opens the featured project.

The control is a restrained text-and-arrow link, not a filled CTA. Its desktop box is approximately 136px wide and 45px high; the mobile box is 100px wide and 40px high. A fine horizontal line ties the label and arrow together.

The Yokohama View link points to a project on `tjda.com`; the Hibiya link points to a project on `draft.co.jp`. Preserve actual destinations when implementing content. An external project destination is not evidence that the homepage itself redirected.

### Project Card

**Role:** combines a project caption with a large photograph as one linked entry.

The measured card element is an anchor containing the project information and image. The caption precedes the image. Titles use Graphik Semibold, followed by a compact category line and a location/date or product-description line.

The caption begins 24px inside the photo's left edge on desktop. This indentation is part of the composition: the image occupies the whole card width, while the text sits slightly inward. There is no enclosing border, colored card surface, visible shadow, or rounded image mask.

Metadata varies with content. ZA-01 uses Product, Sofa, and DAFT about DRAFT; COOM uses Product and Concentration booth; Tokyu corporation “Philosophy” includes On going. Do not force every entry into an address-and-date schema.

Desktop DOM text sometimes repeats a project title, while the capture shows a single visible title. This does not justify displaying two titles or inventing a title-rollover animation.

### Project Row and Full-Width Feature

**Role:** establishes the homepage's distinctive image rhythm.

Neighboring cards vary in width and image proportion, but their bottoms align. The first desktop row demonstrates this precisely:

| Project | Card top | Card height | Derived bottom |
| --- | --- | --- | --- |
| Milan Design Week 2026 ≪LAST SAMPLE≫ | `1080px` | `644.08px` | `1724.08px` |
| CRAZY GRANDE MAISON | `1286.97px` | `437.11px` | `1724.08px` |
| ＋SHIFT TAMACHI | `1207.28px` | `516.80px` | `1724.08px` |

The desktop middle-page capture shows the same principle with +SHIFT NOGIZAKA, NTT Resonant, and ZA-01. Their photographs are respectively landscape, portrait, and square, ending on a common baseline.

This is best understood as composed rows with changing proportions, rather than an unrestricted masonry waterfall. The source container is measured as flex with `80px 24px` gaps; its complete sizing and ordering rules were not supplied.

Full-width features interrupt the smaller groups. For example, the desktop Yokohama and OCA cards measure 1392px wide and 774px tall. With their approximately 78px caption area, their image region is consistent with a 2:1 ratio. Their mobile counterparts preserve the panoramic format at 358px wide.

### Featured Journal

**Role:** introduces recent news, media coverage, awards, and project announcements between portfolio collections.

A small section heading sits at the left and See All Journal sits at the right. Both measure `16px / 16px` at both inspected widths. The journal cards contain an image, a multiline title, an optional gray description, and a compact category/date line.

On desktop, five anchor boxes each occupy 288px, exactly one fifth of the viewport. Text is inset within those boxes rather than set against the viewport edge. The supplied middle capture shows generous white space beneath the article text and a fine horizontal separator before the next project group.

On mobile, each article box measures about 234.16px, and successive boxes begin at X 0, 234.16, 468.31, 702.47, and 936.63. This establishes a horizontal sequence with approximately 1.67 cards fitting across the viewport. Actual swipe, drag, scrollbar, and snap behavior was not exercised. Descriptions are absent from the supplied mobile rendered-text summary, while titles and category/date information remain.

The homepage contains two such journal groups, each with five entries. Their article ordering should be preserved as editorial selection; the visible dates do not form a strictly descending chronological list.

### Project-Category Links

**Role:** provides a final route into the project archive.

A centered Projects Category label introduces eight outlined capsules: ALL, Architecture, Interior, Hospitality, Office, Retail, Product, and Branding. The outlines appear finely dashed in the desktop capture.

Desktop pills use `16px 24px` padding, a measured 50px height, and 16px gaps. They wrap as five items followed by three. Mobile pills use `13px 20px` padding, a measured 39px height, and 12px gaps. At 390px, they wrap into three rows of three, three, and two.

These are navigation anchors. ALL links to `/projects/`; categories use URLs such as `/projects/?f=architecture`. No in-place homepage filtering or selected-state interaction was demonstrated.

### Desktop Footer Panel

**Role:** gathers the full navigation hierarchy and brand links into a quieter closing composition.

The footer is a centered pale-gray panel surrounded by substantial white space. At 1440px, the panel is approximately 968px wide, with an approximately 48px inset and four columns separated by 24px gaps.

Its anatomy is:

- DRAFT logo at the upper left.
- Three navigation columns headed Projects, About, and Journal, each with subordinate links.
- A fourth column containing ruled Careers, Contact, and IR rows. The first two use right arrows; IR uses an outward-pointing arrow.
- A legal/language row with © DRAFT, English, Privacy Policy, and a TJDA wordmark link.
- A lower row with an Instagram icon and additional brand/partner marks.

Primary column headings use 16px type. Secondary links use 13px type with a 15.6px line height and approximately 6px gaps between line boxes. The sampled Careers, Contact, and IR anchor rows are 200px wide and 54px high.

The linked marks identify navigation destinations. Their presence does not establish who designed or developed the website.

### Mobile Footer Panel

**Role:** condenses the desktop hierarchy into a centered, readable closing menu.

The mobile panel is approximately 296px wide with roughly 48px of outer space on either side. Its top logo is 97px wide. A fine rule separates the logo from a vertical list of Projects, About, Journal, Careers, Contact, and IR.

These primary links remain 16px. Their measured top positions differ by 35px, giving a 19px gap after each 16px line box. Desktop subordinate link lists are not visible. English follows as a separate 13px link with additional breathing room.

The brand marks rearrange below another divider: TJDA occupies a wide row, two smaller marks sit together, and Our Partners sits above the crest. The lowest utility row places Instagram at the left and Privacy Policy with © DRAFT at the right.

This is a meaningful reorganization of content, not simply a scaled-down four-column footer.

### Cookie Notice

**Role:** presents the visible cookie message and its controls above page content.

The notice reads “This website uses cookies.” and contains an underlined OK button plus a small close symbol. It is a white rounded rectangle with a very soft visual shadow.

It appears at the same bottom-center position across the supplied hero and scrolled states. On desktop it is approximately 448 × 64px with a 24px bottom offset. On mobile it is approximately 294 × 64px with a 20px bottom offset.

The mobile OK text box is only about 19 × 16px, and the recorded close button is 8 × 8px. No dismissal, persistence, consent-storage behavior, or difference between the two actions was tested. The desktop notice also obscures part of the hero's lower information strip in the supplied capture.

## Tokens — Motion & Interaction

| Element or behavior | Available evidence | What can be concluded |
| --- | --- | --- |
| Several footer logo/social links | `opacity 0.1s ease-out` | A short opacity transition is declared; its endpoint and trigger were not supplied |
| Mobile menu button | `opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1)` | An opacity transition is declared; this does not establish the menu panel's motion |
| Hero scenes | Six co-located headings and View links; different active projects in desktop/mobile captures | A multi-scene showcase is supported; timing and navigation mechanics remain unverified |
| Mobile hero image | Some overlapping or translucent-looking architectural details | A single frame cannot distinguish a transition from photographic content |
| Project hover | No exercised hover state supplied | Image zoom, caption movement, and cursor effects are unverified |
| Mobile journal track | Consecutive cards extend beyond viewport width | Horizontal arrangement is measured; touch behavior and snapping are unverified |
| Category links | Destination URLs include category queries | Navigation intent is directly evidenced; result-page behavior was not inspected |
| Cookie controls | Visible buttons only | Action semantics and persistence are unverified |

Most sampled elements report `animation: none` and a generic transition value of `all`. These snapshots do not rule out JavaScript animation, animations on unsampled descendants, or motion that completed before capture. They also do not provide usable durations for those generic transition entries.

**Recommended motion direction:** keep feedback quiet and brief. If implementing automatic hero changes, provide a pause mechanism and a reduced-motion alternative. A gentle image dissolve could suit the visual character, but it would be a design recommendation, not a recovered source specification.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Hero | Full-viewport photograph over a measured black base | Project atmosphere and immediate visual identity |
| Hero identity panel | Translucent dark enclosure | Local contrast for white branding and navigation |
| Portfolio | White canvas with unboxed captions and square photographs | Lets image scale, proportion, and whitespace organize the work |
| Journal | White canvas, small text, occasional pale rules | Editorial interruption within the project sequence |
| Category links | White or transparent capsules with fine black dashed outlines | Compact archive navigation |
| Footer | Pale-gray rounded panel on white | Groups dense navigation without introducing a dark full-width block |
| Cookie notice | White rounded panel with subtle shadow | Persistent utility layer above the page |

There is no general elevated-card system in the observed project catalog. Reserve rounded containers and soft shadowing for the specific utility and footer surfaces that display them.

## Imagery

Architectural photography supplies the site's texture and color. The current desktop hero crops closely into timber structure, making diagonal beams and horizontal balcony lines the composition. The mobile hero uses a warm interior with glazing, furniture, and architectural depth. The project section combines an exterior tower, a reflective workplace, and a sofa framed by a traditional interior and garden.

Preserve these distinctions:

- **Hero photography:** edge-to-edge and cropped to the viewport, with a subject placement that leaves text readable.
- **Project photography:** mixed square, portrait, landscape, and panoramic formats. The differing heights are essential to the bottom-aligned rows.
- **Journal imagery:** smaller editorial assets associated with news and publications.
- **Brand marks:** supplied artwork at restrained sizes, separate from text styling.

Do not apply a single sepia treatment to the entire catalog. Warm wood, cool reflective surfaces, blue skies, and garden foliage coexist naturally. The consistent monochrome interface holds them together.

### Observed Asset References

Actual image `src` values and font-file paths were not supplied. The following URLs are project destinations present in the homepage DOM, not downloadable asset URLs. Those destination pages were not opened.

| Visible subject | Evidence | Associated destination |
| --- | --- | --- |
| YOKOHAMA TIMBER WHARF timber structure | Desktop hero capture | [Project link](https://tjda.com/projects/yokohama-timber-wharf) |
| Hibiya Central Building interior | Mobile hero capture | [Project link](https://draft.co.jp/projects/hibiya-central-building/) |
| +SHIFT NOGIZAKA exterior | Desktop project-section capture | [Project link](https://draft.co.jp/projects/plusshift-nogizaka/) |
| NTT Resonant reflective workplace | Desktop project-section capture | [Project link](https://draft.co.jp/projects/ntt-resonant/) |
| ZA-01 sofa and garden setting | Desktop project-section capture | [Project link](https://draft.co.jp/projects/za-01/) |

Use authorized photography and logo files when available. CSS can reproduce the spatial framework, but the photographs carry much of this design's identity.

## Layout & Responsive Behavior

### Page Sequence

The supplied DOM establishes this overall structure:

1. Full-viewport project hero.
2. First collection of thirteen project entries.
3. Featured Journal group with five entries.
4. Second collection of thirteen project entries.
5. Second Featured Journal group with five entries.
6. Project-category navigation.
7. Footer panel.

The cookie notice overlays this sequence. The project gallery itself uses a mixture of multi-card rows and larger features, so neither the number of columns nor the card width remains constant on desktop.

### Desktop Composition

At 1440px, the project canvas uses 24px outer gutters and 24px horizontal gaps. The first row's three card widths are approximately 546, 359, and 439px. Later rows use different proportions. Full-width features reach 1392px within the same gutters.

The photographs share row baselines while captions begin at different vertical positions. This creates broad wedges of white space above smaller cards. Keep that space intentional; top-aligning every card would substantially change the composition.

Journal groups span the viewport as five equal article boxes. The footer then narrows to approximately 968px, providing a noticeable contraction after the broad image catalog.

### Mobile Composition

At 390px, ordinary project cards are 171px wide, separated by 16px and inset 16px from the viewport. Selected features expand to 358px. Row gaps reduce from 80px to 60px, while the title size reduces from 16px to 13px.

The hero changes its information hierarchy: the project name and View link join a centered vertical stack beneath the serif sentence. The desktop lower information strip is not reproduced visually on the phone.

Journal entries remain in a horizontal sequence rather than becoming the same two-column layout as projects. Their approximately 234px width creates a partial next-item view. The footer changes to a centered single-column menu and rearranges its lower brand and utility rows.

### Breakpoint Evidence and Limits

The supplied custom properties include `--breakpoint: 950` at both viewport sizes. This is useful evidence of a breakpoint-related value, but it does not reveal the exact media queries or which behaviors switch there. The Quick Start uses 950px as a recommended boundary, with that limitation explicitly acknowledged.

No tablet or landscape-mobile capture was supplied. The browser reports document heights of 12,986px on desktop and 8,351px on mobile, but the desktop body rectangle and some footer descendants do not form one consistent absolute vertical extent. Treat these as sampled page states, not fixed page-height specifications. Use local widths, gaps, and screenshot relationships for reconstruction.

## Do’s and Don’ts

### Do

- Let photographs dominate while keeping project names and utilities compact.
- Use the recorded PP Eiko and Graphik families when the required licensed files are available.
- Keep the main canvas white and interface text black.
- Align neighboring project cards along their bottom edges.
- Vary image ratios and card widths according to the project composition.
- Inset project captions slightly from the photograph's left edge.
- Retain full-width features among smaller project groups.
- Preserve the two-column mobile portfolio and separate horizontal journal pattern.
- Keep the centered floating identity panel visually small.
- Give the footer its own narrow pale-gray enclosure and substantial surrounding space.
- Represent project categories as destination links with the observed query parameters.

### Don’t

- Do not turn the homepage into a generic hero, feature-benefit cards, and repeated conversion buttons.
- Do not replace every photograph with an identical landscape crop.
- Do not top-align every project card or assume a free-flowing masonry layout.
- Do not add shadows, borders, and rounded corners to all project entries.
- Do not promote colors from individual photographs into a permanent multicolor UI palette.
- Do not treat the WordPress font and color preset registry as evidence of active styling.
- Do not render duplicated extracted titles as two visible headings.
- Do not claim a menu-opening animation, carousel interval, image zoom, or parallax effect without further evidence.
- Do not turn the category links into an invented on-page filtering interaction.
- Do not treat footer brand marks as website production credits.
- Do not reproduce invisible form-validation strings from the DOM as homepage content.

## Recommended Implementation Additions

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

- Raise mobile project metadata from the measured 7px to at least 11–12px, and allow captions to become taller.
- Provide at least 44px touch targets for the menu, cookie controls, and compact navigation links. Keep the visible symbols small if needed.
- Give the menu button an accessible name, `aria-expanded`, and a relationship to the controlled navigation. If the menu becomes modal, implement appropriate focus management and Escape behavior.
- If the hero advances automatically, provide a pause control and avoid advancing while a user interacts with its links. Keep inactive scenes out of the keyboard focus order.
- Respect `prefers-reduced-motion`; keep every destination usable without waiting for animation.
- Use actual anchors for project cards and category destinations. Avoid nested interactive controls inside an all-card link.
- Preserve logical reading order when mobile regrouping changes the visual arrangement.
- Keep the mobile journal sequence reachable by keyboard and touch, and prevent it from causing horizontal scrolling of the entire document.
- Reserve image dimensions to reduce layout shifts. Load the initial hero promptly and defer suitable below-the-fold media.
- Set a focal point per hero image and verify the white text against each responsive crop.
- Make consent actions explicit and ensure the notice does not obscure essential navigation. Its mobile height can grow to accommodate usable controls.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: measured `#ffffff`.
- Primary text: measured `#000000`.
- Hero text: measured `#ffffff`.
- Footer panel: estimated `#f6f6f6`.
- Dividers: estimated `#e6e6e6`.
- Secondary copy: estimated `#888888`.
- Hero identity enclosure: translucent black; tune opacity against the photograph.
- Color accents: supplied by photography, not button fills.

### Overall Prompt

“Create an architectural corporate portfolio inspired by the supplied DRAFT homepage evidence. Begin with a full-viewport project photograph, a small centered floating wordmark-and-menu panel, and one light serif sentence over the image. Use a white content canvas, black Graphik-like utility typography, square image edges, and very little decorative chrome. Compose desktop projects in rows of different widths and image proportions, aligned along their bottom edges, with occasional full-width panoramic features. Place compact captions above each image and slightly inset from its left edge. Insert five-item journal bands between project collections. On a 390px phone, retain two 171px project columns with 16px gutters and selected full-width features. Finish with dashed category capsules and a narrow pale-gray footer panel. Label any added interaction behavior as a new implementation decision.”

### Example Component Prompts

1. **Hero:** “A full-height architectural photograph with a white 24px light serif sentence centered on desktop, a compact project-information strip near the bottom, and a small View link with a right arrow and thin underline. Center a translucent dark identity panel near the top. On mobile, use a 20px statement and move the project name and View link into a central vertical stack.”
2. **Project row:** “Three linked architectural projects on white, approximately 546px, 359px, and 439px wide within a 1440px page. Use 24px outer gutters and gaps. Place a 16px title and 11px metadata above each photograph, inset 24px from its left edge. Align all card bottoms; let their tops vary. Keep photos square-cornered and unboxed.”
3. **Journal:** “An editorial band with Featured Journal at left and See All Journal at right, both 16px. Show five equal article regions across desktop, with square-edged images, compact Japanese headlines, gray summaries, and black category/date labels. On mobile, use horizontally arranged cards about 60% of the viewport width; implement accessible scrolling as a new behavior.”
4. **Category navigation:** “Center eight black outlined capsules on white. Use fine dashed outlines, 50px desktop height, 16px labels, and 16px gaps. Link to the project archive and category query URLs. At 390px, reduce labels to 11px and arrange the capsules in three centered rows.”
5. **Footer:** “A pale-gray rounded panel approximately 968px wide on desktop, surrounded by white. Place a black wordmark above four navigation columns with fine rules. Use small legal links and restrained related-brand marks below. On mobile, make the panel about 296px wide and replace subordinate link columns with a centered list of six primary links.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold, not recovered production CSS. It combines measured dimensions with clearly identified approximations. Register authorized font files separately; the family names below do not load fonts by themselves. Photography, logo assets, menu state, hero sequencing, and consent logic require separate implementation.

The scaffold uses explicit desktop row wrappers with bottom alignment. On mobile, those wrappers dissolve into one two-column grid. Place each caption before its image, mark panoramic features with `.project-card--wide`, and author a coherent reading order. The complete production ordering rules were not supplied.

Mobile metadata and touch controls intentionally exceed the original measured sizes. The cookie notice may therefore become taller than the captured 64px on a phone.

```css
:root {
  /* Measured foundation */
  --color-canvas: #fff;
  --color-ink: #000;
  --color-on-image: #fff;

  /* Visual estimates and recommended overlay values */
  --color-panel: #f6f6f6;
  --color-rule: #e6e6e6;
  --color-muted: #888;
  --color-nav-shade: rgb(0 0 0 / 28%);
  --hero-shade: rgb(0 0 0 / 28%);

  /* Recorded faces; fallback choices are adaptations */
  --font-display: 'PPEiko-Light', Georgia, serif;
  --font-title: 'GraphikSemibold', 'MFW-YuGoPr6N-Bold', Arial, sans-serif;
  --font-ui: 'GraphikMedium', 'MFW-YuGoPr6N-Medium', Arial, sans-serif;

  --gutter: 24px;
  --project-gap-x: 24px;
  --project-gap-y: 80px;
  --caption-inset: 24px;
  --section-space: 80px;
  --footer-width: 968px;
  --footer-inset: 48px;
  --radius-panel: 8px;
  --radius-pill: 25px;

  --text-project: 16px;
  --text-meta: 11px;
  --text-utility: 13px;
  --motion-logo: 100ms ease-out;
  --motion-menu: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ui);
  font-weight: 400;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Use a static first scene until sequencing is implemented. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--color-on-image);
  background: #000;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal-point, 50% 50%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-shade);
}
.hero__statement {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 80%;
  margin: 0;
  font: 300 24px / 36px var(--font-display);
  letter-spacing: 0.025em;
  text-align: center;
}
.hero__details {
  position: absolute;
  right: 9.86%;
  bottom: 40px;
  left: 9.86%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: end;
  gap: 24px;
}
.hero__project {
  margin: 0;
  font: 400 20px / 1.2 var(--font-title);
}
.hero__metadata { font-size: 11px; line-height: 1.3; }
.hero__view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 136.28px;
  min-height: 45px;
  padding-inline: 16px;
  border-bottom: 1px solid rgb(255 255 255 / 45%);
  font-size: 13px;
  text-decoration: none;
}

/* Absolute placement reproduces the captured hero state only. */
.identity-panel {
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 12px 12px 32px;
  border-radius: var(--radius-panel);
  background: var(--color-nav-shade);
}
.identity-panel__logo { width: 97px; }
.menu-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgb(0 0 0 / 45%);
  cursor: pointer;
  transition: opacity var(--motion-menu);
}

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--project-gap-y);
  margin-block-start: var(--section-space);
  padding-inline: var(--gutter);
}
.project-row {
  display: grid;
  grid-template-columns: var(--project-columns, repeat(3, minmax(0, 1fr)));
  align-items: end;
  gap: var(--project-gap-x);
}
.project-row--opening {
  --project-columns: minmax(0, 546fr) minmax(0, 359fr) minmax(0, 439fr);
}
.project-row--nogizaka {
  --project-columns: minmax(0, 462fr) minmax(0, 407fr) minmax(0, 475fr);
}
.project-card {
  display: block;
  min-width: 0;
  text-decoration: none;
}
.project-card__caption {
  padding: 0 0 20px var(--caption-inset);
}
.project-card__title {
  margin: 0 0 12px;
  font: 400 var(--text-project) / 20px var(--font-title);
  overflow-wrap: anywhere;
}
.project-card__meta {
  margin: 0;
  font: 400 var(--text-meta) / 1.3 var(--font-ui);
}
.project-card img {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.project-card--wide { grid-column: 1 / -1; }

.journal {
  margin-block-start: var(--section-space);
  padding-bottom: 80px;
  border-bottom: 1px solid var(--color-rule);
}
.journal__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--gutter);
}
.journal__header h2,
.journal__header a {
  margin: 0;
  font: 400 16px / 16px var(--font-ui);
  text-decoration: none;
}
.journal__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 20%;
  margin-top: 56px;
  overflow-x: auto;
}
.journal-card {
  min-width: 0;
  padding-inline: var(--gutter);
  text-decoration: none;
}
.journal-card__title {
  font: 400 13px / 1.5 var(--font-title);
}
.journal-card__description {
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.5;
}

.project-categories {
  margin-top: 80px;
  padding-inline: 16px;
  text-align: center;
}
.project-categories__label {
  margin: 0 0 64px;
  font-size: 13px;
  line-height: 1;
}
.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 640px;
  margin-inline: auto;
}
.category-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 1px dashed currentColor;
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
}

.site-footer { padding: 180px 24px 24px; }
.footer-panel {
  width: min(100%, var(--footer-width));
  margin-inline: auto;
  padding: var(--footer-inset);
  border-radius: var(--radius-panel);
  background: var(--color-panel);
}
.footer-logo { display: block; width: 139px; }
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 64px;
}
.footer-column {
  min-width: 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
}
.footer-column__title {
  margin: 0;
  font: 400 16px / 16px var(--font-ui);
}
.footer-subnav {
  display: grid;
  gap: 6px;
  margin-top: 40px;
  font-size: 13px;
  line-height: 15.6px;
}
.footer-column a { text-decoration: none; }
.footer-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--color-rule);
  font-size: 13px;
}
.footer-utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  font-size: 11px;
}
.brand-link { transition: opacity var(--motion-logo); }

/* Larger controls are a recommended accessibility adaptation. */
.cookie-notice {
  position: fixed;
  z-index: 20;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  width: min(448px, calc(100% - 96px));
  min-height: 64px;
  padding: 10px 24px;
  border-radius: var(--radius-panel);
  color: var(--color-ink);
  background: #fff;
  box-shadow: 0 2px 24px rgb(0 0 0 / 4%);
  font-size: 13px;
}
.cookie-notice p { flex: 1 1 160px; margin: 0; line-height: 1.4; }
.cookie-notice__actions { display: flex; margin-left: auto; }
.cookie-notice button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
}
.cookie-notice__accept { text-decoration: underline; }

/* Recommended breakpoint based on the recorded value of 950. */
@media (max-width: 950px) {
  :root {
    --gutter: 16px;
    --project-gap-x: 16px;
    --project-gap-y: 60px;
    --caption-inset: 15px;
    --text-project: 13px;
    --text-meta: 11px; /* Original measurement: 7px. */
    --footer-inset: 32px;
  }

  .identity-panel { gap: 24px; padding: 8px 8px 8px 24px; }
  .hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
  }
  .hero__statement {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    font-size: 20px;
    line-height: 25px;
    text-wrap: balance;
  }
  .hero__details {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin-top: 64px;
  }
  .hero__project { font-size: 16px; }
  .hero__metadata { display: none; }
  .hero__view { width: 100px; min-height: 40px; font-size: 11px; }

  .project-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--project-gap-y) var(--project-gap-x);
  }
  .hero + .project-gallery { margin-top: 64px; }
  .project-row { display: contents; }
  .project-card__title {
    margin-bottom: 10px;
    line-height: 1.2; /* Increased from the recorded 13px line height. */
  }

  .journal { padding-bottom: 110px; }
  .journal__header { padding-block: 13px; }
  .journal__track {
    grid-auto-columns: 60vw;
    margin-top: 19px;
    overscroll-behavior-x: contain;
  }
  .journal-card__description { display: none; }
  .project-categories__label { margin-bottom: 28px; font-size: 9px; }
  .category-list { max-width: 300px; gap: 12px; }
  .category-link {
    padding: 13px 20px;
    border-radius: 50px;
    font-size: 11px;
    line-height: 11px;
  }

  .site-footer { padding: 150px 48px 24px; }
  .footer-logo { width: 97px; margin-inline: auto; }
  .footer-columns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 19px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--color-rule);
    text-align: center;
  }
  .footer-column { padding: 0; border: 0; }
  .footer-subnav { display: none; }
  .footer-actions { display: grid; gap: 19px; }
  .footer-actions a {
    display: block;
    min-height: 0;
    border: 0;
    font-size: 16px;
    line-height: 16px;
  }
  .footer-actions .arrow { display: none; }
  .footer-utility-row { justify-content: center; }
  .cookie-notice {
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-link,
  .menu-toggle { transition: none; }
}
```

Use `.hero__content` to wrap the statement and detail group. Supply the wordmark and menu artwork inside `.identity-panel`. Footer language, brand, partner, and legal groups need explicit markup in the observed mobile order; the footer rules above provide the panel and primary-navigation foundation.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-canvas: var(--color-canvas);
  --color-ink: var(--color-ink);
  --color-panel: var(--color-panel);
  --color-rule: var(--color-rule);
  --color-muted: var(--color-muted);

  --font-editorial: var(--font-display);
  --font-project: var(--font-title);
  --font-interface: var(--font-ui);

  --text-project-title: var(--text-project);
  --text-project-meta: var(--text-meta);
  --spacing-page-gutter: var(--gutter);
  --spacing-project-x: var(--project-gap-x);
  --spacing-project-y: var(--project-gap-y);
  --radius-footer: var(--radius-panel);
  --radius-category: var(--radius-pill);
}
```

For color aliases, avoid declaring a variable as a reference to itself in the final stylesheet. If these color names are already defined in `:root`, use literal values in the Tailwind theme instead:

```css
@theme {
  --color-canvas: #fff;
  --color-ink: #000;
  --color-panel: #f6f6f6;
  --color-rule: #e6e6e6;
  --color-muted: #888;
}
```

## Sources & Evidence

- **Inspected original and final page:** [DRAFT](https://draft.co.jp/), with the supplied HTTP status of 200 and unchanged final URL.
- **Capture time:** September 22, 2026, 17:44:43.143 UTC, equivalent to September 23, 2026, 02:44:43.143 JST.
- **Desktop evidence:** three supplied 1440 × 1000 captures showing the hero, a journal/project transition, and the category/footer area; rendered text, links, element rectangles, computed styles, and custom properties at that viewport.
- **Mobile evidence:** two supplied 390 × 844 captures showing the hero and footer; rendered text, links, element rectangles, computed styles, and custom properties covering the homepage at that viewport.
- **Observation procedure:** the supplied browser report describes an initial observation of at least five seconds, readiness checks for layout, text, images, and finite animations, plus intermediate scrolling. Perpetual animations were paused during readiness checks and then resumed. These checks do not establish every delayed state or interaction.
- **Limitations:** no independent browsing, command execution, file inspection, open-menu test, hover test, cookie action, project-page visit, journal swipe test, or timed hero-transition recording was performed for this reference. Image asset URLs and font-file URLs were not supplied. SharedWorkers and service workers were disabled during the original inspection.

This reference describes the supplied current homepage states. Exact computed values, screenshot estimates, derived dimensions, and recommended implementation changes are distinguished throughout.