Color

Kube has a basic set of colors for text, links, and states. 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 #

Text

$color-text

Secondary

$color-text-secondary

Tertiary

$color-text-tertiary

Disabled

$color-text-disabled

Classic blue links and soft red for the hover state makes links visible and predictable.

Link

$color-link

Hover

$color-link-hover

State #

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

Accent #

Kube has a black, inverted color (white by default) and a couple of accents.

Black

$color-black

Accent

$color-accent

Highlight

$color-highlight

Inverted

$color-inverted