# PICK UP PLAYGROUND — Style Reference

> A spacious black-and-white identity for street basketball, shared courts, and collective care.

**Website / original URL:** [pickupplayground.jp](https://pickupplayground.jp/)
**Final URL:** [https://pickupplayground.jp/](https://pickupplayground.jp/)
**Theme:** white canvas with black typography and controls; natural-color photography and a small red illustration detail.
**Inspected:** October 2, 2026, at 09:56:00.462 UTC / 18:56:00.462 JST, using the supplied browser evidence.
**Viewports:** desktop **1440 × 1000 CSS px**; mobile **390 × 844 CSS px**.
**Scope:** the current homepage, including its opening identity, project explanation and campaign links, event index, collection modules, cleanup-kit explanation, support message, and footer. Visual captures cover the desktop opening, an interior photograph, the desktop footer, and the mobile opening and footer. Other sections are documented from rendered DOM text, element bounds, and computed styles.

PICK UP PLAYGROUND is a long project and organization website connecting basketball games with cleanup activities and local court stewardship. Its design gives a community initiative the visual confidence of a sports identity: a large illustrated wordmark, strong Japanese text, condensed English lettering, documentary photography, and unusually generous white space.

The opening is almost entirely empty white canvas around the logo. Further down, information becomes denser without acquiring a card-based interface. Square image links, substantial Japanese paragraphs, simple rectangular actions, and monochrome partner marks establish the hierarchy. Desktop compositions use offset content columns and controls near the viewport edges. Mobile moves those controls into a compact top band and converts the main content into a single column.

## How to Read This Reference

- **Measured** values come from the supplied rendered DOM and computed-style records. Measurements are rounded to two decimal places where useful.
- **Visual estimates** describe the attached original-page captures. They are not pixel samples or recovered stylesheet declarations.
- **Calculated** values, such as grid gaps, are derived from measured element positions.
- **Recommended** values describe a reusable implementation. Breakpoints, hover endpoints, accessibility behavior, and CSS formulas must not be mistaken for verified original code.
- All named design tokens below are implementation aliases. The supplied custom-property evidence contains only two Swiper-related variables, not an original brand-token system.
- A computed element box does not establish that the element was visibly painted. This matters for the navigation content, startup layer, and desktop corner logo.
- The supplied views establish two responsive endpoints. Intermediate widths, landscape layouts, and browser zoom were not tested.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Canvas White | `#FFFFFF` | `--color-paper` | Measured on the full-viewport opening sections and mobile header; visually the dominant page surface |
| Ink Black | `#000000` | `--color-ink` | Measured text and filled action backgrounds; visually also the wordmark, menu strokes, and corner arc |
| Reversed White | `#FFFFFF` | `--color-on-ink` | Measured text on black actions and white text within the renovation-project treatment |
| Character Red | Muted medium red; approximately `#B52B32` | No general UI token | Visual estimate for the character's hair inside the opening artwork; not a sampled or computed color |
| Partner Gray | Light-to-medium gray | No general UI token | Visible within the media-partner artwork; not evidence of a gray surface system |
| Documentary Color | Image-dependent | Not applicable | Natural browns, gray court surfaces, white gloves, and other photographic colors |

The black-and-white interface is the stable system. Red belongs to a small part of the identity artwork, while photography supplies most of the page's color variation. Neither should become a general button or navigation color.

### Computed Colors That Are Not Brand Tokens

The supplied DOM declares `--swiper-theme-color: #007aff` and `--swiper-navigation-size: 44px`. These are library-named values; the supplied captures do not establish visible blue controls. Several image-only anchors also report the browser's default link blue, `rgb(0, 0, 238)`, even though their visible content is artwork. Do not add these blues to the reconstructed palette.

No theme selector or alternate color mode is established by the evidence.

## Tokens — Typography

### Japanese Text — Bold Gothic Sans

**Measured body family:** `'游ゴシック体', YuGothic, 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'Noto Sans JP', sans-serif`.

The body computes to weight `500`, but nearly all sampled editorial paragraphs, Japanese headings, labels, and footer links use `700`. This produces a firm, printed character even in long passages. Important introductory copy also uses `0.12em` tracking, giving the Japanese text a deliberate, open rhythm.

These are computed font-family declarations. The evidence does not identify which fallback rendered every glyph or confirm individual font-file downloads.

### English Display Text — Oswald

**Measured family:** `Oswald, sans-serif`.

Use its tall, condensed proportions for navigation, collection-brand headings, purchase labels, the social hashtag, and the textual cooperation credit. Weights vary by role: navigation and purchase labels use `500`; brand headings and the footer hashtag use `700`.

The condensed English lettering balances the wider Japanese characters and the broad serif forms of the illustrated logo.

### Scroll Instruction — Lato

**Measured family:** `Lato, sans-serif`, weight `900`.

The vertically oriented `SCROLL DOWN` instruction is a small but distinct utility treatment. It measures `16px / 22.4px` on desktop and `10px / 14px` on mobile. Its narrow visual footprint lets it sit at the edge of the opening without competing with the logo.

### Wordmark — Artwork, Not a Verified Font

The large two-line wordmark has high-contrast serif forms, tightly composed lettering, heavy tapered horizontal rules, and a small red-haired character leaning across the upper rule. Its font identity and asset format are not supplied.

Treat the lockup as identity artwork. An ordinary serif heading will not reproduce its proportions, custom letter relationships, rules, or character placement. The compact corner wordmark is a separate visual treatment without the large surrounding composition.

### Type Scale

All values in this table are measured computed styles unless marked otherwise. Sizes are CSS pixels, not source `rem` values.

| Role | Desktop size / line height | Mobile size / line height | Weight | Tracking |
| --- | --- | --- | --- | --- |
| Hero statement | `26 / 36.4px` | `15 / 21px` | `700` | `0.12em` |
| Primary navigation | `62 / 86.8px` | `36 / 50.4px` | `500` | Normal |
| Navigation legal links | `20 / 32px` | `18 / 28.8px` | `700` | Normal |
| Navigation hashtag | `30 / 42px` | `18 / 25.2px` | `500` | Normal |
| Scroll instruction | `16 / 22.4px` | `10 / 14px` | `900` | Normal |
| Project lead heading | `50 / 65px` | `36 / 46.8px` | `700` | `0.12em` |
| Project introduction | `18 / 36px` | `13.8 / 27.6px` | `700` | `0.12em` |
| Campaign and organizer paragraphs | `18 / 39.6px` | `16 / 35.2px` | `700` | Normal |
| Organizer heading | `36 / 50.4px` | `22 / 30.8px` | `700` | Normal |
| Renovation English title | `38.5 / 50.05px` | `36 / 50.4px` | `700` | Normal |
| Collection introduction | `14 / 28px` | `14 / 28px` | `700` | Normal |
| Collection brand name | `20 / 24px` | `20 / 24px` | `700` | Normal |
| Collection brand description | `12 / 22.8px` | `12 / 22.8px` | `700` | Normal |
| Purchase label | `20 / 28px` | `20 / 28px` | `500` | Normal |
| Cleanup-kit heading | `34 / 37.4px` | `20 / 22px` | `700` | Normal |
| Cleanup-kit paragraph | `14 / 28px` | `14 / 28px` | `700` | Normal |
| Support-message heading | `24 / 33.6px` | `20 / 28px` | `700` | `0.12em` |
| Support-message paragraph | `16 / 35.2px` | `14 / 30.8px` | `700` | Normal |
| Footer hashtag | `40 / 56px` | `30 / 42px` | `700` | Normal |
| Footer cooperation text | `22 / 30.8px` | `22 / 30.8px` | `700` | Normal |
| Footer category and legal labels | `14 / 19.6px` | `14 / 19.6px` | `700` | Normal |

**Composite-heading limitation:** the `PROJECT`, `EVENT`, and `PRODUCTS` heading containers report `15px / 21px`, but their combined bounds are approximately `142.39px` tall on desktop and `74px` on mobile. Child-level English display styles are absent from the sample. Do not interpret the parent's 15px value as the size of the entire visible English heading.

**Root-size limitation:** the original root computes to `10px`. This is not the reading size of the page. The Quick Start uses explicit component sizes and a conventional root instead of requiring the original root setting.

## Tokens — Spacing & Shapes

The rhythm is asymmetric and spacious. A thin left control rail, an offset editorial frame, and broad areas of white canvas provide structure without borders around every section.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Opening section | `1440 × 1000px` | `390 × 844px` | Measured |
| Main illustrated lockup | Approximately `667 × 346px` | Approximately `344 × 180px` | Visual estimate, including the character and rules |
| Compact corner logo | `131.77 × 41.11px` | `94.19 × 29.38px` | Measured link / heading box |
| Compact logo position | `x 1255.53`, `y 42.16` | `x 275.09`, `y 23.55` | Measured; visibility differs between captures |
| Menu control box | `52.70 × 52.70px` | `47.09 × 47.09px` | Measured |
| Menu control position | `x 47.44`, `y 473.64` | `x 28.25`, `y 14.59` | Measured |
| General editorial frame | `x 189.75`, width `1102.67px` | `x 28.25`, width `333.50px` | Measured from content bounds |
| Project copy column | `x 765.34`, width `527.08px` | `x 28.25`, width `333.50px` | Measured |
| Centered campaign-link frame | `x 213.98`, width `1012.03px` | `x 28.25`, width `333.50px` | Measured |
| Event grid frame | `x 213.98`, width `1078.44px` | `x 28.25`, width `333.50px` | Measured |
| Event tile | `337.33px` square | `333.50px` square | Measured |
| Event grid gaps | `33.20px` horizontal, `32px` vertical | `28.25px` vertical | Calculated from tile positions |
| Collection text column | `358.41px` wide | `333.50px` wide | Measured |
| Support-message column | `840.17px` wide at `x 321` | `333.50px` wide at `x 28.25` | Measured |
| Footer columns | Two `551.34px` columns, approximately `42.16px` gap | One `333.50px` column | Measured and calculated |

The general desktop content frame is not centered: its left margin is about `189.75px`, while its right margin is about `147.58px`. Campaign images and the event index use different left anchors. Preserve these distinctions when reproducing the inspected composition; one universal centered container will flatten its spatial character.

### Spacing Anchors

| Use | Desktop | Mobile | Interpretation |
| --- | --- | --- | --- |
| Header top inset | `42.17px` | `23.55px` | Measured padding |
| Header right inset | `52.71px` | `20.72px` | Measured padding |
| Project section top padding | `118.07px` | `65.94px` | Measured |
| Event / collection top padding | `85.39px` | `65.94px` | Measured |
| Footer padding | `171.83px 147.58px 92.77px` | `56.52px 28.26px 28.26px` | Measured |
| Event grid to more button | `52px` | `52px` | Calculated from the final tile and button bounds |
| Brand title to description | About `5.27px` | About `4.70px` | Calculated |
| Brand description to purchase action | About `23.19px` | About `23.55px` | Calculated |
| Instagram icon / label gap | `12px` | `8px` | Measured on the link wrapper |

These values are anchors, not proof of an underlying 4px or 8px spacing system. Many dimensions are fractional and change between viewports. The original responsive formulas were not included.

### Shapes and Edges

- Sampled buttons and containers have **`0px` border radius**.
- The event links are square, and the visible large photograph has square corners.
- The menu uses two thin horizontal black strokes, visually around `2px` thick.
- The corner motif is a heavy partial circular arc, visually around `58px` in outer diameter with a roughly `7px` stroke.
- Logo rules taper and flare at the ends. They belong to the artwork rather than a general horizontal-rule component.
- No shadow-based elevation system is visible in the supplied captures.

## Components

### Opening Identity

**Role:** introduce the project through its mark and statement before the long editorial content begins.

The opening occupies one viewport at both inspected sizes. The illustrated lockup sits near the center with the Japanese statement `プレイグラウンドを愛するすべての人たちへ` underneath. The statement is live text in the DOM; its measured line height is `36.4px` on desktop and `21px` on mobile.

On desktop, the lockup occupies roughly 46% of the viewport width. Its visible artwork extends approximately from `x 385` to `x 1052`, with the character beginning around `y 306`. On mobile it expands to about 88% of the viewport width, leaving roughly 23px on either side. The surrounding white space remains substantial above and below.

There is no primary purchase or participation button in this captured opening. The secondary elements are the menu, the scroll instruction, and the partial arc near the lower right. Keep the full identity grouping intact rather than separating the character, rules, and lettering into unrelated decorative elements.

### Persistent Viewport Chrome

**Role:** keep navigation and identity available without building a conventional desktop navigation bar.

The desktop menu sits halfway down the left edge. Its two strokes are contained in a roughly 53px square target. In the supplied interior and footer captures, the compact wordmark sits near the upper-right corner, approximately 53px from the right and 42px from the top.

The mobile treatment changes substantially: the menu moves to the upper left, the compact wordmark remains at the upper right, and the header has a measured white background and height of `76.47px`. The controls retain their positions in the mobile opening and footer captures.

The compact desktop wordmark is absent from the supplied opening screenshot even though its DOM box is reported. It is visible in later captures. This establishes different painted states, but not the exact visibility threshold or transition logic. Persistent positioning is visually supported; the source `position` declaration was not supplied.

### Navigation Content — DOM Evidence Only

The DOM contains four main section links: `TOP`, `PROJECT`, `EVENT`, and `PRODUCTS`, followed by `運営会社`, `プライバシーポリシー`, and a hashtag.

On desktop, the main links measure `62px / 86.8px` in Oswald, with their column starting at approximately `x 858.77`. A separate home-linked artwork box appears to their left. On mobile, the link column begins around `x 58.64`, measures `272.73px` wide, and uses `36px / 50.4px` Oswald.

These elements are not visible in the attached closed-menu captures. Their recorded layout suggests a large navigation panel, but its open appearance, backdrop, entrance direction, close behavior, focus management, and scroll locking were not exercised. Do not present an invented open-menu screenshot as an observed state.

### Scroll Instruction and Corner Arc

The desktop `SCROLL DOWN` text is vertically oriented near the right edge and centered around the viewport's midline. On mobile it moves to the lower-left area, with bounds near `x 18.83`, `y 735.41`.

It is a paragraph in the supplied DOM, so its presence alone does not establish a clickable scroll control.

The lower-right partial arc appears in several orientations across the captures. The mobile footer also shows a small upward arrow within that area. A corresponding small anchor has a measured `opacity 0.6s` transition.

The arc may be related to motion or page state, but its exact meaning is unverified. Do not assert that it is a loading spinner, percentage indicator, or scroll-progress ring. A return-to-top affordance is visually suggested by the upward arrow; its activation was not tested.

### Project Introduction

**Role:** explain the relationship between basketball, cleanup, and community stewardship.

Desktop separates the bilingual section heading from a substantial right-hand text column. That column contains the two-line lead `ゴミ拾い×バスケットボール` at `50px / 65px`, followed by an `18px / 36px` paragraph with `0.12em` tracking. The copy column is `527.08px` wide.

Mobile stacks the section heading, lead, and paragraph within a `333.50px` content width. The lead remains assertive at `36px / 46.8px`; the paragraph reduces to `13.8px / 27.6px`. Preserve the contrast between the compact section introduction and the larger thematic statement.

This is editorial content, not a row of feature cards. Its measured desktop paragraph alone is `612px` tall, making generous line spacing part of the section's character.

### Campaign and Organizer Blocks

The project section includes image-linked campaign material, explanatory copy, a renovation-project treatment, and an area-organizer passage.

The two sampled large campaign anchors are approximately `1012 × 590px` on desktop and `333.50 × 196.88px` on mobile. These are rendered link boxes, not verified native image dimensions. Their destinations distinguish the crowdfunding project and a related summer-camp site.

The renovation treatment contains a three-line condensed English title, white Japanese text, and a white rectangular `ご支援者はこちら` action. The action measures `346 × 69px` on desktop and `342.91 × 50.86px` on mobile. Its surrounding image or background composition is not visible in the supplied screenshots, so only the measured text and button treatment can be stated confidently.

The organizer block uses a `36px` desktop heading and `18px / 39.6px` copy; mobile uses `22px` and `16px / 35.2px`. It ends with an inline `お問い合わせ` link. These links were extracted, not followed; the evidence does not verify whether campaigns or contact workflows are currently accepting submissions.

### Documentary Photo Interlude

**Role:** show the project's practical activity through a large, immediate image.

The supplied desktop interior capture shows a gloved hand using litter tongs beside a paper cup and a can on a basketball court. A player's shoes and lower legs occupy the right side; background people are out of focus. The low camera angle gives the cleanup action the same physical presence normally given to athletic movement.

The visible photograph starts at approximately `x 148`, `y 189`, reaches the right edge of the viewport, and extends to about `y 864`. Its visible rectangle is roughly `1292 × 675px`. This is a screenshot estimate, not a recovered image element size or native aspect ratio.

There is no visible caption, overlaid headline, border, or rounded frame. White margins above and below allow the photograph to function as a large visual pause. Its exact section association and offscreen image extent are not established by the supplied evidence.

### Event Index

**Role:** present event announcements as linked visual material.

Nine square Instagram-linked anchors are present in the supplied DOM. Desktop arranges them as a three-by-three grid of `337.33px` squares. Horizontal spacing is approximately `33.20px`; vertical spacing is `32px`.

Mobile retains almost the same tile size, `333.50px`, but stacks all nine in one column with `28.25px` gaps. This is a decisive responsive change: the tile remains readable while the layout becomes much taller.

A centered black `もっと見る` button follows the grid after a 52px gap. It measures `337.33 × 59.80px` on desktop and `249.59 × 57px` on mobile. Its text is white, bold Japanese sans, and its corners are square.

The event artwork itself is not shown in the attached original-page screenshots. The button's presence and dimensions are verified, but its expansion or fetching behavior was not exercised.

### Collection Brand Modules

**Role:** explain the participating brands and connect selected collections to their own shops.

The DOM identifies five consecutive modules: AKTR, ALLDAY, ballaholic, SOMECITY, and TACHIKARA. Each has a brand heading and descriptive text. The recorded state also contains fraction-style gallery indicators: `3 / 10` in the desktop snapshot and `4 / 10` in the mobile snapshot.

Text anatomy is compact and consistent:

1. A brand heading in `20px / 24px` Oswald, weight `700`.
2. A short Japanese description in `12px / 22.8px`, weight `700`.
3. Where present, a black `BUY NOW` link with white `20px` Oswald text.

Desktop text columns measure `358.41px`; mobile text columns measure `333.50px`. Purchase actions are left aligned on desktop at approximately `231.91 × 52.70px`, then centered on mobile at approximately `207.23 × 47.09px`.

A purchase link is present for four brands; the supplied ALLDAY module has none. Preserve that content distinction instead of automatically rendering an action in every module.

The counters support the presence of gallery state, but do not establish autoplay, swipe support, synchronization, transition direction, or image cropping. No collection-gallery screenshot or image-element measurements were supplied.

### Cleanup-Kit Explanation

This section explains the branded gloves, tongs, and bags used in cleanup activities. Its desktop copy occupies the same right-side `527.08px` column as the project introduction. The heading is `34px / 37.4px`; its paragraph is `14px / 28px`.

Mobile uses the common `333.50px` content column and reduces the heading to `20px / 22px`, while keeping the paragraph at `14px / 28px`. The evidence establishes this copy structure, not the detailed composition of any adjacent imagery.

### Support Message

**Role:** provide a longer personal statement after the collection and project material.

The section headed `応援メッセージ` uses a narrower desktop reading column, `840.17px` wide at `x 321`. Its heading is `24px / 33.6px` with `0.12em` tracking, followed by bold `16px / 35.2px` text and the signature `井上 雄彦`.

Mobile uses the standard content width, a `20px` heading, and `14px / 30.8px` body copy. Preserve paragraph breaks and the separate signature. The supplied text identifies the author of this statement; it does not establish a website design or development credit.

### Social and Organization Footer

**Role:** conclude with community participation, organizer identity, cooperation marks, and legal navigation.

Desktop uses two broad columns. The left centers the large `#pickupplayground` hashtag above an Instagram icon and account label. The right stacks:

1. `Organized by` and `一般社団法人ピックアッププレイグラウンド`.
2. The `協力` label and a group of partner marks.
3. The textual I.T.PLANNING,INC. cooperation link.
4. `Media partner` and the newspaper mark.
5. `会社概要`, a vertical separator, and `プライバシーポリシー`.
6. The copyright line.

The partner marks retain individual widths and proportions. Desktop places AKTR, ALLDAY, ballaholic, FLY, and SOMECITY in the first row, with TACHIKARA below. Mobile places four marks in the first row, then SOMECITY and TACHIKARA in the second. There are no individual logo cards or enclosing borders.

Mobile stacks the social block above the organizational content, with the social text centered and the remaining content left aligned. The organizer's long Japanese name wraps naturally. The legal links and copyright sit well below the media-partner block.

The organizer identity is directly supported by the current page. Cooperation and media-partner labels identify project relationships; they are not website-production credits. No website designer or developer is established by the supplied original-page evidence.

## Tokens — Motion & Interaction

### Measured Transition Declarations

| Target | Computed declaration | What it establishes |
| --- | --- | --- |
| Additional full-viewport white section | `opacity 1.2s 0.05s` | An opacity transition exists; this is consistent with a startup layer, but its contents and trigger are unverified |
| Hero statement | `opacity 0.8s 2s` | A delayed opacity transition; the initiating state change is not recorded |
| Section headings and selected text blocks | `transform 0.4s ease-in-out, opacity 0.4s ease-in-out` | Transform and opacity are animated when their values change; travel distance and direction are absent |
| Campaign and organizer text | `opacity 0.4s ease-in-out` | Fade-capable text treatment |
| Navigation links | `color 0.3s` | Color-transition capability; hover and active endpoint colors were not captured |
| More button and supporter action | `background-color 0.3s, color 0.3s` | Background and text color transitions |
| Purchase actions | `background-color 0.3s` | Background-color transition |
| Small corner anchor | `opacity 0.6s` | Visibility can change through opacity |

The sampled elements report `animation: none`, but the sample does not cover every pseudo-element, SVG, or script-driven effect. Entries that merely report `transition: all` without a meaningful duration do not prove visible animation.

### Observed State Differences and Limits

- The supplied captures were taken after browser readiness and stability checks; they show settled states rather than a recorded animation sequence.
- Corner-arc orientation differs across captures. Its timing, direction, and relationship to scrolling remain unknown.
- Gallery counters differ between desktop and mobile snapshots. This establishes different sampled states, not a verified autoplay mechanism or responsive rule.
- Section links, image destinations, and purchase destinations are present in the DOM. Link activation, open-menu behavior, and the more-button result were not tested.
- The capture procedure traversed the page, but no site-specific scroll snapping, parallax, or scroll-jacking behavior is established.

For an adaptation, short fades and restrained movement suit the design. Keep essential content visible without JavaScript and avoid adding continuous motion merely because the arc resembles a spinner.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Main canvas | White, largely uninterrupted | Gives the identity and content room to stand apart |
| Desktop chrome | Sparse black marks over the page | Keeps navigation present without a full-width navigation bar |
| Mobile header | Solid white strip | Separates top controls from scrolling content |
| Editorial content | Black text directly on the canvas | Creates hierarchy through size, weight, tracking, and spacing |
| Event and campaign links | Square or rectangular image areas | Allows the linked visual material to carry attention |
| Standard action | Black rectangle with white text | Clear, compact interaction emphasis |
| Renovation supporter action | White rectangle with black text | Reverses the action treatment within its surrounding composition |
| Footer | Same white canvas with text and logos | Ends the page without a separate dark panel |

No visible gradient, glass blur, rounded-card system, or soft-shadow hierarchy is needed to explain the inspected design.

## Imagery

The design uses two complementary forms of imagery: highly controlled identity artwork and direct documentary photography.

The wordmark is compact but expressive. Black lettering and tapered rules do most of the work; the small red-haired figure adds personality without turning the entire page into an illustration. The red detail should remain local to the artwork.

The visible photograph is tactile and specific: fabric gloves, metal tongs, a textured court, disposable litter, shoes, and sunlight. Its shallow focus and low viewpoint make the action understandable immediately. For a new project with a similar visual approach, prioritize concrete activity and human presence over generic environmental stock photography.

Partner logos remain distinct artworks with their own proportions. Do not normalize them into identical square crops or redraw them in one common typeface.

### Observed Asset References

No image-source URLs, filenames, native dimensions, or asset formats were included in the supplied evidence. The following identifies visible or DOM-supported assets without inventing paths.

| Asset | Evidence | Reuse implication |
| --- | --- | --- |
| Main illustrated wordmark | Desktop and mobile opening captures | Preserve the complete lockup and intrinsic proportions |
| Compact corner wordmark | Desktop interior/footer and mobile captures | Use the compact treatment separately from the illustrated hero lockup |
| Court-cleanup photograph | Desktop interior capture | Preserve natural color and the relationship between hand, tongs, litter, and shoes |
| Campaign artwork links | Measured DOM anchor boxes | Source files and artwork appearance require separate confirmation |
| Event thumbnails | Nine square DOM links to Instagram posts | Tile geometry is verified; individual artwork content is not visually documented |
| Collection gallery assets | Fraction indicators and brand modules in DOM | Gallery imagery, controls, and native ratios remain unverified |
| Cooperation marks | Footer captures and linked DOM boxes | Preserve varying logo widths and the observed wrapping order |
| Media-partner mark | Footer captures and linked DOM box | Preserve its black/gray artwork treatment |

CSS can reproduce the page's framing and hierarchy. The identity itself requires the appropriate artwork; use project-specific original artwork when adapting the style to another organization.

## Layout & Responsive Behavior

### The Document Is a Long Scroll

The measured desktop document is approximately `16,534.72px` tall; mobile is approximately `16,219.75px`. These are sampled content-state measurements, not heights to hardcode.

| Section | Desktop top / height | Mobile top / height |
| --- | --- | --- |
| Opening | `0 / 1000px` | `0 / 844px` |
| Project | `1000 / 5254.67px` | `844 / 3854.14px` |
| Event | `6254.67 / 2471.81px` | `4698.14 / 3814.70px` |
| Products | `8726.48 / 5778.72px` | `8512.84 / 5759.17px` |
| Support message | `14505.20 / 1102.83px` | `14272.02 / 1178.34px` |
| Footer | `15608.03 / 926.69px` | `15450.36 / 769.39px` |

The mobile event section grows because its grid becomes a list, while some large desktop compositions shrink. A similar total page height does not mean the mobile layout is a uniformly scaled desktop page.

### Desktop Composition

- Keep the opening full height with a centered identity group and peripheral controls.
- Reserve space for the menu at the left edge.
- Use different frames for editorial columns, campaign images, and event tiles.
- Maintain the project's left-heading/right-copy relationship.
- Let the documentary photograph extend farther toward the viewport edge than ordinary text.
- Keep the footer social block beside the organization and partner information.

### Mobile Composition

- Use a white top header, approximately 76px high at the observed size.
- Move the menu to the top left and retain the compact wordmark at the top right.
- Expand the opening artwork to approximately 88% of viewport width.
- Move `SCROLL DOWN` to the lower-left edge.
- Use approximately `28.26px` side padding for most text at 390px width.
- Stack project content and event tiles into one column.
- Center purchase actions while keeping the brand text left aligned.
- Stack the footer, preserve logo aspect ratios, and allow the organizer's name to wrap.

**Unverified:** the original breakpoint, safe-area handling, image focal-point adjustments on mobile, and all intermediate-width rules. The Quick Start uses a recommended 768px breakpoint and endpoint-derived proportions; it is not recovered source CSS.

## Do’s and Don’ts

### Do

- Build the page around exact white and black interface colors.
- Give the illustrated wordmark enough empty space to function as the opening's main event.
- Keep Japanese editorial copy bold and retain its unusually generous line height.
- Use Oswald for the verified condensed English roles and Lato for the scroll instruction.
- Preserve the artwork's serif lettering rather than approximating it with ordinary heading text.
- Keep square image tiles and rectangular actions.
- Preserve the desktop offsets between text, event, campaign, and photo frames.
- Turn the event grid into one mobile column while retaining large, readable artwork.
- Keep participation, campaign, and shop actions near their relevant content.
- Distinguish organizer information, project cooperation, and actual production credits.

### Don't

- Don't replace the long project structure with a generic conversion funnel.
- Don't place a large colored CTA over the opening artwork.
- Don't extend the character's red hair into a site-wide accent system.
- Don't treat the Swiper blue variable or image-anchor default blue as visible brand colors.
- Don't use rounded white cards, soft shadows, or gray panels to separate every block.
- Don't make all Japanese text light and compact; weight and breathing room are central to this design.
- Don't apply one centered maximum-width container to every desktop section.
- Don't squeeze the mobile event index into tiny two-column thumbnails.
- Don't crop partner marks to matching squares or infer web-production roles from their presence.
- Don't claim a specific loading, scroll-progress, hover, or carousel mechanism without interaction evidence.

## Recommended Implementation Additions

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

- Use a real button for the menu, with an accessible name, `aria-expanded`, and an associated navigation region. Manage focus and Escape behavior if it becomes a modal panel.
- Give linked artworks useful accessible names. Empty extracted link text does not prove missing alternatives, but those alternatives should be verified.
- Retain the visually large menu target. Expand the small corner-arrow target to at least `44 × 44px` while keeping the arrow itself small.
- Provide a visible black focus outline with enough offset to remain clear on artwork and buttons.
- Let anchor destinations account for the mobile header so section headings remain visible after navigation.
- Keep reveal content visible by default; enable hidden pre-reveal states only after the enhancement script is ready.
- Respect reduced-motion preferences and provide controls for any automatically advancing gallery.
- If `もっと見る` inserts events, announce the result and keep keyboard focus predictable.
- Consider a 14px minimum for mobile collection descriptions. The measured original uses 12px; increasing it is an accessibility-oriented adaptation, not a faithful measurement.
- Test the long organizer name and hero statement at narrow widths and increased text size instead of forcing them onto one line.

## Agent Prompt Guide

### Quick Color Reference

- Canvas and header: `#FFFFFF`.
- Text, controls, and principal artwork: `#000000`.
- Standard action: black fill, white label, square corners.
- Reversed action: white fill, black label.
- Red: confined to the identity illustration; exact value not supplied.
- Photography: natural color, without an added universal tint.
- Separation: white space and alignment, not shadows or panel backgrounds.

### Overall Prompt

“Create a long Japanese project website for a community basketball initiative. Use a white canvas, black typography, a large custom illustrated wordmark, and extensive empty space in a full-height opening. Pair bold Japanese gothic text with condensed Oswald English labels and a small Lato scroll instruction. On desktop, place a two-stroke menu at the left midpoint and a compact wordmark at the upper right in interior views. Build offset editorial columns, broad documentary photo sections, a three-column square event grid, compact brand descriptions with rectangular purchase links, and a two-column social and organization footer. On mobile, move the menu into a white top header, expand the hero artwork, stack the content and event tiles, and wrap partner marks naturally. Preserve the separation between observed appearance and any newly designed interaction behavior.”

### Example Component Prompts

1. **Opening:** “A 1440 × 1000 white opening with a roughly 667px-wide illustrated black wordmark centered in generous space. Place a bold, tracked Japanese statement below it. Keep a two-line menu at the left midpoint and a vertical scroll instruction near the right edge. Use original project artwork rather than substituting a stock serif font.”
2. **Project introduction:** “An offset desktop editorial layout with a bilingual section heading on the left and a 527px-wide right column. Set the Japanese thematic heading at 50px with 1.3 line height and 0.12em tracking, followed by bold 18px text at 2 line height. Stack the content within a 333.5px column on a 390px phone.”
3. **Event index:** “Nine square image links in three desktop columns, with approximately 33px horizontal and 32px vertical gaps. Use a centered black rectangular more button 52px below the grid. At 390px width, make each tile about 333.5px square and stack them with 28px gaps.”
4. **Documentary image:** “A natural-color, low-angle photograph of a gloved hand using litter tongs on an outdoor basketball court. Preserve court texture, equipment, shoes, and shallow background focus. Display it as a large square-cornered image with broad white breathing room and no headline overlay.”
5. **Footer:** “A white footer with a large condensed hashtag and Instagram link centered in the left desktop column. Stack organizer information, individually proportioned monochrome partner marks, media-partner artwork, and legal links on the right. On mobile, place the social block above the left-aligned organization information.”

## Quick Start

### CSS Custom Properties

This is a recommended implementation scaffold, not extracted source code. It combines measured endpoint dimensions with practical CSS rules. The percentage-based frames reproduce the 1440px and 390px anchors approximately; their behavior at other widths needs testing.

Load Oswald and Lato separately if using the observed families. Supply the actual identity, photography, and partner artwork through image elements. No original asset filenames are assumed here.

Use `.hero > .hero-inner` for the main artwork and statement, `.project-intro` for the heading/copy split, `.event-grid` for the event links, and `.footer-shell` for the two footer columns. The navigation controller, gallery behavior, more-button behavior, and corner-control state require separate implementation.

```css
:root {
  /* Measured interface colors */
  --color-paper: #fff;
  --color-ink: #000;
  --color-on-ink: #fff;

  /* Observed font-family declarations */
  --font-body: '游ゴシック体', YuGothic, 'Yu Gothic Medium',
    '游ゴシック', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --font-condensed: 'Oswald', sans-serif;
  --font-utility: 'Lato', sans-serif;
  --weight-body: 700;
  --tracking-editorial: 0.12em;

  /* Endpoint-derived frames; these are adaptation formulas */
  --frame-left: 13.1771vw;
  --frame-right: 10.2486vw;
  --event-left: 14.8600vw;
  --column-gap: 3.369vw;
  --mobile-inset: 7.2464vw;

  --text-hero: 26px;
  --text-lead: 50px;
  --text-intro: 18px;
  --text-body: 14px;
  --text-brand: 20px;
  --text-brand-copy: 12px;
  --text-social: 40px;
  --radius-flat: 0;

  /* Measured transition durations */
  --motion-color: 300ms;
  --motion-reveal: 400ms ease-in-out;
  --motion-corner: 600ms;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended positioning to match the supplied captures */
.site-brand {
  position: fixed;
  z-index: 30;
  top: 42.16px;
  right: 52.71px;
  width: 131.77px;
}

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

/* Apply this state only when the opening is current. */
.site-brand[data-hero-state='true'] {
  visibility: hidden;
}

.menu-toggle {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: 3.2943vw;
  width: 52.7px;
  height: 52.7px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu-toggle::before {
  top: calc(50% - 5px);
}

.menu-toggle::after {
  top: calc(50% + 3px);
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  background: var(--color-paper);
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: 32px;
  width: 100%;
  transform: translateY(14px);
}

.hero-art {
  width: min(46.32vw, 800px);
  height: auto;
}

.hero-statement {
  max-width: 95vw;
  margin: 0;
  font-size: var(--text-hero);
  line-height: 1.4;
  letter-spacing: var(--tracking-editorial);
  text-align: center;
}

.scroll-hint {
  position: absolute;
  top: 50%;
  right: 4.684vw;
  margin: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-utility);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
}

.editorial-frame {
  margin-inline: var(--frame-left) var(--frame-right);
}

.campaign-frame {
  width: 70.28%;
  margin-inline: auto;
}

.section {
  padding-block: 85.39px 94.88px;
}

.project-section {
  padding-top: 118.07px;
}

.project-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--column-gap);
}

/* Recommended English heading scale: child size was not supplied. */
.section-heading-en {
  display: block;
  font-family: var(--font-condensed);
  font-size: clamp(44px, 6.11vw, 88px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.section-heading-ja {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4;
}

.project-lead {
  margin: 0 0 38px;
  font-size: clamp(36px, 3.4722vw, var(--text-lead));
  line-height: 1.3;
  letter-spacing: var(--tracking-editorial);
}

.project-copy {
  margin: 0;
  font-size: var(--text-intro);
  line-height: 2;
  letter-spacing: var(--tracking-editorial);
}

.editorial-copy {
  font-size: var(--text-body);
  line-height: 2;
}

.campaign-copy {
  font-size: 18px;
  line-height: 2.2;
}

/* Recommended framing; the original image ratio is unknown. */
.photo-interlude {
  margin: 100px 0 100px 10.2486vw;
}

.photo-interlude img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.event-frame {
  margin-inline: var(--event-left) var(--frame-right);
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 33.2px;
}

.event-tile {
  display: block;
  aspect-ratio: 1;
}

.event-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-flat);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52.7px;
  padding: 12px 24px;
  color: var(--color-on-ink);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-flat);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-color),
    color var(--motion-color);
}

/* Recommended hover endpoint; original endpoint was not captured. */
@media (hover: hover) {
  .action:hover {
    color: var(--color-ink);
    background: var(--color-paper);
  }
}

.more-action {
  display: flex;
  width: min(337.33px, 100%);
  min-height: 59.8px;
  margin: 52px auto 0;
  font-size: 17px;
  line-height: 1.4;
}

.brand-copy {
  max-width: 358.41px;
}

.brand-name {
  margin: 0 0 5.27px;
  font-family: var(--font-condensed);
  font-size: var(--text-brand);
  font-weight: 700;
  line-height: 1.2;
}

.brand-description {
  margin: 0;
  font-size: var(--text-brand-copy);
  line-height: 1.9;
}

.buy-action {
  width: 231.91px;
  margin-top: 23.19px;
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.support-message {
  width: 58.345vw;
  margin-left: 22.2917vw;
  font-size: 16px;
  line-height: 2.2;
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.928vw;
  padding: 171.83px 10.2486vw 92.77px;
  font-size: 14px;
  line-height: 1.4;
}

.footer-social {
  align-self: center;
  text-align: center;
}

.footer-hashtag {
  margin: 0 0 30px;
  font-family: var(--font-condensed);
  font-size: var(--text-social);
  font-weight: 700;
  line-height: 1.4;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px 25.3px;
}

/* Set --mark-width separately to preserve each logo's proportions. */
.partner-logos img {
  width: var(--mark-width, 80px);
  height: auto;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 100px;
}

/* Recommended static arc; no unverified progress logic is implied. */
.corner-control {
  position: fixed;
  z-index: 30;
  right: 4.1vw;
  bottom: 42px;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  transition: opacity var(--motion-corner);
}

.corner-control::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 7px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 48rem) {
  :root {
    --text-hero: 15px;
    --text-lead: 36px;
    --text-intro: 13.8px;
    --text-social: 30px;
  }

  .site-header {
    position: fixed;
    z-index: 25;
    inset: 0 0 auto;
    height: 76.47px;
    background: var(--color-paper);
  }

  .site-brand,
  .site-brand[data-hero-state='true'] {
    top: 23.55px;
    right: 5.313vw;
    width: 94.19px;
    visibility: visible;
  }

  .menu-toggle {
    top: 14.59px;
    left: var(--mobile-inset);
    width: 47.09px;
    height: 47.09px;
    transform: none;
  }

  .hero-inner {
    gap: 16px;
    transform: translateY(6px);
  }

  .hero-art {
    width: 88.2vw;
  }

  .scroll-hint {
    top: auto;
    right: auto;
    bottom: 36.2px;
    left: 4.828vw;
    transform: none;
    font-size: 10px;
  }

  .editorial-frame,
  .event-frame,
  .campaign-frame {
    width: auto;
    margin-inline: var(--mobile-inset);
  }

  .section,
  .project-section {
    padding-block: 65.94px 0;
  }

  .project-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 65.94px;
  }

  .section-heading-en {
    font-size: 44px;
  }

  .project-lead {
    margin-bottom: 41px;
    font-size: 36px;
  }

  .campaign-copy {
    font-size: 16px;
  }

  /* Recommended mobile photo treatment; no mobile photo was supplied. */
  .photo-interlude {
    margin: 66px 0;
  }

  .event-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28.25px;
  }

  .more-action {
    width: min(249.59px, 100%);
    min-height: 57px;
    font-size: 15px;
  }

  .brand-copy {
    max-width: none;
  }

  .buy-action {
    display: flex;
    width: min(207.23px, 100%);
    min-height: 47.09px;
    margin: 23.55px auto 0;
  }

  .support-message {
    width: auto;
    margin-inline: var(--mobile-inset);
    font-size: 14px;
  }

  .footer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 56.52px var(--mobile-inset) 28.26px;
  }

  .footer-hashtag {
    margin-bottom: 20px;
  }

  .social-link {
    gap: 8px;
  }

  .partner-logos {
    gap: 28px 16.95px;
  }

  .partner-logos img {
    width: calc(var(--mark-width, 80px) * 0.8937);
  }

  .legal-links {
    margin-top: 84px;
  }

  .corner-control {
    right: 20px;
    bottom: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action,
  .corner-control,
  .reveal {
    transition: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}
```

The hero offset, arc construction, section-title child scale, image-fit rule, and hover endpoint above are explicit adaptation choices. The code does not establish the original implementation of those details. In particular, do not hardcode sampled document heights, gallery counters, or the duration of a startup screen.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-paper: #fff;
  --color-ink: #000;
  --color-on-ink: #fff;

  --font-editorial: var(--font-body);
  --font-display: var(--font-condensed);
  --font-caption: var(--font-utility);

  --text-hero-copy: var(--text-hero);
  --text-project-lead: var(--text-lead);
  --text-project-copy: var(--text-intro);
  --text-brand-title: var(--text-brand);
  --text-brand-description: var(--text-brand-copy);
  --text-footer-social: var(--text-social);

  --spacing-phone-inset: var(--mobile-inset);
  --spacing-event-gap: 32px;
  --spacing-action-gap: 52px;
  --radius-flat: 0px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [https://pickupplayground.jp/](https://pickupplayground.jp/). The supplied browser record reports HTTP `200` and the same original and final URL.
- **Capture timestamp:** October 2, 2026, `09:56:00.462 UTC`, equivalent to `18:56:00.462 JST`.
- **Desktop evidence:** `1440 × 1000` CSS-pixel opening, interior-photo, and footer captures; rendered DOM text, links, computed styles, and element bounds; document height approximately `16,534.72px`.
- **Mobile evidence:** `390 × 844` CSS-pixel opening and footer captures; rendered DOM text, links, computed styles, and element bounds; document height approximately `16,219.75px`.
- **Capture process:** the supplied browser notes describe an initial observation of at least five seconds, document-load checks, finite-animation waiting, sampled layout/text stability, and visible-image decoding within bounded waits. Perpetual animations were paused during readiness checks and resumed. SharedWorkers and service workers were disabled.
- **Inspection limits:** no independent browsing or command execution was performed for this reference. Menu opening, hover endpoints, event expansion, gallery manipulation, form submission, external destinations, and return-to-top activation were not tested. Exact asset URLs, full stylesheets, font-file loading, original responsive formulas, and motion recordings were not supplied.

This reference describes the current page represented by the supplied evidence. Measurements, visual estimates, and implementation recommendations are labeled separately; older dates appearing within the site's content are not used to reconstruct a historical design.