PlanetScale — design system & UI screens

Dev Tools · 2 screens · 16 sections · planetscale.com

A text-forward, document-style landing page on a white background: a thin black announcement bar runs across the very top, then a small black logo and inline nav sit above a left-aligned headline ("The world's fastest and most scalable cloud databases") with no big hero image. The signature element is the enormous 6-column customer logo wall (block, Etsy, Intercom, Cursor, Slack, Clerk and dozens more) that dominates the upper page, followed by a Vitess/Postgres/Neki tabbed panel containing a hand-drawn-style sharding architecture diagram (VTGate -> Primary -> Replica nodes) and an embedded performance latency chart. Spare, editorial typography with orange accent ticks and customer pull-quotes gives it an engineering-report rather than marketing-splash feel.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/planetscale.

Decoded design system

PlanetScale's decoded design system: background #FAFAFA, text #414141, accent #F35815, link #F35815, primary #0B6EC5; type scale h1 16px / h2 16px / body 16px; 8px spacing base; 0px base radius. The single interactive/action color is #F35815 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FAFAFA`
surface	`#EEEEEE`
border	`#DEDEDE`
text	`#414141`
text_muted	`#878787`
primary	`#0B6EC5`
accent	`#F35815`
link	`#F35815`
secondary	`#F2B600`
button_bg	`#F35815`
button_text	`#FFFFFF`

Using these colors

Action color #F35815 — the single interactive color; only on things you click or must notice, never large fills.
accent, link, button_bg are all #F35815 — one role, not several (the action color).
accent #F35815 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #0B6EC5 — a brand color — but the call-to-action uses #F35815, not this.
secondary #F2B600 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: SF Mono
Body: SF Mono
Mono: ui-monospace
h1: 16px
h2: 16px
body: 16px

Spacing

base unit: 8px
scale: 4px, 8px, 10px, 12px, 16px, 24px, 40px, 96px

Radii

base: 0px
button: 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms
easings: cubic-bezier(0.4, 0, 0.2, 1)
animated properties: color, background-color, border-color, text-decoration-color

Native design tokens

Token	Value
`--white`	`#FFFFFF`
`--black`	`#000000`
`--gray-50`	`#fafafa`
`--gray-100`	`#ebebeb`
`--gray-200`	`#e1e1e1`
`--gray-300`	`#c1c1c1`
`--gray-400`	`#a1a1a1`
`--gray-500`	`#818181`
`--gray-550`	`#737373`
`--gray-600`	`#616161`

…and 90 more measured on the page.

Button states (measured)

primary focus: box-shadow rgb(250, 250, 250) 0px 0px 0px 2px, rgb(30, 157, 231) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px · outline 2px solid rgba(0, 0, 0, 0)

Layout (measured)

container max-width: 1090px
nav: 32px relative

Themes

dark counterpart: background #111111, text #E1E1E1.

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px
mobile (390px): hero 16px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →