Nuxeo Design Guidelines

Dark Theme

Updated: June 28, 2021

These guidelines showcase what can be done with Nuxeo Web UI and Nuxeo Element, but don’t reflect their current state out of the box.

Section Role Value
ui-background Main page background Gray 90
#262626
ui-background Container background Gray 100
#161616
ui-background Background overlay Gray [email protected] 70%
#161616
ui-background Sidebar background Black
#000000
ui-background Drawer background Gray 100
#161616
ui-border Light contrast border Gray 80
#393939
ui-border Medium contrast border Gray 60
#6f6f6f
ui-border High contrast border Gray 10
#f4f4f4
button Primary button background Blue 60
#0066ff
button Text buttons;
Links;
Active elements
Blue 40
#66a3ff
button Secondary button border Blue 60
#0066ff
text Primary text;
Body copy;
Headers
Gray 10
#f4f4f4
text Secondary text;
Input labels
Gray 30
#c6c6c6
text Placeholder text Gray 60
#6f6f6f
text Text on interactive colors Black
#000000
text Helper text Gray 50
#8d8d8d
text Disabled text;
Disabled label;
Disabled icons
Gray 70
#525252
text Error messages Red 50
#fa4d56
icon Primary icons Gray 10
#f4f4f4
icon Secondary icons Gray 30
#c6c6c6
icon Icons on interactive colors White
#ffffff
status Error Red 50
#fa4d56
status Success Green 40
#42be65
status Warning Yellow
#f1c21b
status Information Blue 40
#66a3ff

State

Section Role Value
focus Focus border;
Focus underline
White
#ffffff
hover Primary and secondary buttons background hover Blue 70
#0052cc
hover Interactive hover Blue 30
#99c2ff
ui-hover Hover on Gray 100 background;
Transparent background hover
Gray 80
#393939
active Primary and secondary buttons background active Blue 80
#003d99
active Interactive active Blue 20
#cce0ff
disabled Disabled backgrounds;
Disabled border
Gray 80
#393939
visited link Visited links Purple 40
#be95ff

We'd love to hear your thoughts!

All fields required