Windward

# Windward

## Philosophy

A precise editorial data-almanac system — an instrument panel for the wind and the season — that treats Children's Day as a measured natural event: wind speed, streamer count, the bloom of riverbank green, daylight hours. The ownable idea is the wind-rose: a small graduated radial dial (anemometer/compass) that recurs as the system's reading device, turning the festival into a beautifully charted civic almanac. Grown-up, infographic-led, dense-but-calm, in an engineering-archive register but bright and airy. Accents are highlighters that only ever colour a needle, an arc, a chip, or one knockout button.

### Values

- Read the festival as an instrument — every station reports measured readings
- The wind-rose dial is the recurring reading unit across every component
- Dense-but-calm: tight instrument-row clusters alternating with frosted silence
- Bright and airy frosted-white ground, never muddy, never a colour flood
- Accents as highlighters — a needle, an arc, a chip, one knockout

### Anti-Values

- Full-bleed accent floods or pastel background washes
- Borders or single accent edges on cards
- Childish, toy-like, or cluttered treatments
- Heavy table rules or KPI-grid SaaS chrome
- Navigation trapped in a floating pill bar

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#f6f9fa` |
| surface | `#ffffff` |
| surface-2 | `#edf2f3` |
| text | `#0f161a` |
| muted | `#5a6b72` |
| border | `#d3dee1` |
| hairline | `#c2d0d4` |
| accent | `#0e9be0` |
| on-accent | `#ffffff` |
| accent-2 | `#3fcb76` |
| on-accent-2 | `#06251a` |
| accent-3 | `#f5a623` |
| on-accent-3 | `#2a1b00` |
| success | `#3fcb76` |
| warning | `#f5a623` |
| error | `#d6453b` |
| info | `#0e9be0` |

### Typography

- **Base Size**: 17px
- **Body Font**: Fraunces
- **Heading Font**: Space Grotesk
- **Mono Font**: Spline Sans Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.03em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Space+Grotesk:wght@500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

- **Base**: 0px
- **Card**: 16px
- **Lg**: 24px
- **Pill**: 9999px
- **Scale**: [0,16,24,9999]

### Shadows

- **Sm**: 0 1px 0 rgba(15,22,26,.05)
- **Md**: 0 16px 42px rgba(14,155,224,.06)

### Spacing

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

### Surfaces

- **Ground**: #f6f9fa
- **Panel**: #ffffff
- **Recessed**: #edf2f3
- **Instrument-Arc**: hairline graduated arc tick-scale down one card edge

### Borders

- **None**: 0
- **Hairline**: 1px solid #c2d0d4
- **Row-Divider**: inset 0 1px 0 #c2d0d4

### Motion

- **Reveal**: settled by default; inline script gates a translateY+fade reveal behind .pe and turns the wind-rose needle to its bearing on load; respects prefers-reduced-motion
- **Duration**: 0.6s–0.85s cubic-bezier(.2,0,.1,1)

## Rules

### Composition

Dense 12-column almanac grid, 1320px cap, 24px gutters; tight instrument-row clusters alternate with 64–96px of frosted silence; asymmetric stage-plus-index layouts (a large reading stage beside narrower index/legend columns).

### Hierarchy

Built from type size, position, and the wind-rose dial — not colour. The sky needle and active arc mark the live reading; leaf is the live-reading secondary and success; amber is a single hero pop and warning.

### Density

Dense-but-calm; padding always above titles; deliberate frosted silence between clusters.

### Signature

The wind-rose: stat cards are instrument panels with no border, a hairline graduated arc tick-scale along one edge and a tiny wind-rose readout; active panels gain a single accent needle. Buttons share one squared-capsule height with mono labels (primary solid sky knockout, secondary a recessed panel with a leading gauge tick). Forms are instrument forms (mono field-tags, underline inputs, focus gauge-arc, live mini-dial on numeric fields). Tables are almanac ledgers with status dial chips. Nav is a calibrated rail with a filled needle on the active stop. Charts are first-class wind-roses and ascent-curves. Mapped to role vars so it recolours on palette swap.

## Layout

### Grid

12-column almanac grid, 24px gutter, 1320px cap; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.

### Whitespace

Frosted-white led; tight clusters then 64–96px silence; full-bleed hero only on the landing.

### Density

Dense-but-calm

### Responsive

Collapses to a single column on mobile; dials shrink; ledgers become horizontally scrollable strips; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 640px
- **Wide**: 920px
- **Ultra**: 1320px

## Guidance

### Do

- Give every stat card the left graduated arc tick-scale and a corner wind-rose readout
- Mark the active panel/stop with a single sky needle
- Keep amber to one hero pop and the warning; leaf to live readings and success
- Set measured columns and labels in mono, region names in serif
- Hold the 12-column grid; let children shrink, never overflow

### Don't

- Don't give a card a border or a single accent edge
- Don't let an accent become a background wash or a full-bleed flood
- Don't trap nav in a pill bar or float it in a rounded card
- Don't make it childish, toy-like, or cluttered
- Don't use heavy table rules or arbitrary in-between radii

