---
title: "Prisma design system"
variant: extended
source: https://www.prisma.io/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/prisma-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Prisma · Design System

> A calm canvas for a vivid developer platform

**Theme:** light · **Industry:** devtools · **Source:** https://www.prisma.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Prisma’s homepage pairs a bright, restrained layout with soft rainbow gradients and crisp product interface previews. Rounded controls, clear typography, and generous whitespace make a complex TypeScript platform feel approachable.

## North star

Keep the page quiet and legible in neutral tones, using the rainbow gradient as a restrained frame for real product UI.

## Overview

The visual system is built on a white canvas with charcoal text and muted gray supporting copy. The colorful identity appears selectively: soft cyan, pale yellow, and blush tint product panels and ambient hero artwork, while a saturated cyan-to-yellow-to-coral spectrum is reserved for decorative edges and branded moments. Sora gives headings a contemporary, geometric presence; Inter handles navigation, body copy, labels, and links with compact clarity. The centered hero leads with a large headline, concise supporting text, proof points, and pill-shaped actions, followed by a framed product preview. Lower sections alternate between centered statements, structured comparisons, product demonstrations, pricing, testimonials, and FAQ content. Cards are mostly white with thin gray borders and rounded corners rather than heavy fills. Spacing is generous around major sections, while card content remains dense and practical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and card background, keeping long sections bright and visually open. |
| Graphite Ink | `#3a3b3c` | `--color-graphite-ink` | brand | Primary headings, body text, navigation, and most links. |
| Mist Cyan | `#b3f4f9` | `--color-mist-cyan` | accent | Soft cyan surface tint and brand-adjacent decoration around product areas. |
| Quiet Gray | `#646567` | `--color-quiet-gray` | neutral | Muted explanatory copy, secondary navigation, and understated controls. |
| Deep Teal | `#006772` | `--color-deep-teal` | semantic | Foreground for small cyan product badges, not a dominant page text color. |
| Soft Marigold | `#fae7b2` | `--color-soft-marigold` | surface | Pale warm tint in small surface accents and gradient-adjacent decoration. |
| Feather Line | `#f0f0f0` | `--color-feather-line` | neutral | Fine card, section, and control borders. |
| Blush Mist | `#ffcfd1` | `--color-blush-mist` | surface | Soft pink surface tint within decorative and product-preview areas. |
| Silver Line | `#e5e5e5` | `--color-silver-line` | neutral | Light outlines around badges, controls, and secondary UI details. |
| Prisma Gold | `#f3c306` | `--color-prisma-gold` | accent | Warm band in the vivid brand spectrum and gradient artwork. |
| Near Black | `#151515` | `--color-near-black` | brand | Primary dark interface details and high-contrast accents. |
| Electric Aqua | `#4de3ec` | `--color-electric-aqua` | accent | Bright cyan accent within decorative gradient and product illustration details. |
| Coral Blush | `#f892a0` | `--color-coral-blush` | accent | Coral-pink accent within spectrum artwork and illustration details. |
| Slate Gray | `#6b6c6d` | `--color-slate-gray` | neutral | Occasional secondary text tone; not a defining interface color. |
| Vanilla Tint | `#fbecc2` | `--color-vanilla-tint` | surface | Warm pale section or illustration tint, used sparingly against white. |
| Signal Cyan | `#01d7e4` | `--color-signal-cyan` | accent | Bright cyan in the multicolor gradient and selected decorative strokes. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#b3f4f9` (Mist Cyan) · `--color-surface-2` → `#ffcfd1` (Blush Mist) · `--color-surface-3` → `#fae7b2` (Soft Marigold) · `--color-surface-4` → `#fbecc2` (Vanilla Tint) · `--color-text` → `#3a3b3c` (Graphite Ink) · `--color-text-muted` → `#646567` (Quiet Gray) · `--color-text-subtle` → `#151515` (Near Black) · `--color-border` → `#f0f0f0` (Feather Line) · `--color-accent` → `#b3f4f9` (Mist Cyan) · `--color-accent-2` → `#4de3ec` (Electric Aqua) · `--color-accent-3` → `#f892a0` (Coral Blush)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3a3b3c` | `#ffffff` | 11.23:1 | AAA |
| `#3a3b3c` | `#b3f4f9` | 9.21:1 | AAA |
| `#3a3b3c` | `#ffcfd1` | 8.07:1 | AAA |
| `#3a3b3c` | `#fae7b2` | 9.16:1 | AAA |
| `#646567` | `#ffffff` | 5.83:1 | AA |
| `#646567` | `#b3f4f9` | 4.79:1 | AA |
| `#646567` | `#ffcfd1` | 4.19:1 | AA-large |
| `#646567` | `#fae7b2` | 4.76:1 | AA |
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#151515` | `#b3f4f9` | 14.98:1 | AAA |

