Nuxeo Design Guidelines

Color

Updated: May 10, 2021

Colors Anatomy

The core Blue family serves as the primary action, guiding users on their journey.

Blue Family

Neutral grays provide a backdrop of light and dark themes.

Gray Family

Extended colors are used sparingly for emphasis, impact, and functional alerts.

Extended Family

Accessibility

The color families in our palette contain ten values from 10 to 100. White and Black sit outside those values. Black text is WCAG AA accessible on colors ranging from 10 to 50. White text is accessible on colors from 60 to 100.

Interaction States

Hover

The hover state is one full step lighter for values between 100 and 70, and one full step darker for values between 60 and 10. For example, the Blue 60 hover state is Blue 70. The exception is that White shares the same hover state as Gray 10, and Black shares the same hover state as Gray 100.

Active

The active state is two full steps lighter for values between 100 and 70, and two full steps darker for values between 60 and 10. For example, the Blue 60 active state is Blue 80. The exception is that White shares the same active state as Gray 10, and Black shares the same active state as Gray 100.

Focus

The focus state usually appears as a Blue 60 border in the light theme and as a White border in the dark theme.

Disabled

Disabled components are unavailable for interaction, so they don’t receive hover or focus and are not subject to WC3 contrast compliance standards. For the dark themes, disabled values are two full steps lighter than their respective background. For light themes, they are two full steps darker. The exception is that the White theme disabled value is Gray 30.

Color Palettes

Blue and Gray

Blue Gray
Blue 100 #001433 #001433 Gray 100 #161616 #161616
Blue 90 #002255 #002255 Gray 90 #262626 #262626
Blue 80 #003D99 #003D99 Gray 80 #393939 #393939
Blue 70 #0052CC #0052CC Gray 70 #525252 #525252
Blue 60 #0066ff #0066ff Gray 60 #6F6F6F #6F6F6F
Blue 50 #448FFF #448FFF Gray 50 #8D8D8D #8D8D8D
Blue 40 #66A3FF #66A3FF Gray 40 #A8A8A8 #A8A8A8
Blue 30 #99C2FF #99C2FF Gray 30 #C6C6C6 #C6C6C6
Blue 20 #CCE0FF #CCE0FF Gray 20 #E0E0E0 #E0E0E0
Blue 10 #EEF5FF #EEF5FF Gray 10 #F4F4F4 #F4F4F4

Red and Green

Red Green
Red 100 #2D0709 #2D0709 Green 100 #071908 #071908
Red 90 #520408 #520408 Green 90 #022D0D #022D0D
Red 80 #750E13 #750E13 Green 80 #044317 #044317
Red 70 #A2191F #A2191F Green 70 #0E6027 #0E6027
Red 60 #DA1E28 #DA1E28 Green 60 #198038 #198038
Red 50 #FA4D56 #FA4D56 Green 50 #24A148 #24A148
Red 40 #FF8389 #FF8389 Green 40 #42BE65 #42BE65
Red 30 #FFB3B8 #FFB3B8 Green 30 #6FDC8C #6FDC8C
Red 20 #FFD7D9 #FFD7D9 Green 20 #A7F0BA #A7F0BA
Red 10 #FFF1F1 #FFF1F1 Green 10 #DEFBE6 #DEFBE6

Purple and Others

Purple Others
Purple 100 #1B0F30 #1B0F30 Yellow #F1C21B #F1C21B
Purple 90 #520408 #520408 Black #000000 #000000
Purple 80 #750E13 #750E13 White #ffffff #ffffff
Purple 70 #A2191F #A2191F
Purple 60 #DA1E28 #DA1E28
Purple 50 #FA4D56 #FA4D56
Purple 40 #FF8389 #FF8389
Purple 30 #FFB3B8 #FFB3B8
Purple 20 #E8DAFF #E8DAFF
Purple 10 #F6F2FF #F6F2FF  

We'd love to hear your thoughts!

All fields required