### Accessibility

Ink on frosted ground and white-on-sky/leaf clear WCAG AA; focus is a 2px sky gauge-arc; the settled page renders with no JavaScript; honours prefers-reduced-motion.

## Imagery Direction

### Pairs With

kasumi

### Summary

Luminous layered almanac plates: an atmospheric duotone photographic base of an early-summer river valley with koinobori streamers, gently out of focus toward the edges, overlaid at low opacity with semi-transparent engineering linework — a ghosted graduated wind-rose dial, radial tick marks, and flowing contour wind field-lines — a faint paper grain, and one slightly offset translucent amber colour plate misregistered over the strongest forms for a printed-archive feel.

### Subjects

- koinobori carp streamers riding the wind over a river valley
- a ghosted wind-rose / anemometer compass dial overlaid on the sky
- flowing contour wind field-lines tracing the air currents
- the Tamagawa river chart with per-station dials

### Usage

Hero = a full-bleed atmospheric river-valley scene with streamers and a ghosted wind-rose, generous calm open sky in the upper-left for the headline overlay. Cards and avatars reuse the wind-rose dial as a flat instrument token on neutral grounds.

---
version: "alpha"
name: "Windward"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#f6f9fa"
  surface: "#ffffff"
  surface-2: "#edf2f3"
  text: "#0f161a"
  muted: "#5a6b72"
  border: "#d3dee1"
  hairline: "#c2d0d4"
  accent: "#0e9be0"
  on-accent: "#ffffff"
  accent-2: "#3fcb76"
  on-accent-2: "#06251a"
  accent-3: "#f5a623"
  on-accent-3: "#2a1b00"
  success: "#3fcb76"
  warning: "#f5a623"
  error: "#d6453b"
  info: "#0e9be0"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Fraunces"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.03em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  base: "0px"
  card: "16px"
  lg: "24px"
  pill: "9999px"
  scale: "0px"
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-surface-2:
    backgroundColor: "{colors.surface-2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-hairline:
    backgroundColor: "{colors.hairline}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-on-accent-2:
    backgroundColor: "{colors.on-accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  color-reference-on-accent-3:
    backgroundColor: "{colors.on-accent-3}"
  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: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    height: "44px"
---

# Windward

## Overview

A precise editorial data-almanac system — an instrument panel for the wind and the season — that treats Children's Day as a measured natural event: wind speed, streamer count, the bloom of riverbank green, daylight hours. The ownable idea is the wind-rose: a small graduated radial dial (anemometer/compass) that recurs as the system's reading device, turning the festival into a beautifully charted civic almanac. Grown-up, infographic-led, dense-but-calm, in an engineering-archive register but bright and airy. Accents are highlighters that only ever colour a needle, an arc, a chip, or one knockout button.

### Values

- Read the festival as an instrument — every station reports measured readings
- The wind-rose dial is the recurring reading unit across every component
- Dense-but-calm: tight instrument-row clusters alternating with frosted silence
- Bright and airy frosted-white ground, never muddy, never a colour flood
- Accents as highlighters — a needle, an arc, a chip, one knockout

### Anti-Values

- Full-bleed accent floods or pastel background washes
- Borders or single accent edges on cards
- Childish, toy-like, or cluttered treatments
- Heavy table rules or KPI-grid SaaS chrome
- Navigation trapped in a floating pill bar

## 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 | `#f6f9fa` |
| surface | `#ffffff` |
| surface-2 | `#edf2f3` |
| text | `#0f161a` |
| muted | `#5a6b72` |
| border | `#d3dee1` |
| hairline | `#c2d0d4` |
| accent | `#0e9be0` |
| on-accent | `#ffffff` |
| accent-2 | `#3fcb76` |
| on-accent-2 | `#06251a` |
| accent-3 | `#f5a623` |
| on-accent-3 | `#2a1b00` |
| success | `#3fcb76` |
| warning | `#f5a623` |
| error | `#d6453b` |
| info | `#0e9be0` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Fraunces, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, 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

12-column almanac grid, 24px gutter, 1320px cap; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.

### Whitespace

Frosted-white led; tight clusters then 64–96px silence; full-bleed hero only on the landing.

### Density

Dense-but-calm

### Responsive

Collapses to a single column on mobile; dials shrink; ledgers become horizontally scrollable strips; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 640px
- **Wide**: 920px
- **Ultra**: 1320px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(15,22,26,.05)
- **Md**: 0 16px 42px rgba(14,155,224,.06)

## Shapes

### Rounded

