Introduction - Prisma

import { EclipseShowcase } from '@/components/eclipse-showcase';

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

bash

pnpm add @prisma/eclipse

Setup

1. Configure PostCSS

Make sure you have the Tailwind v4 PostCSS plugin installed:

bash

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:

css

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

3. Use components

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

tsx

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

Using Components

Button Component

tsx

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

tsx

<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

tsx

<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:

tsx

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

Typography

Font Sizes

tsx

<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

tsx

<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

tsx

<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

tsx

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

Border Radius

tsx

<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:

tsx

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:

tsx

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:

tsx

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.