Skip to content

Colors

Visual hierarchy and differentiation. We prioritize Create and Edit content as main functions in our CMS with orange color. Because most of the application has soft colors, color stands out and catches user's attention. We also define secondary, neutral and negative colors. Despite of this, it is also important to remind to not always rely on color to provide visual differentiation. If too many colors are employed, colors might lose their meaning.

Primary colors

#f15a10

ez-color-primary

#0f6d95

ez-color-secondary

ez-color-hyperlink

#00825c

ez-color-positive

#f7d000

ez-color-warning

#d92d42

ez-color-danger

#fff

ez-white

#333

ez-black

Ground Base colors

#fafafa

ez-ground-base-pale

#f5f5f5

ez-ground-base-light

#f3f3f3

ez-ground-base

#ededed

ez-ground-base-medium

#e5e3e3

ez-ground-base-dark

#dbdbdb

ez-color-base-pale

#878787

ez-color-base-light

#646464

ez-color-base-medium

#555

ez-color-base-dark

Ground Secondary colors

#e1f5ff

ez-secondary-gound-pale

#a8c8d5

ez-ground-primary

#2b84b1

ez-secondary-ground

#0a5574

ez-secondary-ground-dark

#565e63

ez-ground-primary-inverted

#445a64

ez-ground-primary-inverted-light

Interaction colors

#fceaec

ez-color-warning-pale

#aa0000

ez-color-warning-dark

#65b6f0

ez-alloyeditor-color-hover

Note

Hover states are based on SASS color functions. We are applying a 15% dark on the defined color variable.

1
$ez-color-hyperlink-hover: darken($ez-color-hyperlink, 15%);
Hover color variables using this approach are the ones related to interaction buttons or links:
1
2
3
4
5
$ez-color-primary-hover: darken($ez-color-primary, 15%);
$ez-color-secondary-hover: darken($ez-color-secondary, 15%);
$ez-color-hyperlink-hover: darken($ez-color-hyperlink, 15%);
$ez-color-danger-hover: darken($ez-color-danger, 15%);
$ez-color-base-medium-hover: darken($ez-color-base-medium, 15%);

Read the Docs