# SHIFTBRAIN — Style Reference

> A quiet white frame for large, vivid creative work.

**Website / Original URL:** [shiftbrain.com](https://shiftbrain.com/)
**Final URL:** [https://shiftbrain.com/](https://shiftbrain.com/)
**Theme:** light in the captured VISUAL state.
**Inspected:** October 6, 2026, 00:39:53 JST. The supplied retrieval timestamp is October 5, 2026, 15:39:53.054 UTC.
**Viewports:** desktop at 1440 × 1000 and mobile at 390 × 844 CSS pixels.
**Scope:** the current homepage portfolio, with Work active, All selected, and VISUAL selected. Visual evidence covers the opening composition and the beginning of the project grid. Additional project records, alternative-mode content, and utility links are documented only where supported by the supplied DOM.

SHIFTBRAIN presents its work through a restrained studio interface: white space, near-black text, a narrow outlined S mark, and an unusually light introductory statement. The project imagery supplies the color, texture, and visual density. The interface itself stays almost entirely monochrome.

The defining layout is a portfolio index. Selected projects occupy two tracks of a three-track desktop grid, while other projects occupy one. All images in a desktop row share the same height. On mobile, the grid becomes two tracks, wide projects occupy the full content width, and project titles move into visible captions below the images. A small floating TEXT / VISUAL / HUMAN selector adds a distinctive control without becoming the main visual attraction.

## How to Read This Reference

- **Measured** means a value explicitly recorded in the supplied computed styles or element rectangles.
- **Derived** means arithmetic using those measurements, such as a gap between two recorded rectangles.
- **Visual estimate** means an approximation from the supplied current-page screenshots. These estimates are not pixel-sampled colors or inspected CSS declarations.
- **Recommended** means an implementation choice for a new build. Breakpoints, untested interaction states, and accessible enhancements are identified accordingly.
- **Named tokens** are reusable aliases introduced here. They are not original source-variable names.
- **DOM presence is not proof of visibility.** The export includes alternative content and overlapping element rectangles that do not appear in the captured VISUAL state.
- The supplied desktop captures show the same opening composition, as do the mobile captures. They do not establish a sequence of distinct interaction or scrolling states.

The reference uses the supplied evidence only. No linked project page or additional website state was independently opened.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Canvas White | `#ffffff` | `--color-canvas` | Visually white page and mode-selector surface. HTML and BODY were reported as transparent, so this is a direct-color reproduction of the visible canvas rather than a measured BODY declaration. |
| Studio Ink | `#121212` | `--color-ink` | Measured `rgb(18, 18, 18)` on the heading, body text, category buttons, and mobile project titles. |
| Reversed Caption | `#ffffff` | `--color-on-image` | Measured on desktop project H2 and client text. Those captions are positioned over images in the DOM but are not visibly readable in the supplied resting desktop capture. |
| Quiet Filter | Approximately `#b8b8b8` | `--color-filter-estimate` | Visual estimate for unselected desktop categories. Their computed text color remains Studio Ink; an opacity treatment on the element or an ancestor may explain the lighter appearance. |
| Quiet Metadata | Approximately `#929292` | `--color-meta-estimate` | Visual estimate for mobile client captions. Their recorded text color is also Studio Ink, so the final compositing mechanism is unverified. |
| Selected Mode | Approximately `#121212` | Reuse `--color-ink` | Visual estimate for the dark VISUAL capsule. No computed mode-control styles were supplied. |

**Separate the frame from the artwork.** Cyan, violet, pink, blue, and dark navy dominate the first two project images, but they are project content, not a site-wide action palette. The interface does not use a blue primary button or purple category badges in the captured state.

The exported administrative color variables are not evidence of visible brand colors. Do not promote them into the public design system.

### Color Behavior

The current category is dark, while the other categories recede into pale gray. Work is identified with a short underline. VISUAL is identified with a dark filled capsule and white text. These are three distinct selection treatments serving different levels of navigation.

No alternate color theme was visually inspected. TEXT, VISUAL, and HUMAN are presentation-mode labels; they should not be described as color-theme presets.

## Tokens — Typography

### TT Norms ExtraLight — Desktop Statement

- **Measured family:** `"TT Norms ExtraLight", sans-serif`.
- **Measured CSS weight:** `400`.
- **Measured size:** `50px`.
- **Measured line height:** `57.2501px`, approximately `1.145`.
- **Measured tracking:** `-1px`, equivalent to `-0.02em`.
- **Role:** a large, calm statement that introduces the studio before the work begins.

The family name carries the ExtraLight distinction even though the computed weight is 400. Do not reproduce this by setting the Regular family to an arbitrary weight and assuming the result will match.

### TT Norms Light — Mobile Statement

- **Measured family:** `"TT Norms Light", sans-serif`.
- **Measured CSS weight:** `400`.
- **Measured size:** `30px`.
- **Measured line height:** `34.35px`, also `1.145`.
- **Measured tracking:** `-0.9px`, equivalent to `-0.03em`.

Mobile changes the named font face as well as the size. The slightly stronger Light face maintains the delicate character at a smaller scale.

### TT Norms Regular — Navigation and Project Information

The measured interface stack begins with `TT Norms Regular`, followed by a site-specific Japanese family alias, Yu Gothic variants, and a generic sans-serif fallback. The root and body use `16px / 24px`, weight 400.

The Japanese alias appears as `A+EqpB-游ゴシック体 Pr6N M`. Supplemental Japanese project slogans also declare `YakuHanJP` before the Japanese text stack. Those slogans belong to content outside the visible portfolio state; they are not a replacement for the English introductory statement.

Font-family declarations are directly evidenced. Font-file URLs, loading rules, licensing, and the resolved face for every individual glyph are not included in the supplied evidence.

### Type Scale

| Role | Desktop | Mobile | Tracking | Evidence |
| --- | --- | --- | --- | --- |
| Introductory statement | `50 / 57.2501px` | `30 / 34.35px` | `-1px` / `-0.9px` | Measured; ExtraLight changes to Light |
| Base interface text | `16 / 24px` | `16 / 24px` | Normal | Measured on root and body |
| Primary navigation | Approximately `16px` | Replaced by menu icon | Visually normal | Screenshot estimate; individual navigation styles not exported |
| Category options | `16 / 17.6px` | `16 / 17.6px` | Normal | Measured; mobile options are not visible in the closed screenshot |
| Filters disclosure | Not visible | `16 / 16px` | Normal | Measured mobile button |
| Project title | `20 / 20px` | `14 / 14px` | Normal | Measured |
| Client caption | `12 / 18px` | `10 / 15px` | `-0.06px` / `-0.05px` | Measured; equivalent to `-0.005em` |
| Mode labels | Approximately `11px` | Approximately `11px` | Visually normal | Screenshot estimate |
| Supplemental Japanese slogan | `29.952 / 41.9328px` | `18.72 / 28.08px` | `-0.03em` | Measured DOM content; not visible in the selected mode |

Keep the hierarchy light and regular. The page does not rely on bold headings, oversized all-caps titles, or large conversion-button labels.

## Tokens — Spacing & Shapes

**Density:** generous around the introduction, tightly edited inside the image grid.
**Shape language:** square project tiles, thin graphic details, and one compact rounded mode selector.
**Root size:** measured at 16px. There is no evidence of a special miniature-rem system.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Heading side inset | `36px` | `15px` | Measured H1 positions |
| Gallery side inset | Approximately `35.84px` | `15px` | Measured first project positions |
| Horizontal gallery gap | Approximately `19.84px` | `5px` | Derived from adjacent project rectangles |
| Vertical gallery gap | Approximately `19.84px` | `24px` after the tallest card in a row | Derived from recorded positions |
| Heading to gallery | Approximately `69.81px` | Occupied by the Filters disclosure region | Derived |
| Heading to Filters button | — | `55px` | Derived from H1 bottom and button top |
| Desktop image-caption inset | `20px` left, right, and bottom | Caption placed outside image | Derived from card and caption rectangles |
| Mobile image-to-title gap | — | Approximately `10px` | Screenshot estimate, consistent with recorded caption positions |
| Project title-to-client gap | `6px` | `6px` | Derived |
| Desktop category rhythm | Approximately `26.59px` between row starts | — | Derived; roughly `17.6px` text plus `9px` separation |
| Mode-selector bottom clearance | Approximately `40px` | Approximately `40px` | Screenshot estimate |

### Border Radius

| Element | Treatment | Evidence |
| --- | --- | --- |
| Project links and image boundaries | Square, `0px` | Measured link radius and visible image geometry |
| Category controls | Unboxed, `0px` | Measured |
| Mode-selector outer shell | Approximately `20px`, or a full pill | Visual estimate |
| Selected mode | Approximately `15px`, or a full pill | Visual estimate |
| Brand mark | Custom outlined artwork | Screenshot; not a typographic S substitute |

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Statement rectangle | `x 36, y 215, w 1368, h 114.5px` | `x 15, y 136, w 360, h 103.03px` |
| Statement lines | Two | Three |
| First gallery entry | `x 35.84, y 399.31, w 905.47, h 529.91px` | `x 15, y 334.03, w 360, h 255.05px`, including caption |
| First narrow entry | `x 961.16, y 399.31, w 442.80, h 529.91px` | `x 15, y 613.08, w 177.5, h 255.05px`, including caption |
| Third project | `x 35.84, y 949.06px` | `x 197.5, y 613.08px` |
| First mobile image | — | Approximately `360 × 210px`, estimated from the screenshot |
| Narrow mobile images | — | Approximately `177.5 × 210px`, estimated from the screenshot |
| Brand mark | Approximately `24 × 46px` at `36, 25` | Approximately `24 × 46px` at `15, 15` |
| Mode-selector shell | Approximately `264 × 40px`, horizontally centered | Approximately `264 × 40px`, horizontally centered |

The desktop lead width is approximately two narrow widths plus one gutter. This supports a three-track layout with selected two-track items. The measurements do not establish which layout technology the original uses; CSS Grid is a suitable implementation choice.

## Components

### Site Header

**Role:** studio identity, main navigation, and language access.

The desktop header places the outlined S mark near the upper-left corner, a horizontal navigation group beginning around `x 396px`, and the Japanese language control near the right edge. The navigation is offset within the composition rather than centered mechanically between two equal side columns.

The visible links are Work, About, Workflow, Case Study, and Contact. Work has a short, approximately 20px underline. Link spacing is approximately 40px. The header has no visible container border, contrasting fill, or shadow.

The supplied hrefs establish the home, About, Workflow, and Contact destinations. Case Study points to an external publication. An English-language link is present at `/?lang=en`. These destinations were not activated during the supplied inspection.

On mobile, the navigation and language text disappear from the resting screenshot. The mark remains approximately the same size, while a two-line menu icon occupies the upper-right corner. Its two strokes are approximately 30px wide with about 7px separation. The opened menu was not captured.

**Implementation guidance:** use the authorized logo artwork. Give the mobile icon a larger accessible button box while retaining its thin visible strokes. Header persistence during scrolling is unverified; the screenshots alone do not establish a sticky header.

### Introductory Statement

**Role:** a brief positioning statement before the portfolio.

The exact visible copy is:

> A Studio That Engaged in All Aspects of Creative Work for Branding.

At desktop, the first line ends with “of” and the second begins with “Creative.” The line box starts at `y 215px`. Its restrained ExtraLight strokes allow a 50px headline to remain quiet rather than promotional.

At mobile, the line box begins at `y 136px` and the copy wraps into three lines:

1. A Studio That Engaged in All
2. Aspects of Creative Work for
3. Branding.

The statement has no supporting paragraph, badge, or large adjacent CTA in the captured state. Preserve the generous breathing room around it and its alignment with the project imagery.

### Desktop Category List

**Role:** provides a compact work-category selection surface.

The list starts at approximately `x 1174.77, y 140.34px`, above the top of the headline. Its labels are All, Brand, Global, Independent, Promotion, Recruit, and Media.

Each label is a native button in the supplied DOM. The recorded button width is approximately 265.23px, although the visible text occupies only a small part of that area. All is dark; the remaining options are pale gray in the screenshot. There are no chips, checkboxes, separators, or enclosing panel.

An opacity transition is declared on these buttons, but category selection and the resulting project changes were not exercised. Do not invent a filtering animation, result count, or sorting rule.

### Mobile Filters Disclosure

**Role:** compresses the category interface above the mobile gallery.

The resting state shows Filters followed by a small plus sign. The button begins at `x 15, y 294.03px`, spans 360px, and has a measured height of 40px. Its typography is `16px / 16px`, with `24px` bottom padding.

Category buttons are present in the DOM beneath it, including expanded-layout padding values. However, their rectangles overlap the project region while the screenshot shows the categories closed. This is evidence of retained layout data, not evidence of a visible open panel.

**Recommended behavior:** implement an accessible disclosure with `aria-expanded`, keep the same category order, and remove collapsed options from keyboard navigation. Its opening direction, animation, and exact expanded appearance require separate design or inspection.

### Visual Project Grid

**Role:** the primary browsing surface.

The desktop grid begins around 399px below the viewport top. The first project, The Land of NOMO Web Platforms, occupies approximately 905px of width. Diver-X occupies the remaining approximately 443px. Both are approximately 530px tall.

The next recorded row contains three narrow projects: Panasonic VISION UX, 45R Denim Karuta, and Benesse Digital Transformation. Later measurements show wide items appearing on either side of the grid. Preserve an editorial span value per project rather than making every third card wide with a universal selector.

This is a structured grid with shared image heights, not evidence of an arbitrary masonry layout. Project imagery touches the tile edges. White gutters provide separation without borders, rounded containers, or shadows.

The project order is editorial rather than strictly newest-first: the text records place NOMO, dated October 2024, before Diver-X, dated February 2025.

### Project Link and Caption

**Role:** pairs each visual with its project and client identity.

The supplied DOM establishes this anatomy:

1. A project anchor linking to an individual `/work/…/` page.
2. A visual region represented in the screenshot by project artwork or photography.
3. An H2 containing the project name.
4. A paragraph containing the client name.

**Desktop geometry:** the first card’s H2 starts 20px inside the left image edge. The caption group finishes 20px above the card bottom. The title is `20px / 20px`; the client is `12px / 18px`; their gap is 6px. Both are computed as white.

Those captions are not visibly readable in the supplied desktop resting image. Their geometry suggests an image-overlay caption arrangement, but the revealing condition is not established. A hover-and-focus reveal is a reasonable implementation recommendation, not a verified interaction.

**Mobile geometry:** captions become visible beneath the images. The first title starts at `y 554.08px`, and its client starts at `y 574.08px`. Use `14px / 14px` for titles and `10px / 15px` for clients when matching the captured proportions. Long titles wrap and increase the card height; the next row begins after the tallest item in the preceding row.

Do not crop or ellipsize all titles into one line. A recorded long recruitment title spans four lines on mobile, with a two-line client caption.

### Presentation-Mode Selector

**Role:** exposes alternative ways to view the studio’s work.

A compact white pill sits near the bottom center of both screenshots. It contains three uppercase labels: TEXT, VISUAL, and HUMAN. VISUAL is selected with a near-black inner pill and white text.

The outer shell is approximately 264px wide and 40px high. The selected segment is approximately 83px wide and 30px high. The shell has approximately 40px clearance from the viewport bottom. It overlaps the project imagery instead of reserving a full-width toolbar row.

The matching bottom offsets suggest viewport anchoring, but persistent positioning during scrolling was not demonstrated. A fixed position is a recommended way to reproduce the captured placement.

The selector’s activation, keyboard semantics, transition, and state persistence are unverified. Do not describe a sliding indicator or crossfade as an observed effect.

### Text Project Records — DOM Evidence Only

The export contains project information under Project, Date, Outputs, Role, and Overview. Records include project and client names, dates, deliverables, responsibilities, and Japanese summaries. Mobile text extraction repeats Date, Outputs, and Role alongside individual entries.

This supports the presence of a structured textual presentation. It does not establish the visible TEXT mode’s table widths, separators, typography, disclosure behavior, or responsive arrangement. Those details should remain outside a faithful visual reconstruction until inspected.

### HUMAN Content — DOM Evidence Only

The page includes introductory copy describing HUMAN MODE as a feature added in March 2025, presenting five projects through the staff’s activity behind the work. Associated project links and Japanese slogans are present in the DOM.

These records establish the content’s stated purpose. They do not establish an opening modal, video playback behavior, carousel gestures, or the appearance of the HUMAN interface. Do not insert this material as a visible hero above the captured project grid.

### Utility and Contact Content — DOM Evidence Only

The link export includes Tokyo and Amsterdam address links, social destinations, and a privacy-policy link. Their presence is confirmed, but their visible arrangement, footer styling, and mobile-menu placement were not captured. Avoid inventing a large contact section or footer composition from link order alone.

## Tokens — Motion & Interaction

### Recorded Transition Declarations

| Element | Recorded value | What it establishes |
| --- | --- | --- |
| MAIN | `opacity 0.8s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s` | An opacity transition with an 800ms duration and 300ms delay is declared. Its trigger was not exercised. |
| Category buttons | `opacity 0.6s cubic-bezier(0.26, 0.06, 0, 1)` | A 600ms opacity transition is declared for the controls. It does not establish how project results move. |
| Supplemental desktop project anchors | `transform 0.1s` | A 100ms transform transition is declared on anchors outside the visible portfolio state. It should not be generalized to every project tile. |

Many other sampled elements report `transition: all` and `animation: none`. These entries do not establish a particular animated effect, and they do not rule out JavaScript animation or motion in unsampled descendants.

### Interaction Evidence and Limits

| Surface | Confirmed | Unverified |
| --- | --- | --- |
| Project cards | Real anchors and project destinations | Hover reveal, cursor treatment, destination-page behavior |
| Category list | Native buttons, All visually selected | Filtering result, layout transition, URL persistence |
| Mobile Filters | Closed label and plus sign | Expanded appearance and transition |
| Mode selector | Three labels, VISUAL selected | Mode transition, indicator motion, persistence |
| Mobile menu | Two-line icon | Open navigation state, focus management, animation |
| Language access | Japanese label and language hrefs | Dropdown behavior and post-navigation rendering |

The supplied capture process waited for readiness and temporarily paused perpetual animations during checks. That procedure does not prove that any specific perpetual effect exists on this page. Repeated identical screenshots are not a motion recording.

Project descriptions mentioning WebGL, parallax, audio, or animation refer to client work. They are not evidence that the homepage uses those effects.

**Recommended motion direction:** keep feedback restrained. Opacity changes suit the measured interface language. A short caption reveal can be added for hover and keyboard focus, but avoid presenting an invented image zoom, spring, or scroll effect as original behavior.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Page canvas | Visually white | Creates broad breathing room around identity and statement |
| Header | Same white field, no visible box | Maintains identity without competing with projects |
| Category controls | Transparent, plain text | Keeps filtering visually secondary |
| Project visual | Full-color image, square boundary | Carries most of the page’s visual expression |
| Mobile caption | White page background | Makes project identity directly readable |
| Desktop caption layer | White text positioned inside image bounds | Overlay geometry is measured; resting visibility is limited |
| Mode selector | White rounded shell | Separates a compact control from busy artwork |
| Selected mode | Near-black rounded segment | Marks the active presentation |

There is no visible general-purpose elevation system. The imagery contains its own lighting, gradients, and device shadows; those belong to the project assets rather than to interface card styling.

## Imagery

The page functions as a gallery for varied creative outputs. Its consistency comes from framing and scale rather than applying one visual filter to all projects.

The lead NOMO image is a collage of desktop and mobile web screens with cyan, blue, violet, and pink forms on a pale field. Its many small interface elements create density inside the large landscape tile. Rounded windows visible within the collage belong to the artwork; the gallery tile itself remains square.

Diver-X provides strong contrast: a dark laptop photographed against a textured blue-gray setting, with a bright blue object on its screen. Its narrow, tall crop gives the device a different emphasis from the wide NOMO montage.

Panasonic VISION UX appears as a pale montage with small illustrated scenes and interface panels. On mobile it shares the second row with Diver-X, contrasting light and dark images at the same display height.

### Image Handling

- Preserve each project’s own color palette and visual identity.
- Keep equal media heights within the current grid rhythm, even when card widths differ.
- Use carefully chosen crops for narrow cards. The available evidence establishes the displayed crop, not whether the original uses `object-fit`, background images, or separate source assets.
- Preserve legibility of the principal subject without trying to make every word embedded in a website montage readable.
- Use normal smooth image rendering for photographs and interface montages.
- Use actual authorized project artwork where available. Generic gradient rectangles will not reproduce the portfolio’s character.

### Observed Asset References

The supplied evidence contains project-page hrefs, but no dependable image-file URLs, source dimensions, `srcset` values, or logo asset path. Do not invent asset filenames.

| Visible project | Project link present on the homepage | Evidence role |
| --- | --- | --- |
| The Land of NOMO Web Platforms | [Project destination](https://shiftbrain.com/work/the-land-of-nomo/) | Identifies the first wide montage and its project record |
| Diver-X Corporate Site | [Project destination](https://shiftbrain.com/work/diver-x/) | Identifies the dark laptop visual |
| Panasonic VISION UX | [Project destination](https://shiftbrain.com/work/vision-ux/) | Identifies the pale montage shown in the mobile second row |

These destination pages were not separately inspected and are not additional visual sources for this document.

## Layout & Responsive Behavior

### Desktop Composition

At 1440px wide, the heading and gallery use approximately 36px side margins. The upper region is deliberately spacious: the logo begins near the top, the statement’s line box starts at 215px, and the project grid starts at approximately 399px.

The category list occupies the upper-right region, starting above the headline. The heading’s actual text leaves enough white space for this arrangement in the captured English copy. Longer translated or replacement text would need a reserved category column or another collision-prevention rule.

The grid has three approximately 443px tracks separated by approximately 20px gutters. A wide card is approximately 905px wide. Both wide and narrow images are approximately 530px tall, producing landscape and portrait-like shapes in one row.

### Mobile Composition

At 390px wide, the content width is exactly 360px with 15px side margins. The headline becomes three lines and uses the Light face at 30px.

Filters occupies its own row beneath the statement. The gallery begins at approximately 334px. Its first image spans both tracks, followed by two approximately 177.5px images separated by 5px.

Mobile changes more than column count:

- Navigation text becomes a menu icon.
- The category list becomes a closed Filters disclosure.
- The display face changes from ExtraLight to Light.
- Project captions move below the images and remain visibly readable.
- Horizontal gutters contract to 5px, while row separation becomes 24px.
- Long project names increase card height rather than being uniformly truncated.

The first mobile card is approximately 255px tall including its caption. It ends at approximately 589px, followed by 24px before the next row begins at approximately 613px.

### Breakpoints and Scrolling

Only 1440px and 390px viewport widths are supplied. The original breakpoint and intermediate tablet behavior are unknown. The Quick Start uses a recommended 900px breakpoint; it is not a recovered source value.

The export reports document heights equal to the viewport heights, while MAIN measures approximately 21,819.5px on desktop and 16,912.03px on mobile. This discrepancy means body height should not be treated as the full archive length. An internal or transformed scrolling arrangement is possible, but its mechanism is not established.

For a new implementation, ordinary document scrolling is a practical default. Preserve access to all projects, and add enough bottom clearance that a floating mode control cannot permanently obstruct the final interactive content.

## Do’s and Don’ts

### Do

- Keep the interface white and near-black, allowing projects to supply the color.
- Preserve the light statement and its measured `1.145` line-height ratio.
- Use the distinct ExtraLight desktop and Light mobile faces when the fonts are available.
- Align the introduction and project grid to consistent side margins.
- Use three desktop tracks and two mobile tracks with selected wide projects.
- Preserve common media heights and varied card widths.
- Keep project images square-cornered and free of interface shadows.
- Show mobile titles and clients below their images.
- Allow long captions to wrap and determine row height.
- Keep the mode selector compact and centered near the bottom.
- Maintain project titles and client names as real text associated with the links.
- Separate measured declarations from proposed hover, menu, and mode behavior.

### Don’t

- Don’t turn this portfolio into a sequence of generic feature sections and large conversion CTAs.
- Don’t make every project the same width or force all mobile projects into one column.
- Don’t describe the measured grid as masonry without further evidence.
- Don’t adopt the colors of the lead artwork as global button colors.
- Don’t copy the rounded panels inside the montage into the gallery’s card shape.
- Don’t replace the outlined brand mark with a plain typed S.
- Don’t assume the desktop captions are permanently visible because their rectangles exist.
- Don’t treat retained mobile category rectangles as an observed open menu.
- Don’t infer homepage animation from descriptions of client projects.
- Don’t invent image paths, font-file paths, or production credits.

## Recommended Implementation Additions

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

- Use semantic project links and a visible focus outline. If captions reveal on hover, reveal them on keyboard focus too.
- Give the menu icon an accessible name and expose menu state with `aria-expanded`.
- Implement Filters as a disclosure with a controlled panel. Ensure collapsed content cannot receive focus.
- Give category and mode controls explicit selected states. Native buttons with `aria-pressed` are suitable when the interface is not implemented as a complete tabs pattern.
- Increase the contrast of secondary metadata and inactive category text when readability is the priority. The pale captured treatment should not be assumed to meet normal-text contrast requirements.
- Consider increasing mobile client text from the measured 10px to at least 12px and title line height from 1 to approximately 1.2 for a more readable adaptation.
- Provide comfortable touch targets even when the visible control is small. The approximately 30px-high mode segments can be enlarged in an accessibility-focused version.
- Respect reduced-motion preferences and keep content available without entry animations.
- Supply meaningful project-image alternatives without repeating an adjacent caption word for word unnecessarily.
- Reserve image dimensions and use responsive image sources once the actual media assets are available.
- Keep inactive presentation modes out of the accessibility tree and keyboard order.
- Account for safe-area insets around the floating selector and test its overlap at short viewport heights.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and mode-selector shell: white, reproduced as `#ffffff`.
- Main text and active controls: measured `#121212`.
- Inactive categories: pale gray appearance, approximately `#b8b8b8`; compositing mechanism unverified.
- Mobile client captions: visually muted gray, approximately `#929292`.
- Image-overlay caption text: measured white.
- Project colors: retain the supplied artwork’s palette; do not turn it into interface theming.

### Overall Prompt

“Create a contemporary creative-studio portfolio inspired by the inspected SHIFTBRAIN homepage. Use a white canvas, near-black text, an outlined vertical brand mark, small plain navigation, and a spacious introductory statement. Set the statement in TT Norms ExtraLight at 50px on desktop and TT Norms Light at 30px on mobile when licensed fonts are available. Build a three-track desktop project grid with selected two-track images, approximately 20px gutters, and shared image heights. On mobile, use 15px side margins, two tracks with 5px horizontal gutters, full-width featured projects, and visible title/client captions beneath every image. Add a compact white TEXT / VISUAL / HUMAN selector centered near the viewport bottom, with VISUAL in a dark pill. Keep the shell monochrome and square-edged; let authentic project imagery create the visual richness. Treat uninspected menu, filtering, and mode behavior as new implementation work.”

### Example Component Prompts

1. **Header:** “Place a narrow outlined studio mark at the upper left of a white page. Use a small, widely spaced desktop navigation group with a short underline beneath Work and a language label at the far right. At phone width, retain the mark and replace the navigation with two fine horizontal menu strokes.”
2. **Statement and filters:** “Create a very light, two-line English statement aligned to the gallery’s left edge. Place a plain vertical category list in the upper-right white space. On mobile, use three statement lines and a separate Filters + disclosure beneath them.”
3. **Project grid:** “Use three equal desktop tracks with selected projects spanning two. Keep images at a common row height, square corners, and about 20px gutters. Lead with a wide pastel website montage beside a narrow dark device photograph. Convert to two mobile tracks and preserve the editorial project order.”
4. **Mobile caption:** “Place a 14px regular project title approximately 10px below the image, followed by a small muted client name with a 6px gap. Allow long names to wrap and let the row height follow its tallest caption.”
5. **Mode selector:** “Create an approximately 264 × 40px white pill with three compact uppercase labels. Fill the central VISUAL segment near-black and use white selected text. Center the control approximately 40px above the viewport bottom without adding a full-width toolbar.”
6. **Accessible desktop caption adaptation:** “For pointer devices, add a restrained project-caption reveal on both hover and keyboard focus. Position white title and client text 20px from the lower image edges and provide sufficient contrast. Treat the reveal timing and contrast layer as new choices, not recovered source behavior.”

## Quick Start

### CSS Custom Properties

This is a practical approximation of the captured VISUAL layout, not extracted source CSS. It uses the measured type sizes and near-black text color. The fluid dimensions, 900px breakpoint, fixed selector positioning, focus treatment, and caption reveal are recommended adaptations.

Load authorized font files separately under the evidenced family names if available. No font or image URLs are assumed here. Generic fallbacks will change the exact line wrapping.

Expected structure: a `.site-header` containing the brand, navigation, language control, and mobile menu button; a `.portfolio` containing `.intro` and `.work-grid`; project anchors containing `.work-media` and `.work-caption`; and a separate `.mode-switch`. Assign `.work-card--wide` from editorial project data.

```css
:root {
  /* Measured ink; white reproduces the visible canvas. */
  --color-canvas: #ffffff;
  --color-ink: #121212;
  --color-on-image: #ffffff;

  /* Visual approximations, not measured source declarations. */
  --color-meta-estimate: #929292;
  --filter-idle-opacity: 0.3;

  /* Family names are evidenced; provide licensed files separately. */
  --font-ui: 'TT Norms Regular', 'Yu Gothic', YuGothic, sans-serif;
  --font-statement: 'TT Norms Light', sans-serif;
  --statement-size: 30px;
  --statement-leading: 1.145;
  --statement-tracking: -0.03em;
  --project-size: 14px;
  --client-size: 10px;
  --client-leading: 1.5;

  /* Mobile measurements and proportional media approximation. */
  --page-inset: 15px;
  --grid-gap: 5px;
  --grid-row-gap: 24px;
  --intro-top: 136px;
  --media-height: calc((100vw - 30px) * 0.58346);
  --caption-gap: 6px;
  --radius-pill: 999px;

  /* Recorded transitions. Triggers remain implementation-specific. */
  --motion-filter: 600ms cubic-bezier(0.26, 0.06, 0, 1);
  --motion-main: 800ms cubic-bezier(0.18, 0.06, 0.23, 1) 300ms;

  /* Recommended caption transition; not a source measurement. */
  --motion-caption: 180ms ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

button {
  font: inherit;
  color: inherit;
}

.site-header {
  position: absolute;
  top: 15px;
  right: var(--page-inset);
  left: var(--page-inset);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
}

.brand-mark {
  display: block;
  width: 24px;
  height: 46px;
}

.brand-mark img,
.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav,
.language-switch {
  display: none;
}

.menu-button {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button::before,
.menu-button::after {
  position: absolute;
  left: 7px;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: '';
}

.menu-button::before {
  top: 18px;
}

.menu-button::after {
  top: 25px;
}

.portfolio {
  margin-inline: var(--page-inset);
  padding-top: var(--intro-top);
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

.intro {
  position: relative;
}

.statement {
  margin: 0;
  font-family: var(--font-statement);
  font-size: var(--statement-size);
  font-weight: 400;
  line-height: var(--statement-leading);
  letter-spacing: var(--statement-tracking);
}

.desktop-break {
  display: none;
}

.filter-toggle {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 55px;
  padding: 0 0 24px;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 16px;
  text-align: left;
  cursor: pointer;
}

.category-list {
  display: none;
  flex-direction: column;
  align-items: stretch;
}

/* Application code must also update aria-expanded. */
.intro[data-filters-open='true'] .category-list {
  display: flex;
}

.filter-button {
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.1;
  text-align: left;
  opacity: var(--filter-idle-opacity);
  transition: opacity var(--motion-filter);
  cursor: pointer;
}

.filter-button:first-child {
  padding-top: 20px;
}

.filter-button:last-child {
  padding-bottom: 24px;
}

.filter-button[aria-pressed='true'],
.filter-button:hover,
.filter-button:focus-visible {
  opacity: 1;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-row-gap);
  align-items: start;
}

.work-card {
  position: relative;
  display: block;
  min-width: 0;
  color: inherit;
  border-radius: 0;
  text-decoration: none;
}

.work-card--wide {
  grid-column: span 2;
}

.work-media {
  display: block;
  width: 100%;
  height: var(--media-height);
  border-radius: 0;
  object-fit: cover;
  object-position: var(--image-position, 50% 50%);
}

.work-caption {
  padding-top: 10px;
}

.work-title {
  margin: 0;
  font-size: var(--project-size);
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}

.work-client {
  margin: var(--caption-gap) 0 0;
  color: var(--color-meta-estimate);
  font-size: var(--client-size);
  line-height: var(--client-leading);
  letter-spacing: -0.005em;
}

/* Fixed positioning reproduces the observed bottom placement. */
.mode-switch {
  position: fixed;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 264px;
  max-width: calc(100vw - 30px);
  height: 40px;
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  transform: translateX(-50%);
}

.mode-switch button {
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.mode-switch button[aria-pressed='true'] {
  color: var(--color-on-image);
  background: var(--color-ink);
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (min-width: 900px) {
  :root {
    --font-statement: 'TT Norms ExtraLight', sans-serif;
    --statement-size: 50px;
    --statement-tracking: -0.02em;
    --project-size: 20px;
    --client-size: 12px;
    --page-inset: 2.5vw;
    --grid-gap: 1.38889vw;
    --grid-row-gap: var(--grid-gap);
    --intro-top: 215px;
    --media-height: calc((100vw - 2 * var(--page-inset)) * 0.3874);
  }

  .site-header {
    top: 25px;
  }

  .site-nav {
    position: absolute;
    left: calc(27.5vw - var(--page-inset));
    display: flex;
    gap: 40px;
    align-items: center;
  }

  .site-nav a,
  .language-switch {
    color: inherit;
    font-size: 16px;
    text-decoration: none;
  }

  .site-nav a {
    position: relative;
  }

  .site-nav [aria-current='page']::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 20px;
    height: 1px;
    background: currentColor;
    content: '';
  }

  .language-switch {
    display: block;
    margin-left: auto;
  }

  .menu-button,
  .filter-toggle {
    display: none;
  }

  .intro {
    margin-bottom: 70px;
  }

  .statement {
    max-width: calc(100% - 270px);
  }

  .desktop-break {
    display: inline;
  }

  .category-list {
    position: absolute;
    top: -75px;
    right: 0;
    display: flex;
    gap: 9px;
    width: 16.75%;
  }

  .category-list .filter-button {
    padding: 0;
  }

  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Recommended reveal, limited to devices with precise hover input. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .work-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgb(0 0 0 / 0.65), transparent 55%);
    opacity: 0;
    transition: opacity var(--motion-caption);
    pointer-events: none;
    content: '';
  }

  .work-caption {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    padding: 0;
    color: var(--color-on-image);
    opacity: 0;
    transition: opacity var(--motion-caption);
    pointer-events: none;
  }

  .work-client {
    color: inherit;
  }

  .work-card:is(:hover, :focus-visible)::after,
  .work-card:is(:hover, :focus-visible) .work-caption {
    opacity: 1;
  }
}

/* Recommended accessible focus and reduced-motion behavior. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

.mode-switch button:focus-visible {
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .filter-button,
  .work-caption,
  .work-card::after {
    transition: none;
  }
}
```

The scrim and 180ms caption reveal above are recommended contrast and accessibility additions. They are not observed original effects. Wider touch devices retain captions below the images in this adaptation.

This stylesheet establishes appearance. Filtering, menu disclosure, language navigation, and switching presentation modes require separate behavior. Do not expose functional-looking mode buttons without implementing their associated content and state changes.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first; keep the responsive rules for track count and caption placement.

```css
@theme inline {
  --color-studio-canvas: var(--color-canvas);
  --color-studio-ink: var(--color-ink);
  --color-studio-meta: var(--color-meta-estimate);

  --font-interface: var(--font-ui);
  --font-display: var(--font-statement);

  --text-statement: var(--statement-size);
  --text-project: var(--project-size);
  --text-client: var(--client-size);
  --text-mode: 11px;

  --spacing-page: var(--page-inset);
  --spacing-gallery: var(--grid-gap);
  --spacing-gallery-row: var(--grid-row-gap);

  --radius-mode: 999px;
}
```

## Sources & Evidence

- [SHIFTBRAIN homepage](https://shiftbrain.com/): original and final URL, supplied HTTP status 200, page title, rendered text, link destinations, computed-style samples, and element rectangles.
- **Capture record:** October 5, 2026, 15:39:53.054 UTC / October 6, 2026, 00:39:53.054 JST.
- **Desktop evidence:** three supplied 1440 × 1000 captures of the same opening VISUAL composition, accompanied by DOM and computed-style observations at that viewport.
- **Mobile evidence:** two supplied 390 × 844 captures of the same opening VISUAL composition, accompanied by DOM and computed-style observations at that viewport.
- **Direct visual coverage:** brand mark, desktop navigation, mobile menu icon, introductory statement, desktop categories, closed mobile Filters control, opening project imagery, mobile captions, and the selected VISUAL mode control.
- **DOM-only coverage:** additional project geometry and text records, supplemental project slogans, HUMAN introduction, language destinations, and utility links. Their presence does not establish visible appearance in inactive modes.
- **Inspection limitations:** no demonstrated menu opening, category change, mode change, hover sequence, keyboard sequence, language change, or distinct lower-page visual state. No dependable image source paths, font-file URLs, original breakpoint rules, or complete scrolling mechanism were provided.

The page title and home-link text identify SHIFTBRAIN Inc. The evidence does not establish separate production credits for this homepage. All reusable CSS aliases, accessibility additions, and unverified interaction choices are adaptations rather than claims about the original implementation.