foundations

Color

Color is used to provide visual consistency, communicate status and feedback, and help people understand information. Use color sparingly. Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Overuse of color can make communication less clear and can be distracting in complex applications. Use touches of color to call attention to important information or show the relationship between parts of the interface. Colors have meaning. Use color consistently throughout the interface, especially when you use it to help communicate information like status, activity, or actions. Colors have assigned roles, which hold a specific meaning based on how they function within the interface. Colors follow accessibility guidelines. The color system meets WCAG 2.0 Level AA requirements, ensuring sufficient contrast ratios for all text (at least 4.5:1 for normal text). You should never convey information using color alone. Not all users will interact with the application visually — for example, blind or low-vision users may interact using a screen reader. Always pair color indicators with text labels, icons, or patterns.

Usage Guidance

When to use

  • +Use color to provide visual consistency and communicate status and feedback.
  • +Apply semantic colors for states: blue for info, green for success, amber for warning, red for error.
  • +Use touches of color to call attention to important information.

When not to use

  • −Don't overuse color — it can make communication less clear in complex applications.
  • −Don't invent new colors outside the Breeze palette.
  • −Don't use color as the sole means of conveying information — pair with text or icons.

Examples

Code Samples

Semantic badge colors

Badges use semantic color names to convey meaning at a glance. Each color maps to a specific role in the interface: blue for informational or neutral-active states, green for success or confirmed states, amber for caution or items needing attention, red for errors or critical issues, and grey for inactive, archived, or disabled states. Choose the color that best matches the intent of the status rather than personal preference.

<div className="flex gap-3 flex-wrap">
  <Badge color="blue">Informational</Badge>
  <Badge color="green">Success</Badge>
  <Badge color="amber">Warning</Badge>
  <Badge color="red">Error</Badge>
  <Badge color="grey">Neutral</Badge>
</div>

Lozenge status indicators

Lozenges provide a subtle, pill-shaped status label with a lighter visual weight than badges. They use the same semantic color palette, ensuring consistent meaning across all Breeze UI components. Lozenges are well suited for inline status labels in tables, list items, and metadata rows where a badge would feel too prominent.

<div className="flex gap-3 flex-wrap items-center">
  <Lozenge color="green">Active</Lozenge>
  <Lozenge color="blue">In Progress</Lozenge>
  <Lozenge color="amber">Pending</Lozenge>
  <Lozenge color="red">Overdue</Lozenge>
  <Lozenge color="grey">Archived</Lozenge>
</div>

Alert color variants

Alerts use color to reinforce the severity of a message. The background fill, border, and icon color all shift together to create a cohesive visual signal. Blue alerts are for neutral informational messages, green for success confirmations, amber for warnings that require attention but are not blocking, and red for errors or failures that require user action. Always pair the color with a clear, actionable message.

<div className="flex flex-col gap-4">
  <Alert color="blue">This is a general informational message.</Alert>
  <Alert color="green">The record was saved successfully.</Alert>
  <Alert color="amber">Check your input before continuing.</Alert>
  <Alert color="red">Something went wrong. Please try again.</Alert>
</div>

Background and text color with Tailwind

For custom layout areas outside of Breeze UI components, use Tailwind CSS utility classes to apply color from the project palette. Surfaces typically use the lightest shade (e.g. bg-blue-50) with a matching border (border-blue-200) and dark text for readability (text-blue-800). This pattern maintains the semantic color associations established by the component library while giving you layout flexibility.

<div className="flex gap-4">
  <div className="rounded-lg bg-blue-50 border border-blue-200 p-4 text-blue-800">
    Blue surface
  </div>
  <div className="rounded-lg bg-green-50 border border-green-200 p-4 text-green-800">
    Green surface
  </div>
  <div className="rounded-lg bg-amber-50 border border-amber-200 p-4 text-amber-800">
    Amber surface
  </div>
  <div className="rounded-lg bg-red-50 border border-red-200 p-4 text-red-800">
    Red surface
  </div>
</div>

Guidelines

Do

  • ✓Use color sparingly — prioritise clear communication over aesthetics.
  • ✓Use color consistently to communicate status, activity, or actions.
  • ✓Maintain WCAG 2.0 Level AA contrast ratios (at least 4.5:1 for normal text).
  • ✓Pair every color indicator with a text label, icon, or pattern.
  • ✓Use subtle background tints (e.g. blue-50, green-50) for state indicators.

Don't

  • ✗Don't rely on color alone for any information — not all users perceive colour visually.
  • ✗Don't use bright saturated colors for large background areas.
  • ✗Don't mix colors from different semantic categories (e.g. success green with error content).