---
name: Upstash
description: "Worth including as a prime example of modern B2B SaaS design that balances a professional, trustworthy feel with bold, performance-oriented typography."
version: alpha

colors:
  background: "#ffffff"
  primary: "#022c22"
  secondary: "#4b5563"
  tertiary: "#047857"
  neutral: "#9ca3af"
  bg-soft: "#f8faf9"
  bg-quiet: "#f1f5f3"
  muted-soft: "#d1d5db"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A unified serverless data platform for Redis, vectors, queues, and more.

*A clean, high-performance data utility for modern developers*

## Colors

Clean, high-contrast light theme with a vibrant green accent signaling performance and modern infrastructure.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#022c22`)** — uses `ink` token
- **Secondary text (`#4b5563`)** — uses `ink-soft` token
- **Accent (`#047857`)** — uses `accent` token
- **Muted (`#9ca3af`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use geometric-sans for hero text and primary headings
- Use humanist-sans for body copy and descriptions
- Use monospace for code snippets and CLI commands

## Layout

Centered single-column hero transitioning into a multi-column card grid for features.

*Rhythm:* Consistent 4px base unit with generous whitespace to reflect the 'serverless' simplicity.

## Elevation & Depth

- 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
- 0px 5px 40px 0px rgba(9, 14, 21, 0.16)
- Borders: 1px solid #e5e7eb

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Pill-shaped primary buttons with solid green fill and white text; ghost or outlined secondary variants.
- **card:** White cards with subtle border and generous padding, used for product modules and feature highlights.
- **chip:** Horizontal scrollable row of tab-like chips for switching between different platform products (Redis, Vector, etc.).
- **input:** Standard text inputs with subtle gray borders and rounded corners.
- **hero:** Large-scale centered typography with a vibrant gradient on the main headline, followed by a concise value proposition and primary CTA.

## Do's and Don'ts

**Don't:**
- Don't use decorative serif fonts — screenshot shows clean geometric and humanist sans-serif typefaces.
- Don't use a dark theme as the primary interface — screenshot shows a light, airy layout with a white background.
- Don't use neon or overly saturated neon-pastels — screenshot uses a grounded emerald green (#047857) as the main accent.
- Don't use sharp, square corners on primary components — screenshot shows generously rounded corners (12px, pill-shape).
- Don't clutter the interface with too many competing colors — screenshot maintains a tight palette of green, white, and gray.
- Don't use decorative, complex illustrations — screenshot uses simple, abstract geometric graphics and icons.
- Don't use small, cramped typography — screenshot uses a very large, bold hero font with generous line-height.

---

## System Prompt (paste into AI agent)

```
Design DNA for Upstash, a serverless data platform. The UI is a clean, light-themed developer tool focused on clarity and performance. Key colors are white (#ffffff) for the background, dark green (#022c22) for text, and a vibrant emerald (#047857) for primary accents and CTAs. Typography uses geometric-sans for bold hero headlines and humanist-sans for readable body text, with monospace for code. Critical design rules: 1) Maintain a spacious, high-contrast light theme with ample whitespace. 2) Use vibrant green only for primary actions and highlights to draw attention without overwhelming the interface. 3) Ensure all interactive elements have clear, rounded corners and smooth 150ms transitions for a polished, modern feel.
```