Home
DESIGN.mdStar on GitHub

Prisma

The complete TypeScript ORM — type-safe database access, automated migrations, and a visual data browser.

Colors
Prisma Postgres (PPG)
teal-400#00d3bdPPG brand teal
green-500#00c758PPG success green
green-400#05df72PPG highlight green
Prisma ORM
indigo-400#7d87ffORM brand indigo
indigo-300#a4b3ffORM light accent
blue-500#3080ffORM informational
Surfaces — Dark
bg#131420Page background
surface#1a202cCard surface
border#1d242fBorders, dividers
text#f7fafcPrimary text
text-muted#9ca3afSecondary text
Surfaces — Light
bg#ffffffPage background
surface#ffffffCard surface
border#e2e8f0Borders, dividers
text#1d242fPrimary text
text-muted#6b7280Secondary text
Semantic
red-500#fb2c36Error, destructive
amber-400#fcbb00Warning, caution
Typography
display-xl
Agent Infrastructure for TypeScript
Mona Sans40px700
display-lg
One platform for the full TypeScript path.
Mona Sans28px600
display-md
Type-safe database access with auto-completion
Mona Sans20px600
body-lg
Prisma speeds up development and reduces errors with a schema-first approach to database management.
Inter16px400
body-sm
Prisma ORM · Prisma Postgres · Prisma Accelerate · Prisma Pulse
Inter14px400
mono
model User { id Int @id @default(autoincrement()) email String @unique }
mono13px400
Components
Buttons
Inputs
Badges
Prisma Postgres Prisma ORM Beta Error Warning
Schema
model User { id Int @id @default(autoincrement()) email String @unique name String? posts Post[] createdAt DateTime @default(now()) }
Signature Component — Prisma Studio
Studio
idInt emailString nameString? roleString createdAtDateTime postsPost[]
prisma.user.findMany()
Guardrails
DO
Use teal for PPG features and indigo for ORM features — never swap them
Always use Mona Sans for display headings and primary CTAs
Show schema types in monospace with keyword coloring (model, @id, @default)
Include @default and @relation decorators in all schema examples
Default to dark theme — Prisma is dark-first across all surfaces
DON'T
Mix PPG teal and ORM indigo colors in a single component
Use generic sans-serif for schema code blocks or Prisma Client calls
Round corners above 12px on data panels, tables, or code blocks
Show untyped JavaScript where TypeScript is expected in examples
Use teal as a generic brand accent outside of Postgres contexts