# Upstash — Marketing Site Design Spec

> Source: upstash.com (live DOM, computed styles), 2026-07-16 (desktop 1568px).
> Coverage: marketing home. Dashboard/console: pending login (`needs-dashboard`). Responsive: breakpoints not fully verified.

## 1. Visual Theme & Atmosphere

Dark, serverless-data brand where a near-black canvas is dominated by one enormous gradient headline running from emerald green into amber gold. Text is a pale mint-white (#ecfdf5) rather than plain white, so the whole surface feels tinted toward the green brand. Display type is set gigantic (128px) and bold in Inter Tight with very tight negative tracking; body and UI drop to Inter, and code is JetBrains Mono. The primary CTA is a compact emerald pill; a segmented product switcher (Redis, Vector, QStash, Workflow, Box) sits below the hero with each product carrying its own icon color, the one place multi-color appears. Structure is quiet — flat dark surfaces, soft radii, subtle zinc borders, no heavy shadows; depth comes from a faint radial glow behind the headline. Feels: dark, modern, energetic, developer-first.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| mint-50 | `#ecfdf5` | Primary text + headings (mint-white, most-used) |
| white | `#ffffff` | Text on colored surfaces |
| zinc-200 | `#e4e4e7` | Secondary / muted text |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page background |
| near-black | `#09090b` | Sections / deep panels |
| surface | `#27272a` | Cards, insets, borders (zinc) |
| mint-tint | `#ecfdf5` | Light card / active tab fill |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| emerald | `#34d399` | Signature accent: primary CTA, logo, headline gradient start |
| green-600 | `#10b981` | Deep green (gradient mid, hovers) |
| green-300 | `#6ee7b7` | Light green highlights |
| amber | `#f59e0b` | Headline gradient end (gold) |
| amber-200 | `#fde68a` | Soft gold highlight |
| red | `#dc2626` | Redis product icon color |
| lavender | `#e9d5ff` | Workflow product tint |

Rule: emerald `#34d399` is the brand — CTA, logo, gradient start. Multi-color appears only on the per-product switcher (Redis red, Workflow lavender, etc.). Headline uses the emerald→amber gradient.

## 3. Typography Rules

- Display: `"Inter Tight", ui-sans-serif, system-ui, sans-serif` (bold display; 600/700)
- UI/body: `Inter, ui-sans-serif, system-ui, sans-serif`
- Code: `"JetBrains Mono", ui-monospace, monospace`

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 128 / 128 | 700 | -3.2px |
| Section (h2) | 48 / 48 | 600 | normal |
| Subhead | 24 / 32 | 400–500 | 0 |
| Body | 16 | 400 | 0 |
| Nav / UI | 16 | 400–500 | 0 |
| Button | 16 | 500 | 0 |
| Code | 14 | 400 | 0 (JetBrains Mono) |

Patterns: display is huge and bold (Inter Tight 700) with strong negative tracking and a green→gold gradient fill; UI is Inter; code is JetBrains Mono.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg emerald `#34d399`, text `#ffffff`, radius 12px, h 40px, 16px/500, padding `0 32px`, trailing arrow.
- **Secondary (Login)**: bg pale mint `#ecfdf5`, text deep green, radius 12px, h 40px, padding `0 16px`.
- **Ghost/nav**: transparent, mint text `#ecfdf5`, pill radius (9999px), h 40px.

### Product switcher (segmented tabs)
- Rounded-top tabs (radius `16px 16px 0 0`), each with a product-colored icon (Redis red `#dc2626`, Vector, QStash, Workflow lavender, Box); active tab fills light (`#ffffff`/`#ecfdf5`), inactive on dark.

### Cards / panels
- bg `#09090b`/`#27272a`, radius 16px, subtle zinc border, no heavy shadow.

### Nav
- h ~64px on black, hairline; green spiral logo + "upstash" wordmark left, center links (Docs, Pricing, Customers, Enterprise, Blog, Company + count badge), right Login pill.

### Announcement bar
- Full-width black strip with underlined policy links, dismissible.

## 5. Layout Principles

- Centered hero: announcement bar → nav → giant gradient display → mint subhead → emerald CTA → product switcher tabs → product detail panel.
- Max content width ~1200px, centered; generous vertical rhythm.
- Product panels are large dark rounded containers below the switcher.

## 6. Depth & Elevation

- Radii: buttons `12px`, cards/tabs `16px`, nav/ghost `pill` (9999px).
- No prominent box-shadows — depth is a faint radial glow behind the headline plus subtle zinc borders on the near-black canvas.

## 7. Motion

- Micro-transitions on hover (color/background/opacity); the product switcher swaps panels on tab click. No heavy scroll library confirmed.

## 8. Backgrounds, Effects & WebGL

- Near-black canvas with a soft radial green glow behind the hero headline. No WebGL / background video confirmed. Flat dark surfaces, subtle borders, gradient text fill (emerald→amber). The gradient is the signature effect.

## 9. Do's and Don'ts

### Do
- Use a near-black canvas (`#000000`/`#09090b`) with pale mint text `#ecfdf5`.
- Set the hero display gigantic in Inter Tight 700 with tight tracking and an emerald→amber gradient fill.
- Keep emerald `#34d399` as the brand accent — CTA, logo, gradient start.
- Use a segmented product switcher with per-product icon colors as the only multi-color moment.
- Keep buttons compact at radius 12px; nav actions as ghost pills.
- Use Inter Tight for display, Inter for UI, JetBrains Mono for code.

### Don't
- Don't use plain-white text — text is mint-tinted `#ecfdf5`.
- Don't spread product icon colors into general chrome.
- Don't add heavy drop shadows — depth is glow + subtle borders.
- Don't set display in a second family — Inter Tight owns the headlines.

## 10. Responsive Behavior

- Nav collapses to a menu on small screens; the 128px display scales down heavily. Breakpoints not fully verified — captured at desktop 1568px.

## 11. Agent Prompt Guide

- Canvas `#000000` · Text `#ecfdf5` · Muted `#e4e4e7` · Surface/Border `#27272a` · Accent `#34d399`
- Font: `Inter Tight` display / `Inter` UI / `JetBrains Mono` code · Body: 16px · Radius: 12px button / 16px card / pill nav · Control height: 40px
- Primary: emerald `#34d399` bg + white text, radius 12px · Headline gradient: `#34d399 → #10b981 → #f59e0b`

<upstash_design_language>
Use the Upstash design language: a near-black canvas #000000/#09090b with pale mint-white text #ecfdf5 rather than plain white. The signature is one gigantic Inter Tight 700 headline (128px, tight -3.2px tracking) filled with an emerald-to-amber gradient (#34d399 to #10b981 to #f59e0b); UI and body are Inter, code is JetBrains Mono. The brand accent is emerald #34d399 — the primary CTA is a compact emerald pill with white text (40px, radius 12px, weight 500); the secondary is a pale-mint #ecfdf5 pill; nav actions are ghost pills. Multi-color appears in exactly one place: a segmented product switcher (Redis red #dc2626, Vector, QStash, Workflow lavender #e9d5ff, Box) with rounded-top tabs carrying per-product icon colors. Cards are dark #09090b/#27272a with subtle zinc borders, radius 16px, and no heavy shadows — depth comes from a faint radial green glow behind the headline. Feels: dark, modern, energetic, developer-first. Avoid: plain-white text, spreading product colors into chrome, heavy drop shadows, and a second display family.
</upstash_design_language>