Yūnagi

# Yūnagi

## Philosophy

Yūnagi, the evening calm: the still hour when the wind drops. An atmospheric interface language where painted gouache skies carry the depth and the only crisp parts are the controls you need. Type rests in a calm patch painted into the picture, depth is five flat tonal bands rather than glass panes, and one apricot late-sun note marks the single live cue. Revised in place from the earlier frosted-pane version into something quieter, flatter and sharper.

### Values

- atmosphere before ornament
- depth through flat painted tonal bands
- type rests in clear air, never behind a veil
- small precise controls under a large calm sky
- one warm cue, one live thing at a time

### Anti-Values

- frosted glass and backdrop blur
- veils, scrims and gradient washes behind text
- card grids and stat rows
- drop shadows and hairline frames
- neon or hard-edged techno gloss

### Visual Character

- full-strength painted valley and lake skies with a calm, evenly toned patch for the type
- five flat tonal layers from deep zenith blue to a single apricot late-sun band
- feathered gouache edges, never outlines
- crisp rounded controls that are the sharpest thing in view
- no borders, no shadows, no gradients

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#E9F1F6` |
| surface | `#F8FAFC` |
| text | `#1B2C3F` |
| muted | `#4F6377` |
| border | `#CBDBE8` |
| accent | `#3E66A8` |
| accent_2 | `#9CC3DA` |
| accent_warm | `#F2B873` |
| on_accent | `#FBFDFF` |
| zenith | `#3A5F96` |
| haze | `#DCEAF2` |
| mist | `#EFF6FA` |
| success | `#2E7D6B` |
| warning | `#8F6410` |
| error | `#B0455A` |
| info | `#2F6F9F` |

### Typography

- **Base Size**: 17px
- **Body Font**: M PLUS Rounded 1c
- **Heading Font**: Kaisei HarunoUmi
- **Heading Weight**: 700
- **Body Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.7
- **Scale**: ["14.5px","17px","19px","22px","28px","36px","54px","67px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap

### Radii

- **None**: 0
- **Sm**: 16px
- **Md**: 24px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **None**: no shadows anywhere; panes and layers separate by tone and distance

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Treatment**: flat-painted-bands
- **Card Style**: no cards: flat tonal bands stacked like sky layers, the page's words sit on the calm patch of a painted picture
- **Bg Pattern**: none; the painting is the pattern

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, dew-lines or seams. Layers meet edge to edge and differ by tone; the border token is kept only for tracks and disabled marks.

### Motion

- **Duration**: 480ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: slow fades of about a second, nothing bouncing; the settled state is the no-JS default and prefers-reduced-motion arrives settled

## Rules

### Composition

Open on one full-strength painted sky and set all type in its calm, evenly toned patch. Below it, build depth from flat tonal bands (zenith, mid sky, haze, mist, late sun) rather than panes or cards, then close on a second painted view with the same type logic.

### Hierarchy

Hierarchy comes from tonal value and the painted distance: one big mincho headline per view, quiet body in M PLUS Rounded, controls as the sharpest small things. The apricot late sun is the one live cue and appears once per view.

### Density

Low density. Few, well-grouped controls, generous air above titles, one button shape. A dense table gets its own quiet view instead of crowding the sky.

### Type On Picture

All type on a picture sits in a calm, evenly toned patch painted into the picture itself. No veil, scrim, gradient, panel or blur behind text; contrast is measured on the pixels under the words.

### Signature

The sky in five flat bands: zenith #3A5F96, mid sky #9CC3DA, haze #DCEAF2, mist #EFF6FA and one late-sun apricot #F2B873, with hand-painted gouache views whose calm patch holds the headline.

## Layout

### Grid

- **Type**: full-bleed painted hero, then a contained column
- **Max Width**: 1280px content, centred above 1440px; only painted views run edge to edge
- **Gutter**: 72px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,7fr) and stack under 1200px; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 56px phone
- **Approach**: Air is the separator. Big steps (64, 96px) sit above titles; layers meet with no line between them.
- **Content Padding**: type sits in the calm patch with 72px side padding on desktop

