Colors

Skills Applied

Design | Research | UXUAT | Dev Alignment

Softwares Used

Figma | Sketch | Adobe XD | Invision | FigJam | Abstract

User/Consumer Base

B2B | E-Commerce | B2C

Industry Experience

Fashion | Retail | Financial | Travel | Insurance

Color Usage

Color palettes should be scalable and customizable – especially if working with multiple brands/teams. In this case, I’ll be showing you a brand agnostic design system that was built to be used by various brands within an organization. Naming structure for colors starts with the brand name followed by the color name.
Below is a breakdown of color principles, roles, and accessibility, All of which serve as a guide for color usage.

 

“A design system is a living, complete set of standards intended to manage design at scaleusing reusable components and patterns.”

– NNG

Accessibility

For this DS, I complied with the mid-range AA accessibility standard as a base requirement – AAA standards are always a welcome bonus. The tokens below indicate contrast ratio for swatches against a white background, where some colors may fail. However, these same colors could pass AA or AAA standards when used against a dark background, where the others may fail.

 

Color Palette

In addition to the brand-specific palette with primary, secondary and tertiary colors, I have built a consistent palette for assets such as form fields and notifications – these are not customizable. These colors are available to all brands for use as needed, mostly in accordance with thier previously defined roles.

Principles

Color communicates the hierarchy, state and purpose of content so users can navigate through content and differentiate between things like active elements – usually highlighted using accented colors – and inactive elements, which appear muted.

Color Roles

All colors play a role in the user interface. While there are many ways to categorize these roles, some key roles that generally remain consistent are Green for success and Red for errors. Muted shades of grey often define inactive states.