Refactoring UI

Building Your Color Palette

1. Greys: text, backgrounds, panels, forms
2. Primary: navigation elements
3. Accents: borders, icons, illustrations
   • accent: eye-grabbing color to highlight a new feature
   • danger: confirm a destructive action
   • warning: a wargning message
   • success: highlight a positive trend

grey: grey100 grey200 grey300 grey400 grey500 grey600 grey700 grey800 grey900

primary: primary100 primary200 primary300 primary400 primary500 primary600 primary700 primary800 primary900

accent: accent100 accent200 accent300 accent400 accent500 accent600 accent700 accent800 accent900

danger: danger100 danger200 danger300 danger400 danger500 danger600 danger700 danger800 danger900

warning: warning100 warning200 warning300 warning400 warning500 warning600 warning700 warning800 warning900

success: success100 success200 success300 success400 success500 success600 success700 success800 success900