# 犬猫生活 — Style Reference > Family portraits, quiet Japanese typography, and fine threads of color on a pale gray canvas. **Original URL:** [https://inuneko-seikatsu.co.jp/](https://inuneko-seikatsu.co.jp/) **Final URL:** [https://inuneko-seikatsu.co.jp/](https://inuneko-seikatsu.co.jp/) **Response:** HTTP 200; the supplied original and final URLs are identical. **Theme:** light gray canvas, deep brown text, warm gray footer, restrained pastel accents. **Inspected:** supplied evidence retrieved October 5, 2026, at 05:24:17.004 JST — October 4, 2026, at 20:24:17.004 UTC. **Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. **Scope:** the current brand and shopping homepage. Visual evidence includes three desktop opening states, the mobile opening viewport, and a mobile footer crop. Rendered DOM and computed styles cover navigation, mission copy, product categories, brand commitments, animal welfare content, contact links, and the footer. Linked pages and activated menu, cart, and category states were not inspected. The homepage introduces a pet food brand through the relationship between animals and their families. Its opening composition gives a portrait photograph far more space than any headline or shopping action. A small vertical sentence sits beside the photograph; two smaller, faded portraits extend the scene sideways. Thin pastel curves cross the otherwise quiet background. The interface balances this emotional introduction with practical shopping access. Account, cart, product, and FAQ links remain compact in the upper right. Below the opening scene, the DOM describes a substantial homepage containing mission copy, product categories, three commitments, animal welfare information, and contact routes. This is a brand and commerce homepage with several destinations and audiences. The strongest reusable qualities are the difference in scale between the main and secondary photographs, exceptionally open spacing, Japanese serif text, carefully tracked Latin lettering, square image edges, and small outline controls. The pale canvas and deep brown ink connect the photographic opening to the more functional footer. ## How to Read This Reference - **Measured** values come from the supplied rendered DOM and computed styles. Decimal values are rounded in tables where that improves readability. - **Visual estimates** come from the original-page screenshots. No pixel-sampling tool was used, so estimated colors are approximate. - **Recommendations** describe a new implementation. They are not claims about untested behavior on the original website. - **Token names** are descriptive aliases unless explicitly identified as source custom properties. - **Declared font families** are documented exactly where supplied. Computed family lists do not independently prove which font file rendered every glyph. - **DOM presence does not establish visibility.** Some navigation and product panels occupy overlapping positions, some feature links sit outside the viewport, and several visible footer links report transparent text color. - **Mobile opening evidence is incomplete.** The first mobile screenshot shows the header above an empty gray viewport. Large DOM offsets are documented as an unresolved rendering condition, not a spacing specification. The desktop opening and mobile footer provide the most reliable visual anchors. Lower-page typography and component structure are supported by the DOM, but their complete painted appearance was not captured. ## Tokens — Colors ### Default Palette | Name | Value | Suggested token | Evidence and role | | --- | --- | --- | --- | | Pale Gray Canvas | `#f5f5f5` | `--color-canvas` | Measured body background at both viewports; also the mobile header background | | Deep Brown Ink | `#2e2218` | `--color-ink` | Measured primary text color throughout the page | | Warm Gray Footer | `#eae7e6` | `--color-footer` | Measured footer background; visibly warmer than the main canvas | | White Control | `#ffffff` | `--color-control` | Measured circular menu-button background | | Muted Blue Gray | `#93a7a9` | `--color-muted-accent` | Measured `OFFICIAL SNS` text color | | Inactive Category | `#c3c0be` | `--color-inactive` | Measured desktop `FOR CATS` button color in the captured state | | Contact Panel Text | `#fefcfb` | `--color-on-image` | Measured contact-panel link and heading color; the panel background was not visually established | | Contact Coral | Approximately `#ff8f7a` | `--color-contact` | Visual estimate for the circular contact lettering and envelope | | Blush Thread | Approximately `#eedbd8` | `--color-wave-blush` | Visual estimate for the pale warm curve crossing the opening composition | | Blue Thread | Approximately `#dce5e8` | `--color-wave-blue` | Visual estimate for the cool curve | | Fine Divider | Approximately `#d5d1cf` | `--color-rule` | Visual estimate from the mobile footer separators | The green landscape belongs to the photography. It supplies much of the opening screen's color without becoming a general interface token. Do not use that green as a replacement for the brown text or coral contact accent. ### Configured Shop Tokens The page also exposes these source custom properties: | Source property | Recorded value | Interpretation | | --- | --- | --- | | `--color-page-bg` | `#FFFFFF` | Configured background token; the actual homepage body computes to `#f5f5f5` | | `--color-text-head` | `#494949` | Configured heading color; sampled homepage headings use brown instead | | `--color-text-body` | `#9A9A9A` | Configured body color; not the primary homepage text color | | `--color-page-accent` / `--color-text-link` | `#386F81` | Available teal accent and link values; no evidence that they dominate this opening | | `--color-btn-bg` | `#e57d62` | Configured salmon button color; not proof of the exact contact-ring stroke color | | `--color-page-border` | `#D8DDDF` | Configured border token; not a measured footer-divider color | | `--color-input-border` | `#BDC1C2` | Configured input-border value; no visible form was inspected | | `--swiper-theme-color` | `#007aff` | Library token present in the snapshot; bright blue controls are not visible in the supplied opening | Use painted, component-specific evidence before general configuration tokens. The white page variable and blue carousel variable should not override the gray and brown appearance actually shown. No alternate theme or theme-switching control was observed. ## Tokens — Typography ### Japanese Editorial Serif - **Declared family:** `ryo-display-plusn, serif`. - **Typical weight:** `500` for navigation, the hero sentence, mission copy, section headings, and feature titles. - **Exception:** the contact-panel Japanese heading uses `400`. - **Role:** gives both emotional copy and navigation a composed, literary character. - **Suggested alias:** `--font-editorial`. The opening sentence is small, with generous spacing between characters. The later mission heading is considerably larger, while section headings occupy an intermediate scale. Avoid making every Japanese heading equally large or equally bold. ### Latin Display Serif - **Declared family:** `aw-conqueror-didot, serif`. - **Weight:** `400`. - **Confirmed roles:** species selectors or headings, social links, `OFFICIAL SNS`, and `PAGE TOP`. - **Typical tracking:** `0.15em`; `PAGE TOP` uses `0.1em`. - **Suggested alias:** `--font-latin`. This family supports the delicate, editorial character of the English labels. The individual computed styles of the English eyebrow spans inside section headings were not supplied; do not assume their exact sizes from the surrounding `h2`. ### Supporting Sans Serif **Body shell declaration:** ```css 'Helvetica Neue', Arial, ryo-gothic-plusn, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif ``` **Editorial paragraphs and legal links:** ```css ryo-gothic-plusn, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif ``` The order differs. Supporting paragraphs prioritize the Japanese Gothic family, while the body shell begins with Helvetica Neue and Arial. Keep this distinction when matching the declarations. Font asset URLs, licensing details, and successful font-file loads are outside the evidence. Use the named families only when available and appropriately licensed; otherwise retain explicit serif and sans-serif fallbacks. ### Type Scale Values below are measured computed values. Each size pair is **font size / line height**, in pixels. | Role | Desktop | Mobile | Tracking: desktop → mobile | | --- | --- | --- | --- | | Header utility caption | `11.70 / 11.70` | `9.04 / 9.04` | Normal → normal | | Hero sentence | `14.40 / 14.40` | `11.30 / 11.30` | `0.4em` → `0.4em` | | Mission heading | `45 / 90` | `26.38 / 43.79` | `0.3em` → `0.05em` | | Mission paragraphs | `16.20 / 53.95` | `15.83 / 35.13` | `0.05em` → `0.08em` | | Main section heading | `36 / 54` | `28.26 / 42.39` | `0.2em` → `0.2em` | | Supporting section paragraph | `14.40 / 34.20` | `14.13 / 31.09` | `0.1em` → `0.05em` | | Species selector / heading | `21.60 / 21.60` | `21.67 / 21.67` | `0.15em` → `0.15em` | | Feature title | `21.60 / 21.60` | `18.84 / 18.84` | `0.1em` → `0.05em` | | Contact-panel Japanese title | `30.60 / 30.60` | `22.61 / 22.61` | `0.2em` → `0.2em` | | Main footer text link | `16.20 / 16.20` | `15.07 / 15.07` | `0.1em` → `0.1em` | | Footer company sublink | `11.70 / 11.70` | `12.25 / 12.25` | `0.1em` → `0.1em` | | Footer social link | `12.60 / 12.60` | `14.13 / 14.13` | `0.15em` → `0.15em` | | Footer legal link | `10.80 / 10.80` | `12.25 / 12.25` | `0.1em` → `0.1em` | | Copyright | `10 / 10` | `11.30 / 11.30` | `0.1em` → `0.1em` | Mobile typography is not a uniformly reduced desktop scale. Social and legal text become larger, while large headings become smaller. The mission heading also tightens its tracking substantially. The computed root size is `14.4px` on desktop and approximately `15.0724px` on mobile. The underlying source formula was not supplied. Do not derive a universal viewport formula from those two measurements. ## Tokens — Spacing & Shapes **Density:** sparse opening, spacious editorial sections, compact shopping utilities, and a structured footer. Many desktop measurements fall on multiples of 9px. That is a useful descriptive rhythm, but the evidence does not establish a global 9px source variable. ### Spacing Scale | Use | Desktop measurement | Mobile measurement | | --- | --- | --- | | Gap between header utility links | `36px` | Approximately `18.83px` | | Main content frame | `1080px` wide at `x = 176px` | Full-width sections with approximately `18.84px` side padding | | Interior section-heading inset | `54px` inside the desktop frame | No additional inset beyond the mobile gutter | | Product-column gap | `36px` | Approximately `21.66px` | | Product-row gap from anchor boxes | `54px` | Approximately `32.97px` | | Supporting desktop paragraph inset | `45px` top, `54px` right | Zero paragraph padding; approximately `47.1px` between heading and paragraph in sampled sections | | Mission bottom padding | `180px` | Approximately `94.20px` | | Product and feature section bottom padding | `216px` | Approximately `117.75px` | | Footer top padding | `90px` | Approximately `70.65px` | | Footer bottom padding | `45px` | Approximately `47.10px` | Product anchor heights and child-heading positions are inconsistent in the captured state. The row gaps above describe the recorded anchor boxes, not a fully verified final card composition. ### Border Radius | Element | Treatment | Evidence | | --- | --- | --- | | Main and secondary photographs | Square corners | Original desktop screenshots | | Circular menu button | `50%` | Computed style | | Product and feature anchors | `0` | Computed style on anchors; image wrappers were not separately sampled | | Contact link | Circular lettering around an envelope | Visual geometry; the anchor itself reports `border-radius: 0` | | Footer | Full-width rectangular surface | Screenshot and computed geometry | There is no visible general-purpose card-shadow system. Photographic edges, text hierarchy, whitespace, and thin rules provide structure. ### Layout Measurements | Element | Desktop | Mobile | Evidence status | | --- | --- | --- | --- | | Header box | `1440 × 100.80px` | `390 × 82.38px` | Measured | | Brand mark | About `90 × 90px`, near `(45, 36)` | About `60 × 58px`, near `(15, 13)` | Screenshot estimate | | Menu button | `63 × 63px`, at `(1332, 25.19)` | `51.80 × 51.80px`, at `(320.13, 15.06)` | Measured | | Utility-link height | `46px` | `37.66px` | Measured | | Main portrait | About `432 × 576px`, near `(500, 213)` | Not visible in opening screenshot | Screenshot estimate | | Left portrait | About `180 × 240px`, near `(176, 360)` | Not visually established | Screenshot estimate | | Right portrait | About `180 × 240px`, near `(1076, 405)` | Not visually established | Screenshot estimate | | Hero sentence box | `14.41 × 403.20px`, near `(432.5, 298.4)` | `316.22 × 11.30px`, far below the initial viewport | Measured | | Contact seal | `111.59 × 111.59px`, `45px` from right and bottom | Not present in the mobile link inventory | Measured desktop box | | Scroll cue | `9 × 54.89px`, near `(40.5, 900.11)` | `79.92 × 38.61px`, far below the initial viewport | Measured | | Product anchor | `324px` wide | `164.84px` wide | Measured | | Contact panel | `1026 × 288px` | `352.34 × 165.80px` | Measured; appearance only partly established | | Footer | `1432 × 579.80px` | `390 × 1334.11px` | Measured | The main portrait width equals 30% of the tested desktop viewport, and the secondary width equals 12.5%. These are useful reconstruction proportions, not verified source formulas. The desktop composition centers near `x = 716px`, consistent with the recorded 1432px content width and an approximately 8px scrollbar area. ## Components ### Brand and Utility Header **Role:** preserve immediate access to shopping and help while leaving the opening photograph dominant. Place the brush-drawn circular brand mark at the upper left. Its Japanese lettering is part of the identity artwork; reproduce it with an authorized asset rather than ordinary text inside a CSS circle. At the upper right, use four icon-over-caption links in this order: 1. `マイページ` — account sign-in. 2. `カート` — shopping cart. 3. `商品一覧` — product listing. 4. `FAQ` — help center. The icons are fine brown outlines: a person, shopping bag, product package, and question symbol. Their desktop visual size is roughly 18–24px. The captions use the Japanese editorial serif, not the supporting sans serif. Finish with a separate white circular menu button. Its mark has two fine horizontal strokes of different lengths. It is not a filled pill and does not use a conventional three-bar icon. The desktop header background computes as transparent. The mobile header becomes an opaque canvas-colored strip with a visually thin lower divider. All four utility links remain visible at 390px; the mobile design does not collapse everything into the menu button. Header persistence during scrolling was not established. Its top placement is observed; fixed or sticky behavior should not be assumed from the opening screenshots alone. ### Opening Portrait Composition **Role:** introduce the family relationship before presenting products. The main photograph is a square-cornered 3:4 portrait showing a family and dog in a grassy landscape. At the inspected desktop size it is approximately 432px wide, with large areas of empty canvas above, below, and to either side. A smaller indoor family portrait sits to the left, and another sits to the right. Each is approximately 180px wide and 240px tall. They are significantly faded. The left image sits slightly higher than the right, so the composition avoids a mechanically aligned three-card row. The central photograph is about 2.4 times the width of a side photograph. Preserve this difference in hierarchy. Three equally sized portraits would lose the focus of the original composition. Place the sentence `君が来た日、家族がもっと、家族になれた。` vertically to the left of the central photograph. The measured desktop text box is only about 14.4px wide. Its right edge is approximately 53px away from the photograph's left edge. The photo remains unchanged across the supplied desktop states. A `01` and `05` indicator suggests five positions, but the other active portraits and their transitions were not observed. ### Pastel Curves **Role:** connect the separated photographs without filling the whitespace. Thin blush and blue-gray curves extend across the opening scene around its vertical middle. They rise and fall gently, crossing the open canvas around the portraits. Their contrast is much lower than that of the text or active photograph. Their positions differ between desktop captures. This supports a moving decorative layer, but does not establish the drawing technology, path count, animation duration, or relationship to scrolling. For an adaptation, use a decorative SVG with broad curves and approximately 1–2px strokes. Keep it separate from the image assets and hidden from assistive technology. Preserve an opaque, fully readable main photograph. ### Slide Indicator and Scroll Cue **Role:** provide quiet orientation and a route into the rest of the homepage. At the bottom center, a small `01` sits before a thin horizontal progress track, followed by `05`. The whole group is approximately 120px wide; the track is about 72px long. The active dark segment becomes longer between the supplied captures while the displayed index remains unchanged. This is evidence of a changing indicator, not proof that it measures elapsed time or scroll position. Do not assign an autoplay interval without additional testing. At the bottom left, the desktop scroll link is rendered primarily as a pale vertical arrow. The DOM identifies it as `SCROLL DOWN` and links to `#copy`. The DOM also contains `PREV` text and small mobile button boxes. Their activated behavior and complete visual controls were not supplied. ### Circular Contact Link **Role:** keep a support route visible without a large rectangular call to action. A small envelope sits inside a ring of coral `CONTACT US` lettering. The outer anchor measures approximately 111.6px square and sits 45px from the desktop viewport's lower and right edges in the captured state. The center is open: there is no filled disc or shadow. The rotating-looking perimeter lettering is the main decorative gesture, while the envelope remains an immediately recognizable action symbol. The link points to the recorded help-center request form. The contact lettering changes orientation between desktop states; speed and complete rotation behavior are unverified. The floating seal is absent from the mobile link inventory. Contact remains available through navigation and the footer. Fixed positioning is a reasonable implementation choice for a new desktop version, but was not directly established by the supplied style fields. ### Mission Statement **Role:** connect food quality, time together, and animal welfare. The DOM contains a prominent serif heading, `生まれてきてよかったね。`, followed by three groups of carefully broken copy. This section uses markedly more line spacing than ordinary commerce descriptions. The desktop heading measures `45px` with `90px` line height and `0.3em` tracking. Paragraphs measure `16.2px` with approximately `53.95px` line height. The resulting rhythm should feel like a short statement read slowly, rather than a dense block of product benefits. On mobile, the heading becomes approximately `26.38px`, and paragraph line height reduces to approximately `35.13px`. Preserve the paragraph grouping and comfortable reading width. The huge recorded offset before this section is not a spacing value to reproduce. This component's text and typography are supported by the DOM; its complete lower-page visual composition was not supplied. ### Product Category Navigation **Role:** direct visitors to categories for dogs and cats. The section combines `PRODUCTS LINEUP` with `商品一覧`. On desktop, a left-side control column contains `FOR DOGS`, `FOR CATS`, and a product-list link. The category links form a two-column arrangement to the right. Each species has four category destinations: - `FOOD` / `総合栄養食`. - `SNACK` / `おやつ`. - `SUPPLEMENT` / `サプリ`. - `TOPPING` / `トッピング`. Desktop category anchors are 324px wide with a 36px horizontal gap. The two species' anchor boxes overlap in the desktop DOM, while the `FOR DOGS` button is brown and `FOR CATS` is muted gray. This supports a tab-like arrangement; switching was not exercised. The mobile DOM is meaningfully different. `FOR DOGS` and `FOR CATS` are section headings, and their category groups occur sequentially. Each group retains two columns of approximately 164.84px-wide links. Do not require mobile users to discover a hidden species selector if adapting this behavior. Expose both groups in the mobile content flow. The category image assets and their final painted crop are not included in the supplied screenshots. Avoid inventing packaging colors, image backgrounds, or card decorations. Some child headings extend beyond their recorded parent rectangles, so final card heights cannot be confidently reconstructed from these samples. ### Three Brand Commitments **Role:** present the brand's quality principles as editorial destinations. The section contains `OUR FEATURES`, a Japanese heading, supporting text, and three numbered links: - `#01` / `国産へのこだわり`. - `#02` / `安心へのこだわり`. - `#03` / `素材へのこだわり`. At desktop size, the heading and introduction have adjacent boxes of roughly 512px each. The feature links are 324px wide, and their recorded top positions are staggered. However, all three anchors sit beyond the right edge in the sampled desktop state. Their settled on-screen arrangement is unverified. The mobile DOM places the links in a vertical sequence, with approximately 352px-wide outer boxes and internal horizontal padding of about 34.86px. Horizontal offsets remain in the recorded state. Reuse the numbered editorial hierarchy and restrained typography. A reliable static three-column desktop layout and single-column mobile layout would be a recommended fallback, not a verified recreation of the original reveal choreography. ### Animal Welfare Section **Role:** explain the broader purpose of the brand and link to detailed information. The recorded structure is an English label, `FOR ALL LIFE`, the Japanese heading `殺処分ゼロをめざして`, a supporting paragraph, and `詳細を見る`. The text uses the same 36px desktop / 28.26px mobile heading scale as the product and feature sections. Supporting copy uses the Gothic family with approximately 2.2–2.38 line height. The detail link has considerable horizontal space reserved to the right of its text: 90px on desktop and approximately 78.19px on mobile. Its exact decorative arrow or surrounding graphic was not supplied. Retain a generous text-and-direction relationship without claiming a specific unseen shape. ### Contact Panel **Role:** offer a larger support destination near the end of the main content. The DOM records a broad linked panel with `CONTACT` and `お問い合わせ`. Its desktop box measures `1026 × 288px`; the mobile box measures approximately `352.34 × 165.80px`. The text is near-white, and the Japanese title has `0.2em` tracking. The sampled anchor background is transparent, so the actual visible panel surface may be supplied by a descendant or another layer. No complete panel screenshot was supplied. Do not infer a specific photograph, solid fill, or gradient from its white text alone. ### Navigation Inventory and Cart State **Role:** provide access to the larger brand, commerce, and corporate ecosystem. The DOM includes product links, the three commitments, corporate information, recruitment, investor relations, news, a visiting clinic, animal welfare information, account access, cart, support, and social channels. The menu button is visible, but an open menu state is not. The DOM's navigation coordinates and transparent text values do not establish how the opened menu appears or animates. An empty-cart message also exists in the DOM. This establishes available copy, not a visually inspected drawer or modal. Do not invent cart-panel dimensions or transitions from that text. ### Footer **Role:** close the page with a complete, calm directory of destinations. Use the measured warm gray surface `#eae7e6`, brown primary links, and thin separators. The mobile screenshot is a footer crop: its legal links and copyright align with the footer DOM. It is not evidence of an opened navigation menu. The visible mobile anatomy is: 1. Full-width primary rows with small right-pointing chevrons. 2. A company-information group with indented sublinks and short blue-gray lead-in rules. 3. Separate animal welfare and clinic rows. 4. One horizontal row for account, cart, and contact, each with a small outline icon. 5. A blue-gray `OFFICIAL SNS` heading and tracked serif social links. 6. A quieter stack of legal and policy links. 7. A small sans-serif copyright line with ample lower clearance. The mobile footer uses approximately 18.84px side gutters. Main rows have generous vertical spacing despite their modest type size. Social links wrap into multiple rows: the short services share a row, while the longer Instagram labels occupy more space. The desktop DOM describes a multi-column footer, approximately 580px tall, with the brand mark on the left and link groups to the right. Mobile becomes a much taller single-column structure, approximately 1334px in total. The supplied mobile crop shows its lower portion rather than the whole footer. Some anchors report transparent computed text even though the screenshot shows painted labels. The full painting mechanism was not captured. Match the visible colors rather than copying `color: transparent` without its supporting styles. ## Tokens — Motion & Interaction ### Recorded Transition Values | Element | Recorded value | What is established | | --- | --- | --- | | Circular menu button | `background-color 0.4s` | A background-color transition is configured; the target color was not supplied | | Desktop contact link | `opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1)` | An opacity transition is configured | | Desktop species buttons | `color 0.8s cubic-bezier(0.22, 1, 0.36, 1)` | Category text-color transition is configured; switching was not tested | | Many navigation and legal links | `background-position-x 0.25s, color 0.25s` | A coordinated background-position and color treatment exists; its complete painted states are unknown | | Footer product-list link | `opacity 0.2s linear` | Short opacity transition is configured | | Two lower promotional links | `filter 1.7s cubic-bezier(0.16, 1, 0.3, 1)` | Filter transition is configured; filter endpoints and imagery are unknown | | Header utility links | `cubic-bezier(0.16, 1, 0.3, 1)` in the supplied transition field | Timing curve is reported without enough information to specify a complete animated effect | A value reported only as `all` does not establish a meaningful transition duration. Likewise, `animation: none` on the sampled text and anchor elements does not rule out animation on SVG descendants, pseudo-elements, or JavaScript-controlled layers. ### Visible State Differences - The opening sentence is absent in the first desktop capture and visible in the later captures. - The pastel curves occupy different positions. - The bottom progress segment grows while `01` remains displayed. - The circular contact lettering changes orientation. - The central family photograph stays the same. These observations support a gently animated opening. They do not establish exact reveal timing, autoplay duration, easing, drag support, slide order, pause controls, or scroll synchronization. **Recommended adaptation:** reveal essential content without waiting for animation initialization. Keep optional decorative motion slow and low amplitude. Animate the contact lettering separately from the envelope. Supply reduced-motion behavior and a way to pause any implemented automatic carousel. ## Surfaces | Layer | Appearance | Role | | --- | --- | --- | | Main canvas | Solid `#f5f5f5` | Large uninterrupted background for photography and editorial content | | Desktop header | Transparent | Lets the opening composition remain continuous | | Mobile header | Canvas gray with a fine bottom divider | Separates compact utilities from page content | | Menu control | White circular surface | Provides a small, clear control boundary | | Active portrait | Opaque photographic rectangle | Main visual focus | | Secondary portraits | Faded photographic rectangles | Suggest adjacent stories without competing with the active image | | Decorative curves | Very pale warm and cool strokes | Connect the composition across whitespace | | Footer | Solid `#eae7e6` with fine separators | Creates a quieter directory surface | | Lower contact panel | Near-white text; background unverified | Large support destination with incomplete surface evidence | Use surface changes sparingly. The visible design does not depend on nested rounded cards, blur, glossy gradients, or elevated panels. ## Imagery The opening photographs show people with animals in recognizable living environments. The central image includes a whole family and dog outdoors, with green grass and mountains supplying a broad natural setting. The secondary images show domestic interiors. The relationship between people and animals is the subject; the animals are not isolated product mascots. Preserve enough of the scene to show posture, distance, setting, and the animal's place within the family. The main portrait should remain natural in color and clear enough to hold attention against the gray canvas. Fade the secondary portraits at the compositing layer rather than permanently washing out all source photography. The central photograph and previews use an approximately 3:4 aspect ratio. Their square edges are important. Avoid circular crops, rounded portrait cards, heavy borders, or stretching the main photograph into a full-bleed landscape banner. The brand mark is expressive and brush-like, while utility icons are fine and controlled. Keep these roles distinct. Do not replace the logo with a generic outline pet icon or make all navigation icons imitate the brush texture. ### Observed Asset References No original image `src` values or asset-file paths were supplied. The following are visual references, not downloadable asset references. | Asset | Evidence | Implementation guidance | | --- | --- | --- | | Brush-circle brand mark | Desktop and mobile opening screenshots | Use an authorized original mark; preserve its irregular outline and lettering | | Outdoor family-and-dog portrait | All three desktop opening states | Use a 3:4 portrait crop with natural landscape context | | Left indoor family portrait | Desktop opening screenshots | Keep smaller, faded, and slightly higher than the right preview | | Right indoor family portrait | Desktop opening screenshots | Keep smaller, faded, and slightly lower than the left preview | | Account, cart, product, and FAQ icons | Desktop and mobile headers | Reproduce thin outline weight and icon-over-caption anatomy | | Contact envelope and lettering ring | Desktop opening screenshots | Separate the static action symbol from optional rotating perimeter text | | Product, feature, and promotional imagery | Not visually supplied | Do not invent source assets or claim observed art direction for these sections | Use original photography only when authorized. Replacement photography should preserve the human relationships, portrait framing, and calm natural light rather than copying the exact people or locations. ## Layout & Responsive Behavior ### Desktop Opening The composition occupies the opening viewport. The main portrait is centered in the available content area, with smaller photographs placed far to either side. Vertical copy sits beside the main portrait instead of above it. Utility controls occupy the upper right, while the scroll cue, progress indicator, and contact seal occupy separate positions along the bottom. This leaves most of the viewport as negative space. Do not fill that space with promotional badges, a large sales headline, product pricing, or several equally strong actions. ### Verified Mobile Header and Footer At 390 × 844, the header is approximately 82.38px high. The logo becomes roughly 60px wide, the menu circle becomes approximately 51.8px, and all four utilities remain visible. Captions shrink to approximately 9px. The footer changes from a desktop multi-column structure to stacked rows. Company sublinks stay visibly subordinate, while account, cart, and contact share one row. Social links wrap naturally rather than being forced into a tiny six-column grid. ### DOM-Supported Content Changes | Area | Desktop evidence | Mobile evidence | | --- | --- | --- | | Hero sentence | Tall narrow box; visibly vertical | Wide shallow box, suggesting horizontal composition; not visible in the opening capture | | Product species | Two selector buttons and overlapping category panels | Separate `h3` headings and sequential category groups | | Product categories | Two columns, 324px anchors | Two columns, approximately 164.84px anchors | | Feature introduction | Heading and paragraph beside one another | Heading followed by paragraph | | Feature destinations | Staggered boxes outside the viewport | Vertically sequenced boxes with unresolved horizontal offsets | | Contact panel | 1026px wide | Approximately 352px wide | | Main content gutters | Centered 1080px frame with interior offsets | Approximately 18.84px side padding | ### Capture Anomalies and Limits The desktop record reports a document height of 1000px even though the footer's coordinates extend beyond 10,000px. This prevents treating the reported document height as the full page length or proving a particular scrolling architecture. The mobile record reports approximately 57,764px of document height. The hero sentence appears around `y = 8188px`, and the mission section begins around `y = 50,225px`. The opening screenshot consequently shows a blank area below the header. These values are not credible design tokens for intentional whitespace. The cause is unresolved. Possible scroll, transform, or initialization behavior cannot be distinguished from the supplied evidence. The capture procedure waited for load and sampled stability, but that does not guarantee a semantically complete state. **Recommended fallback:** place a visible portrait and sentence in ordinary document flow on mobile, followed by the mission section. Keep all essential links and content reachable without a reveal script. The Quick Start follows that recommendation rather than reproducing the empty mobile opening. Only two viewport sizes were supplied. Breakpoints and interpolation formulas remain unverified. ## Do’s and Don’ts ### Do - Use `#f5f5f5` as the main canvas and `#2e2218` as the primary text color. - Let one family photograph dominate the opening. - Keep the main portrait approximately 2.4 times wider than the side previews on the inspected desktop composition. - Preserve square image edges and generous surrounding space. - Use Japanese serif text for the emotional sentence and principal headings. - Give Latin utility headings and social links deliberate letter spacing. - Keep the contact accent small and the decorative curves very pale. - Retain account, cart, products, and FAQ access in the mobile header. - Expose both species' category groups in the mobile content flow. - Use warm gray, thin rules, and clear grouping in the footer. - Separate observed geometry from recommended responsive behavior. ### Don’t - Don’t turn the opening into a dense sales banner or a large product-card grid. - Don’t give all three portraits equal prominence. - Don’t replace the vertical desktop sentence with an oversized horizontal slogan. - Don’t apply the source's generic white background or bright blue library token over the observed homepage palette. - Don’t add pill shapes, heavy shadows, glass effects, or thick icon strokes. - Don’t claim an autoplay interval or scroll-linked choreography from the still captures. - Don’t infer the opened menu or cart drawer from hidden DOM content. - Don’t copy the extreme mobile offsets into a new layout. - Don’t assume all mobile typography is smaller than desktop typography. - Don’t reproduce transparent text without the original supporting paint treatment. - Don’t invent image URLs, unseen packaging designs, or production credits. ## Recommended Implementation Additions These are recommendations for a new implementation, not verified features of the original page: - Give the menu button an accessible name and connect its expanded state to the navigation region. Implement keyboard focus handling and Escape dismissal if it opens an overlay. - Preserve visible utility captions, but enlarge their interactive areas where possible. The recorded mobile links are under 44px tall, and their captions are very small. - Give an implemented carousel explicit previous, next, and pause controls. Do not rely on a changing line alone to communicate progress. - Keep decorative wave SVGs and repeated contact lettering out of the accessibility tree. Give the actual contact link one clear accessible name. - Provide meaningful alternative text for the active family photograph. Avoid duplicate announcements from decorative previews. - If using desktop tabs, implement their keyboard behavior and selected states. Ensure mobile exposes both category groups and does not retain an accidentally hidden panel. - Render essential content visibly before optional animation begins. Test direct entry, script failure, resized viewports, and restored scroll positions. - Respect reduced-motion preferences. Stop decorative rotation and wave movement while preserving the photographs, copy, and links. - Check contrast for small footer text and pastel labels. A slightly darker legal-text color is preferable when readability requires it. - Load fonts with a reliable fallback strategy and reserve image aspect ratios to reduce layout shifts. ## Agent Prompt Guide ### Quick Color Reference - Main canvas: measured `#f5f5f5`. - Primary text and interface linework: measured `#2e2218`. - Footer: measured `#eae7e6`. - Menu disc: measured `#ffffff`. - Social eyebrow: measured `#93a7a9`. - Inactive species selector: measured `#c3c0be`. - Contact coral: visual approximation `#ff8f7a`. - Decorative curves: visual approximations `#eedbd8` and `#dce5e8`. - Avoid treating the library blue or configured shop teal as the dominant homepage accent. ### Overall Prompt “Create a Japanese pet food brand and commerce homepage with the restraint of an editorial family album. Use a pale gray canvas `#f5f5f5`, deep brown text `#2e2218`, Japanese serif headings, tracked Latin display labels, and natural family photography. Build a spacious desktop opening around one square-cornered 3:4 portrait, with two smaller faded portraits at the sides. Place a small vertical Japanese sentence beside the main image and faint blush and blue curves across the background. Keep account, cart, product, and FAQ links as fine outline icons over captions, followed by a white circular two-line menu button. Use a small bottom-center slide indicator and a coral circular contact link. Continue with mission copy, product categories, three numbered commitments, animal welfare information, and a warm gray directory footer. Keep mobile content visible in normal flow; do not reproduce the unresolved blank opening capture.” ### Example Component Prompts 1. **Opening portrait:** “At a 1440 × 1000 reference size, center an approximately 432 × 576px family portrait. Add approximately 180 × 240px faded portraits on either side, with the left slightly higher than the right. Place a 14.4px Japanese serif sentence vertically beside the main image with 0.4em tracking. Use broad empty gray space and square image edges.” 2. **Utility header:** “Create a restrained header with a brush-circle brand asset at left and four fine outline icon-over-label links at right: `マイページ`, `カート`, `商品一覧`, and `FAQ`. End with a 63px white circle containing two unequal thin strokes. At 390px, retain all four links and reduce the menu circle to approximately 52px.” 3. **Product navigation:** “Create a desktop species selector beside a two-column category area. Use brown and muted gray Didot-style species labels, square unboxed image regions, and paired English/Japanese category captions. On mobile, show separate dog and cat sections in sequence, each retaining a two-column grid with approximately 19px outer gutters.” 4. **Footer:** “Create a warm gray footer `#eae7e6` with brown serif navigation, thin dividers, small chevrons, and subordinate company links introduced by short blue-gray rules. Include a horizontal account/cart/contact row, a tracked `OFFICIAL SNS` label, wrapping serif social links, and readable muted legal text. Avoid cards and shadows.” 5. **Decorative motion:** “Use very slow optional movement for pale background curves and rotate only the contact link's perimeter lettering. Keep its envelope still. Treat timing as a new design choice, provide reduced-motion support, and never hide essential copy while waiting for animation.” ## Quick Start ### CSS Custom Properties This is an implementation adaptation, not recovered source CSS. It uses measured colors and representative desktop dimensions, estimated decorative colors, and a conventional root font size. The `48rem` breakpoint, mobile hero fallback, legal-text darkening, hover endpoints, and optional 32-second rotation are recommendations. The expected structure is a `.site-header` containing `.brand`, `.header-utilities`, and `.menu-toggle`; a `.hero` containing its photograph, caption, wave, and progress elements; section containers using `.content-frame`; and a `.site-footer` with a `.footer-grid`. ```css :root { /* Measured colors */ --color-canvas: #f5f5f5; --color-ink: #2e2218; --color-footer: #eae7e6; --color-control: #ffffff; --color-muted-accent: #93a7a9; --color-inactive: #c3c0be; --color-on-image: #fefcfb; /* Visual approximations */ --color-contact: #ff8f7a; --color-wave-blush: #eedbd8; --color-wave-blue: #dce5e8; --color-rule: #d5d1cf; /* Recommended darker legal text */ --color-legal: #6f6965; /* Recorded family declarations; provide licensed fonts separately */ --font-editorial: ryo-display-plusn, serif; --font-latin: aw-conqueror-didot, serif; --font-shell: 'Helvetica Neue', Arial, ryo-gothic-plusn, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; --font-body: ryo-gothic-plusn, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; --text-utility: 11.7px; --text-hero: 14.4px; --text-section: 36px; --text-body: 14.4px; --text-feature: 21.6px; --edge: 45px; --content-width: 1080px; --content-inset: 54px; --section-space: 216px; --product-gap: 36px; --menu-size: 63px; --seal-size: 111.6px; /* Recorded transition values */ --transition-menu: background-color 400ms; --transition-contact: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1); --transition-species: color 800ms cubic-bezier(0.22, 1, 0.36, 1); /* Recommended optional decorative duration */ --seal-period: 32s; } * { box-sizing: border-box; } body { margin: 0; color: var(--color-ink); background: var(--color-canvas); font-family: var(--font-shell); font-size: 14.4px; line-height: 1.8; } a { color: inherit; } button { font: inherit; } img { max-width: 100%; } :where(a, button):focus-visible { outline: 2px solid var(--color-ink); outline-offset: 5px; } .site-header { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; justify-content: flex-end; align-items: flex-start; gap: 45px; height: 100.8px; padding: 25.2px var(--edge) 0; } .brand { position: absolute; top: 36px; left: var(--edge); width: 90px; } .brand img { display: block; width: 100%; height: auto; } .header-utilities { display: flex; gap: 36px; padding-top: 5.8px; } .utility-link { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 46px; font-family: var(--font-editorial); font-size: var(--text-utility); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; } .utility-link svg { width: 22px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1; } .menu-toggle { position: relative; flex: 0 0 var(--menu-size); width: var(--menu-size); height: var(--menu-size); padding: 0; border: 0; border-radius: 50%; color: var(--color-ink); background: var(--color-control); cursor: pointer; transition: var(--transition-menu); } .menu-toggle::before, .menu-toggle::after { content: ''; position: absolute; right: 28%; height: 1px; background: currentColor; } .menu-toggle::before { top: calc(50% - 4px); width: 22%; } .menu-toggle::after { top: calc(50% + 4px); width: 42%; } .hero { position: relative; isolation: isolate; height: 100svh; min-height: 720px; overflow: hidden; } .hero__photo { position: absolute; margin: 0; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); } .hero__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .hero__main { z-index: 2; top: 50%; left: 50%; width: 30vw; } .hero__preview { z-index: 1; width: 12.5vw; opacity: 0.25; /* Estimated appearance, not a measured source value */ } .hero__preview--left { top: 48%; left: calc(50% - 31.25vw); } .hero__preview--right { top: 52.5%; left: calc(50% + 31.25vw); } .hero__caption { position: absolute; z-index: 3; top: 50%; left: calc(50% - 19.7vw); margin: 0; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--font-editorial); font-size: var(--text-hero); font-weight: 500; line-height: 1; letter-spacing: 0.4em; white-space: nowrap; } .hero__waves { position: absolute; z-index: 0; top: 42%; left: 0; width: 100%; height: 17%; overflow: visible; pointer-events: none; } .hero__waves path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .wave--blush { stroke: var(--color-wave-blush); } .wave--blue { stroke: var(--color-wave-blue); } .hero__progress { position: absolute; bottom: 45px; left: 50%; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); font-family: var(--font-latin); font-size: 12px; /* Visual approximation */ line-height: 1; letter-spacing: 0.1em; } .hero__track { width: 72px; height: 1px; background: #bdb8b5; } .hero__track::before { content: ''; display: block; width: var(--progress, 40%); height: 100%; background: var(--color-ink); } .contact-seal { position: fixed; /* Recommended placement; scroll persistence unverified */ z-index: 15; right: var(--edge); bottom: var(--edge); width: var(--seal-size); height: var(--seal-size); color: var(--color-contact); transition: var(--transition-contact); } .contact-seal__orbit { display: block; width: 100%; height: 100%; } .contact-seal__orbit text { fill: currentColor; font-family: var(--font-latin); } .contact-seal__icon { position: absolute; top: 50%; left: 50%; width: 20px; height: 16px; transform: translate(-50%, -50%); fill: none; stroke: currentColor; stroke-width: 1; } /* Motion is opt-in; keep the envelope outside the rotating SVG. */ .has-motion .contact-seal__orbit { animation: seal-turn var(--seal-period) linear infinite; transform-origin: center; } .contact-seal:hover .contact-seal__orbit, .contact-seal:focus-visible .contact-seal__orbit { animation-play-state: paused; } @keyframes seal-turn { to { transform: rotate(360deg); } } .content-frame { width: min(var(--content-width), calc(100% - 2 * var(--edge))); margin-inline: auto; padding-inline-start: var(--content-inset); } .editorial-section { padding-bottom: var(--section-space); } .section-title { margin: 0; font-family: var(--font-editorial); font-size: var(--text-section); font-weight: 500; line-height: 1.5; letter-spacing: 0.2em; } .section-copy { font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 2.375; letter-spacing: 0.1em; } .manifesto { padding-block: 90px 180px; text-align: center; font-family: var(--font-editorial); font-weight: 500; } .manifesto h2 { margin: 0 0 90px; font-size: 45px; font-weight: 500; line-height: 2; letter-spacing: 0.3em; } .manifesto p { margin: 27px auto 0; font-size: 16.2px; line-height: 3.33; letter-spacing: 0.05em; } .products-layout { display: grid; grid-template-columns: 230.4px minmax(0, 684px); align-items: start; gap: 54px; } .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px var(--product-gap); } .product-category { display: block; text-decoration: none; } .product-category img { display: block; width: 100%; height: auto; } .product-category h3 { margin: 18px 0 0; font-family: var(--font-editorial); font-size: 14.4px; font-weight: 500; line-height: 1.6; } .species-title, .species-trigger { font-family: var(--font-latin); font-size: 21.6px; font-weight: 400; letter-spacing: 0.15em; } .species-trigger { display: block; min-height: 67.5px; padding: 0 27px; border: 0; color: var(--color-ink); background: transparent; cursor: pointer; transition: var(--transition-species); } .species-trigger[aria-selected='false'] { color: var(--color-inactive); } .species-group + .species-group { margin-top: 64px; } /* Add tab behavior separately; preserve both groups in the mobile flow. */ .species-group[hidden] { display: none; } .site-footer { padding: 90px var(--edge) 45px; background: var(--color-footer); } .footer-grid { display: grid; grid-template-columns: 1fr 2fr 2fr 1.4fr; gap: 54px; max-width: 990px; margin-inline: auto; } .footer-primary { font-family: var(--font-editorial); font-weight: 500; letter-spacing: 0.1em; } .footer-social { font-family: var(--font-latin); letter-spacing: 0.15em; } .footer-social__label { color: var(--color-muted-accent); } .footer-social__links { display: flex; flex-wrap: wrap; gap: 12px 30px; } .footer-legal { display: grid; gap: 16px; color: var(--color-legal); font-family: var(--font-body); font-size: 12.25px; line-height: 1.6; letter-spacing: 0.1em; } @media (hover: hover) { .menu-toggle:hover { background: var(--color-footer); } .contact-seal:hover { opacity: 0.75; } } @media (max-width: 48rem) { :root { --edge: 18.84px; --content-inset: 0px; --text-utility: 9.043px; --text-hero: 11.304px; --text-section: 28.26px; --text-body: 14.13px; --text-feature: 18.84px; --section-space: 117.75px; --product-gap: 21.66px; --menu-size: 51.8px; } .site-header { height: 82.38px; gap: 16.03px; padding: 15.07px 18.08px 0; border-bottom: 1px solid var(--color-rule); background: var(--color-canvas); } .brand { top: 12.5px; left: 15.07px; width: 60px; } .header-utilities { gap: 18.83px; padding-top: 7.53px; } .utility-link { height: 37.66px; } .utility-link svg { width: 18px; height: 22px; } /* Recommended visible fallback, not the captured blank mobile state. */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: auto; min-height: 100svh; padding: 120px var(--edge) 110px; } .hero__main { position: relative; inset: auto; order: 2; width: min(70vw, 320px); transform: none; } .hero__preview { display: none; } .hero__caption { position: relative; inset: auto; order: 1; max-width: 100%; transform: none; writing-mode: horizontal-tb; line-height: 1.8; text-align: center; white-space: normal; } .contact-seal { display: none; } .hero__progress { bottom: 48px; } .content-frame { width: auto; margin-inline: var(--edge); } .products-layout { display: block; } .product-grid { row-gap: 32.97px; } .section-copy { line-height: 2.2; letter-spacing: 0.05em; } .manifesto { padding: 56px var(--edge) 94.2px; } .manifesto h2 { margin-bottom: 56.52px; font-size: 26.38px; line-height: 1.66; letter-spacing: 0.05em; } .manifesto p { font-size: 15.83px; line-height: 2.22; letter-spacing: 0.08em; } .site-footer { padding: 70.65px var(--edge) 47.1px; } .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .footer-primary { font-size: 15.07px; } .footer-social { font-size: 14.13px; } .footer-row { padding-block: 26px; border-bottom: 1px solid var(--color-rule); } } /* Additional recommendation for narrower phones. */ @media (max-width: 22.5rem) { .site-header { gap: 10px; } .header-utilities { gap: 10px; } .brand { width: 52px; } } @media (prefers-reduced-motion: reduce) { .has-motion .contact-seal__orbit { animation: none; } .menu-toggle, .contact-seal, .species-trigger { transition: none; } html { scroll-behavior: auto; } } ``` ### Minimal Hero Markup Replace the explicit image placeholders with authorized image URLs. They are not original asset paths. The SVG curves are a recommended approximation. The progress line is static in this starter and does not implement a carousel. ```html
A family standing with their dog in a grassy mountain landscape

