# Guruguru Shakashaka — Style Reference

> A quiet white page held between blue waves, with vertical Japanese lettering and playful salt-shaker characters.

**Original URL:** [guruguru-shakashaka.jp](https://guruguru-shakashaka.jp/)
**Final URL:** [guruguru-shakashaka.jp](https://guruguru-shakashaka.jp/)
**Theme:** light; white canvas, black artwork, and blue-to-aqua edge decoration.
**Inspected evidence:** September 17, 2026, 05:37 JST. The supplied retrieval timestamp is September 16, 2026, 20:37:19.503 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current experiential salt-shop website, including its opening identity, mobile introduction, store photography, access information, utility links, and footer. Rendered DOM provides additional evidence for workshop, reservation, commerce, and people-related sections. Their complete visual presentation is not established by the supplied captures.

The site presents a physical place to compare and blend salt. Its strongest visual decision is the contrast between a very open white interior and narrow, irregular blue borders. Black Japanese lettering, a restrained producer signature, and two peculiar shaker-like characters give the opening the character of a small illustrated poster. The page then extends into a long scrolling explanation and practical store information.

Typography and illustration frequently operate as a single graphic composition. The store name runs vertically in three columns, while its Roman reading occupies three horizontal lines beneath the left side. Small faces, scattered grains, coils, and translucent blue objects connect the identity to the act of shaking and mixing. Bright photographs of the blue shop carry this palette into a real environment.

This is a shop and experience website with several outward links. Preserve its patient reading rhythm, graphic identity, and useful visit information when adapting it.

## How to Read This Reference

- **Measured** means a value reported by the supplied rendered DOM or computed styles. Measurements apply to the recorded viewport and capture state.
- **Estimated** means a visual approximation from the original-page screenshots. Estimated colors are not sampled source declarations.
- **Recommended** means an implementation choice for a new build. Breakpoints, accessible text sizes, CSS masks, and unverified interaction treatments fall into this category.
- **Named tokens** are descriptive implementation aliases. The supplied evidence does not expose a reusable source token system.
- **Graphic bounds are not font sizes.** Many headings have empty extracted text and inherit `Times`, `10px`, and `11.5px` line height. Those values describe their DOM wrappers, not the prominent lettering visible in the captures.
- **Painted bounds and DOM boxes sometimes differ.** Several desktop graphic containers report heights of `0px` or `11.5px`, even where a larger graphic is visible. Do not use those heights as image dimensions or verified interactive hit areas.
- **Visual coverage is partial.** One intermediate desktop capture is almost entirely white apart from the borders and an edge character. This documents a capture state; it does not establish an intentional blank chapter, a loading failure, or a particular reveal animation.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| White canvas | `#ffffff` | `--color-paper` | **Measured:** HTML and body backgrounds are `rgb(255, 255, 255)`. The same white visually continues through the content and footer. |
| Black ink | `#000000` | `--color-ink` | **Measured:** computed text color is black; supplied inline SVG fragments also contain black fills. Used visibly for lettering, character silhouettes, and fine outlines. |
| Deep blue | Approximately `#006da6` | `--color-blue` | **Estimated:** saturated portions of the wave frame and a close visual relative of the store's blue interior. |
| Aqua | Approximately `#65b3b7` | `--color-aqua` | **Estimated:** the intermediate blue-green region of the edge gradients. |
| Pale cyan | Approximately `#c7e7ec` | `--color-pale` | **Estimated:** the lightest blue regions of the wave frame. |

Only white and black above are exact computed colors. The three blue-family values are useful starting points for an adaptation and should be checked against authorized source assets before claiming fidelity.

### Color Behavior

The blue gradient belongs primarily to the page edges. The interior remains white, with black artwork and text. Store photography introduces a much larger area of saturated blue without changing the underlying page surface.

The left and right borders show different color progressions at corresponding heights. Their apparent color phase also differs across captures. The evidence does not establish whether this comes from document position, animation, or a combination of layers.

Do not turn the entire content background into a blue gradient. The white space between the colored frame and the central material is essential to the composition. The observed utility buttons remain white with thin dark outlines.

No alternate theme or theme selector is evidenced.

## Tokens — Typography

### Graphic Brand Lettering

The visible brand treatment combines thick, irregular Japanese forms with simple Roman lettering. Its defining feature is its composition rather than an identifiable font family.

The Japanese name is read in vertical columns: `ぐるぐる` at the right, then two columns of `しゃか`. Beneath the left portion, the Roman text is stacked as `guru guru`, `shaka`, and `shaka`. The separate phrase `塩をまぜるみせ` runs vertically farther to the right.

The main heading's measured aspect ratio is approximately `0.744` at both inspected sizes. This strongly supports preserving the composition as a single proportional graphic or equivalently controlled layout. It does not establish a particular asset format.

Use authorized original artwork when available. Do not substitute a named Japanese display font and describe it as the source font.

### Producer Signature

The small centered signature reads `produced by BambooCut`. The prefix is light and understated; the BambooCut wordmark is heavier. Both remain much smaller than the main identity.

The original page also exposes a link labeled `BambooCutのサイトへ` and displays a BambooCut copyright line. These are original-page observations. They do not establish who designed or developed the website.

### Live Text and Computed Font Caveat

The supplied root and body styles are:

```css
font-family: Times;
font-size: 10px;
font-weight: 400;
line-height: 11.5px;
```

Many empty heading and paragraph wrappers inherit these values. The screenshots do not show a page uniformly typeset in 10px Times. Graphic lettering and nested artwork must be considered separately.

The footer copyright is explicitly measured as `sans-serif`, weight `400`, at `16px / 18.4px` on desktop and `14px / 16.1px` on mobile. Store details look like a plain sans-serif treatment, but their actual family and computed size were not included in the supplied element sample.

For new live interface text, a generic `sans-serif` stack is a defensible recommendation. It is not an identification of a proprietary source font.

### Type and Artwork Scale

| Role | Desktop | Mobile | Classification |
| --- | --- | --- | --- |
| Main identity composition | `347.69 × 467.47px` | `134.70 × 181.11px` | **Measured H1 bounds**, including the visible Japanese/Roman composition; not font size. |
| Vertical descriptor | `39.81 × 330.58px` | `14.47 × 120.14px` | **Measured graphic-wrapper bounds.** |
| Producer signature wrapper | `269.95 × 20.83px` | `123.17 × 11.5px` | **Measured wrapper bounds**; the mobile height may reflect its inherited line box. |
| Japanese title glyphs | Approximately `65–75px` tall | Approximately `26–30px` tall | **Visual estimate** of apparent glyph size. |
| Roman title lines | Approximately `40px` | Approximately `16px` | **Visual estimate**; retain the three-line arrangement. |
| Introductory Japanese copy | Large graphic block | Approximately `16px` apparent type with generous leading | **Visual estimate**; the mobile block contains four strongly separated lines. |
| Store detail text | Approximately `21–23px` | Approximately `10–12px` | **Visual estimate**; exact type declarations were not supplied. |
| Oval action labels | Approximately `26–28px` | Approximately `10–12px` | **Visual estimate** of artwork or label size. |
| Copyright | `16px / 18.4px` | `14px / 16.1px` | **Measured**, generic sans-serif, regular weight. |

Some mobile supporting copy is visibly small. A new implementation should improve essential-text readability while preserving the relative hierarchy; enlarging it will change line breaks and section heights.

## Tokens — Spacing & Shapes

**Density:** sparse overall, with localized information groups.
**Primary shapes:** irregular waves, fine outlined ellipses, rectangular photographs, and black illustrated silhouettes.
**Spacing model:** several nested centered widths rather than one universal text column.

### Layout Measurements

| Element | Desktop: 1440 × 1000 | Mobile: 390 × 844 | Interpretation |
| --- | --- | --- | --- |
| Outer content shell | `1200px` wide at `x = 120px` | `390px` wide at `x = 0px` | A `1200px` maximum-width shell is a reasonable implementation inference, not an exposed source rule. |
| Header region | `298px` high | `96.84px` high | Both are approximately `24.83%` of the shell width. |
| H1 position | `x = 551.55`, `y = 301.95` | `x = 127.64`, `y = 100.11` | Main identity is approximately centered; it is not flush with the store-information column. |
| Opening section height | `2229px` | `816.39px` | Includes more than the title; do not use it as a viewport-height hero specification. |
| Workshop/middle section width | `903.88px` | `293.75px` | Approximately `75.32%` of the shell at both sizes. |
| People/store section width | `728.25px` | `284.02px` | Approximately `60.69%` of the desktop shell and `72.82%` of the mobile shell. |
| Japanese introduction bounds | `592.86 × 238.02px` | `231.20 × 92.81px` | The visible copy is a deliberately shaped graphic block. |
| Mobile map/recruitment anchors | — | Each `124.42 × 49.69px` | Measured DOM anchor bounds; both remain side by side. |
| Mobile social icon anchor | — | `27.64 × 28.91px` | Measured icon-sized anchor; a larger hit area is recommended. |
| Document height | `10195.47px` | `4287.16px` | Recorded DOM extent; graphic overflow can differ from parent boxes. |
| Footer bottom padding | `60px` | `31.2px` | Measured computed padding. |

### Spacing Scale

The evidence does not reveal a single spacing unit. The following observations are more useful than imposing an invented eight-point system.

| Relationship | Approximate value | Evidence |
| --- | --- | --- |
| Mobile producer signature top | `25.19px` | Measured wrapper position. |
| Desktop producer signature top | `56.52px` | Measured wrapper position. |
| Mobile title bottom to character pair | About `29px` | Screenshot estimate using measured title bounds. |
| Mobile character pair bottom to introductory copy | About `94px` | Screenshot estimate; the gap is visibly intentional in the supplied opening capture. |
| Mobile gap between store photographs | About `19–20px` | Screenshot estimate. |
| Store photograph to detail rows | About `80px` desktop; `32–35px` mobile | Screenshot estimate. |
| Gap between oval action outlines | About `80px` desktop; `32px` mobile | Screenshot estimate. |
| Mobile action row to Instagram icon | About `64px` | Measured anchor positions, from action bottom to icon top. |

### Border Radius

| Element | Treatment | Status |
| --- | --- | --- |
| Store photographs | Square corners | Observed visually. |
| Map and recruitment links | Full ellipse, approximately `2.5:1` | Observed visually; `border-radius: 50%` is a recommended construction. |
| Page edge | Broad irregular wave | Observed visually; not a rounded container corner. |
| Content sections | Unboxed | Observed in the supplied visible sections. |
| Character artwork | Organic silhouette | Preserve as artwork rather than UI corner tokens. |

Use a fine, approximately one-pixel outline for the oval links. There is no visible card-shadow or elevated-panel system in the inspected regions.

## Components

### Wave Frame

**Role:** unifies the long page and evokes movement without filling the reading area.

A narrow colored strip runs along each outer edge. Its inner boundary repeatedly bulges toward and retreats from the content. The curves are broad and slightly irregular, not tightly repeated sine waves. Desktop strip widths visually vary around `45–85px`; mobile strips are roughly `10–26px` wide. These are screenshot estimates.

The two sides are not identical in color at a given height. Leave substantial white space inside them. Content and buttons should not sit directly against the waves.

The original implementation mechanism is not provided. A repeating SVG mask over a gradient is a practical recommendation. The Quick Start uses that approach as a static approximation.

### Producer Signature

**Role:** a discreet identity cue before the main title.

Place the `produced by BambooCut` graphic centrally near the top. It sits within a large header region, without a navigation bar, divider, or colored panel in the supplied opening captures.

The signature scales differently from the main title: its mobile wrapper is about `46%` of the desktop width, while the H1 is about `39%`. Preserve this distinction rather than scaling the entire opening as one screenshot.

### Main Identity and Vertical Descriptor

**Role:** the principal visual introduction.

The identity is a tall composition of three Japanese columns and three Roman lines. Its Japanese lettering is heavy and human in character. The Roman text supplies a quieter horizontal rhythm below.

The vertical descriptor sits well to the right of the name: its measured left edge is `1084.45px` on desktop and `332.48px` on mobile. This offset is part of the composition. It should not become a centered subtitle directly beneath the H1.

There is no visible conversion button inside this opening composition. Let the typography and surrounding white space carry it.

For accessible implementation, provide the full name `塩をまぜるみせ ぐるぐるしゃかしゃか` as a meaningful heading even if the visible treatment uses outlined artwork.

### Paired Shaker Characters

**Role:** translate the name's shaking and swirling sounds into a memorable visual motif.

The mobile opening shows two black figures beneath the title. One has an angular, hourglass-like body with small grains and marks scattered above it. The other has a rounded head/body and a loose vertical coil extending upward. Tiny light facial details punctuate the solid silhouettes.

The pair occupies approximately `132 × 120px` in the mobile capture. Keep the asymmetry, rough line quality, and unequal top decorations. A generic icon set would lose the character of this component.

The desktop opening cuts through the lower illustration region, so the complete desktop character dimensions cannot be measured from that capture.

### Introductory Copy and Salt Emblem

**Role:** explain the in-store activity after the visual introduction.

The mobile capture shows a four-line Japanese statement:

> くらべて、みつけて、まぜる。
> おみせのカウンターでは
> 600種類のレシピから
> はじめての塩の体験ができます。

The measured graphic block is `231.20 × 92.81px` on mobile. It begins at approximately `y = 522.28px`, leaving a conspicuous pause after the characters.

Below it is the English heading `Craft your own salt workshop`, followed by a much smaller explanatory paragraph. A delicate outlined emblem with stacked oval forms and the word `SALT` sits to the right of this English group.

The introduction is followed by imagery of small salt piles and translucent pale-blue cubes. The objects are separated on white, with directional photographic shadows. Those shadows belong to the imagery, not to an interface elevation system.

### Workshop Information and Reservation Link

**Role:** provide practical experience information and a route to reservation.

The DOM establishes a workshop-related section after the introduction, including a repeat-purchase note, a weight-variation note, two links to the same PDF, and an external reservation link.

The first PDF-linked graphic has measured bounds of approximately `302.83 × 203.83px` on desktop and `118.09 × 79.48px` on mobile. It carries the recorded animation `3s infinite bound`. The second PDF anchor reports zero height in both DOM samples, so its usable area cannot be determined from that measurement.

The reservation anchor is approximately `903.88 × 95.75px` on desktop and `255.78 × 93px` on mobile. Its near-constant height despite a large width change is evidence against uniformly shrinking the desktop layout.

The complete reservation artwork and label are not visible in the supplied screenshots. Do not invent a button color, label, icon, or booking modal.

Observed destinations:

- Booklet: [guru_ehon.pdf](https://guruguru-shakashaka.jp/pdf/guru_ehon.pdf).
- Reservation: [external reservation service](https://eaty.rsv-site.owl-solution.jp/gurushaka-reserve/seat).

These are recorded link targets. Their destination contents and click behavior were not inspected.

### Commerce-Related Middle Section

**Role:** connects another content chapter to the online shop.

A subsequent section occupies `903.88px` in desktop width and `293.75px` on mobile. Its mobile DOM contains three consecutive graphic containers measuring approximately `255.78 × 255.78px` each, followed by an [online-shop link](https://bamboo-cut.shop-pro.jp/).

Those dimensions establish a sequence of square containers. They do not establish the pictured products, a carousel, a three-card grid, or selectable states. The supplied desktop screenshot for an intermediate position is largely blank, and several corresponding desktop graphic containers report only an inherited line-box height.

Treat the specific imagery and rendering behavior of this chapter as unverified. Do not fill this gap with generic product cards and describe them as observed design.

### People and Brand Section

**Role:** supplies context about the people and brand associated with the shop experience.

The DOM exposes `BambooCutのサイトへ`, `青山志穂さんのサイトへ`, and a short statement describing Aoyama through the metaphor of a salt magician. The section uses the same measured width as the later store section.

The original page links directly to [BambooCut](https://bamboo-cut.jp/) and [Shiho Aoyama](https://shiho-aoyama.com/). The supplied evidence does not show the full visual arrangement of this chapter or identify a website production role for either link.

Retain the editorial, unboxed relationship between copy, artwork, and small links when adapting the established visual language. Any specific portrait arrangement would be a new design decision.

### Store Photography

**Role:** make the physical shop and its extensive salt display tangible.

The mobile store section begins with the centered heading `おみせのこと`, then two stacked landscape photographs. The first presents the open blue counters and timber-framed shop interior. The second shows a person reaching toward a wall of labeled jars.

Both photographs are approximately `284px` wide on mobile, with square corners and no decorative border. Their visible heights are approximately `182px` and `178px`. Preserve their actual aspect ratios instead of forcing all photography into one crop.

The lower desktop capture shows the jar-wall photograph at approximately `728px` wide, clipped by the top of the viewport. Its full desktop height cannot be inferred from that crop.

### Store Details

**Role:** answer practical visit questions in a compact label/value arrangement.

Four rows are visible: `所在地`, `電話番号`, `営業時間`, and `最寄駅`. Labels align at the left, while their corresponding values begin on a consistent second axis. There are no row dividers or tinted table cells.

The captured information identifies the Tokyo Solamachi location, telephone number, opening hours, and nearby stations. In a new build, keep this information as live text in a semantic description list. Allow long values to wrap while keeping each label attached to its value.

The mobile source presentation is visually small. A recommended adaptation should use readable live text even if that adds line wrapping.

### Map and Recruitment Links

**Role:** provide two equally weighted practical actions.

`Google MAP` and `採用情報` appear inside large, thin outlined ellipses. They remain side by side on the inspected phone viewport. The fills are white and the labels are dark, with no shadow or prominent arrow.

Desktop visible ellipse dimensions are approximately `324 × 130px`; mobile anchor bounds are `124.42 × 49.69px`. The desktop anchor sample itself reports only `11.5px` height, so the visible outline and measured parent box must not be conflated.

The recorded destinations are [Google Maps](https://maps.app.goo.gl/3RqtSRV4aaUbUVTh7) and a [recruitment page](https://bamboo-cut.jp/activities/gurushaka-staff-recruitment01/). New-tab behavior and hover changes were not tested.

### Social Link, Edge Character, and Footer

**Role:** close the page with a small social route and an understated signature.

An outlined Instagram glyph is centered below the oval links. Its mobile anchor measures about `28 × 29px` and points to [the shop's Instagram account](https://www.instagram.com/guruguru_shakashaka/). The desktop lower capture shows part of the same icon near its bottom edge, although the desktop link inventory does not include that destination.

A black round character with a coiled extension peeks inward from the right wave. It appears at a similar viewport height in two desktop scroll captures and near the lower-right edge in the mobile store capture. Its positioning method and any relationship to scrolling remain unverified.

The mobile footer ends with a centered copyright line on white. It does not introduce a contrasting footer panel or a multi-column navigation block.

## Tokens — Motion & Interaction

| Element or behavior | Evidence | What can be concluded |
| --- | --- | --- |
| Sampled links | Computed transition `0.1s ease-in-out` | A 100ms transition is declared. The changed property and hover result are not established by the screenshots. |
| First PDF-linked graphic | Computed animation `3s infinite bound` | A repeating three-second animation is attached to the anchor. Its trajectory, amplitude, and keyframes were not supplied. |
| Long-page navigation | Multiple scroll positions and document heights | The experience is vertically scrollable. No special scroll control or snap interface is established. |
| Edge gradients | Different visible color regions across captures | The frame varies in appearance; animation cannot be confirmed from these stills alone. |
| Peeking character | Present in lower/right-edge captures | Its illustration and approximate placement are visible; fixed, sticky, and scroll-triggered behavior cannot be distinguished. |
| Reservation, shop, map, recruitment, PDF, profile, and social links | Explicit hrefs in rendered DOM | Destinations exist in the captured page. Their downstream flows were not exercised. |

The capture process waited for loading, sampled layout stability, image decoding, and relevant finite animations within stated time limits. Perpetual animations were paused during readiness checks and resumed afterward. This improves capture reliability but does not reveal animation keyframes or prove that all delayed content appeared.

For an adaptation, motion should remain small and decorative. A modest character movement may suit the imagery, but its path would be a recommendation. Do not describe a scroll-driven reveal, smooth-scroll library, parallax layer, or specific bounce curve as observed behavior.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Page canvas | Solid white | Continuous reading space throughout the visible page. |
| Outer frame | Blue/aqua gradient with irregular inner edges | Establishes identity and encloses the long composition. |
| Main content | White or transparent over white | Keeps typography, illustrations, and photography visually direct. |
| Utility action | White interior, thin dark ellipse | Separates useful links without turning them into heavy banners. |
| Photography | Bright, full-color rectangular images | Connects the illustrated identity to the real shop. |
| Footer | Same white canvas, centered dark details | Quiet close to the page. |

The visible design relies on whitespace, silhouette, image boundaries, and thin outlines. It does not require a general elevation scale, frosted surfaces, or stacked rounded cards.

## Imagery

Three kinds of imagery work together:

1. **Black graphic identity:** vertical lettering, wordmarks, salt grains, coils, small faces, and solid shaker-like figures. Keep irregular contours and sparse facial detail.
2. **Objects on white:** small salt piles and translucent blue cubes, separated by open space and photographed with natural-looking shadows. These support the material subject without becoming a dense product grid.
3. **Store photography:** bright blue counters and shelves, warm timber, white clothing, and many labeled jars. The person reaching toward the display gives a sense of scale and participation.

Photography should remain photographic. Do not apply a monochrome filter merely because the surrounding illustrations are black. Likewise, the graphic characters should retain crisp silhouettes rather than being given realistic shading.

The wave border is continuous decoration, not a photographic background. The Instagram glyph is a simple outline; the mascot artwork is deliberately less geometric.

### Observed Asset References

No image `src` inventory or standalone artwork filenames were supplied. The following references identify visible asset roles without inventing file paths.

| Asset role | Evidence | Reuse guidance |
| --- | --- | --- |
| Producer signature | Desktop and mobile opening captures | Preserve the wordmark/prefix size relationship. |
| Japanese/Roman identity | Opening captures and measured H1 bounds | Preserve the approximately `0.744` width-to-height ratio. |
| Vertical descriptor | Opening captures and measured paragraph bounds | Keep separate from the main identity. |
| Paired shaker characters | Full mobile opening view; partial desktop view | Retain silhouette, asymmetry, grains, and coil. |
| Salt/cube composition | Lower part of the mobile opening capture | Use original aspect ratio; do not infer unseen continuation. |
| Store interior and jar-wall photographs | Mobile store capture and desktop lower capture | Preserve rectangular crops and natural color. |
| Peeking character | Intermediate/lower desktop and mobile store captures | Treat motion and positioning as unresolved. |

The booklet URL is a confirmed document link, not an established image asset path. No linked document or external page was opened for this reference.

## Layout & Responsive Behavior

The site retains a single vertical narrative at both inspected widths. Its opening, explanatory sections, store photographs, and practical links belong to the same continuous white page.

### Desktop

At 1440px, the measured outer shell is 1200px wide with 120px margins. The header alone is 298px high, so the main title begins around 302px from the top. This large opening pause is central to the desktop presentation.

Different chapters use different inner widths. Workshop-related sections are approximately 904px wide; people and store information use approximately 728px. The title itself is only about 348px wide, leaving abundant lateral space even within the shell.

The initial 1000px-high capture contains the signature, identity, vertical descriptor, and only the upper part of the character illustrations. Do not force the complete introduction into one desktop viewport.

### Mobile

At 390px, the outer shell spans the viewport while the waves remain at its edges. The producer signature begins around 25px from the top, and the title around 100px. The character pair is fully visible, followed by the Japanese introduction near 522px and the English group near 638px.

The phone opening therefore fits considerably more of the story into one screen than the desktop capture. This results from component-specific proportions and vertical spacing, rather than a fixed `100vh` hero.

The store column is about 284px wide, leaving approximately 53px on each side. Its two photographs remain stacked. The access details retain a label/value relationship, and the map and recruitment links remain in a two-column row.

### Scaling Is Not Uniform

Several ratios demonstrate different responsive treatments:

- Outer shell: `390 / 1200 = 0.325`.
- Main title width: approximately `0.387` of desktop.
- Store column width: approximately `0.390` of desktop.
- Producer signature width: approximately `0.456` of desktop.
- Reservation anchor height: approximately `0.971` of desktop.

A single transform scaling the desktop page cannot reproduce these observations. Use proportional artwork widths, section-specific maximum widths, and responsive control layouts.

No exact breakpoint declarations were supplied. The Quick Start's `600px` breakpoint is a recommendation, chosen to demonstrate the measured desktop/mobile relationships. Intermediate and landscape viewports remain untested.

## Do’s and Don’ts

### Do

- Keep a white interior with blue waves confined to the page edges.
- Preserve the separate Japanese title columns, Roman line breaks, and right-side vertical descriptor.
- Treat the title as a graphic composition with a stable aspect ratio.
- Maintain the large desktop opening pause and the more compact mobile sequence.
- Keep the black character silhouettes irregular and expressive.
- Use several centered content widths rather than stretching every section equally.
- Preserve the bright blue store photography and its square corners.
- Keep map and recruitment actions equally weighted, outlined, and elliptical.
- Preserve the two-column action row at the observed 390px viewport.
- Separate exact computed values from visual approximations in implementation notes.

### Don't

- Don't identify the brand lettering as Times because its empty wrapper inherits that family.
- Don't replace the identity with an ordinary centered heading and subtitle.
- Don't fill the white content area with the edge gradient.
- Don't add shadows, glossy panels, or a rounded-card system to the observed sections.
- Don't turn the two practical links into competing filled-color CTAs.
- Don't scale the entire desktop composition uniformly for mobile.
- Don't stretch a shop photograph merely to fill the outer 1200px shell.
- Don't reproduce the blank intermediate capture as a mandatory empty viewport.
- Don't invent the contents of the unseen square graphic containers.
- Don't infer bounce keyframes, parallax, hover effects, or fixed positioning from still captures.

## Recommended Implementation Additions

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

- Give graphic headings meaningful accessible text. Avoid exposing both an identical image alternative and duplicate heading text to assistive technology.
- Use live text for address, telephone, hours, stations, prices, and booking information so they can wrap, be selected, and be updated.
- Increase essential mobile text where necessary. The source's apparent small type should not dictate unreadably small contact information.
- Expand the Instagram link to at least a `44 × 44px` target while keeping the visible glyph around its observed size.
- Ensure each whole ellipse is clickable, regardless of how its outline graphic is embedded.
- Provide a visible dark focus outline with adequate separation from the existing ellipse border.
- Mark decorative wave layers and characters as noninteractive and hide them from assistive technology where appropriate.
- Preserve image aspect ratios and reserve layout space before images decode.
- Support reduced motion for repeating illustration animation. The essential content should remain available without animation or scroll-triggered reveals.
- Keep the store photographs descriptive in their alternatives; purely decorative salt fragments can use empty alternatives.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: exact `#ffffff`.
- Main ink: exact computed `#000000`.
- Edge deep blue: approximate `#006da6`.
- Edge aqua: approximate `#65b3b7`.
- Edge pale cyan: approximate `#c7e7ec`.
- Utility actions: white fill and a fine dark outline.
- Large blue regions within content: supplied photography rather than tinted section cards.

### Overall Prompt

“Create a Japanese experiential salt-shop website inspired by the supplied Guruguru Shakashaka captures. Use a white scrolling canvas framed by narrow irregular blue-to-aqua waves. Center a small producer signature above a tall graphic identity with three vertical Japanese columns and three stacked Roman lines. Place a separate vertical descriptor toward the right. Follow with two black hand-drawn shaker characters, a spacious Japanese introduction, smaller English support, and salt imagery on white. Use a 1200px maximum outer shell as an implementation approximation, with narrower section widths. Finish with two stacked rectangular shop photographs, a clean label/value access list, two thin outlined elliptical links, a centered social icon, and a quiet copyright. Preserve component-specific mobile scaling. Use authorized artwork, and do not invent a source font or unverified animation.”

### Example Component Prompts

1. **Wave frame:** “Build two narrow blue gradient strips at the page edges, each with a broad irregular inner wave. Keep the central surface white. Approximate the palette with deep blue `#006da6`, aqua `#65b3b7`, and pale cyan `#c7e7ec`. Use a static SVG mask unless motion is specified separately.”
2. **Identity:** “Arrange the name `ぐるぐるしゃかしゃか` as three vertical Japanese columns, with `guru guru`, `shaka`, and `shaka` stacked below the left side. Keep the whole identity close to a 0.744 width-to-height ratio. Add `塩をまぜるみせ` as a separate narrow vertical graphic to the right.”
3. **Characters and introduction:** “Place an angular black shaker with scattered grains beside a round black figure with a loose coil. Use small white facial details. Leave a substantial pause before a four-line Japanese introduction and a smaller English support block with a delicate SALT emblem.”
4. **Store section:** “Use a centered heading `おみせのこと`, two stacked uncropped landscape shop photographs, and four unruled label/value rows. Keep the mobile column near 284px at a 390px viewport, adapting live text for readability.”
5. **Practical actions:** “Place `Google MAP` and `採用情報` side by side inside white ellipses with one-pixel dark outlines. Aim for a 2.5:1 shape ratio, equal visual weight, centered labels, and no shadow. Add keyboard focus and a full-shape hit area.”

## Quick Start

### CSS Custom Properties

This is a recommended implementation scaffold, not recovered source CSS. It reproduces the observed hierarchy, approximate widths, wave framing, photography treatment, and oval actions. The gradient colors are estimates. The `600px` breakpoint and static mask are adaptation choices.

Use intrinsic-ratio image or SVG artwork inside the producer, title, tagline, and character wrappers. No artwork files are bundled or implied by these class names. The introduction and store details can use live text; the scaffold deliberately gives supporting text more readable minimum sizes, so its line breaks may differ from the captures.

```css
:root {
  /* Exact observed base colors */
  --color-paper: #ffffff;
  --color-ink: #000000;

  /* Estimated gradient colors */
  --color-blue: #006da6;
  --color-aqua: #65b3b7;
  --color-pale: #c7e7ec;

  /* Recommended live-text stack, not a source font identification */
  --font-ui: sans-serif;
  --weight-regular: 400;
  --weight-strong: 600;

  /* Desktop proportions inferred from measured bounds */
  --shell-width: min(100vw, 1200px);
  --wide-column: 75.32%;
  --store-column: 60.6875%;
  --wave-width: clamp(20px, 5.84vw, 84px);
  --wave-period: clamp(320px, 55vw, 800px);
  --rule-width: 1px;
  --radius-oval: 50%;

  /* Observed transition timing; the property below is an adaptation */
  --motion-link: 100ms ease-in-out;

  /* Recommended repeating wave mask */
  --wave-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 600%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22black%22 d=%22M0 0H78C98 50 45 90 66 145S95 220 65 280S48 340 75 400S96 475 65 535S64 590 78 600H0Z%22/%3E%3C/svg%3E');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-ui);
}

.guru-site {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  min-height: 100vh;
  background: var(--color-paper);
}

.guru-site::before,
.guru-site::after {
  content: '';
  position: absolute;
  inset-block: 0;
  z-index: 0;
  width: var(--wave-width);
  pointer-events: none;
  -webkit-mask-image: var(--wave-mask);
  mask-image: var(--wave-mask);
  -webkit-mask-size: 100% var(--wave-period);
  mask-size: 100% var(--wave-period);
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}

.guru-site::before {
  left: 0;
  background: linear-gradient(
    180deg,
    var(--color-pale),
    var(--color-aqua) 18%,
    var(--color-blue) 40%,
    var(--color-aqua) 72%,
    var(--color-pale)
  );
}

.guru-site::after {
  right: 0;
  transform: scaleX(-1);
  background: linear-gradient(
    180deg,
    var(--color-blue),
    var(--color-aqua) 24%,
    var(--color-pale) 52%,
    var(--color-aqua) 78%,
    var(--color-blue)
  );
}

.guru-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1200px);
  margin-inline: auto;
}

.producer {
  position: relative;
  height: calc(var(--shell-width) * 0.248333);
}

.producer__mark {
  position: absolute;
  top: min(4.71vw, 56.52px);
  left: 50%;
  width: 22.496%;
  margin: 0;
  transform: translateX(-50%);
}

.brand-opening {
  position: relative;
  padding-top: 4px;
}

.brand-title {
  width: 28.974%;
  margin: 0 0 0 35.962%;
}

.brand-tagline {
  position: absolute;
  top: 6.55px;
  right: 16.31%;
  width: 3.318%;
  margin: 0;
}

.character-pair {
  width: 27%;
  margin: 90px auto 0;
}

:where(
  .producer__mark,
  .brand-title,
  .brand-tagline,
  .character-pair,
  .intro-art,
  .store__heading
) > :is(img, svg) {
  display: block;
  width: 100%;
  height: auto;
}

.intro {
  width: 49.4%;
  margin: 220px 0 0 26.53%;
}

.intro__copy {
  margin: 0;
  font-size: clamp(16px, 2.8vw, 40px);
  font-weight: var(--weight-strong);
  line-height: 1.65;
}

.intro__english {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18%;
  align-items: start;
  gap: 8%;
  margin-top: clamp(24px, 4vw, 58px);
}

.intro__english h2 {
  margin: 0 0 0.6em;
  font-size: clamp(13px, 2vw, 28px);
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

.intro__english p {
  margin: 0;
  font-size: clamp(12px, 1.2vw, 17px);
  line-height: 1.4;
}

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

.wide-section {
  width: var(--wide-column);
  margin-inline: auto;
}

.store {
  width: var(--store-column);
  margin-inline: auto;
}

.store__heading {
  width: 54.34%;
  margin: 0 auto clamp(48px, 8vw, 115px);
}

.store__photos {
  display: grid;
  gap: clamp(20px, 3.5vw, 50px);
}

.store__photos img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

.store__facts {
  display: grid;
  grid-template-columns: 5.7em minmax(0, 1fr);
  row-gap: 0.4em;
  margin: clamp(32px, 5.7vw, 82px) 0 0;
  font-size: clamp(12px, 1.53vw, 22px);
  line-height: 1.4;
}

.store__facts dt,
.store__facts dd {
  margin: 0;
  font-weight: var(--weight-regular);
}

.store__facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.visit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11%;
  margin-top: clamp(40px, 6.7vw, 96px);
}

.oval-link {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 2.5;
  padding: 0.5em;
  border: var(--rule-width) solid currentColor;
  border-radius: var(--radius-oval);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: clamp(12px, 1.95vw, 28px);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.social-link {
  display: grid;
  place-items: center;
  width: max(44px, 9.75%);
  min-height: 44px;
  margin: clamp(64px, 8.5vw, 122px) auto 0;
  color: var(--color-ink);
}

.social-link svg,
.social-link img {
  display: block;
  width: clamp(28px, 4.9vw, 70px);
  height: auto;
}

.copyright {
  margin: 48px 0 0;
  padding: 0 24px 60px;
  font-size: 16px;
  font-weight: var(--weight-regular);
  line-height: 1.15;
  text-align: center;
}

/* Recommended focus treatment */
.guru-site a:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 5px;
}

/* Recommended feedback; the original hover effect was not verified */
@media (hover: hover) {
  .oval-link:hover {
    opacity: 0.7;
  }
}

/* Recommended breakpoint, based on the two inspected sizes */
@media (max-width: 600px) {
  :root {
    --store-column: 72.8245%;
  }

  .producer__mark {
    top: 6.458vw;
    width: 31.582%;
  }

  .brand-opening {
    padding-top: 3.27px;
  }

  .brand-title {
    width: 34.539%;
    margin-inline: auto;
  }

  .brand-tagline {
    top: 4.23px;
    right: 11.04%;
    width: 3.71%;
  }

  .character-pair {
    width: 34%;
    margin-top: 29px;
  }

  .intro {
    width: 59.283%;
    margin: 94px 0 0 19.756%;
  }

  .copyright {
    font-size: 14px;
    padding-bottom: 31.2px;
  }
}

/* Apply this class to any decorative animation added later */
@media (prefers-reduced-motion: reduce) {
  .animated-decoration {
    animation: none !important;
    transform: none !important;
  }

  .oval-link {
    transition: none;
  }
}
```

The wave frame above follows document height. That is a deliberate scaffold choice; it does not establish the original frame's positioning model. The CSS also leaves the unverified middle chapters and the source `bound` animation undefined rather than inventing their contents or keyframes.

### Tailwind v4 Token Mapping

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

```css
@theme inline {
  --color-guru-paper: var(--color-paper);
  --color-guru-ink: var(--color-ink);
  --color-guru-blue: var(--color-blue);
  --color-guru-aqua: var(--color-aqua);
  --color-guru-pale: var(--color-pale);

  --font-guru-ui: var(--font-ui);
  --radius-guru-oval: 50%;
  --spacing-guru-shell: 1200px;
  --spacing-guru-target: 44px;
}
```

Use custom CSS for the wave masks and the composition-specific percentages. Those relationships carry more of this site's identity than a large generic utility-token inventory.

## Sources & Evidence

- **Original page:** [https://guruguru-shakashaka.jp/](https://guruguru-shakashaka.jp/).
- **Final page:** [https://guruguru-shakashaka.jp/](https://guruguru-shakashaka.jp/). The supplied browser record reports HTTP `200` and no URL change.
- **Capture record:** September 16, 2026, `20:37:19.503 UTC`, equivalent to September 17, 2026, `05:37:19.503 JST`.
- **Desktop evidence:** three original-page captures at `1440 × 1000`, covering the opening, a largely blank intermediate state with edge decoration, and lower store content; rendered DOM/computed-style snapshot with a document height of approximately `10195.47px`.
- **Mobile evidence:** two original-page captures at `390 × 844`, covering the opening/introduction and the store/footer; rendered DOM/computed-style snapshot with a document height of approximately `4287.16px`.
- **Computed evidence:** element rectangles, basic colors, inherited typography, footer typography, link destinations, sampled transition values, and the three-second repeating animation declaration on one PDF-linked graphic.
- **Inspection limits:** no source image inventory, animation keyframes, hover/focus capture, clicked destination flow, intermediate viewport test, or complete visual record of the middle sections was supplied. SharedWorkers and service workers were disabled during the browser inspection. Some graphic wrappers have incomplete or nonrepresentative heights relative to their painted artwork.

This reference describes the current supplied original-page evidence. Measured values, visual estimates, and recommended implementation choices are kept separate throughout.