CURATED · OPEN · FREE

Upstash

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

01

Identity DNA

A clean, high-performance data utility for modern developers

02

Color

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

03

Typography

geometric-sans · humanist-sans · monospace

• display72px · 600
• heading32px · 500
• body16px · 400
• caption14px · 400

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

04

Spacing

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

05

Surfaces

1px solid #e5e7eb

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 5px 40px 0px rgba(9, 14, 21, 0.16)

06

Layout

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

07

Motion & Interaction

Color and background-color transitions for interactive elements · Smooth opacity and transform transitions for UI state changes

Subtle color shifts or background fills on interactive elements · Immediate visual feedback via transition or slight transform

08

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.

09

Voice & Don'ts

• Tone Direct, developer-focused, and performance-oriented
• Headlines Bold, concise, and value-driven statements
• CTAs Action-oriented and clear (e.g., 'Start for Free', 'Create Database')

• 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.
• Avoid: Marketing jargon
• Avoid: Vague promises
• Avoid: Overly complex sentences
• Avoid: Passive voice

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko