KITT

Text

Tokens are semantically named. See below for text examples.

Kitt Token Usage Tailwind name Hex Color Contrast Ratio Accessible
kt-text-default headings, main text gray-900 #111827 17.74:1 AAA
kt-text-label sub-headings, labels gray-700 #374151 10.31:1 AAA
kt-text-disabled disabled items gray-500 #6b7280 4.83:1 AA
kt-text-placeholder placeholder for forms gray-500 #6b7280 4.83:1 AA
kt-text-action links, clickable text sky-800 #075985 7.56:1 AAA
kt-text-hovered

link hover state

not suitable for small text

 sky-600 #0284c7 4.10:1 AA (large text)
kt-text-inverted

action button text

UI element text

 white #ffffff N/A N/A