グッドパッチ デザインパートナーシップ

# Goodpatch Design Partnership — Style Reference

> A spacious business-design showcase, organized by blue actions, staggered project photography, and a sweeping curved opening.

**Website:** [Goodpatch Design Partnership](https://design-partnership.goodpatch.com/)
**Original URL:** https://design-partnership.goodpatch.com/
**Final URL:** https://design-partnership.goodpatch.com/
**Inspected:** October 2, 2026, at 00:31 JST; supplied retrieval timestamp: `2026-10-01T15:31:05.030Z`.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Theme:** predominantly white content, blue actions, and a charcoal footer. No selectable theme was demonstrated.
**Scope:** the current service website homepage: opening composition, persistent navigation, testimonials, credibility statements, business phases, solution directory, specialty links, event entries, closing contact panels, and footer. This is a homepage for a broader business service website with multiple detail pages.

Goodpatch Design Partnership combines a restrained Japanese information hierarchy with large photographic examples of its work. White space separates substantial editorial blocks. Dark gray headings, moderately tracked Japanese text, fine outlined pills, and a consistent blue action color hold the long page together. The solution directory is especially distinctive: wide images alternate between two vertically offset columns, while narrower descriptions sit below them on white surfaces.

The opening uses a large white English headline, a small Japanese supporting line, short horizontal graphic marks, and a curved lower boundary. Its background media could not be evaluated: both current opening captures show a black field and a connection-verification error overlapping the headline. The surrounding site and lower-page content are available. Treat this as a limitation of the captured hero region, not as an intentional error-themed design or evidence that the whole website is unavailable.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM, computed styles, or element rectangles. Measurements describe the two captured viewport states, not every possible screen size.
- **Derived** values are arithmetic relationships between measured rectangles, such as column gaps or spacing between text blocks.
- **Estimated** values come from visual inspection of the current screenshots. They are explicitly labeled and are not pixel samples.
- **Recommended** values and behaviors are adaptations for a new implementation. They do not establish how the original site was built.
- Token names beginning with `--gp-` are implementation aliases created for this reference. Source variable names are identified separately.
- A declared font or gradient is not proof that it is visibly used. A transition declaration is not proof that a particular hover or reveal interaction was exercised.
- Desktop screenshots cover the opening, a solution-directory position, and the bottom of the page. Mobile screenshots cover the opening and bottom. Additional mobile layout observations come from DOM rectangles.

## Tokens — Colors

### Core Palette

| Name | Value | Evidence | Role |
| --- | --- | --- | --- |
| Partnership Blue | `#096fca` | Measured; source `--s-color-4e8a6818: #096fcaff` | Filled contact action, blue detail text, and the underlying hero section background |
| White | `#ffffff` | Measured body background and inverse text | Main page, white content panels, reversed navigation and hero copy |
| Heading Gray | `#3a3e40` | Measured `rgb(58, 62, 64)` | Japanese headings, testimonial copy, names, and detail labels |
| Description Gray | `#5f5f5f` | Measured `rgb(95, 95, 95)` | Solution descriptions |
| Muted Gray | `#96a0a6` | Measured `rgb(150, 160, 166)` | Hashtags and small approach labels |
| Light Gray | `#e9e9e9` | Declared source `--s-color-54ad500c` | Useful border alias; its exact assignment to every visible outline was not supplied |
| Footer Charcoal | approximately `#292d2e` | Screenshot estimate | Large footer surface |
| Graphic Yellow | approximately `#f0db43` | Screenshot estimate | Oversized curved decoration behind the desktop solution directory |
| Small Coral Accent | approximately `#f77d86` | Screenshot estimate | Tiny dot beside the mobile Contact heading |

The hierarchy is mostly white and gray, with blue reserved for navigation toward an action. Yellow appears as a large background shape rather than a category badge or a competing button color. The small coral point is decorative and does not establish a second action system.

**Hero color distinction:** the section computes to blue, but the captured foreground media region is black. Do not replace the site's semantic blue token with black based on this failed media state. A blue static fallback in a new implementation is a recommendation, not a verified healthy hero appearance.

### Declared but Unassigned Colors

The supplied custom properties also contain a teal-to-mint gradient, a translucent gray-to-white gradient, and a pale blue diagonal gradient. Their use is not established by the available component samples. Do not spread them across cards or buttons simply because they exist in the stylesheet.

## Tokens — Typography

### Japanese Interface and Editorial Text

**Verified family:** `Noto Sans JP`, also declared through source variable `--s-font-ccbf4d03`.

Regular paragraphs use weight `400`; the hero supporting line and metric suffixes use `500`; navigation, headings, names, and action labels generally use `700`. Tracking of `0.08em` recurs across much of the interface. Long explanatory text often uses a generous `2` line-height, while solution summaries use `1.6`.

The document root reports Times, and several layout wrappers report generic sans-serif. Those inherited wrapper values do not describe the actual Japanese text elements, which explicitly compute to Noto Sans JP.

### English Headline and Graphic Headings

The visible opening reads “Design to Empower Businesses.” The H1 has no extracted text and measures `696 × 121.27px` on desktop and `340 × 136px` on mobile. The screenshot shows two lines on desktop and three on mobile.

The heading is therefore best treated as graphic content within a measured heading box. Its wrapper's `32px` font size does not establish the lettering's rendered size or font. The asset format and exact font are unverified. Several other H2 elements also have empty extracted text and measured graphic-sized boxes.

Poppins, Montserrat, Inter, and other families appear among declared variables, but no supplied text-element measurement assigns them to the English headline. Preserve approved heading artwork when available; label any replacement display font as an adaptation.

### Type Scale

All values below are measured unless marked otherwise. Desktop and mobile refer to the captured widths, not inferred breakpoints.

| Role | Desktop size / line-height | Mobile size / line-height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Primary navigation | `13 / 13px` | Hidden in the closed header | 700 | `0.08em` |
| Header action labels | `12 / 12px` | Header actions not shown | 700 | `0.08em` |
| Hero supporting line | `14 / 19.6px` | `12 / 16.8px` | 500 | `0.24em` |
| Major Japanese statement | `38 / 60.8px` | `24 / 38.4px` | 700 | `0.08em` |
| Business-phase detail heading | `38 / 49.4px` | `24 / 27.84px` | 700 | Normal |
| Testimonial headline | `26 / 36.4px` | `20 / 28px` | 700 | `0.08em` |
| Solution title | `25 / 35px` | `20 / 28px` | 700 | `0.08em` |
| Specialty title | Not supplied | `17 / 22.1px` | 700 | `0.08em` |
| Credibility paragraph | `15 / 30px` | `14 / 28px` | 400 | `0.08em` |
| Testimonial paragraph | `14 / 28px` | `12 / 24px` | 400 | `0.08em` |
| Business-phase paragraph | `15 / 30px` | `12 / 24px` | 400 | Normal |
| Solution summary | `14 / 22.4px` | `12 / 19.2px` | 400 | `0.08em` |
| Solution hashtags | `12 / 19.2px` | `11 / 17.6px` | 400 | `0.08em` |
| Detail-action label | `12 / 12px` | `12 / 12px` | 700 | `0.05em` |
| Testimonial organization / role | `11 / 15.4px` | `11 / 15.4px` | 400 | `0.08em` |
| Testimonial person name | `14 / 19.6px` | `14 / 19.6px` | 700 | `0.08em` |
| Metric heading | `13 / 13px` | `9 / 9px` | 700 | `0.08em` |
| Approach-list item | `12 / 12px` | `10 / 10px` | 400 | Normal desktop; `-0.04em` mobile |

Small text is part of the observed density, especially in the mobile specialty grid and approach lists. For an accessible adaptation, increase essential small copy rather than copying every 9–12px setting unchanged.

## Tokens — Spacing & Shapes

### Spacing Scale

There is no supplied evidence of a single source spacing unit. The page uses several practical scales, from 8px action gaps to 200px section openings.

| Relationship | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header left / right inset | `40 / 30px` | `20 / 20px` | Measured padding |
| Navigation-link separation | `30px` | Not applicable | Derived from adjacent rectangles |
| Gap between header action pills | `8px` | Not applicable | Derived |
| Main editorial inset | Commonly `120px` at 1440px | `25px` | Measured element positions |
| Solution-directory outside margins | `90px` | `25px` | Measured |
| Solution-column gap | `80px` | Single column | Derived |
| Hero heading to supporting line | `24px` | `24px` | Derived |
| Testimonial-section top padding | `100px` | `64px` | Measured |
| Phase-details section top padding | `200px` | `64px` | Measured |
| Solution-section top / bottom padding | `200 / 120px` | `120 / 0px` | Measured |
| Solution title to summary | `40px` | `18px` | Derived |
| Solution summary to hashtags | `24px` | `18px` | Derived |
| Consecutive mobile solution cards | Not a uniform row system | `64px` | Derived |
| Mobile specialty-column gap | Not supplied | `24px` | Derived |
| Mobile specialty-row gap, first measured rows | Not supplied | `56px` | Derived |

### Border Radius and Edges

| Element | Value | Status |
| --- | --- | --- |
| Header pills and large section links | `48px` | Measured source radius; visually a capsule |
| Organization solution anchor | `10px` desktop / `5px` mobile | Measured; do not generalize this wrapper value to every nested image |
| Desktop solution-image corners | Approximately `10–12px` | Screenshot estimate |
| Overlapping white solution panel | Rounded upper-right corner, approximately `12px` | Screenshot estimate |
| Mobile menu control | Circle inside a `50 × 50px` button | Measured box; circular blue appearance verified visually |
| Back-to-top control | Approximately `64px` desktop / `48px` mobile | Screenshot estimate |
| Footer separator | Fine dashed or dotted line | Screenshot observation; exact border rule unavailable |

There is no recurring shadow system visible in the supplied screenshots. Large spacing, image boundaries, contrast changes, and thin outlines establish the hierarchy.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Header | `1440 × 86px` | `390 × 86px` |
| Header logo link | `100 × 39.33px`, at `x40, y23.33` | Same size, at `x20, y23.33` |
| Opening section | `1440 × 1000px` | `390 × 844px` |
| Hero heading box | `x140, y417.56`, `696 × 121.27px` | `x25, y333.59`, `340 × 136px` |
| Supporting-line right edge | `x836` | `x365` |
| Common major-heading width | `1200px` | `340px` |
| Credibility paragraph width | `700px` | `340px` |
| Solution anchor width | `590px` | `340px` |
| Solution-description width | `450px` | `340px` |
| Large section-link box | `220 × 65px` | `220 × 65px` |
| First solution-anchor height | `669.36px` | `462.34px` |
| Document height | Approximately `12,624.95px` | Approximately `13,915.25px` |

## Components

### Persistent Header

**Role:** identity, access to the service directory, and two business actions.

The desktop header places the compact logo at the far left and a single navigation row toward the right. The five top-level labels are followed by an outlined “資料ダウンロード” action and a filled “お問い合わせ” action. The latter links to `https://goodpatch.com/contact`; the download action points to the service website's `/downloads` route.

The measured download pill is `159.69 × 44px`, with `14px 26px` padding. The contact pill is `157.77 × 44px`, with `14px 38px` padding. Both have a `48px` radius. Their similar outer widths make the pair feel balanced despite different label lengths.

At the opening, the logo and navigation are white on a transparent header. At the supplied scrolled positions, the header has a white background, dark logo and navigation, and a blue outline on the download action. It remains at the top in those captures. This establishes persistent-header behavior, but not the exact positioning mechanism or changeover threshold.

Nested solution and specialty links exist in the desktop DOM, with zero-height rectangles in the captured closed state. Their presence supports a deeper navigation hierarchy; it does not establish hover activation, panel dimensions, or an opening animation.

### Mobile Header and Menu Trigger

At 390px, the full navigation and header action pair disappear. The logo keeps its desktop dimensions, while the side padding becomes 20px. A `50 × 50px` button sits at `x320, y18` and appears as a blue circle with two thin white horizontal strokes.

The menu was not opened. Do not invent a full-screen overlay, drawer direction, submenu treatment, or close animation. A new implementation should provide those behaviors explicitly and keep the trigger's expanded state accessible.

### Opening Composition

**Anatomy:** viewport-height media region, overlaid header, graphic English headline, Japanese supporting line, short horizontal accents, centered Scroll cue, and curved lower boundary.

The heading and supporting line form a vertically centered group. On desktop, the group begins 140px from the left; the supporting line is aligned to the heading box's right edge. On mobile, the group uses the 25px content inset and a 340px-wide heading box. The Japanese line remains right aligned rather than becoming a centered subtitle.

The lower edge is a broad downward bow. In the screenshots, the dark region ends near `y851` at the desktop edges and near `y804` at the mobile edges, reaching the bottom near the center. These are visual estimates, not recovered curve parameters. A small Scroll label and a thin vertical line sit near the bottom center.

The visible connection-verification message crosses the headline and is horizontally clipped on mobile. Exclude that message from reusable components. The intended moving imagery, playback behavior, media provider, and healthy fallback were not verified.

### Testimonial Rail

**Anatomy:** graphic section heading, prominent quotation headline, explanatory paragraph, organization/role, and person name.

The desktop text blocks are 540px wide, starting at `x120`, `x740`, `x1360`, and `x1980`. This gives a measured 620px pitch and a derived 80px gap. The offscreen positions establish a horizontal sequence rather than four ordinary stacked blocks.

On mobile, the first three blocks measure approximately 286.39px wide, with a 326.39px pitch and a derived 40px gap. The next block starts at `x351.39`, leaving a partial continuation within the viewport. The fourth measured block is wider, so 286.39px should not be treated as an invariant for every item.

Headline size reduces from 26px to 20px, and body copy from 14px to 12px. Organization text stays 11px and person names stay 14px. The author text begins 104px to the right of the quotation edge on desktop and 70px on mobile; the associated visual asset was not characterized in the screenshots.

Horizontal arrangement is established. Dragging, swipe behavior, arrow controls, snapping, and autoplay were not exercised.

### Credibility Statement and Metrics

A large Japanese statement about more than 2,000 design projects introduces a narrower explanatory paragraph and a link to “強み・フィロソフィー”. The statement uses the 38px desktop heading scale; the paragraph is 700px wide with 30px line-height.

Three button elements follow, labeled for designer/engineer count, design knowledge, and awards. Each contains a category heading, a count region with a suffix, and a blue “詳しくみる” label. The numeric values themselves are absent from the supplied text extraction. Do not invent values or assume that the absence proves a loading failure.

On desktop, all three buttons share a top position near `y2625.38`. On mobile, they are centered and stacked at approximately `y2243.94`, `y2428.94`, and `y2613.94`: a 185px pitch. Their measured heights reduce from 155px to 104px. No result of activating these buttons was supplied.

### Business-Phase Overview and Detail Blocks

The page organizes its offer into three phases: “事業創出フェーズ”, “成長フェーズ”, and “変革フェーズ”.

The overview labels sit horizontally at a shared desktop vertical position. On mobile, they become a vertical sequence, with roughly 138px between successive label starts. Desktop phase labels compute to white at `18 / 23.4px`; mobile labels compute to dark gray at `16 / 20.8px`. Their surrounding diagram shapes are not sufficiently documented to reconstruct.

The longer detail blocks use a desktop text column beginning at `x680`, with a 670px paragraph width. On mobile, this moves to `x25` and 340px width. Each block contains a phase heading, paragraph, muted “主なアプローチ” label, and a compact list of approaches.

The approach list has three text columns on desktop and two on mobile. Measured row pitches are 32px and 26px respectively. Keep this list visually quieter than the phase heading; it should read as supporting capabilities, not a grid of colorful action chips.

### Staggered Solution Directory

**Role:** connects business needs to detailed services and examples.

Six solution entries appear in the main directory. A separate navigation route also provides other solutions. The directory introduction occupies the upper-left area, while the first image-led entry starts on the right.

At desktop width, cards occupy two 590px columns at `x90` and `x760`, separated by 80px. The first right-hand card starts at `y5778.89`; the next left-hand card starts at `y6098.25`, approximately 319px lower. A later pair has an approximately 342px offset. This is a staggered sequence, not a strict equal-height card grid.

Each entry is one enclosing anchor with this anatomy:

1. A wide project photograph, sometimes carrying a small client mark.
2. A white information surface that visually overlaps the lower-left part of the image on desktop.
3. A bold Japanese service title.
4. A narrower gray summary.
5. A muted line of plain-text hashtags.
6. An outlined “詳しくはこちら” pill with a blue right arrow.

The desktop screenshot shows an image footprint of approximately `590 × 330px`. The white panel covers roughly the lower 40px of the image on the left, leaving a narrow image extension visible on the right. Its upper-right corner is rounded. These image and overlap dimensions are visual estimates; the card width and text positions are measured.

Titles use `25 / 35px`; descriptions use `14 / 22.4px` and are limited to 450px even though the image is 590px wide. The resulting empty space on the right is intentional. Hashtags are small gray text, with no filled badge backgrounds.

At 390px, all six cards occupy a single 340px column in content order. The first card begins 60px after the introductory section link ends. Consecutive cards have 64px gaps. Titles become `20 / 28px`; summaries become `12 / 19.2px`; descriptions now use the full card width. The title starts 206px below the card top, compared with 340px on desktop. The exact mobile image mask and overlap were not visually captured.

Because the enclosing entry is already an anchor, implement the internal pill as a styled span, not as a nested link or button.

### Specialty Directory

Seven specialties are represented by linked entries containing a title, explanatory copy, and “詳しくはこちら”. A background-image declaration also identifies a larger specialty-section image.

The mobile DOM establishes a two-column layout: cards are 158px wide at `x25` and `x207`, with a 24px gap. The first measured rows are 373.19px high and separated by 56px. Titles use `17 / 22.1px`; paragraphs use `12 / 24px`. Long titles wrap within the narrow column, and the measured detail labels align across each row.

The first title begins 93px below its anchor top. This establishes an upper visual region, but its artwork is not documented well enough to describe its icon style. Desktop specialty-column count and complete desktop geometry are unverified.

This section is a useful responsive exception: solutions become one column, while specialties retain two columns on the inspected phone width.

### Event Entries

The rendered text includes three linked archive seminar entries, dated August 28, August 26, and July 23, 2026. Each combines an archive status, event type, date/time, and a longer Japanese title. An “イベント一覧” link leads to the event directory.

The supplied screenshots do not show these entries, and their detailed rectangles are absent. Preserve the verified information hierarchy when reusing the component; do not claim a particular card count per row, thumbnail ratio, hover effect, or badge color.

### Closing Download and Contact Panels

The desktop bottom capture shows the lower portion of a paired photographic action band. It spans approximately 1340px with 50px outside margins and a center division. Both sides carry a strong blue overlay and white explanatory copy. The outer lower corners are softly rounded.

The mobile bottom capture shows a full-width Contact panel immediately above the charcoal footer. Its visible heading is bold white English lettering with a right arrow and a tiny coral dot. Japanese supporting copy sits beneath it over a photograph of a business conversation.

The download panel remains present in the mobile link evidence, although it is outside the supplied bottom screenshot. Do not interpret the screenshot crop as proof that the download panel was removed. Full panel heights, exact overlay opacity, and hover behavior are unverified.

### Footer and Back-to-Top Link

The desktop footer is a large charcoal region with a white logo on the left and three navigation groups toward the right. Solution and specialty groups expand into muted, hyphen-prefixed child links. A fine separator spans a roughly 1200px inner area. Below it sit the copyright, corporate-site link, privacy link, and a circular upward-arrow control.

The original page displays “© Goodpatch Inc. All rights reserved” and links “コーポレートサイト” to `https://goodpatch.com/`. These are independently visible identity signals; they do not establish production responsibilities for the website.

On mobile, the footer becomes a compact hierarchy: logo and back-to-top control, five prominent top-level links, two outlined action pills, separator, copyright, and legal links. Detailed solution and specialty child lists are absent from the captured mobile footer text.

Visual estimates at 390px: approximately 24px side insets, 48px vertical rhythm between major links, two approximately 163px-wide action pills with an 8px gap, and a 48px back-to-top circle. The upward-arrow anchor points to `#page-top`; its scrolling animation was not tested.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What can be concluded |
| --- | --- | --- |
| General element transitions | `0.3s cubic-bezier(0.4, 0.4, 0, 1)` | A common timing curve is declared; individual changed properties and triggers are not fully established |
| Body background | `background 0.5s cubic-bezier(0.4, 0.4, 0, 1)` | Background changes have a declared transition |
| Desktop major statements and solution anchors | `0.6s ease-in-out 0.2s` | Slower transitions with a short delay are declared; reveal trajectory is unverified |
| Desktop metric buttons | `0.6s ease-in-out` with `0.2s`, `0.5s`, `0.8s` delays | A staggered timing pattern exists |
| Mobile major statements and metrics | `0.3s ease-in-out`, without the desktop stagger in the sampled values | Some timing is simplified at the mobile capture width |
| Mobile credibility paragraph | `0.6s ease-in-out 0.3s` | Mobile does not remove all delayed transitions |
| Logo-strip keyframes | Background position from `0 0` to `-30000px 0`; declaration includes `600s linear` | Authored background travel averages 50px/s if applied as shown; the iteration token is truncated after `inf` |
| Mobile message-strip keyframes | Background position from `0 0` to `30000px 0` | Opposite-direction movement is authored; timing is not supplied |
| Header appearance | Transparent inverse opening and opaque white scrolled captures | Two visible states are established; threshold and transition sequence are unverified |
| Hero media | Connection-verification error in both opening captures | Playback, content sequence, looping, and controls cannot be evaluated |
| Testimonial rail, menu, metric buttons | Structural elements and destinations only | No activation outcomes or interaction traces were supplied |

Many sampled elements report `animation: none`. That does not rule out animation on nested elements, pseudo-elements, media, or the separately declared background strips.

The collection process waited for finite motion and layout stability and temporarily paused perpetual animations during readiness checks. Static captures therefore do not establish the complete live choreography. Avoid adding parallax, spring motion, cursor effects, or automatic carousels as if they were verified features.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Main canvas | White | Keeps a long and varied service narrative visually coherent |
| Opening media region | Captured black error state over a blue-computed section | Holds the headline and curved opening; healthy media appearance remains unknown |
| Scrolled header | White with dark identity and navigation | Keeps navigation legible over varied content |
| Solution information panel | White, visually merging into the page | Creates the characteristic image overlap without a heavy card container |
| Action pills | Blue fill or fine outline | Separates contact, download, and detail actions |
| Closing action band | Blue-tinted photography with white copy | Connects project evidence to download/contact destinations |
| Footer | Charcoal, white headings, muted secondary text | Supports a dense sitemap and legal information |

The page does not need a general elevation ladder. Its distinctive surface treatment is the white overlap against photography, not a stack of floating rounded cards.

## Imagery

Current desktop solution imagery includes a laptop displaying analytics on a bright desk, a hand using a smartphone with a red app interface, and printed brand materials arranged around a tablet. These photographs make the service tangible through finished products and their use contexts.

The images are large, landscape-oriented, and naturally colored. Bright desk surfaces, device screens, and strong colors within client work provide variety while the surrounding UI stays neutral. Small client marks sit within some image areas; preserve their relationship to the relevant project rather than treating them as generic decoration.

The closing action panels use document/work imagery and a business-conversation photograph under a strong blue tint. This is a separate treatment from the untinted solution photographs.

The header and footer use the same distinctive interlocking symbol beside a three-line wordmark. Source filenames for the logo and heading graphics were not supplied. Do not replace them with guessed icon-library symbols or infer their fonts from unrelated stylesheet variables.

### Observed Asset References

These URLs appear directly in original-page background-image declarations. They were not independently fetched during this analysis.

| Asset | Original-page reference | Supported use |
| --- | --- | --- |
| First solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_01.jpg` | New service/product development; corresponding desktop image shows a laptop on a desk |
| Second solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_02.jpg` | Existing service/product improvement; corresponding image shows smartphone use |
| Third solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_03.jpg` | Organization-reform entry; its visible desktop image area shows printed collateral and a device |
| Fourth solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_04.jpg` | Strategy entry; image subject not visually documented |
| Fifth solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_05.jpg` | Service-branding entry; image subject not visually documented |
| Sixth solution image | `https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_06.jpg` | Corporate-branding entry; image subject not visually documented |
| Specialty-section image | `https://media.goodpatch.com/studio/01_index@2x/Specialities.jpg` | Declared section background; exact crop and subject unverified |

Use approved project assets where available. Do not substitute a speculative hero background to fill the evidence gap.

## Layout & Responsive Behavior

The page changes composition by content type. A full-height opening leads into a horizontal testimonial sequence, broad editorial statements, business-phase explanations, a staggered solution directory, specialties, events, and a large closing footer.

| Region | At 1440px | At 390px |
| --- | --- | --- |
| Header | Full navigation and paired actions | Logo and circular menu trigger |
| Header height | 86px | 86px |
| Hero headline | Two visible lines; 696px box | Three visible lines; 340px box |
| Editorial measure | Broad headings with narrower supporting text | Common 340px measure and 25px side insets |
| Testimonials | 540px text blocks in a horizontal sequence | Approximately 286px initial blocks with partial next-item visibility |
| Metrics | Three horizontally distributed buttons | Three centered, vertically stacked buttons |
| Phase overview | Horizontal labels | Vertical sequence |
| Phase details | Right-side 670px text column | 340px text column at the main inset |
| Approach lists | Three columns | Two columns |
| Solutions | Two 590px columns with substantial vertical offsets | One 340px column in content order |
| Specialties | Desktop layout not established | Two 158px columns |
| Footer | Expanded sitemap groups | Top-level links and paired action pills |

A supplied stylesheet fragment contains a `max-width: 1200px` rule for line-break visibility. It does not prove that the navigation or card layouts switch at exactly 1200px. No tablet capture was supplied.

**Recommended implementation approach:** preserve the measured endpoint compositions, then select intermediate breakpoints according to content fit. Keep the header height stable; reduce outer spacing and type deliberately; reset solution staggering on narrow screens; preserve the specialty grid only while its copy remains readable. Do not scale the entire desktop page uniformly.

## Do’s and Don’ts

### Do

- Use `#096fca` consistently for the principal action color.
- Preserve the contrast between broad white space and large, concrete project photographs.
- Keep the desktop solution images wider than their descriptions.
- Reproduce the staggered directory and the white panel's overlap with the image.
- Use measured Noto Sans JP weights, tracking, and distinct paragraph line-heights.
- Keep the hero supporting line aligned to the right edge of its heading group.
- Maintain the compact 100px header identity at both captured widths.
- Treat mobile solutions and mobile specialties as different layout systems.
- Preserve the footer's expanded desktop hierarchy and simplified mobile hierarchy.
- Distinguish source-declared motion from demonstrated interaction behavior.

### Don’t

- Don't turn all content into identical equal-height cards.
- Don't replace the photographic case directory with generic illustrations or device mockups unrelated to the work.
- Don't add shadows, glass blur, or gradients to every surface.
- Don't turn gray hashtags into multicolored badges.
- Don't infer the English headline's font from a list of declared font variables.
- Don't copy the connection-verification error or regard its black field as the intended hero palette.
- Don't assume that offscreen testimonial content proves autoplay or swipe support.
- Don't invent missing metric numbers, menu states, event layouts, or media behavior.
- Don't nest an interactive detail button inside an already clickable solution anchor.
- Don't reproduce the smallest mobile text without checking readability and contrast.

## Recommended Implementation Additions

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

- Provide a stable hero fallback that keeps the headline readable if media is blocked. A solid brand-blue surface is a practical option.
- Give graphic headings equivalent accessible text. Empty extracted H1/H2 text does not establish whether the original supplies an accessible name, so verify this explicitly.
- Give the menu button an accessible name, `aria-expanded`, and a relationship to the controlled navigation. Provide keyboard operation and focus handling for the chosen menu pattern.
- Keep every testimonial reachable without requiring automatic motion. Add explicit controls if a carousel is implemented.
- Increase essential mobile copy and approach labels where necessary. The measured 9px metric headings and 10px list text are small.
- Darken muted text when it carries essential information. `#96a0a6` on white has approximately 2.7:1 contrast, calculated from the supplied color values, which is insufficient for ordinary small text.
- Give each solution anchor a concise accessible name, with its heading as the main identifier. Keep repeated detail labels visually consistent without making every link indistinguishable to assistive technology.
- Respect reduced-motion preferences for decorative strips, transitions, and any added media behavior.
- Reserve image dimensions and preserve focal points when responsive crops change.
- Offset in-page targets for the persistent 86px header.

## Agent Prompt Guide

### Quick Color Reference

- Main page and content surfaces: `#ffffff`.
- Primary action: `#096fca`.
- Headings and primary copy: `#3a3e40`.
- Solution descriptions: `#5f5f5f`.
- Quiet metadata: source `#96a0a6`; darken for essential small text in an accessible adaptation.
- Fine outlines: `#e9e9e9` as a source-declared light-gray alias.
- Footer: approximately `#292d2e`, a screenshot estimate.
- Decorative yellow and coral are secondary visual accents, not additional action colors.

### Overall Prompt

“Create a Japanese business-design service homepage informed by Goodpatch Design Partnership's current measured structure. Use white space, Noto Sans JP, dark gray headings, and blue `#096fca` actions. Keep an 86px persistent header with a compact 100px logo, desktop navigation, an outlined download pill, and a filled contact pill. Build a viewport-height opening with approved graphic headline artwork, a small right-aligned Japanese supporting line, and a broad curved lower edge. Follow with testimonials, credibility statements, business phases, six photographic solution entries, specialties, events, and a charcoal sitemap footer. At desktop width, stagger two 590px solution columns with an 80px gap and place narrower descriptions below white panels overlapping the images. At 390px, use 25px content insets, one solution column, and two specialty columns. Keep unverified hero media and menu behavior explicitly separate from the measured design.”

### Example Component Prompts

1. **Solution entry:** “Design a single clickable service entry with a wide project photograph, a white information panel overlapping its lower-left edge, a 25px bold Japanese title, a 450px-wide gray summary, plain muted hashtags, and a small outlined detail pill with a blue arrow. Use no shadow. On mobile, fit the entry to 340px and reduce its title to 20px.”
2. **Header:** “Create an 86px header with a 100 × 39px identity at left, 13px bold tracked Japanese navigation at right, and two approximately 160 × 44px action pills. Provide transparent inverse and opaque white appearance states. At phone width, retain the logo and show a 50px blue circular two-line menu trigger.”
3. **Testimonial rail:** “Arrange editorial quotations horizontally with 540px desktop text blocks and 80px gaps. Use 26px bold headlines, 14px text with 28px leading, and compact author information. At 390px, show an approximately 286px first block and part of the next block. Do not assume autoplay.”
4. **Mobile specialties:** “Use two 158px columns separated by 24px inside a 340px content area. Set Japanese titles at 17px with 22.1px leading and descriptions at 12px with 24px leading. Allow long titles to wrap and align each row's detail actions.”
5. **Footer:** “Build a spacious charcoal desktop footer with a white identity, expanded solution and specialty links, a fine separator, and restrained legal information. On mobile, simplify to five bold top-level links, two outlined action pills, and a circular back-to-top control beside the logo.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not a recovered stylesheet. Exact measured colors, typography, and key endpoint dimensions are preserved. The footer color, image overlap, curve geometry, uniform 320px stagger, and intermediate breakpoints are approximations or recommendations. Fonts and approved identity/heading artwork must be supplied separately.

The solution layout below expects six `.solution-card` anchors in their original content order. It uses explicit grid placement to put odd entries on the right and even entries on the left at desktop widths, then restores a single sequential column on mobile.

```css
:root {
  /* Measured colors */
  --gp-blue: #096fca;
  --gp-white: #ffffff;
  --gp-ink: #3a3e40;
  --gp-copy: #5f5f5f;
  --gp-muted: #96a0a6;
  --gp-line: #e9e9e9;

  /* Screenshot estimate and recommended accessible alternative */
  --gp-footer: #292d2e;
  --gp-muted-readable: #65727a;

  /* Verified text family; load the font separately */
  --gp-font: 'Noto Sans JP', sans-serif;
  --gp-tracking: 0.08em;
  --gp-tracking-action: 0.05em;
  --gp-tracking-hero: 0.24em;

  --gp-header-height: 86px;
  --gp-content-width: 1200px;
  --gp-solutions-width: 1260px;
  --gp-column-gap: 80px;
  --gp-mobile-inset: 25px;
  --gp-pill-radius: 48px;
  --gp-image-radius: 10px;

  /* Source timing, applied only to selected properties */
  --gp-ease: cubic-bezier(0.4, 0.4, 0, 1);
  --gp-transition: 300ms var(--gp-ease);
}

* { box-sizing: border-box; }
body { margin: 0; }

.gp-site {
  color: var(--gp-ink);
  background: var(--gp-white);
  font-family: var(--gp-font);
  font-size: 15px;
  line-height: 2;
}

.gp-site img { max-width: 100%; }
.gp-site button { font: inherit; }
.gp-site [id] { scroll-margin-top: 102px; }

.gp-container {
  width: min(var(--gp-content-width), calc(100% - 80px));
  margin-inline: auto;
}

.gp-section { padding-block: 100px; }

.gp-heading {
  margin: 0;
  font-size: 38px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: var(--gp-tracking);
}

.gp-intro-copy {
  max-width: 700px;
  margin-block: 48px 0;
  letter-spacing: var(--gp-tracking);
}

/* Fixed positioning is an adaptation of the observed persistence. */
.gp-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--gp-header-height);
  padding: 0 30px 0 40px;
  color: var(--gp-ink);
  background: var(--gp-white);
  transition: background-color var(--gp-transition),
              color var(--gp-transition);
}

.gp-header[data-tone='inverse'] {
  color: var(--gp-white);
  background: transparent;
}

.gp-brand {
  display: block;
  flex: 0 0 100px;
  width: 100px;
}

.gp-brand img { display: block; width: 100%; height: auto; }

.gp-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-inline-start: auto;
}

.gp-nav > a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--gp-tracking);
}

.gp-header-actions {
  display: flex;
  gap: 8px;
  margin-inline-start: 30px;
}

.gp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 26px;
  border: 2px solid var(--gp-line);
  border-radius: var(--gp-pill-radius);
  color: var(--gp-ink);
  background: var(--gp-white);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--gp-tracking-action);
  transition: color var(--gp-transition),
              background-color var(--gp-transition),
              border-color var(--gp-transition);
}

.gp-pill--download {
  color: var(--gp-blue);
  border-color: currentColor;
  background: transparent;
  letter-spacing: var(--gp-tracking);
}

.gp-header[data-tone='inverse'] .gp-pill--download {
  color: var(--gp-white);
}

.gp-pill--contact {
  padding-inline: 38px;
  color: var(--gp-white);
  border-color: var(--gp-blue);
  background: var(--gp-blue);
  letter-spacing: var(--gp-tracking);
}

.gp-pill--section {
  width: 220px;
  min-height: 65px;
  padding: 24px 30px;
  justify-content: space-between;
}

.gp-pill--detail { min-height: 49px; padding-inline: 30px; }
.gp-arrow { color: var(--gp-blue); line-height: 1; }

.gp-menu {
  display: none;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--gp-blue);
  cursor: pointer;
}

.gp-menu::before,
.gp-menu::after {
  content: '';
  display: block;
  width: 21px;
  height: 1px;
  margin: 7px auto;
  background: currentColor;
}

.gp-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  color: white;
}

/* Recommended static fallback and approximate curve geometry. */
.gp-hero-surface {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--gp-blue);
  clip-path: ellipse(95% 100% at 50% 0%);
}

.gp-hero-inner {
  width: min(1160px, calc(100% - 50px));
  margin-inline: auto;
}

.gp-hero-copy { width: min(696px, 100%); }
.gp-hero-title { margin: 0; }

/* Use art-directed desktop/mobile heading assets when available. */
.gp-hero-title img { display: block; width: 100%; height: auto; }

.gp-hero-caption {
  margin: 24px 0 0;
  text-align: right;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: var(--gp-tracking-hero);
}

.gp-scroll-cue {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  font-size: 12px;
  line-height: 1;
}

.gp-scroll-cue::after {
  content: '';
  width: 1px;
  height: 68px;
  background: rgb(255 255 255 / 55%);
}

.gp-solutions {
  width: min(var(--gp-solutions-width), calc(100% - 80px));
  margin-inline: auto;
  padding-block: 200px 120px;
}

.gp-solutions-intro {
  max-width: 590px;
  margin-inline-start: 30px;
}

.gp-solutions-intro p {
  margin: 58px 0 48px;
  line-height: 1.6;
  letter-spacing: var(--gp-tracking);
}

.gp-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 100px var(--gp-column-gap);
  margin-block-start: -100px;
  padding-block-end: 320px;
}

.gp-solution {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.gp-solution:nth-child(odd) { grid-column: 2; }
.gp-solution:nth-child(even) {
  grid-column: 1;
  transform: translateY(320px);
}
.gp-solution:nth-child(1), .gp-solution:nth-child(2) { grid-row: 1; }
.gp-solution:nth-child(3), .gp-solution:nth-child(4) { grid-row: 2; }
.gp-solution:nth-child(5), .gp-solution:nth-child(6) { grid-row: 3; }

.gp-solution-image {
  display: block;
  width: 100%;
  aspect-ratio: 59 / 33;
  object-fit: cover;
  border-radius: var(--gp-image-radius);
}

/* Desktop overlap approximated from the current solution screenshot. */
.gp-solution-body {
  position: relative;
  width: calc(100% - 70px);
  margin-block-start: -40px;
  padding-block: 50px;
  border-start-end-radius: 12px;
  background: var(--gp-white);
}

.gp-solution-title {
  margin: 0;
  font-size: 25px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: var(--gp-tracking);
}

.gp-solution-summary {
  max-width: 450px;
  margin: 40px 0 0;
  color: var(--gp-copy);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: var(--gp-tracking);
}

.gp-solution-tags {
  margin: 24px 0 0;
  color: var(--gp-muted-readable);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: var(--gp-tracking);
}

.gp-solution-body .gp-pill { margin-block-start: 44px; }

.gp-footer {
  color: white;
  background: var(--gp-footer);
}

.gp-footer-main {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 60px;
  padding-block: 160px 140px;
}

.gp-footer-nav {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 60px;
}

.gp-footer-nav a { color: inherit; text-decoration: none; }
.gp-footer-nav ul { list-style: none; padding: 0; }
.gp-footer-subnav { color: var(--gp-muted); font-size: 12px; }
.gp-footer-actions { display: none; }

.gp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 36px 40px;
  border-top: 1px dashed rgb(255 255 255 / 10%);
  color: var(--gp-muted);
  font-size: 11px;
  letter-spacing: var(--gp-tracking);
}

/* Recommended feedback; original hover appearance was not tested. */
@media (hover: hover) {
  .gp-solution:hover .gp-pill { border-color: var(--gp-blue); }
  .gp-nav > a:hover { text-decoration: underline; text-underline-offset: 5px; }
}

.gp-site :focus-visible {
  outline: 3px solid var(--gp-blue);
  outline-offset: 4px;
}

.gp-footer :focus-visible,
.gp-header[data-tone='inverse'] :focus-visible {
  outline-color: white;
}

/* Recommended navigation breakpoint; not a verified source threshold. */
@media (max-width: 1200px) {
  .gp-header { padding-inline: 20px; }
  .gp-nav, .gp-header-actions { display: none; }
  .gp-menu { display: block; margin-inline-start: auto; }
}

/* Recommended content breakpoint, matching the observed phone endpoint. */
@media (max-width: 767px) {
  .gp-container,
  .gp-solutions { width: calc(100% - 50px); }
  .gp-section { padding-block: 64px; }
  .gp-heading { font-size: 24px; line-height: 1.6; }
  .gp-intro-copy { margin-block-start: 32px; font-size: 14px; }

  .gp-hero-surface { clip-path: ellipse(165% 100% at 50% 0%); }
  .gp-hero-copy { width: 100%; }
  .gp-hero-caption { font-size: 12px; }
  .gp-scroll-cue::after { height: 58px; }

  .gp-solutions { padding-block: 120px 0; }
  .gp-solutions-intro { margin-inline-start: 0; }
  .gp-solutions-intro p { margin: 40px 0 24px; font-size: 14px; }
  .gp-solutions-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    margin-block-start: 60px;
    padding-block-end: 0;
  }
  .gp-solution:nth-child(n) { grid-area: auto; transform: none; }
  .gp-solution-image { border-radius: 5px; }

  /* Simple mobile treatment; the exact source mask is unverified. */
  .gp-solution-body {
    width: 100%;
    margin-block-start: 0;
    padding-block: 16px 0;
    border-radius: 0;
  }
  .gp-solution-title { font-size: 20px; }
  .gp-solution-summary { margin-block-start: 18px; font-size: 12px; }
  .gp-solution-tags { margin-block-start: 18px; font-size: 11px; }

  /* Verified mobile specialty geometry; desktop rules are project-specific. */
  .gp-specialties-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 24px;
  }
  .gp-specialty-title {
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: var(--gp-tracking);
  }

  .gp-footer-main {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 32px 40px;
  }
  .gp-footer-nav { grid-template-columns: 1fr; gap: 24px; }
  .gp-footer-subnav { display: none; }
  .gp-footer-actions { display: flex; gap: 8px; }
  .gp-footer-actions .gp-pill {
    flex: 1;
    padding-inline: 12px;
    color: white;
    border-color: rgb(255 255 255 / 20%);
    background: transparent;
  }
  .gp-footer-bottom { flex-wrap: wrap; padding-block: 36px; }
}

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

Use `.gp-solution` as the enclosing anchor. The following example demonstrates the component hierarchy; the image URL is an observed source reference and should be replaced with an approved local asset when appropriate.

```html
<a class='gp-solution'
   href='https://design-partnership.goodpatch.com/solutions/new_service'
   aria-labelledby='solution-new-title'>
  <img class='gp-solution-image'
       src='https://media.goodpatch.com/studio/01_index@2x/Solutions-Works_01.jpg'
       alt='Laptop displaying an analytics dashboard on a bright desk'
       loading='lazy'>
  <div class='gp-solution-body'>
    <h3 class='gp-solution-title' id='solution-new-title'>
      新規サービス/プロダクト開発
    </h3>
    <p class='gp-solution-summary'>
      リサーチで顧客の本質的なインサイトを明らかにしながら理想の体験をデザインし、プロトタイプによる検証と改善を繰り返すことで、不確実性の高い新規事業の成功確度を高めます。
    </p>
    <p class='gp-solution-tags'>
      #サービスデザイン #新規事業 #UX/UIデザイン #開発 #App
    </p>
    <span class='gp-pill gp-pill--detail'>
      詳しくはこちら <span class='gp-arrow' aria-hidden='true'>→</span>
    </span>
  </div>
</a>
```

The CSS does not implement menu disclosure, header-state detection, media playback, testimonial navigation, or metric-button outcomes. Those require explicit behavior decisions and testing. Supply appropriate light and dark logo artwork when changing header tone.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-partnership: var(--gp-blue);
  --color-canvas: var(--gp-white);
  --color-ink: var(--gp-ink);
  --color-copy: var(--gp-copy);
  --color-muted-source: var(--gp-muted);
  --color-muted-readable: var(--gp-muted-readable);
  --color-rule: var(--gp-line);
  --color-footer: var(--gp-footer);

  --font-japanese: var(--gp-font);
  --text-nav: 13px;
  --text-action: 12px;
  --text-solution: 25px;
  --text-statement: 38px;

  --spacing-header: 86px;
  --spacing-mobile-inset: 25px;
  --spacing-solution-gap: 80px;
  --radius-action: 48px;
  --radius-project: 10px;
}
```

## Sources & Evidence

- [Goodpatch Design Partnership homepage](https://design-partnership.goodpatch.com/): original and final inspected URL, with supplied HTTP status `200`. No redirect is recorded.
- Supplied capture timestamp: `2026-10-01T15:31:05.030Z`, equivalent to October 2, 2026, 00:31:05 JST. This document analyzes that captured current-page evidence rather than claiming a separate live visit.
- Desktop evidence: 1440 × 1000 screenshots of the opening, solution directory, and footer; rendered text, links, custom properties, and sampled computed styles. Document height approximately 12,624.95 CSS pixels.
- Mobile evidence: 390 × 844 screenshots of the opening and footer; rendered text, links, custom properties, and sampled computed styles, including solution and specialty geometry. Document height approximately 13,915.25 CSS pixels.
- Observed state changes are limited to the supplied top and scrolled captures. Menu activation, hover outcomes, testimonial movement, metric-button results, form behavior, and back-to-top motion were not demonstrated.
- Both opening screenshots contain a connection-verification error over the hero. Healthy hero imagery and playback behavior are unverified. This limitation does not erase the independently available lower-page design evidence.
- Original-page asset declarations and link destinations are recorded where useful. Linked detail pages and image files were not independently inspected. No additional browsing or command execution was performed.

Measured endpoint layouts, screenshot estimates, and implementation recommendations remain separate throughout this reference. The CSS provides a practical starting point for the documented visual relationships, not an exact reproduction of unobserved states.