A comprehensive design system built with Tailwind CSS and design tokens from Figma

Eclipse Design System

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-docs/eclipse

Setup

1. Import the global styles

In your main CSS file or app entry point:

@import "@prisma-docs/eclipse/styles/globals.css";

2. Extend your Tailwind config

import eclipseConfig from "@prisma-docs/eclipse/tailwind.config";

export default {
  presets: [eclipseConfig],
  content: ["./src/**/*.{ts,tsx}"],
};

3. 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': {},
  },
};

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-docs/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-padding-block-container">Container padding</div>
<div className="p-padding-inline-element-lg">Element padding</div>

Border Radius

<div className="rounded-low">Low radius (3px)</div>
<div className="rounded-square">Square radius (6px)</div>
<div className="rounded-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-docs/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-docs/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.

Introduction

Button Variants

Button Sizes

Background Colors

Foreground Colors

Typography

Border Radius-

Semantic Patterns

Error Message

Success Message

Warning Message

Gradients

On this page