PlanetScale Design System
Light · Generated 19/04/2026 · 13 extracted colors · 12 type tokens · 12 spacing steps · 5 breakpoints · 1 motion token · Full semantic system in :root
v1.0.0
Color Palette
Two-layer color system: The extractor found only 13 actively used tokens on the marketing page. But PlanetScale's :root defines a complete multi-spectrum palette (grays, reds, oranges, yellows, greens, blues, purples — each with 10 steps) plus semantic aliases. Both layers are shown below.
Extracted — Text Colors
Black (×243)
#000000
Dark Gray (×844)
#414141
Mid Gray (×16)
#737373
Light Gray (×25)
#C1C1C1
White (×10)
#FFFFFF
Blue (×76)
#006BD7
Extracted — Background & Status Colors
White 2 (×6)
#FAFAFA
Light Gray 2 (×1)
#EBEBEB
Dark Gray 2 (×3)
#111111
Yellow (×1)
#F2B600
Orange (×1)
#FF4400
Orange 2 (border)
#F35815
Red
#C11027
Full Gray Scale (from :root custom properties)
gray-50
#fafafa
gray-100
#ebebeb
gray-200
#e1e1e1
gray-300
#c1c1c1
gray-400
#a1a1a1
gray-500
#818181
gray-550
#737373
gray-600
#616161
gray-700
#414141
gray-800
#2b2b2b
gray-850
#1a1a1a
gray-900
#111111
Note the gray-550 half-step (#737373) — PlanetScale is the only brand in this series to use fractional gray steps. The system includes full 10-step palettes for red, orange, yellow, green, blue, and purple.
Typography
ui-sans-serif (system default)
System Sans
The world's most scalable serverless MySQL database — powered by Vitess and Postgres.
Regular 400 Medium 500 Semibold 600 Bold 700
ui-monospace (system mono)
Monospace
SELECT * FROM users WHERE tier = 'enterprise';
Regular 400
Fewest font-size tokens in the series: PlanetScale defines only 2 font sizes — 12px and 16px — both are system UI sizes with no intermediate steps. This is intentional: PlanetScale uses ui-sans-serif and ui-monospace (OS-native fonts) rather than loaded typefaces. The marketing page is dense and data-heavy — not a high-gloss editorial site. Compare to Craft's 18 sizes or Zapier's 14 sizes.
World's fastest serverless MySQL
Body · 16px · Bold · ui-sans-serif · line-height: 24px · letter-spacing: −0.096px
PlanetScale — Powered by Vitess and Postgres
Body · 16px · Semibold · line-height: 20px
Scale to billions of rows, with zero-downtime schema changes and automatic branching for database workflows.
Body · 16px · Regular · color: text-secondary (#737373)
VITESS · POSTGRES · MYSQL · BRANCHING
Caption · 12px · Semibold · uppercase · letter-spacing: +0.5px
Last query executed 0.42ms · 8.2 million rows scanned
Caption · 12px · Regular · line-height: 20px
SELECT id, email FROM users LIMIT 100;
Mono Caption · 12px · Regular · ui-monospace · text-blue (#006BD7)
Line Heights
Tight
16px
Snug
20px
Normal
24px
Letter Spacing
PlanetScale
Tight · −0.096px
The only letter-spacing token · applied globally · very subtle tightening to counteract ui-sans-serif loose defaults
SELECT * FROM databases
WHERE region = 'us-east';
Mono — no tracking
ui-monospace uses default tracking — the −0.096px applies to sans only
Spacing
Spacing Scale
12 tokens — 4px → 96px · A clean 4-based scale, with one fractional token (9.63px)
4
8
9.6
12
16
24
32
40
48
56
80
96
PlanetScale's spacing is the most compact and regular of all 22 brands — 12 tokens on a near-perfect 4-unit grid (4, 8, 12, 16, 24, 32, 40, 48, 56, 80, 96). The single exception is --space-3: 9.63281px — a computed fractional value at 60% of a 16px step, likely from a calc() expression in the layout engine.
Borders
Border Radius
Pill / Full
9999px
PlanetScale defines only one radius token — --radius-sm: 9999px — and it's a fully-round pill. There are no intermediate radii (no 4px, 8px, 12px). This is the most minimal radius system across all 22 brands. The pill is used for badges and tags; all cards and inputs use a computed ~6px from inline styles or Tailwind utilities not captured as tokens.
Border Widths
--border-width-hairline
1px · primary (×129) — all cards, table rows, inputs, dividers
--border-width-thin
2px · emphasis (×7) — active state borders, focus rings, selected rows
1px vs 2px — the complete border width vocabulary. The 1px carries 94% of all border usage. The 2px appears on active database branch indicators and selected navigation items.
Shadow / Elevation
No Shadow Tokens Defined
PlanetScale defines zero box-shadow tokens
No shadow tokens detected. PlanetScale joins Zapier and xAI with zero shadow tokens. Elevation in the UI is expressed entirely through border contrast — the 1px #EBEBEB border on a #FAFAFA background creates subtle card definition without depth. This "flat with borders" approach is consistent with the product's technical, data-dense aesthetic — shadows feel decorative; borders feel functional. PlanetScale is the only database product in this series with no shadows.
Z-Index
No z-index tokens defined. PlanetScale's extracted design system contains an empty z-index object (zIndex: {}). The product UI uses Tailwind's default z-index scale utilities inline rather than defining custom semantic z-index tokens. This is consistent with their minimal token philosophy — only values that appear in CSS custom properties are surfaced. PlanetScale shares this pattern with Craft and xAI.
Breakpoints
📱
--breakpoint-xs
640px
Mobile max / small phone landscape
📱
--breakpoint-sm
768px
Tablet portrait
💻
--breakpoint-md
1024px
Tablet landscape / small laptop
🖥️
--breakpoint-lg
1280px
Desktop standard
🖥️
--breakpoint-xl
1536px
Wide desktop / 2K+
These are Tailwind's default breakpoints verbatim (640/768/1024/1280/1536px). PlanetScale uses Tailwind utilities as its CSS foundation — the breakpoints in the :root are the Tailwind defaults propagated directly, not custom design decisions. This is the cleanest standard breakpoint set in this series alongside Vercel's similar approach.
Opacity
Opacity Tokens
1 token — the sparsest opacity system in this series
--opacity-30
30% · ×2
A single 30% opacity token — used in exactly 2 places on the marketing page. PlanetScale's minimal opacity system reflects its use of Tailwind utilities for most opacity work. The 30% value (×2) likely appears on the yellow/orange status indicators when in a muted/inactive state. Compare to Craft's 8 opacity tokens or WIRED's 11.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-black--color-white-2 (#FAFAFA)20.12:1AAA
--color-black--color-yellow (#F2B600)11.47:1AAA
--color-black--color-light-gray-2 (#EBEBEB)17.62:1AAA
--color-dark-gray--color-white-2 (#FAFAFA)9.78:1AAA
--color-dark-gray--color-light-gray-2 (#EBEBEB)8.56:1AAA
--color-dark-gray--color-yellow5.57:1AA
--color-mid-gray--color-white-24.54:1AA
--color-mid-gray--color-dark-gray-2 (#111111)3.98:1AA Large
--color-blue--color-white-24.93:1AA
--color-blue--color-dark-gray-2 (#111111)3.67:1AA Large
--color-light-gray--color-dark-gray-2 (#111111)10.49:1AAA
--color-dark-gray--color-orange (#FF4400)2.95:1Fail
--color-dark-gray--color-dark-gray-2 (#111111)1.85:1Fail
--color-light-gray--color-white-21.72:1Fail
--color-blue--color-yellow2.81:1Fail
--color-blue--color-orange1.49:1Fail
CSS Variables Reference
Extracted Color Tokens13 tokens
Black (×243)--color-black#000000
Dark Gray (×844)--color-dark-gray#414141
Mid Gray (×16)--color-mid-gray#737373
Light Gray (×25)--color-light-gray#C1C1C1
White (×10)--color-white#FFFFFF
White 2 (×6)--color-white-2#FAFAFA
Light Gray 2--color-light-gray-2#EBEBEB
Dark Gray 2 (×3)--color-dark-gray-2#111111
Blue (×76)--color-blue#006BD7
Yellow (×1)--color-yellow#F2B600
Orange (×1)--color-orange#FF4400
Orange 2 (border)--color-orange-2#F35815
Red (fill)--color-red#C11027
Semantic Aliases, Typography & All Tokensselected
Text Contrast--text-contrastvar(--black)
Text Primary--text-primarygray-700 (#414141)
Text Secondary--text-secondarygray-550 (#737373)
Text Decoration--text-decorationgray-300 (#c1c1c1)
Text Disabled--text-disabledgray-400 (#a1a1a1)
BG Primary--bg-primarygray-50 (#fafafa)
BG Secondary--bg-secondarygray-100 (#ebebeb)
BG Inverted--bg-invertedgray-900 (#111111)
Postgres brand--text-postgres#336791
ui-sans-serif--font-family-baseui-sans-serif
ui-monospace--font-family-2ui-monospace
Caption (only 2 sizes!)--font-size-2xs12px
Body (only 2 sizes!)--font-size-xs16px
Tight (−0.096px)--letter-spacing-tight−0.096px
Instant (×155)--duration-instant150ms (only 1!)
No easing detectedeasing—
Ghost 30% (only 1!)--opacity-3030%
Pill (only radius!)--radius-sm9999px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
No shadows definedshadow—
No z-index definedz-index—
Design System Preview · PlanetScale (Light) · Generated 19/04/2026 · 13 extracted color tokens · 2 font-size · 2 font-family · 4 font-weight · 3 line-height · 1 letter-spacing · 12 spacing · 1 radius · 2 border-width · 0 shadow · 1 duration · 0 easing · 0 z-index · 5 breakpoints · 1 opacity · Full semantic :root system