- **Base**: `0px`
- **Card**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`
- **Scale**: `0px`

### Surfaces

- **Ground**: #f6f9fa
- **Panel**: #ffffff
- **Recessed**: #edf2f3
- **Instrument-Arc**: hairline graduated arc tick-scale down one card edge

### Borders

- **None**: 0
- **Hairline**: 1px solid #c2d0d4
- **Row-Divider**: inset 0 1px 0 #c2d0d4

## Components

### Composition

Dense 12-column almanac grid, 1320px cap, 24px gutters; tight instrument-row clusters alternate with 64–96px of frosted silence; asymmetric stage-plus-index layouts (a large reading stage beside narrower index/legend columns).

### Hierarchy

Built from type size, position, and the wind-rose dial — not colour. The sky needle and active arc mark the live reading; leaf is the live-reading secondary and success; amber is a single hero pop and warning.

### Density

Dense-but-calm; padding always above titles; deliberate frosted silence between clusters.

### Signature

The wind-rose: stat cards are instrument panels with no border, a hairline graduated arc tick-scale along one edge and a tiny wind-rose readout; active panels gain a single accent needle. Buttons share one squared-capsule height with mono labels (primary solid sky knockout, secondary a recessed panel with a leading gauge tick). Forms are instrument forms (mono field-tags, underline inputs, focus gauge-arc, live mini-dial on numeric fields). Tables are almanac ledgers with status dial chips. Nav is a calibrated rail with a filled needle on the active stop. Charts are first-class wind-roses and ascent-curves. Mapped to role vars so it recolours on palette swap.

## 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-019efac4-77ea-7f20-b75f-26592ee324f8/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 Give every stat card the left graduated arc tick-scale and a corner wind-rose readout
- Do Mark the active panel/stop with a single sky needle
- Do Keep amber to one hero pop and the warning; leaf to live readings and success
- Do Set measured columns and labels in mono, region names in serif
- Do Hold the 12-column grid; let children shrink, never overflow
- Don't Don't give a card a border or a single accent edge
- Don't Don't let an accent become a background wash or a full-bleed flood
- Don't Don't trap nav in a pill bar or float it in a rounded card
- Don't Don't make it childish, toy-like, or cluttered
- Don't Don't use heavy table rules or arbitrary in-between radii

### Accessibility

Ink on frosted ground and white-on-sky/leaf clear WCAG AA; focus is a 2px sky gauge-arc; the settled page renders with no JavaScript; honours prefers-reduced-motion.

## Imagery Direction

### Pairs With

kasumi

### Summary

Luminous layered almanac plates: an atmospheric duotone photographic base of an early-summer river valley with koinobori streamers, gently out of focus toward the edges, overlaid at low opacity with semi-transparent engineering linework — a ghosted graduated wind-rose dial, radial tick marks, and flowing contour wind field-lines — a faint paper grain, and one slightly offset translucent amber colour plate misregistered over the strongest forms for a printed-archive feel.

### Subjects

- koinobori carp streamers riding the wind over a river valley
- a ghosted wind-rose / anemometer compass dial overlaid on the sky
- flowing contour wind field-lines tracing the air currents
- the Tamagawa river chart with per-station dials

### Usage

Hero = a full-bleed atmospheric river-valley scene with streamers and a ghosted wind-rose, generous calm open sky in the upper-left for the headline overlay. Cards and avatars reuse the wind-rose dial as a flat instrument token on neutral grounds.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "windward",
  "type": "registry:theme",
  "title": "Windward shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f6f9fa",
      "foreground": "#0f161a",
      "card": "#ffffff",
      "card-foreground": "#0f161a",
      "popover": "#ffffff",
      "popover-foreground": "#0f161a",
      "primary": "#0f161a",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5a6b72",
      "muted-foreground": "#0f161a",
      "accent": "#0e9be0",
      "accent-foreground": "#ffffff",
      "destructive": "#d6453b",
      "border": "#d3dee1",
      "input": "#d3dee1",
      "ring": "#0e9be0",
      "chart-1": "#0f161a",
      "chart-2": "#f4f4f5",
      "chart-3": "#0e9be0",
      "chart-4": "#3fcb76",
      "chart-5": "#f5a623",
      "sidebar": "#ffffff",
      "sidebar-foreground": "#0f161a",
      "sidebar-primary": "#0f161a",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0e9be0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#d3dee1",
      "sidebar-ring": "#0e9be0",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0f161a",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#0e9be0",
      "accent-foreground": "#ffffff",
      "destructive": "#d6453b",
      "border": "#303642",
      "input": "#303642",
      "ring": "#0e9be0",
      "chart-1": "#0f161a",
      "chart-2": "#f4f4f5",
      "chart-3": "#0e9be0",
      "chart-4": "#3fcb76",
      "chart-5": "#f5a623",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0f161a",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0e9be0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#0e9be0",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efac4-77ea-7f20-b75f-26592ee324f8",
    "slug": "windward",
    "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-3",
        "bg",
        "border",
        "error",
        "hairline",
        "info",
        "muted",
        "on-accent",
        "on-accent-2",
        "on-accent-3",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "base",
        "card",
        "lg",
        "pill",
        "scale"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "ground",
        "instrument-arc",
        "panel",
        "recessed"
      ],
      "borders": [
        "hairline",
        "none",
        "row-divider"
      ],
      "motion": [
        "duration",
        "reveal"
      ]
    }
  }
}
```