MANERUBETA

日本のWebデザインを、AIの制作リファレンスに。

Kloar（クロアー）｜黒川温泉発のライフスタイルブランドのWebサイトプレビュー

DESIGN REFERENCE

Kloar（クロアー）｜黒川温泉発のライフスタイルブランド

ブランドサイトヘアケア・ボディケア地域ブランド自然写真余白明朝体日英併記ダークカラーレスポンシブ

深い青緑と自然の写真表現を基調に、繊細な明朝体と字間の広い欧文を組み合わせたブランドサイト。日英併記の物語と商品紹介を、余白の大きい構成でつなぎます。

オリジナルサイトを見る
ジャンル
美容・化粧品
元の業種
美容・コスメ／ライフスタイル
デザイン分析日
2026/9/13

design.md

ダウンロード

Kloar — Style Reference

Forest fragrance expressed through deep teal, spacious bilingual typography, and softly focused landscapes.

Website: kloar.jp Original URL: https://kloar.jp/ Final URL: https://kloar.jp/ Theme: dark teal with white typography, photographic color fields, and a white opening state; no selectable theme was evidenced. Inspected: September 13, 2026, at 08:24:10.607 UTC / 17:24:10.607 JST. Viewports: 1440 × 1000 and 390 × 844 CSS pixels. Scope: the current homepage, including its opening state, mobile hero, Introduction, two product presentations, Brand Story, About Us, Contact, footer, and terminal photographic scene. Visual coverage is concentrated on the opening, oil presentation, mobile hero, and terminal scene; other sections are documented through the supplied rendered DOM and computed styles. Product detail pages and the separate online store were not inspected.

Kloar is a lifestyle brand website with editorial storytelling, product introductions, organizational information, and a route to a separate shop. Its homepage connects the landscape of Kurokawa Onsen with Bath Powder and Hair & Body oil. Japanese narrative copy leads; smaller English passages accompany it. The presentation uses very little conventional interface framing: large photographic fields, fine lines, small utility labels, and circular arrows carry most of the structure.

The defining contrast is between expansive scenery and delicate typography. Deep teal gives the long document continuity, while sunset pink, muted woodland colors, and dark reflected light come from imagery. Manrope supplies widely tracked English text; Shippori Mincho B1 gives Japanese writing a quiet editorial character. Mobile preserves the atmosphere through deliberate line breaks and rearranged columns, rather than shrinking the desktop composition uniformly.

全文を表示閉じる

Kloar — Style Reference

Forest fragrance expressed through deep teal, spacious bilingual typography, and softly focused landscapes.

Website: kloar.jp Original URL: https://kloar.jp/ Final URL: https://kloar.jp/ Theme: dark teal with white typography, photographic color fields, and a white opening state; no selectable theme was evidenced. Inspected: September 13, 2026, at 08:24:10.607 UTC / 17:24:10.607 JST. Viewports: 1440 × 1000 and 390 × 844 CSS pixels. Scope: the current homepage, including its opening state, mobile hero, Introduction, two product presentations, Brand Story, About Us, Contact, footer, and terminal photographic scene. Visual coverage is concentrated on the opening, oil presentation, mobile hero, and terminal scene; other sections are documented through the supplied rendered DOM and computed styles. Product detail pages and the separate online store were not inspected.

Kloar is a lifestyle brand website with editorial storytelling, product introductions, organizational information, and a route to a separate shop. Its homepage connects the landscape of Kurokawa Onsen with Bath Powder and Hair & Body oil. Japanese narrative copy leads; smaller English passages accompany it. The presentation uses very little conventional interface framing: large photographic fields, fine lines, small utility labels, and circular arrows carry most of the structure.

The defining contrast is between expansive scenery and delicate typography. Deep teal gives the long document continuity, while sunset pink, muted woodland colors, and dark reflected light come from imagery. Manrope supplies widely tracked English text; Shippori Mincho B1 gives Japanese writing a quiet editorial character. Mobile preserves the atmosphere through deliberate line breaks and rearranged columns, rather than shrinking the desktop composition uniformly.

How to Read This Reference

  • Measured values come from the supplied rendered element bounds, computed styles, and custom properties. Dimensions below are rounded where fractional transforms would obscure the useful number.
  • Declared values were present as custom properties, but their application to a visible component was not always captured.
  • Estimated values describe screenshot appearance, such as photographic hues or tiny icon strokes. They are not sampled CSS tokens.
  • Calculated values evaluate an observed formula or compare supplied measurements. They do not establish unobserved behavior at other widths.
  • Recommended values belong to the reusable implementation, including larger small text, keyboard treatment, and static media fallbacks.
  • Bounding boxes can include transformed, offscreen, or concealed content. Menu-link coordinates establish layout structure, not proof that the menu was open.
  • Computed typography identifies declared font stacks. Font files, successful font-face resolution, and the construction of the logo were not independently inspected.

Tokens — Colors

Default Palette
Name Value Source or adaptation token Role and evidence
Deep Teal #1b434e Source --color-bg; adaptation --color-field Measured body, product, story, contact, and footer background; also the opening slogan color
Secondary Teal #284e58 Source --color-bg2 Declared secondary surface; a specific visible application was not established
White #ffffff Source --color-txt Measured primary text; visually the opening canvas and mobile store disc
Mist Text #c3cdd0 Adaptation --color-muted Converted from measured rgb(195, 205, 208) on English descriptions and the large closing statement
Secondary Text #a7b6ba Source --color-txt3 Measured secondary product navigation and legal links
Number Gray #aebcc0 Source --color-txt6 Measured product-feature numbers
Fine Line #658087 Source --color-line Declared shared rule color through --solid
Pale Line #94a7ac Source --color-line4 Declared alternative rule color; component application unverified
Quiet Icon #7a9198 Source --color-icon3 Measured feature-navigation button color
Mobile Detail Icon #8da1a6 Adaptation --color-detail-mobile Converted from measured rgb(141, 161, 166) on mobile product-detail links
Forest Veil rgba(0, 23, 20, 0.6) Source --color-overlay Declared overlay; exact visible coverage and compositing were not captured

The palette is predominantly a relationship between a dark field and pale detail. Mist Text is a hierarchy color, not a disabled-state diagnosis. The white mobile store disc provides a small, clear point of contrast without introducing a new action hue.

