Nuxeo Design Guidelines

Light Theme

Updated: June 28, 2021

Section Role Value
ui-background Main page background Gray 10
#f4f4f4
ui-background Container background White
#fffff
ui-background Background overlay Gray 100 @ 50% opacity
#161616
ui-background Sidebar background White
#fffff
ui-background Drawer White
#fffff
ui-border Light contrast border Gray 20
#e0e0e0
ui-border Medium contrast border Gray 50
#8d8d8d
ui-border High contrast border Gray 100
#161616
button Primary interactive color;
Primary buttons;
Text buttons;
Active elements
Blue 60
#0066ff
button Secondary button border Blue 60
#0066ff
text Primary text;
Body copy;
Headers
Gray 100
#161616
text Secondary text;
Input labels
Gray 70
#525252
text Placeholder text Gray 40
#a8a8a8
text Text on interactive colors White
#fffff
text Helper text Gray 60
#6f6f6f
text Disabled text;
Disabled label;
Disabled icons
Gray 30
#c6c6c6
text Error messages Red 60
#da1e28
icon Primary icons Gray 100
#161616
icon Secondary icons Gray 70
#525252
icon Icons on interactive colors White
#fffff
status Error Red 60
#da1e28
status Success Green 50
#24a148
status Warning Yellow
#f1c21b
status Information Blue 60
#0066ff

State

Section Role Value
focus Focus border;
Focus underline
Blue 60
#0066ff
hover Interactive hover Blue 70
#0052cc
ui-hover Hover on white background;
Transparent background hover
Gray 20
#e0e0e0
active Interactive active Blue 80
#001bb4
disabled Disabled backgrounds;
Disabled border
Gray 20
#e0e0e0
visited link Visited links Purple 60
#8a3ffc