Tory Hobson; Product Designer

Color System

 
 

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.

  • Toolbars

  • Anchors/Links

  • Unspecified Buttons

 
 

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.

  • Progress bars/indicators

  • 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

  • Interstitial buttons