# Upstash · Design system migration spec

> Source: https://upstash.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of modern B2B SaaS design that balances a professional, trustworthy feel with bold, performance-oriented typography.

## 1. Identity DNA

The design system for Upstash is built around the analogy of a high-performance data utility: clean, reliable, and immediately accessible. Every element serves a functional purpose, reflecting the platform's serverless architecture where complexity is abstracted into simplicity.

**One-liner:** A unified serverless data platform for Redis, vectors, queues, and more.
**Keywords:** serverless · data platform · developer · infrastructure · performance
**Analogy:** A clean, high-performance data utility for modern developers

## 2. Color

The color system is a study in restraint, using a foundational palette of white and gray to establish clarity. A single vibrant green accent is reserved exclusively for primary actions and key performance indicators, creating a clear visual hierarchy of importance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f8faf9` | card background |
| `--bg-quiet` | `#f1f5f3` | quiet area |
| `--ink` | `#022c22` | body text |
| `--ink-soft` | `#4b5563` | secondary text |
| `--muted` | `#9ca3af` | placeholder |
| `--muted-soft` | `#d1d5db` | weak hint |
| `--accent` | `#047857` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

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

This disciplined application of color ensures the interface remains focused and performance-oriented, never decorative.

## 3. Typography

The typographic voice combines a bold, geometric sans-serif for authoritative headlines with a more humanist sans-serif for approachable body copy. This duality mirrors the product's balance between robust infrastructure and developer-friendly accessibility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 600 | -2px | Primary hero headline |
| heading | 32px | 1.25 | 500 | -0.5px | Section titles and card headings |
| body | 16px | 1.5 | 400 | 0px | Primary body text and descriptions |
| caption | 14px | 1.4 | 400 | 0px | Secondary text, labels, and navigation |

**Type rules:**
- 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

## 4. Spacing

Spacing is governed by a strict 4px base unit, creating a consistent vertical rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** Consistent 4px base unit with generous whitespace to reflect the 'serverless' simplicity.

## 5. Surfaces

Surfaces are defined by lightness and subtle elevation, using thin borders and soft shadows to delineate content cards from the background. This creates a clean, layered depth without adding visual weight.

- **Radius:** sm 8px · md 12px · lg 16px · pill 9999px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
  - 0px 5px 40px 0px rgba(9, 14, 21, 0.16)
- **Borders:** 1px solid #e5e7eb

## 6. Layout

The layout follows a centered, single-column skeleton that establishes immediate focus in the hero section. This linear flow then expands into a multi-column grid to present platform features in a structured, scannable format.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion in this system is strictly functional, applied only to communicate interactive feedback and state changes. All transitions follow a standardized 150ms ease-out curve, ensuring consistency and reinforcing the platform's emphasis on speed and reliability.

- **Durations:** micro 150ms · small 220ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color and background-color transitions for interactive elements
  - Smooth opacity and transform transitions for UI state changes

- **Hover:** Subtle color shifts or background fills on interactive elements
- **Click:** Immediate visual feedback via transition or slight transform
- **Transition:** Standardized 150ms ease-out transitions for color, background, and opacity
- **Keyboard:** Standard focus rings for accessibility on interactive elements

## 8. Voice & Don'ts

The editorial voice is direct and technical, mirroring the clarity of well-written documentation. It uses concise, value-driven statements and active CTAs, deliberately avoiding marketing abstraction.

- **Tone:** Direct, developer-focused, and performance-oriented
- **Headline style:** Bold, concise, and value-driven statements
- **CTA style:** Action-oriented and clear (e.g., 'Start for Free', 'Create Database')
- **Avoid:** Marketing jargon / Vague promises / Overly complex sentences / Passive voice

### Don'ts
- ❌ 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.

The system explicitly rejects decorative elements, complex illustrations, and dark themes, committing instead to a focused, high-contrast light interface.

## System Prompt (paste into AI tool)

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