開くデザインデータ開くデザインデータ(Figma)の作り方デザインデータ(Figma)の更新をライブラリに適用する手順デザインレビューリソース色プロダクトを構成するために必要な最低限の色を定義しています。コンポーネントの設計において、色を選択する手間を効率化するために、それぞれの色には役割に応じた名前を割り当てています。色は情報を伝え、動作を示し、反応を促しますが、唯一の視覚的手段にしてはいけません。すべての利用者が同じ情報を知覚できる必要があります。セマンティックトークンメインプライマリーカラーであるMAINと、コンポーネントのベースカラーとなるWHITEを定めています。プライマリーカラーは、プロダクトの印象を司る箇所に使います。具体的な使用箇所は、各コンポーネントを参照してください。MAIN#0077c7rgb(0,119,199)プライマリーカラー(プロダクトの印象を司る箇所に使う)WHITE#fffrgb(255,255,255)コンポーネントの背景色(Baseコンポーネントなど)アクセントコンテキストに応じた色を定めています。MAINと合わせて、ユーザーのメインアクションや、アクションに対する結果、ヘルプの表示、オブジェクトの状態を表します。具体的な使用箇所は、各コンポーネントを参照してください。DANGER#e01e5argb(224,30,90)エラー色(操作前に、個人情報の流出や金銭的/法的リスクなど、強い警告をする場合も含む)WARNING_YELLOW#ffcc17rgb(255,204,23)警告色(削除やUndoなどの破壊的アクションをする前の注意に使う)。TEXT_BLACKと組み合わせて使う文字テキストの状態に応じた文字の色を定めています。強調などの文字スタイルは、タイポグラフィを参照してください。TEXT_BLACK#23221ergb(35,34,30)基本的な文字の色TEXT_GREY#706d65rgb(112,109,101)TEXT_BLACKからジャンプ率を確保するときに使う文字の色TEXT_LINK#0071c1rgb(0,113,193)リンクを表す文字の色TEXT_DISABLED#c1bdb7rgb(193,189,183)disabled状態を表す文字の色TEXT_WHITE#fffrgb(255,255,255)暗い地色やMAINに対して使う文字の色コンポーネントコンポーネントを構成する要素に必要な色を定めています。具体的な使用箇所は、各コンポーネントを参照してください。BORDER#d6d3d0rgb(214,211,208)枠線・罫線の色ACTION_BACKGROUND#d6d3d0rgb(214,211,208)TableBulkActionAreaの背景色HEAD#edebe8rgb(237,235,232)テーブルヘッダーの背景色OVER_BACKGROUND#f2f1f0rgb(242,241,240)BACKGROUNDの上で使う囲み色(要素をグルーピングするときに使う色)COLUMN#f8f7f6rgb(248,247,246)WHITEの上で使う囲み色(要素をグルーピングするときに使う色)BACKGROUND#f8f7f6rgb(248,247,246)画面の背景色OVERLAYrgba(3,3,2,0.15)ボタンなどhover時に重ねる色SCRIMrgba(3,3,2,0.5)モーダル表示時のスクリム(モーダルの下の画面に重ねる)の色TRANSPARENTrgba(255,255,255,0)デザインツールだけで使う専用スタイル。コンポーネントの枠線などを消すときのAppearanceに使用プリミティブトークンセマンティックトークンだけで視覚設計を十分に行なえない場合のみ、プリミティブトークンから色を使用できます。基本色BLACK#030302rgb(3,3,2)WHITE#fffrgb(255,255,255)BLUE_100#0077c7rgb(0,119,199)BLUE_101#0071c1rgb(0,113,193)RED_100#e01e5argb(224,30,90)ORANGE_100#ff8800rgb(255,136,0)YELLOW_100#ffcc17rgb(255,204,23)SMARTHR_BLUE#00c4ccrgb(0,196,204)グレースケールGREY_5#f8f7f6rgb(248,247,246)GREY_6#f5f4f3rgb(245,244,243)GREY_7#f2f1f0rgb(242,241,240)GREY_9#edebe8rgb(237,235,232)GREY_20#d6d3d0rgb(214,211,208)GREY_30#c1bdb7rgb(193,189,183)GREY_65#706d65rgb(112,109,101)GREY_100#23221ergb(35,34,30)透明色TRANSPARENCY_15rgba(3,3,2,0.15)TRANSPARENCY_30rgba(3,3,2,0.30)TRANSPARENCY_50rgba(3,3,2,0.50)色の新旧比較2021年2月にプロダクトの色をアップデートしました。画面のカラーが新しくなります」を参考にしてください。