-
Welcome
Welcome
-
Designers
Get Started Designers
-
Developers
Get Started Developers
-
Button
Elements Button
-
Chip
Elements Chip
-
Error
Elements Error
-
Event
Elements Event
-
Label
Elements Label
-
Loading Spinner
Elements Loading Spinner
-
Pill
Elements Pill
-
Toast
Elements Toast
-
Tooltip
Elements Tooltip
-
Checkbox
Forms Checkbox
-
Date
Forms Date
-
Email
Forms Email
-
Input Group
Forms Input Group
-
Number
Forms Number
-
Radio
Forms Radio
-
Search Select
Forms Search Select
-
Select
Forms Select
-
Telephone
Forms Telephone
-
Text
Forms Text
-
Textarea
Forms Textarea
-
Time
Forms Time
-
Typeahead
Forms Typeahead
-
Accessibility
Principles Accessibility
-
Semantic Naming
Principles Semantic Naming
-
Style Guide Writeup
Principles Style Guide Writeup
-
Background
Colors Background
-
Colors
Colors Colors
-
Icon
Colors Icon
-
Text
Colors Text
Background
Tokens are semantically named. See below for background examples.
These colors are not suitable for foreground elements.
| Kitt Token | Usage | Tailwind name | Hex | Color | Contrast Ratio | Accessible |
|---|---|---|---|---|---|---|
kt-bg-default |
default | white | #ffffff | N/A | FAIL | |
kt-bg-selected |
selected items | sky-100 | #e0f2fe | 1.15:1 | FAIL | |
kt-bg-hovered |
hovered items | gray-200 | #6b7280 | 1.24:1 | FAIL |