Design System

Container — Horizontal width

Choose max-width in 3 steps + full via the size prop. Left/right gutter is always --vds-container-gutter (20px).

• size="wide"≒ 1180px — 本文＋写真の主要幅（既定）
• size="read"≒ 800px — 長文の読み幅
• size="measure"≒ 480px — キャプション・注記の最小可読幅
• size="full"FullBleed内で自前に幅制御するとき

Section — Vertical rhythm

Control chapter rhythm and surface with spacing and surface props. Use spacing="asym" for chapter blocks.

• 章ブロック標準（azumi推奨）

  spacing="asym" surface="subtle"

• 引用・補足など凹面

  spacing="compact" surface="inset"

• CTA帯・フッタ直前の締め

  spacing="default" surface="dark"

Grid — Column layout

Select grid config with cols prop. editorial is the azumi editorial grid (1.2fr:1fr, expands at 769px).

• cols="2"

  均等2列（sm で展開）

  1

  2
• cols="3"

  均等3列（sm→lg で展開）

  1

  2

  3
• cols="editorial"

  1.2fr:1fr 非対称（769px 展開・iPad mini 対策）

  1

  2
• cols="5fr-7fr"

  5:7 非対称（lg で展開）

  1

  2

CanBusTimetableModal

CAN BUS timetable modal on the Access page. Supports route tab switching, ESC to close, and scroll lock.

PartyPickerDisclosure

Collapsible party-size picker intended for vacancy-calendar-aware contexts (active when NEXT_PUBLIC_AVAILABILITY_CALENDAR_ENABLED=true). Currently inactive — removed from /rooms and /rooms/[slug] until the vacancy calendar is implemented.

Hero — Page Hero

Choose height with variant. page adds parallax; compact is a thin banner. Composed of photo + serif h1 only.

• KITAMAE BASE

  variant="default"標準ヒーロー（≒692px）。トップや大判ページ向け。
• KITAMAE BASE

  variant="page"下層ページ標準（≒346px）。scroll parallax 付き。
• KITAMAE BASE

  variant="compact"細帯（≒187px）。FAQ やサブページ向け。

SectionHeader — Chapter Heading

Three-tier: eyebrow → h2 → body. Unified with vds-eyebrow / vds-heading-2 / vds-body tokens.

SectionHeaderWithAction — Heading + Trailing CTA

Left: eyebrow → serif display heading (section scale) → body. Right: a primary CTA. On lg, ends-aligned at the baseline. Type: vds-eyebrow (sea) / vds-heading-display × --vds-fs-section-heading / vds-body. Use for "heading + trailing booking CTA" (e.g. plans by purpose).

EditorialSpread — Editorial Spread

feature = CTA chapter (home) / editorial = no-CTA flow (cuisine/story). Use photoSide/reverse to control composition.

• ROOMS

  Sea-view Rooms

  Rooms overlooking the Sea of Japan. Experience the tranquility of Kaga Hashitate.

  photo
  variant="feature" photoSide="right"Home editorial spread. Photo right, text left. Includes CTA link.
• photo

  ROOMS

  Sea-view Rooms

  Rooms overlooking the Sea of Japan. Experience the tranquility of Kaga Hashitate.

  variant="feature" photoSide="left"Photo left, text right. Alternate to create visual rhythm.

• ROOMS

  Sea-view Rooms

  Rooms overlooking the Sea of Japan. Experience the tranquility of Kaga Hashitate.

  photo
  variant="editorial" reverse={false}No-CTA editorial flow. Used in cuisine/story chapter blocks.

AtmosphericSection — Atmospheric Background Chapter

Chapter block with photo backdrop + SVG motion. surface="dark" → navy band; "paper"/"washi" → light face. FinalCTA wraps this.

• Make a Reservation

  surface="dark" motion="sea"FinalCTA / booking band. Navy + white text + SVG motion.

• Chapter content

  surface="paper" motion="sea"Light chapters like access info. With bottom border.

• Chapter content

  surface="washi" motion="none"No motion. Pass photo prop for a faint background image.

GuestVoicesSection — Guest Reviews

A social-proof chapter laid on AtmosphericSection (washi): rating chips + a review CardCarousel. Ratings are functional information, so the heading uses the system (sans) register. Data from content/socialProof.ts. R031: summaries of real posts only, with counts and verified date — no scarcity pressure or inflation.