基礎

トークンは二層。パレット（名前付きの6色）が primitive。--background --card --primary などが semantic。アプリは semantic を使う。hex を直接指さない。

値は src/styles.css が正。

色

6色。底 #132440、宵藍 #1F3D64、くすみ #385F82、薄藍 #5480A6、残る #7EA6C2、紙 #E2E6EC。メインは宵藍とくすみ。

ライトの地は紙。カードは #D6DBE4。--primary は宵藍。--secondary はくすみ。

ダークの地は底。カードは宵藍。--primary はくすみ。

面は三つ。--muted は沈む面、--card は一段、--popover は浮く面。ライトは popover > 紙 > card > muted、ダークは popover > card > muted > 底。muted は紙の上でも card の上でも見える。

文字のリンクは --link。ライトは宵藍、ダークは残る。--primary は塗りに使う。文字には使わない。

覆いは --overlay。底の側の色。黒は使わない。

OS ゴシック。system-ui, Hiragino, Noto Sans JP。面は一つ。

段は開く。注 0.8125rem、小見出し 1.125rem、中見出し 1.5rem、大見出し 1.85rem、標題 2.15rem、表題 clamp(2.5rem, 6vw, 3.75rem)。差はサイズと字重。

地と面の差は一段。Card はフラットな面。

影は使わない。高さは輪郭（ring-foreground/10）と面の明度差で示す。Dialog も Dropdown も同じ言い方。

default Button には宵藍の空の層がある。内側の色の層を blur する。

曲がりは ease-静か ease-出 ease-入。長さは duration-短 120ms、duration-中 240ms、duration-長 480ms。開くときは出、閉じるときは入。prefers-reduced-motion では動かない。

半径は --radius。スペーシングは Tailwind の既存。

ライブラリは source export。@source が要る。入れ方ははじめに。