koyu-design

name	koyu-design
description	Use this skill to build Koyu and Ugatsu interfaces with the canonical ink, wash, blank-space and relation language.
user-invocable	true

Read readme.md and DESIGN.md, then inspect the relevant component .prompt.md, .jsx and .d.ts files before producing an artifact.

Core thesis: 座標は出力。関係が原本。

Map information to drawing language:

• dry ink line = structure, boundary, relation;
• pale wash = state, selection, range, layer;
• blank paper = space and not-yet-recorded;
• fresh dark ink = current change or confirmed action;
• mineral = keyboard focus and active reference;
• cinnabar = current decision, review or danger.

Product chrome is achromatic. Do not reintroduce navy, sepia, aged-paper texture, generic rounded-card layouts, always-on Cartesian grids, brush textures, emoji or faux-Asian symbols.

Container order: whitespace → one rule → wash → temporary surface. Edges are 0 / 2 / 4 / 6px by function. Circles are reserved for controls and nodes whose behavior requires them.

Use IBM Plex Sans + Noto Sans JP for UI, Noto Serif JP for rare editorial moments and IBM Plex Mono for identity/derived values. The type floor is 12px.

Use sentence case, verb-first actions and exact source/derivation language. Never let color alone carry status.

Light and dark themes are selected with data-theme="dark". Use semantic tokens, especially --selection-bg, --selection-line, --focus, --ink, --wash-* and --cinnabar.