The source also declares --color-blend: #001714, --color-blend2: #000000, and --swiper-theme-color: #007aff. Their presence does not establish a visible black surface system or electric-blue brand accent. Do not add these as interchangeable primary colors.

Photographic Color Fields
Current visual Approximate appearance Reuse guidance
Oil presentation Dusty blush around #c1a5aa, soft peach around #d7ad9e, amber glass Estimates from the supplied product capture; retain these relationships through photography
Mobile hero Desaturated sage, gray-green woodland, pale earth Keep the low saturation and broad tonal areas behind white text
Terminal scene Very dark navy and teal, pale blue-white highlights Preserve the contrast between darkness and defocused light

These are imagery descriptions, not additional measured interface tokens. A fixed pink gradient cannot reproduce the depth, hand, bottle, and atmospheric background of the oil presentation.

Tokens — Typography

Manrope — English Display and Supporting Copy
  • Measured family: Manrope, sans-serif; the source also declares --font-sans-serif: 'Manrope', sans-serif.
  • Weights: predominantly 300; 400 appears on movie labels and feature translations.
  • Character: light, open, and geometric, with unusually generous tracking on display copy.
  • Roles: the journey statement, English product names, translations, feature captions, and small brand signatures.
  • Tracking: approximately 0.21em on the opening statement, 0.121em on product titles, and 0.06–0.105em across many supporting passages.
Shippori Mincho B1 — Japanese Narrative
  • Measured family: "Shippori Mincho B1", serif.
  • Weights: 400 for much of the introduction and product writing; 300 appears in About and Contact.
  • Roles: the Japanese brand promise, narrative passages, product subtitles, feature numbers, and vertical About heading.
  • Character: fine contrasting strokes and generous line spacing. It creates an editorial rhythm within the dark photographic setting.
  • Tracking: commonly 0.06em; introductory statements and the header promise use 0.12em.
Noto Sans JP — Base Interface Stack

The body and many link or button wrappers compute to "Noto Sans JP", sans-serif, weight 300, at 10px. Several navigation wrappers contain text whose bounds are substantially larger than that inherited size would suggest. Descendant styling was not fully included in the evidence, so the wrapper value should not be treated as a complete measurement of every visible navigation label.

Use this stack for utility text where appropriate. Keep English display and Japanese narrative roles separate rather than applying the body stack everywhere.

Wordmark

The linked Kloar mark appears as a distinctive lowercase identity element. Its homepage link has no extracted text, and its asset format was not exposed. The measured desktop link box is approximately 133 × 28.6px; the mobile box is 79 × 20px.

Preserve an authorized wordmark asset when available. Do not assume its letterforms can be reproduced by typing the name in one of the measured text fonts.

Type Scale

Sizes and tracking below are measured unless explicitly qualified. D / M means desktop / mobile.

Role Size D / M Weight Tracking D / M Leading or qualification
Header Japanese promise 22 / 15px 400 0.12em Computed 22 / 15px
Opening journey statement 66 / 40px 300 0.21em Parent computes 66 / 40px; mobile has three separately spaced lines
Product English title 46 / 28px 300 0.121em Computed 46 / 28px
Product Japanese subtitle 12 / 11px 400 0.06em Desktop sits beside title; mobile sits below
Product English strapline 11 / 10px 300 0.06em Mobile oil strapline occupies two lines
Introduction Japanese statement 32 / 22px 400 0.12em Computed 32 / 45px
Introduction English statement 15 / 11px 300 0.08em Parent line-height alone does not describe full multiline spacing
Introduction Japanese narrative 24 / 14px 400 0.06em Measured 53.72 / 29.11px
Product Japanese description 16 / 12px 400 0.06em Measured 38 / 24px
Product English description 12 / 9px 300 0.075em Parent computes 12 / 9px; rendered text uses larger overall line spacing
Feature number 14 / 11px 400 Normal Shippori Mincho B1
Feature English caption 9 / 7px 400 0.1em Very small in the original
Brand Story Japanese text 22 / 14px 400 0.06em Measured 68 / 32px
About vertical heading 27 / 20px 300 0.07em Computed line-height 67 / 45px governs spacing across the vertical composition
About Japanese body 18 / 14px 300 0.06 / 0.02em Measured 44 / 30px
Contact Japanese details 18 / 14px 300 0.06em Separate rows provide additional spacing
Contact English details 12 / 9px 300 0.08 / 0.05em Measured 26 / 19.46px
Large closing journey statement 83.52 / 40px 300 0.18em Desktop single line; mobile three lines
Terminal centered statement 18 / 12px 300 0.2em Compact and centered over imagery
Footer brand signature 11 / 8px 300 0.19em A quiet secondary identity line

The root font size is 10px at both inspected widths. Consequently, an observed source value of 4.2rem evaluates to 42px in these captures. This is separate from the viewport-based layout formulas. The reusable CSS below keeps the host project's root size and uses explicit pixel or fluid values instead.

Implementation recommendation: preserve the contrast between Japanese narrative and smaller English accompaniment, but increase essential mobile translations and captions. The Quick Start uses an 11px minimum for several roles that originally measured 7–9px.

Tokens — Spacing & Shapes

Geometry System

The custom properties use separate desktop and mobile reference widths: 1500 and 375. The viewport expressions evaluate to 1440px and 390px in the supplied captures. This supports proportional horizontal geometry, but does not imply that all text and spacing share one scaling formula.

Source token Captured formula Calculated value
Desktop --contents-rg 1100 / 1500 × 1440 1056px
Desktop --contents-rg-outside 200 / 1500 × 1440 192px
Desktop --contents-md 1200 / 1500 × 1440 1152px
Desktop --contents-md2-outside 135 / 1500 × 1440 129.6px
Desktop --contents-sm 1014 / 1500 × 1440 973.44px
Mobile --contents-sm 300 / 375 × 390 312px
Mobile --contents-md 310 / 375 × 390 322.4px
Mobile --contents-xxs 271 / 375 × 390 281.84px
Mobile --contents-xxs-outside 52 / 375 × 390 54.08px
Mobile --contents-xs-outside 45.5 / 375 × 390 47.32px

These are available source tokens, not one universal container applied to every section. For example, the measured Introduction text width is about 804px on desktop and 275.6px on mobile, while product descriptions use different dimensions.