### Gradients

- `linear-gradient(85deg, rgb(1, 215, 228) 0%, rgb(243, 195, 6) 25%, rgb(243, 122, 3) 50%, rgb(244, 53, 49) 74%, rgb(240, 14, 92) 100%)`
- `radial-gradient(72% 58% at 14% 100%, color(srgb 0.00392157 0.843137 0.894118 / 0.3), rgba(0, 0, 0, 0) 72%), radial-gradient(64% 52% at 50% 100%, color(srgb 0.952941 0.764706 0.0235294 / 0.24), rgba(0, 0, 0, 0) 70%), radi`
- `conic-gradient(rgb(243, 195, 6), rgb(243, 74, 96) 32%, rgb(1, 215, 228) 64%, rgb(243, 195, 6))`
- `linear-gradient(rgb(1, 215, 228) 0%, rgb(1, 215, 228) 33%, rgb(243, 195, 6) 33%, rgb(243, 195, 6) 66%, rgb(243, 74, 96) 66%, rgb(243, 74, 96) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 380, 600 | Navigation, body copy, labels, links, captions, and compact interface text. | Inter |
| Sora | `--font-display` | webfont | 500, 380 | Display and section headings, plus prominent button labels. | Space Grotesk |

- **Inter:** Use measured weights from light to semibold; keep case natural and tracking neutral.
- **Sora:** Medium-weight geometric headings with neutral tracking and sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.474, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.1 | 0 | — | Sora | Centered hero headline introducing the TypeScript platform. |
| h2 | 24px | 500 | 1.33 | 0 | — | Sora | Major section headings, including stack, pricing, and testimonials. |
| h3 | 20px | 500 | 1.4 | 0 | — | Sora | Feature titles and subordinate product or content headings. |
| body | 15px | 500 | 1.5 | 0 | — | Inter | Explanatory paragraphs, feature descriptions, and card copy. |
| caption | 12px | 380 | 1.33 | 0 | — | Inter | Small supporting labels, metadata, and understated annotations. |
| button | 16px | 500 | 1.5 | 0 | — | Sora | Prominent calls to action and action labels. |
| nav | 14px | 600 | 1.43 | 0 | — | Inter | Primary site navigation and utility menu items. |
| link | 14px | 600 | 1.43 | 0 | — | Inter | Inline and card-level navigation links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 23, 24, 28, 32, 36 px.
- Section rhythm 32px · element gap 12px · card padding 24px · max content width 768px.

The page uses a centered, restrained content measure, with measured page max width of 768px for core content. The hero centers its heading, copy, proof points, and actions above a wide product preview. Below it, sections shift between two- and three-column arrangements, broad product panels, and full-width decorative areas. Major section spacing is generous, while compact lists and card details stay dense. The footer returns to a multi-column link layout. Keep alignments deliberate and avoid filling the open white canvas.

## Shape & elevation

- Radius: button `9999px` · card `18px` · media `10px` · badge `9999px` · nav `9999px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `14px` · xl `15px` · 2xl `18px` · pill `9999px`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(21, 21, 21, 0.16) 0px 8px 24px -12px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(21, 21, 21, 0.04) 0px 1px 2px 0px, rgba(21, 21, 21, 0.1) 0p`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(21, 21, 21, 0.04) 0px 1px 2px 0px, rgba(21, 21, 21, 0.12) 0`
- Shadow `lg-2` (card, section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(21, 21, 21, 0.18) 0px 12px 32px -14px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page favors flat white surfaces, thin pale-gray outlines, and modest rounded corners over heavy shadows. Product previews and selected cards may sit above soft ambient gradient fields, but keep their interfaces crisp. Use subtle separation to distinguish panels; avoid strong elevation that competes with the clean canvas.

## Imagery

Product imagery is primarily interface-led: browser-like panels, deployment views, pricing comparisons, and small diagrams. Frame these previews in softly rounded white cards and let cyan, yellow, and coral gradient light sit behind or around them. The screenshots show little conventional photography; logos and interface elements carry the content. Treat large gradients as atmospheric framing, not as a substitute for legible product UI.

## Components

### Announcement strip

A slim dark top banner with centered event copy, a compact ticket action, and a close control; a narrow multicolor accent runs along its edge.

### Primary CTA

Black pill-shaped action with white label, paired with a light outlined pill for the secondary action.

### Hero product preview

Large browser-like product panel beneath centered hero copy, framed by a soft multicolor glow and broad gradient bands.

### Feature card

White panel with a thin #f0f0f0 border, rounded corners, and concise product or testimonial content.

### Comparison panel

Before-and-after presentation contrasting fragmented setup with an integrated deployment preview.

### Product badge

Compact rounded label with subtle border or soft cyan fill; use deep teal text for cyan-tinted badges.

### Pricing card

Side-by-side pricing comparison with tab-like plan choices, concise feature lists, and a softly colored product backdrop.

### Measured component styles

- **Primary button** (“Get started free”): background #000000 · text #3a3b3c · radius 3.35544e+07px · padding 12px 24px · 380 16px Inter
- **Secondary button** (“See pricing”): transparent background · text #3a3b3c · border 1px solid #646567 · radius 3.35544e+07px · padding 11px 22px · 380 16px Inter
- **Link** (“Learn more about Prisma ORM”): transparent background · text #3a3b3c · radius 3.35544e+07px · padding 8px 14px · 600 14px Inter
- **Card** (““Prisma makes database management incred”): transparent background · text #3a3b3c · border 1px solid #f0f0f0 · radius 18px · padding 24px · 380 16px Inter
- **Badge** (“Build”): transparent background · text #3a3b3c · border 1px solid #e5e5e5 · radius 3.35544e+07px · padding 6px 14px · 380 12px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Platform Pricing Customers Docs Blog”): transparent background · text #3a3b3c · radius 0px · padding 0px · 380 16px Inter

## Do

- Keep the main canvas white and uncluttered.
- Use Graphite Ink for prominent text and Quiet Gray for supporting copy.
- Use Sora for headings and Inter for interface and body text.
- Reserve vivid gradients for product framing and brand accents.
- Make primary and secondary actions rounded pills.
- Separate cards with fine, pale borders rather than heavy fills.

## Don't

- Do not turn every section into a colored band.
- Do not use gradient text for ordinary headings or body copy.
- Do not let decorative color overpower product screenshots.
- Do not crowd the hero; preserve its centered hierarchy.
- Do not rely on deep shadows to define cards.
- Do not introduce unmeasured colors into the brand palette.

## Agent prompt

Build a new Prisma-style developer SaaS page on a clean Gallery White (#ffffff) canvas. Use Graphite Ink (#3a3b3c) for headings and copy, Quiet Gray (#646567) for secondary text, and fine Feather Line (#f0f0f0) borders for cards. Set geometric Sora headings against practical Inter interface text. Create a clear centered introduction, then use product UI previews, comparison panels, and concise feature cards to explain the product. Keep layouts airy between sections but compact inside cards. Use pill-shaped dark primary actions and restrained outlined secondary actions. Apply Mist Cyan (#b3f4f9), Soft Marigold (#fae7b2), and Blush Mist (#ffcfd1) as pale ambient surfaces; reserve Signal Cyan (#01d7e4) and Prisma Gold (#f3c306) for selective spectrum accents. Prioritize crisp, believable interface imagery over decorative illustration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above proof points, pill actions, and a wide product preview. | Primary and secondary CTA, Trust metrics, Product preview | Centered Sora headline, Soft rainbow glow, Pill buttons |
| 2 | logo-cloud | Single horizontal row of customer marks beneath a small centered label. | Social proof | Compact logo row, Quiet caption |
| 3 | comparison | Centered section heading above a two-column Before and After comparison. | Before-and-after contrast, Outcome checklist | Two-column layout, Outlined product card, Checkmark list |
| 4 | how-it-works | Three-column explanation led by a left-aligned section heading. | Sequential steps, Code-led explanation | Numbered steps, Compact code snippets, Product illustrations |
| 5 | product-showcase | Large product-focused area with a wide embedded panel and supporting product content. | Product exploration, Learn-more paths | Interface preview, Soft gradient frame, Grouped feature cards |
| 6 | feature-split | Left-aligned headline followed by vertically organized feature statements and supporting media. | Benefit-led explanation, Platform comparison | Sparse split layout, Product illustration, Short feature blocks |
| 7 | pricing | Heading and plan summary alongside feature checklist, with comparison cards below. | Plan comparison, Free-tier reassurance, Pricing CTA | Plan tabs, Outlined pricing panels, Soft gradient backdrop |
| 8 | testimonials | Centered title over a wide grid of testimonial cards and customer marks. | Customer quotes, Credibility through attribution | Quote cards, Logo and author details |
| 9 | faq | Centered FAQ heading above a single-column set of expandable questions. | Disclosure answers, Scannable questions | Accordion rows, Compact separators |
| 10 | cta | Centered closing message with supporting copy, actions, and a broad media panel. | Final conversion prompt, Product reassurance | Centered CTA, Soft gradient media frame |
| 11 | footer | Brand summary at left, grouped navigation columns, legal links, and oversized brand artwork. | Grouped site navigation, Legal and social links | Multi-column link grid, Brand signature, Large Prisma wordmark |

## Source CSS custom properties (selected)

```css
--color-fd-popover: lab(100% 0 0);
--color-fd-popover-foreground: #3a3b3c;
--color-fd-muted-foreground: #646567;
--color-fd-border: lab(90.952% 0 -.0000119209);
--color-fd-accent: lab(96.52% -.0000298023 .0000119209);
--color-fd-accent-foreground: #3a3b3c;
--color-fd-secondary: lab(96.52% -.0000298023 .0000119209);
--color-fd-primary: #151515;
--color-fd-primary-foreground: #f9faf5;
--color-fd-background: lab(100% 0 0);
--color-fd-foreground: #3a3b3c;
--color-fd-muted: lab(96.52% -.0000298023 .0000119209);
--color-fd-card: lab(100% 0 0);
--color-fd-card-foreground: #3a3b3c;
--color-fd-secondary-foreground: #3a3b3c;
--color-fd-ring: lab(66.128% -.0000298023 .0000119209);
--color-fd-overlay: #0003;
--radius: .625rem;
--background: lab(100% 0 0);
--foreground: #3a3b3c;
--card-foreground: #3a3b3c;
--popover-foreground: #3a3b3c;
--primary: #151515;
--primary-foreground: #f9faf5;
--secondary: lab(96.52% -.0000298023 .0000119209);
--secondary-foreground: #3a3b3c;
--muted-foreground: #646567;
--accent: lab(96.52% -.0000298023 .0000119209);
--accent-foreground: #3a3b3c;
--border: lab(90.952% 0 -.0000119209);
--sidebar-foreground: #3a3b3c;
--sidebar-primary: lab(7.78201% -.0000149012 0);
--sidebar-primary-foreground: lab(98.26% 0 0);
--sidebar-accent: lab(96.52% -.0000298023 .0000119209);
--sidebar-accent-foreground: #3a3b3c;
--sidebar-border: lab(90.952% 0 -.0000119209);
--fa-font-duotone: normal 900 1em/1 "Font Awesome 7 Duotone";
--fa-font-duotone-regular: normal 400 1em/1 "Font Awesome 7 Duotone";
--fa-font-regular: normal 400 1em/1 "Font Awesome 7 Pro";
--fa-font-light: normal 300 1em/1 "Font Awesome 7 Pro";
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/prisma-io