What is PlanetScale's primary brand color?

PlanetScale runs three colors that do different jobs. The structural primary is graphite ink '#414141' — bound to the '--text-primary' and '--border-primary' CSS variables, it handles 175 text occurrences and 240 border occurrences across the entire page. The conversion voltage is orange '#f35815' (the '--orange-500' / '--text-orange' var), used as the single filled background on the 'Get in touch' CTA. The brand-identity voltage is yellow '#f2b600' (the '--yellow-300' var), scoped to one news pill near the hero — it appears nowhere else in the chrome. Pure black '#000000' is reserved for the H1 only.

What typography does PlanetScale use, and how is hierarchy expressed at one size?

Every text role on the marketing page is the system monospace stack — 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace' — at a single 16px font-size with 24px line-height. The hierarchy is built from weight alone: weight 400 (102 occurrences) carries body paragraphs and most prose, weight 600 (16 occurrences) carries nav links and H2 section labels, weight 700 (6 occurrences) carries the H1 'The world's fastest and most scalable cloud databases'. A handful of variants at weight 500 and -0.096px tracking sit on one or two spans. Substitute JetBrains Mono, IBM Plex Mono, or Geist Mono if the system stack isn't available — preserve the 16px / 1.5 line-height ratio across every role.

Why is 9999px the only declared border-radius?

PlanetScale's extracted radius array has exactly one entry — '9999px', used on the single news pill near the hero. Every other element on the page is a sharp 0px rectangle: the CTA, the nav links, the customer-logo cells, the architecture-diagram tiles, the benchmark table cells, the FAQ rows, the footer columns. The two-value radius vocabulary (0px on containers, 9999px on the one pill) is the brand's geometric signature. Don't introduce a 4px, 8px, or 12px corner anywhere — it breaks the dominant sharp-rectangle rhythm that gives the page its README-on-a-developer-blog feel.

Why does PlanetScale ship a full red/green/blue/purple/yellow ramp if the page is mostly graphite?

The CSS variable map declares the full 50/100/200/300/400/500/600/700/800/900/950 ramp for red, orange, yellow, green, blue, and purple — plus a one-off '#336791' bound to '--text-postgres' for the Postgres wordmark color. The marketing surface only renders three of these (graphite '#414141' ink, orange '#f35815' on the CTA, yellow '#f2b600' on the news pill); the rest belong to the in-product PlanetScale dashboard and to status states (success / error / warning chips) that aren't on the home page. Treat the wider palette as a reserve — ship it in CSS variables but don't paint a single marketing surface with it.

How should I treat the orange CTA in derived UI?

Use '#f35815' on exactly one filled button per surface — the page captured has one ('Get in touch') and the rest of the chrome is graphite-on-cream. The button itself is 32px tall, 8px horizontal padding, weight 600 at 16px in ui-monospace, with a 1px '#414141' border underneath the orange fill. Pair it with a ghost-buttoned 'Documentation' link in the nav that uses the same graphite ink color and a transparent fill. Don't escalate to a second orange button on the same page; don't tint sections with orange backgrounds; don't reuse the hue on chips or badges — orange is the conversion signal, not a decorative palette token.

Can I use this DESIGN.md to build my own React database-product page?

Yes — the file is structured for direct ingestion by Claude Code, Cursor, or any AI tool that reads token-based design specs. The agent reproduces PlanetScale's constraints (one monospace stack at 16px, graphite-on-cream chrome, single orange CTA per surface, sharp 0px corners with one 9999px pill exception) rather than inventing a generic dev-tooling theme. Every hex, font size, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or a custom React component library. Use the spec as an audit checklist against an existing developer-marketing page.

PlanetScale Design System

PlanetScale's design language as a DESIGN.md file.

About PlanetScale DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source planetscale.com

Backend, Database & DevOps
Developer Tools & IDEs

PlanetScale's landing page is a database product styled like a manpage. The hero headline, the customer-logo wall (Block, Etsy, Lume, Cash App, Notion, Verkada, Pinger, Dub), the architecture diagram for the Vitess and Postgres clusters, the benchmark tables, the latency line chart, the FAQ-style scroll, and the "Get in touch" CTA all sit in the same ui-monospace stack at the same 16px size. The hierarchy comes entirely from weight — 400 for paragraphs, 500 for one mid-tier label tier, 600 for nav links and H2 section labels, 700 for the H1 — and the canvas is a barely-warm off-white "#fafafa" with graphite text "#414141" doing 463 of the page's color occurrences. Where most database brands signal infrastructure-seriousness with a heavy sans-serif and a saturated CTA color band, PlanetScale signals it by setting the whole page in code-font and letting graphite ink do the work.

This DESIGN.md packages the system into one Google Labs spec file. Inside: 22 color tokens covering graphite ink "#414141", off-white canvas "#fafafa", deep contrast "#111111" used as the inverted bg, pure black "#000000" reserved for the H1, the orange "#f35815" CTA voltage, the yellow "#f2b600" news-pill chip, a quiet blue link "#0b6ec5", plus the full semantic ramp PlanetScale ships as CSS vars (red "#d92038", green "#13862e", purple "#5e49af", postgres-brand "#336791") — eight typography roles all on the system monospace stack at 16px, three radii (0px / 12px / 9999px), an 8-step spacing scale anchored on a 24px section unit, and seventeen components that mirror the actual structures on the page (the orange-filled CTA, the bordered ghost nav button, the customer logo cell, the architecture-diagram tile, the benchmark row, the news-pill chip).

Feed the file to Claude Code, Cursor, or Copilot and the agent will reproduce PlanetScale's restraint — every text role at 16px in ui-monospace, graphite-on-cream chrome, one saturated orange button per page, sharp 0px corners on everything that isn't the news pill. Reference the tokens directly in Tailwind config or use the spec as an audit checklist against an existing developer-tooling page. Where most Vitess and Postgres hosting brands escalate to a serif-display headline and a navy hero band, PlanetScale stays in monospace at one size and trusts that the typographic discipline reads as engineering confidence.

What makes it distinct

Single-size monospaceevery body, label, and H1 sits at 16px in the ui-monospace stack, with weight 400/600/700 doing the entire hierarchy
Graphite-over-cream chrome#414141 ink (463 occurrences) lives on a #fafafa canvas, with zero gray section bands across the full scroll
Lone orange CTA#f35815 fills exactly one button on the page and shows up nowhere else in the chrome
Yellow voltage scoped to a pill#f2b600 appears once, on the news chip near the hero, with no secondary surface ever painted in it
9999px is the only declared radiusevery other rectangle in the system is sharp 0px, with no soft-card vocabulary anywhere

Live at planetscale.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

planetscale.com

Explore PlanetScale

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

PlanetScale design system FAQ

Common questions about PlanetScale's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

PlanetScale — official site

The world's fastest and most scalable cloud hosting for Vitess and Postgres.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use PlanetScale in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→