Establishing an initial color framework
Establishing an initial color framework
PharmaCo's Analytic Engine lacked a consistent design and brand identity. As the senior designer, I created an initial color palette framework with examples on how to use the palettes. This is the start of the foundation for the broader design system to improve tool adoption, user experience, and make data easier to understand.
To gather more knowledge on how to start building the foundations of the design system, I talked with experts in design systems, data visualization, and accessibility to build a framework. I established three palettes: "Brand," "Neutral," and "Semantic (Functional)," each serving a specific role.
PharmaCo's Analytic Engine lacked a consistent design and brand identity. As the senior designer, I created an initial color palette framework with examples on how to use the palettes. This is the start of the foundation for the broader design system to improve tool adoption, user experience, and make data easier to understand.
To gather more knowledge on how to start building the foundations of the design system, I talked with experts in design systems, data visualization, and accessibility to build a framework. I established three palettes: "Brand," "Neutral," and "Semantic (Functional)," each serving a specific role.
Brand colors used for brand communication materials & product UI
Brand colors used for brand communication materials & product UI
To start, I defined three main brand colors for the "Analytic Engine":
Primary for general use
Accent to highlight actions and key info
Neutral for text and backgrounds
I established a color* scale with 10 shades, varying in contrast and aesthetic needs within the Analytical Engine. First, I identified a main color and then filled the remaining color values between lightness of 99 and 10.
*Original colors are changed due to client confidentiality
To start, I defined three main brand colors for the "Analytic Engine":
Primary for general use
Accent to highlight actions and key info
Neutral for text and backgrounds
I established a color* scale with 10 shades, varying in contrast and aesthetic needs within the Analytical Engine. First, I identified a main color and then filled the remaining color values between lightness of 99 and 10.
*Original colors are changed due to client confidentiality
Semantic colors for consistent communication
Semantic colors for consistent communication
Next, we needed colors in the Analytic Engine to convey important feedback and guide user actions, separate from brand colors. With so much data, clear color signals help users understand what actions to take or avoid.
I defined three semantic colors for the "Analytic Engine" to communicate information:
Error: Red for warnings, errors, or critical issues requiring immediate action.
Success: Green for success, completion, or positive feedback.
Informational: Blue for neutral or informational status, providing clarity without urgency.
[Exception] Warning: Orange (from data viz palette) for caution, alerts, or items in progress.
Guidelines:
Do not use Semantic colors for Data Visualization (charts, graphs) unless it is communicating information
If need to use Semantic colors for text, select color shape below 30 in lightness
Next, we needed colors in the Analytic Engine to convey important feedback and guide user actions, separate from brand colors. With so much data, clear color signals help users understand what actions to take or avoid.
I defined three semantic colors for the "Analytic Engine" to communicate information:
Error: Red for warnings, errors, or critical issues requiring immediate action.
Success: Green for success, completion, or positive feedback.
Informational: Blue for neutral or informational status, providing clarity without urgency.
[Exception] Warning: Orange (from data viz palette) for caution, alerts, or items in progress.
Guidelines:
Do not use Semantic colors for Data Visualization (charts, graphs) unless it is communicating information
If need to use Semantic colors for text, select color shape below 30 in lightness
Used data viz orange color to represent "middle tier" status of a formulary group
Brand color used in data viz to represent brand-specific data
Brand color used in data viz to represent brand-specific data
Brand color used in data viz to represent brand-specific data
Data visualization colors for accessibility
Data visualization colors for accessibility
The Analytic Engine mainly consists of dashboards displaying historical and forecast data with charts and graphs. I defined three additional colors for data visualization, using four palettes to represent two types of data:
Categorical: Differentiate distinct categories or groups of data and each color represents a specific category without any inherent order
Sequential: A single range of values like heat maps (low to high)
Guidelines:
When using sequential colors, adjust the color palette to ensure there is enough contrast between colors
Avoid using data viz colors for UI text (except for brand color)
Avoid using multiple data viz colors to represent the same data point
The Analytic Engine mainly consists of dashboards displaying historical and forecast data with charts and graphs. I defined three additional colors for data visualization, using four palettes to represent two types of data:
Categorical: Differentiate distinct categories or groups of data and each color represents a specific category without any inherent order
Sequential: A single range of values like heat maps (low to high)
Guidelines:
When using sequential colors, adjust the color palette to ensure there is enough contrast between colors
Avoid using data viz colors for UI text (except for brand color)
Avoid using multiple data viz colors to represent the same data point
Assigned the brand color to represent our clients data vs. another data viz color to represent the competitors
Assigned the brand color to represent our clients data vs. another data viz color to represent the competitors
Assigned specific colors and distinct shapes/patterns to each customer data point to assist users with color blindness or low vision
Want to learn more?
Want to learn more?
Check out another design framework that my product team and I created as part of our learning from the Analytic Engine project.
Check out another design framework that my product team and I created as part of our learning from the Analytic Engine project.
A functional design checklist
A functional design checklist
A functional design checklist
