Schemes & Themes
Developing a color system that works across multiple brands
Netspend partners with companies such as PayPal, Western Union, and Brinks to deliver a prepaid credit card solution for their customers. I'm responsible for making sure each of the partners' online account center is branded correctly based on their style guide.
In order to do this smoothly a lot of thought beforehand was needed to make sure our system worked well to make sure the colors map correctly to each brand.
The default color is the brand's primary color. It's the color that most prominent UI elements, like the name applies, default to. If a brand has multiple equally-weighted primary colors, they can pass a gradient, and/or pattern, across the app's global toolbar, the present-most element in the servicing application.
The accent color is the brand's defined secondary color or any brand color that contrasts or compliments best or well against the default color, while avoiding interference with the overall harmony of the color system.
Active tab cue
Often in logos and patterns
Unspecified floating action buttons
The positive color is used to associate and enforce positive, creative actions - actions related to money, movement, addition, cash back, progress, continuation, and success.
Selected checkboxes/radio buttons
Continue buttons in multi-step workflows
The negative color is used to associate and enforce negative actions and sometimes to establish a sense of urgency; it's used on elements that finalize permanent deletion or destruction, subtraction, and to indicate unacceptable input and failure.
Cues on inputs that fail validation
Urgent messages, such as card/fraud detection
The special color is a color reserved for, like the name implies, special instances. Like the accent color, it contrasts well against the default color, but is reserved for states like exclusive offers and introductions to new features.
Notification count cue
Navigation item cues