What is Prisma's primary brand color?

Prisma's brand voltage is teal #16a394, wired into CSS as --primary, --sidebar-primary, --sidebar-ring, --ring, --chart-1, and --color-fd-ring. It appears on the hero CTA button ('Create database'), the sidebar active highlight, the focus ring for all interactive elements, and the first chart series. The next closest teal in the system is #0d9488 (64 text occurrences), which handles success states, the Prisma Postgres product color (--color-foreground-ppg), and code-diff add indicators. Using #0d9488 as a primary CTA color would conflict with its semantic success/ppg role — keep #16a394 exclusive to brand CTAs.

What typefaces does Prisma use, and how do they divide labor?

Prisma runs two families. Mona Sans VF (variable) carries all display moments — the 64px hero h1 at weight 400, 40px and 36px section h2s at weight 900, 24px h3 at weight 700, and the 16px uppercase badge labels at weight 700 with 1.6px letter-spacing. Inter carries everything operational — 16px body at weight 375–500, 14px label at weight 500, 12px caption at weight 400, and button labels at weight 600. The swap point is 18px: anything at or above that size on a heading element uses Mona Sans VF; anything below uses Inter. The closest open-source substitute for Mona Sans VF is DM Sans at variable weights.

What is the difference between Prisma's teal shades?

The system has two teal shades in active use: #16a394 (the brand primary) and #0d9488 (the PPG / success token). The distinction is semantic. #16a394 is the brand voltage — it goes on CTAs, sidebar selected states, and chart-1 fills. #0d9488 is the Prisma Postgres Gateway color and the success semantic token; it appears on 64 text elements including success-state labels, the --color-stroke-ppg border, and the 'PostgreSQL' product badge. A third teal, #14b8a6, is used as the light success-reverse background fill (4 background occurrences). Never place all three together — the perceptual gap between #16a394 and #0d9488 is too small for adjacent use.

What corner-radius does Prisma use on cards?

The dominant radius is 6px (92 occurrences), used on feature cards, input fields, nav dropdown surfaces, and small product-chip badges. The second tier is 10px (48 occurrences), used on the primary CTA button and larger card containers. A 12px tier (22 occurrences) appears on the modal and overlay surfaces, and 8px (21 occurrences) on icon buttons. The system does not use a pill radius on the marketing surface; the maximum is a very large computed value (3.35544e+07px — effectively 9999px) on the circular avatar elements in the testimonial row.

Can I use this DESIGN.md to build a Prisma-style dashboard or docs site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Prisma's specific moves: white canvas with hairline #e2e8f0 card borders, teal CTA voltage at #16a394, Mona Sans VF for display headings with Inter for body, and a 6px primary card radius. The tokens reference cleanly — {colors.primary} for CTAs, {colors.hairline} for card borders, {typography.display-xl} for the hero. One caution: the system exposes a rich semantic color set (success, error, warning, ORM blues, PPG teals) intended for a docs + dashboard surface rather than a pure marketing page. Filter to the structural tokens if your target is marketing only.

Prisma Design System

Prisma's marketing design system as a DESIGN.md file — teal #16a394 brand voltage, Mona Sans VF at 64px display, Inter body, 6px card rounding, 20 components.

About Prisma DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source prisma.io

Backend, Database & DevOps
Developer Tools & IDEs

Prisma's marketing page is organized around a quiet typographic contradiction — the hero headline "Postgres, perfectly managed." runs Mona Sans VF at 64px in weight 400, the same weight as the body copy, so the display and the paragraph share the same visual mass and the teal CTA button becomes the heaviest element above the fold. Where most ORM and database brands reach for weight 700 or 800 to impose authority, Prisma withholds weight at the display tier and concentrates force in a single saturated color. The overall impression is a white-canvas editorial system that happens to sell infrastructure rather than content.

The DESIGN.md file packages this into machine-readable tokens for React and AI tools. Inside: 18 color tokens including a teal brand voltage (#16a394) that wires simultaneously into --primary, --ring, --sidebar-primary, and --chart-1; 14 typography tokens spanning Mona Sans VF in four display roles (64px h1, 40px h2, 36px h2, 24px h3) and Inter in seven operational roles (16px body, 12px caption, 11px uppercase label); 7 radius values dominated by a 6px card default; 9 spacing values on an 8px base; and 20 component definitions covering the teal CTA button, hairline-edged feature cards, the dark sidebar, monospace code blocks, and the light nav bar.

Feed this file to Claude or Cursor and it reproduces Prisma's specific moves: white canvas with near-black ink text, teal-only brand voltage never repeated in secondary accents, Mona Sans VF for display moments with Inter handling everything at 16px and below, and a 6px card geometry that feels like product UI rather than marketing decoration. The one structural decision worth borrowing for any developer-infra brand is the two-family split — reserving Mona Sans VF exclusively for headings creates a clear register shift that Inter's system stack cannot produce alone.

What makes it distinct

Weight-400 display headlineMona Sans VF at 64px in weight 400 is lighter than any comparable ORM brand, letting teal CTA voltage carry the page rather than typographic muscle
Two-family systemMona Sans VF for all display and section headings, Inter for all nav, body, and button copy; the swap happens at precisely 18px
Teal-as-primary#16a394 wired to --primary, --ring, --sidebar-primary, --chart-1 simultaneously; one color carries CTAs, focus states, and data visualizations
6px dominant radius92 occurrences at 6px, the tightest meaningful step for product-UI cards and input fields on a white canvas
Uppercase small-caps labelsMona Sans VF at 16px / weight 700 / 1.6px letter-spacing runs the nav badge and product-tier chips, the only tracking-wide tier in the system

Live at prisma.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

prisma.io

Explore Prisma

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Prisma design system FAQ

Common questions about Prisma's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Prisma — official site

Prisma's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.