+++ date = "2017-04-10T16:43:14+01:00" draft = false weight = 210 description = "The basic set of colors" title = "Colors" bref="Kube has a basic set of colors for text, links, buttons, states and gray palette. These colors help to create uniformity and harmony in the look of UI elements. All colors are carefully selected and combined with each other. Of course, you can change the color scheme to your choice in the framework settings." toc = true +++
Text
Contrasting black color for headings and less intense dark gray for the text helps to improve readability.
Headings
$color-headings
Text
$color-text
Links
Classic blue links and soft red for the hover state makes links visible and predictable.
Link
$color-link
Hover
$color-link-hover
Buttons
Blue color for primary buttons for greater consistency with links. Black color for secondary buttons allows you build a variety of UI.
Primary
$color-button-primary
Secondary
$color-button-secondary
States
All possible states of the UI are in the simple and intuitive color scheme helps to focus the user's attention when creating an interactive UI.
Error
$color-error
Focus
$color-focus
Success
$color-success
Warning
$color-warning
Extra
Special color to highlight areas of interaction with the interface. And the white color for all cases.
Highlight
$color-highlight
Inverted
$color-inverted
Grayscale
Harmonious and well-thought-out scheme of gray for a broad range of tasks in the designing of the interface from controls to backgrounds.
Black
$color-black
Darkgray
$color-darkgray
Midgray
$color-midgray
Gray
$color-gray
Lightgray
$color-lightgray
Silver
$color-silver
Aluminum
$color-aluminum