Nuxeo Design Guidelines

Default Theme

Updated: May 10, 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 Gray 100
#161616
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

State 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
#003d99
disabled Disabled backgrounds;
Disabled border
Gray 20
#e0e0e0
visited link Visited links Purple 60
#5639d5

We'd love to hear your thoughts!

All fields required