Skip to main content

Color

AI State Indication​

Rule: Use consistent color coding to indicate AI activity states.

  • Blue: AI listening or processing
  • Green: AI task completed successfully
  • Yellow: AI requires user input or clarification
  • Red: AI encountered an error or critical issue

Confidence Level Representation​

Rule: Use color saturation to represent AI confidence levels.

  • Higher saturation: Higher confidence
  • Lower saturation: Lower confidence

Data Freshness​

Rule: Use color gradients to indicate data recency.

  • Vibrant colors: Most recent data
  • Faded colors: Older data

Anomaly Highlighting​

Rule: Use contrasting colors to highlight anomalies or outliers detected by AI.

  • Example: Bright orange for anomalies against a neutral background

Predictive Indicators​

Rule: Use a specific color palette for AI predictions and forecasts.

  • Example: Shades of purple for predicted future states

Accessibility​

Rule: Ensure all color choices meet WCAG 2.1 AA standards for contrast and readability.

Color Constancy​

Rule: Maintain consistent color meanings across different components and contexts.

Adaptive Color Schemes​

Rule: Provide both light and dark modes, with AI automatically suggesting the optimal mode based on environmental factors and user preferences.

Severity Scaling​

Rule: Use a consistent color scale to represent severity levels in alerts or issues.

  • Example: Green (low) -> Yellow -> Orange -> Red (high)

Action Suggestions​

Rule: Use a distinct color (e.g., teal) to highlight AI-suggested actions or recommendations.

These color rules aim to enhance usability, consistency, and intuitiveness in AI-driven interfaces within the Golem design system.

Figma Colour Library​

The library for colour is published here Figma Color Library