Semantic Colors
セマンティックカラーは、UI 要素の意味や状態を表現するために使用される色です。
例えば、成功を表す緑色、警告を表す黄色、エラーを表す赤色など、ユーザーに直感的に情報を伝えることができます。
これらの色は一貫性のある視覚的なフィードバックを提供し、UX を向上させる重要な役割を果たします。
text
| 名称 | HEX/Alpha | 説明 | コピー |
|---|---|---|---|
main | #000509e3 | 標準テキストの色 | |
sub | #030a1b8f | 補足・サブテキスト用の色 | |
link | #0031d2c1 | 通常テキストのリンクの色 | |
linkSub | #030a1b8f | 目立たせなくても良いリンクの色 | |
placeholder | #00071b7f | プレースホルダーの色 | |
disabled | #00083046 | 無効状態のテキストの色 | |
orange | #cc4e00 | - | |
orangeDarken | #582d1d | - | |
green | #067a6f | - | |
greenDarken | #10302b | - | |
blue | #006adc | - | |
blueDarken | #00254d | - | |
red | #cd2b31 | - | |
redDarken | #381316 | - | |
yellow | #946800 | - | |
yellowDarken | #35290f | - | |
pink | #cd1d8d | - | |
pinkDarken | #3b0a2a | - | |
purple | #793aaf | - | |
purpleDarken | #2b0e44 | - | |
black | #000509e3 | - | |
white | #ffffff | - |
background
| 名称 | HEX/Alpha | 説明 | コピー |
|---|---|---|---|
modal | #000509e3 | 背景を暗くするスクリーンの色 | |
orange | #ffefd6 | - | |
orangeDarken | #ffd19a | - | |
orangeInverse | #ef5f00 | - | |
orangeInverseDarken | #cc4e00 | - | |
green | #e7f9f5 | - | |
greenDarken | #c7ebe5 | - | |
greenInverse | #0e9888 | - | |
greenInverseDarken | #067a6f | - | |
blue | #edf6ff | - | |
blueDarken | #cee7fe | - | |
blueInverse | #0081f1 | - | |
blueInverseDarken | #006adc | - | |
red | #ffefef | - | |
redDarken | #fdd8d8 | - | |
redInverse | #dc3d43 | - | |
redInverseDarken | #cd2b31 | - | |
yellow | #fffbd1 | - | |
yellowDarken | #fef2a4 | - | |
yellowInverse | #f7ce00 | - | |
yellowInverseDarken | #946800 | - | |
pink | #feeef8 | - | |
pinkDarken | #f9d8ec | - | |
pinkInverse | #d23197 | - | |
pinkInverseDarken | #cd1d8d | - | |
purple | #f9f1fe | - | |
purpleDarken | #eddbf9 | - | |
purpleInverse | #8445bc | - | |
purpleInverseDarken | #793aaf | - | |
black | #f0f0f3 | - | |
blackDarken | #e0e1e6 | - | |
blackInverse | #80838d | - | |
blackInverseDarken | #60646c | - | |
white | #ffffff | - |
border
| 名称 | HEX/Alpha | 説明 | コピー |
|---|---|---|---|
orange | #ffc182 | - | |
orangeDarken | #f5ae73 | - | |
green | #afdfd7 | - | |
greenDarken | #8dcec3 | - | |
blue | #b7d9f8 | - | |
blueDarken | #96c7f2 | - | |
red | #f9c6c6 | - | |
redDarken | #f3aeaf | - | |
yellow | #f9e68c | - | |
yellowDarken | #efd36c | - | |
pink | #f3c6e2 | - | |
pinkDarken | #ecadd4 | - | |
purple | #e3ccf4 | - | |
purpleDarken | #d3b4ed | - | |
black | #d9d9e0 | - | |
blackDarken | #cdced6 | - |