Color Tokens
Palette
| Token | Value | Example |
|---|---|---|
--tap-palette-black | #000000 | |
--tap-palette-white | #ffffff | |
--tap-palette-gray-900 | #141414 | |
--tap-palette-gray-800 | #1f1f1f | |
--tap-palette-gray-700 | #323333 | |
--tap-palette-gray-600 | #535454 | |
--tap-palette-gray-500 | #747575 | |
--tap-palette-gray-400 | #b1b2b2 | |
--tap-palette-gray-300 | #cacccc | |
--tap-palette-gray-200 | #e1e3e3 | |
--tap-palette-gray-100 | #eaeded | |
--tap-palette-gray-50 | #f5f7f7 | |
--tap-palette-orange-900 | #422e28 | |
--tap-palette-orange-800 | #000000 | |
--tap-palette-orange-700 | #662a14 | |
--tap-palette-orange-600 | #a64221 | |
--tap-palette-orange-500 | #e55c2e | |
--tap-palette-orange-400 | #ff7140 | |
--tap-palette-orange-300 | #ff8c61 | |
--tap-palette-orange-200 | #ffac8a | |
--tap-palette-orange-100 | #ffd5c2 | |
--tap-palette-orange-50 | #fff0e9 | |
--tap-palette-blue-900 | #262f40 | |
--tap-palette-blue-800 | #000000 | |
--tap-palette-blue-700 | #143166 | |
--tap-palette-blue-600 | #174291 | |
--tap-palette-blue-500 | #1e54b7 | |
--tap-palette-blue-400 | #276ef1 | |
--tap-palette-blue-300 | #5b91f5 | |
--tap-palette-blue-200 | #a0bff8 | |
--tap-palette-blue-100 | #d4e2fc | |
--tap-palette-blue-50 | #eff3fe | |
--tap-palette-green-900 | #24332c | |
--tap-palette-green-800 | #000000 | |
--tap-palette-green-700 | #10462d | |
--tap-palette-green-600 | #03582f | |
--tap-palette-green-500 | #03703c | |
--tap-palette-green-400 | #048848 | |
--tap-palette-green-300 | #06c167 | |
--tap-palette-green-200 | #66d19e | |
--tap-palette-green-100 | #addec9 | |
--tap-palette-green-50 | #e6f2ed | |
--tap-palette-yellow-900 | #332e24 | |
--tap-palette-yellow-800 | #000000 | |
--tap-palette-yellow-700 | #674d1b | |
--tap-palette-yellow-600 | #996f00 | |
--tap-palette-yellow-500 | #e49e15 | |
--tap-palette-yellow-400 | #ffc043 | |
--tap-palette-yellow-300 | #ffcf70 | |
--tap-palette-yellow-200 | #ffe3ac | |
--tap-palette-yellow-100 | #fff2d9 | |
--tap-palette-yellow-50 | #fffaf0 | |
--tap-palette-red-900 | #402926 | |
--tap-palette-red-800 | #000000 | |
--tap-palette-red-700 | #5a0a00 | |
--tap-palette-red-600 | #870f00 | |
--tap-palette-red-500 | #ab1300 | |
--tap-palette-red-400 | #e11900 | |
--tap-palette-red-300 | #e85c4a | |
--tap-palette-red-200 | #f1998e | |
--tap-palette-red-100 | #fed7d2 | |
--tap-palette-red-50 | #ffefed | |
--tap-palette-purple-900 | #402926 | |
--tap-palette-purple-800 | #000000 | |
--tap-palette-purple-700 | #5a0a00 | |
--tap-palette-purple-600 | #870f00 | |
--tap-palette-purple-500 | #ab1300 | |
--tap-palette-purple-400 | #e11900 | |
--tap-palette-purple-300 | #e85c4a | |
--tap-palette-purple-200 | #f1998e | |
--tap-palette-purple-100 | #fed7d2 | |
--tap-palette-purple-50 | #ffefed |
surface
| Token | Value | Preview |
|---|---|---|
--tap-sys-color-surface-primary | var(--tap-palette-white) | |
--tap-sys-color-surface-secondary | var(--tap-palette-gray-50) | |
--tap-sys-color-surface-tertiary | var(--tap-palette-gray-100) | |
--tap-sys-color-surface-background-primary | var(--tap-palette-gray-50) | |
--tap-sys-color-surface-background-secondary | var(--tap-palette-gray-100) | |
--tap-sys-color-surface-disabled | var(--tap-palette-gray-50) | |
--tap-sys-color-surface-inverse-primary | var(--tap-palette-black) | |
--tap-sys-color-surface-inverse-secondary | var(--tap-palette-gray-700) | |
--tap-sys-color-surface-accent | var(--tap-palette-blue-400) | |
--tap-sys-color-surface-negative | var(--tap-palette-red-400) | |
--tap-sys-color-surface-warning | var(--tap-palette-yellow-400) | |
--tap-sys-color-surface-positive | var(--tap-palette-green-400) | |
--tap-sys-color-surface-accent-light | var(--tap-palette-blue-50) | |
--tap-sys-color-surface-negative-light | var(--tap-palette-red-50) | |
--tap-sys-color-surface-warning-light | var(--tap-palette-yellow-50) | |
--tap-sys-color-surface-positive-light | var(--tap-palette-green-50) | |
--tap-sys-color-surface-overlay-dark | #0000004d | |
--tap-sys-color-surface-overlay-light | #0000001f | |
--tap-sys-color-surface-black | var(--tap-palette-black) | |
--tap-sys-color-surface-white | var(--tap-palette-white) |
content
| Token | Value | Preview |
|---|---|---|
--tap-sys-color-content-primary | var(--tap-palette-black) | |
--tap-sys-color-content-secondary | var(--tap-palette-gray-600) | |
--tap-sys-color-content-tertiary | var(--tap-palette-gray-500) | |
--tap-sys-color-content-disabled | var(--tap-palette-gray-400) | |
--tap-sys-color-content-on-inverse | var(--tap-palette-white) | |
--tap-sys-color-content-accent | var(--tap-palette-blue-400) | |
--tap-sys-color-content-negative | var(--tap-palette-red-400) | |
--tap-sys-color-content-warning | var(--tap-palette-yellow-500) | |
--tap-sys-color-content-positive | var(--tap-palette-green-400) | |
--tap-sys-color-content-on-brand | var(--tap-palette-white) | |
--tap-sys-color-content-on-accent | var(--tap-palette-white) | |
--tap-sys-color-content-on-negative | var(--tap-palette-white) | |
--tap-sys-color-content-on-warning | var(--tap-palette-black) | |
--tap-sys-color-content-on-postive | var(--tap-palette-white) |
border
| Token | Value | Preview |
|---|---|---|
--tap-sys-color-border-primary | var(--tap-palette-gray-200) | |
--tap-sys-color-border-inverse-primary | var(--tap-palette-gray-700) | |
--tap-sys-color-border-selected | var(--tap-palette-gray-700) | |
--tap-sys-color-border-focus | var(--tap-palette-gray-700) | |
--tap-sys-color-border-accent | var(--tap-palette-blue-200) | |
--tap-sys-color-border-negative | var(--tap-palette-red-200) | |
--tap-sys-color-border-postive | var(--tap-palette-green-200) | |
--tap-sys-color-border-warning | var(--tap-palette-yellow-200) |
brand
| Token | Value | Preview |
|---|---|---|
--tap-sys-color-brand | var(--tap-palette-orange-400) |
gradient
| Token | Value | Preview |
|---|---|---|
--tap-sys-color-gradient-brand | linear-gradient(91.39deg, #ff7733 0%, #ff5722 50.15%, #e64917 100%) |