-
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
Icon
Tokens are semantically named. See below for icon examples.
| Kitt Token | Usage | Tailwind name | Hex | Color | Icon | Contrast Ratio | Accessible |
|---|---|---|---|---|---|---|---|
kt-fill-inverted |
Relay icon | white | #ffffff | N/A | N/A | ||
kt-fill-default |
default | gray-500 | #6b7280 | 4.83:1 | AAA | ||
kt-fill-action |
actionable items | sky-800 | #075895 | 7.40:1 | AAA |