Raster

すべて数値で決まっています

「ミニマル」を感覚で運用すると必ずブレます。目分量で近い値を書かず、この値を使ってください。

controlHeights

sm: 32 / md: 40 / lg: 48

radii

none: 0px / sm: 2px / md: 2px / lg: 2px / full: 9999px

text

xs: 12px / sm: 14px / base: 16px / lg: 20px / xl: 24px / 2xl: 30px / 3xl: 36px

motion

duration-fast: 120ms / duration-base: 120ms / duration-slow: 120ms / ease-standard: cubic-bezier(0.2, 0, 0, 1) / ease-emphasized: cubic-bezier(0.2, 0, 0, 1)

radius は潰れます

Raster は radius の語彙を受け付けますが、見た目は変わりません。 none 以外はすべて 2px です（full だけは Avatar と Radio の円のために残しています）。

これは仕様であって不具合ではありません。 語彙は core が固定し、解釈はテーマの自由にする、という設計の帰結です。 そうしておくと、テーマを切り替えてもコードを1行も直さずに済みます。 角丸を活かしたい場合は、Raster ではなく別のテーマを選んでください。

影は使いません

浮かせる代わりに、境界線と背景色の差で階層を作ります。 オーバーレイも影ではなく、背景の暗転と 1px の枠で「上にある」ことを示します。

色は明度だけで階層を作ります

中立色は彩度を持ちません。面と文字の階層は明るさの差だけで作ります。 彩度を持つのは意味のある色（primary / success / warning / danger）だけです。

色は `--novi-color-*` の CSS 変数経由でのみ指定する。リテラルの色値は書かない。中立色の chroma は 0 に固定し、面と文字の階層は明度だけで作る。

書いてはいけないクラス

テーマを触る場合の規律です。CI が機械的に検査しているため、違反するとビルドが落ちます。 この一覧は検査スクリプトと同じ定義から作られています。

• shadow-*（shadow-none は可）影は使わない。階層は境界線と背景色の差で表す
• rounded-md / lg / xl / 2xl / 3xl と任意値の角丸角丸はトークン経由。Raster では最大 2px
• border-2 以上境界線は 1px のみ。面の分割は線の太さでなく余白で行う
• scale-* / scale-x-* / scale-y-*動きで飾らない。モーションは opacity と translate のみ
• rotate-* / animate-spin同上。回転は Spinner のみ例外（ADR-R2）
• リテラルの色値（#fff / rgb() / hsl() / oklch()）色は必ず --novi-color-* を経由する。リテラル値を書かない
• duration-*（--novi-duration-* の任意値を除く）モーションの時間はトークン経由にする

例外

• spinner.styles.ts は rotate のみ許可 — ローディング表現の代替（点滅・バー往復）は視認性か情報量で劣る（ADR-R2）
• raster-tokens.ts は literal-color, duration, radius, shadow のみ許可 — トークンの値そのものを定義する唯一の場所。ここだけは「使用」ではなく「定義」

動きで飾りません

モーションは opacity と translate だけです。拡大・回転は使いません（Spinner の回転だけが例外です）。 速度は1つに固定してあり、prefers-reduced-motion が有効なときはアニメーションを行いません。

値を変えたいとき

ここにある値はすべて CSS 変数です。上書きの方法は テーマの調整にあります。