taste-skill / Compare styles / PlanetScale vs Upstash

PlanetScale vs Upstash: design style comparison

PlanetScale is Pure Monospace ASCII Engineering Manual & Zero-Radius Brutalism; Upstash is Oversized Emerald Typography & Clean Serverless Daylight. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 13 of 18 tracked tokens differ.

Side-by-side preview

PlanetScale style · light
Ship the product, not the pixels.
Preview text rendered with the extracted PlanetScale canvas, text, muted and accent tokens.
Get in touch View sandbox
Card on surface + border tokens
Accent link: #F35815 · border #C1C1C1

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

Both are light-mode designs, but the canvases differ: #FAFAFA vs #F5F5F5.
Accent: #F35815 (PlanetScale) vs #00BC7D (Upstash).
Headings: SF Mono / ui-monospace vs Inter Tight.
Display type: PlanetScale H1 is 20px Mono / -0.02em (w700); Upstash H1 is 128px / -0.025em (w700) — Upstash sets 108px larger headlines.
Primary button radius: 0px vs 10px; height 32px vs 40px.
Depth: PlanetScale shows no box-shadows; 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	PlanetScale	Upstash
Canvas	`#FAFAFA`	`#F5F5F5`
Surface same	`#FFFFFF`	`#FFFFFF`
Text	`#111111`	`#022C22`
Muted text	`#414141`	`#71717B`
Accent	`#F35815`	`#00BC7D`
Border	`#C1C1C1`	`rgba(0, 0, 0, 0.05)`
Heading font	`SF Mono / ui-monospace`	`Inter Tight`
Body font	`SF Mono / ui-monospace`	`Inter`
Mono font	`SF Mono / ui-monospace`	`JetBrains Mono`
H1	`20px Mono / -0.02em (w700)`	`128px / -0.025em (w700)`
Button radius	`0px`	`10px`
Button height	`32px`	`40px`
Most-used radius	`—`	`35.2px`
Most-used shadow	`none`	`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 same	`0.15s`	`0.15s`
Container max-width same	`1280px`	`1280px`
Mode same	`light`	`light`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get in touch	32px	`0px 8px`	`0px`	`#F35815` `#FFFFFF`	`none`	`16px / 600`
View sandbox	32px	`0px 8px`	`0px`	`transparent` `#414141`	`2px solid #F35815`	`16px / 600`

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 PlanetScale if you want Stark #FAFAFA technical manual canvas set entirely in system monospace with ASCII box-drawing diagrams, 1px #C1C1C1 / #414141 borders, 0px sharp corners, and #F35815 signal orange CTAs — signals: monospace, ascii, brutalist, database, mysql, postgres, planetscale, zero-radius, engineering, orange.

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: serverless, redis, kafka, emerald, green, oversized-type, upstash, inter-tight, devtools.

Shared traits: light.

Rules that differ

PlanetScale never:

NEVER substitute generic uncalibrated gray backgrounds for PlanetScale’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace SF Mono / ui-monospace display typography or ignore its signature scale (20px Mono / -0.02em (w700)).
NEVER use thick opaque borders that clash with #C1C1C1 (1px solid #C1C1C1).

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

PlanetScale style guide Upstash style guide PlanetScale token spec Upstash token spec PlanetScale vs Turso Supabase vs PlanetScale Neon vs Upstash Vercel vs Upstash Supabase vs Upstash Clerk vs Upstash

Values extracted from https://planetscale.com 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 →