# terminal Inc. — Style Reference

> A gray portfolio canvas with precise sans-serif type, oversized project photography, and overlapping white and electric-blue notices.

**Website:** [terminaldesign.jp](https://www.terminaldesign.jp/)
**Original URL:** https://www.terminaldesign.jp/
**Final URL:** https://www.terminaldesign.jp/
**Theme:** light gray canvas with charcoal text, white emphasis, and a blue announcement surface.
**Inspected:** supplied browser evidence retrieved October 2, 2026, at 03:50:16 JST; October 1, 2026, at 18:50:16.082 UTC.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current homepage and project index, including the opening statement and announcements, desktop navigation and category rail, large project features, compact project archive, and footer. Visual evidence includes three desktop captures and two mobile captures. Linked pages and expanded controls were not inspected.

terminal presents its company profile and project archive within one long document. A handwritten white wordmark provides a small expressive counterpoint to medium-weight sans-serif typography. Gray is the continuous architectural surface: it remains behind the introductory statement, beside the project photography, between archive entries, and throughout the footer. Blue is concentrated in a single prominent announcement rather than distributed across routine controls.

The desktop composition reserves the left fifth of the viewport for identity and categories. Main text and projects begin at x = 288px. The work then changes scale: twenty-one large photographic project features precede a denser archive arranged in staggered columns. On mobile, the left rail disappears from the visible page, featured images occupy the entire viewport width, and the compact archive retains two columns.

Two overlapping rectangular notices obscure part of the opening statement in the desktop capture. Their mobile positions are a significant inspection finding: the white notice is mostly outside the viewport and the blue notice is entirely outside it. This reference records that state without treating it as a desirable responsive pattern.

## How to Read This Reference

- **Measured** means a value is present in the supplied rendered DOM or computed-style evidence. Decimal values are rounded for readability where appropriate.
- **Derived** means arithmetic based on measured rectangles, such as column gaps or percentage offsets. A matching calculation does not prove the original CSS formula.
- **Estimated** means a visual approximation from the five current-page screenshots. Footer type sizes, some metadata sizes, and the canvas color fall into this category.
- **Recommended** means implementation guidance for a new adaptation. It is not a claim about an existing feature.
- **Named tokens** are descriptive aliases introduced by this document, not original source variables.
- A computed font-family stack identifies declared candidates; it does not confirm which font rendered every glyph.
- Mobile DOM entries can exist without being visible. In particular, the extracted navigation links and announcement text must not be mistaken for an observed open menu or an on-screen notice.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Canvas Gray | Approximately `#d2d2d2` | `--color-canvas` | Visual estimate for the continuous page background. The sampled HTML and body backgrounds are transparent, so their declarations do not identify the painting layer. |
| Charcoal | `#3e3e3e` | `--color-ink` | Measured body, navigation, statement, and archive-heading text. |
| White | `#ffffff` | `--color-white` | Measured white announcement background, blue-notice text, introductory keyword heading, and featured-project captions; also visible in the wordmark. |
| Announcement Blue | `#0000ff` | `--color-notice` | Measured background of the relocation announcement. A highly saturated, unmodified blue. |
| Control Gray | `#d2d2d2` | `--color-control` | Measured background of desktop project-navigation buttons. Its exact value is independently established even though the page canvas is only visually estimated. |
| Arrow Navy | `#002538` | `--color-arrow` | Measured text color of desktop project-navigation buttons; visible as fine arrow marks. |

The background is not an opening-modal dimmer: the same gray appearance continues through the project archive and footer. Use it as the page surface in an adaptation.

The photographs contribute cyan, warm neutrals, black, and many project-specific colors. These belong to the work, not to a broad interface palette. The cup photograph in THE PICNIC, for example, should not turn every interface control cyan.

### Theme Presets

No theme selector or alternate interface palette was demonstrated. The extracted WordPress and Swiper custom properties include other blues, but their presence does not establish visible theme choices or the site's primary accent. Use the observed `#0000ff` announcement color rather than substituting a library default.

## Tokens — Typography

### Primary Sans-Serif Stack

The computed stack begins with:

```css
HelveticaNeueLTStd-Md, 'Helvetica Neue', Helvetica, Arial,
'秀英角ゴシック銀 L', YuGothic, 'Yu Gothic',
'游ゴシック体', '游ゴシック',
'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif
```

This is direct declaration evidence. Actual font availability and glyph-level fallback were not reported. Most prominent English text uses computed weight `500`, with relatively restrained tracking. Do not replace it with an extremely heavy display face.

The HTML element reports Times at 16px, but the body overrides that family. The visible site is not a serif design.

### Japanese Statement

The two-line Japanese statement declares `'秀英角ゴシック銀 B'`, weight `700`. Its desktop tracking is 1.9px at 38px, equivalent to `0.05em`; mobile preserves that proportion at 1.05px for 21px text.

The source copy is:

> 世の中に機能するデザインを。
> デザインと企画とマネージメント

It provides a heavier, more compact Japanese counterpart beneath the English statement. Preserve its two-line hierarchy where the viewport allows it.

### Wordmark

The visible terminal wordmark is thin, connected, handwritten lettering in white. Its heading has no extracted text, and no logo asset URL was supplied. Treat the wordmark as artwork; the evidence does not support naming a script font or reproducing it with an arbitrary cursive family.

### Type Scale

Values below are measured unless explicitly marked estimated. Sizes and line heights are in CSS pixels.

| Role | Desktop size / line height | Mobile size / line height | Weight and tracking |
| --- | --- | --- | --- |
| Inherited body | `16 / 16` | `16 / 16` | `400`; individual components override it |
| Primary desktop navigation | `18 / 22` | Not visible as an expanded menu | `500`; `0.025em` |
| Social links | `14 / 18` | Not visible in the closed header | `500`; `0.025em` |
| Mobile navigation entries, DOM only | — | `30.6 / 31.5` | `500`; `0.01em`; expanded presentation unverified |
| Introductory keyword pair | `46 / 56` | `25 / 30` | `500`; `0.01em`; white |
| English statement | `46 / 56` | `24 / 29` | `500`; `0.01em` |
| Japanese statement | `38 / 56` | `21 / 30` | `700`; `0.05em` |
| White notice label | `48 / 72` | `20 / 31.5` | `500`; `0.01em` |
| White notice main words | `72 / 72` | `30.5 / 31.5` | `500`; `0.01em` |
| Blue notice label | `36 / 50.4` | `15.5 / 21.7` | `500`; `0.01em` |
| Blue notice main words | `72 / 72` | `31 / 31` | `500`; `0.01em` |
| Blue notice process link | `36 / 36` | `15.5 / 15.5` | `500`; `0.01em` |
| Telephone link | `12 / 16` | `8 / 11` | `500`; `0.025em` |
| Project-section heading | `30 / 56` | `18 / 28` | `500`; `0.025em` |
| Featured-project title | `30 / 34` | `18 / 21` | `500`; `0.01em` |
| Compact-project title | `20 / 24` | `13 / 16` | `500`; `0.01em` |
| Compact tags and view-more label | Approximately `12–13 / 16` | Approximately `9–10 / 11–13` | Screenshot estimate; no dedicated computed sample |
| English footer notice | Approximately `12 / 16` | Approximately `9 / 12` | Screenshot estimate |
| Copyright | Approximately `9–10` | Approximately `7–8` | Screenshot estimate |

The notices' mobile typography is measurable even though most or all of their content lies outside the captured viewport. Those values do not establish a successful mobile presentation.

## Tokens — Spacing & Shapes

**Density:** very small utility text combined with substantial image areas and long intervals of empty gray.
**Geometry:** square corners, thin rules, flat surfaces, and essentially no card enclosure.
**Scaling:** component-specific responsive values. The evidence does not establish one universal spacing unit or a fluid root-font formula.

### Spacing Scale

| Use | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Main content left offset | `288px` | `26px` for inset content | Measured; desktop offset equals 20% of viewport width |
| Outer inset beside logo or archive | Approximately `44.3px` | `26px` | Measured rectangles |
| Navigation item gap | Approximately `36.55px` | — | Derived from adjacent link rectangles |
| Keyword heading to statement | `40px` | `19px` | Derived from text rectangles |
| English to Japanese statement | `25px` | `19px` | Derived from text rectangles |
| Featured-caption horizontal inset | `77.53px` inside image | `26px` | Derived from frame and caption rectangles |
| Archive column gap | Approximately `44.28px` | `20.78px` | Derived |
| Archive vertical separation | `110.75px` in sampled columns | Approximately `51.98px` | Derived from successive card bounds |
| Featured sequence to compact archive | `110.75px` | `78px` | Derived from the last feature and first archive card |
| Compact image to title | Approximately `28px` | Approximately `16px` | Screenshot estimate; image rectangles were not supplied |
| Arrow rule thickness | Approximately `1px` | Approximately `1px` | Screenshot estimate |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| White and blue notices | `0` | Measured |
| Featured-project frames | Square corners | Screenshots |
| Compact project imagery | Square corners | Screenshots |
| Desktop previous/next buttons | `0` | Measured |
| Archive entries | No surrounding card border or raised surface | Screenshots |

A small dark circular fragment is visible at the extreme upper-left of desktop captures. Its purpose and pointer behavior were not established; it does not imply a general rounded-component system.

### Layout Measurements

| Element | Desktop 1440 × 1000 | Mobile 390 × 844 |
| --- | --- | --- |
| Document height | Approximately `31,647px` | Approximately `18,659px` |
| Header rectangle | `1440 × 100px` | `390 × 97px` |
| Wordmark heading rectangle | `(44.30, 40)`, `115 × 20px` | `(26, 35)`, `74.48 × 12.95px` |
| Statement header rectangle | `(288, 148)`, `1107.70 × 681px` | `(26, 97)`, `338 × 418px` |
| White notice | `(346, 191)`, `582 × 494px` | `(346, 191)`, `243 × 221px` |
| Blue notice | `(573.5, 135)`, `521 × 602.39px` | `(573.5, 135)`, `224 × 259.69px` |
| First photographic feature | `(288, 1208.30)`, `1152 × 753.23px` | `(0, 804.16)`, `390 × 306.80px` |
| First archive card | `(288, 17136.97)`, `339.70px` wide | `(26, 7324.89)`, `158.61px` wide |
| Archive column starts | `288`, `671.98`, `1055.97px` | `26`, `205.39px` |
| Desktop image-navigation button | `50 × 50px` | No corresponding visible mobile controls demonstrated |
| Mobile top-right button | — | `(342.52, 19)`, `35 × 35px` |

Coordinates refer to the supplied initial DOM snapshots. Scrolled screenshot coordinates are viewport-relative and should not be mixed with these document positions. Mobile document-height samples differ by a few pixels; a fixed total document height is not an implementation requirement.

## Components

### Persistent Desktop Header

**Role:** identity, primary site navigation, and external destinations.

Place the white handwritten wordmark near the upper-left at x ≈ 44px. The six navigation links begin at the same x = 288px axis as the main content. They read `projects`, `about`, `stories`, `studio`, `news`, and `contact` in the rendered interface. Their extracted text uses initial capitals, so preserve the rendered lowercase treatment deliberately.

Each primary link has 14px vertical padding around an 18px/22px label, producing a 50px-high rectangle. A thin horizontal rule above `projects` identifies the current section visually. Social and store links form a compact vertical group near the top-right, starting at x ≈ 1328px.

The header remains in the same screen region in the middle and ending desktop captures. It is visually persistent and transparent: project imagery and archive content can pass behind it. The supplied style sample does not include the positioning declaration, so the exact fixed/sticky mechanism is not established.

### Mobile Header and Project Context

**Role:** compact identity and navigation access.

The opening phone capture shows a roughly 75px-wide white wordmark at x = 26px and a tiny square-like mark at the upper-right. The DOM measures its outer button at 35 × 35px. The actual icon construction and accessible name were not supplied.

In the ending mobile capture, `projects / all projects` appears across the top while the menu mark remains at the right. This supports a persistent project-context state during scrolling. The trigger threshold and transition were not exercised.

The DOM also contains larger, vertically arranged navigation links at 30.6px. They are absent from the visible opening screenshot. Their measured rectangles alone are not proof that an expanded mobile menu was inspected.

### Introductory Statement

**Role:** explain the studio's approach before presenting its work.

The introduction is a left-aligned block on the gray canvas. A white keyword pair and long thin arrow sit above a charcoal English statement. The desktop pair is `unknown → visible`; the mobile pair is `boring → beauty`. These are separate observed states, not proof of a particular rotation timer.

The statement uses explicit editorial line structure:

> design changes
> communication you have had
> views you have seen
> images you have had
> action you have taken
> future you were about to step into.
> we design your way.
> terminal inc.

The `we design your way.` line is white in the screenshots, creating emphasis through color without changing the overall typographic voice. The English block is eight lines high on desktop and ten lines on mobile, where the communication and future sentences break further.

Below it, the heavier Japanese statement occupies two lines. The design relies on shared left alignment and spacing, not a containing card, decorative illustration, or a conversion-button cluster.

### Overlapping Announcement Panels

**Role:** present an additional studio message and relocation notice over the opening statement.

The rear white panel contains `(we design)` and the centered three-line phrase `departures / to / arrivals`. At desktop it is 582 × 494px, with 42px top padding and 50px bottom padding. The heading occupies a 72px line box; a measured 114px interval separates its bottom from the main phrase.

The foreground blue panel sits higher and farther right. Its anatomy is a small introductory label, a large three-line location statement, a date, and an underlined outbound link:

- `(finally we moved)` at 36px/50.4px.
- `sendagaya / to / harajuku` at 72px/72px.
- `july 1st 2022`, visually about 24px on desktop; no dedicated computed sample was provided.
- `view process` at 36px, linking to `https://youtu.be/GrJKqD6HefM`.

The blue section has 58px top padding and 68px bottom padding. Both panels have square corners and no visible shadow. Their layering is established by overlap and color.

No close control, drag interaction, focus trap, or modal semantics were demonstrated. Describe them as panels, not confirmed draggable windows or dialogs. The 2022 date is content still visible in the October 2026 capture; it is not the inspection date.

### Location and Contact Block

**Role:** provide immediate office and telephone information beneath the statement.

Two small text columns are labeled `location` and `contact`. The address and telephone/fax lines are visually subordinate to the manifesto. The telephone is an actual `tel:` link in the supplied DOM.

The two columns remain side by side on mobile. This is a strong scale contrast: the measured telephone text decreases from 12px/16px to 8px/11px. Record that faithfully, but increase its minimum size when making an accessible adaptation.

### Desktop Category Rail

**Role:** expose the archive's range of disciplines and its current category context.

The desktop project captures show a narrow vertical list beginning near x = 44px, y = 127px. Labels are simple hashtag-prefixed words, including `#art`, `#branding`, `#campaign`, `#editorial`, `#graphic`, `#identity`, `#package`, `#space`, and `#web`. The first `#all projects` label is white, while other items are charcoal. A separate `#all project` entry also appears; do not silently collapse the two labels when documenting the original.

The rail remains visible beside both a large project photograph and the ending archive. Labels are approximately 14px with tight 18px vertical rhythm, estimated from screenshots. There are no filled chips, counts, icons, or surrounding boxes.

Category selection was not tested. Filtering, navigation targets, result animation, and URL updates remain unverified.

### Project-Section Heading

**Role:** mark the transition from company statement to portfolio.

The visible label is `projects / all projects`, with the category portion in white and a fine horizontal lead-in rule. On mobile it is inset 26px, uses 18px/28px type, and allocates 90px before the text. The opening photograph begins at y ≈ 804px, so only its upper strip enters the initial 844px-high capture.

This heading becomes part of the visible top context in the scrolled mobile screenshot. Do not assume it stays in its initial document position throughout scrolling.

### Large Featured Project

**Role:** give selected work an immersive photographic presentation.

The DOM identifies twenty-one consecutive large project blocks, from Terrace Mall Shonan 2023 through BOMBAY SAPPHIRE. Each measured desktop block is 1152 × 753.23px, occupying the viewport from the main 288px axis to the right edge. The next feature begins directly after the preceding one.

An image fills the frame. A white caption group is inset approximately 77.53px from the left and vertically centered as a group. Its anatomy is:

1. A project title at 30px/34px.
2. Wrapped, unboxed hashtag metadata; approximately 18px in the visible THE PICNIC capture.
3. A small `view more` label above a fine horizontal arrow.

The block itself is a project link in the rendered DOM. Desktop previous/next buttons occupy the lower-right corner of each feature: two 50px squares, a 1px separation, gray backgrounds, and small navy arrows. Their click results were not supplied.

On mobile the block becomes 390 × 306.80px with 26px caption insets and an 18px/21px title. The desktop and mobile frame ratios differ; do not use the desktop crop unchanged at phone width.

### Compact Project Archive

**Role:** make a large body of work browsable after the featured sequence.

The archive changes to three staggered columns on desktop and two on mobile. Each entry consists of an image, title, discipline hashtags, and `view more` arrow. Text sits directly on the gray canvas, with no separate card fill or border.

Images retain varied proportions. The ending captures include a horizontal fashion look-book composition, a burger-box photograph, and a dark website screenshot. Treat these as distinct project assets rather than forcing them into identical thumbnail crops.

Desktop columns measure about 339.70px wide with 44.28px gaps. Mobile columns measure 158.61px with a 20.78px gap. Successive items begin beneath shorter columns, consistent with a shortest-column masonry arrangement; the original layout engine was not identified.

Title sizes reduce from 20px/24px to 13px/16px. Tags wrap naturally into several short lines on mobile. Entry heights vary with both image shape and metadata, producing irregular lower edges and generous open gray space.

### View-More Arrow

**Role:** provide a consistent directional cue without a button enclosure.

The compact archive uses a small lowercase label with a long, fine horizontal rule beneath it. A short diagonal at the right end forms the arrowhead. The rule is approximately 160px long in the desktop ending capture and approximately 95px on mobile. The featured-image version is also approximately 95px in the supplied desktop screenshot.

Use `currentColor` so the cue inherits white over feature images and charcoal in the archive. Keep it inside the project's link; creating a second nested link is unnecessary.

### Footer

**Role:** close the archive with company information about the site's content and a copyright line.

The footer contains a small English notice, a Japanese notice beneath it, and a separate copyright line after a substantial gap. The original footer identifies the site as presenting the profile and achievements of terminal Inc., also named as 株式会社terminal.

On desktop, the footer shares the x = 288px main axis. On mobile it spans the 338px inset content width. The last archive arrow is followed by approximately 165px of space before the English notice on desktop and approximately 80px in the mobile ending screenshot; these are visual estimates.

There is no contrasting footer band, newsletter form, large contact CTA, or multi-column sitemap in the supplied ending captures. The gray surface remains uninterrupted.

## Tokens — Motion & Interaction

| Treatment | Evidence | What can be concluded |
| --- | --- | --- |
| Desktop navigation color | `color 0.6s cubic-bezier(0.25, 0.4, 0.4, 1)` | A 600ms color transition is declared; the destination color was not captured. |
| Social-link color and opacity | Both use `0.6s cubic-bezier(0.25, 0.4, 0.4, 1)` | Restrained visual feedback is defined; actual hover appearance is unverified. |
| Main content opacity | `opacity 0.6s cubic-bezier(0.25, 0.4, 0.4, 1)` | An opacity transition exists; its navigation or loading trigger is unknown. |
| Announcement opacity | Same 600ms opacity transition | The panels can transition opacity; dragging, entrance path, and dismissal were not established. |
| Desktop image controls | Same 600ms color transition | Button styling is defined, but slide transition behavior is unverified. |
| Mobile menu button | Same 600ms opacity transition | The button has a declared fade treatment; expanded-menu behavior was not observed. |
| Introductory word pair | Different words in desktop and mobile captures | Multiple content states are evidenced; cycling, sequence, duration, and trigger are not. |
| Persistent header and category context | Remain in the top/side regions of scrolled captures | Persistence is visually supported; implementation details and thresholds are unknown. |
| Project destinations | Explicit project URLs in anchors | The entries have navigation targets; destination pages were not opened. |
| Telephone and process links | `tel:` target and an external video URL | Link destinations are evidenced; activation was not tested. |

Most sampled elements report `animation: none`. Several report only `transition: all` without a timed transition in the supplied serialization; that does not establish a visible animation. JavaScript-driven behavior also cannot be ruled out from these fields.

The collection process waited for load, sampled stability, and visible image decoding within time limits. Perpetual animations were paused during readiness checks and resumed afterward. This improves capture consistency but does not prove that every delayed state or interaction was exercised.

For an adaptation, use the measured 600ms easing for subtle color and opacity feedback. Any image sliding, word rotation, panel movement, or filter rearrangement needs an explicitly designed behavior rather than an invented claim about the source.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Continuous light gray | Unifies introduction, rail, archive, and footer |
| Navigation | Transparent text and thin active rule | Preserves the open composition over changing content |
| Rear notice | Solid white rectangle with charcoal text | Creates a second typographic plane |
| Foreground notice | Solid pure-blue rectangle with white text | Concentrates attention on the relocation message |
| Featured work | Full-frame photography with white captions | Makes the work the dominant visual material |
| Image controls | Gray squares with fine dark arrows | Supplies a small functional overlay |
| Archive entries | Image and text directly on the canvas | Maintains density without card chrome |

There is no visible general shadow, blur, gradient, or rounded-card elevation system. Spatial hierarchy comes from scale, alignment, overlap, image edges, and empty space.

## Imagery

The portfolio uses project-specific photography and graphic work in full color. The visible THE PICNIC feature is a close crop of a transparent drink cup with condensation, a black straw, and a printed label, against a soft cyan and pale background. Its focal object occupies the center-right, leaving a quieter region for white metadata on the left.

The compact archive presents a different viewing mode. Airs BURGER shows a white branded package against a gray architectural corner. ITOKIN look book shows printed fashion layouts with multiple portraits. Comfort HOTEL shows a dark website composition with a photographed man. These assets explain the work directly; they are not decorative background stock photography.

Keep photography smooth and detailed. No pixelated rendering or global monochrome filter is evidenced. Some assets are naturally neutral or dark, while others are colorful.

### Observed Asset References

No direct image `src`, source dimensions, or logo file path was included. The URLs below are project destinations present in the rendered homepage, not media URLs and not separately inspected pages.

| Visible material | Observed destination | Treatment visible in current captures |
| --- | --- | --- |
| THE PICNIC drink photography | [Project link](https://www.terminaldesign.jp/projects/the-picnic/) | Large cropped feature with white caption overlay |
| ITOKIN fashion look book | [Project link](https://www.terminaldesign.jp/projects/itokin-look-book/) | Compact landscape image above a title and tags |
| Airs BURGER packaging | [Project link](https://www.terminaldesign.jp/projects/airs-burger/) | Neutral product photograph, square corners |
| Comfort HOTEL website image | [Project link](https://www.terminaldesign.jp/projects/comfort-hotel/) | Wide, dark screenshot retained as project imagery |
| Handwritten terminal wordmark | Homepage identity link | White artwork; exact asset URL unavailable |

For a new implementation, use authorized project assets and preserve their individual aspect ratios in the compact archive. CSS can reproduce the frame and caption system, but cannot replace the actual visual identity of the work.

## Layout & Responsive Behavior

### Desktop Composition

The main alignment axis is exactly 20% of the inspected viewport width: `1440 × 0.2 = 288px`. The archive ends approximately 44.3px before the right edge, while large project photographs continue all the way to it.

This distinction matters. One universal centered max-width container would erase the relationship between the left rail, inset archive, and right-bleeding feature images.

The introduction begins at y = 148px. It is followed by contact information, the project-section heading, the twenty-one large features, a 110.75px interval, and the compact archive. The resulting document is approximately 31.6k pixels tall. This is a substantial portfolio index, not a short sequence of marketing sections.

### Mobile Composition

Inset text uses 26px side margins, producing a 338px content width. Large project images remove those margins and span all 390px. The compact archive restores the margins and uses two approximately 158.61px columns.

The statement starts at y = 97px. Its type reduces substantially but remains the primary opening content. Location and contact remain side by side. The project heading appears around y = 709px, and the first feature begins around y = 804px.

The desktop category rail is absent from the visible phone screenshots. A small project-category marker appears beside the mobile section label, but its expanded UI was not demonstrated. Do not invent a category drawer or chip list as an observed feature.

### Announcement Clipping

The white panel retains x = 346px in the mobile DOM. At a viewport width of 390px, only `390 − 346 = 44px` can appear, matching the white strip visible from y = 191px to y = 412px. The panel's text is largely outside the viewport.

The blue panel retains x = 573.5px, placing its left edge 183.5px beyond the phone viewport. Its absence from the screenshot therefore does not establish that the site intentionally hides it with a responsive display rule.

The cause of these retained coordinates was not investigated. They could reflect layout or runtime state; the evidence supports only the captured outcome. A new implementation should constrain or reflow notices on narrow screens and keep their links reachable.

### Breakpoints and Ordering

Only two viewport widths were supplied. The exact breakpoint between desktop and mobile layouts is unknown, as is the behavior on tablets and landscape phones.

A breakpoint near 900px is a reasonable implementation starting point, not a measured source value. Validate the navigation before it collides with the social group. For masonry, retain meaningful DOM order and check keyboard traversal after changing column count.

## Do’s and Don’ts

### Do

- Preserve the continuous gray canvas and measured charcoal `#3e3e3e` text.
- Reserve pure blue `#0000ff` for the prominent announcement treatment.
- Keep the wordmark small, white, and visually distinct from the sans-serif interface.
- Align desktop navigation, statement, archive, and footer to the 20% main axis.
- Let desktop feature photography reach the right viewport edge.
- Preserve the two portfolio scales: large image features followed by a compact archive.
- Use flat, square panels and image edges.
- Keep hashtags as plain text rather than decorative badges.
- Use fine arrows and small labels for project navigation.
- Retain varied image proportions and staggered archive columns.
- Treat the clipped mobile notices as an observed limitation, with a separately labeled responsive correction.
- Distinguish defined transitions from interactions that were actually demonstrated.

### Don’t

- Don't replace the page structure with a generic hero, service cards, testimonials, and a conversion banner.
- Don't put every project inside a white rounded card.
- Don't turn the blue notice color into a universal button and link color.
- Don't center the desktop archive inside a symmetrical container.
- Don't crop every compact project image to one fixed ratio.
- Don't substitute an arbitrary script font for the wordmark artwork.
- Don't interpret transparent body styles as evidence of a white canvas.
- Don't interpret mobile DOM menu text as an observed open menu.
- Don't assume panels are draggable, dismissible, or modal.
- Don't claim carousel autoplay, swipe gestures, or timed word rotation without further evidence.
- Don't copy desktop announcement coordinates onto narrow screens in a production adaptation.
- Don't treat the 2022 relocation date as proof that the inspected page is a historical reconstruction.

## Recommended Implementation Additions

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

- Constrain announcement width to the viewport and place notices in normal document flow on narrow screens. Preserve their colors and typography without losing their content outside the screen.
- Give the mobile menu, category control, and image-navigation buttons explicit accessible names and state attributes. A visually tiny glyph can sit inside a 44px or larger touch target.
- Keep carousel buttons as siblings of the project link rather than nesting interactive buttons inside an anchor.
- Increase the mobile contact and footer text from the observed very small sizes. An 11–12px floor is a conservative visual adjustment; essential reading content may need larger text.
- Review white text on gray. Using the estimated `#d2d2d2` background, white has only about 1.5:1 contrast. Use an ink-colored or otherwise higher-contrast treatment for essential labels and selected states.
- Check white captions against each image crop. Choose a quiet image region or add a restrained local contrast treatment when necessary; no universal scrim was established by the evidence.
- Provide visible keyboard focus and prevent offscreen or closed navigation from remaining keyboard-focusable.
- Preserve source order during masonry layout and avoid surprising focus jumps when columns change.
- Respect reduced-motion preferences for any newly implemented word cycling, panel movement, or image transitions.
- Supply image dimensions, responsive image sources, and lazy loading for the long archive while prioritizing images visible at entry.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: approximately `#d2d2d2`, visually estimated.
- Main type and thin rules: measured `#3e3e3e`.
- Wordmark, emphasized statement text, and photographic captions: white.
- Foreground announcement: measured `#0000ff` with white text.
- Rear announcement: measured white with charcoal text.
- Project-navigation buttons: measured `#d2d2d2` with `#002538` arrow color.
- Elevation: overlapping flat planes; no general shadow system.

### Overall Prompt

“Create a Japanese design-studio portfolio inspired by the supplied terminal homepage evidence. Use a continuous light-gray canvas, charcoal medium-weight sans-serif text, a small white handwritten wordmark asset, and a desktop content axis at 20% of the viewport. Place lowercase site navigation above that axis, a compact social group at the upper-right, and a plain hashtag category rail on the left during project browsing. Open with a large English statement and a heavier two-line Japanese statement. Layer a white typographic notice with a pure-blue relocation notice on desktop. Follow the introduction with full-width photographic features inside the right-hand content region, then a three-column masonry archive with varied image ratios, small hashtags, and thin view-more arrows. On mobile use 26px text margins, full-viewport feature photography, and a two-column archive. Reflow notices within the viewport as an explicit usability improvement. Keep all surfaces square and flat.”

### Example Component Prompts

1. **Desktop navigation:** “Build a transparent persistent header for a gray portfolio. Place a 115 × 20px white wordmark near x = 44px at a 1440px viewport. Start six lowercase 18px navigation labels at x = 288px, with approximately 36.5px gaps and a thin rule above the active item. Put four 14px social/store links in a vertical stack near the right edge.”
2. **Statement:** “Compose a left-aligned studio statement with 46px/56px medium sans-serif English text, 0.01em tracking, a white keyword-and-arrow line, and one white emphasis line within charcoal copy. Add a two-line Japanese statement at 38px/56px with 0.05em tracking. Reduce to 24px/29px English and 21px/30px Japanese at 390px width.”
3. **Announcement:** “Create two square typographic panels over a gray introduction: a rear white panel with charcoal departures/to/arrivals text, and an offset foreground pure-blue panel with white relocation text and an underlined process link. Use overlap without shadows. Keep the mobile adaptation in flow and fully readable; dragging and dismissal are not required by the evidence.”
4. **Featured project:** “Create a photographic project frame about 1152 × 753px on desktop, with a white title, wrapped hashtags, and a small fine-arrow view-more cue inset about 78px from the left. Place two 50px gray navigation squares at the lower-right. On a 390px phone use a roughly 307px-high frame and 26px caption insets.”
5. **Archive entry:** “Create an unboxed project entry on gray: uncropped project artwork, a medium-weight 20px title, compact plain hashtags, and a thin 160px directional rule under a small view-more label. Use approximately 340px desktop columns and 159px mobile columns; mobile titles are 13px. Preserve variable image heights and generous vertical separation.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not recovered source CSS. It uses a conventional 16px root. Colors and major typography follow measured values; the canvas color, breakpoint, some spacing, and metadata styling are approximations.

Expected structure: `.site-header` contains `.brand`, `.primary-nav`, `.social-nav`, and `.menu-toggle`; `.intro` contains the statement and contact block; `.notices` contains the two notice sections; `.projects` contains `.projects-heading`, `.featured-list`, and `.archive`. Each archive link is a `.project-card` containing an image, heading, tags, and `.view-more`. Carousel controls are siblings of `.feature-link` within `.featured-project`.

The archive below uses CSS columns as a usable no-JavaScript masonry approximation. Its column-major ordering will not reproduce the observed shortest-column placement exactly. Use a measured masonry implementation with logical DOM order when exact placement is required. Menu, filtering, carousel state, and scroll-context changes require separate behavior.

The mobile notice reflow and larger contact/footer text are deliberate recommended improvements.

```css
:root {
  /* Visual estimate for canvas; other colors are measured. */
  --color-canvas: #d2d2d2;
  --color-ink: #3e3e3e;
  --color-white: #ffffff;
  --color-notice: #0000ff;
  --color-control: #d2d2d2;
  --color-arrow: #002538;

  /* Declared family names; supply licensed fonts separately. */
  --font-main: HelveticaNeueLTStd-Md, 'Helvetica Neue', Helvetica,
    Arial, '秀英角ゴシック銀 L', YuGothic, 'Yu Gothic',
    'Hiragino Kaku Gothic ProN', sans-serif;
  --font-japanese-bold: '秀英角ゴシック銀 B', YuGothic,
    'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;

  --weight-medium: 500;
  --weight-bold: 700;
  --tracking-text: 0.01em;
  --tracking-utility: 0.025em;

  /* Desktop formulas approximate the measured 1440px layout. */
  --content-start: 20vw;
  --outer-inset: 3.076vw;
  --archive-gap: 3.075vw;
  --archive-space: 110.75px;
  --caption-inset: 5.384vw;
  --text-statement: 46px;
  --leading-statement: 56px;
  --text-project: 20px;
  --leading-project: 24px;
  --text-feature: 30px;
  --leading-feature: 34px;
  --feature-ratio: 1152 / 753.234;

  --rule: 1px;
  --motion-duration: 600ms;
  --motion-easing: cubic-bezier(0.25, 0.4, 0.4, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.4;
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: 100px;
  pointer-events: none;
}

.site-header a,
.site-header button { pointer-events: auto; }

.brand {
  position: absolute;
  top: 40px;
  left: var(--outer-inset);
  width: 115px;
}

.brand img { width: 100%; height: auto; }

.primary-nav {
  position: absolute;
  top: 29px;
  left: var(--content-start);
  display: flex;
  gap: 36.55px;
}

.primary-nav a {
  padding-block: 14px;
  border-top: 1px solid transparent;
  font-size: 18px;
  font-weight: var(--weight-medium);
  line-height: 22px;
  letter-spacing: var(--tracking-utility);
  text-transform: lowercase;
  transition: color var(--motion-duration) var(--motion-easing);
}

.primary-nav a[aria-current='page'] {
  border-top-color: currentColor;
}

.social-nav {
  position: absolute;
  top: 38px;
  right: var(--outer-inset);
  display: grid;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--tracking-utility);
  text-transform: lowercase;
}

.social-nav a {
  transition: opacity var(--motion-duration) var(--motion-easing);
}

.menu-toggle { display: none; }

.intro {
  margin-left: var(--content-start);
  margin-right: var(--outer-inset);
  padding-top: 148px;
}

.intro-kicker,
.manifesto {
  margin: 0;
  font-size: var(--text-statement);
  font-weight: var(--weight-medium);
  line-height: var(--leading-statement);
  letter-spacing: var(--tracking-text);
}

.intro-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
  color: var(--color-white);
}

.manifesto-line { display: block; }
.manifesto-emphasis { color: var(--color-white); }
.mobile-break { display: none; }

.statement-jp {
  margin: 25px 0 0;
  font-family: var(--font-japanese-bold);
  font-size: 38px;
  font-weight: var(--weight-bold);
  line-height: 56px;
  letter-spacing: 0.05em;
}

.contact-grid {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  margin-top: 64px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking-utility);
}

.contact-grid h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: var(--weight-medium);
  line-height: 22px;
}

.contact-grid p { margin: 0; }

.notices {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.notice {
  position: absolute;
  max-width: calc(100vw - 52px);
  border-radius: 0;
  text-align: center;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-text);
}

.notice h2,
.notice p { margin: 0; }

.notice--white {
  top: 191px;
  left: 24.028vw;
  width: 582px;
  padding: 42px 0 50px;
  background: var(--color-white);
  color: var(--color-ink);
}

.notice--white h2 { font-size: 48px; line-height: 72px; }

.notice--white .notice-words {
  margin-top: 114px;
  font-size: 72px;
  line-height: 72px;
}

.notice--blue {
  top: 135px;
  left: 39.826vw;
  width: 521px;
  padding: 58px 20px 68px;
  background: var(--color-notice);
  color: var(--color-white);
}

.notice--blue h2 { font-size: 36px; line-height: 50.4px; }

.notice--blue .notice-words {
  margin-top: 56px;
  font-size: 72px;
  line-height: 72px;
}

.notice--blue .notice-date {
  margin-top: 16px;
  font-size: 24px;
  line-height: 30px;
}

.notice-process {
  display: inline-block;
  margin-top: 61px;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  font-size: 36px;
  line-height: 36px;
}

.category-rail {
  position: fixed;
  top: 124px;
  left: var(--outer-inset);
  z-index: 30;
  display: grid;
  font-size: 14px;
  line-height: 18px;
}

.category-rail button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Recommended accessible selection treatment. */
.category-rail button[aria-pressed='true'] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.projects { margin-top: 40px; }

.projects-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--outer-inset) 28px var(--content-start);
  padding-top: 110px;
  font-size: 30px;
  font-weight: var(--weight-medium);
  line-height: 56px;
}

.projects-heading::before {
  content: '';
  flex: 0 0 170px;
  border-top: var(--rule) solid currentColor;
}

.featured-list { margin-left: var(--content-start); }

.featured-project {
  position: relative;
  aspect-ratio: var(--feature-ratio);
}

.feature-link { display: block; height: 100%; }

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position, center);
}

.feature-caption {
  position: absolute;
  top: 50%;
  left: var(--caption-inset);
  right: var(--caption-inset);
  transform: translateY(-50%);
  color: var(--color-white);
}

.feature-caption h3 {
  margin: 0 0 26px;
  font-size: var(--text-feature);
  font-weight: var(--weight-medium);
  line-height: var(--leading-feature);
  letter-spacing: var(--tracking-text);
}

.feature-caption .project-tags {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 22px;
}

.feature-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 1px;
}

.feature-controls button {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-control);
  color: var(--color-arrow);
  cursor: pointer;
  transition: color var(--motion-duration) var(--motion-easing);
}

.archive {
  margin: 110.75px var(--outer-inset) 0 var(--content-start);
  column-count: 3;
  column-gap: var(--archive-gap);
}

.project-card {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--archive-space);
  break-inside: avoid;
  vertical-align: top;
}

.project-card img { width: 100%; height: auto; }

.project-card h3 {
  margin: 28px 0 18px;
  font-size: var(--text-project);
  font-weight: var(--weight-medium);
  line-height: var(--leading-project);
  letter-spacing: var(--tracking-text);
  overflow-wrap: anywhere;
}

.project-tags { margin: 0 0 28px; font-size: 12px; line-height: 16px; }
.project-tags span { display: inline; }

.view-more {
  position: relative;
  display: block;
  width: 160px;
  max-width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  line-height: 16px;
}

.view-more::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 6px;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}

.feature-caption .view-more { width: 95px; }

.site-footer {
  margin: 54px var(--outer-inset) 0 var(--content-start);
  padding-bottom: 44px;
  font-size: 12px;
  line-height: 16px;
}

.site-footer p { margin: 0; }
.site-footer .footer-jp { margin-top: 26px; font-size: 10px; }
.site-footer .copyright { margin-top: 116px; font-size: 9px; }

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (hover: hover) {
  /* Recommended feedback; the source endpoint was not captured. */
  .social-nav a:hover { opacity: 0.65; }
  .project-card:hover .view-more { text-decoration: underline; }
}

/* Proposed breakpoint; only 1440px and 390px were inspected. */
@media (max-width: 900px) {
  :root {
    --content-start: 26px;
    --outer-inset: 26px;
    --archive-gap: 20.78px;
    --archive-space: 52px;
    --caption-inset: 26px;
    --text-statement: 24px;
    --leading-statement: 29px;
    --text-project: 13px;
    --leading-project: 16px;
    --text-feature: 18px;
    --leading-feature: 21px;
    --feature-ratio: 390 / 306.797;
  }

  .site-header { height: 97px; }
  .brand { top: 35px; left: 26px; width: 74.48px; }
  .primary-nav, .social-nav, .category-rail { display: none; }

  .menu-toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 15px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
  }

  .intro { padding-top: 97px; }
  .intro-kicker { margin-bottom: 19px; font-size: 25px; line-height: 30px; }
  .mobile-break { display: initial; }
  .statement-jp { margin-top: 19px; font-size: 21px; line-height: 30px; }

  .contact-grid {
    grid-template-columns: 140px minmax(0, 1fr);
    margin-top: 40px;
    font-size: 11px;
    line-height: 15px;
  }

  .contact-grid h2 { font-size: 13px; line-height: 17px; margin-bottom: 4px; }

  /* Recommended correction to the captured offscreen notices. */
  .notices {
    position: relative;
    inset: auto;
    display: grid;
    justify-items: center;
    gap: 20px;
    margin: 48px 26px 0;
  }

  .notice { position: static; width: 100%; max-width: 338px; }
  .notice--white { padding: 21px 20px 22px; }
  .notice--white h2 { font-size: 20px; line-height: 31.5px; }
  .notice--white .notice-words { margin-top: 52px; font-size: 30.5px; line-height: 31.5px; }
  .notice--blue { padding: 25px 20px 30px; }
  .notice--blue h2 { font-size: 15.5px; line-height: 21.7px; }
  .notice--blue .notice-words { margin-top: 23px; font-size: 31px; line-height: 31px; }
  .notice--blue .notice-date { margin-top: 12px; font-size: 12px; line-height: 16px; }
  .notice-process { margin-top: 26px; padding-bottom: 3px; font-size: 15.5px; line-height: 19px; }

  .projects { margin-top: 100px; }
  .projects-heading { gap: 10px; margin-bottom: 43px; padding-top: 24px; font-size: 18px; line-height: 28px; }
  .projects-heading::before { flex-basis: 80px; }
  .featured-list { margin-left: 0; }
  .feature-caption h3 { margin-bottom: 14px; }
  .feature-caption .project-tags { margin-bottom: 18px; font-size: 11px; line-height: 13px; }

  .archive { margin-top: 78px; column-count: 2; }
  .project-card h3 { margin: 16px 0 10px; }
  .project-tags { margin-bottom: 18px; font-size: 10px; line-height: 13px; }
  .view-more { width: 95px; padding-bottom: 7px; font-size: 10px; line-height: 13px; }

  .site-footer { margin-top: 28px; padding-bottom: 26px; font-size: 11px; line-height: 15px; }
  .site-footer .footer-jp { font-size: 11px; line-height: 17px; }
  .site-footer .copyright { margin-top: 72px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav a,
  .social-nav a,
  .feature-controls button { transition: none; }
}
```

Control the desktop category rail's visibility using the project section's actual state; do not leave it over the opening statement. For mobile, a separately implemented menu should contain the navigation links hidden by the desktop-to-mobile switch. The supplied CSS intentionally does not invent its expanded appearance.

### Tailwind v4 Token Mapping

Optional aliases for an implementation already using Tailwind v4. They do not imply that the original site uses Tailwind. Load the custom properties above first.

```css
@theme inline {
  --color-canvas: #d2d2d2;
  --color-ink: #3e3e3e;
  --color-notice: #0000ff;
  --color-control: #d2d2d2;
  --color-arrow: #002538;

  --font-studio: var(--font-main);
  --font-statement-jp: var(--font-japanese-bold);

  --text-statement: var(--text-statement);
  --text-archive-title: var(--text-project);
  --text-feature-title: var(--text-feature);

  --spacing-page-inset: var(--outer-inset);
  --spacing-main-axis: var(--content-start);
  --spacing-project-gap: var(--archive-gap);
  --spacing-project-separation: var(--archive-space);

  --radius-panel: 0px;
  --ease-studio: cubic-bezier(0.25, 0.4, 0.4, 1);
}
```

When defining Tailwind aliases, avoid a self-reference for the statement size: rename the preceding CSS variable to `--studio-statement-size` and map `--text-statement: var(--studio-statement-size)`, or omit that one mapping and use the ordinary CSS class.

## Sources & Evidence

- [terminal Inc. homepage](https://www.terminaldesign.jp/): original and final URL are identical; the supplied browser observation reports HTTP 200 and the title `terminal Inc. | design, planning and management`.
- Retrieval timestamp: `2026-10-01T18:50:16.082Z`, corresponding to October 2, 2026, at 03:50:16.082 JST.
- Current desktop captures at 1440 × 1000: opening statement with overlapping notices, a middle project view featuring THE PICNIC, and the final archive/footer region.
- Current mobile captures at 390 × 844: opening statement with clipped white panel, and the final two-column archive/footer region.
- Supplied rendered evidence: page text, anchor destinations, selected element rectangles, computed font families, sizes, weights, colors, spacing, and transition declarations at both viewport sizes.
- Observed state evidence: persistent navigation across supplied scroll positions, different introductory keyword pairs, differing desktop/mobile archive geometry, and out-of-viewport mobile announcement rectangles.
- Limitations: no independent browsing or command execution was performed for this reference. Exact media URLs, full source stylesheets, resolved font files, breakpoint declarations, menu expansion, category selection, carousel activation, hover endpoints, and panel interactions were not available. Linked project and external pages were not inspected.

All current-design findings above come from the supplied original-page captures and rendered evidence. Pixel estimates and implementation recommendations are identified separately from measured values.