Colors

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..

Text

Contrasting black color for headings and less intense dark gray for the text helps to improve readability.

Headings

$color-headings

Text

$color-text

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