It is great to see those improvements coming!
I've seen on the page proposal that there are 4 levels for messages: notice, low, medium, severe. Those 4 levels are commonly used on all wikis I've visited, except for the smaller ones. You already have something unified. You should go with CSS classes: mw-ambox-importance-[importance] to get the level of importance and mw-ambox-message to know where is the message you have to display on mobile. Colors can be override locally if necessary, with an impat on the mobile version.
Have a common CSS library would help a lot for other navigation templates, like disambiguations, Main template, etc. Communities can then implement them quickly.