# igoods — Style Reference

> Generous white space, forest-green details, and tangible products presented through photography and customer stories.

**Original URL:** [https://www.i-goods.co.jp/](https://www.i-goods.co.jp/)
**Final URL:** [https://www.i-goods.co.jp/](https://www.i-goods.co.jp/)
**Theme:** predominantly white, with pale section backgrounds and a dark green footer.
**Inspected:** October 2, 2026, at 05:01:50 JST; supplied retrieval timestamp: `2026-10-01T20:01:50.410Z`.
**Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels.
**Scope:** the current corporate homepage. Visual evidence covers the desktop hero/news opening, customer interviews, and footer, plus the mobile hero/news opening and lower footer. Rendered text covers the full homepage; sampled element geometry and computed styles cover additional service, industry, product, and customer sections. Linked pages and activated menus were not inspected.

igoods presents a broad manufacturing and promotional-goods business through an orderly corporate index. A large photographic hero introduces its business areas, while news, services, product categories, client logos, interviews, quality information, articles, and contact routes provide several ways into the site. The page is a substantial corporate homepage, with measured document heights of approximately `10,075.55px` on desktop and `11,638.09px` on mobile.

The strongest visual signatures are the asymmetric desktop hero, the white thumbnail navigation overlapping its lower edge, restrained forest-green accents, and portrait interviews carrying vertical Japanese copy on white ribbons. Broad spacing separates dense information groups. Photography supplies most of the color; interface surfaces remain quiet and mostly square.

## How to Read This Reference

- **Measured** means a value appears in the supplied rendered element bounds or computed styles. Coordinates refer to the supplied browser snapshots, not a new inspection.
- **Estimated** means a visual approximation from the current screenshots. Footer color, interview image dimensions, and the visible hero lettering scale fall into this category.
- **Recommended** means an implementation choice for a new site. Breakpoints, accessible behavior, and several CSS details below are recommendations rather than recovered source rules.
- **Named tokens** are descriptive aliases unless explicitly identified as source custom properties.
- A DOM entry can exist outside the visible viewport or inside an inactive panel. Its presence does not establish that users saw it in the captured state.
- The screenshots establish settled appearance. They do not establish autoplay intervals, hover outcomes, swipe behavior, video playback, or menu opening behavior.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Role and evidence |
| --- | --- | --- | --- |
| White | `#ffffff` | `--color-white` | Measured header background and hero text; visually dominant page surface |
| Forest Green | `#364838` | `--color-brand` | Measured contact-button background and English product-category labels |
| Text Black | `#000000` | `--color-text` | Measured body text, navigation anchors, and news text |
| Pale Surface | `#fbfbfb` | `--color-surface` | Measured service-section background and news-category labels |
| Selected Gray | `#f5f5f5` | `--color-selected` | Measured selected news-filter background |
| Muted Gray | `#b3b3b3` | `--color-muted` | Measured mobile news dates and dates in the desktop navigation news panel |
| Footer Forest | approximately `#222922` | `--color-footer` | Screenshot estimate for the large dark footer field; no footer background computation was supplied |
| Fine Rule | approximately `#ebebeb` | `--color-rule` | Screenshot estimate for light separators; use as a provisional implementation value |

The brand green is structural: it appears in the identity, contact action, small link details, selection indicator, and product labels. The bright green in the mobile hero belongs to its product photograph. It should not become the general button color.

Visible inactive hero tabs and desktop news filters are subdued. Several sampled anchors still report black text, so their final appearance may involve descendants or opacity. Do not treat an inherited black declaration as the complete rendered treatment.

The captured custom-property list contains numerous platform color presets and a blue slider default. Their presence does not establish that those colors are used in the visible design. Exclude unrelated preset gradients, vivid purple, and slider blue from the page palette.

## Tokens — Typography

### Japanese Interface and Body

**Measured source stack:** `游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", sans-serif`.

The body uses weight `500`, with weight `700` measured on the news heading, interview heading, and news filters. Paragraphs have generous line spacing: `14px / 28px` on desktop and `12.48px / 24.96px` on mobile. This open leading supports long Japanese descriptions without enlarging the overall type scale.

Use the measured stack for Japanese navigation, descriptive copy, news, and utility labels. The root element's computed `Times` family is not evidence that visible page content uses a serif face.

### English Product Labels

**Measured source family:** `Lato, sans-serif`.

The product labels `BAG`, `POUCH`, `SDGs`, `SUPPORT`, `KITCHEN`, and `MACHINERY` use weight `700`, forest green, and a tight line box. Their desktop size is `36px / 36px`; mobile uses `20.8px / 20.8px`.

Lato is verified for these labels. The supplied styles do not establish that every English heading or decorative background word uses Lato.

### Identity and Hero Lettering

Treat the igoods wordmark and the hero business marks as brand artwork. Their visual forms are not reproducible by typing their names in the body font. The measured home-link boxes are `121 × 48px` on desktop and approximately `73.41 × 29.11px` on mobile.

The hero slogan is visually much larger than the sampled H1's computed font size. The H1 reports `16px` on desktop and `12.48px` on mobile, while its visible lettering occupies a large two-line composition. Child styling or artwork details were not included in the evidence. Use the measured title bounds and screenshot proportions rather than copying that inherited font size as the display size.

### Type Scale

| Role | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Body and ordinary descriptions | `14px / 28px`, weight `500` | `12.48px / 24.96px`, weight `500` | Measured |
| Header tagline | `10px / 20px` | `10.4px / 20.8px` | Measured computed sizes |
| Desktop navigation anchors | `14px / 28px`, weight `500` | Replaced visually by menu control | Measured desktop |
| Hero description | `16px / 32px` | `10.4px / 20.8px` | Measured |
| Visible hero slogan | Approximately `60px` lettering | Approximately `31px` lettering | Screenshot estimate; exact rendered font treatment unavailable |
| Hero slogan bounding box | `288 × 168px` for three business slides | `149.75 × 87.36px` | Measured; product-sample slogan has different bounds |
| News heading | `24px / 24px`, weight `700` | `18.72px / 18.72px`, weight `700` | Measured |
| Interview heading | `24px / 24px`, weight `700` | Not sampled | Measured desktop |
| News filters | `16px / 16px`, weight `700` | `10.4px / 10.4px`, weight `700` | Measured |
| Main news category | `11px / 22px` | `10.4px / 20.8px` | Measured |
| Main news date | `12px / 24px`, black | `10.4px / 20.8px`, muted gray | Measured |
| Main news title | `14px / 28px` | `12.48px / 24.96px` | Measured |
| English product label | `36px / 36px`, Lato `700` | `20.8px / 20.8px`, Lato `700` | Measured |
| Japanese product label | `16px / 16px`, weight `500` | `13.52px / 13.52px`, weight `500` | Measured |
| Client-logo permission note | `11px / 22px` | `8px / 16px` | Measured; consider a larger minimum in an adaptation |
| Interview ribbon and company caption | Approximately `16px`, bold appearance | Not visually supplied | Screenshot estimate |

Most sampled text has normal letter spacing. Do not apply generous tracking to every Japanese paragraph. Any tracking used to approximate the hero artwork should remain specific to that display treatment.

## Tokens — Spacing & Shapes

### Scaling Model

The measured root font size is `10px` on desktop and `5.2px` at the mobile viewport. Components do not all shrink by the same ratio: body text changes from `14px` to `12.48px`, while hero title bounds become approximately `52%` of their desktop size.

The source formula and breakpoint rules are not supplied. Keep a conventional root font size in a new implementation and translate the measured component values directly. Do not infer a universal viewport-scaling formula from two observations.

Source properties report `--windowWidth: 1440px` or `390px` and `--windowHeight: 1000px` or `844px`. `--firstViewHeight` remains `1000px` in both records, so it should not be interpreted as the current mobile viewport height.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Wide section side inset | `40px` | Usually `31.2px` for text | Measured |
| Main content side inset | `120px` | `31.2px` | Measured |
| Expanded category-grid side inset | `120px`, with content starting at `280px` after heading rail | Approximately `15.6px` | Measured |
| Service and category column gap | `40px` | Category gap approximately `15.6px` | Derived from measured bounds |
| Category mobile row gap | — | Approximately `31.2px` | Derived from measured bounds |
| Hero-tab internal leading inset | `12px` | `8.32px` | Measured |
| Hero-tab overlap | `40px` | Approximately `31.2px` | Derived from measured bounds |
| News section top padding | `120px` | `54.6px` | Measured |
| Common lower-section top padding | `115–120px` | `62.4px` | Measured on industry, product, and service sections |
| Service section bottom padding | `310px` | `176.8px` | Measured; unusually generous and section-specific |

The page alternates broad media areas with more deeply inset text. A single universal container would lose this hierarchy.

### Border Radius and Elevation

| Element | Treatment | Evidence |
| --- | --- | --- |
| Images and most link containers | Square corners | Measured `0px` on sampled containers; screenshots confirm the general appearance |
| News category and filter labels | `2px` desktop; `2.08px` mobile | Measured |
| Header utility buttons | Square | Measured |
| Hero keyword frame | Thin white outline with minimally softened corners | Screenshot observation; exact radius unavailable |
| Interview arrow controls | Visually circular, approximately `60px` diameter | Measured outer control size and visible circular surface; shape may belong to a child or pseudo-element |
| Social controls | Thin circular outlines, approximately `36–38px` | Screenshot estimate |
| Hero navigation strip | Soft shadow beneath a white surface | Screenshot observation; shadow parameters unavailable |

A recommended approximation for the hero strip is `0 12px 32px rgb(0 0 0 / 0.08)`. Keep this localized. The page does not show a general system of elevated, rounded cards.

### Layout Measurements

| Element | Desktop at 1440 × 1000 | Mobile at 390 × 844 |
| --- | --- | --- |
| Header | `1440 × 114px` | `390 × 60.31px` |
| Hero media/link box | `x: 40px`, `y: 114px`, `1400 × 554px` | `x: 0`, `y: 60.31px`, `390 × 467.98px` |
| Hero description start | `x: 120px`, `y: 421px` | `x: 31.19px`, `y: 344.17px` |
| Hero navigation | `x: 120px`, `y: 628px`, `1200 × 80px` | `x: 15.61px`, `y: 497.11px`, approximately `374.39 × 62.39px` |
| Hero navigation items | Four equal `300px` widths | Active item `203.89px`; two inactive items `54.06px`; final item `62.38px` |
| Header action buttons | Two adjacent `144 × 54px` rectangles | Not visible in the closed mobile header |
| News outer content | `1200px` wide | `327.63px` wide |
| News inner rows | `960px` wide, starting at `x: 240px` | `327.63px` wide, starting at `x: 31.19px` |
| Service link groups | Three columns of approximately `426.67px` | One column of approximately `327.63px` |
| Industry link groups | Three columns, `320 × 255.94px` each | Two columns, `171.61 × 149.44px` each |
| Product category links | Three columns of `320px` squares | Two columns of `171.61px` squares |

The desktop hero reaches the right viewport edge. Its `40px` inset is on the left, not a symmetric `40px` margin on both sides.

## Components

### Persistent Header

**Role:** identity, primary navigation, and direct access to resources and contact.

The desktop header is a white `114px` band. Place the forest-green wordmark at approximately `x: 42px`, with the small business descriptor beside it. Seven primary navigation entries occupy the center/right region. Their sampled anchors have `15px` horizontal padding.

At the right, join two equal rectangular actions: an outlined white resource button labeled `お役立ち資料` and a forest-green contact button labeled `お問い合わせ`. Each measures `144 × 54px`. The recruitment link includes a small external-link symbol in the screenshot.

On mobile, the header becomes approximately `60.31px` high. The wordmark starts near `30px`, and the descriptor remains beside it. A three-line menu icon occupies the right side. The measured menu anchor is approximately `88.39 × 60.31px`, considerably larger than the visible icon.

The header remains visible at the top of the supplied scrolled captures. This supports persistent positioning, but the evidence does not distinguish `fixed` from `sticky` implementation.

Desktop navigation-panel content exists in the DOM, including company, service, product, and news groups. Mobile menu content is positioned beyond the captured viewport, with several entries at `x: 421.19px`. Opening behavior, focus handling, and submenu transitions were not exercised. The dark mobile lower-page capture is the footer, not evidence of an open menu.

### Hero Slide

**Role:** introduce the business and route visitors into one of four areas.

The DOM contains four co-located slide links: custom goods, sustainable goods, manufacturer services, and product examples. Each includes a slogan, short description, and destination cue. The desktop screenshot shows the manufacturer slide with a serving robot; the mobile screenshot shows the sustainable-goods slide with pale tableware, fabric, and greenery.

On desktop, white text begins approximately `80px` inside the media's left edge. The slogan forms two strong lines, with a thin rectangular outline around its first keyword. The description sits below with `16px` type and `32px` leading. The final route cue is an underlined text link treatment with a small terminal dot, rather than a large filled button.

A business mark appears separately within the image: `ROBOTI` and `コロタツ` on the desktop manufacturer view, and `SUSPRO` toward the upper left of the mobile sustainable view. A vertical `SCROLL` label and fine line sit near the right side.

On mobile, the image becomes a tall, full-width composition. The business mark sits above the slogan; the slogan begins approximately `175px` below the media's top. Descriptions use three short lines at `10.4px / 20.8px`. Preserve readable space around the copy when selecting the crop.

The evidence does not establish whether the hero media is a still image or a video frame. It also does not establish the switching effect or autoplay schedule.

### Overlapping Hero Navigation

**Role:** expose all four hero destinations while indicating the current panel.

A white strip overlaps the media's lower edge by half its own height. Desktop uses four equal `300 × 80px` items inside a `1200px` strip. Each item combines a small square thumbnail, a text label, and an active-state treatment. Thumbnail size is approximately `56px` in the screenshot.

Inactive items are visibly faded. The current item retains strong image contrast and dark text. A thin forest-green line begins at the selected item's leading edge. Its captured length is shorter than the item; its relationship to elapsed time was not established.

Mobile keeps all four thumbnails but expands only the active item's label. At the observed state, the active sustainable-goods item is approximately `203.89px` wide; compact inactive items are approximately `54px` wide. Thumbnails appear approximately `46px` square. The strip starts around `15.6px` from the left and reaches the right edge.

This is an important responsive transformation: it is not a scaled-down row of four full labels. Implement the active state explicitly, and avoid making the selected business depend on viewport width.

### News Filters and Rows

**Role:** show recent business activity without interrupting the page's spacious rhythm.

Desktop places the section heading, seven category filters, and archive link in one row. The selected `すべて` filter has a pale gray background and a small radius. Other filters appear muted. A fine rule separates the heading area from the list.

The outer news region is `1200px` wide, but its heading content and rows are inset another `120px` on each side. Each row starts with a `106 × 24px` pale category label, followed by a date and a longer title. A small forest-green `NEW` pill precedes recently marked titles. Titles are ordinary text links, not boxed article cards.

The first desktop row is `28px` high. Longer entries wrap to `56px`; consecutive rows have approximately `24px` of extra vertical separation. Preserve content-driven heights.

Mobile separates the heading from a single horizontal filter row. Filters are approximately `36.31px` high, have light outlines, and continue beyond the visible right edge. The captures do not verify how users scroll this strip.

Mobile news metadata occupies its own line. The title follows beneath it with approximately `12.5px` of separation. Rows have fine dividers and approximately `15.6px` vertical padding. The first measured row is approximately `117.47px` high.

Five main news entries appear in the desktop record and three in the mobile record. Treat this as the observed responsive content state, not an established permanent publishing rule. The archive link moves below the list on mobile.

### Service Overview

**Role:** describe the three main business lines.

The service section uses the measured pale surface `#fbfbfb`. Desktop places three link groups across a `1360px` span with `40px` gaps. Each link group measures approximately `426.67 × 572.44px` and contains a substantial area before the title, then a description and detail cue.

Mobile stacks these groups into a single `327.63px` column. Each measured link group is approximately `482.56px` high, with approximately `31.2px` between groups. The body copy retains four short lines at the measured mobile body scale.

The section's bottom spacing is conspicuously large: `310px` on desktop and `176.8px` on mobile. This breathing room is part of its pacing. Do not apply these unusually large values to every section.

The supplied current screenshots do not show this section's media. Its grouping and spacing are supported by DOM geometry; exact image crops and title-child styling remain unverified.

### Industry Navigation

**Role:** let visitors browse by business context.

The desktop section has an `80px` heading rail at `x: 120px`; its content begins at `x: 280px`, leaving another `80px` between rail and grid. Six industry links form three columns and two rows, with `320px` widths and `40px` gaps.

On mobile, the heading becomes a full-width block within the `31.2px` text inset. The grid extends farther outward, using approximately `15.6px` side margins and two columns of `171.61px`. Three rows preserve the six categories.

Do not collapse all lower-page collections into one mobile column. The service descriptions stack, while the shorter industry links retain a two-column layout.

### Product Category Tiles

**Role:** provide a concise visual index of goods categories.

The measured grid uses square links: `320 × 320px` on desktop and approximately `171.61 × 171.61px` on mobile. Desktop again uses a narrow heading rail beside three columns; mobile uses a heading above two columns.

Each tile includes a large forest-green English label near the upper left and a smaller Japanese category label near the lower right. The English label is verified Lato. Desktop labels begin approximately `8px` inside the tile and `36px` below its top. Mobile uses approximately `4.16px` and `20.8px` respectively.

Keep the square geometry and separated label positions. Exact product imagery was not included in the current visual captures, so do not infer a specific object arrangement from the text or bounds alone.

### Client Logos and Background Lettering

**Role:** establish the breadth of customer relationships.

The desktop screenshot shows a clean white logo grid above the interviews, including `PINK HOUSE`, `大東建託`, and the Tokyo Metropolitan Government mark. A text cell communicates the broader customer count. Logos retain their own colors within neutral cells.

A small permission note sits below the grid. Its measured size is `11px / 22px` on desktop and `8px / 16px` on mobile. Large, very pale outlined lettering reading `CLIENTS` appears behind the region, adding scale without becoming a content heading.

Keep this decoration subordinate to the actual logos and note. The exact outline font, stroke, and complete logo-grid dimensions were not supplied.

### Interview Carousel

**Role:** connect product quality and service claims to recognizable customer stories.

The section heading sits at the left of a `1200px` desktop header row. An underlined archive link appears toward the right, followed by two circular arrow controls. One measured control box is `60 × 60px`; the screenshot shows matching previous/next circles.

The image track extends across the viewport, beyond the heading's content margins. Both ends show partial cards, signaling additional content. Visible cards are approximately `322–323px` wide with `20px` gaps.

Each card consists of:

- A portrait image area approximately `323 × 432px`, close to a `3:4` ratio.
- A white ribbon over the image's upper-right edge, approximately `48px` wide, carrying bold Japanese copy vertically.
- A white caption block below the image, naming the customer. Its height grows when the name wraps.
- A small forest-green dot toward the caption's right edge.

The photographs show people with goods or in their working environments. Keep faces and held products visible when cropping. The vertical ribbon overlays the image; it is not an additional column that reduces the image's nominal width.

Repeated interview links in the rendered text are consistent with carousel duplication. They should not be counted as separate customer stories. Arrow behavior, looping, dragging, and mobile card geometry were not verified.

### Quality, Company, and Article Content

**Role:** provide operational evidence and deeper reading before contact.

Rendered text confirms a quality section with three numbered statements, followed by planning/design and manufacturing content, a company statement, and a column area. The column area groups sustainability, business robots, and recruitment content under the visible names `SUSPRO`, `ROBOTI`, and `RECRUIT`.

These groups contain real destination links, including links to related subdomains. Their content hierarchy is established, but their detailed visual composition is outside the supplied screenshot and computed-style coverage. Do not invent card dimensions, background images, or animation sequences for these sections.

### Contact Band

**Role:** offer resources, telephone contact, and an inquiry form as parallel routes.

The desktop footer capture shows the lower portion of a forest-green three-column band, inset approximately `40px` from both sides. White centered descriptions explain the three routes. The DOM supplies their labels and destinations, including the telephone number and weekday availability.

Mobile copy is shorter: the resource route describes free information, the phone route retains availability, and the form route mentions consultations and samples. Its full visual arrangement is not shown in the mobile capture. A stacked implementation is a reasonable recommendation, not an observed measurement.

### Footer

**Role:** finish the page with a full sitemap and practical company information.

The footer changes to a dark green field, estimated around `#222922`. Desktop has a large reversed igoods wordmark and contact block on the left, with three sitemap groups on the right. Primary links are visually bold; subordinate company and service links use smaller, softer text. Broad empty space separates the contact band, sitemap, and legal row.

A vertical `PAGE TOP` cue sits near the right edge with a thin line above it. Social links use small outlined circles. Copyright appears at the lower left, while FAQ and privacy links align toward the lower right.

The mobile lower-footer screenshot shows a single column of prominent links, each separated by a fine horizontal rule. Link rows are approximately `63px` high within the `31.2px` side inset. Contact information follows after a generous gap; social controls and legal links come below. The legal links precede the copyright line visually.

The supplied mobile crop does not show the entire footer. Do not conclude that a logo or upper sitemap group is absent because it is outside this crop.

## Tokens — Motion & Interaction

| Element | Supplied declaration or observation | What it establishes |
| --- | --- | --- |
| Header | `height 0.15s` at both viewports | A height transition is declared; no shrink/expand trigger was observed |
| Desktop hero navigation items | `0.2s` | A short transition is declared; the extract does not identify a specific changing property |
| Mobile hero navigation items | `0.5s cubic-bezier(0.19, 1, 0.22, 1)` | A longer eased transition accompanies the responsive control styling; an animated width change was not recorded |
| Desktop news filters | `opacity 0.2s` | Opacity is a defined transition property; activated filter behavior was not tested |
| Desktop main news links | `transform 0.5s` | Transform transitions are available; direction and trigger are unverified |
| Desktop news title text | `color 0.25s` | Color transition is declared; final hover color was not supplied |
| Desktop English product labels | `0.2s` | A short transition is declared without an observed state change |
| Hero state | Manufacturer slide on desktop; sustainable slide on mobile | Multiple rendered states are documented; timing and automatic advancement are unknown |
| Interview controls | Previous/next affordances visible | Carousel intent is clear; actual response to activation is unverified |
| Page-top cue | Visible text and action-like DOM links | A return-to-top affordance exists; scroll timing and easing were not measured |

Most sampled nodes report `animation: none`. This does not exclude JavaScript-driven sliders, animated descendants, or motion outside the sampled set. Likewise, a transition string containing only `all` is not evidence of a visible animation with a known duration.

For a new implementation, use restrained movement: short color/opacity feedback and a deliberate selected-tab expansion. If automatic media or carousel movement is added, provide pause behavior and a reduced-motion alternative. Those are recommended additions.

## Surfaces

| Surface | Appearance | Function |
| --- | --- | --- |
| Page and header | White, mostly borderless | Establish the main corporate canvas |
| Service region | Measured `#fbfbfb` | Separate a major information group without strong contrast |
| Hero | Full-color media with white typography | Carry the emotional and product-led introduction |
| Hero navigation | White strip with a soft shadow | Bridge media and page content while exposing all business areas |
| News labels | Near-white or pale-gray rectangles with tiny radii | Organize metadata without colorful badges |
| Interview ribbon and caption | Flat white overlays/blocks | Keep editorial text legible against portraits |
| Contact band | Forest green with white text | Consolidate practical action routes |
| Footer | Dark green with reversed text and subtle rules | Create a clear ending and support dense navigation |

Use flat surfaces, image boundaries, and spacing for hierarchy. Reserve conspicuous round shapes for the few circular controls and social links.

## Imagery

The current visual evidence supports two complementary photographic directions. The manufacturer hero shows a robot carrying a meal in an everyday service environment. The sustainable hero shows tactile, pale tableware and fabric against saturated green, with botanical details. Both make the business concrete through objects and context.

Interview portraits add a human layer. People hold manufactured goods or appear with products in their workplaces. These are documentary customer stories, with recognizable faces, natural environmental detail, and varied clothing colors.

Use large media crops with calm areas for white copy. The mobile sustainable composition places its business mark near the top and keeps the headline and description on the left. Desktop uses the breadth of the media for both the slogan and a separate business mark. These are different compositions, not merely the same crop scaled proportionally.

Preserve original brand marks and approved customer logos as assets. Avoid substituting typed approximations or recoloring customer marks to match the interface.

### Observed Asset References

No image `src`, video `poster`, SVG file path, or font-file URL was included in the supplied evidence. The following references identify visible roles and page locations, not downloadable asset paths.

| Asset role | Current evidence | Implementation guidance |
| --- | --- | --- |
| igoods identity | Desktop/mobile headers and desktop footer | Obtain authorized brand artwork; use green and reversed variants |
| Manufacturer hero media | Current desktop opening capture | Preserve the robot, meal, and environmental context; media format is unverified |
| Sustainable hero media | Current mobile opening capture | Preserve pale objects, green background, fabric, and botanical detail |
| Hero business marks | `ROBOTI`, `コロタツ`, and `SUSPRO` in current captures | Use actual marks rather than inferred fonts |
| Four hero thumbnails | Current desktop and mobile navigation strips | Use corresponding media crops; keep inactive state readable |
| Customer portraits | Current desktop interview capture | Use portrait framing and protect faces from the vertical ribbon |
| Customer logos | Current desktop client-grid excerpt | Preserve proportions and permission context |
| Full-order and product-example hero media | Slide links and copy exist in the DOM | Main media appearance is not established by the current visual captures |

## Layout & Responsive Behavior

| System | Desktop observation | Mobile observation |
| --- | --- | --- |
| Navigation | Full row with adjoining utility buttons | Compact identity and menu icon |
| Hero frame | Left inset, right edge flush with viewport | Full viewport width and taller proportions |
| Hero slide selector | Four equal labeled items | Four thumbnails, with only the active label expanded |
| News heading | Heading, filters, and archive link share a row | Heading above an overflowing horizontal filter strip |
| News row | Category, date, and title on one line when space permits | Category/date above a wrapping title |
| Main news count | Five entries in supplied record | Three entries in supplied record |
| Service overview | Three columns | One column |
| Industry links | Three columns and a narrow heading rail | Two columns below a full-width heading |
| Product links | Three columns of square tiles | Two columns of square tiles |
| Footer | Identity/contact block beside grouped sitemap columns | Ruled navigation list followed by contact and legal content |

Desktop uses several nested widths: `1360px` for wide service content, `1200px` for main section framing, and `960px` for the inner news list. Mobile uses approximately `31.2px` text margins, but category tiles extend to approximately `15.6px` margins. Preserve these different alignments.

The evidence contains two viewport samples, not a breakpoint sweep. Exact tablet behavior, maximum desktop widths, and intermediate header transitions are unknown. The Quick Start uses recommended breakpoints of `1280px` for header simplification and `768px` for the mobile layout; these are not recovered source breakpoints.

## Do’s and Don’ts

### Do

- Keep white dominant and use the measured forest green `#364838` for identity and selected actions.
- Preserve the desktop hero's left inset and right-edge alignment.
- Overlap the thumbnail strip across the lower hero boundary.
- Expand the active mobile thumbnail item while retaining the other three thumbnails.
- Maintain separate wide-media, standard-content, and inner-news alignments.
- Use the measured Japanese sans-serif stack and reserve verified Lato styling for product labels.
- Keep service descriptions in one mobile column and short category links in two.
- Preserve the interview portraits, vertical white ribbons, and visible partial cards.
- Let long news titles and company names increase their component height.
- Finish with a dark footer containing useful navigation and contact details.

### Don’t

- Don’t reduce this corporate homepage to a single conversion funnel or omit its browsing structure.
- Don’t apply large corner radii and shadows to every content group.
- Don’t make the photographic lime green a universal interface accent.
- Don’t force four full hero labels into equal-width mobile cells.
- Don’t reproduce the hero slogan using the H1's small inherited computed size.
- Don’t use the root element's Times family as the page font.
- Don’t treat platform preset colors as evidence of the visible brand palette.
- Don’t infer autoplay speed, video behavior, or hover outcomes from still captures.
- Don’t mistake offscreen mobile menu content for a visible open state.
- Don’t invent lower-page imagery, asset paths, or production authorship that the original-page evidence does not establish.

## Recommended Implementation Additions

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

- Use real buttons for slide selection, filters, and menu toggles. Use links for destinations. Avoid action controls implemented only as `javascript:void(0)` anchors.
- Give thumbnail controls, arrow controls, social links, and the menu icon explicit accessible names and selected/expanded states where appropriate.
- Remove inactive hero panels and carousel clones from keyboard navigation and the accessibility tree while retaining necessary visual behavior.
- Keep the menu keyboard-operable, return focus to its trigger after closing, and prevent offscreen content from receiving focus.
- Provide a visible focus indicator, a skip link, and scroll offsets for content underneath the persistent header.
- Increase very small mobile supporting text where readability matters. The observed `8px` logo note and `10.4px` hero description are useful fidelity references, not ideal minimums for every project.
- Check white hero text against every crop. Use an appropriately composed image or a subtle local scrim when needed; a source scrim was not verified.
- Make overflowing filter controls reachable by touch and keyboard, and reveal the selected filter when it changes.
- Respect reduced motion. Pause automatic movement during interaction and provide a user-controlled pause if autoplay is implemented.
- Reserve image dimensions to avoid layout shifts, supply responsive crops, and defer below-the-fold images without delaying the opening hero unnecessarily.

## Agent Prompt Guide

### Quick Color Reference

- Main page and header: `#ffffff`.
- Brand green and primary contact action: `#364838`.
- Main text: `#000000`.
- Pale service and category surfaces: `#fbfbfb`.
- Selected news filter: `#f5f5f5`.
- Muted mobile dates: `#b3b3b3`.
- Footer approximation: `#222922`, pending an exact source measurement.
- Photography supplies saturated color; keep the interface palette restrained.

### Overall Prompt

“Create a Japanese corporate homepage for a goods-planning and manufacturing company, using the current igoods visual principles. Use a white canvas, forest green `#364838`, Yu Gothic interface typography, generous section spacing, square photographic regions, and fine rules. Build a persistent header with compact navigation and adjoining resource/contact buttons. Place a broad photographic hero with a left desktop inset, white two-line slogan, outlined keyword, business mark, and understated text CTA. Overlap a four-item thumbnail strip across its lower edge. Follow with a restrained news list, three service groups, industry and product indexes, customer logos, portrait interviews with vertical white caption ribbons, deeper company content, and a dark green sitemap footer. On mobile, make the hero full width, expand only the selected thumbnail label, stack news metadata, stack service descriptions, and retain two-column category grids. Use measured geometry where provided; treat unknown assets and interactions as explicit implementation decisions.”

### Example Component Prompts

1. **Hero selector:** “Design a white strip overlapping a photographic hero by half its height. At 1440px, use four equal 300 × 80px items with square thumbnails and compact Japanese labels. Fade inactive items and show a thin green line beneath the selected item. At 390px, retain all four thumbnails but expand only the selected item's two-line label. Keep corners nearly square and use one soft shadow beneath the strip.”
2. **News section:** “Build a Japanese corporate news section with a bold 24px heading, pale selected category filter, fine horizontal rule, and simple category/date/title rows. Use a 1200px outer frame with a 960px inner list at 1440px. On mobile, put the 18.72px heading above a horizontal filter strip and place muted dates beside category labels above each wrapping title.”
3. **Interview card:** “Create an approximately 323px-wide customer interview card with a 3:4 portrait image, an upper-right white ribbon carrying vertical Japanese copy, and a flat white company-name caption below. Use approximately 20px gaps in a viewport-wide track with partial neighboring cards visible. Add small forest-green details and circular previous/next controls. Do not round the portraits.”
4. **Product index:** “Build square goods-category links in three desktop columns beside a narrow section-heading rail. Place a forest-green Lato 700 English label near the upper left and a smaller Japanese label toward the lower right. At 390px, switch to two columns of approximately 172px squares with 16px outer margins. Keep product artwork configurable because its exact composition is not specified.”
5. **Footer:** “Build a dark green corporate footer with reversed branding, a practical contact block, three desktop sitemap groups, subtle circular social links, and a vertical PAGE TOP cue. On mobile, present prominent links as a single list divided by fine rules, then contact information, social links, utilities, and copyright. Keep broad breathing room and avoid card containers.”

## Quick Start

### CSS Custom Properties

This is an implementation scaffold using a conventional root size. Exact measured colors and anchor dimensions are retained where practical. The footer color, shadow, hero text rendering, intermediate widths, and breakpoints are adaptations. Supply authorized media and logos separately.

Suggested structure: `.site-header`; a `.hero` containing one active `.hero-slide` and `.hero-tabs`; `.news` with `.news-head` and `.news-list`; service/category sections; an `.interview-track`; and `.site-footer`. Use a single destination link for each hero slide, with its internal CTA rendered as a span to avoid nested links. Use buttons for the thumbnail controls.

```css
:root {
  /* Measured interface colors */
  --color-white: #ffffff;
  --color-brand: #364838;
  --color-text: #000000;
  --color-surface: #fbfbfb;
  --color-selected: #f5f5f5;
  --color-muted: #b3b3b3;

  /* Provisional visual approximations */
  --color-footer: #222922;
  --color-rule: #ebebeb;
  --shadow-tabs: 0 12px 32px rgb(0 0 0 / 0.08);

  --font-body: '游ゴシック体', YuGothic, '游ゴシック',
    'Yu Gothic', sans-serif;
  --font-product: Lato, sans-serif;
  --text-body: 14px;
  --text-section: 24px;
  --leading-body: 2;
  --header-height: 114px;
  --page-inset: 120px;
  --wide-inset: 40px;
  --radius-small: 2px;
  --motion-color: 250ms;
  --motion-tabs: 200ms;
  --ease-mobile-tabs: cubic-bezier(0.19, 1, 0.22, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-white);
  font: 500 var(--text-body) / var(--leading-body) var(--font-body);
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
button { cursor: pointer; }
[hidden] { display: none !important; }
section { scroll-margin-top: calc(var(--header-height) + 16px); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
  padding-inline: 40px;
  background: var(--color-white);
  transition: height 150ms;
}
.brand { display: flex; align-items: center; gap: 20px; }
.brand-logo { display: block; width: 121px; height: 48px; }
.brand-tagline { margin: 0; font-size: 10px; white-space: nowrap; }
.primary-nav { display: flex; margin-left: auto; }
.primary-nav a { padding-inline: 15px; text-decoration: none; }
.header-actions { display: flex; }
.header-action {
  display: grid;
  place-items: center;
  width: 144px;
  height: 54px;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 700;
}
.header-action--primary {
  color: var(--color-white);
  background: var(--color-brand);
}
.menu-toggle { display: none; }

.hero-slide {
  position: relative;
  display: block;
  height: 554px;
  margin-left: 40px;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
}
.hero-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hero-position, center);
}
.hero-copy { position: absolute; top: 107px; left: 80px; }
.hero-title {
  margin: 0 0 0 -4px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.4;
}
.hero-keyword {
  display: inline-block;
  padding-inline: 0.2em;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.hero-description { margin: 32px 0 28px; font-size: 16px; line-height: 2; }
.text-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-weight: 700;
}
.text-link::after { content: '・'; margin-left: 0.3em; }
.hero-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  width: calc(100% - 240px);
  max-width: 1200px;
  height: 80px;
  margin: -40px auto 0;
  background: var(--color-white);
  box-shadow: var(--shadow-tabs);
}
.hero-tab {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  transition: opacity var(--motion-tabs);
}
.hero-tab img { width: 56px; height: 56px; object-fit: cover; }
.hero-tab:not([aria-pressed='true']) > * { opacity: 0.35; }
.hero-tab[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--indicator-width, 50%);
  height: 2px;
  background: var(--color-brand);
}
/* The indicator width is illustrative, not a recovered timer. */

.news { padding: 120px var(--page-inset); }
.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 120px 40px;
  border-bottom: 1px solid var(--color-rule);
}
.news-heading { margin: 0; font-size: 24px; line-height: 1; }
.news-filters { display: flex; flex-wrap: nowrap; }
.news-filter {
  flex: none;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.news-filter[aria-pressed='true'] { background: var(--color-selected); }
.news-list { padding: 29px 120px 0; }
.news-row {
  display: grid;
  grid-template-columns: 198.85px minmax(0, 1fr);
  align-items: center;
  gap: 50px;
  margin-bottom: 24px;
  text-decoration: none;
}
.news-meta { display: flex; align-items: center; gap: 24px; }
.news-category {
  display: grid;
  place-items: center;
  flex: none;
  width: 106px;
  height: 24px;
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font-size: 11px;
}
.news-date { white-space: nowrap; font-size: 12px; }
.news-title { margin: 0; transition: color var(--motion-color); }
.news-new {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-white);
  font-size: 10px;
  line-height: 1;
}

.services { padding: 120px 40px 310px; background: var(--color-surface); }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.service-card { color: inherit; text-decoration: none; }
.service-card img { display: block; width: 100%; height: auto; }
.category-layout {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 80px;
  padding: 115px 120px 120px;
}
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.product-tile { position: relative; display: block; aspect-ratio: 1; text-decoration: none; }
.product-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-english {
  position: absolute;
  top: 36px;
  left: 8px;
  margin: 0;
  color: var(--color-brand);
  font: 700 36px / 1 var(--font-product);
}
.product-japanese { position: absolute; right: 0; bottom: 36px; margin: 0; font-size: 16px; line-height: 1; }

/* Portrait dimensions are screenshot-based approximations. */
.interview-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; }
.interview-card { flex: 0 0 323px; color: inherit; text-decoration: none; }
.interview-media { position: relative; aspect-ratio: 3 / 4; }
.interview-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.interview-quote {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 16px;
  background: var(--color-white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.interview-caption { min-height: 64px; padding: 22px 24px; background: var(--color-white); font-weight: 700; line-height: 1.4; }
.carousel-arrow { width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--color-white); color: var(--color-brand); }

.site-footer { padding: 120px; color: var(--color-white); background: var(--color-footer); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px 180px 140px; gap: 60px; }
.footer-nav a { display: block; margin-bottom: 20px; text-decoration: none; }
.footer-legal { display: flex; justify-content: space-between; gap: 24px; margin-top: 120px; font-size: 12px; }
.page-top { display: inline-flex; align-items: center; gap: 16px; writing-mode: vertical-rl; text-decoration: none; }
.page-top::before { content: ''; width: 1px; height: 40px; background: currentColor; opacity: 0.5; }

/* Recommended intermediate header behavior; source breakpoint unknown. */
@media (max-width: 1279px) {
  .primary-nav, .header-actions { display: none; }
  .menu-toggle { display: grid; place-items: center; margin-left: auto; width: 88px; height: 100%; border: 0; background: transparent; }
  .news-head { padding-inline: 0; flex-wrap: wrap; gap: 24px; }
  .news-list { padding-inline: 0; }
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
}

/* Mobile values target the supplied 390px capture. */
@media (max-width: 767px) {
  :root {
    --header-height: 60.32px;
    --text-body: 12.48px;
    --page-inset: 31.2px;
    --radius-small: 2.08px;
  }
  .site-header { gap: 0; padding: 0 0 0 30.16px; }
  .brand { gap: 8.32px; }
  .brand-logo { width: 73.41px; height: 29.12px; }
  .brand-tagline { font-size: 10.4px; }
  .menu-toggle { flex: 0 0 88.4px; }
  .hero-slide { height: 468px; margin-left: 0; }
  .hero-copy { top: 174.67px; left: 31.2px; right: 31.2px; }
  .hero-title { margin-left: -2.08px; font-size: 31.2px; }
  .hero-description { margin: 21.84px 0 18.72px; font-size: 10.4px; }
  .hero-tabs { width: calc(100% - 15.6px); height: 62.4px; margin: -31.2px 0 0 15.6px; }
  .hero-tab {
    flex: 0 0 54.08px;
    gap: 8.32px;
    padding: 8.32px 0 8.32px 8.32px;
    font-size: 12.48px;
    line-height: 1.6;
    transition: flex-basis 500ms var(--ease-mobile-tabs);
  }
  .hero-tab:last-child { flex-basis: 62.4px; padding-right: 8.32px; }
  .hero-tab[aria-pressed='true'] { flex: 1 1 auto; }
  .hero-tab img { flex: none; width: 45.76px; height: 45.76px; }
  .hero-tab:not([aria-pressed='true']) .hero-tab-label { display: none; }
  .news { padding: 54.6px 31.2px 36.4px; }
  .news-head { display: block; padding: 0; border: 0; }
  .news-heading { margin-bottom: 20.8px; font-size: 18.72px; }
  .news-filters { gap: 6.24px; margin-right: -31.2px; padding-bottom: 15.6px; overflow-x: auto; }
  .news-filter { border: 1px solid var(--color-rule); padding: 11.96px 16.64px; font-size: 10.4px; }
  .news-list { margin-top: 10.4px; padding: 0; border-top: 1px solid var(--color-rule); }
  .news-row { display: block; margin: 0; padding: 15.6px 0; border-bottom: 1px solid var(--color-rule); }
  .news-meta { gap: 12.48px; }
  .news-category { width: 96.72px; height: 22.88px; font-size: 10.4px; }
  .news-date { color: var(--color-muted); font-size: 10.4px; }
  .news-title { margin-top: 12.48px; }
  .services { padding: 62.4px 31.2px 176.8px; }
  .services-grid { grid-template-columns: 1fr; gap: 31.2px; }
  .category-layout { display: block; padding: 62.4px 31.2px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31.2px 15.6px; margin-inline: -15.6px; }
  .product-english { top: 20.8px; left: 4.16px; font-size: 20.8px; }
  .product-japanese { right: 10.4px; bottom: 0; font-size: 13.52px; }
  .site-footer { padding: 62.4px 31.2px; }
  .footer-grid { display: flex; flex-direction: column; gap: 0; }
  .footer-identity { order: 1; margin-top: 62.4px; }
  .footer-nav a { margin: 0; padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / 0.2); font-weight: 700; }
  .footer-legal { flex-direction: column-reverse; gap: 16px; margin-top: 31.2px; font-size: 10.4px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .hero-tab, .news-title { transition: none; }
}
```

The CSS supplies visual structure, not carousel or menu logic. Connect `aria-pressed` to the actual selected state, keep inactive panels noninteractive, and implement reduced-motion behavior in the controller as well. The mobile menu itself, archive-link relocation, exact decorative lettering, and unsupplied lower-page compositions require additional markup and decisions.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the variables above first and load Lato separately if using the product-label treatment.

```css
@theme inline {
  --color-brand: var(--color-brand);
  --color-canvas: var(--color-white);
  --color-ink: var(--color-text);
  --color-soft: var(--color-surface);
  --color-selection: var(--color-selected);
  --color-secondary: var(--color-muted);
  --color-footer-field: var(--color-footer);

  --font-japanese: var(--font-body);
  --font-product-label: var(--font-product);

  --text-copy: var(--text-body);
  --text-section-heading: 24px;
  --text-product-label: 36px;

  --spacing-page: var(--page-inset);
  --spacing-wide: var(--wide-inset);
  --radius-control: var(--radius-small);
  --shadow-hero-strip: var(--shadow-tabs);
}
```

When integrating this mapping, avoid defining a theme variable in terms of itself. For the brand entry, use `--color-brand: #364838` directly, or rename the underlying custom property to `--igoods-brand` and reference that instead.

## Sources & Evidence

- **Inspected original and final page:** [https://www.i-goods.co.jp/](https://www.i-goods.co.jp/). The supplied observation reports HTTP `200` and identical original/final URLs.
- **Capture time:** `2026-10-01T20:01:50.410Z`, equivalent to October 2, 2026 at 05:01:50.410 JST.
- **Desktop evidence:** `1440 × 1000` viewport; current opening, interview-region, and footer screenshots; full rendered text; sampled computed styles and element bounds through the interview heading/controls.
- **Mobile evidence:** `390 × 844` viewport; current opening and lower-footer screenshots; full rendered text; sampled computed styles and element bounds through the client-achievement region.
- **Identity evidence:** the original page title names アイグッズ株式会社, and its footer displays `IGOODS CO., LTD.` in the copyright statement.
- **Collection behavior:** the supplied browser process waited for document loading, sampled layout/text stability, finite-animation readiness, and image decoding within stated limits. It traversed intermediate scroll positions. These checks support settled captures but do not prove semantic completeness.
- **Interaction limits:** no menu opening, filter selection, carousel activation, hover sequence, form submission, or media playback result was supplied. Different hero states were captured, but no timed transition sequence was provided.
- **Coverage limits:** no asset file URLs, complete stylesheet, responsive breakpoint definitions, tablet capture, or linked-page inspection was supplied. Lower-page text extends beyond the detailed computed-style samples. Recommendations and screenshot estimates are labeled accordingly.

This reference describes the current homepage using the supplied original-page evidence. It preserves measured structure while leaving unverified media, interactions, and intermediate responsive behavior explicit.