# Prisma — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces
| 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 |

### Text
| 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 |

### Accent
| 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 |

### Borders
| 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.

## 3. Typography Rules

- Display: `monaSans, "monaSans Fallback", Inter, Roboto, sans-serif` — headings at **weight 900**.
- Body/UI: `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.

## 4. Component Stylings

### Buttons
- **Primary (teal)**: bg `#14b8a6`, text `#ffffff`/`#f9fafb`, radius ~`8px`, h `44px`, Inter 700 14px, trailing arrow. Hover: slight brightness/transform.
- **Brand (indigo, filled)**: bg `#5a67d8`, text `#ffffff`, 2px `#5a67d8` border, radius `2px` (sharp), h `44px`, Inter 700 14px.
- **Brand (indigo, outline)**: transparent bg, text `#5a67d8`, 2px `#5a67d8` border, radius `2px`, h `44px`.
- **Dark (nav Login)**: bg `#1f2937`, text `#f9fafb`, radius `6px`, compact.
- **Text link**: `#1863dc`, Inter 700, underline on inline links.

### Chips / badges
- Small pills h `28px`, radius `6px`, bg `#1f2937` or teal `#14b8a6`, text `#f9fafb`, Inter 500 14px.

### Inputs
- Not prominently captured on marketing; dark field on `#1f2937` with `#1d242f` hairline assumed. Focus ring not captured.

### Cards / panels
- Dark cards: bg `#1f2937`/`#030712`, 1px `#1d242f` border, radius `8–12px`. Light code panels: `#f4f4f4` with dark syntax. Floating cards use soft `0 32px 68px rgba(0,0,0,.3)` shadow.

### Nav
- Floating rounded bar over the dark canvas: logo left, center dropdown links (Products / Resources), right GitHub star count, Discord, dark Login button + teal Get started. Bar has rounded corners and sits inset from the top.

## 5. Layout Principles

- Max content width ~1200px, centered; hero is symmetric and center-aligned.
- Floating nav bar inset from the top edge (~96px header zone).
- Hero anatomy: 52px Mona-Sans-900 centered headline → 18px gray subhead → single teal primary CTA with trailing arrow.
- Section rhythm generous; deeper sections alternate dark and light gray panels for code/screenshots.
- Base spacing on ~4px grid.

## 6. Depth & Elevation

- Radii: `2px` (indigo buttons — sharp), `6px` (chips/dark buttons), `8px` (teal CTA), `10px`, `12px` (cards), full (avatars/pills).
- Control height: buttons `44px` (chips `28px`).
- Elevation: mostly flat with `#1d242f` hairlines. Floating-card shadow `0 32px 68px rgba(0,0,0,.3)`; a subtle top glow `0 -1px 10px rgba(172,171,171,.3)` on some elements.

## 7. Motion

- Micro-transitions ~0.15s. Dominant easing `cubic-bezier(0.4,0,0.2,1)` (standard/ease-in-out) on `color`/`background-color`; `transform 0.2s` + `filter 0.2s` on interactive cards; fast `0.05s` on some hovers.
- No heavy scroll library detected; product screenshots animate inside static frames.

## 8. Backgrounds, Effects & WebGL

- Flat dark slate canvas; no WebGL hero captured. Depth comes from the floating nav bar and soft drop shadows on cards.
- Light gray sections host code and product screenshots. Occasional low-alpha teal edges (`#2dd4be66`).
- No background video, grain, or blur captured. If a section is flat, it is solid slate.

## 9. Do's and Don'ts

### Do
- Keep the canvas deep near-black slate `#030712` with a cool gray text ladder (`#f9fafb` primary, `#9ca3af` muted).
- Use teal `#14b8a6` for the single primary CTA; use Prisma indigo `#5a67d8` only for brand/secondary buttons and outlines.
- Set headlines in Mona Sans at weight 900, centered in the hero; body in Inter 400.
- Give indigo brand buttons sharp `2px` radius and teal CTAs a softer `8px` radius.
- Float the nav as a rounded bar inset from the top; use `#1d242f` hairlines for structure.
- Alternate dark and light-gray panels for code/screenshot sections.

### Don't
- Don't switch to a light overall canvas or drop the teal primary.
- Don't use display weights below 900 for hero headlines.
- Don't blur the teal/indigo roles — teal is the action colour, indigo is brand/secondary.
- Don't add heavy shadows to flat panels; reserve the big soft shadow for genuinely floating cards.
- Don't round the indigo buttons — they stay sharp at 2px.

## 10. Responsive Behavior

- Fluid type via clamp-style tokens. Nav collapses to a menu on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#030712` · Text `#f9fafb` · Muted `#9ca3af` · Border `#1d242f` · Accent teal `#14b8a6` · Brand indigo `#5a67d8`
- Fonts: Mona Sans 900 (display) / Inter (body) · Body 16px · Radius 8px teal CTA / 2px indigo button / 12px card · Control height 44px
- Focus: not captured · Hover: brightness/transform, 0.15s cubic-bezier(0.4,0,0.2,1)

<prisma_design_language>
Use the Prisma design language: a dark developer-infrastructure theme on a deep near-black slate canvas #030712 with a cool gray text ladder (#f9fafb primary, #9ca3af muted) and a floating rounded nav bar hovering over the page. Headlines are ultra-heavy Mona Sans at weight 900, centered in a symmetric hero (52px display); body is Inter 16/24 at 400. Colour is disciplined: bright teal #14b8a6 carries the single primary CTA (softly rounded ~8px pill with a trailing arrow), while Prisma's classic indigo #5a67d8 handles brand/secondary buttons and 2px-radius sharp outlines; inline links are blue #1863dc. Structure comes from #1d242f slate hairlines, not chrome; floating cards use a soft 0 32px 68px rgba(0,0,0,.3) shadow, and deeper sections alternate dark and light-gray (#f4f4f4) panels for code and product screenshots. Chips are 28px pills at 6px radius in #1f2937 or teal. Motion is quick, 0.15s cubic-bezier(0.4,0,0.2,1) on colour/background with 0.2s transform on cards. Feels: dark, engineered, modern, confident. Avoid: a light overall canvas, dropping teal as the action colour, hero weights under 900, rounding the indigo buttons, or blurring the teal-action / indigo-brand split.
</prisma_design_language>