### Density

low

### Responsive

Painted views swap to a tall crop under 700px so the calm patch stays behind the words. Two-column bands stack under 1200px, the spec list drops to one column under 700px, and body text never falls below 17px.

### Breakpoints

- **Mobile**: 0-699px
- **Tablet**: 700-1199px
- **Desktop**: 1200px+
- **Wide**: 1440px+ content caps and centres

## Guidance

### Do

- Paint the calm patch into the picture so type has an evenly toned place to sit
- Build depth from five flat tonal bands, not panes, glass or shadows
- Keep the apricot late sun for the one live cue per view
- Keep controls few, small and crisp: one filled button, the rest quiet
- Use radius 16 on controls, 24 on panes and bands, full round on dots and chips
- Write in the still voice: short, exhaled sentences

### Don't

- No veil, scrim, gradient or blur behind text
- No glass cards, backdrop blur, drop shadows or hairlines
- No equal three-card rows, stat rows, eyebrow micro-labels or tracked caps
- No highlight word in the headline
- No neon saturation or a second warm accent
- No decorative texture over reading text

### Accessibility

Body 17px and up; table rows 14.5px and up. Text on the sky measured on the painted pixels at 4.5 to 1 or better. The accent #3E66A8 carries on-accent text at 5.6 to 1. Semantic colours are deep tints used with a word or icon. Visible 3px focus ring in the accent. Motion respects prefers-reduced-motion and the no-JS settled state.

## Imagery Direction

### Pairs With

gouache-drift-atmospheric-painting

### Summary

Full-strength hand-painted gouache views of dusk: blue valley ridges, a still lake under a periwinkle sky, one low apricot glow. Each picture keeps a calm, evenly toned patch of sky, graded into the painting itself, where the words sit.

### Subjects

- dawn valley
- misty horizon
- painted clouds
- foliage silhouette at the lower edge
- calm sky over distant terraces

### Usage

Hero and closing band are full-bleed painted views with var(--hero-image) and a tall crop under 700px. Never lay a veil, gradient or panel over the picture; the calm patch is painted in. Inside the page, layers are flat colour.

### Art Style Id

en-019ef72a-f406-74f0-aff1-61057451f039

### Avoid

A darkened overlay or faded image behind text, a busy sky under copy, literal characters, outlines, neon colour, a second warm light.

---
version: "alpha"
name: "Yūnagi"
description: "Yūnagi, the evening calm: the still hour when the wind drops. An atmospheric interface language where painted gouache skies carry the depth and the only crisp parts are the controls you need. Type rests in a calm patch painted into the p..."
colors:
  bg: "#E9F1F6"
  surface: "#F8FAFC"
  text: "#1B2C3F"
  muted: "#4F6377"
  border: "#CBDBE8"
  accent: "#3E66A8"
  accent_2: "#9CC3DA"
  accent_warm: "#F2B873"
  on_accent: "#FBFDFF"
  zenith: "#3A5F96"
  haze: "#DCEAF2"
  mist: "#EFF6FA"
  success: "#2E7D6B"
  warning: "#8F6410"
  error: "#B0455A"
  info: "#2F6F9F"
typography:
  headline-lg:
    fontFamily: "Kaisei HarunoUmi"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Kaisei HarunoUmi"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "M PLUS Rounded 1c"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "M PLUS Rounded 1c"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_warm:
    backgroundColor: "{colors.accent_warm}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-zenith:
    backgroundColor: "{colors.zenith}"
  color-reference-haze:
    backgroundColor: "{colors.haze}"
  color-reference-mist:
    backgroundColor: "{colors.mist}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Yūnagi

## Overview

Yūnagi, the evening calm: the still hour when the wind drops. An atmospheric interface language where painted gouache skies carry the depth and the only crisp parts are the controls you need. Type rests in a calm patch painted into the picture, depth is five flat tonal bands rather than glass panes, and one apricot late-sun note marks the single live cue. Revised in place from the earlier frosted-pane version into something quieter, flatter and sharper.