Spacing Measurements
Relationship Desktop Mobile Evidence
Hero content horizontal padding 96px 39px Computed hero header padding
Hero content bottom padding 124px 50px Computed hero header padding
Menu internal gap 32px 19px Computed flex gap
Product section top / bottom padding 271 / 182px 164 / 152px Measured Products section
Brand Story top / bottom padding 375 / 382px 264 / 284px Measured section padding
Contact top / bottom padding 0 / 215px 90 / 90px Measured section padding
Gap between mobile product description languages — About 28px Difference between rendered paragraph bounds
Feature-caption horizontal pitch 336px 255px Difference between consecutive item text positions

Large intervals establish reading pace; they are not simply a scaled set of conventional card gutters.

Border Radius and Rules
Element Measured or declared treatment
Main sections and text surfaces Square, with no general rounded-card treatment evidenced
Shared line token solid 0.7px #658087
Current-color rule token solid 0.7px currentColor
Menu button target 50% radius, visually unfilled
Product detail links 50% radius
Feature navigation buttons 50% radius
Store link 1000px radius

The rounded geometry belongs mainly to controls. Preserve the difference between an expansive unboxed scene and a small circular action.

Layout Measurements
Element Desktop 1440 × 1000 Mobile 390 × 844
Document height About 15,891px About 14,178px
Hero header 1440 × 1000px 390 × 844px
Introduction Starts at y=1000, height 4200px Starts at y=844, height 3544.8px
Introduction top padding 1200px 1012.8px
Product Japanese description About 645.1px wide at x=129.6 312px wide at x=39
Product English description About 393.6px wide at x=916.8 312px wide at x=39
Product detail circle 90 × 90px 54 × 54px
Feature-navigation target 52 × 52px 44 × 44px
Store link About 56 × 195px About 38 × 38px
Menu button target 84 × 84px 70 × 70px
Movie-launch button 314 × 85px 210 × 57px

The Introduction height equals approximately 4.2 × viewport height at both widths, with top padding equal to 1.2 × viewport height. This is a calculated relationship supported by both captures, not a recovered complete scroll-animation implementation.

Components

Opening State

Role: introduces the journey statement while the visual experience prepares.

The desktop capture shows an almost entirely white viewport, a thin horizontal line around its center, and a large deep-teal FIND YOUR JOURNEY. near the bottom. The text computes to Manrope 66px, weight 300, with 13.86px tracking. Its recorded top is 846px in the 1000px viewport.

The central line appears approximately 150px wide; this is a screenshot estimate. A numeric percentage or a measured completion ratio was not supplied. Source tokens for loading fade-out and progress transitions support interpreting this as an opening/loading treatment.

This state is one captured moment. The mobile hero and populated document demonstrate that the whole site is not an empty white page. A new implementation should have a usable static fallback and should never depend on an indefinite opening overlay.

Identity Header and Menu Trigger

Role: presents the brand promise, wordmark, and access to navigation over the scene.

The identity is deliberately staggered. On desktop, the Japanese promise begins around x=65, y=95, while the wordmark sits farther right and lower at x=96, y=203. Mobile places the promise at x=30, y=46 and the wordmark at x=50, y=105.

The desktop navigation wrappers occupy the upper-right area, ending around x=1275. Their labels include Introduction, Products, Brand story, About us, and Contact. The mobile hero does not show that horizontal navigation.

The menu target is much larger than its visible symbol: 84px on desktop and 70px on mobile. The two white strokes appear only about 14px and 9px wide respectively, estimated from the screenshots. Their wide vertical separation gives the symbol an unusually spare appearance.

The header wrapper itself measures zero height because its children occupy positioned layouts. Do not rebuild it as a conventional opaque header row using that zero-height measurement. Likewise, the teal strip visible above the desktop oil image is not sufficient evidence for a permanent 150px navigation bar.

Homepage Hero

Role: introduces the landscape and the journey motif before the narrative sections.

The mobile hero fills the 390 × 844px viewport with softly blurred woodland imagery. White identity elements sit at the top, while FIND / YOUR / JOURNEY. occupies three lines at the lower left. The text begins around x=38, y=665, at 40px with 8.4px tracking. The visible line pitch is approximately 55px, even though the parent computes to a 40px line-height.

A fine vertical line appears near the lower-left edge, and a small white store disc sits at the lower right. The composition leaves most of the landscape free of interface elements.

The desktop evidence records a full-viewport hero container and a single-line opening statement, but its supplied opening screenshot remains on the white state. Do not infer an exact settled desktop hero image from the mobile crop.

Role: provides a persistent-looking route from the brand experience to commerce.

The link destination is kloar.store. On desktop, its measured geometry is a narrow 56 × 195px capsule positioned near the lower-right corner. The mobile version measures 38 × 38px and visibly reduces to a white disc with a fine bag icon; the extracted link text remains ONLINE STORE.

The desktop link has 24px top and 26px bottom padding and a 1000px radius. Its surrounding reveal treatment has a 2s delay followed by a 1.4s transition. Exact persistence through the entire scroll journey was not tested.

For reuse, maintain the quiet edge placement and clear destination. Enlarge the mobile hit area around the small disc without enlarging the visible icon disproportionately.

Section Edge Label

Role: identifies long chapters without placing large headings in the main reading column.

Introduction, Products, Brand Story, About Us, and Contact have narrow, tall heading bounds near the left edge. Desktop examples begin around x=31, with a width of approximately 16.2px; mobile examples begin around x=15, with a width of approximately 10.2px. Their bounds extend roughly one viewport height.

This geometry supports a vertical edge-label treatment. The evidence does not expose the precise writing-mode, rotation, or positioning rule. A vertical label is a suitable adaptation; do not claim that a particular CSS transform was recovered.

Introduction Narrative Stage

Role: establishes the brand's regional setting before introducing products.

The Introduction occupies several viewport lengths. Its central Japanese statement is followed by an English translation, longer Japanese narrative, another translation, and the location line Kumamoto, Aso, Minamioguni.

Desktop narrative bounds are approximately 804px wide at x=318. Japanese copy uses 24px text with approximately 53.72px line-height. The mobile column narrows to roughly 275.6px at x=57.2; the narrative becomes 14px / 29.11px, and the lead statement explicitly breaks into three lines.

