# unico — Style Reference

> An expansive white canvas, a vermilion statement, and a warm view of children discovering their abilities.

**Website:** [unico](https://unico-jp.net/)
**Original URL:** https://unico-jp.net/
**Final URL:** https://unico-jp.net/
**Theme:** light, with white, warm cream, and very pale pink sections
**Inspected:** September 29, 2026, at 13:39:23 UTC / 22:39:23 JST, according to the supplied browser record
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current corporate and service homepage: header, opening statement and photograph, philosophy, approach to developmental support, service types, school directory preview, recruitment, news, Instagram preview, and footer. Visual captures cover the opening, desktop service cards, and lower social/footer areas. Rendered DOM measurements cover the wider page. Linked pages and opened interaction states were not inspected.

unico uses a remarkably large red headline to introduce a site whose practical purpose is helping families understand its services and find a classroom. Small navigation, generous white space, and restrained rectangular buttons keep that statement clear. Photography supplies warmth: children making marks, moving through a play space, and sharing an activity with an adult. Loose yellow paint in the opening image and textured characters in the footer introduce play without turning the entire interface into an illustrated scene.

The homepage supports several audiences and destinations. Philosophy, service eligibility, classrooms, recruitment, news, and social activity remain distinct parts of the information architecture. Its reusable design logic is the relationship between a broad visual frame, a narrower reading column, emphatic red accents, and quiet supporting information.

## How to Read This Reference

- **Measured** means a value is present in the supplied rendered DOM or computed-style record. Coordinates are document coordinates unless otherwise stated.
- **Calculated** means arithmetic derived from those measurements; it does not establish the original CSS formula.
- **Estimated** means a visual approximation from the current-page screenshots. Image colors, unrecorded child typography, and several corner radii fall into this category.
- **Recommended** means implementation guidance for a new build, including the CSS and intermediate breakpoints below.
- Font-family declarations identify the reported CSS stack. Individual font files, successful font loading, and per-character fallback were not separately verified.
- The evidence contains selected elements, not every image, wrapper, pseudo-element, or stylesheet rule. Unrecorded details remain unknown.

## Tokens — Colors

### Default Palette

| Name | Value | Source / suggested token | Role and evidence |
| --- | --- | --- | --- |
| Vermilion | `#ee3b2c` | Source `--c-red`; alias `--color-brand` | Measured headline, service eyebrow, and filled action backgrounds. The wordmark and illustrated social label also appear red, but their asset colors were not independently sampled. |
| White | `#ffffff` | `--color-canvas` | Visible main canvas, footer, and service-card surfaces; explicitly measured as reversed button and school-title text. Several page containers have transparent computed backgrounds over this white canvas. |
| Black | `#000000` | `--color-ink` | Measured navigation, primary headings, and body copy. |
| Warm Cream | `#f8f3ec` | Source `--c-light-yellow`; alias `--color-service` | Measured full-width Service section background. |
| Pale Pink | `#fff7fd` | `--color-community` | Measured recruitment and Instagram section backgrounds. No source variable name was supplied for this color. |
| Dark Gray | `#444444` | Source `--c-dark-gray`; alias `--color-copy-muted` | Measured news headline color. |
| Utility Gray | `#888888` | Source `--c-gray`; alias `--color-utility` | Measured legal links and copyright text. |

White occupies most of the page. Vermilion establishes identity and marks selected destinations; cream and pink divide long stretches of content without heavy boundaries. The green, blue, violet, cyan, coral, and yellow in the footer are illustration colors, not a measured interface-category palette.

### Recorded Supporting Tokens

| Source token | Recorded value | Interpretation |
| --- | --- | --- |
| `--c-off-white` | `#f2f2f2` | Available neutral; its specific visible application was not established. |
| `--c-light-gray` | `#e1e4e3` | Available neutral; suitable as an implementation reference only after confirming its intended role. |
| `--swiper-theme-color` | `#007aff` | Recorded library-style variable. It does not establish a visible blue accent, working carousel controls, or autoplay behavior. |

Do not expand the interface palette merely because additional colors appear inside photographs or illustrations.

## Tokens — Typography

### Brand and Latin Display

**Reported stack:** `WelmoSansSerif-Medium, heisei-kaku-gothic-std, sans-serif`.

The opening phrase, `ACCELERATE / YOUR TALENT`, uses this stack at weight `500`, with a line height equal to its font size. Its impact comes from scale and compact line spacing rather than an exceptionally heavy declared weight. The headline is live text in the rendered DOM, while the wordmark is a separate visual asset.

At 1440px wide, the headline is `155.52px`. This happens to equal `10.8vw` at that viewport, but the supplied evidence does not prove a universal `10.8vw` source rule. At 390px it is explicitly `36px`, confirming a substantial responsive change.

### Japanese Navigation and Reading Text

**Reported Japanese stack:** `heisei-kaku-gothic-std, sans-serif`.

Desktop navigation uses `13px`, weight `700`. Philosophy text is bold and generously spaced; explanatory paragraphs are lighter. The approach-to-support paragraph uses weight `300`, while service descriptions and news use weight `500`.

The default body tracking is `0.75px` on desktop and `0.6px` on mobile. These values are inherited by larger and smaller descendants in the measurements. Do not apply `0.05em` independently to every heading: although that equals the body tracking at the default body sizes, it would make the large headline much more widely spaced.

### Type Scale

Values below are measured unless explicitly marked as estimates.

| Role | Desktop size / line height | Mobile size / line height | Weight | Notes |
| --- | --- | --- | --- | --- |
| Default body style | `15px / 15px` | `12px / 12px` | `500` | Individual reading blocks override this tight default line height. |
| Opening headline | `155.52px / 155.52px` | `36px / 36px` | `500` | Two explicit visual lines. |
| Desktop navigation | `13px / 13px` | Hidden in the captured closed state | `700` | Replaced visually by the menu control. |
| Philosophy paragraph | `32px / 64px` | `18px / 28px` | `700` | Strong editorial statement. |
| Support-approach heading | `32px / 32px` | `24px / 24px` | `700` | Label: `unicoの療育`. |
| Support-approach paragraph | `18px / 36px` | `15px / 28px` | `300` | Long-form explanation. |
| Service eyebrow | `20px / 20px` | `16px / 16px` | `500` | Red English label. |
| Service introductory statement | `36px / 64px` | `20px / 33px` | `700` | Three recorded desktop lines and five mobile lines. |
| Service-card red title | Approximately `24px` visually | Not directly recorded | Visually bold | The measured H3 is a wrapper; its inherited size does not describe every child. |
| Service description | `15px / 32px` | `12px / 22px` | `500` | Dense content with unusually open leading. |
| Standard action label | `15px / 15px` | `15px / 15px` | `700` | Label size is retained on mobile. |
| School name | `21px / 21px` | `14px / 14px` | `700` | White text near the lower part of the tile. |
| School address | `12px / 14.4px` | `12px / 14.4px` | `300` | Small supporting text. |
| Recruitment, news, Instagram headings | `24px / 24px` | `24px / 24px` | `700` | These headings retain their size. |
| Recruitment paragraph | `15px / 32px` | `15px / 28px` | `500` | Reading size remains relatively generous on mobile. |
| News headline | `15px / 32px` | `12px / 22px` | `500` | Dark gray rather than black. |
| Footer navigation | `15px / 15px` | `12px / 12px` | `500` | Compact secondary navigation. |
| Footer address | `15px / 22.5px` | `12px / 18px` | `500` | Four lines in both records. |
| Legal links and copyright | `10px / 10px` | `10px / 10px` | `500` | Gray, with inherited tracking. |

The computed `Times` family on the HTML element is not the visual page typeface. The body and its descendants provide the relevant font declarations.

## Tokens — Spacing & Shapes

The page does not expose a verified universal spacing scale. It combines large section intervals with compact navigation and carefully inset text. Reusable aliases should preserve those relationships rather than force all measurements onto one small unit.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Opening horizontal inset | `60px` | `22px` | Measured section padding. |
| Header and footer left alignment | `60px` | `25px` | Measured element coordinates. |
| Narrow reading-column inset | `255px` | `25px` | Measured Service and news padding at the inspected widths. |
| Headline top offset | `230px` | `115px` | Measured opening-section padding. |
| Headline-to-photo gap | Approximately `50px` | Approximately `25px` | Calculated from title bounds and screenshot image edges. |
| Desktop navigation gaps | Approximately `25px` | Not applicable | Calculated from adjacent link rectangles. |
| Service-card horizontal gap | Approximately `30px` | Cards stack | Desktop screenshot geometry. |
| Service-card text inset | Approximately `41px` from outer edge | Approximately `21px` from outer edge | Calculated from card alignment and paragraph coordinates; includes any edge thickness. |
| Service heading-to-description separation | `38px` wrapper bottom padding | `30px` wrapper bottom padding | Measured H3 padding. |
| Service section vertical padding | `180px` | `50px` | Measured. |
| School section vertical padding | `200px` top and bottom | `50px` top, `100px` bottom | Measured. |
| News section vertical padding | `160px` top and bottom | `60px` top, `90px` bottom | Measured. |
| News row vertical padding | `25px` | `25px` | Measured. |
| Social image gutters | Approximately `10px` | Approximately `10px` | Visual estimate. |
| Footer start to logo | Approximately `101px` | Approximately `51px` | Calculated from measured coordinates. |

The source custom property `--grid` is `195px` on desktop and `20px` on mobile. Its complete formula and usage were not supplied. It should not be mistaken for the actual page gutter or a CSS Grid column width.

### Border Radius

| Element | Radius | Status |
| --- | --- | --- |
| Header contact button | `22px` | Measured; half of its 44px height. |
| Standard section button | `5px` | Measured at both viewports. |
| Desktop opening photograph | Approximately `10px` | Visual estimate. |
| Mobile opening photograph | Approximately `5px` | Visual estimate. |
| Desktop service cards | Approximately `10px` | Visual estimate. |
| Social image tiles | Visually square | Screenshot observation. |

The distinction between the pill-shaped header contact action and the modestly rounded section buttons is important. There is no visible general-purpose shadow or elevated-card system in the supplied captures.

### Layout Measurements

| Element | Desktop | Mobile |
| --- | --- | --- |
| Document height | Approximately `9265.6px` | Approximately `7252.2px` |
| Opening content width | `1320px` | `346px` |
| Header logo link | `105 × 24.22px` | `83 × 19.14px` |
| Headline box | `1320 × 311.03px` | `346 × 72px` |
| Opening section height | `1471.03px` | `614.31px` |
| Opening photo frame | Approximately `1320 × 880px`, inferred | Approximately `346 × 402.31px`, inferred |
| Narrow content width | `930px` | `340px` |
| Standard action | `200 × 60px` | `230 × 55px` |
| Service cards | Approximately `450px` each | Approximately `340px`, stacked |
| School link/media boxes | Mostly `420 × 315px` | Mostly `315 × 236.25px` |
| Social grid width | Approximately `930px` | Approximately `340px` |
| Footer height | `441px` | Approximately `702.22px` |
| Mobile illustrated social link | Not separately measured on desktop | `340 × 175.31px` |

The desktop opening photo height is inferred from the visible top edge and opening-section end. Its bottom is not shown in the supplied desktop opening crop. One school link/media box is shorter than its peers: approximately `420 × 280px` desktop and `315 × 210px` mobile.

## Components

### Site Header

**Role:** brand identity, site-wide navigation, and direct contact access.

On desktop, place the red wordmark at the left, nine compact text links toward the right, and a red contact pill at the far edge. At 1440px, the logo begins at x = 60px; the first navigation label begins near x = 429px; the contact control occupies x = 1236–1380px. Its measured size is `144 × 44px`, with white 13px bold text and a 22px radius.

Navigation includes philosophy, support approach, usage, classrooms, news, blog, Instagram, recruitment, and company information. These are ordinary destination links in the evidence.

On mobile, the visible header contains an 83px-wide logo at x = 25px, y = 20px and a red `menu` label beside two thin horizontal strokes. The label appears approximately 10px and the strokes approximately 30px wide; those dimensions are visual estimates. The opened menu, dismissal behavior, and focus handling were not recorded.

The measured desktop HEADER wrapper is 84px high even though visible children extend lower. Do not use that wrapper height alone to infer the occupied header area. Fixed, sticky, and scroll-hide behavior are unverified.

### Opening Statement and Photograph

**Role:** introduce the brand's ambition with an editorial statement and a human scene.

The heading contains two lines: `ACCELERATE` and `YOUR TALENT`. It starts at x = 60px, y = 230px on desktop. The opening photograph begins around y = 591px after a 50px gap. Both share the same 1320px-wide frame.

On mobile, the title begins at x = 22px, y = 115px and uses two 36px lines. A 25px gap leads into a portrait-shaped photograph at x = 22px, y = 212px. The visible frame ends around y = 614px.

The current image shows a child painting with a brush beside an adult, surrounded by loose yellow sun marks against a warm cream setting. Preserve both subjects and the brush/sun relationship when selecting a mobile crop. The evidence does not establish whether the responsive presentation uses separate files or a crop of one source.

There is no action button over the image or within the heading block in the captured opening state. Multiple asset changes, autoplay, and slide transitions were not demonstrated.

### Philosophy Statement

**Role:** explain the value of recognizing both individuality and shared experience.

The paragraph uses bold Japanese text: `32px / 64px` on desktop and `18px / 28px` on mobile. A red `unicoの想い` link follows and leads to `/about/`.

On mobile, the paragraph starts approximately 90px after the opening image ends, at x = 24px with a 342px-wide text box. Its natural wrapping replaces the wider desktop line arrangement. The action is centered and measures `230 × 55px`.

The desktop paragraph lies 432px below this section's start. That offset is measured, but the intervening area is not shown in the supplied screenshots. Do not assume every unpictured interval is empty space or invent decorative content to fill it.

### Approach to Developmental Support

**Role:** introduce the organization's communication and support method.

The desktop text column is 510px wide at x = 110px. It contains the `unicoの療育` heading, a light-weight explanatory paragraph, and a `詳しく見る` action leading to `/service/`.

On mobile, the text becomes a 340px column at x = 25px. The heading is 24px; body text is `15px / 28px`; the action moves to the centered 230px-wide treatment.

Media and decoration surrounding this block were not visually supplied. Its text geometry is established, but a complete desktop image/text composition cannot be reconstructed from the selected elements alone.

### Service Overview

**Role:** explain the service framework and distinguish two age-related offerings.

A full-width cream section contains a centered 930px column on desktop. Start with the small red `Service` eyebrow, then a prominent black statement explaining the authorized service and user contribution described by the page. The statement is `36px / 64px`, with substantial separation before the cards.

At 390px, the section has 25px side padding and 50px vertical padding. The introductory statement becomes `20px / 33px` and occupies five recorded lines. This preserves emphasis while allowing the information to remain readable in a narrow column.

### Service Card

**Role:** pair a concrete activity photograph with an age group and service explanation.

Each desktop card has four parts:

1. A large photograph spanning the card width.
2. A bold red service title.
3. A smaller bold age-range line.
4. A black explanatory paragraph with generous line spacing.

The left card is `児童発達支援`, with the age label `0〜6歳のお子さま向け`; its photograph shows children drawing on a chalkboard. The right card is `放課後等デイサービス`, with `6〜18歳のお子さま向け`; its photograph shows children and an adult moving across colorful stepping equipment in a room with climbing holds.

Desktop cards are approximately 450px wide, separated by 30px. Visible photo panels are approximately `450 × 375px`. White text panels sit directly beneath them inside one rounded silhouette. Their text begins about 41px from the outer left edge. The cards align at the top but finish at different heights because the paragraphs occupy five and four lines. Preserve this content-driven height difference.

Mobile measurements place both text blocks at x = 46px with a width of 298px, confirming a single stacked arrangement and narrower internal padding. Descriptions become `12px / 22px`. Exact mobile photo rectangles and title-child font sizes were not supplied.

The service entries are not recorded as whole-card destination links. The shared `ご利用方法` action below them links to `/user/`.

### Standard Section Action

**Role:** provide a consistent next step without dominating the content.

Use a vermilion fill, white 15px bold text, and a 5px radius. The desktop rectangle is `200 × 60px`; mobile is wider and slightly shorter at `230 × 55px`.

Observed labels include `unicoの想い`, `詳しく見る`, `ご利用方法`, `お近くの教室を探す`, and `一覧を見る`. Their destinations vary, but the visual form is consistent. Most mobile examples are centered beneath their section copy.

Background and text-color transitions are declared. The resulting hover colors were not supplied.

### School Directory Preview

**Role:** expose individual classrooms and lead to the complete directory.

Six linked entries are present. Each combines a service category, school name, and address. White names and addresses are positioned near the lower portion of the tile. The precise photographs and any darkening overlay were not included in the supplied screenshots.

At 1440px, the first row begins at x = 60, 510, and 960px, with 420px-wide links and 30px horizontal gaps. A second row begins 345px lower. Most media/link rectangles have a 4:3 proportion, but one differs; do not describe every original tile as perfectly uniform.

At 390px, all six entries share the same y coordinate and progress horizontally at x = 25, 340, 655, 970, 1285, and 1600px. Each is 315px wide. This establishes a horizontal track with offscreen items. It does not establish drag handling, autoplay, arrow controls, or a particular carousel library.

The visible mobile text record omits category labels while retaining names and addresses. A centered directory action follows the track.

### Recruitment Band

**Role:** address potential staff within the same homepage.

The section uses the measured pale pink background `#fff7fd`. On desktop, the content aligns to the 930px reading column. Its 24px heading is followed by a 675px-wide paragraph and a 200px-wide action to the right.

On mobile, heading and paragraph occupy the 340px content width, with the action centered below. The heading remains 24px and the paragraph remains 15px, changing its line height from 32px to 28px.

The upper part of this section is not shown in the supplied visual crops. Its additional imagery or decoration cannot be specified from the recorded text positions.

### News List

**Role:** present recent organizational updates in a compact editorial format.

Three dated linked rows are recorded. On desktop, each row is 930px wide with 25px vertical padding. Headline text begins 120px to the right of the row's left edge, leaving a separate date area. Headlines use dark gray `#444` at `15px / 32px`.

On mobile, rows switch from a horizontal arrangement to block layout. Dates precede headlines, which use `12px / 22px`. The longest captured headline occupies three lines. The `一覧を見る` action moves from the desktop heading area to a centered position after the list.

Border properties were not included in the evidence. A fine neutral divider is a reasonable implementation addition, but its exact original color and thickness are unverified.

### Instagram Preview

**Role:** show everyday activity and connect visitors to the social profile.

Use a pale pink section containing a linked `Instagram` heading and a three-column photographic grid. The supplied crops show six image positions across two rows. The grid remains three columns on mobile.

Desktop width is approximately 930px, producing roughly 303px square tiles with 10px gaps. Mobile width is approximately 340px, producing roughly 107px square tiles with similar gaps. Tiles have square corners. Small white video symbols appear over some images as part of the captured feed presentation.

The heading is left-aligned within the desktop column and centered on mobile according to its measured link coordinates. The rendered record also contains an iframe `pointer-events: none` rule; individual post-tile activation was not tested. A direct profile link is established, but opening a post from each tile is not.

### Footer

**Role:** provide a final navigation map, organizational information, and a distinctive social invitation.

Desktop uses three broad regions: a small wordmark at x = 60px, navigation and address at x = 510px, and a colorful illustrated social graphic at the right. Navigation wraps into two rows. The address follows 50px below the navigation and names `株式会社unico`, independently establishing the operator in the inspected homepage.

The illustration consists of six overlapping abstract characters with thin hand-drawn facial features and visible texture. Its green, coral, blue, violet, cyan, and yellow shapes supply most of the footer's visual energy. A red `Instagram` label sits near its upper edge.

Mobile reorganizes the footer into a vertical sequence: logo, three navigation columns, address, a broad illustrated social link, legal links, and copyright. The first two navigation columns each contain four links; the third contains company information. Their measured x positions are approximately 25, 144.5, and 253.3px.

The mobile illustrated link measures `340 × 175.31px`. Its composition is wider relative to its height than the compact desktop cluster. Whether that difference comes from separate artwork or responsive arrangement was not established.

Legal links and copyright use 10px gray text. The current copyright reads `© 2026 unico inc.`. No production-credit claim is established by the inspected homepage evidence.

## Tokens — Motion & Interaction

| Treatment | Recorded value or behavior | Evidence limit |
| --- | --- | --- |
| Header background and opacity | `0.4s cubic-bezier(0.3, 0.1, 0.1, 1)` | Declared transition only; triggering conditions and destination states were not exercised. |
| Standard action background and text color | `0.3s cubic-bezier(0.3, 0.1, 0.1, 1)` | Declared transition only; hover colors remain unknown. |
| Sampled CSS animation fields | `none` | Applies to sampled elements at inspection time, not necessarily every image, pseudo-element, or script-driven effect. |
| Other transition entries | Often serialized as `all` | No usable duration or observed transition follows from that entry alone. |
| Mobile navigation | Closed menu control visible | Opening, closing, focus management, and scroll locking were not tested. |
| Mobile school layout | Horizontal sequence extending beyond the viewport | Layout is measured; swipe, snap, autoplay, and controls are unverified. |
| Navigation and section actions | Destination URLs present | Link activation and destination-page behavior were not inspected. |
| Social feed | Images visible; profile links present | Individual tile interaction and video playback are unverified. |

The inspection record reports initial observation, stability checks, image readiness, viewport changes, and vertical traversal. These support a settled visual reference but do not prove that all delayed content or interactions were captured. Perpetual animations were temporarily paused during readiness checks and then resumed; no particular perpetual animation was identified as a design finding.

For a new implementation, use the recorded short color-transition timings for restrained feedback. Do not invent a hero crossfade, animated characters, parallax, a sticky header, or automatic school movement and present them as original behavior.

## Surfaces

| Surface | Appearance | Structural purpose |
| --- | --- | --- |
| Main page | White, largely unboxed | Carries the headline, philosophy, school preview, and news. |
| Service field | Warm cream `#f8f3ec` | Groups service eligibility and the two offering cards. |
| Service cards | White with gently rounded outer corners | Separates photographs and descriptions from the cream field. |
| Recruitment and social fields | Pale pink `#fff7fd` | Marks community-oriented sections. |
| Actions | Solid vermilion with white text | Consistent navigational emphasis. |
| School tiles | Media areas with white text | Compact location entries; underlying contrast treatment is not fully supplied. |
| Footer | White with a subtle visible upper boundary | Returns to the clean canvas and gives the illustration room. Exact rule color was not measured. |

No glass surface, glossy interface gradient, or generalized drop-shadow elevation is established by the supplied captures. Texture belongs mainly to artwork and real photographed materials.

## Imagery

The photography presents activity rather than isolated promotional portraits. The current opening image connects a raised brush, a painted sun, a child, and an adult. Service photographs show drawing and physical play. The social grid introduces a less uniform, everyday documentary register.

Use warm light, believable skin tones, visible materials, and compositions that leave gestures understandable after cropping. Yellow paint is a significant part of the current hero artwork; it should not be replaced by a generic CSS blob. The footer uses deliberately imperfect shapes, fine expressive faces, and speckled texture.

### Observed Asset References

No direct image URLs, font-file URLs, or responsive image source sets were included in the evidence. The following identifies assets by their observed role rather than inventing filenames.

| Asset | Current-page observation | Available reference |
| --- | --- | --- |
| Wordmark | Small red symbol and `unico` lettering | Header and footer screenshots; homepage link destination. |
| Opening photograph | Child and adult with yellow painted sun marks | Desktop opening crop and complete mobile frame. |
| Early-development service image | Children drawing on a chalkboard | Desktop service capture. |
| After-school service image | Movement activity with stepping equipment and climbing holds | Desktop service capture. |
| School media | Tile-sized linked regions with white names and addresses | DOM geometry; image subjects not supplied visually. |
| Social photographs | Three-column activity and portrait grid | Desktop and mobile lower-page captures. |
| Footer social artwork | Six colorful textured character shapes | Desktop and mobile footer captures. |

Use original assets only when authorized and available, or commission suitable replacements. CSS can reproduce the frame and layout; it cannot reproduce the specific photographic direction or illustrated identity by itself.

## Layout & Responsive Behavior

The page uses two principal desktop widths: 1320px for broad visual content and 930px for reading-oriented sections at a 1440px viewport. Their resulting side margins are 60px and 255px. The support-approach copy is a separate 510px column beginning at x = 110px.

Mobile converges on a 340px content column with 25px side margins. The opening uses a slightly wider 346px frame with 22px margins, and the philosophy paragraph uses 342px with 24px margins. These small differences are measured; forcing every section onto one gutter would change the captured alignment.

| Feature | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Full navigation plus contact pill | Wordmark and closed menu control. |
| Opening headline | Very large two-line statement | Same two-line wording at 36px. |
| Opening image | Broad frame, approximately 3:2 | Portrait-shaped frame retaining both people. |
| Service cards | Two top-aligned columns | One vertical stack. |
| School entries | Three columns over two rows | One horizontal sequence of 315px-wide entries. |
| Standard actions | `200 × 60px` | `230 × 55px`, generally centered. |
| Recruitment | Paragraph and action share a row | Action follows the paragraph. |
| News rows | Date and headline beside each other | Date above headline. |
| News archive action | Beside the section heading | Below the list. |
| Social grid | Three columns | Still three columns. |
| Footer | Brand, information, and illustration across the width | Vertically sequenced groups with three small navigation columns. |

The shorter mobile document does not mean all content becomes smaller or disappears. Large desktop intervals compress, and the school preview becomes horizontal rather than two rows. Other areas become taller as text and service cards stack.

Only these two viewport widths were inspected. The original breakpoint positions, tablet layout, extreme-width behavior, safe-area treatment, and browser zoom behavior were not supplied. The Quick Start uses recommended breakpoints and should be validated between the two reference sizes.

## Do’s and Don’ts

### Do

- Preserve the white canvas and the dominant vermilion two-line opening statement.
- Keep headline tracking close to the measured fixed pixel values.
- Distinguish the broad visual frame from the narrower reading column.
- Let real activities, yellow paint, and textured illustration provide warmth.
- Use cream for the service section and very pale pink for recruitment and social content.
- Retain modest 5px section-button corners and the separate contact-pill treatment.
- Allow service cards to finish at different heights when their content differs.
- Preserve the mobile school track and three-column social grid as distinct patterns.
- Keep classroom discovery, service guidance, recruitment, and news visibly accessible.
- Treat the footer as a substantial navigational and visual destination.

### Don't

- Don't use the thumbnail or unrelated material to select current photographs or navigation labels.
- Don't apply heavy rounded-card styling or shadows throughout the page.
- Don't make every background cream or pink; white is the dominant surface.
- Don't turn the footer illustration colors into an arbitrary interface badge system.
- Don't scale the 155.52px headline proportionally all the way down to mobile without a responsive adjustment.
- Don't use 12px text for every mobile paragraph; several important reading blocks remain 15px or 18px.
- Don't assume the inherited H3 font size is the visible service-title size.
- Don't stretch the desktop photo into a mobile frame that loses the people or painting gesture.
- Don't replace all horizontal and multi-column components with one generic mobile stack.
- Don't claim carousel, menu, hover, or scroll behavior that was not exercised.

## Recommended Implementation Additions

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

- Give the menu button an accessible name, `aria-expanded`, and `aria-controls`; implement keyboard dismissal and sensible focus handling for the chosen menu pattern.
- Provide a visible focus outline and adequate hit areas around small navigation and legal links.
- Check small text contrast. Calculated from the recorded colors, white on `#ee3b2c` is approximately 4.0:1, below the usual 4.5:1 requirement for small text. A separately documented functional red such as `#c92f24` can improve action-label contrast while retaining the source brand token elsewhere.
- Review the 10px gray legal text and 12px mobile descriptions for readability. Increasing them requires rechecking wrapping and section height.
- Give informative photos suitable alternative text. Treat purely decorative paint and character layers as decorative.
- Ensure every school remains reachable by keyboard and touch. A native horizontal scroller is a practical fallback when no carousel behavior is required.
- Allow long school names to wrap within the tile. Some recorded title bounds extend beyond their link's nominal inset; do not reproduce potential clipping without testing.
- Reserve image dimensions to prevent layout shifts and provide responsive crops without distorting artwork.
- Provide a direct social-profile link and a useful fallback when the embedded feed is unavailable.
- Respect reduced-motion preferences if adding transitions or scripted movement beyond the measured color changes.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas and service-card interiors: white `#ffffff`.
- Brand statement and source action fill: vermilion `#ee3b2c`.
- Main copy: black `#000000`.
- Service section: cream `#f8f3ec`.
- Recruitment and social sections: pale pink `#fff7fd`.
- News headlines: `#444444`.
- Legal utilities: `#888888`.
- Bright secondary colors belong primarily to the photographs and illustrated footer.

### Overall Prompt

“Create a Japanese child-development support organization's corporate homepage using a spacious white canvas, vermilion `#ee3b2c`, compact Japanese navigation, and an oversized two-line English statement. Use the supplied licensed sans-serif fonts when available, with a 155.52px headline at 1440px and 36px at 390px. Follow the statement with a large rounded photograph of a child and an adult engaged in painting. Alternate open white content with a cream service section and pale pink community sections. Use two white photo-led service cards on desktop, a classroom directory preview, compact dated news, a three-column social grid, and a footer with colorful textured character artwork. Preserve the practical information architecture and the distinct mobile layouts. Do not invent unverified animation.”

### Example Component Prompts

1. **Opening:** “At 1440px, use a 1320px-wide frame with 60px side margins. Place a vermilion two-line headline at y = 230px, using 155.52px type and equal line height. Leave 50px before a gently rounded warm photograph. At 390px, use 22px side margins, 36px type, a 25px image gap, and a portrait crop that retains the child, adult, and raised brush.”
2. **Service cards:** “Place two approximately 450px white cards in a 930px column over `#f8f3ec`, separated by 30px. Each card has a large activity photograph, a red service title, a bold age label, and black text with open leading. Use small rounded outer corners and no shadow. Align card tops and allow content-driven heights. Stack the cards on mobile.”
3. **School preview:** “Create six location links in a three-column desktop arrangement with 420px-wide tiles and white names and addresses near the lower edge. On mobile, use a horizontal sequence of 315px-wide entries starting 25px from the viewport edge. Make long names readable and keyboard access reliable. Treat scrolling and controls as implementation choices, not verified original behavior.”
4. **Social and footer:** “Keep the social feed at three columns on both desktop and mobile, with square images and approximately 10px gutters over pale pink. Follow it with a white footer: red wordmark, compact navigation, address, six colorful textured character shapes, an Instagram link, and small legal utilities. On mobile, use three compact navigation columns above the address and wide illustration.”
5. **News:** “Use a narrow editorial list with dated entries, dark-gray Japanese headlines, and 25px vertical row padding. Reserve a 120px date column on desktop, then place the date above the headline on mobile. Put the archive action beside the desktop heading and below the mobile list.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not recovered source code. It reproduces measured endpoint sizes where possible. The 767px and 1199px breakpoints, intermediate scaling, hover color, focus outline, news dividers, and native school scrolling are recommendations.

Load the recorded fonts only when the required files and licenses are available. No font or image asset URLs were supplied. The CSS assumes these structures: two spans inside `.hero-title`; an image inside `.hero-media`; an image followed by `.service-card__body` inside each service card; school links inside `.school-track`; and separate logo, information, and social-art groups inside `.footer-grid`.

Service-title child metrics are approximations. The desktop service photo ratio follows the screenshot; the mobile 4:3 crop is a recommended starting point because its exact image bounds were not recorded. Footer artwork should use suitable responsive assets rather than forced distortion.

```css
:root {
  /* Measured palette and descriptive aliases */
  --color-brand: #ee3b2c;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-service: #f8f3ec;
  --color-community: #fff7fd;
  --color-copy-muted: #444444;
  --color-utility: #888888;
  --color-line: #e1e4e3;

  /* Recommended functional variant; not a measured source state */
  --color-action-dark: #c92f24;

  /* Reported stacks; font loading is supplied by the implementation */
  --font-brand: 'WelmoSansSerif-Medium',
    'heisei-kaku-gothic-std', sans-serif;
  --font-japanese: 'heisei-kaku-gothic-std', sans-serif;
  --tracking: 0.75px;

  /* Desktop endpoints */
  --gutter: 60px;
  --width-wide: 1320px;
  --width-reading: 930px;
  --text-hero: min(10.8vw, 155.52px);
  --button-width: 200px;
  --button-height: 60px;
  --radius-action: 5px;
  --radius-media: 10px;
  --ease-brand: cubic-bezier(0.3, 0.1, 0.1, 1);
  --motion-action: 300ms;
  --motion-header: 400ms;
}

* {
  box-sizing: border-box;
}

body.unico-page {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--tracking);
}

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

.unico-page button,
.unico-page a {
  -webkit-tap-highlight-color: transparent;
}

.wide,
.reading {
  margin-inline: auto;
  width: calc(100% - 2 * var(--gutter));
}

.wide {
  max-width: var(--width-wide);
}

.reading {
  max-width: var(--width-reading);
}

/* Recommended positioning for the captured opening state */
.site-header {
  position: absolute;
  z-index: 10;
  inset: 55px var(--gutter) auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition:
    background-color var(--motion-header) var(--ease-brand),
    opacity var(--motion-header) var(--ease-brand);
}

.site-logo {
  display: block;
  flex: 0 0 105px;
  width: 105px;
  margin-top: 2px;
}

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

.header-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  font-family: var(--font-japanese);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.header-nav a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.header-nav .header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  min-height: 44px;
  margin-left: 18px;
  border-radius: 22px;
  color: #fff;
  background: var(--color-brand);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 72px;
  min-height: 44px;
  margin-block: -7px;
  padding: 0;
  border: 0;
  color: var(--color-brand);
  background: transparent;
  font: 500 10px / 1 var(--font-brand);
  letter-spacing: var(--tracking);
  cursor: pointer;
}

.menu-icon {
  position: relative;
  width: 30px;
  height: 8px;
}

.menu-icon::before,
.menu-icon::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
}

.menu-icon::before { top: 0; }
.menu-icon::after { bottom: 0; }

.hero {
  padding: 230px var(--gutter) 0;
}

.hero-title {
  margin: 0;
  color: var(--color-brand);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking);
}

.hero-title span {
  display: block;
}

.hero-media {
  display: block;
  width: 100%;
  margin-top: 50px;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 3 / 2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-width);
  min-height: var(--button-height);
  max-width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-action);
  color: #fff;
  background: var(--color-brand);
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-action) var(--ease-brand),
    color var(--motion-action) var(--ease-brand);
}

/* Optional accessible fill for small white action labels */
.action--accessible,
.header-nav .header-contact--accessible {
  background: var(--color-action-dark);
}

/* Recommended hover destination; source endpoint is unverified */
@media (hover: hover) {
  .action:hover,
  .header-nav .header-contact:hover {
    background: var(--color-action-dark);
  }
}

.service-section {
  padding-block: 180px;
  background: var(--color-service);
}

.service-eyebrow {
  margin: 0 0 36px;
  color: var(--color-brand);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.service-lead {
  margin: 0 0 100px;
  font-size: 36px;
  font-weight: 700;
  line-height: 64px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px;
}

.service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #fff;
}

.service-card > img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}

.service-card__body {
  padding: 48px 40px;
}

.service-card h3 {
  margin: 0;
  padding-bottom: 38px;
}

/* Approximate child metrics consistent with the visible hierarchy */
.service-card__title {
  display: block;
  color: var(--color-brand);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.service-card__age {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
}

.service-card p {
  margin: 0;
  font-family: var(--font-japanese);
  font-size: 15px;
  line-height: 32px;
}

.school-section {
  padding-block: 200px;
}

.school-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.school-card {
  position: relative;
  display: block;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

/* A uniform ratio is an adaptation; one recorded source tile differs */
.school-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.school-card__copy {
  position: absolute;
  right: 40px;
  bottom: 20px;
  left: 40px;
}

.school-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.school-card p {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  line-height: 14.4px;
}

/* Verify white-text contrast against each selected photograph */
.news-section {
  padding-block: 160px;
}

.news-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  padding-block: 25px;
  border-bottom: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
}

.news-row h3 {
  margin: 0;
  color: var(--color-copy-muted);
  font-family: var(--font-japanese);
  font-size: 15px;
  font-weight: 500;
  line-height: 32px;
}

.social-section {
  padding-block: 75px 110px;
  background: var(--color-community);
}

.social-heading {
  margin: 0 0 60px;
  font-size: 24px;
  line-height: 1;
}

.social-heading a {
  color: inherit;
  text-decoration: none;
}

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

.social-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.site-footer {
  padding: 100px var(--gutter) 45px;
  background: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 450px 450px minmax(0, 1fr);
}

.footer-logo img {
  width: 105px;
  height: auto;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 30px;
  font-family: var(--font-japanese);
  font-size: 15px;
  line-height: 1;
}

.footer-nav a,
.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-address {
  margin: 50px 0 0;
  font-family: var(--font-japanese);
  font-size: 15px;
  font-style: normal;
  line-height: 22.5px;
}

.footer-social {
  justify-self: end;
  width: min(100%, 300px);
}

.footer-social img {
  width: 100%;
  height: auto;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-top: 50px;
  padding-left: 450px;
  color: var(--color-utility);
  font-size: 10px;
  line-height: 1.2;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-meta p {
  margin: 0;
}

.unico-page :focus-visible {
  outline: 2px solid var(--color-copy-muted);
  outline-offset: 4px;
}

/* Recommended intermediate layout; source breakpoint is unknown */
@media (max-width: 1199px) {
  .header-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .footer-grid {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
  }
  .footer-meta { padding-left: 0; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 25px;
    --tracking: 0.6px;
    --text-hero: clamp(28px, 9.23077vw, 36px);
    --button-width: 230px;
    --button-height: 55px;
    --radius-media: 5px;
  }

  body.unico-page { font-size: 12px; }

  .site-header {
    inset: 20px 25px auto;
  }

  .site-logo {
    flex-basis: 83px;
    width: 83px;
    margin-top: 0;
  }

  .hero { padding: 115px 22px 0; }

  .hero-media {
    margin-top: 25px;
    aspect-ratio: 346 / 402.3125;
  }

  .service-section { padding-block: 50px; }

  .service-eyebrow {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .service-lead {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 33px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  /* Recommended mobile crop, not a measured image rectangle */
  .service-card > img { aspect-ratio: 4 / 3; }
  .service-card__body { padding: 30px 20px; }
  .service-card h3 { padding-bottom: 30px; }
  .service-card__title { font-size: 20px; line-height: 25px; }
  .service-card__age { font-size: 12px; line-height: 18px; }
  .service-card p { font-size: 12px; line-height: 22px; }

  .school-section { padding-block: 50px 100px; }

  /* Native scrolling is a recommended accessible fallback */
  .school-track.wide {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(315px, calc(100vw - 75px));
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 6px 25px;
    overflow-x: auto;
    scroll-padding-inline: 25px;
    scroll-snap-type: x proximity;
  }

  .school-card { scroll-snap-align: start; }
  .school-card__copy { right: 10px; bottom: 10px; left: 10px; }
  .school-card h3 { font-size: 14px; }
  .school-category { display: none; }

  .news-section { padding-block: 60px 90px; }
  .news-row { display: block; }
  .news-row time { display: block; margin-bottom: 25px; }
  .news-row h3 { font-size: 12px; line-height: 22px; }

  .social-section { padding-block: 45px 55px; }
  .social-heading { margin-bottom: 40px; text-align: center; }

  .site-footer { padding: 50px 25px; }
  .footer-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-logo img { width: 83px; }

  .footer-nav {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(4, auto);
    gap: 14px 50px;
    font-size: 12px;
  }

  .footer-address { font-size: 12px; line-height: 18px; }
  .footer-social { width: 100%; justify-self: stretch; }
  .footer-meta { display: block; padding-left: 0; }
  .footer-meta p { margin-top: 25px; }
}

/* Recommended accessibility behavior */
@media (prefers-reduced-motion: reduce) {
  .unico-page *,
  .unico-page *::before,
  .unico-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The CSS supplies the principal visual components, not an implemented menu or a complete homepage. Add semantic landmarks, actual content, licensed imagery, the unpictured section compositions, and any explicitly chosen interactions. The illustrated footer and the opening photograph require art direction beyond these rules.

### Tailwind v4 Token Mapping

Optional aliases for an implementation that already uses Tailwind v4. This is not evidence that the original website uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-brand: #ee3b2c;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-service: #f8f3ec;
  --color-community: #fff7fd;
  --color-copy-muted: #444444;
  --color-utility: #888888;

  --font-brand: 'WelmoSansSerif-Medium',
    'heisei-kaku-gothic-std', sans-serif;
  --font-japanese: 'heisei-kaku-gothic-std', sans-serif;

  --text-display: var(--text-hero);
  --text-action: 15px;
  --text-section: 24px;
  --text-legal: 10px;

  --spacing-page-gutter: var(--gutter);
  --spacing-reading-width: 930px;
  --spacing-wide-width: 1320px;
  --radius-action: 5px;
  --radius-media: var(--radius-media);
}
```

## Sources & Evidence

- **Original and final website:** [https://unico-jp.net/](https://unico-jp.net/). The supplied inspection reports HTTP 200 and no URL change. The rendered title is `unico 児童発達支援・放課後等デイサービス`.
- **Capture record:** September 29, 2026, at `2026-09-29T13:39:23.218Z`; desktop viewport `1440 × 1000`, mobile viewport `390 × 844`. Recorded document heights are approximately 9265.6px and 7252.2px.
- **Visual evidence:** supplied current-page desktop opening, service-card, and social/footer captures; supplied mobile opening and social/footer captures. These establish visible imagery, compositions, corner treatments, and selected responsive differences.
- **Rendered evidence:** supplied element rectangles, font stacks, computed type sizes, colors, section padding, button dimensions, custom properties, transition declarations, text, and destination links.
- **Navigation scope:** links to service, company, classroom, recruitment, news, and the social profile were recorded on the homepage. Their destination content was not independently opened for this analysis.
- **Interaction scope:** load observation, viewport changes, readiness checks, and vertical traversal were reported. Menu activation, hover endpoints, keyboard states, school dragging, autoplay, and social tile activation were not documented.
- **Limitations:** exact source breakpoints, complete stylesheets, image URLs, font files, image alternative text, responsive source sets, and several intermediate visual sections were not supplied. Values identified as estimates or recommendations must not be treated as recovered source declarations.

This reference analyzes the supplied current-page evidence. No additional browsing, command execution, or file inspection was performed.