Upstash — AI Agent Tooling Cards
Other · Developer Tools
Landing page · Developer Tools
An emerald-accented data platform page with a large gradient headline, tabbed products, a dotted globe, feature cards and developer tooling.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Upstash — Serverless Data Platform Landing Page
colors:
primary: '#10B981'
canvas: '#FFFFFF'
ink: '#065F46'
surface: '#ECFDF5'
typography:
heading:
fontFamily: '"Inter Tight", "Inter Tight Fallback"'
fontSize: 128px
fontWeight: 700
lineHeight: 128px
body:
fontFamily: Inter, "Inter Fallback"
fontSize: 24px
fontWeight: 400
lineHeight: 32px
---
## Overview
An emerald-accented data platform page with a large gradient headline, tabbed products, a dotted globe, feature cards and developer tooling. Inspected at 1440px desktop and 390px mobile widths on September 30, 2026.
## Colors
Palette tokens describe the observed visual roles. Pair emerald accents and pale mint glows with rounded white surfaces. Large tight display type anchors the page; code panels introduce black contrast. Transparent and gradient text layers must be considered with their painted background, not interpreted as solid-color text.
## Typography
The sampled heading uses "Inter Tight", "Inter Tight Fallback" at 128px, weight 700, with 128px leading. Supporting sample: Inter, "Inter Fallback", 24px / 32px. These are computed styles at capture width, not fixed requirements for every breakpoint. Use licensed font assets or deliberate substitutes.
## Layout
Keep the constrained centered column and generous space between product, feature, agent-tool and customer sections. Mobile reduces headline scale and stacks the cards. Exact responsive breakpoints were not measured.
## Elevation & Depth
Preserve separation through the reference’s surface contrast, border rules and whitespace. Avoid adding heavy shadows to a flat interface. Shadow strength is visual guidance, not a measured token.
## Shapes
Keep the visible distinction between content panels, fields and actions. Match the photographed corner treatment rather than applying one global radius; measured element radii are retained in the evidence.
## Components
Only the initially selected Redis product state is shown; other product tabs and command-copy actions were not exercised.
## Do's and Don'ts
Do adapt hierarchy, spacing and responsive ordering with your own brand and truthful copy. Do not reuse customer endorsements or performance numbers as your own. Do not infer hover, keyboard, validation, dark-mode or accessibility compliance from static images.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.