Dark serverless-data brand: a near-black canvas with mint-white #ecfdf5 text, one gigantic Inter Tight headline filled with an emerald-to-amber gradient (#34d399 to #f59e0b), compact emerald pill CTAs, JetBrains Mono code, and a per-product segmented switcher (Redis, Vector, QStash, Workflow, Box) as the only multi-color moment.
Browse Upstash 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: 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.
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.
| 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 |
| 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 |
| 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.
"Inter Tight", ui-sans-serif, system-ui, sans-serif (bold display; 600/700)Inter, ui-sans-serif, system-ui, sans-serif"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.
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.