our themes
Colors
Color is a key resource for Kubit. Red is undoubtly our main asset but as it is such a powerful and hued color, we must constraint its usage to highlight some data or to depict brand elements.
Brand colors
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_brand_font_50 | Hex:#DF2B51 | |
Color name: color_brand_icon_50 | Hex:#DF2B51 | |
Color name: color_brand_border_50 | Hex:#DF2B51 | |
Color name: color_brand_bg_50 | Hex:#DF2B51 | |
Color name: color_brand_border_100 | Hex:#050505 | |
Color name: color_brand_font_100 | Hex:#050505 |
Secondary colors
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_secondary_font_50 | Hex:#000000 | |
Color name: color_secondary_font_100 | Hex:#DF2B51 | |
Color name: color_secondary_font_150 | Hex:#FFC8D3 | |
Color name: color_secondary_icon_50 | Hex:#000000 | |
Color name: color_secondary_icon_100 | Hex:#DF2B51 | |
Color name: color_secondary_icon_150 | Hex:#FFC8D3 | |
Color name: color_secondary_border_50 | Hex:#000000 | |
Color name: color_secondary_border_100 | Hex:#DF2B51 | |
Color name: color_secondary_border_150 | Hex:#FFC8D3 | |
Color name: color_secondary_bg_50 | Hex:#000000 | |
Color name: color_secondary_bg_100 | Hex:#DF2B51 | |
Color name: color_secondary_bg_150 | Hex:#FFC8D3 | |
Color name: color_secondary_bg_200 | Hex:#FFEFF2 |
Neutral colors
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_neutral_font_50 | Hex:#1A1A1A | |
Color name: color_neutral_font_100 | Hex:#4F4F4F | |
Color name: color_neutral_font_150 | Hex:#767676 | |
Color name: color_neutral_font_200 | Hex:#D1D1D1 | |
Color name: color_neutral_font_250 | Hex:#FFFFFF | |
Color name: color_neutral_icon_50 | Hex:#1A1A1A | |
Color name: color_neutral_icon_100 | Hex:#4F4F4F | |
Color name: color_neutral_icon_150 | Hex:#767676 | |
Color name: color_neutral_icon_200 | Hex:#D1D1D1 | |
Color name: color_neutral_icon_250 | Hex:#FFFFFF | |
Color name: color_neutral_border_50 | Hex:#1A1A1A | |
Color name: color_neutral_border_100 | Hex:#4F4F4F | |
Color name: color_neutral_border_150 | Hex:#767676 | |
Color name: color_neutral_border_200 | Hex:#D1D1D1 | |
Color name: color_neutral_border_250 | Hex:#FFFFFF | |
Color name: color_neutral_bg_50 | Hex:#1A1A1A | |
Color name: color_neutral_bg_100 | Hex:#4F4F4F | |
Color name: color_neutral_bg_150 | Hex:#767676 | |
Color name: color_neutral_bg_200 | Hex:#F4F4F4 | |
Color name: color_neutral_bg_250 | Hex:#FFFFFF |
Accent colors
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_accent_default_font_50 | Hex:#000000 | |
Color name: color_accent_default_font_100 | Hex:#DF2B51 | |
Color name: color_accent_default_font_150 | Hex:#FFFFFF | |
Color name: color_accent_default_icon_50 | Hex:#000000 | |
Color name: color_accent_default_icon_100 | Hex:#DF2B51 | |
Color name: color_accent_default_icon_150 | Hex:#FFFFFF | |
Color name: color_accent_default_border_50 | Hex:#000000 | |
Color name: color_accent_default_border_100 | Hex:#DF2B51 | |
Color name: color_accent_default_border_150 | Hex:#FFFFFF | |
Color name: color_accent_default_bg_50 | Hex:#000000 | |
Color name: color_accent_default_bg_100 | Hex:#DF2B51 | |
Color name: color_accent_default_bg_150 | Hex:#FFFFFF | |
Color name: color_accent_hover_font_200 | Hex:#000000 | |
Color name: color_accent_hover_icon_150 | Hex:#696969 | |
Color name: color_accent_hover_icon_200 | Hex:#000000 | |
Color name: color_accent_hover_bg_50 | Hex:#E44B66 | |
Color name: color_accent_hover_bg_100 | Hex:#F6F6F6 | |
Color name: color_accent_hover_bg_150 | Hex:#696969 | |
Color name: color_accent_pressed_font_200 | Hex:#000000 | |
Color name: color_accent_pressed_font_250 | Hex:#FFFFFF | |
Color name: color_accent_pressed_icon_200 | Hex:#000000 | |
Color name: color_accent_pressed_icon_250 | Hex:#FFFFFF | |
Color name: color_accent_pressed_bg_50 | Hex:#A01D39 | |
Color name: color_accent_pressed_bg_150 | Hex:#4F4F4F |
Pressed
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_accent_pressed_font_50 | Hex:#A01D39 | |
Color name: color_accent_pressed_font_100 | Hex:#F4F4F4 | |
Color name: color_accent_pressed_font_150 | Hex:#4F4F4F | |
Color name: color_accent_pressed_bg_50 | Hex:#A01D39 | |
Color name: color_accent_pressed_bg_100 | Hex:#F4F4F4 | |
Color name: color_accent_pressed_bg_200 | Hex:#767676 | |
Color name: color_accent_pressed_icon_50 | Hex:#A01D39 | |
Color name: color_accent_pressed_icon_100 | Hex:#F4F4F4 | |
Color name: color_accent_pressed_icon_150 | Hex:#4F4F4F | |
Color name: color_accent_pressed_icon_250 | Hex:#FFFFFF | |
Color name: color_accent_pressed_border_50 | Hex:#A01D39 |
Keyboard Focus
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_accentKeyboardFocus_border_50 | Hex:#2360C5 | |
Color name: color_accentKeyboardFocus_border_100 | Hex:#FFFFFF |
Disabled
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_accentDisabled_font_50 | Hex:#444444 | |
Color name: color_accentDisabled_font_100 | Hex:#AAAAAA | |
Color name: color_accentDisabled_font_150 | Hex:#E6E6E6 | |
Color name: color_accentDisabled_icon_50 | Hex:#444444 | |
Color name: color_accentDisabled_icon_100 | Hex:#AAAAAA | |
Color name: color_accentDisabled_icon_150 | Hex:#E6E6E6 | |
Color name: color_accentDisabled_border_50 | Hex:#444444 | |
Color name: color_accentDisabled_border_100 | Hex:#AAAAAA | |
Color name: color_accentDisabled_border_150 | Hex:#E6E6E6 | |
Color name: color_accentDisabled_bg_50 | Hex:#444444 | |
Color name: color_accentDisabled_bg_100 | Hex:#AAAAAA | |
Color name: color_accentDisabled_bg_150 | Hex:#E6E6E6 |
Feedback colors
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_feedbackError_font_50 | Hex:#CC0000 | |
Color name: color_feedbackSuccess_font_50 | Hex:#008035 | |
Color name: color_feedbackInfo_icon_50 | Hex:#00A4A4 | |
Color name: color_feedback_warning_icon_50 | Hex:#856300 | |
Color name: color_feedback_success_icon_50 | Hex:#5CA40A | |
Color name: color_feedbackSuccess_icon_100 | Hex:#008035 | |
Color name: color_feedback_error_icon_50 | Hex:#FF003C | |
Color name: color_feedbackError_icon_100 | Hex:#CC0000 | |
Color name: color_feedback_info_border_50 | Hex:#00A4A4 | |
Color name: color_feedbackInfo_border_100 | Hex:#23779A | |
Color name: color_feedback_warning_border_50 | Hex:#FFC000 | |
Color name: color_feedbackWarning_border_100 | Hex:#856300 | |
Color name: color_feedback_success_border_50 | Hex:#5CA40A | |
Color name: color_feedbackSuccess_border_100 | Hex:#008035 | |
Color name: color_feedback_error_border_50 | Hex:#FF003C | |
Color name: color_feedbackError_border_100 | Hex:#CC0000 | |
Color name: color_feedback_info_bg_50 | Hex:#E6F6F6 | |
Color name: color_feedback_info_bg_100 | Hex:#00A4A4 | |
Color name: color_feedback_info_bg_150 | Hex:#23779A | |
Color name: color_feedback_warning_bg_50 | Hex:#FFF9E6 | |
Color name: color_feedback_warning_bg_100 | Hex:#FFC000 | |
Color name: color_feedback_warning_bg_150 | Hex:#856300 | |
Color name: color_feedback_success_bg_50 | Hex:#EFF7E7 | |
Color name: color_feedback_success_bg_100 | Hex:#5CA40A | |
Color name: color_feedback_success_bg_150 | Hex:#008035 | |
Color name: color_feedback_error_bg_50 | Hex:#FFE6EC | |
Color name: color_feedback_error_bg_100 | Hex:#FF003C | |
Color name: color_feedbackError_bg_150 | Hex:#CC0000 |
Hover
| Color | Color name | Color Hexadecimal |
|---|---|---|
Color name: color_accent_hover_bg_50 | Hex:#E44B66 |