This is a paced editorial sequence. The long geometry may accommodate visual staging, but scroll pinning, media scrubbing, and exact reveal triggers were not supplied. A static adaptation should shorten the empty intervals unless it also implements meaningful visual content across them.

Movie Launch Control

Role: offers a separate movie experience from within the Introduction.

A rectangular deep-teal button aligns with the right viewport edge. It measures 314 × 85px on desktop and 210 × 57px on mobile. The PLAY MOVIE label is Manrope, weight 400, with 0.14em tracking; its measured size drops from 11px to 7px.

The button defines 600ms background-color and text-color transitions. No successful activation, playback state, audio policy, or movie dialog was captured. Preserve the launch affordance, but implement and test its behavior separately. Increase the mobile label size in an accessible adaptation.

Product Presentation

Role: introduces each product through atmosphere, name, price, a bilingual promise, and a detail-page link.

The current content sequence is Bath Powder followed by Hair & Body oil. Product navigation elsewhere lists oil before bath powder; preserve the distinction between navigation order and homepage narrative order when reproducing the inspected content.

Each presentation contains:

  1. A large English product name and smaller Japanese subtitle.
  2. A restrained price block with quantity or volume information.
  3. A Japanese product promise followed by a smaller English equivalent.
  4. An outlined circular arrow linking to the product detail page.
  5. A separate descriptive text area and numbered feature sequence.

The desktop title is Manrope 46px, weight 300, with 5.566px tracking. The Japanese subtitle is 12px and sits beside it. On mobile the title becomes 28px, with 3.388px tracking, and the 11px Japanese subtitle moves below it.

Desktop alternation: Bath Powder's title begins around x=741.4, while Hair & Body oil begins around x=134.6. Both titles begin around x=38.5 on mobile. This is a meaningful compositional change, not merely smaller padding.

The supplied oil capture shows a hand lifting an amber bottle in the right half of a soft pink photographic field. The left side holds the title, modest price, widely spaced Japanese promise, English line, and 90px circular arrow. Keep the text on the quieter part of the image and retain the large separation between product identity and the detail link.

At inspection, the text shows ¥990 for 10ml of oil, and Bath Powder prices of ¥1,390 for a three-sachet box and ¥390 for an individual sachet. These are dated content observations, not reusable design tokens.

Bilingual Description Pair

Role: allows Japanese narrative to lead while retaining English context.

On desktop, the product description uses two deliberately unequal columns. Japanese occupies approximately 645.1px at x=129.6; English occupies approximately 393.6px at x=916.8. The calculated interval between them is about 142px.

Japanese is white, 16px / 38px, with 0.06em tracking. English is Mist Text at 12px, with 0.075em tracking. The supplied parent line-height does not describe the full English line spacing, so do not copy it as a tightly set 12px / 12px paragraph.

Mobile stacks Japanese above English in a common 312px column. The original sizes become 12px and 9px, with approximately 28px between their rendered boxes. Preserve the language order and airy rhythm; increase the smaller text where reading comfort is more important than exact scale fidelity.

Numbered Feature Rail

Role: presents material and process details after each product introduction.

Bath Powder has six numbered entries; Hair & Body oil has five. The extracted content includes Japanese feature statements and small English translations. Text bounds continue horizontally beyond the viewport, and two circular navigation buttons are present for each sequence.

Desktop feature text boxes are about 255px wide with a 336px pitch. Mobile boxes are about 202px wide with a 255px pitch. These are measurements of the text regions, not a complete measurement of every outer slide or unseen image.

On desktop the 52px navigation buttons are vertically arranged near the left edge. On mobile the 44px buttons sit side by side below the feature content, at approximately x=147 and x=199, giving an 8px gap.

This supports a carousel-style horizontal rail. Dragging, looping, autoplay, slide timing, and button results were not tested. Avoid turning the feature sequence into a dense grid merely because several entries exist in the DOM.

Brand Story

Role: explains the brand's relationship with the region, materials, and local memory.

The section continues the deep-teal field. Desktop Japanese copy occupies a broad area of approximately 709px, paired with an English column of approximately 305px. The Japanese text is unusually open at 22px / 68px. Large top and bottom padding make the section feel like an editorial pause.

Mobile changes to a stacked composition. Japanese measures 14px / 32px in a roughly 295.4px column; the English text below is narrower at approximately 247.5px. The language columns therefore do not simply become two equal full-width blocks.

About Us

Role: connects the brand's regional outlook with the organization behind it.

The desktop arrangement combines a tall Japanese heading at the left, a Japanese body column in the middle, and English text at the right. The heading's narrow 94.2 × 548.9px bounds and Japanese content support a vertical composition. Its measured type is 27px, weight 300.

Mobile retains a vertical heading, centered in an approximately 110.2 × 235.4px box. The Japanese body follows below, then the centered About RETEN link, and then English text. Several mobile Japanese paragraphs compute to display: inline, so their bounding rectangles overlap; do not treat those rectangles as four separately spaced cards.

The DOM also includes 01–04 markers. Their associated media, controls, and behavior were not exposed sufficiently to describe a verified gallery.

Contact

Role: gives direct organizational contact information.

The original page names 株式会社RETEN in this section and links About RETEN to reten-official.com. These original-page details support the operator connection.

Contact is a typographic block rather than an evidenced form. Japanese company and contact rows use Shippori Mincho B1 at 18px on desktop and 14px on mobile. Smaller English details follow in Mist Text. The email address is a measured mailto: link; a telephone action was not established by the supplied link inventory.

Desktop content begins around x=197.8; mobile begins at x=54.1 in a roughly 281.8px column. Keep the information compact and legible without introducing form fields that were not present in the inspected evidence.

Role: returns to the journey motif before presenting secondary navigation.

A large Mist Text FIND YOUR JOURNEY. measures 83.52px on desktop and 40px on mobile. The mobile version uses three lines. Japanese closing copy is followed by English copy, continuing the site's language hierarchy.

The footer repeats the wordmark, a small journey signature, chapter links, nested product links, legal links, Instagram, and copyright. Desktop places the wordmark around x=96 and navigation around x=476.3; mobile aligns both to approximately x=50 and stacks navigation below the identity.

The return-to-top link has measured bounds of 112 × 113px on desktop and 67 × 62px on mobile. Its destination is #document-top; the scrolling behavior was not exercised.

Terminal Photographic Scene

Role: provides a final immersive image after the footer.

