1. Text
  2. Links
  3. Buttons
  4. States
  5. Extra
  6. Grayscale

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