### Values

- atmosphere before ornament
- depth through flat painted tonal bands
- type rests in clear air, never behind a veil
- small precise controls under a large calm sky
- one warm cue, one live thing at a time

### Anti-Values

- frosted glass and backdrop blur
- veils, scrims and gradient washes behind text
- card grids and stat rows
- drop shadows and hairline frames
- neon or hard-edged techno gloss

### Visual Character

- full-strength painted valley and lake skies with a calm, evenly toned patch for the type
- five flat tonal layers from deep zenith blue to a single apricot late-sun band
- feathered gouache edges, never outlines
- crisp rounded controls that are the sharpest thing in view
- no borders, no shadows, no gradients

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#E9F1F6` |
| surface | `#F8FAFC` |
| text | `#1B2C3F` |
| muted | `#4F6377` |
| border | `#CBDBE8` |
| accent | `#3E66A8` |
| accent_2 | `#9CC3DA` |
| accent_warm | `#F2B873` |
| on_accent | `#FBFDFF` |
| zenith | `#3A5F96` |
| haze | `#DCEAF2` |
| mist | `#EFF6FA` |
| success | `#2E7D6B` |
| warning | `#8F6410` |
| error | `#B0455A` |
| info | `#2F6F9F` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap

- **Headline-Lg**: Kaisei HarunoUmi, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Kaisei HarunoUmi, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: M PLUS Rounded 1c, 17px, weight 400, line-height 1.5.
- **Label-Md**: M PLUS Rounded 1c, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Grid

- **Type**: full-bleed painted hero, then a contained column
- **Max Width**: 1280px content, centred above 1440px; only painted views run edge to edge
- **Gutter**: 72px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,7fr) and stack under 1200px; every grid child has min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 56px phone
- **Approach**: Air is the separator. Big steps (64, 96px) sit above titles; layers meet with no line between them.
- **Content Padding**: type sits in the calm patch with 72px side padding on desktop

### Density

low

### Responsive

Painted views swap to a tall crop under 700px so the calm patch stays behind the words. Two-column bands stack under 1200px, the spec list drops to one column under 700px, and body text never falls below 17px.

### Breakpoints

- **Mobile**: 0-699px
- **Tablet**: 700-1199px
- **Desktop**: 1200px+
- **Wide**: 1440px+ content caps and centres

## Elevation & Depth

### Shadows

- **None**: no shadows anywhere; panes and layers separate by tone and distance

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: flat-painted-bands
- **Card Style**: no cards: flat tonal bands stacked like sky layers, the page's words sit on the calm patch of a painted picture
- **Bg Pattern**: none; the painting is the pattern

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, dew-lines or seams. Layers meet edge to edge and differ by tone; the border token is kept only for tracks and disabled marks.

## Components

### Composition

Open on one full-strength painted sky and set all type in its calm, evenly toned patch. Below it, build depth from flat tonal bands (zenith, mid sky, haze, mist, late sun) rather than panes or cards, then close on a second painted view with the same type logic.

### Hierarchy

Hierarchy comes from tonal value and the painted distance: one big mincho headline per view, quiet body in M PLUS Rounded, controls as the sharpest small things. The apricot late sun is the one live cue and appears once per view.

### Density

Low density. Few, well-grouped controls, generous air above titles, one button shape. A dense table gets its own quiet view instead of crowding the sky.

### Type On Picture

All type on a picture sits in a calm, evenly toned patch painted into the picture itself. No veil, scrim, gradient, panel or blur behind text; contrast is measured on the pixels under the words.

### Signature

