Palette Tokens
The following tokens form the foundational colors of Tapsi’s visual language. By using these curated hues—including brand colors, neutrals, and complementary tones—you maintain a unified and balanced color scheme across your application.
| JS Usage | CSS Token | Value |
|---|---|---|
tokens.palette.black | --tapsi-palette-black | #000000 |
tokens.palette.white | --tapsi-palette-white | #ffffff |
tokens.palette.gray[50] | --tapsi-palette-gray-50 | #f5f7f7 |
tokens.palette.gray[100] | --tapsi-palette-gray-100 | #eaeded |
tokens.palette.gray[200] | --tapsi-palette-gray-200 | #e1e3e3 |
tokens.palette.gray[300] | --tapsi-palette-gray-300 | #cacccc |
tokens.palette.gray[400] | --tapsi-palette-gray-400 | #b1b2b2 |
tokens.palette.gray[500] | --tapsi-palette-gray-500 | #747575 |
tokens.palette.gray[600] | --tapsi-palette-gray-600 | #535454 |
tokens.palette.gray[700] | --tapsi-palette-gray-700 | #323333 |
tokens.palette.gray[800] | --tapsi-palette-gray-800 | #1f1f1f |
tokens.palette.gray[900] | --tapsi-palette-gray-900 | #141414 |
tokens.palette.orange[50] | --tapsi-palette-orange-50 | #fff0e9 |
tokens.palette.orange[100] | --tapsi-palette-orange-100 | #ffd5c2 |
tokens.palette.orange[200] | --tapsi-palette-orange-200 | #ffac8a |
tokens.palette.orange[300] | --tapsi-palette-orange-300 | #ff8c61 |
tokens.palette.orange[400] | --tapsi-palette-orange-400 | #ff7140 |
tokens.palette.orange[500] | --tapsi-palette-orange-500 | #e55c2e |
tokens.palette.orange[600] | --tapsi-palette-orange-600 | #a64221 |
tokens.palette.orange[700] | --tapsi-palette-orange-700 | #662a14 |
tokens.palette.orange[800] | --tapsi-palette-orange-800 | #000000 |
tokens.palette.orange[900] | --tapsi-palette-orange-900 | #422e28 |
tokens.palette.blue[50] | --tapsi-palette-blue-50 | #eff3fe |
tokens.palette.blue[100] | --tapsi-palette-blue-100 | #d4e2fc |
tokens.palette.blue[200] | --tapsi-palette-blue-200 | #a0bff8 |
tokens.palette.blue[300] | --tapsi-palette-blue-300 | #5b91f5 |
tokens.palette.blue[400] | --tapsi-palette-blue-400 | #276ef1 |
tokens.palette.blue[500] | --tapsi-palette-blue-500 | #1e54b7 |
tokens.palette.blue[600] | --tapsi-palette-blue-600 | #174291 |
tokens.palette.blue[700] | --tapsi-palette-blue-700 | #143166 |
tokens.palette.blue[800] | --tapsi-palette-blue-800 | #000000 |
tokens.palette.blue[900] | --tapsi-palette-blue-900 | #262f40 |
tokens.palette.green[50] | --tapsi-palette-green-50 | #e6f2ed |
tokens.palette.green[100] | --tapsi-palette-green-100 | #addec9 |
tokens.palette.green[200] | --tapsi-palette-green-200 | #66d19e |
tokens.palette.green[300] | --tapsi-palette-green-300 | #06c167 |
tokens.palette.green[400] | --tapsi-palette-green-400 | #048848 |
tokens.palette.green[500] | --tapsi-palette-green-500 | #03703c |
tokens.palette.green[600] | --tapsi-palette-green-600 | #03582f |
tokens.palette.green[700] | --tapsi-palette-green-700 | #10462d |
tokens.palette.green[800] | --tapsi-palette-green-800 | #000000 |
tokens.palette.green[900] | --tapsi-palette-green-900 | #24332c |
tokens.palette.yellow[50] | --tapsi-palette-yellow-50 | #fffaf0 |
tokens.palette.yellow[100] | --tapsi-palette-yellow-100 | #fff2d9 |
tokens.palette.yellow[200] | --tapsi-palette-yellow-200 | #ffe3ac |
tokens.palette.yellow[300] | --tapsi-palette-yellow-300 | #ffcf70 |
tokens.palette.yellow[400] | --tapsi-palette-yellow-400 | #ffc043 |
tokens.palette.yellow[500] | --tapsi-palette-yellow-500 | #e49e15 |
tokens.palette.yellow[600] | --tapsi-palette-yellow-600 | #996f00 |
tokens.palette.yellow[700] | --tapsi-palette-yellow-700 | #674d1b |
tokens.palette.yellow[800] | --tapsi-palette-yellow-800 | #000000 |
tokens.palette.yellow[900] | --tapsi-palette-yellow-900 | #332e24 |
tokens.palette.red[50] | --tapsi-palette-red-50 | #ffefed |
tokens.palette.red[100] | --tapsi-palette-red-100 | #fed7d2 |
tokens.palette.red[200] | --tapsi-palette-red-200 | #f1998e |
tokens.palette.red[300] | --tapsi-palette-red-300 | #e85c4a |
tokens.palette.red[400] | --tapsi-palette-red-400 | #e11900 |
tokens.palette.red[500] | --tapsi-palette-red-500 | #ab1300 |
tokens.palette.red[600] | --tapsi-palette-red-600 | #870f00 |
tokens.palette.red[700] | --tapsi-palette-red-700 | #5a0a00 |
tokens.palette.red[800] | --tapsi-palette-red-800 | #000000 |
tokens.palette.red[900] | --tapsi-palette-red-900 | #402926 |
tokens.palette.purple[50] | --tapsi-palette-purple-50 | #ffefed |
tokens.palette.purple[100] | --tapsi-palette-purple-100 | #fed7d2 |
tokens.palette.purple[200] | --tapsi-palette-purple-200 | #f1998e |
tokens.palette.purple[300] | --tapsi-palette-purple-300 | #e85c4a |
tokens.palette.purple[400] | --tapsi-palette-purple-400 | #e11900 |
tokens.palette.purple[500] | --tapsi-palette-purple-500 | #ab1300 |
tokens.palette.purple[600] | --tapsi-palette-purple-600 | #870f00 |
tokens.palette.purple[700] | --tapsi-palette-purple-700 | #5a0a00 |
tokens.palette.purple[800] | --tapsi-palette-purple-800 | #000000 |
tokens.palette.purple[900] | --tapsi-palette-purple-900 | #402926 |