Colors - Prisma — ContextQMD

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.

<div className="not-prose my-8 space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-default border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-default</span> </div> <p className="text-xs text-gray-600">Primary background</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-neutral-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-neutral-strong</span> </div> <p className="text-xs text-gray-600">Strong neutral</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-neutral border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-neutral</span> </div> <p className="text-xs text-gray-600">Default neutral</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-neutral-weak border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-neutral-weak</span> </div> <p className="text-xs text-gray-600">Weak neutral</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-neutral-weaker border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-neutral-weaker</span> </div> <p className="text-xs text-gray-600">Weaker neutral</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-neutral-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral-reverse text-sm font-mono">bg-background-neutral-reverse</span> </div> <p className="text-xs text-gray-600">Reverse (inverted)</p> </div> </div> </div>

Prisma Pulse & Accelerate (PPG)

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

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-ppg-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-ppg-reverse text-sm font-mono">bg-background-ppg-strong</span> </div> <p className="text-xs text-gray-600">Strong PPG</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-ppg border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-ppg</span> </div> <p className="text-xs text-gray-600">Default PPG</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-ppg-reverse-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-ppg text-sm font-mono">bg-background-ppg-reverse-strong</span> </div> <p className="text-xs text-gray-600">Reverse strong</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-ppg-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-ppg text-sm font-mono">bg-background-ppg-reverse</span> </div> <p className="text-xs text-gray-600">Reverse</p> </div> </div> </div>

Prisma ORM

Indigo/purple themed colors for Prisma ORM branding.

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-orm-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-orm-reverse text-sm font-mono">bg-background-orm-strong</span> </div> <p className="text-xs text-gray-600">Strong ORM</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-orm border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-orm</span> </div> <p className="text-xs text-gray-600">Default ORM</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-orm-reverse-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-orm text-sm font-mono">bg-background-orm-reverse-strong</span> </div> <p className="text-xs text-gray-600">Reverse strong</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-orm-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-orm text-sm font-mono">bg-background-orm-reverse</span> </div> <p className="text-xs text-gray-600">Reverse</p> </div> </div> </div>

Semantic Colors

Error

Red colors for error states and destructive actions.

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-error-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-error-reverse text-sm font-mono">bg-background-error-strong</span> </div> <p className="text-xs text-gray-600">Strong error</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-error border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-error</span> </div> <p className="text-xs text-gray-600">Default error</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-error-reverse-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-error text-sm font-mono">bg-background-error-reverse-strong</span> </div> <p className="text-xs text-gray-600">Reverse strong</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-error-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-error text-sm font-mono">bg-background-error-reverse</span> </div> <p className="text-xs text-gray-600">Reverse</p> </div> </div> </div>

Success

Green colors for success states and positive feedback.

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-success-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-success-reverse text-sm font-mono">bg-background-success-strong</span> </div> <p className="text-xs text-gray-600">Strong success</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-success border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-success</span> </div> <p className="text-xs text-gray-600">Default success</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-success-reverse-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-success text-sm font-mono">bg-background-success-reverse-strong</span> </div> <p className="text-xs text-gray-600">Reverse strong</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-success-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-success text-sm font-mono">bg-background-success-reverse</span> </div> <p className="text-xs text-gray-600">Reverse</p> </div> </div> </div>

Warning

Orange/amber colors for warning states and caution.

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-warning-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-warning-reverse text-sm font-mono">bg-background-warning-strong</span> </div> <p className="text-xs text-gray-600">Strong warning</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-warning border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-sm font-mono">bg-background-warning</span> </div> <p className="text-xs text-gray-600">Default warning</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-warning-reverse-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-warning text-sm font-mono">bg-background-warning-reverse-strong</span> </div> <p className="text-xs text-gray-600">Reverse strong</p> </div> <div className="space-y-2"> <div className="h-24 rounded-lg bg-background-warning-reverse border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-warning text-sm font-mono">bg-background-warning-reverse</span> </div> <p className="text-xs text-gray-600">Reverse</p> </div> </div> </div>

Additional Colors

Accent Colors

<div className="not-prose my-8"> <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-blue-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">blue-strong</span> </div> <div className="h-20 rounded-lg bg-background-blue border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">blue</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-cyan-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">cyan-strong</span> </div> <div className="h-20 rounded-lg bg-background-cyan border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">cyan</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-fuchsia-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">fuchsia-strong</span> </div> <div className="h-20 rounded-lg bg-background-fuchsia border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">fuchsia</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-lime-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">lime-strong</span> </div> <div className="h-20 rounded-lg bg-background-lime border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">lime</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-pink-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">pink-strong</span> </div> <div className="h-20 rounded-lg bg-background-pink border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">pink</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-purple-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">purple-strong</span> </div> <div className="h-20 rounded-lg bg-background-purple border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">purple</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-sky-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">sky-strong</span> </div> <div className="h-20 rounded-lg bg-background-sky border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">sky</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-violet-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">violet-strong</span> </div> <div className="h-20 rounded-lg bg-background-violet border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">violet</span> </div> </div> <div className="space-y-2"> <div className="h-20 rounded-lg bg-background-yellow-strong border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">yellow-strong</span> </div> <div className="h-20 rounded-lg bg-background-yellow border border-stroke-neutral flex items-center justify-center"> <span className="text-foreground-neutral text-xs font-mono">yellow</span> </div> </div> </div> </div>

