`
- Product-line color coding (teal vs indigo) is always paired with text labels

### Reduced Motion

`prefers-reduced-motion: reduce` honored throughout — see §8.

## 10. Responsive Behavior

### Breakpoints

| Name | Min Width | Use |
|------|-----------|----|
| Mobile | — | default, 1-col |
| Tablet | 640 | 2-col grids |
| Desktop | 1024 | 3-col grids |
| Wide | 1280 | max page width |
| Ultra | 1536 | wide hero, expanded gutters |

### Touch Targets

- Minimum 44×44px for primary controls
- CTA buttons at 10px 18px padding + 15px label clear the target comfortably
- Code chip expands hit-area to full chip width

### Collapsing Strategy

- **Nav**: collapses to hamburger ≤ 768px; teal "Get started" CTA stays visible in the collapsed bar
- **Feature grid**: 3-col → 2-col @ 1024 → 1-col @ 640
- **Hero headline**: 64px reduces to ~40px @ 640; tracking loosens slightly as size drops
- **Code blocks**: scroll horizontally on overflow; never wrap schema syntax
- **Product cards**: stack vertically on mobile, retaining the teal/indigo top rule

### Image Behavior

- UI screenshots and schema diagrams are SVG/PNG, served responsive
- Illustrative data-flow graphics scale fluidly and lock minimum legible sizes
- Icons lock at 16–20px

## 11. Content & Voice

### Tone

Clear, technical, and reassuring — Prisma writes like good documentation that happens to be marketing. Sentences are full and precise, the value prop ("type-safe", "serverless Postgres", "the ORM developers trust") is stated plainly, and the copy assumes a developer reader who wants substance over hype. Confident but never loud — the same calm the visual system projects.

### Microcopy Patterns

- **Button verbs**: "Get started", "Start now", "Read the docs", "Talk to sales" — direct, two-word maximum
- **Code-first CTA**: the `$ npx prisma init` chip *is* a CTA — the brand leads with the literal command
- **Feature framing**: benefit-led headline + technical clarification ("Type-safe database access" → "Auto-generated and type-safe query builder")
- **Empty states**: instructive and command-oriented — point the user at the next CLI step

### CTA Verb Conventions

- Primary: "Get started" (the live-probed teal CTA), "Start now"
- Product: "Try Prisma Postgres", "Explore the ORM"
- Docs: "Read the docs", "View on GitHub"
- Sales: "Talk to sales"

## 12. Dark Mode & Theming

The **marketing surface is light-only** — the white canvas is the brand identity and there is no dark-mode toggle on the home page. However, Prisma's **documentation app ships a dark theme** built on Fumadocs tokens (`--color-fd-background: #121212`, `--color-fd-foreground: #ebebeb`, `--color-fd-card: #191919`). That dark theme is a *reading accommodation* for the docs app, not part of the marketing identity — which is exactly why this entry's tokens describe the light surface and treat the `--color-fd-*` variables as out of scope.

The design system itself is theme-aware in a different sense: the `--color-background-*` / `--color-foreground-*` tokens ship in matched pairs (`ppg` / `ppg-reverse`, `neutral` / `neutral-reverse`) so a component can be rendered on light or dark backgrounds by swapping to the reverse token. This is how teal stays correct in both contexts: `--color-foreground-ppg` (`#14b8a6`) on light, `--color-foreground-ppg-strong` (`#2dd4bf`) brightened for dark.

If a dark marketing variant were ever built, the path is already laid: canvas → `#030712` (`--color-background-default`), body → `#f9fafb`, teal brightens to `#2dd4bf` for contrast, indigo to `#818cf8`. The reverse-token architecture means the brand could go dark without re-picking a single hue.

## 13. Lineage & Influences

Prisma's marketing surface is a deliberate counter-move to the dark-terminal aesthetic that dominates developer tooling. Where PlanetScale runs zinc-950 and Vercel runs pure black, Prisma keeps the page paper-white with navy ink and near-black headings — the visual language of a well-typeset technical white paper rather than a CLI session. The typographic pairing reinforces it: Mona Sans, GitHub's wide variable grotesque, sets the display voice (pulled tight to a 64px hero), and Inter carries the body — a combination that reads as open-source-native and documentation-first.

The system is built on Tailwind's palette: the `--color-background-*` and `--color-foreground-*` variables are Tailwind hues renamed into semantic, product-scoped roles, where `ppg` is the Prisma Postgres teal and `orm` is the ORM indigo. The entire saturated color budget goes to one confident teal (`#14b8a6`) for the primary "Get started" CTA, with indigo kept product-scoped rather than competing for primary status. Radii are restrained, shadows soft and near-colorless, whitespace generous. The lineage is "open-source documentation site that grew a marketing budget" — calm, type-safe, legible before it is loud.

- **Mona Sans (GitHub)** — https://github.com/mona-sans — the wide variable grotesque that sets Prisma's display voice
- **Tailwind CSS** — https://tailwindcss.com — the underlying palette (teal-500, indigo-500, gray-900) renamed into Prisma's semantic tokens
- **Stripe** — https://stripe.com — light-canvas developer marketing with a single confident accent
- **Vercel** — https://vercel.com — tight type-led developer hero pattern (Prisma flips the canvas to white)
- **Inter (Rasmus Andersson)** — https://rsms.me/inter/ — the neutral screen-optimized body workhorse

## 14. Do's and Don'ts

### Do

