# CLOUD / クラウド株式会社 — Style Reference

> A bright blue corporate website that turns uncertain business ideas into buoyant people, clouds, and tangible systems.

**Website:** [cloudsoft.co.jp](https://www.cloudsoft.co.jp/)
**Original URL:** https://www.cloudsoft.co.jp/
**Final URL:** https://www.cloudsoft.co.jp/
**Theme:** light, with large cyan and deep-blue fields
**Inspected:** September 29, 2026; supplied evidence retrieved at 12:43:17 UTC / 21:43:17 JST
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels
**Scope:** the current corporate homepage. Visual evidence covers the desktop hero, a middle carousel section, the desktop footer, and mobile top and footer views. Rendered DOM and computed styles extend across the homepage. The cookie notice remains open in all supplied captures. Linked pages and expanded navigation states were not inspected.

CLOUD presents a Nagoya software and systems company through unusually cheerful corporate imagery. A saturated cyan canvas, white graphic lettering, airborne figures, and scattered business symbols make technical consultation feel approachable. The supporting interface is more restrained: Noto Sans JP paragraphs, substantial headings, broad white sections, and consistent pill-shaped links.

This is a long corporate homepage with several purposes: explaining the company, showing services and development examples, publishing notices, receiving inquiries, and directing recruitment traffic. Its identity comes from the relationship between playful illustration and orderly information. Preserve that combination when adapting the design.

## How to Read This Reference

- **Measured** means supplied computed styles or element rectangles. Rectangle values are rounded where extra decimal precision adds little value.
- **Visual estimate** means an approximate reading of the current screenshots, without a supplied computed declaration or pixel-sampling result.
- **Derived** means a calculation from measured values. A derived relationship does not establish the original CSS implementation.
- **Recommended** means guidance for a new implementation, including the CSS Quick Start. It is not a claim about an existing feature.
- All custom-property names below are reusable aliases. The evidence exposed no original custom properties.
- Computed font stacks identify the requested families; the supplied evidence does not independently verify every downloaded font file.
- Some sampled wrappers have zero height while their descendants visibly paint. Use the screenshots and relevant child geometry together; do not reproduce a zero-height visible header.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Cloud Cyan | `#04A7FC` | `--color-cyan` | Measured on the NEWS badge and recruitment button text; visually matches the dominant cyan fields, whose ancestor fills were not individually sampled |
| Deep Blue | `#0B41A0` | `--color-blue` | Measured on introductory headings, filled links, and white-button text |
| White | `#FFFFFF` | `--color-white` | Measured footer surface, button surfaces, navigation text, and reversed section text |
| Contact Orange | `#FF6A24` | `--color-contact` | Measured consultation button and mobile fixed contact link |
| Body Ink | `#2F3C3F` | `--color-ink` | Measured body copy, service headings, footer links, and address text |
| News Gray | `#B8C5D5` | `--color-meta` | Measured date labels |
| Caption Gray | `#778092` | `--color-caption` | Measured problem-carousel captions |
| Notice Red | `#F44656` | `--color-alert` | Measured heading in the impersonation warning |
| Systems Green | `#008840` | `--color-systems` | Measured development-example category labels |
| Web Orange | `#FF8800` | `--color-web` | Measured WEB-service category label; distinct from contact orange |

The palette has a clear hierarchy. Cyan establishes the brand environment, deep blue anchors information and navigation, and contact orange highlights consultation. Green and the second orange belong to project categories. Illustration colors extend the palette locally without becoming additional general-purpose UI accents.

### Estimated Decorative Colors

| Treatment | Approximation | Evidence limit |
| --- | --- | --- |
| Darker wave beneath cyan | Around `#0089F8` | Visual estimate; the original decorative asset or fill was not supplied |
| Pale blue overlapping wave | Around `#75BEDF` | Visual estimate from the middle desktop capture |
| Cookie-notice veil | Translucent medium blue | Exact fill and opacity are unavailable; `rgb(11 65 160 / 70%)` is a suggested approximation |
| Inactive carousel cards | White surfaces tinted strongly by cyan | Could result from opacity, an overlay, or both; the implementation was not exposed |

The cookie notice changes the apparent colors of everything beneath it, including the floating contact control and footer logos. Do not treat those composited colors as their original fills.

### Theme Presets

Only one site theme is evidenced. The white-on-cyan opening header and the dark-on-white scrolled header are navigation states within that theme, not selectable color presets. No theme switch was supplied or exercised.

## Tokens — Typography

### Noto Sans JP — Japanese Content

- **Computed stack:** `"Noto Sans JP", sans-serif`.
- **Body:** `16px`, weight `500`, line height `27.2px`, equivalent to `1.7`.
- **Headings and prominent controls:** generally weight `700`.
- **Footer group labels:** weight `500`, despite their larger size.
- **Tracking:** normal in the sampled elements.

The body size remains 16px on mobile. Responsive changes mainly affect heading size, column count, available width, and spacing. This keeps the lengthy Japanese explanations readable.

### Lato — English Tagline and News

- **Computed stack:** `Lato, sans-serif`.
- **Hero tagline:** `18px / 30.6px`, weight `500`, in both viewports.
- **News dates:** `14px / 23.8px`, weight `700`.
- **NEWS badge:** `14px / 14px`, weight `700`.

The English tagline is a quiet introduction above the expressive Japanese lettering. It should not compete with that artwork.

### Poppins — Footer Utility Heading

The `OWN SERVICES` label uses `Poppins, sans-serif`, `16px / 27.2px`, weight `700`. Its role is narrowly evidenced. Do not extend Poppins to every English label by assumption.

### Graphic Headline and Logo

The visible hero phrase, `ふわっとを、カタチに。`, combines soft, swollen forms with more angular lettering. It behaves visually as a graphic composition. The sampled H1 has no extracted text, although its computed font size is 32px.

That 32px value is not a usable specification for the painted lettering. The measured H1 wrapper is approximately `424 × 156.92px` on desktop and `350 × 129.53px` on mobile. Parts of the visible lettering extend beyond the apparent wrapper. Use authorized headline artwork or separately commissioned lettering; do not invent a font identification.

The CLOUD logo is also artwork: geometric letterforms, rounded shapes, and a small smiling face. Both white and blue versions are visible in current captures.

### Type Scale

All values below are measured unless marked otherwise.

| Role | Desktop | Mobile | Weight and notes |
| --- | --- | --- | --- |
| Main body | `16 / 27.2px` | `16 / 27.2px` | `500` |
| Primary navigation | `14 / 23.8px` | Off-canvas entries: `20 / 34px` | `700`; mobile open state was not captured |
| Hero English tagline | `18 / 30.6px` | Same | Lato, `500` |
| Major introduction heading | `56 / 72.8px` | `36 / 50.4px` | `700`, deep blue |
| Services and examples section titles | `56 / 72.8px` | `36 / 50.4px` | `700` |
| Problem-section heading | `56 / 78.4px` | `24 / 40.8px` | `700`; a distinct responsive treatment |
| Service and strengths subheadings | `36 / 50.4px` | `24 / 40.8px` | `700` |
| Closing contact/recruitment headings | `36 / 50.4px` | `36 / 61.2px` | `700` |
| Standard pill labels | `16 / 16px` | Same | `700` |
| Closing contact/recruitment pill labels | `18 / 18px` | Same | `700` |
| Problem-card captions | `14 / 23.8px` | Same | `500`; inactive cards appear scaled down |
| Notice heading | `20 / 34px` | `16 / 27.2px` | `700`, red |
| Notice paragraphs | `14 / 23.8px` | Same | `700` |
| Footer group headings | `20 / 34px` | Same | `500` |
| Footer links and address | `16 / 27.2px` | Same | `500` |
| Copyright and design credit | `12 / 20.4px` | Same | `500` |
| Cookie text | Visually about `15–16px` | Visually about `15–16px` | Estimate; its privacy link is measured at 15px |

The source root computes to 10px. This does not prove that every dimension was authored in rem. The Quick Start uses explicit pixel tokens with a conventional root size to avoid accidental scaling.

## Tokens — Spacing & Shapes

**Spacing character:** compact controls inside generous editorial sections.
**Shape character:** pill links, circular controls, rounded illustration cards, and broad irregular waves.

### Spacing Scale

These are recurring measured distances, not a recovered original token system.

| Use | Value | Evidence |
| --- | --- | --- |
| Service heading to paragraph | `10px` | Difference between adjacent element rectangles |
| General mobile section gutter | `15px` | 360px-wide content inside the 390px viewport |
| Mobile hero gutter | `20px` | 350px-wide hero content |
| Mobile notice inner inset | `20px` | 320px text inside a 360px section |
| Major heading to paragraph | `30px` | Introduction, strengths, and problem sections |
| Hero headline wrapper to body | `33px` | Same measured separation in both viewports |
| Strengths paragraph to button | `60px` | Same measured gap in both viewports |
| Desktop service-column gap | `86px` | Two 437px columns inside 960px |
| Services/examples heading top inset | `100px` desktop; `65px` mobile | Measured relative to their section rectangles |

Do not force the design into a strict 8px grid. Its observed spacing combines round values with content-dependent geometry.

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| Standard CTA links | `100px` | Measured |
| NEWS and project-category pills | `50px` | Measured |
| Desktop floating contact link | `50%` | Measured |
| Selected problem card | About `30px` | Visual estimate |
| Carousel arrows | Circular appearance | Visible 46px controls; exact radius declaration unavailable |
| Main section boundaries | Irregular curves | Artwork geometry, not a single radius |

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 |
| --- | --- | --- |
| Document height | `8096.58px` | `10125.69px` |
| Main reading width | `960px`, x = 240 | `360px`, x = 15 |
| Wide introduction width | `1100px`, x = 170 | `360px`, x = 15 |
| Hero text wrapper | `585px`, x = 70 | `350px`, x = 20 |
| Hero tagline top | y = `130px` | y = `80px` |
| Hero body top | y = `400.52px` | y = `313.13px` |
| Standard CTA | `300 × 58px` | `360 × 58px` |
| News text width | `370px` | `350px` |
| Problem-carousel arrow | `46 × 46px` | Same |
| Problem pagination button | `20 × 20px`, 5px padding | Same |
| Footer logo link | `220 × 80px` | Same |
| Own-service logo link | `170 × 63.30px` | `98.80 × 36.78px` |
| Footer height | `721.02px` | `1244.98px`, including 80px bottom padding |

Document heights are capture results, not layout targets. Fonts, text updates, expanded content, and viewport width can change them.

## Components

### Persistent Site Header

**Role:** brand identity and primary site navigation.

At the top of the desktop hero, the logo and navigation appear white over cyan. In the scrolled captures, a white strip approximately 80px high holds a blue logo and dark navigation text. The navigation stays right-aligned, with substantial gaps between four main items.

The first two labels, `私たちについて` and `事業内容`, have plus marks. Subordinate links exist in the supplied DOM, but their opening trigger and expanded appearance were not exercised. The other visible items lead to development examples and recruitment.

On mobile, the logo becomes approximately 100px wide and a three-line hamburger occupies the upper right. The bars are visually about 44px wide. The closed menu's entries are measured at x = 390, outside the viewport, with 68px-high rows. This supports an off-canvas structure, but not a verified animation or open-menu composition.

Do not confuse the stacked links in the lower mobile capture with an opened navigation drawer: that capture shows the footer beneath the persistent header.

### Illustrated Hero

**Role:** communicate the company's promise before describing its services.

The desktop composition has three interacting layers:

1. A left text group: small English tagline, oversized white graphic headline, and three groups of Japanese supporting copy.
2. A much larger illustration field across the center and right: three airborne people surrounded by business and software symbols.
3. A lower landscape of waves, clouds, dots, news content, and a small scroll cue.

The illustration field is visually estimated to span roughly x = 460–1365 and y = 75–665. It blends into the background rather than sitting in a rectangular image card. The largest figure, at right, carries the strongest diagonal movement.

Desktop body text has a measured 10px left inset inside its wrapper. Mobile removes that inset and keeps the same 16px body type. The illustration moves below the text; part of it is visible around y = 575, then becomes obscured by the cookie notice. It has not been removed from the mobile page.

### News Carousel

**Role:** surface company announcements near the hero boundary.

The visible desktop news area is a white, softly shaped panel near the lower left, partially covered by the cookie notice. Each item contains a muted date, a cyan NEWS pill, and a bold Japanese announcement. The pill measures approximately `77 × 22px`, with `4px 18px` padding.

Previous and Next buttons each measure `25 × 25px`, with 10px between their boxes. News copy is `16px / 24px`, weight `700`.

The DOM contains repeated records on either side of the visible item. These are consistent with carousel clones and should not be interpreted as additional announcements. The desktop and mobile observations show different active items, but do not establish an autoplay interval or a tested navigation action.

### Important Notice

**Role:** present a substantive company warning independently of promotional content.

A measured 960px-wide desktop section appears after the hero/news region. Its text region is 820px wide, inset by 70px on each side. On mobile, the outer section is 360px wide and the text region is 320px wide.

The heading uses the distinct red `#F44656`; paragraphs use bold 14px Japanese text with 23.8px line height. Paragraph separation measures about 25px on desktop and 20px on mobile.

This notice occupies real document space: about 427px on desktop and 705px on mobile. A faithful current-page implementation must accommodate it. Its exact background, border, and decorative treatment cannot be established from the supplied screenshots.

### Company Introduction and Strengths

**Role:** explain the company's consultation approach and practical development philosophy.

The desktop introduction uses an 1100px-wide region with alternating text positions. Its first major text block occupies 506px at the right; the later strengths block occupies 550px at the left. This creates an editorial rhythm rather than a repeated centered-card grid.

The first heading is deep blue at `56px / 72.8px`. The later heading uses dark ink at `36px / 50.4px`. Body text remains `16px / 27.2px`, with 30px after the headings. A blue `300 × 58px` pill concludes the strengths copy.

Mobile stacks these blocks and reduces their headings to 36px and 24px respectively. Substantial space remains between text groups. The supplied screenshots do not show the accompanying middle-page imagery, so its subjects, crops, and file types should remain unspecified.

### Problem Carousel

**Role:** help visitors recognize an initial business need without requiring technical vocabulary.

This component sits in a cyan section beneath explanatory white text. Six distinct scenarios are present, covering e-commerce, membership services, digitizing paper or telephone workflows, system replacement, integration, and cloud backups.

The desktop capture shows a large central white card, smaller translucent neighbors, and clipped cards at the outside edges. The selected card is visually about `254 × 247px`, with approximately 30px corners. It contains a large flat illustration above a centered two-line gray caption.

The selected caption's measured width is 224px; neighboring captions measure 168px. Their ratio is exactly 0.75, and their measured heights follow the same ratio. This is consistent with a three-quarter visual scale, although the transform declaration itself was not supplied.

White circular Previous and Next controls measure 46px. Six pagination buttons have 20px boxes with 5px padding, producing approximately 10px visible dots. Centers are spaced 30px apart. One dot is deep blue and the others are white; the precise content-to-index mapping was not exercised.

An orange `300 × 58px` inquiry pill sits beneath the indicators. On mobile it expands to 360px. Mobile slide positions place the active caption centrally and neighboring content outside the viewport; the mobile carousel was not included in a screenshot.

### Cloud and Wave Dividers

**Role:** connect sections through the same cloud metaphor as the illustrations and company identity.

The current desktop views show several overlapping shapes: a cyan field, darker blue rolling forms, pale blue overlap, and a white foreground wave. White dot patterns fill irregular patches around the edges.

These are broad compositions extending hundreds of pixels vertically. Their contours differ across the width; a repeated row of identical semicircles would lose the observed character. They also create substantial breathing room between content sections.

Exact asset paths and curve geometry are unavailable. In a new implementation, use authorized decorative assets or custom SVG curves with separate dot-pattern masks.

### Business Services

**Role:** summarize the company's four service areas.

The desktop content is arranged in two measured 437px-wide columns separated by 86px. The first row contains business-system development and WEB-service development, each with a heading, paragraph, and white pill link. Infrastructure and system maintenance follow with headings and paragraphs.

Service headings use `36px / 50.4px`; mobile headings use `24px / 40.8px`. Each description begins 10px after its heading. All four services stack vertically on mobile, and the first two links expand to the full 360px content width.

Only the first two service detail links are exposed in the evidence. Do not invent matching detail buttons for the other two. The current DOM establishes the text layout; service-image appearance is not documented by the supplied screenshots.

### Development Examples

**Role:** demonstrate relevant experience through concise project descriptions.

Five example rows are present. Desktop category labels measure `180 × 27.8px`, followed by a 20px gap and a 660px description region. Repeated rows start approximately 88.8px apart. The labels are green for business systems and orange for the WEB-service example.

On mobile, the category moves above the description. Both align at x = 35 within the 360px section, and the description width becomes 320px. A long title wraps naturally onto two lines. A full-width blue pill leads to the complete examples page.

The sampled text is white, indicating a reversed treatment. The parent surface's exact color and row decoration were not supplied. Do not infer a photographic case-study grid from these text rows.

### Pill Links

**Role:** provide a consistent action shape throughout the page.

The standard measured geometry is `300 × 58px`, radius `100px`, bold 16px text, and substantial horizontal inset. On mobile these links become `360 × 58px`. Closing contact and recruitment links use 18px text.

Variants include deep blue with white text, orange with white text, and white with deep-blue or cyan text. A small right-pointing triangle appears near the right edge in the screenshots. The closing contact link also has an envelope icon at left.

Keep the label optically centered independently of the arrow. The source does not use a different button shape for each section.

### Contact and Recruitment Band

**Role:** close the main page with two clear destinations.

Desktop uses equal-width colored halves. The contact half is visibly deep blue; recruitment is cyan. Both contain a heading, short supporting text, and a white pill. The contact side adds a short note below its button.

The measured inner text regions are 490px wide. The overall section is approximately 500px tall on desktop and 866px tall on mobile. Mobile stacks the destinations, retains 36px headings, and expands both buttons to 360px.

The final desktop screenshot shows the lower portion of this band above the footer. Its headings and upper content are verified through the DOM rather than that crop.

### Floating Contact Shortcut

**Role:** keep consultation available during a long scroll.

Desktop has a viewport-anchored `120 × 120px` circular link, 30px from the right and bottom edges. A smiling symbol and compact Japanese label are visible beneath the cookie veil. Its unobscured desktop fill is not established by the supplied capture.

On mobile, the corresponding link becomes a full-width orange bar measuring `390 × 50.8px`, beginning at y = 793.2. The cookie notice covers it in the supplied screenshots. This is an observed overlap, not evidence that the mobile shortcut is absent.

### Cookie Notice

**Role:** explain cookie use and present consent and privacy controls.

A translucent blue band stays attached to the viewport bottom across all captures. It contains white explanatory text, an underlined privacy link, a white consent pill labeled `同意する`, and a close glyph at the upper right.

Screenshot estimates put the band at about 161px high on desktop and 229px on mobile: roughly 16% and 27% of the respective viewport heights. Desktop text and button sit horizontally; mobile stacks the button beneath wrapped text. The consent pill appears approximately `170 × 40px`.

The notice visibly overlays page content rather than reserving space. It obscures the desktop news panel or footer and covers the mobile contact bar. Acceptance, dismissal, persistence, and focus behavior were not exercised.

### Footer

**Role:** provide complete navigation, company location, related services, and small-print identity.

A centered logo link occupies `220 × 80px`, followed by a thin horizontal divider. Desktop navigation groups sit left and the address plus X social mark sit right. Links are visibly underlined. The social link's measured box is approximately `35 × 35.77px`.

The `OWN SERVICES` label is centered between horizontal rules. Six subdued, monochrome service logos form a single desktop row, each inside a 170px-wide link with 30px gaps. Mobile reflows them into three columns and two rows; each link measures approximately `98.8 × 36.8px`.

Mobile navigation becomes a vertical sequence. Standalone development-example and recruitment links occupy 65px-high rows with full-width separators. Grouped links remain plain links; an accordion interaction is not established.

The current footer explicitly says `Designed by CHOREO`. This supports a design credit only. Development and illustration responsibilities are not identified by the inspected original-page evidence.

## Tokens — Motion & Interaction

| Treatment | Supplied evidence | What remains unverified |
| --- | --- | --- |
| General links and CTA links | `0.2s ease-out` transition | Changed properties and actual hover appearance |
| Desktop navigation labels | `0.4s ease-out` transition | Expanded-menu trigger, geometry, and timing |
| Hero supporting text | `0.8s text-fadein-anim` | Keyframe definitions, delay, and exact displacement |
| Mobile problem heading and paragraph | `0.8s text-fadein-anim` | Scroll trigger and replay behavior |
| Mobile introduction heading | `1s sun_shadow` | The animation name does not establish its visual effect |
| Header contrast change | Different top and scrolled appearances are visible | Scroll threshold and interpolation |
| News carousel | Repeated offscreen items, controls, differing active records | Autoplay interval, swipe support, and transition duration |
| Problem carousel | Central emphasis, smaller neighbors, arrows, six dots | Control activation, looping, autoplay, and gesture behavior |
| Cookie notice | Open state and visible controls | Dismissal result and stored preferences |
| Contact shortcut | Stable viewport placement across captures | Destination-page behavior |

The collection process waited for finite motion and layout stability, temporarily paused perpetual animations during readiness checks, then resumed them. That procedure improves capture stability but does not reveal full motion choreography.

For an adaptation, keep transitions short and let illustration composition provide most of the energy. Do not invent continuous floating, parallax, elastic springs, or scroll-driven character movement from a static airborne pose.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Hero and problem environment | Strong cyan, white text, illustrations | Brand recognition and approachable storytelling |
| Main reading regions | White or unpainted sampled containers, dark text | Company and service explanation |
| Selected problem card | White, large rounded corners | Focus within a horizontal sequence |
| Neighboring problem cards | Smaller, cyan-tinted appearance | Context and continuation |
| Action surfaces | Blue, orange, or white pills | Consistent navigation and inquiry hierarchy |
| Closing destination band | Deep blue beside cyan | Separate contact and recruitment routes |
| Footer | White, dark text, thin rules, subdued logos | Quiet, comprehensive navigation |
| Cookie layer | Translucent blue over existing content | Persistent notice and consent controls |

Soft shadows are visible around some cards and controls, but their computed values were not supplied. Treat them as localized emphasis rather than a general elevation system. Broad flat color and illustration carry the page.

## Imagery

The observed illustration language is flat, colorful, and rounded. Figures have exaggerated poses and simplified faces. Clothing introduces coral red, navy, yellow, and green without changing the cyan-and-white page identity.

The hero includes three distinct people: a large figure in a white shirt and red trousers at right, a smaller airborne figure above the center, and a cap-wearing figure in a yellow shirt with green-dotted white trousers below. Floating graphics include a laptop marked `DATA`, financial symbols, charts, documents, a calendar, an envelope, gears, and a globe.

Cloud silhouettes, tiny dots, and short directional lines connect the figures and symbols. Use clean scaling rather than a pixel-art rendering mode. The graphic headline has its own softened dimensional treatment and should remain distinct from ordinary interface text.

The problem cards translate the same illustration style into compact diagrams. The selected example shows paper documents and a laptop, making an abstract digitization task immediately recognizable.

### Observed Asset References

No image source URLs, filenames, or vector paths were included in the supplied evidence. The following is an inventory of visible resources, not a fabricated asset manifest.

| Resource | Current evidence | Implementation handling |
| --- | --- | --- |
| CLOUD identity | White and blue header versions; larger footer version | Preserve authorized logo artwork and proportions |
| Hero Japanese headline | Graphic lettering in both top captures | Supply an accessible equivalent; do not identify it as a verified font |
| Hero people and business symbols | Fully visible desktop composition, partially visible mobile composition | Preserve relative scale and transparent integration with cyan |
| Problem illustrations | Several desktop carousel cards | Keep icons consistent in line weight, palette, and visual density |
| Wave and dot decorations | Hero boundary and middle section boundary | Use authorized assets or custom SVG and pattern masks |
| Contact smile and navigation symbols | Contact circle, plus marks, triangles, envelope, hamburger | Match their simple, rounded visual weight |
| Own-service logos | Six monochrome footer logos | Use real brand assets and consistent bounding boxes |

The supplied current captures do not establish the treatment of every image farther down the homepage. Avoid extending the observed illustration style into unsupported claims about photography or project imagery.

## Layout & Responsive Behavior

The page alternates full-width decorative environments with centered reading widths. At 1440px, the main content width is 960px and the wider introduction/footer structure uses approximately 1100px. The hero reaches farther toward the viewport edges and allows illustration to dominate the right side.

At 390px, most content uses 15px gutters. The hero uses 20px gutters. Text-heavy notice content adds a further 20px inner inset. These distinctions are small but important; a single global container would not reproduce every alignment.

| Pattern | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | Horizontal navigation and larger logo | Smaller logo, hamburger, off-canvas menu entries |
| Hero | Text left, large artwork across center/right | Text first, illustration beneath |
| Body type | 16px | Retains 16px |
| Major headings | Generally 56px | Generally 36px; problem heading becomes 24px |
| Services | Two columns | One column |
| Development examples | Category beside title | Category above title |
| Standard CTAs | 300px wide | 360px wide |
| Contact/recruitment | Two colored halves | Vertical sequence |
| Footer logos | Six across | Three across, two rows |
| Contact shortcut | 120px circle | Full-width bottom bar |
| Cookie notice | Text and button beside each other | Wrapped text above centered button |

No source breakpoint was supplied. A breakpoint chosen in the Quick Start is an implementation recommendation, not a recovered original value. Only the two stated viewport sizes were inspected; tablet and landscape behavior remain unverified.

The desktop and mobile document heights differ substantially because columns stack and Japanese text wraps. Preserve content-driven height. Do not compress mobile paragraphs or fix section heights to reproduce a particular screenshot length.

## Do’s and Don’ts

### Do

- Build the identity around cyan, white, and deep blue, with orange reserved for strong consultation emphasis.
- Preserve the distinction between graphic hero lettering and Noto Sans JP interface typography.
- Keep Japanese body copy at the measured 16px size on mobile.
- Let the main illustration occupy a large, unboxed area of the hero.
- Use broad, asymmetric waves and irregular dot patches between sections.
- Reuse the 58px-high pill shape across navigation actions.
- Make the selected problem card visibly larger and clearer than its neighbors.
- Retain the current notice, corporate explanations, examples, recruitment route, and complete footer.
- Reflow footer logos into three mobile columns while retaining their individual proportions.
- Treat fixed controls and consent UI as a coordinated layout problem.

### Don’t

- Don’t reduce the corporate homepage to a single conversion panel or a generic feature-card grid.
- Don’t replace the supplied illustration language with unrelated stock icons or glossy 3D objects.
- Don’t render the hero phrase as an ordinary 32px heading because that value appears on its wrapper.
- Don’t shrink all mobile text to fit desktop line lengths.
- Don’t interpret carousel clones as separate content records.
- Don’t infer dropdown, swipe, autoplay, or consent behavior from visible controls alone.
- Don’t promote colors seen through the cookie veil into original brand tokens.
- Don’t apply 30px card corners or shadows to every section.
- Don’t invent image paths, unseen project thumbnails, or production responsibilities.
- Don’t deliberately reproduce the cookie/contact collision in a new implementation.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original-site features:

- Give the graphic headline an accessible text equivalent containing the actual message. Use empty alternatives for purely decorative clouds and figures where appropriate.
- Implement navigation disclosures as buttons with expanded state, keyboard support, and predictable focus handling.
- Ensure closed off-canvas navigation is neither focusable nor exposed as active content.
- Enlarge the 25px news controls and 20px pagination targets without unnecessarily enlarging their visible symbols.
- Exclude carousel clones from focus order and duplicate announcements. Offer a pause control if automatic advancement is introduced.
- Check white text contrast on cyan, orange, and translucent surfaces. Use a darker text treatment or an opaque backing where required.
- Coordinate the consent notice and contact shortcut. Hide or reposition the shortcut while the notice is open, and keep consent content scrollable on short screens.
- Respect reduced motion and ensure headings and paragraphs remain visible when animation is disabled.
- Supply responsive image dimensions to prevent layout movement and preserve the original aspect ratios.

## Agent Prompt Guide

### Quick Color Reference

- Main brand environment: `#04A7FC`.
- Structural blue and primary blue links: `#0B41A0`.
- Reading surface: `#FFFFFF`.
- Body copy: `#2F3C3F`.
- Consultation emphasis: `#FF6A24`.
- Problem captions: `#778092`.
- News dates: `#B8C5D5`.
- Important notice heading: `#F44656`.
- Project categories: `#008840` and `#FF8800`.

### Overall Prompt

“Create a Japanese software-company corporate homepage inspired by CLOUD. Use saturated cyan #04A7FC, deep blue #0B41A0, white reading regions, and orange #FF6A24 inquiry links. Establish the hero with a small English tagline, expressive white Japanese headline artwork, readable 16px supporting copy, and a large unboxed illustration of people and business symbols floating through clouds. Use Noto Sans JP for Japanese text, Lato for the tagline and news labels, broad irregular wave dividers, and occasional dot patterns. Build a long corporate narrative with a real notice section, alternating introduction blocks, a centered problem carousel, service summaries, text-based development examples, contact and recruitment destinations, and a complete footer. On mobile, stack content, retain body size, expand pill links, and coordinate fixed consent and contact controls.”

### Example Component Prompts

1. **Hero:** “A cyan corporate hero with left-aligned copy and a large flat illustration across the right two-thirds. Place an 18px Lato tagline above authorized white Japanese headline artwork. Keep the supporting copy at 16px with 1.7 line height. Use three airborne figures, small business symbols, clouds, and scattered dots. On mobile, move the artwork beneath the copy.”
2. **Problem carousel:** “A cyan section with a central white card about 254px wide, approximately 30px corners, a large diagram illustration, and centered gray Japanese caption. Show neighboring cards at roughly three-quarter scale with reduced visual prominence. Add 46px circular arrows, six small indicators, and an orange 58px-high inquiry pill below.”
3. **Service section:** “A centered 960px reading region with two 437px columns separated by 86px. Use 56px section type, 36px service headings, 16px body copy, and white pill links with deep-blue text. Stack the services at phone width and reduce service headings to 24px.”
4. **Footer:** “A white corporate footer with a centered 220px-wide logo box, underlined navigation groups, a company address and X mark, then a ruled OWN SERVICES label and six monochrome service logos. On mobile, stack navigation and address, use full-width separated destination rows, and arrange service logos in a three-by-two grid.”
5. **Consent adaptation:** “Create a bottom cookie notice visually related to the blue site palette, with readable explanatory copy, an underlined privacy link, a white consent pill, and an accessible close control. Stack its content on phones and prevent it from covering another actionable fixed control.”

## Quick Start

### CSS Custom Properties

This is an adaptation scaffold, not recovered source CSS. Colors, principal type sizes, reading widths, and CTA dimensions follow measured evidence. Card corners, decorative spacing, the consent fill, and the 800px breakpoint are approximations or recommendations.

Use authorized artwork in `.hero-title-art`, `.hero-art`, and `.wave-divider`. The header's `data-scrolled` state, carousel selection, and consent state require application logic. The sample deliberately hides the floating contact shortcut while consent is open and enlarges consent controls to at least 44px.

```css
:root {
  /* Measured palette aliases */
  --color-cyan: #04a7fc;
  --color-blue: #0b41a0;
  --color-white: #fff;
  --color-contact: #ff6a24;
  --color-ink: #2f3c3f;
  --color-meta: #b8c5d5;
  --color-caption: #778092;
  --color-alert: #f44656;
  --color-systems: #008840;
  --color-web: #ff8800;

  --font-body: 'Noto Sans JP', sans-serif;
  --font-latin: Lato, sans-serif;
  --font-utility: Poppins, sans-serif;
  --text-body: 16px;
  --text-small: 14px;
  --text-section: 56px;
  --text-subheading: 36px;
  --leading-body: 1.7;

  --width-reading: 960px;
  --width-wide: 1100px;
  --radius-pill: 100px;
  --radius-card: 30px; /* Visual approximation */
  --header-height: 80px; /* Visual approximation */
  --motion-link: 200ms ease-out;
  --motion-nav: 400ms ease-out;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --cookie-fill: rgb(11 65 160 / 70%); /* Approximation */
}

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

.reading-width, .wide-width {
  width: calc(100% - 30px);
  margin-inline: auto;
}
.reading-width { max-width: var(--width-reading); }
.wide-width { max-width: var(--width-wide); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 60px;
  color: var(--color-white);
  background: transparent;
  transition: background-color var(--motion-nav), color var(--motion-nav);
}
.site-header[data-scrolled='true'] {
  color: var(--color-ink);
  background: var(--color-white);
}
.site-brand { width: 154px; }
.site-nav { display: flex; align-items: center; gap: 50px; }
.site-nav a, .site-nav button {
  border: 0;
  padding: 0;
  color: inherit;
  background: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.menu-toggle { display: none; }

.hero {
  position: relative;
  overflow: clip;
  padding: 130px 70px 190px;
  color: var(--color-white);
  background: var(--color-cyan);
}
.hero-inner { position: relative; max-width: 1300px; margin: auto; }
.hero-copy { position: relative; z-index: 1; width: 585px; max-width: 50%; }
.hero-tagline {
  margin: 0 0 50px;
  font: 500 18px/1.7 var(--font-latin);
}
.hero-title-art { width: 424px; max-width: 100%; margin: 0 0 33px; }
.hero-body { padding-left: 10px; }
.hero-body p { margin: 0; }
.hero-body p + p { margin-top: 27.2px; }
.hero-art { position: absolute; top: -55px; right: 0; width: 70%; }
.wave-divider { overflow: hidden; line-height: 0; }
.wave-divider img, .wave-divider svg { display: block; width: 100%; }

.section-title {
  margin: 0 0 30px;
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.3;
}
.service-title {
  margin: 0 0 10px;
  font-size: var(--text-subheading);
  line-height: 1.4;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px 86px;
}
.service-grid p { margin: 0; }
.service-grid .pill { display: flex; margin: 35px auto 0; }

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  min-height: 58px;
  padding: 16px 40px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--motion-link);
}
.pill::after {
  content: '';
  position: absolute;
  right: 23px;
  width: 10px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pill--orange { background: var(--color-contact); }
.pill--white { color: var(--color-blue); background: var(--color-white); }
.pill--cyan-text { color: var(--color-cyan); }
.news-date { color: var(--color-meta); font: 700 14px/1.7 var(--font-latin); }
.news-badge {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 50px;
  color: var(--color-white);
  background: var(--color-cyan);
  font: 700 14px/1 var(--font-latin);
}
.notice-title { color: var(--color-alert); font-size: 20px; }
.notice-copy { font-size: 14px; font-weight: 700; }

/* Static carousel appearance; navigation requires separate logic. */
.problem-stage { color: var(--color-white); background: var(--color-cyan); }
.problem-card {
  flex: 0 0 254px;
  min-height: 247px;
  padding: 20px 15px;
  border-radius: var(--radius-card);
  color: var(--color-caption);
  background: var(--color-white);
  text-align: center;
}
.problem-card:not(.is-active) { opacity: .45; transform: scale(.75); }
.problem-card p { margin: 15px 0 0; font-size: 14px; line-height: 1.7; }
.carousel-arrow {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  color: var(--color-meta);
  background: var(--color-white);
}
.case-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 30px 70px 30px 30px;
}
.case-tag {
  width: 180px;
  padding: 2px 0;
  border-radius: 50px;
  color: var(--color-white);
  background: var(--color-systems);
  font-size: 14px;
  text-align: center;
}
.case-tag--web { background: var(--color-web); }

.contact-panels { display: grid; grid-template-columns: repeat(2, 1fr); }
.contact-panel {
  padding: 100px 40px 50px;
  color: var(--color-white);
  background: var(--color-blue);
  text-align: center;
}
.contact-panel--recruit { background: var(--color-cyan); }
.contact-panel h2 { font-size: 36px; line-height: 1.4; }
.contact-panel .pill { font-size: 18px; }
.floating-contact {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-contact);
  text-align: center;
  text-decoration: none;
}
body[data-consent-open='true'] .floating-contact { visibility: hidden; }

.footer-brand { display: block; width: 220px; margin: 30px auto; }
.footer-main { display: grid; grid-template-columns: 680px 1fr; gap: 48px; }
.footer-nav { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr; gap: 20px; }
.footer-nav a { display: block; padding-block: 5px; text-decoration: underline; }
.footer-label { font-size: 20px; font-weight: 500; }
.owned-services-title { text-align: center; font: 700 16px/1.7 var(--font-utility); }
.owned-services {
  display: grid;
  grid-template-columns: repeat(6, 170px);
  justify-content: center;
  gap: 30px;
  margin: 20px auto 60px;
}
.owned-services a { display: grid; place-items: center; aspect-ratio: 170 / 63.3; }
.owned-services img { max-height: 100%; object-fit: contain; }
.footer-small { margin: 0; font-size: 12px; text-align: center; }

.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 48px 18px calc(32px + var(--safe-bottom));
  color: var(--color-white);
  background: var(--cookie-fill);
}
.cookie-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 100px;
  max-width: 1080px;
  margin-inline: auto;
}
.cookie-copy { margin: 0; font-size: 15px; line-height: 1.7; }
.cookie-copy a { text-decoration: underline; }
.cookie-accept {
  width: 170px;
  min-height: 44px;
  border: 0;
  border-radius: 100px;
  color: var(--color-blue);
  background: var(--color-white);
  font-weight: 700;
}
.cookie-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  color: inherit;
  background: none;
  font-size: 32px;
}

/* Recommended breakpoint; not recovered from the original stylesheet. */
@media (max-width: 800px) {
  :root {
    --text-section: 36px;
    --text-subheading: 24px;
    --header-height: 64px;
  }
  .site-header { padding-inline: 20px 15px; }
  .site-brand { width: 100px; }
  .site-nav { display: none; }
  .menu-toggle {
    display: grid;
    align-content: center;
    gap: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
  }
  .menu-toggle span { display: block; height: 4px; background: currentColor; }
  .hero { padding: 80px 20px 80px; }
  .hero-copy { width: 100%; max-width: none; }
  .hero-tagline { margin-bottom: 40px; }
  .hero-title-art { width: 350px; }
  .hero-body { padding-left: 0; }
  .hero-art { position: relative; top: auto; right: auto; width: 100%; margin-top: 20px; }
  .section-title { line-height: 1.4; }
  .service-title { line-height: 1.7; }
  .problem-stage .section-title { font-size: 24px; line-height: 1.7; }
  .service-grid, .contact-panels { grid-template-columns: 1fr; }
  .pill { width: 100%; }
  .notice-title { font-size: 16px; }
  .case-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .contact-panel { padding: 50px 15px 35px; }
  .contact-panel h2 { line-height: 1.7; }
  .floating-contact {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    min-height: calc(50.8px + var(--safe-bottom));
    padding: 15px 10px calc(15px + var(--safe-bottom));
    border-radius: 0;
  }
  .site-footer { padding-bottom: calc(80px + var(--safe-bottom)); }
  .footer-brand { margin-block: 15px 30px; }
  .footer-main, .footer-nav { grid-template-columns: 1fr; gap: 20px; }
  .footer-nav a { padding-block: 10px; }
  .owned-services {
    width: calc(100% - 30px);
    max-width: 336.4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 20px;
  }
  .cookie-banner { padding: 24px 18px calc(18px + var(--safe-bottom)); }
  .cookie-inner { grid-template-columns: 1fr; gap: 8px; }
  .cookie-accept { justify-self: center; }
}

/* Recommended reduced-motion behavior for this scaffold. */
@media (prefers-reduced-motion: reduce) {
  .site-header, .pill { transition: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
}
```

The scaffold does not implement menu focus management, carousel movement, original animation keyframes, or cookie storage. Add those behaviors explicitly and test their states. A genuine desktop logo-color change also requires swapping or otherwise correctly rendering the appropriate authorized logo variant.

### Tailwind v4 Token Mapping

Optional aliases for projects already using Tailwind v4. They do not imply that the original site uses Tailwind. Define the properties above first.

```css
@theme inline {
  --color-cloud-cyan: var(--color-cyan);
  --color-cloud-blue: var(--color-blue);
  --color-cloud-contact: var(--color-contact);
  --color-cloud-ink: var(--color-ink);
  --color-cloud-meta: var(--color-meta);
  --color-cloud-caption: var(--color-caption);
  --color-cloud-alert: var(--color-alert);
  --font-japanese: var(--font-body);
  --font-latin-label: var(--font-latin);
  --font-footer-utility: var(--font-utility);
  --text-cloud-body: 16px;
  --text-cloud-small: 14px;
  --text-cloud-section: var(--text-section);
  --text-cloud-subheading: var(--text-subheading);
  --radius-cloud-pill: 100px;
  --radius-cloud-card: 30px;
}
```

## Sources & Evidence

- [Current CLOUD homepage](https://www.cloudsoft.co.jp/): original and final URL, HTTP 200, page title, rendered content, link destinations, computed styles, and measured element rectangles supplied for this analysis.
- Evidence retrieved September 29, 2026 at `2026-09-29T12:43:17.117Z`. Desktop viewport: `1440 × 1000`. Mobile viewport: `390 × 844`.
- Three current desktop captures establish the hero, problem-carousel surroundings, closing band, and footer. Two current mobile captures establish the opening composition and lower footer. All retain the cookie notice.
- Rendered DOM measurements establish additional homepage sections outside those screenshot crops, including the notice, introduction, service summaries, development examples, and contact/recruitment content.
- Inspection included scrolling and readiness checks. No supplied evidence verifies activated menus, carousel controls, consent actions, link destination rendering, hover outcomes, keyboard behavior, or intermediate responsive widths.
- Asset source URLs, complete ancestor styles, original breakpoint rules, and animation keyframes were not supplied. Exact decorative geometry, obscured colors, and unseen imagery remain limited accordingly.

This reference describes the current homepage evidenced at the stated URLs and viewports. Its implementation additions and CSS aliases are explicitly separate from measured original-page facts.