--- version: alpha name: Prisma description: A near-white developer canvas where GitHub's Mona Sans swings from feather-light 64px headlines to ultra-black 900-weight statements, deep Prisma teal carries every primary action, and Inter keeps the body copy quiet — an ORM marketing site that reads as calm, type-led infrastructure documentation. colors: # Surface / canvas background: "#ffffff" surface: "#f3f4f6" # muted card fills, inline code pills surface-tint: "#e2e8f0" # faint blue-gray section bands, hero wash surface-teal: "#ccfbf1" # light teal container fills, highlight chips # Ink / text ink: "#111827" # near-black navy headings and body ink-secondary: "#374151" # supporting copy, dark links ink-muted: "#6b7280" # captions, metadata, footer links ink-faint: "#9ca3af" # lowest-emphasis helper text on-dark: "#ffffff" # text on teal buttons and dark surfaces # Brand accent — Prisma teal primary: "#0d9488" # primary CTA fill, brand teal primary-hover: "#0f766e" # primary button hover — deeper teal primary-strong: "#154f47" # accent foreground, pressed teal primary-green: "#0ac864" # the fresh "add" green used in diffs/highlights primary-soft: "#99f6e4" # light teal strokes, tints on-primary: "#ffffff" # Secondary accent — indigo (utility links, ORM marks) accent-indigo: "#4f46e5" # ORM foreground marks, secondary links accent-indigo-strong: "#4338ca" # Borders border: "#e2e8f0" # hairline dividers, card edges border-strong: "#d1d5db" # input outlines, stronger separators # Shadow tints (opaque approximations for the elevation table) shadow-soft: "#000000" # was rgba(0,0,0,0.04) — Google format requires hex shadow-ambient: "#000000" # was rgba(0,0,0,0.1) — Google format requires hex typography: display-hero: fontFamily: "Mona Sans VF, Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.13 letterSpacing: -1.6px display-black: fontFamily: "Mona Sans VF, Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: -1px heading: fontFamily: "Mona Sans VF, Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.6px heading-sub: fontFamily: "Mona Sans VF, Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.33 letterSpacing: -0.3px body-large: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.38 letterSpacing: 0px caption: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.71 letterSpacing: 0px label: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0px overline: fontFamily: "Inter, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.33 letterSpacing: 0.36px code-mono: fontFamily: "Mona Sans Mono VF, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 40px 5xl: 64px 6xl: 96px rounded: xs: 2px sm: 6px md: 8px lg: 10px xl: 12px 2xl: 16px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 10px 16px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.sm}" padding: 10px 16px button-secondary-hover: backgroundColor: "{colors.surface-tint}" textColor: "{colors.ink}" button-code: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.code-mono}" rounded: "{rounded.sm}" padding: 10px 16px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-muted: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 20px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 12px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" padding: 16px 24px link: textColor: "{colors.ink-secondary}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.primary}" typography: "{typography.body}" padding: 0px code-ref: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.code-mono}" rounded: "{rounded.sm}" padding: 2px 6px badge: backgroundColor: "{colors.surface-teal}" textColor: "{colors.primary-strong}" typography: "{typography.overline}" rounded: "{rounded.pill}" padding: 4px 10px --- # Prisma Design System ## Overview Prisma's marketing site looks like documentation that decided to become beautiful. The canvas is white (`{colors.background}`) with the faintest blue-gray wash (`{colors.surface-tint}`) bleeding into the hero — no hard gradients, no product photography, just type and air. The single most distinctive move is what the headline does with weight: "Postgres, perfectly managed" is set in **Mona Sans** — GitHub's open-source variable grotesque — and Prisma exploits the variable axis hard. The hero runs at a feather-light 400 weight (`{typography.display-hero}`), while the punchline drops to an ultra-black 900 (`{typography.display-black}`). One typeface, two personalities, and the contrast carries the whole page. The color discipline is the second signature. Prisma teal (`{colors.primary}`) is a deep, slightly desaturated blue-green that owns every primary action — the "Create database" button, the highlighted CLI line, the inline accents. It never shouts; it reads as the color of something dependable. Body copy switches off Mona Sans entirely and runs in **Inter** at a calm 16px/400 (`{typography.body}`), near-black navy (`{colors.ink}`) on white, so the page never feels marketed-at. A `Mona Sans Mono` variable mono (`{typography.code-mono}`) handles the CLI snippets and code references, the literal `$ npx prisma init` that anchors the hero. The overall impression is unhurried infrastructure confidence. Cards sit on near-invisible hairline borders (`{colors.border}`) with whisper-soft shadows; radii stay small and graduated (6–12px), never pill-happy except on tags. There's a secondary indigo (`{colors.accent-indigo}`) that surfaces around ORM-specific marks and utility links, but teal is unmistakably the brand. Where competitors flood developer landing pages with neon and motion, Prisma trusts whitespace, a two-weight type story, and one trustworthy green to do the work. **Key Characteristics:** - White canvas (`{colors.background}`) with a faint blue-gray hero wash (`{colors.surface-tint}`) — light-first, no dark marketing theme - **Mona Sans** variable font exploited across the weight axis: 400 hero (`{typography.display-hero}`) vs 900 punchline (`{typography.display-black}`) - **Inter** for all body and UI copy — quiet, neutral, never competing with the display type - **Mona Sans Mono** (`{typography.code-mono}`) for CLI snippets and inline code refs - Deep Prisma teal (`{colors.primary}`) owns every primary CTA — calm, dependable, never neon - Near-black navy ink (`{colors.ink}`) instead of pure black — softer, warmer reading - Tight negative tracking on display type (-1.6px at 64px) for dense, confident headlines - Graduated small radii (`{rounded.sm}` 6px buttons → `{rounded.xl}` 12px cards) — pills reserved for tags only - Hairline borders (`{colors.border}`) plus whisper shadows do the structural work, not heavy boxes - Light teal containers (`{colors.surface-teal}`) and a fresh "add" green (`{colors.primary-green}`) for highlight chips - Secondary indigo (`{colors.accent-indigo}`) for ORM-specific marks — a supporting note, not the brand color - Generous vertical rhythm (`{spacing.6xl}` 96px) between marketing sections, compact internals ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The dominant canvas. Most of the site sits on pure white. - **Light Gray** (`{colors.surface}`): Muted card fills and inline code-pill backgrounds. - **Blue-Gray Wash** (`{colors.surface-tint}`): The faint tint behind the hero and section bands — barely a step off white. - **Teal Container** (`{colors.surface-teal}`): Light teal fills for highlight chips and badges. ### Ink / Text - **Near-Black Navy** (`{colors.ink}`): Headings, display, and body. A warm near-black, not pure. - **Slate** (`{colors.ink-secondary}`): Supporting copy and dark links. - **Muted Slate** (`{colors.ink-muted}`): Captions, metadata, and footer links. - **Faint Slate** (`{colors.ink-faint}`): The lowest-emphasis helper text. ### Brand Accent - **Prisma Teal** (`{colors.primary}`): The singular brand color. Primary CTAs, highlighted CLI lines, accents. Deep and dependable, used with restraint. - **Teal Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Deeper teals for hover and pressed states, accent foreground. - **Fresh Green** (`{colors.primary-green}`): The lively "add" green for diff symbols and highlight moments. - **Teal Soft** (`{colors.primary-soft}`): Light teal strokes and tints. ### Secondary Accent - **Indigo** (`{colors.accent-indigo}`, `{colors.accent-indigo-strong}`): ORM-specific marks and secondary utility links. A supporting note — teal remains the brand. ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Card edges and dividers — the primary structural device. - **Strong Border** (`{colors.border-strong}`): Input outlines and stronger separators. - **Soft / Ambient** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the whisper-soft card shadows (originals were rgba — flattened for the Google spec). ## Typography ### Font Family - **Display**: `Mona Sans VF` (GitHub's open-source variable grotesque), fallbacks `Inter, Roboto, Helvetica Neue, Arial`. Used for all headings, exploited across the variable weight axis. - **Body / UI**: `Inter`, fallbacks `Roboto, Helvetica Neue, Arial`. Carries all paragraph and interface copy. - **Monospace**: `Mona Sans Mono VF`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. CLI snippets and inline code references. - **OpenType / tracking**: large display uses negative tracking (-1.6px at 64px); body sits at near-zero. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 64px / 400 / -1.6px — the feather-light Mona Sans marquee headline | | `display-black` | 40px / 900 — the ultra-black punchline statement | | `heading` | 30px / 400 — section titles | | `heading-sub` | 24px / 700 — feature headings | | `body-large` | 18px / 400 — lead paragraphs | | `body` | 16px / 400 — standard Inter body | | `body-medium` | 16px / 600 — emphasized inline copy | | `caption` | 14px / 400 — metadata, helper text | | `label` | 14px / 700 — button text, UI labels | | `overline` | 12px / 600 / 0.36px — eyebrows and category markers | | `code-mono` | 16px / 400 — **Mona Sans Mono** CLI and inline code refs | ### Principles - **Two weights, one face**: the brand's headline drama is built entirely from Mona Sans's variable axis — feather-light 400 against ultra-black 900. - **Inter keeps quiet**: body copy never competes with display; it stays neutral, 16px, near-black navy. - **Tighten the big, leave the small**: negative tracking on display sizes; near-zero on body. - **Mono is for code, not voice**: unlike eyebrow-mono brands, Prisma reserves Mona Sans Mono for actual CLI and code. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight internals. Generous vertical rhythm (`{spacing.6xl}` = 96px) separates major marketing sections; component internals stay compact (`{spacing.md}`–`{spacing.2xl}`). ### Grid & Container - Max content width: ~1200px, centered - Common pattern: a centered hero with a CLI snippet button below, then a three-up feature grid of bordered cards - Feature sections pair an icon, a short heading, and a product screenshot inside a hairline card ### Whitespace Philosophy - **Air over ornament**: whitespace and the two-weight type story carry the page; decoration is minimal - **Quiet cards**: feature cards float on hairline borders with whisper shadows, never heavy chrome - **Calm density**: internals are compact and tidy, surrounded by generous section padding ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most page content | | Subtle (Level 1) | `0 1px 2px` at ~4% black (`{colors.shadow-soft}`) | Resting cards, small chips | | Card (Level 2) | `0 8px 16px -4px` + `0 2px 2px` at ~4% black (`{colors.shadow-soft}`) | Feature cards, product screenshots | | Elevated (Level 3) | `0 10px 25px -5px` at ~10% black (`{colors.shadow-ambient}`) | Hovered cards, floating panels | | Dialog (Level 4) | `0 32px 68px` at ~30% black (`{colors.shadow-ambient}`) | Modals, the cookie/consent sheet | **Shadow Philosophy**: Prisma's shadows are whisper-soft and almost incidental. The page is structured by hairline borders and whitespace, not elevation. When shadows appear, they're low-opacity, large-radius, and used to gently lift feature cards off the canvas rather than to dramatize. The deepest shadow on the site belongs to dialogs, where a wide ambient cast makes the overlay read as a layer above everything. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `xs` | 2px | Small utility buttons, the consent-sheet chrome | | `sm` | 6px | Buttons and inputs — the default interactive radius | | `md` | 8px | Modals, images | | `lg` | 10px | Muted cards | | `xl` | 12px | Feature cards | | `2xl` | 16px | Large containers | | `pill` | 9999px | Tags and badges only | The system is restrained and graduated: 6px on buttons scaling to 12px on cards. Pills are reserved for tags — primary buttons stay rectangular-with-soft-corners, signaling precision over playfulness. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Prisma teal (`{colors.primary}`) fill, white text, 6px radius. The main CTA ("Create database"). Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — Light gray (`{colors.surface}`) fill, near-black navy text. Hover lifts to `{colors.surface-tint}`. - **`button-code`** — A gray-filled snippet button rendering a CLI line in `{typography.code-mono}` — the `$ npx prisma init` pattern beside the hero CTA. ### Cards - **`card`** / **`card-muted`** — White or light-gray surface, hairline border, 10–12px radius. Hold feature copy and product screenshots. ### Inputs - **`input`** — White fill, `{colors.border-strong}` outline, 6px radius. **`input-focus`** keeps the navy ink and tightens the border; teal is reserved for actions, not focus rings here. ### Links - **`link`** — Slate (`{colors.ink-secondary}`) text by default. **`link-hover`** shifts to teal (`{colors.primary}`). ### Code & Badges - **`code-ref`** — Inline CLI/code chip: light-gray fill, navy mono text, 6px radius. - **`badge`** — Light-teal container fill, teal-strong text, pill radius, uppercase overline. ### Navigation - **`nav-bar`** — White, hairline bottom border, Inter labels. Flush at the top, no heavy shadow. ## Do's and Don'ts ### Do - Keep the canvas white (`{colors.background}`) with at most a faint blue-gray wash (`{colors.surface-tint}`) in the hero - Build headline drama from **Mona Sans**'s variable axis — feather-light 400 (`{typography.display-hero}`) against ultra-black 900 (`{typography.display-black}`) - Set all body and UI copy in **Inter** at 16px (`{typography.body}`), near-black navy (`{colors.ink}`) - Reserve Prisma teal (`{colors.primary}`) for primary actions and key highlights — keep it dependable, never neon - Render CLI and code in **Mona Sans Mono** (`{typography.code-mono}`) — the `$ npx prisma init` voice - Separate content with hairline borders (`{colors.border}`) and whitespace before reaching for shadows - Keep button radius compact at `{rounded.sm}` (6px); reserve pills for tags - Use generous section padding (`{spacing.6xl}` 96px) with compact internals ### Don't - Don't reach for neon or saturated greens — Prisma teal is deep and calm, not electric - Don't make indigo (`{colors.accent-indigo}`) the brand color — it's a supporting note for ORM marks - Don't set body copy in Mona Sans — Inter keeps the page quiet; display and body are different faces - Don't pill-shape primary buttons — the system tops out at 6px on buttons, 12px on cards - Don't scatter heavy shadows — flatness plus hairlines is the default; elevation is whisper-soft - Don't use pure black for text — the ink is a warm near-black navy (`{colors.ink}`) - Don't loosen display tracking to 0 — large type stays compressed (-1.6px at hero) - Don't add a dark marketing theme — the site is committedly light --- ## Responsive Behavior ### Breakpoints *(Extraction surfaced 8 breakpoints; the values below are the standard stops the site behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Single column; hero scales 64px → ~36px; nav collapses to a menu; feature grid stacks to one column | | Tablet | 640–1023px | Two-column feature grid; hero CLI button stacks below the primary CTA | | Desktop | 1024–1279px | Full three-up feature grid; centered hero | | Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.6xl}`) | ### Touch Targets - Buttons run ~40px tall with `10px 16px` padding — comfortable for thumbs - Nav links and footer links carry generous vertical padding ### Collapsing Strategy - **Navigation**: full horizontal nav → menu toggle on mobile; the teal "Get started" CTA persists - **Hero**: headline and CLI snippet stack vertically; type drops from 64px toward ~36px keeping proportional tracking - **Feature grid**: three-up → two-up → single column - **Spacing**: section padding compresses from 96px toward ~48px ### Image Behavior - Product screenshots sit inside hairline cards and scale as flex/grid children, never bleeding edge-to-edge --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Text: Near-Black Navy (`{colors.ink}`) - Brand accent: Prisma Teal (`{colors.primary}`) - Secondary text: Slate (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Primary CTA: Teal (`{colors.primary}`) fill, white text ### Example Component Prompts - "Create a centered hero on white (`{colors.background}`) with a faint blue-gray wash (`{colors.surface-tint}`): a 64px Mona Sans headline at weight 400 (`{typography.display-hero}`), letter-spacing -1.6px, near-black navy (`{colors.ink}`), with one word dropped to weight 900 for emphasis — then a teal primary button (`{colors.primary}` fill, white text, `{rounded.sm}`) beside a gray CLI snippet button" - "Build a CLI snippet button: light-gray (`{colors.surface}`) fill, near-black navy mono text in `{typography.code-mono}`, `{rounded.sm}` radius, rendering `$ npx prisma init`" - "Create a feature card: white (`{colors.background}`) surface, hairline (`{colors.border}`) edge, `{rounded.xl}` radius, whisper-soft shadow, holding a teal icon, a 24px Mona Sans heading (`{typography.heading-sub}`), 16px Inter body (`{typography.body}`), and a product screenshot" - "Design a primary button: Prisma teal (`{colors.primary}`) fill, white text, `{typography.label}`, `{rounded.sm}` radius, `10px 16px` padding; hover deepens to `{colors.primary-hover}`" - "Render an inline code chip: light-gray (`{colors.surface}`) fill, navy (`{colors.ink}`) Mona Sans Mono text, `{rounded.sm}` radius, `2px 6px` padding" - "Create a tag badge: light-teal (`{colors.surface-teal}`) fill, teal-strong (`{colors.primary-strong}`) uppercase overline (`{typography.overline}`), pill radius (`{rounded.pill}`)" ### Iteration Guide 1. Start on white (`{colors.background}`). If you reached for a gradient or dark background, stop — Prisma is light with at most a faint wash. 2. Headline drama comes from Mona Sans weight contrast, not color — verify the 400-vs-900 axis play. 3. Body copy must be Inter (`{typography.body}`), not Mona Sans, and near-black navy (`{colors.ink}`). 4. Teal (`{colors.primary}`) is for primary actions and key highlights only — keep it deep and calm, never neon. 5. Separate with hairline borders (`{colors.border}`) before shadows; keep elevation whisper-soft. 6. Keep radii tight: `{rounded.sm}` (6px) on buttons, `{rounded.xl}` (12px) on cards. Pills for tags only. 7. Render CLI and code in Mona Sans Mono (`{typography.code-mono}`) — it's the developer-proof voice. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Prisma. Brand names and trademarks belong to their respective owners.