The sky in five flat bands: zenith #3A5F96, mid sky #9CC3DA, haze #DCEAF2, mist #EFF6FA and one late-sun apricot #F2B873, with hand-painted gouache views whose calm patch holds the headline.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a11417-c8f4-7381-acaf-048f9f96c09c/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11417-c8f4-7381-acaf-048f9f96c09c/shadcn.json` (registry theme), `/language/en-01a11417-c8f4-7381-acaf-048f9f96c09c/shadcn-components.md` (component recipes) and `/language/en-01a11417-c8f4-7381-acaf-048f9f96c09c/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Paint the calm patch into the picture so type has an evenly toned place to sit
- Do Build depth from five flat tonal bands, not panes, glass or shadows
- Do Keep the apricot late sun for the one live cue per view
- Do Keep controls few, small and crisp: one filled button, the rest quiet
- Do Use radius 16 on controls, 24 on panes and bands, full round on dots and chips
- Do Write in the still voice: short, exhaled sentences
- Don't No veil, scrim, gradient or blur behind text
- Don't No glass cards, backdrop blur, drop shadows or hairlines
- Don't No equal three-card rows, stat rows, eyebrow micro-labels or tracked caps
- Don't No highlight word in the headline
- Don't No neon saturation or a second warm accent
- Don't No decorative texture over reading text

### Accessibility

Body 17px and up; table rows 14.5px and up. Text on the sky measured on the painted pixels at 4.5 to 1 or better. The accent #3E66A8 carries on-accent text at 5.6 to 1. Semantic colours are deep tints used with a word or icon. Visible 3px focus ring in the accent. Motion respects prefers-reduced-motion and the no-JS settled state.

## Imagery Direction

### Pairs With

gouache-drift-atmospheric-painting

### Summary

Full-strength hand-painted gouache views of dusk: blue valley ridges, a still lake under a periwinkle sky, one low apricot glow. Each picture keeps a calm, evenly toned patch of sky, graded into the painting itself, where the words sit.

### Subjects

- dawn valley
- misty horizon
- painted clouds
- foliage silhouette at the lower edge
- calm sky over distant terraces

### Usage

Hero and closing band are full-bleed painted views with var(--hero-image) and a tall crop under 700px. Never lay a veil, gradient or panel over the picture; the calm patch is painted in. Inside the page, layers are flat colour.

### Art Style Id

en-019ef72a-f406-74f0-aff1-61057451f039

### Avoid

A darkened overlay or faded image behind text, a busy sky under copy, literal characters, outlines, neon colour, a second warm light.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "yunagi-evening-calm",
  "type": "registry:theme",
  "title": "Yūnagi shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E9F1F6",
      "foreground": "#1B2C3F",
      "card": "#F8FAFC",
      "card-foreground": "#1B2C3F",
      "popover": "#F8FAFC",
      "popover-foreground": "#1B2C3F",
      "primary": "#1B2C3F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#4F6377",
      "muted-foreground": "#1B2C3F",
      "accent": "#3E66A8",
      "accent-foreground": "#ffffff",
      "destructive": "#B0455A",
      "border": "#CBDBE8",
      "input": "#CBDBE8",
      "ring": "#3E66A8",
      "chart-1": "#1B2C3F",
      "chart-2": "#f4f4f5",
      "chart-3": "#3E66A8",
      "chart-4": "#2E7D6B",
      "chart-5": "#8F6410",
      "sidebar": "#F8FAFC",
      "sidebar-foreground": "#1B2C3F",
      "sidebar-primary": "#1B2C3F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F6F9F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CBDBE8",
      "sidebar-ring": "#3E66A8",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1B2C3F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3E66A8",
      "accent-foreground": "#ffffff",
      "destructive": "#B0455A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3E66A8",
      "chart-1": "#1B2C3F",
      "chart-2": "#f4f4f5",
      "chart-3": "#3E66A8",
      "chart-4": "#2E7D6B",
      "chart-5": "#8F6410",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1B2C3F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3E66A8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3E66A8",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11417-c8f4-7381-acaf-048f9f96c09c",
    "slug": "yunagi-evening-calm",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_warm",
        "bg",
        "border",
        "error",
        "haze",
        "info",
        "mist",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning",
        "zenith"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```