Color Palette
Background Colors
Blue (Gray)
#6B7280 · ×752
Cyan (Teal)
#14B8A6 · ×304
Dark Blue 3
#1F2937 · ×144
White 2 (Teal Tint)
#F0FDFA · ×21
Blue 4 (Indigo)
#5A67D8 · ×17
Text Colors
Dark Blue 2
#111827 · ×678
Blue 2 (Slate)
#718096 · ×83
Blue 3 (Gray)
#9CA3AF · ×38
Border & Shadow Colors
Light Gray
#E2E8F0 · ×3244
Light Gray 2
#E5E7EB · ×10
Mid Gray (Shadow)
rgba(172,171,171,.3)
Typography
Primary · Mona Sans VF
Mona Sans
Type-safe database access for Node.js and TypeScript. The ORM that makes developers productive.
w375
Regular
Medium
Semibold
Bold
Black
Mono · Mona Sans Mono VF
Mono VF
const user = await prisma.user.findUnique({ where: { id: 1 } })
Variable Font
Inter (base)
Build faster
5xl · 64px · Black 900 · line-height: 72px · tracking: +0.36px
Instant Postgres, zero config
4xl · 40px · Bold · line-height: 48px · tracking: +0.36px
Type-safe database queries
3xl · 36px · Semibold 600 · line-height: 36px · tracking: +0.36px
Connect your database in minutes with a powerful ORM
xl · 24px · Medium · line-height: 48px
Prisma is an open-source ORM for Node.js and TypeScript. It provides auto-completion in your editor, type-safety and a human-readable data model.
base · 16px · Regular · line-height: 32px
Last migration: 2 minutes ago · 3 models affected
sm · 14px · Regular · line-height: 25.02px
POSTGRES · MYSQL · MONGODB
2xs · 11px · Semibold · line-height: 16px · tracking: +1.6px
Letter Spacing
Prisma ORM
Tight (+0.36px)
+0.36px · headings, display sizes — note: both are positive (wider than default)
POSTGRES · MYSQL
Normal (+1.6px)
+1.6px · uppercase labels and caps
Spacing
Spacing Scale
19 tokens — 2px → 349px
Borders
Border Radii
Prisma has the most radius tokens of any system in the series — 10 values. The --radius-r10 token is 1.67772e+07px (≈16.7 million px) — a mathematical absolute for pill shapes, normalized to 9999px in this display.
Shadows / Elevation
Shadow Tokens
5 tokens
sm
×5
1px 2px rgba(0,0,0,.04) — micro lift
md
×4
10px 25px rgba(0,0,0,.1) — card hover
lg
×1
rgba(172,171,171,.3) upward — sticky bar
xl
×1
rgba(0,0,0,.3) 32px 68px — deep modal
shadow-5
×1
Dual layer: 8px 16px + 2px 2px — compound
Z-Index
| Layer | Value | Usage |
|---|
| z-1 | -1 | Background decorations, canvas layers |
| z-2 | 1 | Base content layer |
| z-3 | 2 | Slightly elevated elements |
| z-4 | 10 | Navigation, sticky headers |
| z-5 | 50 | Dropdowns, popovers, tooltips |
| z-6 | 9,999,999 | Modals, overlays |
| z-7 | 99,999,999 | Critical overlays, interrupt dialogs |
| z-8 | 999,999,999 | Absolute top — debug panels, emergency notices |
Prisma has the highest z-index values in the entire series — up to 999,999,999. This suggests the Prisma docs use embedded third-party widgets (chat, cookies, Intercom, etc.) that require nuclear-level z-index to guarantee they render above everything. The gap from 50 → 9,999,999 is the largest single jump of any system.
Breakpoints
8 breakpoints tightly clustered between 352px–845px — all below standard "desktop" width. All breakpoints are in the mobile-to-tablet range. This is unusually mobile-dense: Prisma's docs appear to define granular layout shifts for very narrow sidebar and code-panel contexts, with no breakpoints at typical desktop widths (1024px, 1280px, 1440px).
Opacity
80 Opacity Tokens — 20% to 99% at 1% increments
Prisma defines the most opacity tokens of any system in this series — 80 consecutive 1%-step values from 0.20 to 0.99. This is almost certainly a programmatically-generated animation system for gradient and fade effects (SVG animations, syntax highlighting, etc.), not hand-authored semantic tokens.
Showing 10 representative samples from the full 80-token range (opacity-20 through opacity-99).
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Blue (#1D242F) | White (#FFF) | 15.61:1 | AAA |
| Dark Blue (#1D242F) | Cyan (#14B8A6) | 6.27:1 | AA |
| Dark Blue (#1D242F) | Blue (#6B7280) | 3.23:1 | AA Large |
| Dark Blue (#1D242F) | Black (#000) | 1.35:1 | Fail |
| Dark Blue 2 (#111827) | White (#FFF) | 17.74:1 | AAA |
| Dark Blue 2 (#111827) | Cyan (#14B8A6) | 7.13:1 | AAA |
| Dark Blue 2 (#111827) | Dark Cyan (#0D9488) | 4.74:1 | AA |
| Dark Gray (#212121) | White (#FFF) | 16.1:1 | AAA |
| Dark Gray (#212121) | Cyan (#14B8A6) | 6.47:1 | AA |
| Blue 2 (#718096) | Black (#000) | 5.23:1 | AA |
| Blue 2 (#718096) | White (#FFF) | 4.02:1 | AA Large |
| Dark Blue 4 (#4A5568) | White (#FFF) | 7.53:1 | AAA |
| Dark Blue 4 (#4A5568) | Cyan (#14B8A6) | 3.02:1 | AA Large |
| Dark Blue 4 (#4A5568) | Black (#000) | 2.79:1 | Fail |
CSS Variables Reference
Black--color-black#000000
Blue (Gray)--color-blue#6B7280
White--color-white#FFFFFF
Cyan (Teal)--color-cyan#14B8A6
Dark Cyan--color-dark-cyan#0D9488
Dark Blue 3--color-dark-blue-3#1F2937
White 2 (Teal Tint)--color-white-2#F0FDFA
Blue 4 (Indigo)--color-blue-4#5A67D8
White 4--color-white-4#F3F4F6
White 5--color-white-5#F7FAFC
Light Cyan--color-light-cyan#CCFBF1
Dark Blue--color-dark-blue#1D242F
Dark Blue 2--color-dark-blue-2#111827
Dark Gray--color-dark-gray#212121
Blue 2 (Slate)--color-blue-2#718096
Dark Blue 4--color-dark-blue-4#4A5568
Blue 3 (Gray)--color-blue-3#9CA3AF
Dark Blue 5--color-dark-blue-5#2D3748
Blue 5 (Link)--color-blue-5#1863DC
Cyan 2--color-cyan-2#16A394
Light Gray--color-light-gray#E2E8F0
Light Gray 2--color-light-gray-2#E5E7EB
Mid Gray (Shadow)--color-mid-grayrgba(172,171,171,.3)
Mona Sans VF--font-family-2Mona Sans VF
Inter (base)--font-family-baseInter
Mona Sans Mono VF--font-family-3Mona Sans Mono VF
w375 (Light+)--font-weight-w375375
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
w650 (Bold−)--font-weight-w650650
Bold--font-weight-bold700
Black--font-weight-black900
2xs (11px)--font-size-2xs11px
xs--font-size-xs12px
sm--font-size-sm14px
base--font-size-base16px
lg--font-size-lg18px
xl--font-size-xl24px
2xl--font-size-2xl30px
3xl--font-size-3xl36px
4xl--font-size-4xl40px
5xl (Hero)--font-size-5xl64px
Tight (+0.36px)--letter-spacing-tight+0.36px
Normal (+1.6px)--letter-spacing-normal+1.6px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
r10 (~∞)--radius-r101.67772e+07px
Instant--duration-instant50ms
Fast--duration-fast150ms
Normal--duration-normal300ms
Slow--duration-slow500ms
No easing tokens defined
Background--z-1-1
Base--z-21
Navigation--z-410
Dropdowns--z-550
Modals--z-69,999,999
Critical--z-799,999,999
Absolute Top--z-8999,999,999
80 opacity tokens (20%–99%, 1% steps)
Design System Preview · Prisma (Light) · Generated 19/04/2026 · 25 color tokens · 10 font-size · 3 font-family · 7 font-weight · 10 line-height · 2 letter-spacing · 19 spacing · 10 radius · 2 border-width · 5 shadow · 4 duration · 0 easing · 8 z-index · 8 breakpoints · 80 opacity