Dark developer-infrastructure brand: a deep near-black slate canvas #030712 with a floating rounded nav bar, ultra-heavy Mona Sans 900 headlines centered in the hero, a bright teal #14b8a6 primary CTA and Prisma-indigo #5a67d8 brand buttons at sharp 2px radius, Inter body and alternating dark/light-gray code panels.
Browse Prisma in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: prisma.io (live DOM, computed styles), 2026-07-16 (desktop 1512px). Coverage: home / marketing. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified.
Confident dark developer-infrastructure brand: a deep near-black slate canvas with a centered, ultra-heavy Mona Sans headline (weight 900) and a floating rounded nav bar hovering above the page. Colour is disciplined — a bright teal #14b8a6 carries the primary call-to-action while Prisma's classic indigo #5a67d8 handles secondary/brand buttons and outlines; everything else is a cool gray ladder. The mood is engineered and modern: generous whitespace around a symmetrical hero, sharp small radii on the indigo buttons contrasted with softly rounded teal pills, and low-alpha slate hairlines instead of heavy chrome. Some deeper sections invert to light gray panels for code and product screenshots. Feels: dark, engineered, modern, confident.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #030712 | Primary dark page canvas |
| surface | #1f2937 | Raised chips, dark buttons, panels |
| surface-teal | #134e4a | Teal-tinted inset panels |
| light-1 | #f3f4f6 | Light section background |
| light-2 | #f4f4f4 / #f7fafc | Light panels, code cards |
| white | #ffffff | Button text, light cards |
| Token | Hex | Role / usage |
|---|---|---|
| text | #f9fafb / #f7fafc | Primary text on dark |
| ink | #212121 / #2d3748 | Text on light sections |
| muted | #9ca3af | Secondary text / subhead |
| muted-2 | #718096 / #4a5568 | Tertiary text on light |
| faint | #a0aec0 | Captions / placeholder |
| Token | Hex | Role / usage |
|---|---|---|
| teal | #14b8a6 | Primary CTA fill (Try Prisma / Get started) |
| teal-bright | #2dd4bf | Bright teal accents, links |
| indigo | #5a67d8 | Brand / secondary buttons + outlines |
| blue-link | #1863dc | Inline text links |
| Token | Hex | Role / usage |
|---|---|---|
| border | #1d242f | Default hairline on dark (most used) |
| border-indigo | #5a67d8 | Outline-button border |
| border-teal | #2dd4be66 | Low-alpha teal edge |
Rule: teal #14b8a6 is the single primary-action colour; indigo #5a67d8 is reserved for brand/secondary buttons and outlines. Body chrome stays on the gray ladder.
monaSans, "monaSans Fallback", Inter, Roboto, sans-serif — headings at weight 900.Inter, Roboto, "Helvetica Neue", Arial, sans-serif.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 52 / 58 | 900 | normal, Mona Sans |
| Section (h2) | 36 / 48 | 900 | -0.54px, Mona Sans |
| Subsection (h3) | 16 / 24 | 800 | normal, Mona Sans |
| Body | 16 / 24 | 400 | normal, Inter |
| Lead / subhead | 18 / 24 | 400–700 | normal, Inter, #9ca3af |
| UI / button | 14 | 700 | normal, Inter |
Patterns: display is extremely heavy (900) and centered in the hero; body is Inter 400. Section headings add slight negative tracking.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.