Colour — primitive
The raw ramp underneath the semantic names. Not for product code: a colour no semantic name covers is a missing semantic name, not a reason to reach for a ramp step.
156 tokens — 156 house.
| token | light | dark | verdict | resolves through |
|---|---|---|---|---|
--color-azure | #183dc3 | same | house | declared directly (tailwind-theme.css:146) |
--color-azure-100 | #e4e9fc | same | house | declared directly (tailwind-theme.css:147) |
--color-azure-200 | #8ebffb | same | house | declared directly (tailwind-theme.css:148) |
--color-azure-300 | #6986ec | same | house | declared directly (tailwind-theme.css:149) |
--color-azure-350d | #60a5fa | same | house | declared directly (tailwind-theme.css:150) |
--color-azure-400 | #4a6ae8 | same | house | declared directly (tailwind-theme.css:151) |
--color-azure-450d | #2563eb | same | house | declared directly (tailwind-theme.css:152) |
--color-azure-500 | #1b44da | same | house | declared directly (tailwind-theme.css:153) |
--color-azure-600 | #14329f | same | house | declared directly (tailwind-theme.css:154) |
--color-azure-700 | #102984 | same | house | declared directly (tailwind-theme.css:155) |
--color-azure-800 | #0b1b56 | same | house | declared directly (tailwind-theme.css:156) |
--color-azure-900 | #040b24 | same | house | declared directly (tailwind-theme.css:157) |
--color-azure-950 | #141414 | same | house | declared directly (tailwind-theme.css:158) |
--color-black | #000 | same | house | declared directly (tailwind-theme.css:40) |
--color-blue | #336abc | same | house | declared directly (tailwind-theme.css:135) |
--color-blue-100 | #eff3fa | same | house | declared directly (tailwind-theme.css:136) |
--color-blue-200 | #becfea | same | house | declared directly (tailwind-theme.css:137) |
--color-blue-300 | #91afdb | same | house | declared directly (tailwind-theme.css:138) |
--color-blue-400 | #608bcb | same | house | declared directly (tailwind-theme.css:139) |
--color-blue-500 | #336abc | same | house | declared directly (tailwind-theme.css:140) |
--color-blue-600 | #285393 | same | house | declared directly (tailwind-theme.css:141) |
--color-blue-700 | #1d3b69 | same | house | declared directly (tailwind-theme.css:142) |
--color-blue-800 | #112440 | same | house | declared directly (tailwind-theme.css:143) |
--color-blue-900 | #060d17 | same | house | declared directly (tailwind-theme.css:144) |
--color-brown | #9c5941 | same | house | declared directly (tailwind-theme.css:79) |
--color-brown-100 | #f7f2f0 | same | house | declared directly (tailwind-theme.css:80) |
--color-brown-200 | #dfcac2 | same | house | declared directly (tailwind-theme.css:81) |
--color-brown-300 | #caa598 | same | house | declared directly (tailwind-theme.css:82) |
--color-brown-400 | #b27e6b | same | house | declared directly (tailwind-theme.css:83) |
--color-brown-500 | #9c5941 | same | house | declared directly (tailwind-theme.css:84) |
--color-brown-600 | #7a4533 | same | house | declared directly (tailwind-theme.css:85) |
--color-brown-700 | #573224 | same | house | declared directly (tailwind-theme.css:86) |
--color-brown-800 | #351e16 | same | house | declared directly (tailwind-theme.css:87) |
--color-brown-900 | #130b08 | same | house | declared directly (tailwind-theme.css:88) |
--color-gray | #8896b3 | same | house | declared directly (tailwind-theme.css:43) |
--color-gray-100 | #f5f7f9 | same | house | declared directly (tailwind-theme.css:44) |
--color-gray-200 | #d9dde7 | same | house | declared directly (tailwind-theme.css:45) |
--color-gray-300 | #bfc6d6 | same | house | declared directly (tailwind-theme.css:46) |
--color-gray-400 | #a2adc4 | same | house | declared directly (tailwind-theme.css:47) |
--color-gray-500 | #8896b3 | same | house | declared directly (tailwind-theme.css:48) |
--color-gray-550 | #7a86a6 | same | house | declared directly (tailwind-theme.css:49) |
--color-gray-600 | #67789d | same | house | declared directly (tailwind-theme.css:50) |
--color-gray-700 | #415377 | same | house | declared directly (tailwind-theme.css:51) |
--color-gray-800 | #203053 | same | house | declared directly (tailwind-theme.css:52) |
--color-gray-900 | #0a1530 | same | house | declared directly (tailwind-theme.css:53) |
--color-green | #29a575 | same | house | declared directly (tailwind-theme.css:171) |
--color-green-100 | #eef8f4 | same | house | declared directly (tailwind-theme.css:172) |
--color-green-200 | #bbe2d3 | same | house | declared directly (tailwind-theme.css:173) |
--color-green-300 | #8ccfb5 | same | house | declared directly (tailwind-theme.css:174) |
--color-green-400 | #58b993 | same | house | declared directly (tailwind-theme.css:175) |
--color-green-400d | #4ade80 | same | house | declared directly (tailwind-theme.css:176) |
--color-green-500 | #29a575 | same | house | declared directly (tailwind-theme.css:177) |
--color-green-600 | #20815b | same | house | declared directly (tailwind-theme.css:178) |
--color-green-700 | #175c41 | same | house | declared directly (tailwind-theme.css:179) |
--color-green-800 | #0e3828 | same | house | declared directly (tailwind-theme.css:180) |
--color-green-900 | #05140e | same | house | declared directly (tailwind-theme.css:181) |
--color-green-950 | #14261e | same | house | declared directly (tailwind-theme.css:182) |
--color-hot-pink | #ef51c0 | same | house | declared directly (tailwind-theme.css:113) |
--color-hot-pink-100 | #fdf2fa | same | house | declared directly (tailwind-theme.css:114) |
--color-hot-pink-200 | #f9d6ef | same | house | declared directly (tailwind-theme.css:115) |
--color-hot-pink-300 | #f6b1e1 | same | house | declared directly (tailwind-theme.css:116) |
--color-hot-pink-400 | #eb82cc | same | house | declared directly (tailwind-theme.css:117) |
--color-hot-pink-500 | #ef51c0 | same | house | declared directly (tailwind-theme.css:118) |
--color-hot-pink-600 | #b82e8e | same | house | declared directly (tailwind-theme.css:119) |
--color-hot-pink-700 | #832165 | same | house | declared directly (tailwind-theme.css:120) |
--color-hot-pink-800 | #581644 | same | house | declared directly (tailwind-theme.css:121) |
--color-hot-pink-900 | #1f0818 | same | house | declared directly (tailwind-theme.css:122) |
--color-neutral | #8b8b8b | same | house | declared directly (tailwind-theme.css:184) |
--color-neutral-100 | #f5f5f5 | same | house | declared directly (tailwind-theme.css:185) |
--color-neutral-200 | #e5e5e5 | same | house | declared directly (tailwind-theme.css:186) |
--color-neutral-300 | #d4d4d4 | same | house | declared directly (tailwind-theme.css:187) |
--color-neutral-400 | #a3a3a3 | same | house | declared directly (tailwind-theme.css:188) |
--color-neutral-500 | #8b8b8b | same | house | declared directly (tailwind-theme.css:189) |
--color-neutral-550 | #737373 | same | house | declared directly (tailwind-theme.css:190) |
--color-neutral-600 | #525252 | same | house | declared directly (tailwind-theme.css:191) |
--color-neutral-700 | #3f3f3f | same | house | declared directly (tailwind-theme.css:192) |
--color-neutral-750 | #383838 | same | house | declared directly (tailwind-theme.css:193) |
--color-neutral-800 | #2a2a2a | same | house | declared directly (tailwind-theme.css:194) |
--color-neutral-825 | #252525 | same | house | declared directly (tailwind-theme.css:195) |
--color-neutral-850 | #1e1e1e | same | house | declared directly (tailwind-theme.css:196) |
--color-neutral-900 | #1a1a1a | same | house | declared directly (tailwind-theme.css:197) |
--color-neutral-950 | #141414 | same | house | declared directly (tailwind-theme.css:198) |
--color-orange | #e05729 | same | house | declared directly (tailwind-theme.css:68) |
--color-orange-100 | #fdf2ee | same | house | declared directly (tailwind-theme.css:69) |
--color-orange-200 | #f5c9bb | same | house | declared directly (tailwind-theme.css:70) |
--color-orange-300 | #eea48c | same | house | declared directly (tailwind-theme.css:71) |
--color-orange-400 | #e77c58 | same | house | declared directly (tailwind-theme.css:72) |
--color-orange-500 | #e05729 | same | house | declared directly (tailwind-theme.css:73) |
--color-orange-600 | #af4420 | same | house | declared directly (tailwind-theme.css:74) |
--color-orange-700 | #7d3117 | same | house | declared directly (tailwind-theme.css:75) |
--color-orange-800 | #4c1e0e | same | house | declared directly (tailwind-theme.css:76) |
--color-orange-900 | #1b0a05 | same | house | declared directly (tailwind-theme.css:77) |
--color-pink | #e65f8c | same | house | declared directly (tailwind-theme.css:102) |
--color-pink-100 | #fdf2f6 | same | house | declared directly (tailwind-theme.css:103) |
--color-pink-200 | #f7ccda | same | house | declared directly (tailwind-theme.css:104) |
--color-pink-300 | #f2a9c1 | same | house | declared directly (tailwind-theme.css:105) |
--color-pink-400 | #eb82a5 | same | house | declared directly (tailwind-theme.css:106) |
--color-pink-500 | #e65f8c | same | house | declared directly (tailwind-theme.css:107) |
--color-pink-600 | #b34a6d | same | house | declared directly (tailwind-theme.css:108) |
--color-pink-700 | #81354e | same | house | declared directly (tailwind-theme.css:109) |
--color-pink-800 | #4e2030 | same | house | declared directly (tailwind-theme.css:110) |
--color-pink-900 | #1c0b11 | same | house | declared directly (tailwind-theme.css:111) |
--color-purple | #8537ad | same | house | declared directly (tailwind-theme.css:124) |
--color-purple-100 | #f5eff8 | same | house | declared directly (tailwind-theme.css:125) |
--color-purple-200 | #d8bfe5 | same | house | declared directly (tailwind-theme.css:126) |
--color-purple-300 | #c084fc | same | house | declared directly (tailwind-theme.css:127) |
--color-purple-400 | #a063bf | same | house | declared directly (tailwind-theme.css:128) |
--color-purple-500 | #8537ad | same | house | declared directly (tailwind-theme.css:129) |
--color-purple-600 | #682b87 | same | house | declared directly (tailwind-theme.css:130) |
--color-purple-700 | #4a1f61 | same | house | declared directly (tailwind-theme.css:131) |
--color-purple-800 | #2d133b | same | house | declared directly (tailwind-theme.css:132) |
--color-purple-900 | #100715 | same | house | declared directly (tailwind-theme.css:133) |
--color-red | #c8223d | same | house | declared directly (tailwind-theme.css:90) |
--color-red-100 | #fbedef | same | house | declared directly (tailwind-theme.css:91) |
--color-red-200 | #edb8c1 | same | house | declared directly (tailwind-theme.css:92) |
--color-red-300 | #e18896 | same | house | declared directly (tailwind-theme.css:93) |
--color-red-400 | #d45368 | same | house | declared directly (tailwind-theme.css:94) |
--color-red-400d | #f87171 | same | house | declared directly (tailwind-theme.css:95) |
--color-red-500 | #c8223d | same | house | declared directly (tailwind-theme.css:96) |
--color-red-600 | #9c1b30 | same | house | declared directly (tailwind-theme.css:97) |
--color-red-700 | #701322 | same | house | declared directly (tailwind-theme.css:98) |
--color-red-800 | #440c15 | same | house | declared directly (tailwind-theme.css:99) |
--color-red-900 | #180407 | same | house | declared directly (tailwind-theme.css:100) |
--color-teal | #1e9393 | same | house | declared directly (tailwind-theme.css:160) |
--color-teal-100 | #edf6f6 | same | house | declared directly (tailwind-theme.css:161) |
--color-teal-200 | #b7dcdc | same | house | declared directly (tailwind-theme.css:162) |
--color-teal-300 | #86c5c5 | same | house | declared directly (tailwind-theme.css:163) |
--color-teal-400 | #50abab | same | house | declared directly (tailwind-theme.css:164) |
--color-teal-500 | #1e9393 | same | house | declared directly (tailwind-theme.css:165) |
--color-teal-600 | #177373 | same | house | declared directly (tailwind-theme.css:166) |
--color-teal-700 | #115252 | same | house | declared directly (tailwind-theme.css:167) |
--color-teal-800 | #0a3232 | same | house | declared directly (tailwind-theme.css:168) |
--color-teal-900 | #041212 | same | house | declared directly (tailwind-theme.css:169) |
--color-transparent | rgba(255, 255, 255, 0) | same | house | declared directly (tailwind-theme.css:41) |
--color-white | #ffffff | same | house | declared directly (tailwind-theme.css:30) |
--color-white-100 | rgba(255, 255, 255, 0.1) | same | house | declared directly (tailwind-theme.css:31) |
--color-white-200 | rgba(255, 255, 255, 0.2) | same | house | declared directly (tailwind-theme.css:32) |
--color-white-300 | rgba(255, 255, 255, 0.3) | same | house | declared directly (tailwind-theme.css:33) |
--color-white-400 | rgba(255, 255, 255, 0.4) | same | house | declared directly (tailwind-theme.css:34) |
--color-white-500 | rgba(255, 255, 255, 0.5) | same | house | declared directly (tailwind-theme.css:35) |
--color-white-600 | rgba(255, 255, 255, 0.6) | same | house | declared directly (tailwind-theme.css:36) |
--color-white-700 | rgba(255, 255, 255, 0.7) | same | house | declared directly (tailwind-theme.css:37) |
--color-white-800 | rgba(255, 255, 255, 0.8) | same | house | declared directly (tailwind-theme.css:38) |
--color-white-900 | rgba(255, 255, 255, 0.9) | same | house | declared directly (tailwind-theme.css:39) |
--color-yellow | #ec9c24 | same | house | declared directly (tailwind-theme.css:55) |
--color-yellow-100 | #fdf7ed | same | house | declared directly (tailwind-theme.css:56) |
--color-yellow-200 | #f9dfb9 | same | house | declared directly (tailwind-theme.css:57) |
--color-yellow-300 | #f5ca89 | same | house | declared directly (tailwind-theme.css:58) |
--color-yellow-400 | #f0b254 | same | house | declared directly (tailwind-theme.css:59) |
--color-yellow-400d | #fbbf24 | same | house | declared directly (tailwind-theme.css:60) |
--color-yellow-500 | #ec9c24 | same | house | declared directly (tailwind-theme.css:61) |
--color-yellow-600 | #b87a1c | same | house | declared directly (tailwind-theme.css:62) |
--color-yellow-700 | #845714 | same | house | declared directly (tailwind-theme.css:63) |
--color-yellow-800 | #50350c | same | house | declared directly (tailwind-theme.css:64) |
--color-yellow-900 | #1c1304 | same | house | declared directly (tailwind-theme.css:65) |
--color-yellow-950 | #1f1b10 | same | house | declared directly (tailwind-theme.css:66) |