色
紙の上の温かいインクと、ただひとつの黄色。値はすべてトークンで、ライトとダークの違いはトークン層だけにあります。
スケール
黄色は 4 段階、温かいインクは 10 段階で、色相はすべて 22–48。スウォッチを選ぶと変数をコピーできます。
黄色
温かいインク
面と文字
コンポーネントはこの名前だけを使い、スケールの段階を直接使いません。
トークンライトダーク用途
ページ。温かい紙、ダークモードでは温かい黒に近い色。
本文と見出し。
不透明な面。パネル、ウィンドウ、モックのプロダクト UI。
くぼみ、ホバーの塗り、インラインコード。
リード、キャプション、補助ラベル。
セルの間とカードの周りのヘアライン。
ブランド
黄色は 1 画面に一度だけ。主要操作、フォーカスリング、またはシーンの結果。
トークンライトダーク用途
唯一の主要操作。
主要操作の上の文字。
選択・強調した行の淡い黄色。
淡い黄色の上の文字。
キーボードのフォーカスリング。
ステータス
実際の結果にだけ使い、必ずアイコンか言葉を添えます。
トークンライトダーク用途
完了、保存、接続。
破壊的な操作とエラー。
中立的なお知らせと、その中のリンク。
サブストレート
デモやコードの背後にある、常に暗い舞台裏の面。どちらのモードでも暗いままで、tint トークンは写真の上のチップに使います。
ルール
- 1セマンティックなユーティリティを書く：bg-background、text-muted-foreground、border-border。
- 2コンポーネントに物理的な色を書かない：#fff、zinc-500、bg-white は使わない。
- 3コンポーネントに dark: の分岐を書かない。ダークモードは .dark クラスとトークン層が担う。
- 4影は温かい 2 層で、ink-900 を基準にする。中立の黒も色付きの影も使わない。
- 5グラデーションの文字、グラデーションの枠、色のにじみは使わない。