Nuxeo Design Guidelines

Dark Theme

Updated: May 10, 2021

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