君が来た日、家族がもっと、家族になれた。

``` Update the alternative text to describe the actual replacement photograph. Menu interaction, accessible carousel controls, species switching, and contact-seal SVG artwork require separate implementation. The CSS alone does not provide those behaviors. ### Tailwind v4 Token Mapping Optional aliases for a project already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first. ```css @theme inline { --color-canvas: #f5f5f5; --color-ink: #2e2218; --color-footer: #eae7e6; --color-contact: #ff8f7a; --color-muted-accent: #93a7a9; --font-editorial: ryo-display-plusn, serif; --font-latin: aw-conqueror-didot, serif; --text-utility: var(--text-utility); --text-section-heading: var(--text-section); --text-editorial-body: var(--text-body); --spacing-page-edge: var(--edge); --spacing-section-gap: var(--section-space); --spacing-category-gap: var(--product-gap); --radius-photo: 0px; --radius-control: 9999px; } ``` ## Sources & Evidence - [Original homepage](https://inuneko-seikatsu.co.jp/) and final URL: the same address, with HTTP 200 in the supplied record. - Retrieval timestamp: `2026-10-04T20:24:17.004Z`, corresponding to October 5, 2026, at 05:24:17.004 JST. - Three supplied original-page desktop screenshots at 1440 × 1000: opening composition, header, photographs, vertical copy, curves, slide indicator, scroll cue, and circular contact link. - Two supplied original-page mobile screenshots at 390 × 844: the header above an empty opening viewport, and the lower footer with navigation, social links, policies, and copyright. - Supplied rendered DOM and computed styles at both viewports: declared font families, colors, element rectangles, text hierarchy, link destinations, custom properties, and transition declarations. - The collection procedure reports waiting for document load, sampled layout and text stability, relevant finite animations, and visible image decoding within stated limits. It also reports scrolling through intermediate positions and temporarily pausing perpetual animations during readiness checks. These procedures do not guarantee that every delayed or script-controlled state completed. - No additional browsing, commands, asset retrieval, or interaction tests were performed for this reference. Linked destinations, opened menus, cart presentation, category switching, slide changes, and precise animation timing remain unverified. This reference describes the current supplied homepage evidence. Its mobile fallback, breakpoint choices, accessibility additions, and reusable code are explicitly recommended adaptations. The extreme mobile offsets and unresolved transformed positions are excluded from the reusable spacing system.