lighttechnicaldocumentation-heavyteal

Prisma Colors & Fonts

What colors and fonts does Prisma use? Next-gen ORM for Node.js & TypeScript. Teal accents, technical.

Extract Live DesignVisit Prisma

Prisma Color Palette

Primary: #2D3748

Primary

#2D3748

Brand, text

Background

#FFFFFF

Main background

Surface

#F7FAFC

Cards, code blocks

Border

#E2E8F0

Dividers

Text Primary

#1A202C

Headings

Text Secondary

#718096

Body text

Accent Teal

#16A394

Links, highlights

What Font Does Prisma Use?

Prisma uses Barlow and Inter

Headings

Barlow

700google
Body Text

Inter

400google
Code

JetBrains Mono

400google

Spacing & Radius

Spacing Scale

Base: 4px

48162432486496

Border Radius

Small4px
Medium8px
Large12px

Prisma Tailwind Config

Copy this config to your project

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#2D3748',
        'background': '#FFFFFF',
        'surface': '#F7FAFC',
        'border': '#E2E8F0',
        'text-primary': '#1A202C',
        'text-secondary': '#718096',
        'accent-teal': '#16A394',
      },
      fontFamily: {
        'heading': ['Barlow', 'sans-serif'],
        'body': ['Inter', 'sans-serif'],
        'mono': ['JetBrains Mono', 'sans-serif'],
      },
    },
  },
}

Extract Prisma's Full Design

Get pixel-perfect colors, fonts, and spacing extracted directly from the live site. Ready for Tailwind and Cursor AI.

Get PromptUI — $19

One-time payment · 20 extractions · No subscription

Similar Design Systems

Explore more design systems

Linear

The issue tracking tool loved by developers. Dark, minimal, fast.

Stripe

Payment infrastructure for the internet. Clean gradients, polished.

Vercel

Frontend cloud platform. Black & white, sharp, bold typography.

Notion

All-in-one workspace. Clean, friendly, content-focused design.

Updated: 2025-01-15