Both desktop and mobile captures show dark, defocused, water-like light with a small centered FIND YOUR JOURNEY.. The corresponding terminal text measures 18px on desktop and 12px on mobile, with 0.2em tracking.

The last scene occupies approximately one viewport after the measured footer end. Its tiny central line is deliberately different from the large opening and closing statements. Preserve those distinct scales.

The images look cinematic, but the supplied evidence does not establish the underlying media file type, loop duration, or temporal playback behavior.

Tokens — Motion & Interaction

The strongest motion evidence comes from computed transitions and declared custom properties. The screenshots are individual states, not recordings.

Treatment Evidence Value What it establishes
General control transition Source --transition-button and measured links/buttons 600ms cubic-bezier(0.165, 0.84, 0.44, 1) Slow, smooth control feedback
Menu-stroke spacing Measured menu button gap 600ms with the same easing Gap can transition; the destination state is unverified
Narrative reveal Measured text elements 1400ms opacity, filter, and transform transitions A coordinated reveal treatment is defined
Narrative staggering Measured text elements Delays of 40, 230, 420, and 610ms Repeated 190ms steps between some elements
Store-link reveal Measured wrapper 1400ms with 2000ms delay Delayed entrance treatment is defined
Large closing and terminal statements Measured text 2200ms opacity with 40ms delay Extended fades are defined
Opening fade-out Source --transition-loading-fadeout 1500ms, quartic ease-out curve Declared loading transition
Progress transition Source --transition-progressbar 800ms ease Declared progress timing; completion semantics unverified
Line transition Source --transition-line 1600ms, quartic ease-out curve Declared line timing
Sitemap transition Source --transition-sitemap 1600ms, quartic ease-out curve Declared navigation-panel timing; opening was not tested
Modal transition Source --transition-modal 1000ms, quartic ease-out curve A modal timing token exists; no activated modal was inspected
Accordion transition Source --transition-accordion 800ms, quartic ease-out curve Declaration only; not proof of a visible accordion
General hover opacity Source --hover-opacity 0.4 Declared endpoint; exact application was not established

The main easing is cubic-bezier(0.165, 0.84, 0.44, 1), named --easeOutQuart in the source. It decelerates smoothly and suits the site's restrained presentation. Do not substitute a bouncy spring merely because other easing tokens, including a back curve, exist in the stylesheet.

Exact starting blur, translation distances, media playback, hover endpoints, menu focus handling, and feature-rail behavior remain unverified. A filter transition does not by itself prove a particular blur radius. No claim of parallax, scroll-synchronized video, or a specific animation library is supported by this evidence.

Surfaces

Layer Appearance Purpose
Opening White with deep-teal statement and fine central line A temporary introduction to the experience
Main document Solid #1b434e Continuity across products and editorial sections
Photographic scene Edge-to-edge scenery or product photography Atmosphere and visual depth
Text overlay White or pale typography with minimal boxing Maintains connection to the image
Store control Small white disc on mobile; capsule geometry on desktop Clear commerce access
Detail control Fine circular outline and small arrow Quiet continuation into product detail
Feature control Circular target with muted blue-gray icon color Navigation within a horizontal sequence
Declared overlay Dark green translucent color Potential separation layer; activated appearance unverified

No general card-shadow elevation system is evidenced. The page derives hierarchy from typography, scene changes, spacing, and a few sharply defined controls.

Imagery

The current imagery is natural, atmospheric, and intentionally soft. The mobile hero shows a blurred woodland field with broad gray-green and earth-colored areas. The oil presentation pairs a comparatively clear hand and amber bottle with a diffused pink background. The final scene becomes almost abstract: dark blue-green space and bright, out-of-focus reflections.

The subject matter connects landscape, scent, and touch. In the oil image, the product is part of a human gesture rather than an isolated packshot on a commercial card. The composition reserves a quieter left side for text and concentrates the hand and bottle on the right.

Use large media planes and intentional crops. Preserve the product's scale relative to the surrounding air. Avoid oversharpening every background detail or filling the negative space with decorative interface elements.

Observed Asset References

No original image, video, or logo asset paths were included in the supplied evidence. The following inventory identifies observed content without inventing filenames.

Asset or visual Evidence Implementation implication
Kloar wordmark Mobile hero and measured homepage-link bounds Use an authorized identity asset; exact format unverified
Woodland hero Current mobile capture Supply a portrait-aware crop or separate mobile composition
Hand holding oil bottle Current desktop product capture Preserve the right-side subject and quiet left text region
Defocused dark terminal scene Current desktop and mobile captures Maintain a central text-safe region at both aspect ratios
Bag and arrow symbols Visible controls and measured targets Use fine strokes within generous targets; exact asset source unverified
Bath Powder media Product content and title geometry in DOM Product exists, but its visual asset was not supplied for direct analysis

Photography and media must be supplied separately. The CSS shell can reproduce hierarchy and spacing; it cannot recreate the observed atmosphere without appropriate imagery.

Layout & Responsive Behavior

The homepage remains a long narrative document on both viewports. Its measured height is approximately 15.9 desktop viewport heights and 16.8 mobile viewport heights. Mobile is not a short promotional substitute for the desktop content.

Relationship Desktop evidence Mobile evidence
Primary navigation Horizontal links in upper-right DOM layout No horizontal links visible in hero; menu trigger retained
Journey statement Single-line opening treatment Explicit three-line treatment
Product title and subtitle English and Japanese alongside each other Japanese subtitle moves below English title
Product composition Bath title right; oil title left Both titles align near the left inset
Product descriptions Unequal Japanese/English columns Japanese then English in one column
Feature rail controls Vertical pair near left edge Horizontal pair below content
About composition Vertical heading and two language columns Centered vertical heading followed by stacked content
Store control Tall capsule bounds Compact white bag disc
Footer Identity and navigation in separate horizontal areas Identity above navigation

Source breakpoint declarations include 767/768, a down threshold of 1023, and additional larger-width thresholds. The exact rules attached to each threshold were not supplied. Only 1440px and 390px widths were inspected; tablet and intermediate behavior remain unverified.

The measured viewport-height variables resolve to 1000px and 844px. Declared minimum-height tokens evaluate to 768px on desktop and 420px on mobile, but their application to individual scenes was not established.