- **Do** keep the canvas bright white (`#ffffff`) — the light surface is the brand's defining counter-move
- **Do** reserve teal `#14b8a6` for the primary CTA and product accents — it's the entire saturated budget
- **Do** use teal-600 `#0d9488` for any teal *text* on white — the 500 fails contrast
- **Do** set headings in Mona Sans pulled tight (-0.022em+) so the wide letterforms close up
- **Do** keep the h2 at the 900 weight — it's the intended punch against the calm body
- **Do** set body in Inter at 16px / 1.55 for white-paper readability
- **Do** keep the ORM indigo `#6366f1` product-scoped, never competing with teal for primary
- **Do** treat the `npx prisma init` code chip as a first-class, copyable CTA element
- **Do** use 6px button radius and 12px card radius
- **Do** keep shadows soft and navy-tinted (`rgba(17,24,39,0.04–0.12)`), never pure black
- **Do** pair product color-coding (teal/indigo) with text labels for accessibility

### Don't

- **Don't** flip the marketing surface to dark — the dark theme belongs to the docs app only
- **Don't** use teal-500 as text on white — it fails AA; drop to 600/700
- **Don't** introduce a second loud accent — the single-teal discipline is the brand
- **Don't** let indigo compete with teal for the primary CTA; indigo is product-scoped
- **Don't** substitute a generic system sans for Mona Sans in headlines — the GitHub grotesque is the voice
- **Don't** use pure-black drop shadows on white; they read as harsh and off-brand
- **Don't** harden radii toward 2–4px terminal corners — Prisma is approachable (6px CTAs, 12px cards)
- **Don't** crowd the layout — the generous 96–128px section rhythm is part of the legibility argument
- **Don't** set body type below 16px or with tight leading — Prisma reads like a paper, not a dashboard
- **Don't** anchor a full section background in teal — it stays foreground for action
- **Don't** confuse `--primary` (`#16a394`, docs/app) with the marketing CTA teal (`#14b8a6`) — use the 500 on marketing

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg: #ffffff
surface: #f9fafb
text: #1d242f          (navy body)
heading: #111827       (near-black)
brand: #14b8a6         (teal-500 — CTA fill)
brand-text: #0d9488    (teal-600 — teal text on white)
brand-strong: #2dd4bf  (teal-400 — hover/dark)
accent-orm: #6366f1    (indigo — ORM line)
accent-wash: #d9f9f6   (pale teal badge bg)
accent-wash-text: #154f47
border: #e2e8f0
on-brand: #ffffff
```

### Example Component Prompts

1. "Create a hero section on a white `#ffffff` canvas: a 64px Mona Sans headline at 700 weight with -0.022em tracking in near-black `#111827`, an 18px Inter subhead in navy `#1d242f` below. Pair a primary teal button (`#14b8a6` fill, white text, 6px radius, 10px 18px padding, 15/600 label) saying 'Get started' with a gray code chip (`#f3f4f6` bg, `#111827` mono text, 6px radius) reading '$ npx prisma init'."

2. "Design a 3-card feature grid on white: each card `#ffffff` bg, 24px padding, 12px radius, 1px `#e2e8f0` border, ambient `rgba(17,24,39,0.04)` shadow. Card title in 20px Inter 600 `#111827`, body in 16px Inter 400 `#1d242f`. On hover, border → `#cbd5e1` and shadow lifts to standard. No saturated color except a small teal `#d9f9f6` 'New' pill where relevant."

3. "Build a product-line switcher: two tabs, 'Prisma Postgres' accented teal `#14b8a6` and 'ORM' accented indigo `#6366f1`. Selected tab shows a 2px bottom rule in its accent color; cards below carry a matching top accent rule. Tab labels in 15px Inter 600, navy `#1d242f` when inactive."

4. "Create a teal CTA band: white `#ffffff` background, centered 36px Mona Sans 900 heading `#111827`, 18px Inter subhead `#6b7280`, and a single primary teal button (`#14b8a6`, white text, 6px radius) 'Start now'. Keep it flat — soft navy-tinted shadow only, no gradients."

5. "Design a code block: `#f9fafb` background, 1px `#e2e8f0` border, 8px radius, 14px mono `#1d242f` body at 1.6 line-height, syntax-highlighted. Inline code in surrounding prose renders in 14px mono at 500 weight. Add a copy button in the top-right that confirms with a brief teal tick."

6. "Build a newsletter input row on white: text input `#ffffff` bg, 1px `#e2e8f0` border, 6px radius, 10px 12px padding, `#9ca3af` placeholder, navy `#1d242f` value. On focus, border → `#14b8a6` with a 3px `rgba(20,184,166,0.35)` ring. Submit button is primary teal."

### Iteration Guide

1. **Start white** — `#ffffff` canvas with navy `#1d242f` body and `#111827` headings. If you're on a dark canvas, you've built the docs theme, not the marketing brand.
2. **Spend all saturated color on teal** — `#14b8a6` for the CTA, nothing else competing. One loud color, everywhere else neutral.
3. **Teal text needs the 600** — any teal-colored text or link uses `#0d9488`, not `#14b8a6`. Verify contrast.
4. **Mona Sans display, pulled tight** — wide grotesque at -0.022em+ tracking; the h2 hits 900 weight. Inter for body.
5. **Gentle radii** — 6px buttons, 12px cards. Not 2–4px terminal corners, not pillowy consumer pills.
6. **Soft navy shadows** — `rgba(17,24,39,0.04–0.12)`, never pure black, never teal (except the focus ring).
7. **Lead with the command** — the `npx prisma init` code chip is a CTA; treat it as a first-class element.
8. **Breathe** — 96–128px section rhythm, 16px body, generous leading. Prisma reads like a paper.

---

*Theme-toggle audit: score=2, signals=[tailwind-dark-class] — dark signal is the Fumadocs docs theme; marketing surface is light.*