Colors

The Eclipse Design System provides a comprehensive color palette with semantic naming and automatic dark mode support. All colors are synced from Figma and organized by usage.

Color System

Colors are organized into three main categories:

• Background - For surfaces, containers, and backgrounds
• Foreground - For text, icons, and foreground elements
• Stroke - For borders, dividers, and outlines

Each category has variants for different products and semantic meanings.

Background Colors

Neutral

Background colors for neutral surfaces and containers.

Prisma Pulse & Accelerate (PPG)

Teal/cyan themed colors for Prisma Pulse and Accelerate branding.

Prisma ORM

Indigo/purple themed colors for Prisma ORM branding.

Semantic Colors

Error

Red colors for error states and destructive actions.

Success

Green colors for success states and positive feedback.

Warning

Orange/amber colors for warning states and caution.

Additional Colors

Accent Colors

Foreground Colors

Foreground colors are used for text, icons, and other foreground elements. Each color has multiple strength variants.

Neutral Foreground

Product Foreground

Semantic Foreground

Stroke Colors

Stroke colors are used for borders, dividers, and outlines.

Colored Strokes

Gradients

Pre-defined branded gradients.

Usage Examples

Background and Foreground

<div className="bg-background-neutral text-foreground-neutral">
  Neutral content
</div>

<div className="bg-background-ppg-strong text-foreground-ppg-reverse">
  PPG branded content
</div>

With Borders

<div className="bg-background-default border border-stroke-neutral">
  Content with border
</div>

<div className="bg-background-error border-2 border-stroke-error">
  Error state
</div>

Semantic Colors

// Error message
<div className="bg-background-error-reverse text-foreground-error p-4 rounded-lg">
  Something went wrong!
</div>

// Success message
<div className="bg-background-success-reverse text-foreground-success p-4 rounded-lg">
  Operation completed successfully!
</div>

// Warning message
<div className="bg-background-warning-reverse text-foreground-warning p-4 rounded-lg">
  Please review before continuing
</div>

Dark Mode

All colors automatically adjust for dark mode. The design system uses CSS custom properties that change based on the .dark class on the root element.

Accessibility

All color combinations in the Eclipse Design System meet WCAG AA standards for color contrast:

• Text on backgrounds: Minimum 4.5
  contrast ratio
• Large text: Minimum 3
  contrast ratio
• Interactive elements: Clear visual indicators for focus states

Always test color combinations with accessibility tools and consider users with color vision deficiencies.