For a new implementation, use stable viewport units with a suitable fallback, test short landscape screens, and add safe-area protection to edge controls. These are recommendations; safe-area behavior was not present in the supplied measurements.

Do’s and Don’ts

Do
  • Keep Deep Teal #1b434e as the continuous document field.
  • Use white for primary writing and #c3cdd0 for quieter English accompaniment.
  • Pair light Manrope with Shippori Mincho B1 rather than flattening the bilingual hierarchy.
  • Preserve large tracking on the journey statements and English product titles.
  • Keep the wordmark, Japanese promise, and main statement spatially distinct.
  • Let photography occupy the full scene and reserve calm image areas for text.
  • Retain the desktop alternation between Bath Powder and oil compositions.
  • Stack product languages deliberately on mobile and retain editorial line breaks.
  • Use small circular arrows with generous separation from the copy.
  • Preserve the vertical About heading and narrow section-edge labels where space allows.
  • Treat opening, large closing statement, and small terminal statement as different components.
  • Distinguish source motion declarations from interactions that still require implementation and testing.
Don’t
  • Don't replace the homepage with a generic feature-card grid or a checkout interface.
  • Don't interpret the white opening capture as the site's permanent page theme.
  • Don't turn photographic blush or an unused library color into a global CTA accent.
  • Don't assume every empty-text link is inaccessible; accessible names were not fully inspected.
  • Don't reproduce a wordmark by guessing its font.
  • Don't set English paragraphs to the tiny parent line-height without checking rendered line spacing.
  • Don't scale the whole desktop scene down to fit a phone.
  • Don't fill the scenic negative space with badges, shadows, or large filled buttons.
  • Don't invent looping, dragging, parallax, audio, or menu behavior from static captures.
  • Don't copy multi-viewport empty space unless a working visual sequence occupies it.
  • Don't treat offscreen feature bounds as accidental page overflow without considering their horizontal rail context.

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

  • Give the menu, bag, product arrows, and rail controls explicit accessible names. Use links for navigation and buttons for state changes.
  • Retain the mobile store disc's 38px visual size inside at least a 44px interaction target.
  • Increase essential English captions and translations above the original 7–9px mobile sizes. Check the resulting line breaks rather than allowing overflow.
  • Provide a visible focus indicator and verify contrast over every media frame or poster used behind text.
  • Implement menu focus management, Escape dismissal, expanded-state semantics, and an independently scrollable panel where needed.
  • Keep essential navigation and content available if media or web fonts fail to load.
  • Supply a static poster and reduced-motion alternative for atmospheric media. CSS transition suppression alone does not pause a video.
  • If the feature rail becomes interactive, support keyboard navigation and announce its current position without forcing autoplay.
  • Ensure the opening state resolves after failure as well as success; avoid blocking access while nonessential media downloads.
  • Test 390 × 844, the inspected desktop size, tablet widths, short landscape screens, and browser text enlargement.

Agent Prompt Guide

Quick Color Reference
  • Main field: #1b434e.
  • Secondary declared field: #284e58.
  • Primary writing: #ffffff.
  • English supporting text: #c3cdd0.
  • Secondary links: #a7b6ba.
  • Fine rules: #658087, nominally 0.7px.
  • Quiet feature controls: #7a9198.
  • Photographic pink, sage, and navy belong to the media, not a separate button-color system.
Overall Prompt

“Create a responsive lifestyle-brand homepage inspired by the current Kloar reference. Use a continuous deep-teal #1b434e canvas, pale bilingual text, spacious landscape photography, and fine circular controls. Set English display text in light Manrope and Japanese narrative in Shippori Mincho B1. Build a full-viewport opening scene, a paced regional introduction, two atmospheric product presentations, numbered horizontal feature sequences, Brand Story, About, Contact, and a spacious footer followed by a dark photographic end scene. Alternate product title alignment on desktop; stack both titles and the language columns on mobile. Keep the commerce route as a small edge control. Use the supplied measurements as targets, label readability improvements, and implement only explicitly specified media and navigation behavior.”

Example Component Prompts
  1. Mobile hero: “A 390 × 844 scenic opening with blurred gray-green woodland, a small Japanese promise near the upper left, a separate wordmark below, and two tiny menu strokes within a 70px target at the upper right. Place FIND / YOUR / JOURNEY. at the lower left in 40px light Manrope with 0.21em tracking. Add a small white bag disc near the lower right.”
  2. Oil presentation: “A full-width atmospheric product scene with an amber bottle held by a hand on the right and soft pink negative space on the left. Use a 46px tracked English product name, a small adjacent Japanese subtitle, quiet pricing, a Japanese promise, a smaller English translation, and a 90px outlined arrow below. On mobile use a 28px title, move the subtitle below it, and reduce the circle to 54px.”
  3. Bilingual description: “On a deep-teal field, create unequal desktop columns: approximately 645px for white Japanese Mincho text and 394px for pale English Manrope text, separated by generous space. Stack Japanese above English in a 312px column at a 390px viewport. Preserve the hierarchy while increasing small English text for readability.”
  4. Feature rail: “An unboxed horizontal sequence of numbered material and process details, with muted serif numbers and Japanese-first bilingual captions. Use approximately 255px-wide desktop text regions and 202px mobile text regions. Place circular navigation vertically at desktop left and horizontally below on mobile. Do not add autoplay unless explicitly requested.”
  5. Terminal scene: “A full-viewport dark blue-green photographic field with large defocused highlights and a tiny centered FIND YOUR JOURNEY. Set it in light Manrope at 18px desktop and 12px mobile with 0.2em tracking. Keep the rest of the scene visually quiet.”

Quick Start

CSS Custom Properties

This is a usable static adaptation, not the original stylesheet. It retains measured colors, major type targets, and key control proportions while using normal document flow. It intentionally raises several small text sizes and does not reproduce the multi-viewport Introduction choreography.

Load the named fonts through your project's approved font setup and supply authorized imagery. Scene media can be an image or a separately implemented video; playback, loading completion, menu behavior, and rail-button behavior require their own logic. The 1024px desktop threshold below is a recommendation aligned with a declared source breakpoint boundary, not a verified complete responsive rule.