Foreground Colors

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

Neutral Foreground

<div className="not-prose my-8"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> <div className="space-y-2 p-4 bg-background-neutral border border-stroke-neutral rounded-lg"> <div className="text-foreground-neutral-strong text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-neutral-strong</p> </div> <div className="space-y-2 p-4 bg-background-neutral border border-stroke-neutral rounded-lg"> <div className="text-foreground-neutral text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-neutral</p> </div> <div className="space-y-2 p-4 bg-background-neutral border border-stroke-neutral rounded-lg"> <div className="text-foreground-neutral-weak text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-neutral-weak</p> </div> <div className="space-y-2 p-4 bg-background-neutral-reverse rounded-lg"> <div className="text-foreground-neutral-reverse text-2xl">Aa</div> <p className="text-xs font-mono text-white">text-foreground-neutral-reverse</p> </div> <div className="space-y-2 p-4 bg-background-neutral-reverse rounded-lg"> <div className="text-foreground-neutral-reverse-weak text-2xl">Aa</div> <p className="text-xs font-mono text-white">text-foreground-neutral-reverse-weak</p> </div> </div> </div>

Product Foreground

<div className="not-prose my-8 space-y-6"> <div> <h4 className="text-sm font-semibold mb-3">PPG</h4> <div className="grid grid-cols-2 md:grid-cols-3 gap-4"> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-ppg-strong text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-ppg-strong</p> </div> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-ppg text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-ppg</p> </div> <div className="space-y-2 p-4 bg-background-ppg-strong rounded-lg"> <div className="text-foreground-ppg-reverse text-2xl">Aa</div> <p className="text-xs font-mono text-white">text-foreground-ppg-reverse</p> </div> </div> </div> <div> <h4 className="text-sm font-semibold mb-3">ORM</h4> <div className="grid grid-cols-2 md:grid-cols-3 gap-4"> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-orm-strong text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-orm-strong</p> </div> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-orm text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-orm</p> </div> <div className="space-y-2 p-4 bg-background-orm-strong rounded-lg"> <div className="text-foreground-orm-reverse text-2xl">Aa</div> <p className="text-xs font-mono text-white">text-foreground-orm-reverse</p> </div> </div> </div> </div>

Semantic Foreground

<div className="not-prose my-8 grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="space-y-3"> <h4 className="text-sm font-semibold">Error</h4> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-error text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-error</p> </div> </div> <div className="space-y-3"> <h4 className="text-sm font-semibold">Success</h4> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-success text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-success</p> </div> </div> <div className="space-y-3"> <h4 className="text-sm font-semibold">Warning</h4> <div className="space-y-2 p-4 bg-white border border-stroke-neutral rounded-lg"> <div className="text-foreground-warning text-2xl">Aa</div> <p className="text-xs font-mono">text-foreground-warning</p> </div> </div> </div>

Stroke Colors

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

<div className="not-prose my-8"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="space-y-2"> <div className="h-20 border-4 border-stroke-neutral-stronger rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">stroke-neutral-stronger</span> </div> </div> <div className="space-y-2"> <div className="h-20 border-4 border-stroke-neutral-strong rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">stroke-neutral-strong</span> </div> </div> <div className="space-y-2"> <div className="h-20 border-4 border-stroke-neutral rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">stroke-neutral</span> </div> </div> <div className="space-y-2"> <div className="h-20 border-4 border-stroke-neutral-weak rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">stroke-neutral-weak</span> </div> </div> </div> </div>

Colored Strokes

<div className="not-prose my-8"> <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div className="h-16 border-4 border-stroke-ppg rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">ppg</span> </div> <div className="h-16 border-4 border-stroke-orm rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">orm</span> </div> <div className="h-16 border-4 border-stroke-error rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">error</span> </div> <div className="h-16 border-4 border-stroke-success rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">success</span> </div> <div className="h-16 border-4 border-stroke-warning rounded-lg flex items-center justify-center"> <span className="text-xs font-mono">warning</span> </div> </div> </div>

Gradients

Pre-defined branded gradients.

<div className="not-prose my-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="space-y-2"> <div className="h-32 bg-gradient-orm rounded-lg flex items-center justify-center"> <span className="text-white font-semibold text-lg">ORM Gradient</span> </div> <p className="text-xs font-mono">bg-gradient-orm</p> </div> <div className="space-y-2"> <div className="h-32 bg-gradient-ppg rounded-lg flex items-center justify-center"> <span className="text-white font-semibold text-lg">PPG Gradient</span> </div> <p className="text-xs font-mono">bg-gradient-ppg</p> </div> </div> </div>

Usage Examples

Background and Foreground

tsx

<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

tsx

<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

tsx

// 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.

<div className="not-prose my-8 bg-amber-50 border border-amber-200 rounded-lg p-6"> <div className="text-sm text-amber-900"> **Note:** All color values shown here will automatically adapt when dark mode is enabled. The same class names work in both light and dark modes without any changes to your code. </div> </div>

Accessibility

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

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

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