PLANT｜蛍光グリーンと作品主体のポートフォリオ

# PLANT — Style Reference

> A full-screen portfolio framed by white plaques, black typography, and electric-green hairlines.

**Original URL:** [uekishun.com](https://uekishun.com/)
**Final URL:** [uekishun.com](https://uekishun.com/)
**Theme:** light interface chrome with project-specific imagery
**Inspected:** October 2, 2026, Japan Standard Time; supplied observation retrieved October 1, 2026 at 21:23:57.985 UTC
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current homepage in its initial Single view, showing work 122, DeNA TechCon 2025; visible navigation, project artwork, and project-information link. Additional navigation and category controls are documented only to the extent supported by the rendered DOM. Open menus, alternate views, and linked pages were not inspected.

PLANT presents its work through a viewport-filling portfolio viewer. The featured project occupies roughly 88% of the screen height, while a compact white strip identifies the work below. A square logo sits over the image at the upper left. On desktop, a narrow white toolbar balances it at the upper right. Bright green borders, icons, and catalog numerals make the surrounding interface recognizable without competing with the project.

The current project introduces soft pink, mint, pale blue, yellow, and navy through a large folded circular composition. Those colors belong to the work being displayed. The reusable site language is more restrained: white surfaces, black regular-weight sans-serif text, square corners, and precise green rules. On mobile, the background becomes a close crop while the event lettering remains readable; the project number moves from a separate left column to the lower right of the information strip.

## How to Read This Reference

- **Measured** values come from the supplied rendered element rectangles and computed styles. They use ordinary CSS pixels; the root size is 16px.
- **Visual estimates** describe screenshot geometry or artwork colors without a corresponding computed value. Estimated hex values are reproduction aids, not sampled source colors.
- **Calculated** values are derived from supplied measurements, such as the proportion of the viewport occupied by the project stage.
- **Recommended** values and behaviors belong to a new implementation. The CSS below is an adaptation, not recovered source code.
- **Token names** are descriptive aliases. The only supplied original custom property is `--swiper-theme-color`; it does not establish the visible interface palette.
- **DOM presence does not establish visibility.** Several menu elements have zero-height rectangles. Desktop category rows have reported geometry but do not appear in the screenshots. Their open-state appearance is unverified.
- The large event lettering is visible in the artwork but absent from the supplied page-text extraction. Its font, asset format, and rendering method are unknown.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| Electric Green | `#00ff00` | `--plant-signal` | Measured on the active Single control and work number; visually used for outlines, rules, icons, and arrows |
| Surface White | `#ffffff` | `--plant-paper` | Measured project-information background; visually matches the logo plaque and desktop toolbar |
| Interface Black | `#000000` | `--plant-ink` | Measured navigation, title, category, and year text |
| Utility Gray | `#999999` | `--plant-muted` | Measured on DOM-only View Mode and Category captions; not visible in the closed-menu screenshots |

The green is fully saturated RGB green. It is used in very small areas: a one-pixel boundary, a thin arrow, an outlined icon, or a catalog number. Broad green surfaces are not part of the visible interface chrome.

Some inactive mode buttons report white computed `color`, although their visible icons have green outlines. Button text color alone therefore does not describe the icon rendering. Preserve the visible distinction between a filled green Single symbol and outlined alternatives; inspect or author the icon fills and strokes explicitly.

### Current Project Palette

These are approximate visual references for the DeNA TechCon artwork, not global UI tokens.

| Visual area | Approximate value | Treatment |
| --- | --- | --- |
| Pale blue field and circular opening | `#eaf1fb` | Nearly uniform, cool background |
| Event lettering | `#19194d` | Dark navy with thin, crisp strokes |
| Pink ribbon folds | `#f7bfd0` | Soft gradients with pale highlights |
| Mint and green outer bands | `#65b79b` | Gradients ranging into darker teal |
| Warm yellow highlights | `#ffe5ae` | Small warm transitions within the folded form |

Keep these project colors inside the media treatment. They should not automatically recolor navigation or become permanent category colors.

The supplied custom property `--swiper-theme-color: #007aff` is a source declaration, but no corresponding blue control is visible. Do not promote it to a brand token or infer a particular navigation behavior from its name.

## Tokens — Typography

### Latin Interface — Faktum-Regular

- **Computed family:** `Faktum-Regular, -apple-system, sans-serif`.
- **Observed roles:** desktop navigation, project title, project category, year, work number, and menu text.
- **Weight:** `400` throughout the sampled interface.
- **Tracking:** `normal`.
- **Character:** open, geometric, and restrained. Hierarchy comes from size and position rather than bold weight.
- **Limitation:** the computed declaration is supplied; font-file URLs and successful font loading were not independently inspected.

Use the named font only when an appropriate font asset is available. The supplied fallback stack remains usable, but its metrics may change the toolbar width and title wrapping.

### Japanese and General Body Stack

The body declares `yu-gothic-pr6n`, followed by Yu Gothic variants, Hiragino Kaku Gothic Pro, `-apple-system`, and `sans-serif`. Its measured default is `16px / 24px`, weight `400`.

Most text visible in the captured work viewer uses the explicit Faktum stack instead. The body declaration should not be used to identify the lettering in the project image or the logo.

### Type Scale

| Role | Desktop size / line height | Mobile size / line height | Evidence |
| --- | --- | --- | --- |
| General body | `16px / 24px` | `16px / 24px` | Computed |
| Visible ABOUT / CONTACT links | `16px / 20px` | Not visible | Computed desktop links |
| Project title | `24px / 36px` | `16px / 24px` | Computed H3 |
| Project category | `12px / 18px` | `12px / 18px` | Computed |
| Project year | `12px / 18px` | `12px / 18px` | Computed |
| Work number | `32px / 36px` | `20px / 26px` | Computed |
| Menu navigation | `24px / 30px` | `24px / 30px` | DOM-only, zero-height in the captured state |
| View Mode / Category captions | `12px / 15px` | `12px / 15px` | DOM-only |
| Text mode controls | `16px / 24px` | `16px / 24px` | DOM-only |
| Category names | `16px / 20px` in desktop category block | `14px / 20px` in mobile menu block | DOM evidence; open state unverified |

### Logo and Artwork Lettering

The logo stacks `PLA` above `NT`, with a small green sprout-like detail beside the lower line. The observed logo container dimensions do not reveal the lettering font or whether the mark is an image, SVG, or another implementation.

The project image contains the event name, the large word `UTILIZATION`, and `02.05. Wed`. These should be treated as project-specific artwork. Do not turn the large word into the site's universal heading style or assign it the interface font without additional evidence.

Visually, the complete event-lettering group spans approximately 800px on desktop and 358px on mobile. Those are estimated artwork bounds, not measured font sizes.

## Tokens — Spacing & Shapes

**Density:** sparse overlay controls surrounding a large image, with compact metadata below.
**Geometry:** square surfaces and thin rules; no visible rounded-card or shadow system.

### Spacing Scale

The evidence suggests several repeated distances, but does not expose a complete original spacing-token system.

| Use | Value | Evidence |
| --- | --- | --- |
| Fine outline or divider | Approximately `1px` | Screenshot estimate |
| Title-to-category gap | `4px` | Calculated from measured line boxes at both viewports |
| Desktop logo outer inset | `20px` | Measured |
| Gap between desktop mode-button boxes | `20px` | Calculated from 38px pitch and 18px width |
| Mobile logo inset | `24px` | Measured |
| Mobile metadata side and bottom padding | `24px` | Computed |
| Desktop text-link gap | `24px` | Calculated from measured link bounds |
| Desktop toolbar outer top/right inset | Approximately `24px` | Screenshot and element-position evidence |
| Desktop number-column width | `128px` | Measured |
| Divider-to-information offset | Approximately `45px` | Calculated from x = 128 and title x = 173 |

### Border Radius

| Element | Treatment |
| --- | --- |
| Logo plaque | Square; sampled link radius `0px` |
| Desktop toolbar | Visually square |
| Project-information link | Measured radius `0px` |
| Media stage | Rectangular crop without rounded corners |
| Icons | Small geometric shapes; circles occur only as icon details |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Status |
| --- | --- | --- | --- |
| Main and document height | `1000px` | `844px` | Measured |
| Header wrapper | `1440 × 0px` | `390 × 0px` | Measured; visible controls overlay the work |
| Logo link | `100 × 100px` at `(20, 20)` | `60 × 60px` at `(24, 24)` | Measured |
| Desktop toolbar | About `453 × 40px` near `(963, 24)` | Not visible | Visual outer bounds |
| Desktop mode buttons | Each `18 × 40px` | Not visible | Measured |
| Mobile menu button | Not visible | `40 × 24px` at `(326, 18)` | Measured |
| Area above metadata link | `881px` high | `743px` high | Calculated from link position; includes the separating rule |
| Project-information link | `(0, 881)`, `1440 × 119px` | `(0, 743)`, `390 × 101px` | Measured |
| Title line box | `(173, 902.5)`, height `36px` | `(24, 756)`, height `24px` | Measured |
| Work-number box | `(0, 922.5)`, `128 × 36px` | `(326, 794)`, `40 × 26px` | Measured |
| Desktop vertical divider | Near x = `128`, about `80px` high | Absent | Visual estimate |
| Right arrow | About `40px` wide | About `24px` wide | Visual estimate |

The page is not a conventional long homepage in the supplied state. Its document height equals its viewport height at both sizes. This does not establish how other works are reached or how alternate modes scroll.

## Components

### Full-Viewport Works Viewer

**Role:** makes the selected project the primary browsing surface.

The viewer consists of an image stage followed immediately by a white project-information link. Navigation overlays the upper image area instead of occupying a separate horizontal header band. The measured header wrapper has zero height, consistent with controls positioned outside normal header flow.

The visible stage occupies about 88.1% of desktop height and 88.0% of mobile height when its bottom rule is included. The remaining space belongs to the work label. No introductory headline, service summary, or conversion panel is visible in this state.

Absolute versus fixed positioning is not exposed by the supplied style fields. A new implementation can anchor controls to the viewer, but should not claim that persistent behavior across scrolling was observed.

### Logo Plaque

**Role:** compact identity and a home link.

A white square with a fine green outline, black stacked lettering, and a small green accent. It measures 100px square on desktop and 60px square on mobile. The desktop top/left inset is 20px; mobile uses 24px.

The mark remains visually separate from the artwork because its white background is opaque. It has no visible shadow or rounded corners. Its link destination is the homepage.

Use an authorized logo asset when available. Replacing the mark with ordinary text may approximate the name but will not reproduce its internal spacing or sprout detail.

### Desktop Navigation Rail

**Role:** combines work-view controls with site navigation.

From left to right, the rail contains:

1. A filled square associated with Single view.
2. A list symbol made from horizontal rows.
3. A small grid symbol.
4. A slider-like category/filter symbol.
5. A thin vertical green separator.
6. ABOUT and CONTACT text links.

The rail is approximately 453px wide and 40px high, with a white surface and a one-pixel green outline. Each sampled icon button has an 18px-wide, 40px-high box; neighboring button boxes are separated by 20px. Text links use Faktum-Regular at `16px / 20px` and are separated by 24px.

The first icon is visibly filled green. The list and grid controls use green outlines with white interiors. The fourth symbol suggests filtering and sits alongside category data in the DOM, but its action was not exercised.

ABOUT points to `/about`. CONTACT has a `/contact` destination with a snapshot-specific query parameter. Neither destination was opened during the supplied inspection.

### Mobile Menu Trigger

**Role:** provides a compact navigation affordance in place of the desktop rail.

The visible symbol consists of two thin green horizontal lines, approximately 40px wide and 8px apart. It appears directly on the artwork without a white enclosing plaque. The measured button is at x = 326, y = 18, with a 40 × 24px box.

The menu was closed in both mobile captures. The DOM contains navigation, mode controls, and categories, but no opened-menu geometry or transition can be established from these images.

For a new implementation, retain the slender visible symbol while enlarging its interactive area. The Quick Start demonstrates this as an explicitly recommended adaptation.

### Project Media Stage

**Role:** displays the selected project's own visual identity.

The current artwork uses a large circular, folded ribbon form with a pale blue opening. Pink bands dominate the upper and inner regions; mint, green, and yellow appear around the perimeter; cool blue-gray folds occupy the lower area. Soft tonal transitions suggest depth without introducing shadows into the surrounding interface.

Dark navy event lettering sits across the center. The large `UTILIZATION` line supplies the strongest graphic emphasis, with the event name above and date below toward the right.

On desktop, much of the outer ring is visible across the width, although the composition extends beyond the top and bottom stage edges. On mobile, the outer ring is mostly outside the narrow crop, while the pale center remains prominent.

The readable mobile lettering is an important constraint. Uniformly applying `object-fit: cover` to a single desktop composite would enlarge and crop that lettering differently. Use either art-directed desktop/mobile assets or separate backdrop and lettering layers. The original technique is not exposed in the evidence.

### Project-Information Link

**Role:** identifies the selected work and provides access to its detail page.

The entire white strip is an anchor to [DeNA TechCon 2025](https://uekishun.com/works/techcon2025). The arrow therefore belongs to the detail-link affordance; it should not be labeled as a next-slide control based on appearance alone.

Desktop anatomy:

- A 128px left region centers the green work number `122`.
- A short vertical green rule separates that region from the text.
- The information begins at x = 173px.
- The title uses `24px / 36px` regular type.
- A 4px gap precedes `Graphic / Website` at `12px / 18px`.
- The year `2025` follows at the same small size and line height.
- A thin right-pointing green arrow sits in the far-right region.

The strip begins below the stage at y = 881px and is 119px high. Its top separating rule is visible immediately above the anchor.

Mobile anatomy:

- The title and two metadata lines begin 24px from the left.
- The title reduces to `16px / 24px`; category and year remain `12px / 18px`.
- The arrow moves to the upper-right portion of the strip.
- The number reduces to `20px / 26px` and sits below the arrow.
- The vertical divider disappears.
- The strip uses 24px side and bottom padding and measures 101px high.

The DOM extraction repeats `122`, but each screenshot shows one visible number. Do not reproduce duplicated visible numerals or infer a number animation from the extracted string.

### View Mode and Category Controls

**Role:** organize a multi-project portfolio.

The DOM names three modes: Single, List, and Grid. Single is the captured state and has the green active color. The layouts, transitions, URL behavior, and selection persistence of List and Grid were not tested.

The mobile menu structure includes ABOUT, CONTACT, WORKS, a View Mode group, and a Category group. Those elements have zero-height rectangles in the closed state.

The supplied catalog labels and counts are:

| Category | Count |
| --- | --- |
| All | 122 |
| Graphic | 74 |
| Website | 40 |
| Logo ･ Identity | 50 |
| Exhibition | 4 |
| UI | 6 |
| Branding | 15 |
| Editorial | 6 |
| Package | 2 |
| Motion | 9 |

These values describe the captured catalog, not permanent interface constants. Do not assume the categories are mutually exclusive.

The desktop category block reports 272px-wide rows, 20px-high line boxes, and a 36px vertical pitch. However, it is not visible in the desktop screenshots. These measurements can inform a future menu implementation, but do not establish its backdrop, animation, or visible placement when opened.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | Practical interpretation |
| --- | --- | --- |
| Mode-control color transitions | Computed `0.3s cubic-bezier(0.19, 1, 0.22, 1)` for background color, border color, color, fill, and stroke | Reuse this timing for mode-state color changes |
| Sampled element animations | Reported as `none` | No keyframe animation is established for those sampled elements |
| Other transition fields | Many report only `all` | No useful duration or visible effect can be inferred from that field alone |
| Featured-work change | No changed work appears across the supplied original-page captures | Autoplay, wheel navigation, dragging, and swiping remain unverified |
| Menu opening | No open-state capture | Entry direction, duration, overlay treatment, and focus behavior are unknown |
| Category selection | Labels and counts are present in the DOM | Filtering results and selected-state behavior are unverified |
| Project detail navigation | A real detail-page anchor is supplied | Link affordance is established; destination rendering was not inspected |

The recorded timing curve reaches its final state quickly and settles gently. It is suitable for small color changes, not evidence for large animated page movements.

The capture procedure waited for finite visible motion and temporarily paused perpetual animation during readiness checks before resuming it. Repeated still frames therefore do not prove that the original site or its media is animation-free.

For a faithful extension, implement the confirmed color-transition timing first. Add slideshow motion, menu animation, or scroll effects only as explicit new design decisions or after further observation.

## Surfaces

| Layer | Appearance | Purpose |
| --- | --- | --- |
| Project stage | Full-width project imagery | Provides nearly all visual richness |
| Logo plaque | Opaque white square, fine green outline | Keeps identity legible over varying imagery |
| Desktop navigation | Opaque white rectangle, fine green outline | Makes small controls readable over the work |
| Information strip | White, black text, green accents | Separates catalog metadata from project graphics |
| Rules and icon strokes | Approximately one-pixel green lines | Establishes structure with minimal visual mass |
| Open-menu surface | Not observed | No supported recommendation about the original backdrop or elevation |

The visible chrome has no drop shadows, glass blur, rounded containers, or layered card elevation. Its separation comes from white surfaces and fine outlines. Soft shading belongs to the project artwork itself.

## Imagery

The current work has a smooth, dimensional appearance: broad translucent-looking folds, pastel highlights, and a large circular opening. Its palette and lettering are sufficiently strong to occupy the entire stage without explanatory copy layered over the site interface.

The desktop crop shows the relationship between the outer green ring and inner pink structure. The mobile crop emphasizes the central opening and the lower folds. Both retain the event name, principal word, and date inside the available width.

The image should remain sharp and smoothly rendered. Pixelated scaling, artificial halftone, or a generic CSS gradient would change this project's character. The site's other works may have different visual languages; the surrounding chrome should be able to accommodate them without inheriting their colors or textures.

### Observed Asset References

No image, SVG, video, or font-file URLs were included in the supplied evidence. The known work-detail URL is a page destination, not a media asset.

| Asset or visual | What is established | What remains unknown |
| --- | --- | --- |
| PLANT logo | Appearance, link destination, desktop/mobile container sizes | File path, format, intrinsic dimensions |
| DeNA TechCon project artwork | Visible composition and responsive appearance | File path, format, source resolution, animation status |
| Event lettering | Visible words and approximate bounds | Font, vector/raster delivery, relationship to backdrop |
| Mode and filter icons | Visible shapes and control rectangles | SVG paths or other source implementation |
| Faktum-Regular | Computed family declaration | Font-file URL and independently verified loading |

Use authorized assets when available. If recreating only the interface system, supply new project artwork with equivalent focal-point and mobile-legibility requirements rather than pretending a generic ring is the original asset.

## Layout & Responsive Behavior

### Desktop Composition

At 1440 × 1000, the main composition runs edge to edge. The 100px logo plaque sits at `(20, 20)`, while the toolbar uses an approximately 24px top/right inset. This slight asymmetry is visible and should not be normalized automatically.

The media extends to the green separator near y = 880px. Below it, the project-information link occupies the remaining 119px. Text is grouped toward the left but leaves a very large open white region between the title and the right arrow.

The number has its own 128px region and vertical divider. The information column begins 45px beyond that division. The title's measured content box ends at x = 1312px, leaving a 128px region to the right.

### Mobile Composition

At 390 × 844, the logo becomes 60px square and moves to a consistent 24px inset. The desktop rail disappears, and a two-line menu symbol appears at the upper right.

The stage still occupies about 88% of the viewport height. Its artwork is cropped laterally, but its event lettering is reduced to fit between approximately 16px side margins. The estimated lettering group is centered slightly below the stage's vertical midpoint.

The information strip changes its internal organization instead of merely shrinking. Text occupies the left; arrow and number stack on the right. The left number column and divider are removed, while the category and year remain at their desktop size.

### Responsive Limits

Only two viewport sizes were supplied. The original breakpoint, intermediate tablet layout, landscape behavior, browser-toolbar response, and safe-area handling cannot be established.

For a new implementation:

- Choose a breakpoint based on whether the desktop rail fits beside the logo. The `767px` breakpoint below is a recommendation, not an observed source value.
- Use a viewport-height strategy deliberately. The Quick Start uses `100svh` for stable mobile framing; the original viewport-unit choice is unknown.
- Permit the information strip to grow when titles wrap or text is enlarged.
- Preserve readable artwork lettering through art direction rather than relying on one universal crop.
- Test shorter landscape screens before locking the viewer to a fixed height.

## Do’s and Don’ts

### Do

- Keep the portfolio work visually dominant, occupying roughly seven eighths of the captured viewport height.
- Preserve exact interface green `#00ff00`, white surfaces, and black regular-weight text.
- Use fine green outlines and separators with square corners.
- Keep the logo plaque and desktop toolbar opaque against changing project imagery.
- Maintain the desktop number column, title offset, and generous empty metadata space.
- On mobile, move the number beneath the arrow and remove the left divider.
- Keep category and year text at `12px / 18px` in the observed scale.
- Treat event lettering and project colors as work-specific content.
- Preserve readable mobile lettering with appropriate assets or separate composition layers.
- Distinguish DOM-supported controls from visually inspected states.

### Don’t

- Don’t replace the captured portfolio viewer with a generic hero, feature grid, and large conversion buttons.
- Don’t apply the featured project's pastel palette to all site chrome.
- Don’t add rounded cards, soft UI shadows, or glass surfaces.
- Don’t replace the light regular typography with heavy display headings.
- Don’t interpret the detail-link arrow as a carousel-next button.
- Don’t duplicate the visible work number because the text extraction repeats it.
- Don’t assume hidden category rows were visible in the captured state.
- Don’t claim autoplay, swipe navigation, sticky behavior, or animated menu transitions without evidence.
- Don’t use a single desktop cover crop if it cuts off essential mobile artwork lettering.
- Don’t invent media paths, font sources, or production credits.

## Recommended Implementation Additions

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

- Give icon-only controls accessible names such as Single view, List view, Grid view, and Filter works. Expose their selected or expanded states programmatically.
- Preserve the thin visible mobile menu symbol while providing at least a 44 × 44px interaction area.
- Use black focus outlines on white surfaces. Pure green against white has a calculated contrast ratio of approximately 1.37:1, so it should not be the sole indicator for essential control boundaries or text.
- Keep the characteristic green number, but repeat its meaning in the accessible link name or provide an accessible contrast treatment when it conveys necessary information.
- If the mobile menu is implemented as a modal, manage focus, support Escape, and make the background inert while it is open.
- Use buttons for in-place mode and filter actions, and anchors for actual navigation. The supplied category entries do not expose meaningful destination URLs.
- Provide useful alternative text for project imagery and an accessible project-link name containing the title, disciplines, and year.
- Respect reduced-motion preferences for interface transitions and any newly added project animation.
- Allow title wrapping, browser zoom, and safe-area insets without hiding the information strip.
- Load appropriately sized artwork for each viewport and reserve the stage dimensions to avoid layout movement.

## Agent Prompt Guide

### Quick Color Reference

- Interface surfaces: white `#ffffff`.
- Text: black `#000000`, generally weight 400.
- Borders, icons, arrows, and work number: electric green `#00ff00`.
- DOM-only utility captions: gray `#999999`.
- Current project only: pale blue, pastel pink, mint, yellow, and navy.
- Separation: opaque white plaques and thin rules; no UI shadow system.

### Overall Prompt

“Create a full-screen design portfolio viewer inspired by the observed PLANT interface. Show one large project above a compact white information strip. Overlay a square white logo plaque at the upper left and a thin white navigation rail at the upper right. Use exact electric green #00ff00 for hairline borders, geometric mode icons, arrows, and a catalog number; use black regular-weight sans-serif text elsewhere. Prefer Faktum-Regular when available. On desktop, give the number its own 128px column and place the project title beyond a short vertical green divider. On mobile, use a 60px logo, a two-line menu symbol, and an information strip with text left and arrow above number right. Keep the project's artwork independent from the interface palette and preserve its lettering through mobile art direction.”

### Example Component Prompts

1. **Desktop navigation:** “Build a square-cornered white rail approximately 453px wide and 40px high with a one-pixel green outline. Include 18px Single, List, Grid, and filter symbols with 20px gaps, a green vertical separator, then ABOUT and CONTACT in regular 16px type. Use a filled square for the selected Single state.”
2. **Project label:** “Create a full-width white project-detail link, approximately 119px tall on desktop. Center a green 32px catalog number in a 128px left region, add a short green vertical divider, and place a 24px regular project title 45px beyond it. Put 12px category and year lines below, with a fine green arrow at the far right.”
3. **Mobile viewer:** “At a 390px-wide layout, keep the image stage near 743px high in an 844px viewport. Place a 60px logo at a 24px inset and a thin two-line menu symbol at the upper right. Keep project lettering readable inside the narrow stage. Use a 101px information strip with 24px side padding, 16px title, 12px metadata, and a 20px number below the arrow.”
4. **New category-menu implementation:** “Design an accessible menu using the evidenced groups ABOUT, CONTACT, WORKS, View Mode, and Category. Include Single, List, and Grid plus category names with counts. Continue the white, black, and electric-green interface language. Treat its panel geometry and opening behavior as new implementation choices because the original open state was not captured.”

## Quick Start

### CSS Custom Properties

This adaptation preserves the measured shell proportions and metadata arrangement. It uses a normal 16px root. The breakpoint, `100svh` behavior, enlarged mobile hit area, focus treatment, and two-layer artwork composition are recommendations.

Expected structure: `.plant-shell` contains `.site-header`, `.project-stage`, and a `.project-caption` anchor. The header contains the logo, desktop rail, and mobile trigger. The caption contains `.work-number`, `.project-info`, and `.work-arrow`. Navigation behavior requires a separate implementation.

For the optional two-layer stage, supply an authorized backdrop and transparent lettering asset. If the available artwork is a single composite, use art-directed `<picture>` sources instead and omit `.stage-lettering`. No original asset URLs are implied by these class names.

```css
:root {
  /* Measured interface colors */
  --plant-paper: #ffffff;
  --plant-ink: #000000;
  --plant-signal: #00ff00;
  --plant-muted: #999999;

  /* Approximate colors belonging only to the current artwork */
  --art-paper: #eaf1fb;
  --art-ink: #19194d;

  /* Observed Latin declaration and a body-stack adaptation */
  --font-ui: Faktum-Regular, -apple-system, sans-serif;
  --font-body: yu-gothic-pr6n, YuGothic, 'Yu Gothic Medium',
    'Yu Gothic', 'Hiragino Kaku Gothic Pro', -apple-system, sans-serif;

  --text-project: 24px;
  --leading-project: 36px;
  --text-meta: 12px;
  --leading-meta: 18px;
  --text-number: 32px;
  --leading-number: 36px;

  --rule: 1px;
  --logo-size: 100px;
  --number-column: 128px;
  --caption-min-height: 119px;
  --control-motion: 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--plant-ink);
  background: var(--plant-paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.plant-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(320px, 1fr) auto;
  min-block-size: 100vh;
  block-size: 100vh;
  min-block-size: 100svh;
  block-size: 100svh;
  font-family: var(--font-ui);
  font-weight: 400;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  block-size: 0;
  pointer-events: none;
}

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

.brand-link {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  display: grid;
  place-items: center;
  inline-size: var(--logo-size);
  block-size: var(--logo-size);
  border: var(--rule) solid var(--plant-signal);
  background: var(--plant-paper);
}

.brand-link img {
  display: block;
  inline-size: 60%;
  block-size: auto;
}

.desktop-nav {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  display: flex;
  align-items: center;
  gap: 40px;
  block-size: 40px;
  padding-inline: 40px;
  border: var(--rule) solid var(--plant-signal);
  background: var(--plant-paper);
}

.mode-controls,
.text-links {
  display: flex;
  align-items: center;
}

.mode-controls {
  gap: 20px;
}

.mode-button {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 18px;
  block-size: 40px;
  padding: 0;
  border: 0;
  color: var(--plant-signal);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--control-motion),
    border-color var(--control-motion),
    color var(--control-motion),
    fill var(--control-motion),
    stroke var(--control-motion);
}

.mode-button svg {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  fill: var(--plant-paper);
  stroke: var(--plant-signal);
  stroke-width: 1;
}

.mode-button[aria-pressed='true'] .mode-square {
  fill: var(--plant-signal);
}

.nav-divider {
  flex: none;
  inline-size: 1px;
  block-size: 18px;
  background: var(--plant-signal);
}

.text-links {
  gap: 24px;
}

.text-links a {
  color: var(--plant-ink);
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu-toggle {
  display: none;
}

.project-stage {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  border-block-end: var(--rule) solid var(--plant-signal);
  background: var(--art-paper);
}

.stage-backdrop {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Optional composition layer; placement is a visual approximation. */
.stage-lettering {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(56vw, 800px);
  max-inline-size: calc(100% - 32px);
  block-size: auto;
  transform: translate(-50%, -50%);
}

.project-caption {
  display: grid;
  grid-template-columns:
    var(--number-column) minmax(0, 1fr) var(--number-column);
  align-items: center;
  min-block-size: var(--caption-min-height);
  color: var(--plant-ink);
  background: var(--plant-paper);
  text-decoration: none;
}

.work-number {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  block-size: 80px;
  margin: 0;
  border-inline-end: var(--rule) solid var(--plant-signal);
  color: var(--plant-signal);
  font-size: var(--text-number);
  line-height: var(--leading-number);
}

.project-info {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  padding: 21.5px 0 21.5px 45px;
}

.project-title {
  margin: 0 0 4px;
  font-size: var(--text-project);
  font-weight: 400;
  line-height: var(--leading-project);
}

.project-meta {
  margin: 0;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.work-arrow {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  inline-size: 40px;
  block-size: 1px;
  background: var(--plant-signal);
}

.work-arrow::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  content: '';
  border-block: 8px solid transparent;
  border-inline-start: 8px solid var(--plant-signal);
  transform: translateY(-50%);
}

/* Recommended focus treatment with stronger contrast. */
.plant-shell :focus-visible {
  outline: 2px solid var(--plant-ink);
  outline-offset: 4px;
}

.project-caption:focus-visible {
  outline-offset: -4px;
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 767px) {
  .plant-shell {
    --logo-size: 60px;
    --caption-min-height: 101px;
    --text-project: 16px;
    --leading-project: 24px;
    --text-number: 20px;
    --leading-number: 26px;
  }

  .brand-link {
    inset-block-start: 24px;
    inset-inline-start: 24px;
  }

  .desktop-nav {
    display: none;
  }

  /* Enlarged hit area; glyph retains its captured position. */
  .mobile-menu-toggle {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 22px;
    display: block;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-glyph {
    position: absolute;
    inset-block-start: 17px;
    inset-inline-start: 2px;
    inline-size: 40px;
    block-size: 9px;
    border-block: 1px solid var(--plant-signal);
  }

  .stage-lettering {
    inset-block-start: 54%;
    inline-size: calc(100% - 32px);
  }

  .project-caption {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-rows: 24px minmax(40px, auto);
    padding: 13px 24px 24px;
  }

  .project-info {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    padding: 0;
  }

  .work-number {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    inline-size: 40px;
    block-size: 26px;
    border: 0;
  }

  .work-arrow {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    inline-size: 24px;
  }

  .work-arrow::after {
    border-block-width: 6px;
    border-inline-start-width: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-button {
    transition: none;
  }
}
```

The sample uses the existing work-detail route for the caption when reproducing this specific record. Treat the arrow as decorative within that link. Mode controls, category filtering, and mobile-menu behavior must be implemented separately; their presence in the CSS is not a claim that those interactions were verified.

### 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-paper: var(--plant-paper);
  --color-ink: var(--plant-ink);
  --color-signal: var(--plant-signal);
  --color-muted: var(--plant-muted);

  --font-interface: var(--font-ui);
  --font-japanese: var(--font-body);

  --text-project: var(--text-project);
  --text-caption: var(--text-meta);
  --text-work-number: var(--text-number);

  --spacing-logo: var(--logo-size);
  --spacing-number-column: var(--number-column);
  --spacing-page-inset: 24px;

  --radius-interface: 0px;
}
```

For a real Tailwind integration, avoid self-referential variable names: rename the source `--text-project` token to `--plant-text-project` and map `--text-project` to that variable, or use the direct responsive values in your application stylesheet.

## Sources & Evidence

- [PLANT homepage](https://uekishun.com/): original and final URL; supplied response status `200`; page title `PLANT`.
- **Observation timestamp:** `2026-10-01T21:23:57.985Z`, equivalent to October 2, 2026 at 06:23:57.985 JST. Individual screenshot timestamps were not supplied separately.
- **Original-page captures:** three desktop images at 1440 × 1000 and two mobile images at 390 × 844. They show the same featured work and closed navigation state.
- **Rendered evidence:** one desktop and one mobile DOM/computed-style record, including element rectangles, link destinations, type declarations, text colors, the white information-strip background, and mode-control transitions.
- [DeNA TechCon 2025 detail link](https://uekishun.com/works/techcon2025): established as the information-strip destination; the detail page itself was not inspected.
- **Other known destinations:** [ABOUT](https://uekishun.com/about) and [CONTACT](https://uekishun.com/contact?date=1790889800), observed as homepage links only.
- **Inspection limits:** no opened menu, alternate view, category selection, hover state, keyboard sequence, detail page, or changed project was supplied. Media asset URLs, intrinsic image sizes, full stylesheets, positioning declarations, and original breakpoints were unavailable.

This reference uses only the supplied original-page captures and rendered evidence. Its measured values describe the current captured state; estimated artwork colors, implementation code, and accessibility improvements are explicitly adaptations.