:root {
  /* Measured colors and source-derived aliases */
  --color-field: #1b434e;
  --color-field-secondary: #284e58;
  --color-text: #ffffff;
  --color-muted: #c3cdd0;
  --color-secondary: #a7b6ba;
  --color-number: #aebcc0;
  --color-line: #658087;
  --color-icon: #7a9198;
  --color-detail-mobile: #8da1a6;
  --color-overlay: rgb(0 23 20 / 60%);

  /* Observed family declarations; font loading is separate */
  --font-latin: 'Manrope', sans-serif;
  --font-japanese: 'Shippori Mincho B1', serif;
  --font-interface: 'Noto Sans JP', sans-serif;
  --weight-light: 300;
  --weight-regular: 400;

  /* Mobile targets and recommended readable supporting sizes */
  --text-journey: 40px;
  --text-product: 28px;
  --text-japanese: 14px;
  --text-english: 11px;
  --text-terminal: 12px;
  --tracking-journey: 0.21em;
  --tracking-product: 0.121em;
  --tracking-japanese: 0.06em;
  --tracking-english: 0.075em;

  /* Geometry */
  --content-width: 80%;
  --content-max: 1180.8px;
  --section-space: clamp(96px, 15vw, 240px);
  --detail-size: 54px;
  --rail-control-size: 44px;
  --feature-width: 202px;
  --feature-gap: 53px;
  --rule: 0.7px;
  --radius-pill: 1000px;

  /* Measured motion timings */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --motion-control: 600ms var(--ease-out);
  --motion-reveal: 1400ms var(--ease-out);
  --motion-opening: 1500ms var(--ease-out);
  --motion-panel: 1600ms var(--ease-out);
  --motion-statement: 2200ms var(--ease-out);
}

.kloar-site,
.kloar-site * {
  box-sizing: border-box;
}

.kloar-site {
  margin: 0;
  color: var(--color-text);
  background: var(--color-field);
  font-family: var(--font-interface);
  font-weight: var(--weight-light);
  line-height: 1.7;
}

.kloar-site a {
  color: inherit;
}

.kloar-site button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.kloar-container {
  width: var(--content-width);
  max-width: var(--content-max);
  margin-inline: auto;
}

.scene {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background: var(--color-field);
}

.scene__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, center);
}

.hero__promise {
  position: absolute;
  top: 46px;
  left: 30px;
  margin: 0;
  font: 400 15px / 1 var(--font-japanese);
  letter-spacing: 0.12em;
}

.hero__brand {
  position: absolute;
  top: 105px;
  left: 50px;
  display: block;
  width: 79px;
}

.hero__brand img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__journey {
  position: absolute;
  left: 38px;
  bottom: 38px;
  margin: 0;
  font: 300 var(--text-journey) / 1.375 var(--font-latin);
  letter-spacing: var(--tracking-journey);
}

.hero__journey span {
  display: block;
}

/* Recommended positioning; the original position rule was not supplied. */
.menu-trigger {
  position: fixed;
  z-index: 40;
  top: 20px;
  right: max(7px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 19px;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: gap var(--motion-control);
}

.menu-trigger span {
  width: 9px;
  height: 1px;
  background: currentColor;
}

.desktop-nav {
  display: none;
}

/* A 38px visible disc inside a recommended 44px target. */
.store-link {
  position: fixed;
  z-index: 30;
  isolation: isolate;
  right: max(19px, env(safe-area-inset-right, 0px));
  bottom: max(35px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--color-field) !important;
  text-decoration: none;
}

.store-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  border-radius: inherit;
  background: white;
}

.store-link svg {
  width: 16px;
  height: 16px;
}

.store-link__label {
  display: none;
}

.editorial-section {
  position: relative;
  padding-block: var(--section-space);
  background: var(--color-field);
}

/* A vertical adaptation of the observed narrow edge-label geometry. */
.section-label {
  position: absolute;
  top: 30px;
  left: 15px;
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 10px / 1 var(--font-japanese);
}

.product-scene {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  padding-block: 72px;
  overflow: clip;
}

.product-copy {
  width: 100%;
}

.product-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.product-title {
  margin: 0;
  font: 300 var(--text-product) / 1.2 var(--font-latin);
  letter-spacing: var(--tracking-product);
}

.product-subtitle {
  margin: 0;
  font: 400 11px / 1.5 var(--font-japanese);
  letter-spacing: 0.06em;
}

.product-price {
  margin-block: 28px 0;
  font: 400 14px / 1.8 var(--font-japanese);
}

/* Product-promise size is a recommendation, not a measured source value. */
.product-promise {
  margin-block: 64px 20px;
  font: 400 22px / 1.8 var(--font-japanese);
  letter-spacing: 0.12em;
}

.product-translation {
  margin: 0;
  font: 300 11px / 2 var(--font-latin);
  letter-spacing: 0.06em;
}

.circle-link,
.rail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: var(--rule) solid currentColor;
  border-radius: 50%;
  background: transparent;
  text-decoration: none;
  transition:
    color var(--motion-control),
    background-color var(--motion-control);
}

.circle-link {
  width: var(--detail-size);
  height: var(--detail-size);
  margin-top: 96px;
  color: var(--color-detail-mobile) !important;
}

.bilingual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-block: 72px;
}

.copy-japanese {
  margin: 0;
  font: 400 var(--text-japanese) / 2 var(--font-japanese);
  letter-spacing: var(--tracking-japanese);
}

.copy-english {
  margin: 0;
  color: var(--color-muted);
  font: 300 var(--text-english) / 2.16 var(--font-latin);
  letter-spacing: var(--tracking-english);
}

