Semantic Colors

セマンティクス（意味）を持つ色

Primitive Colorsにセマンティクスを持たせた色です。

Text#

Name	HEX/Alpha	Description
Text Main	`#32353a`	テキストの基本色
Text Sub	`#686a6d`	Text Mainに対して副次的なテキスト
Text Link	`#3959cc`	テキストリンク。下線を推奨
Text Link Sub	`#686a6d`	目立たせなくても良いリンク。下線を推奨
Text Placeholder	`#96989a`	テキストフィールドのプレースホルダーテキスト
Text Disabled	`#dcdddd`	無効化されている状態のテキスト
Text Blue	`#283f91`	-
Text Blue Darken	`#203374`	-
Text Pink	`#9b2350`	-
Text Pink Darken	`#7c1c40`	-
Text Orange	`#b57212`	-
Text Orange Darken	`#915c0f`	-
Text Purple	`#7322a2`	-
Text Purple Darken	`#5c1b82`	-
Text Green	`#1c9167`	-
Text Green Darken	`#167453`	-
Text Red	`#a1213c`	-
Text Red Darken	`#811a30`	-
Text Black	`#393c41`	-
Text Black Darken	`#32353a`	-

Name	HEX/Alpha	Description
Background Modal	`#000000 / 50%`	Modal表示時の背景色
Background White	`#ffffff`	-
Background Blue	`#f0f2fc`	-
Background Blue Darken	`#cfd7f3`	-
Background Blue Inverse	`#3959cc`	-
Background Blue Inverse Darken	`#283f91`	-
Background Pink	`#fcf0f5`	-
Background Pink Darken	`#f6cedd`	-
Background Pink Inverse	`#da3170`	-
Background Pink Inverse Darken	`#9b2350`	-
Background Orange	`#fff9f0`	-
Background Orange Darken	`#ffe8c8`	-
Background Orange Inverse	`#ffa11a`	-
Background Orange Inverse Darken	`#b57212`	-
Background Purple	`#f8effc`	-
Background Purple Darken	`#e9cdf9`	-
Background Purple Inverse	`#a230e4`	-
Background Purple Inverse Darken	`#7322a2`	-
Background Green	`#e9faf4`	-
Background Green Darken	`#cbf3e5`	-
Background Green Inverse	`#27cc91`	-
Background Green Inverse Darken	`#1c9167`	-
Background Red	`#fceff2`	-
Background Red Darken	`#f8cdd6`	-
Background Red Inverse	`#e32e55`	-
Background Red Inverse Darken	`#a1213c`	-
Background Black	`#fafafa`	-
Background Black Darken	`#f6f6f6`	-
Background Black Inverse	`#686a6d`	-
Background Black Inverse Darken	`#55575b`	-

Name	HEX/Alpha	Description
Border Blue	`#8296df`	-
Border Blue Darken	`#5d77d5`	-
Border Pink	`#e87da5`	-
Border Pink Darken	`#e1568a`	-
Border Orange	`#ffc46f`	-
Border Orange Darken	`#ffb243`	-
Border Purple	`#c47dee`	-
Border Purple Darken	`#b355e9`	-
Border Green	`#77dfba`	-
Border Green Darken	`#4ed5a5`	-
Border Red	`#ed7b94`	-
Border Red Darken	`#e85474`	-
Border Black	`#c5c6c7`	-
Border Black Darken	`#96989a`	-