---
version: alpha
name: Naomi Yakiniku Dark Counter
description: Owner-led cinematic yakiniku LP where charcoal, smoke, and Naomi's presence create the reason to reserve.
colors:
  primary: "#0C0B0A"
  secondary: "#5F5650"
  tertiary: "#D83A24"
  neutral: "#EFE6D9"
  surfaceDark: "#18120F"
  surfaceInk: "#050504"
  surfacePaper: "#F7EFE2"
  smoke: "#FFF6E7"
  ember: "#FF6F16"
  brass: "#C98B3A"
  oasisWhite: "#FBFBF9"
  oasisSoft: "#F4F4F1"
  oasisCard: "#F7F7F5"
  onDark: "#FFF6E7"
  onLight: "#19130F"
  onAccent: "#FFFFFF"
typography:
  displayHero:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 4.5rem
    fontWeight: 320
    lineHeight: 1.16
    letterSpacing: "-0.045em"
  displaySection:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 4rem
    fontWeight: 320
    lineHeight: 1.16
    letterSpacing: "-0.04em"
  bodyLg:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 1.125rem
    fontWeight: 500
    lineHeight: 2
  labelCaps:
    fontFamily: "Noto Sans JP, Hiragino Sans, Yu Gothic, YuGothic, Meiryo, sans-serif"
    fontSize: 0.75rem
    fontWeight: 900
    lineHeight: 1.4
    letterSpacing: "0.18em"
rounded:
  none: 0px
  sm: 2px
  lg: 28px
  pill: 9999px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  sectionPc: 112px
  sectionMobile: 72px
components:
  buttonPrimary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.onAccent}"
    rounded: "{rounded.pill}"
    padding: 14px
  buttonSecondary:
    backgroundColor: "{colors.surfaceDark}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.pill}"
    padding: 14px
  cardDark:
    backgroundColor: "{colors.surfaceDark}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.none}"
    padding: 32px
  oasisCard:
    backgroundColor: "{colors.oasisCard}"
    textColor: "{colors.onLight}"
    rounded: "{rounded.lg}"
    padding: 32px
  reservationBand:
    backgroundColor: "{colors.oasisWhite}"
    textColor: "{colors.onLight}"
    rounded: "{rounded.none}"
    padding: 48px
  quickFacts:
    backgroundColor: "{colors.surfaceDark}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.none}"
    padding: 16px
  proofCard:
    backgroundColor: "{colors.surfaceDark}"
    textColor: "{colors.onDark}"
    rounded: "{rounded.lg}"
    padding: 32px
---

## Overview

This is the handoff design spec for `lps/naomi-yakiniku.html`.

Naomi Yakiniku is not a generic luxury yakiniku page. It is a Dark Counter restaurant LP where the reason to reserve is the owner: Naomi remembers the guest, handles the first slice, and controls the pace of the night. In Japanese, the core idea is **「店主に会いに行く焼肉店」**. The page should make a visitor feel, “I want to sit at this counter,” not only “the meat looks expensive.”

## Colors

- **Primary / Surface Ink:** Use charcoal and near-black for the cinematic counter mood, full-bleed photography, footer, and smoke/sizzle sections.
- **Neutral / Surface Paper:** Use warm paper for reading sections where the visitor needs to understand the concept, reservation flow, or Before/After copy.
- **Tertiary / Ember / Brass:** Use as heat signals: CTA, small labels, progress, price, grill glow. Avoid flooding the page with red or orange.
- **Oasis White / Oasis Soft / Oasis Card:** Borrow sparse product-site calm for explanatory sections. The page can breathe, but it must still feel like yakiniku, not a device site.

## Typography

- Japanese headlines use a restrained sans stack with light-but-not-fragile weight around 320.
- Desktop hero copy should sit around 56–72px; do not scale Japanese like oversized English product headlines.
- Body copy should be 16–18px with generous 1.9–2.05 line-height.
- Labels stay small, uppercase, bold, and letter-spaced. They should feel like metadata on a film still.

## Layout

Use a dark cinematic hero, sparse navigation, one obvious reservation CTA, and alternating dark/photo/paper sections. The page rhythm should feel like entering a counter seat: dark first impression, sensory photo bands, then practical reservation confidence.

Conversion-critical content should include: reservation CTA, what makes Naomi the reason to visit, reservation flow, price/menu confidence, and Before/After copy explaining why the final message is stronger than generic “premium beef.”

The current conversion improvement layer adds visible quick facts and a proof section before the visitor reaches the form: price range, station/access, hours, seats, first-visit guidance, and a voice that reinforces “I came to meet Naomi.” These facts are not decorative; they answer the hesitation between interest and reservation.

## Elevation & Depth

Depth comes from low light photography, smoke, subtle glow, and wide shadows. Avoid generic card-grid shadows. If a card appears, it should feel like a quiet menu card or editorial note, not SaaS UI.

## Shapes

- Hero and photo sections can be sharp and cinematic.
- Oasis-inspired explanatory cards can use 22–28px radius.
- CTAs use pill radius for clear affordance.

## Components

- `buttonPrimary`: reservation/action CTA. Use sparingly; one main CTA per viewport is enough.
- `buttonSecondary`: softer supporting action such as Before/After or concept link.
- `cardDark`: story/review cards on dark surfaces.
- `oasisCard`: process or reservation-support cards on light surfaces.
- `reservationBand`: practical conversion area; must answer “can I book?” not only look premium.
- `quickFacts`: four immediate reservation facts near the hero CTA: price, access, hours/seats, first-visit reassurance.
- `proofCard`: trust and hesitation-removal cards for price, access, first visit, and customer voice.

## Do's and Don'ts

- **Do** make Naomi the reason to visit.
- **Do** use smoke, grill light, and counter intimacy.
- **Do** make reservation information practical: date, people, contact path, and confidence cues.
- **Do** show price/access/hours before the form so a cold visitor can decide quickly.
- **Do** keep Japanese copy readable on mobile with no forced horizontal overflow.
- **Don't** lead with generic claims like “厳選和牛” unless it is intentionally shown as weak Before copy.
- **Don't** use cute icons, rainbow gradients, or AI-SaaS cards.
- **Don't** overdo fire. Real yakiniku sizzle is small flame, fat, smoke, and heat shimmer.