/* Native horizontal scrolling is an adaptation, not verified source behavior. */
.feature-rail {
  display: flex;
  gap: var(--feature-gap);
  overflow-x: auto;
  padding: 24px max(39px, calc((100% - 1180.8px) / 2));
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.feature {
  flex: 0 0 var(--feature-width);
  scroll-snap-align: start;
}

.feature__number {
  margin: 0 0 32px;
  color: var(--color-number);
  font: 400 11px / 1 var(--font-japanese);
}

.feature__translation {
  margin-top: 20px;
  color: var(--color-muted);
  font: 400 11px / 1.8 var(--font-latin);
  letter-spacing: 0.1em;
}

.rail-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.rail-button {
  width: var(--rail-control-size);
  height: var(--rail-control-size);
  color: var(--color-icon) !important;
}

.about-heading {
  width: max-content;
  max-height: 26em;
  margin: 0 auto 48px;
  writing-mode: vertical-rl;
  font: 300 20px / 2.25 var(--font-japanese);
  letter-spacing: 0.07em;
}

.site-footer {
  padding: 140px 50px 100px;
  background: var(--color-field);
}

.site-footer nav {
  display: grid;
  justify-items: start;
  gap: 22px;
  margin-top: 96px;
}

.site-footer a {
  font: 300 12px / 1.6 var(--font-latin);
  text-decoration: none;
}

.terminal-scene {
  display: grid;
  place-items: center;
}

.terminal-scene p {
  margin: 0;
  font: 300 var(--text-terminal) / 1.5 var(--font-latin);
  letter-spacing: 0.2em;
}

.kloar-site :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

@media (min-width: 1024px) {
  :root {
    --content-width: 82%;
    --text-journey: 66px;
    --text-product: 46px;
    --text-japanese: 16px;
    --text-english: 12px;
    --text-terminal: 18px;
    --detail-size: 90px;
    --rail-control-size: 52px;
    --feature-width: 255px;
    --feature-gap: 81px;
  }

  .hero__promise {
    top: 95px;
    left: 65px;
    font-size: 22px;
  }

  .hero__brand {
    top: 203px;
    left: 96px;
    width: 133px;
  }

  .hero__journey {
    right: 96px;
    bottom: 104px;
    left: 96px;
    text-align: center;
    line-height: 1;
  }

  .hero__journey span {
    display: inline;
  }

  .menu-trigger {
    top: 64px;
    right: 41px;
    width: 84px;
    height: 84px;
    gap: 32px;
  }

  .menu-trigger span {
    width: 14px;
  }

  .desktop-nav {
    position: absolute;
    top: 95px;
    right: 165px;
    display: flex;
    gap: 24px;
    font: 300 12px / 1.5 var(--font-latin);
  }

  .desktop-nav a {
    text-decoration: none;
  }

  .store-link {
    right: 54px;
    bottom: 57px;
    flex-direction: column;
    gap: 16px;
    width: 56px;
    height: 195px;
    padding: 24px 0 26px;
  }

  .store-link::before {
    inset: 0;
  }

  .store-link__label {
    display: block;
    writing-mode: vertical-rl;
    font: 300 10px / 1 var(--font-latin);
    letter-spacing: 0.06em;
  }

  .section-label {
    top: 77px;
    left: 31px;
    font-size: 16px;
  }

  .product-scene {
    min-height: 900px;
    padding-block: 271px 96px;
  }

  .product-copy--right {
    width: 49%;
    margin-left: auto;
  }

  .product-heading {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 31px;
  }

  .product-subtitle {
    font-size: 12px;
  }

  .product-promise {
    margin-top: 96px;
    font-size: 30px;
  }

  .circle-link {
    color: white !important;
  }

  .bilingual {
    grid-template-columns: minmax(0, 645fr) minmax(0, 394fr);
    column-gap: clamp(64px, 9.87vw, 142px);
    align-items: start;
    padding-block: 96px;
  }

  .copy-japanese {
    line-height: 2.375;
  }

  .feature__number {
    font-size: 14px;
  }

  .about-heading {
    margin-inline: 0;
    font-size: 27px;
    line-height: 2.48;
  }

  .site-footer {
    display: grid;
    grid-template-columns: 278px 1fr;
    gap: 102px;
    padding-inline: 96px;
  }

  .site-footer nav {
    margin-top: 0;
  }
}

@media (hover: hover) {
  /* Recommended feedback; exact original endpoints were not inspected. */
  .circle-link:hover,
  .rail-button:hover {
    background: var(--color-field-secondary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kloar-site *,
  .kloar-site *::before,
  .kloar-site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

Use separate span elements for the three journey words and retain whitespace between them for the desktop inline version. Give the store link an accessible name even when its visible label is hidden. Feature buttons should only be rendered as active controls once connected to actual rail movement.

The adaptation leaves reveal content visible by default. Add a tested controller before introducing hidden starting states. Media playback and reduced-motion poster selection require explicit application logic beyond this CSS.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This mapping is an implementation convenience, not evidence of the original site's framework.

@theme inline {
  --color-kloar: #1b434e;
  --color-kloar-secondary: #284e58;
  --color-mist: #c3cdd0;
  --color-quiet: #a7b6ba;
  --color-hairline: #658087;
  --color-quiet-icon: #7a9198;

  --font-latin: 'Manrope', sans-serif;
  --font-editorial: 'Shippori Mincho B1', serif;
  --font-interface: 'Noto Sans JP', sans-serif;

  --text-product: var(--text-product-size, 28px);
  --text-journey: var(--text-journey-size, 40px);
  --radius-capsule: 1000px;
  --spacing-detail: var(--detail-size);
  --ease-kloar: cubic-bezier(0.165, 0.84, 0.44, 1);
}

Sources & Evidence

  • Original and final website: https://kloar.jp/, reported HTTP status 200, with no URL change.
  • Capture timestamp: September 13, 2026, 08:24:10.607 UTC / 17:24:10.607 JST.
  • Inspected viewports: 1440 × 1000 and 390 × 844 CSS pixels. Reported document heights are approximately 15,891px and 14,178px.
  • Visual evidence: supplied current-page desktop opening, desktop oil presentation, desktop terminal scene, mobile hero, and mobile terminal scene.
  • Structural evidence: rendered homepage text, link destinations, element rectangles, computed typography, colors, spacing, transition declarations, and custom properties at both widths.
  • Original-page operator evidence: Contact names 株式会社RETEN; the homepage contains the About RETEN link. No production-credit claims are established by the inspected original-page evidence.
  • Inspection method: the supplied collector waited for document load, image decoding, finite animation checks, and sampled layout/text stability. Readiness checks had a 15s overall bound and a 5s pending-image bound. Perpetual animations were paused during readiness checks and then resumed. Scroll traversal allowed up to 10s per position.
  • Limitations: the evidence is not a continuous motion recording or an exhaustive interaction test. Delayed content, activated menu and movie states, carousel outcomes, hover endpoints, keyboard behavior, media formats, font files, and intermediate viewport layouts remain unverified. SharedWorkers and service workers were disabled during collection.

This reference describes the current homepage supported by the supplied captures and rendered evidence. Measurements, visual estimates, calculated relationships, and recommended implementation choices are identified separately.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る