Prisma /eclipse

Introduction

Eclipse is Prisma's design system, providing a consistent visual language across all our documentation and products.

Built with Tailwind CSS and design tokens imported directly from Figma, it ensures design consistency and makes it easy to build beautiful, accessible interfaces.

Features

  • Design Tokens from Figma: All colors, spacing, typography, and other design tokens are synced from our Figma design files
  • Dark Mode Support: Full support for light and dark themes with automatic switching
  • Tailwind CSS Integration: Seamless integration with Tailwind CSS for rapid development
  • Type-Safe: TypeScript definitions for all components and tokens
  • Accessible: Built with accessibility in mind following WCAG guidelines

Installation

pnpm add @prisma/eclipse

Setup

1. Configure PostCSS

Make sure you have the Tailwind v4 PostCSS plugin installed:

pnpm add -D @tailwindcss/postcss

Create or update postcss.config.mjs:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

2. Import styles in your app global CSS

Initialize Tailwind once in the consuming app, then import Eclipse styles:

@import "tailwindcss";
@import "@prisma/eclipse/styles/globals.css";

3. Use components

Import components from @prisma/eclipse in your app code:

import { Button } from "@prisma/eclipse";

export function App() {
  return <Button variant="ppg">Get started</Button>;
}

Notes

  • Keep Tailwind initialization at the app level (import tailwindcss once in the app entry stylesheet).
  • @prisma/eclipse/styles/globals.css includes Eclipse tokens/utilities and @source directives for Eclipse components.

Interactive Showcase

Theme Mode

Button Variants

Button Sizes

Background Colors

Neutral
PPG
ORM
Error
Success
Warning
Cyan
Fuchsia

Foreground Colors

PPG
ORM
Error
Success
Warning
Cyan
Violet
Pink

Typography

2XS - 11px

XS - 12px

SM - 14px

MD - 16px (Base)

LG - 18px

XL - 20px

2XL - 24px

3XL - 30px

Normal (400)

Medium (500)

Semibold (600)

Bold (750)

Ultra Bold (900)

Border Radius

Low (3px)
Square (6px)
High (12px)
Circle

Semantic Patterns

⚠️

Error Message

This is an example error message using semantic tokens.

✓

Success Message

This is an example success message using semantic tokens.

!

Warning Message

This is an example warning message using semantic tokens.

Gradients

ORM Gradient
PPG Gradient

Using Components

Button Component

import { Button } from "@prisma/eclipse";

export function MyComponent() {
  return (
    <div className="space-x-4">
      <Button variant="default">Default</Button>
      <Button variant="ppg">Prisma Pulse & Accelerate</Button>
      <Button variant="orm">Prisma ORM</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  );
}

Button Variants

  • default - Standard button style
  • ppg - Prisma Pulse & Accelerate brand colors (teal/cyan)
  • orm - Prisma ORM brand colors (purple/blue)
  • destructive - Error/danger actions (red)
  • outline - Outlined button style
  • secondary - Secondary action style
  • ghost - Minimal button style
  • link - Link-styled button

Button Sizes

  • sm - Small button
  • default - Standard button size
  • lg - Large button

Color System

Eclipse uses a semantic color system with support for both light and dark modes.

Background Colors

<div className="bg-background-default">Default background</div>
<div className="bg-background-neutral">Neutral background</div>
<div className="bg-background-ppg">PPG background</div>
<div className="bg-background-orm">ORM background</div>
<div className="bg-background-error">Error background</div>
<div className="bg-background-success">Success background</div>
<div className="bg-background-warning">Warning background</div>

Foreground Colors

<span className="text-foreground-neutral">Neutral text</span>
<span className="text-foreground-ppg">PPG text</span>
<span className="text-foreground-orm">ORM text</span>
<span className="text-foreground-error">Error text</span>
<span className="text-foreground-success">Success text</span>
<span className="text-foreground-warning">Warning text</span>

Color Variants

Each color has multiple variants for different use cases:

  • default - Base color
  • strong - Stronger/darker variant
  • weak - Lighter/softer variant
  • reverse - Contrast color for use on colored backgrounds
  • reverse-weak - Lighter reverse color

Example:

<div className="bg-background-ppg">
  <span className="text-foreground-ppg-reverse">Text on PPG background</span>
</div>

Typography

Font Sizes

<p className="text-2xs">2XS - 11px</p>
<p className="text-xs">XS - 12px</p>
<p className="text-sm">SM - 14px</p>
<p className="text-md">MD - 16px (Base)</p>
<p className="text-lg">LG - 18px</p>
<p className="text-xl">XL - 20px</p>
<p className="text-2xl">2XL - 24px</p>
<p className="text-3xl">3XL - 30px</p>

Font Weights

<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (750)</p>
<p className="font-ultra-bold">Ultra Bold (900)</p>

Spacing

Eclipse provides a comprehensive spacing system for margins and padding.

Margin Scale

<div className="m-margin-4xs">4xs - 4px</div>
<div className="m-margin-3xs">3xs - 8px</div>
<div className="m-margin-2xs">2xs - 12px</div>
<div className="m-margin-xs">xs - 16px</div>
<div className="m-margin-sm">sm - 20px</div>
<div className="m-margin-md">md - 24px</div>
<div className="m-margin-lg">lg - 28px</div>
<div className="m-margin-xl">xl - 32px</div>
<div className="m-margin-4xl">4xl - 48px</div>

Padding Utilities

<div className="p-6">Container padding</div>
<div className="p-padding-inline-element-lg">Element padding</div>

Border Radius

<div className="rounded-square-low">Low radius (3px)</div>
<div className="rounded-square">Square radius (6px)</div>
<div className="rounded-square-high">High radius (12px)</div>
<div className="rounded-circle">Circular</div>

Dark Mode

Eclipse supports manual dark mode toggling. Apply the dark class to the <html> element:

import { useEffect, useState } from "react";

function App() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    document.documentElement.classList.toggle("dark", isDark);
  }, [isDark]);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      Toggle {isDark ? "Light" : "Dark"} Mode
    </button>
  );
}

Design Tokens

Access design tokens programmatically:

import { tokens } from "@prisma/eclipse/tokens";

console.log(tokens.borderRadius.square); // 6
console.log(tokens.typography.fontSize.md); // 16
console.log(tokens.margin.md); // 24

Utilities

Class Name Utility

Eclipse includes a cn utility for merging class names with Tailwind class deduplication:

import { cn } from "@prisma/eclipse/lib/cn";

function MyComponent({ className, isActive }) {
  return (
    <div className={cn(
      "bg-background-default",
      isActive && "bg-background-ppg",
      className
    )}>
      Content
    </div>
  );
}

Resources

Support

For questions or issues with the Eclipse Design System, please reach out to the Prisma design team or open an issue on GitHub.

Colors

Color tokens from the Eclipse Design System

On this page

FeaturesInstallationSetup1. Configure PostCSS2. Import styles in your app global CSS3. Use componentsNotesInteractive ShowcaseUsing ComponentsButton ComponentButton VariantsButton SizesColor SystemBackground ColorsForeground ColorsColor VariantsTypographyFont SizesFont WeightsSpacingMargin ScalePadding UtilitiesBorder RadiusDark ModeDesign TokensUtilitiesClass Name UtilityResourcesSupport