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)

Prism cyan colors for Prisma Pulse and Accelerate branding.

Prisma ORM

Prism yellow colors for Prisma ORM branding. The scale is darkness-compensated, so the mid steps read as ochre rather than lemon.

Semantic Colors

Error

Prism red colors for error states and destructive actions.

Success

Success shares the prism cyan scale with PPG — every success token carries the same value as its ppg counterpart, in both light and dark mode.

Warning

Spectrum orange colors for warning states and caution. The scale is anchored on the #f37a03 stop of the brand spectrum gradient.

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.

Prism Scales

The prism scales are the raw brand ramps that sit behind the semantic tokens above. Reach for them when you need one specific step — a chart series, an illustration, a one-off accent — and keep using the semantic tokens everywhere else.

Three scales, eleven steps each. Every step is available as bg-*, text-* and border-*.

prism-cyan

prism-yellow

prism-red

Spectrum stops

Three further stops complete the brand spectrum. They exist as single colors rather than scales.

Brand surfaces

paper is the warm resting surface pages sit on; card-wash is the tinted surface for content cards placed on white panels; foreground-neutral-strong is the ink used for headings.

Spectrum Utilities

The signature brand treatment is a six-stop gradient that slides on hover. It is defined once as --gradient-spectrum and consumed by a small set of component-layer classes. Every one of them drops its animation under prefers-reduced-motion: reduce.

<button className="spectrum-border rounded-circle border border-stroke-neutral duration-500 hover:border-transparent">
  Get started
</button>

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.