基礎

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

ここに巨大な色見本は置かない。値は src/styles.css が正。

色

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

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

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

文字

OS ゴシック。system-ui, Hiragino, Noto Sans JP。webfont を足さない。

一段の明暗

地と面の差は一段。グラデで盛らない。

空の層

default Button には宵藍の空の層がある。内側の色の層を blur する。フロスト / backdrop-filter ではない。

Card には載せない。

半径と余白

半径は既存の --radius。スペーシングは既存の Tailwind。新しいスケールを発明しない。

置き方

ライブラリは source export。@source が要る。dist は main に置かない。入れ方ははじめに。