taste-skill / Compare styles / Neon vs Upstash

Neon vs Upstash: design style comparison

Neon is Serverless Pitch-Black & Luminous Cyber-Mint Postgres; Upstash is Oversized Emerald Typography & Clean Serverless Daylight. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 15 of 18 tracked tokens differ.

Side-by-side preview

Neon style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Neon canvas, text, muted and accent tokens.

Card on surface + border tokens

Accent link: #34D59A · border #242628

Upstash style · light

Ship the product, not the pixels.

Preview text rendered with the extracted Upstash canvas, text, muted and accent tokens.

Button QStash

Card on extracted card recipe

Accent link: #00BC7D · border rgba(0, 0, 0, 0.05)

Key differences

Neon is a dark design (canvas #000000) while Upstash is light (canvas #F5F5F5).
Accent: #34D59A (Neon) vs #00BC7D (Upstash).
Headings: Inter vs Inter Tight.
Display type: Neon H1 is 56px / -0.04em (w400); Upstash H1 is 128px / -0.025em (w700) — Upstash sets 72px larger headlines.
Primary button radius: 9999px vs 10px; height 36px vs 40px.
Depth: Neon uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px most; Upstash uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px most.

Token table

Token	Neon	Upstash
Canvas	`#000000`	`#F5F5F5`
Surface	`#131415`	`#FFFFFF`
Text	`#FFFFFF`	`#022C22`
Muted text	`#94979E`	`#71717B`
Accent	`#34D59A`	`#00BC7D`
Border	`#242628`	`rgba(0, 0, 0, 0.05)`
Heading font	`Inter`	`Inter Tight`
Body font same	`Inter`	`Inter`
Mono font same	`JetBrains Mono`	`JetBrains Mono`
H1	`56px / -0.04em (w400)`	`128px / -0.025em (w700)`
Button radius	`9999px`	`10px`
Button height	`36px`	`40px`
Most-used radius	`4px`	`35.2px`
Most-used shadow	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.2s`	`0.15s`
Container max-width	`1600px`	`1280px`
Mode	`dark`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	36px	`0px 18px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 500`
Get started	44px	`0px 28px`	`9999px`	`#FFFFFF` `#1A1A1A`	`none`	`16px / 500`
Log in	36px	`0px 18px`	`9999px`	`transparent` `#FFFFFF`	`1px solid #61646B`	`14px / 500`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Button	40px	`0px 20px`	`10px`	`#FFFFFF` `#065F46`	`none`	`16px / 500`
QStash	64px	`0px 32px`	`16px 16px 0px 0px`	`#F5F5F5` `#71717B`	`2px solid rgba(0, 115, 89, 0.08)`	`24px / 600`
Explore Redis	42px	`8px 20px`	`12px`	`rgba(0, 115, 89, 0.08)` `#007A55`	`none`	`16px / 500`

Which style should you pick?

Pick Neon if you want Pitch-black #000000 canvas with #242628 / #303236 dark structural borders, 56px tight -0.04em Inter display headings, and #34D59A / #00E599 luminous cyber-mint accents — signals: dark, postgres, database, mint, neon-green, pitch-black, neon.

Pick Upstash if you want Soft #F5F5F5 daylight canvas with #FFFFFF cards, deep forest-emerald #022C22 monumental 128px Inter Tight headlines (-0.025em), JetBrains Mono snippets, and #00BC7D emerald accents — signals: light, redis, kafka, emerald, green, oversized-type, upstash, inter-tight.

Shared traits: serverless, devtools.

Rules that differ

Neon never:

NEVER substitute generic uncalibrated gray backgrounds for Neon’s exact #000000 canvas and #131415 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #242628 (1px solid #242628).

Upstash never:

NEVER substitute generic uncalibrated gray backgrounds for Upstash’s exact #F5F5F5 canvas and #FFFFFF surface pairing.
NEVER replace Inter Tight display typography or ignore its signature scale (128px / -0.025em (w700)).
NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.05) (1px rgba(0,0,0,0.05)).

Go deeper

Neon style guide Upstash style guide Neon token spec Upstash token spec Supabase vs Neon Resend vs Neon Trigger.dev vs Neon Railway vs Neon Turso vs Neon Vercel vs Upstash

Values extracted from https://neon.tech and https://upstash.com. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →