Color
Thinca プロダクト全体で使用するカラートークン。意味別 (Semantic) と原色 (Primitive) で構成されています。
トークン一覧
Main
main.thincaRed
#C7000B
カイクラを象徴するカラー（UIのメイン要素に使用）。
Secondary
secondary.blue
#0066CC
プロダクトの主要色。保存・検索など主要アクション用。
secondary.mainHover
#0052A3
Secondary Blueのホバー状態。
secondary.mainPress
#003D7A
Secondary Blueのプレス（クリック）状態。
secondary.white
#FFFFFF
基調となる白。
Status
status.dangerNormal
#E01E5A
エラー、削除、切断など、警告・破壊的操作。
status.dangerHover
#C91A50
エラー、削除、切断など、警告・破壊的操作。
status.dangerActive
#B31747
エラー、削除、切断など、警告・破壊的操作。
status.success
#008A4B
完了、正常、オンライン。
status.warning
#FFCC17
注意、保留。
Text
text.primary
#1F2937
メインテキスト（顧客名、電話番号）。
text.secondary
#6B7280
サブテキスト（日付、ラベル）。
text.tertiary
#9CA3AF
text.secondary よりも優先度の低いテキストに使用。
text.disabled
#D1D5DB
プレースホルダー、無効な文字。
text.white
#FFFFFF
白文字。背景色が濃い場面（赤・青など）で使用。
Fill
fill.primary
#1F2937
メインのアイコン・図形の塗り色。
fill.secondary
#6B7280
サブのアイコン・図形の塗り色。
fill.tertiary
#9CA3AF
fill.secondary よりも優先度の低い塗りに使用。
fill.disabled
#D1D5DB
無効状態のアイコン・図形の塗り色。
fill.onDark
#FFFFFF
暗い背景上のアイコン・図形に乗せる白い塗り色。
Link
link.default
#0060CC
テキストリンクの標準色。
link.hover
#0060CC
テキストリンクのホバー色。
Border
border.default
#D1D5DB
コンポーネントの枠線。
Background
background.actionBackground
#E5E7EB
一括操作バーなどの背景。
background.head
#E5E7EB
テーブル（表）の見出し背景。
background.overBackground
#F3F4F6
BACKGROUNDの上で使う囲み色（要素をグルーピングするときに使う色）。
background.background
#F5F7FA
アプリケーション全体の背景色。
background.column
#F9FAFB
WHITEの上で使う囲み色（要素をグルーピングするときに使う色）。
Primitive
primitive.black
#111827
パレットの元となる黒。
primitive.white
#FFFFFF
パレットの元となる白。
primitive.blue100
#0066CC
パレットの元となる青。
primitive.blue110
#0052A3
パレットの元となる青。
primitive.green100
#008A4B
パレットの元となる緑。
primitive.yellow100
#FFCC17
パレットの元となる黄。
primitive.orange100
#F59E0B
パレットの元となる緑。
primitive.cyan100
#00B8D9
パレットの元となる水色。
primitive.thincaRed
#C7000B
パレットの元となる赤。
primitive.magenta100
#E01E5A
パレットの元となるピンク。
Neutral / Grey
neutral.grey5
#F9FAFB
濃淡の異なるグレーのパレット。
neutral.grey6
#F5F7FA
濃淡の異なるグレーのパレット。
neutral.grey20
#E5E7EB
濃淡の異なるグレーのパレット。
neutral.grey30
#D1D5DB
濃淡の異なるグレーのパレット。
neutral.grey40
#9CA3AF
濃淡の異なるグレーのパレット。
neutral.grey65
#6B7280
濃淡の異なるグレーのパレット。
neutral.grey80
#374151
濃淡の異なるグレーのパレット。
neutral.grey100
#1F2937
濃淡の異なるグレーのパレット。
Interaction (透過)
interaction.blueTransparency8
rgba(0, 102, 204, 0.08)
メインカラー青の8%透過色で、ボタンなどhover時に重ねる色。
interaction.blueTransparency16
rgba(0, 102, 204, 0.16)
メインカラー青の8%透過色で、ボタンなどhover時に重ねる色。
interaction.blueTransparency30
rgba(0, 102, 204, 0.30)
interaction.transparency8
rgba(31, 41, 55, 0.08)
文字色黒の60%透過色で、モーダル表示時に後ろを暗くする色。
interaction.transparency16
rgba(31, 41, 55, 0.16)
文字色黒の60%透過色で、モーダル表示時に後ろを暗くする色。
interaction.transparency30
rgba(31, 41, 55, 0.30)
文字色黒の60%透過色で、モーダル表示時に後ろを暗くする色。
interaction.transparency60
rgba(31, 41, 55, 0.60)
文字色黒の60%透過色で、モーダル表示時に後ろを暗くする色。
interaction.redTransparent16
rgba(199, 0, 11, 0.16)
interaction.redTransparent30
rgba(199, 0, 11, 0.30)
interaction.redTransparent60
rgba(199, 0, 11, 0.60)
interaction.transparent
rgba(255, 255, 255, 0)
リセット用や、透明なボタンを作る際に使用。
Chart - Multi Color
chart.multiColor.1
#0066CC
グラフ・統計データの塗り分け用。
chart.multiColor.2
#00B8D9
グラフ・統計データの塗り分け用。
chart.multiColor.3
#F59E0B
グラフ・統計データの塗り分け用。
chart.multiColor.4
#10B981
グラフ・統計データの塗り分け用。
chart.multiColor.5
#8B5CF6
グラフ・統計データの塗り分け用。
chart.multiColor.6
#EF4444
グラフ・統計データの塗り分け用。
chart.multiColor.7
#F472B6
グラフ・統計データの塗り分け用。
chart.multiColor.8
#6366F1
グラフ・統計データの塗り分け用。
chart.multiColor.9
#84CC16
グラフ・統計データの塗り分け用。
chart.multiColor.10
#14B8A6
グラフ・統計データの塗り分け用。
Chart - Single Color
chart.singleColor.1
#E0F2FE
単色グラフのグラデーション・濃淡用。
chart.singleColor.2
#BAE6FD
単色グラフのグラデーション・濃淡用。
chart.singleColor.3
#7DD3FC
単色グラフのグラデーション・濃淡用。
chart.singleColor.4
#38BDF8
単色グラフのグラデーション・濃淡用。
chart.singleColor.5
#0066CC
単色グラフのグラデーション・濃淡用。
chart.singleColor.6
#0C4A6E
単色グラフのグラデーション・濃淡用。